@inkbar/vue 0.8.0 → 0.10.0

package/dist/components/InkSignatureMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureMenu.js","names":["_sfc_main","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","InkSignatureMenu_default"],"sources":["../../src/components/InkSignatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the signature tool. The main part activates the tool with the chosen\n * signature, or opens the menu when none is chosen; the chevron opens the saved signatures as\n * previews, each with a remove button, and \"Create signature\", which opens\n * `InkSignatureDialog`. Choosing a signature switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Signature } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\nimport SignatureMenuPanel from './SignatureMenuPanel.vue'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\ndefineOptions({ inheritAttrs: false })\nconst props = defineProps<{\n  /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\n\nconst NO_TEMPLATES: readonly SignatureTemplate[] = []\n\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<SignatureOptions>('signature')\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\nconst model = computed(() => signatureMenuModel(templates.value, options.value))\nconst active = computed(() => tool.value === 'signature')\nconst open = ref(false)\nconst creating = ref(false)\n// An old removal error is not news when the menu opens again.\nwatch(open, (isOpen) => {\n  if (isOpen) ctx.signatures.value.clearRemoveError()\n})\nconst main = useTemplateRef<{ $el: HTMLElement }>('main')\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\n/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */\nlet toDialog = false\n\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\n// Not a signature field's menu, which shares the attribute.\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>(\n    '[data-ink-menu=\"signature\"]:not([data-ink-sign-field-menu]) [role=\"menu\"]'\n  )\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  const menu = panel()\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction onCloseAutoFocus(e: Event): void {\n  if (toDialog) e.preventDefault()\n  toDialog = false\n}\n\nfunction onMain(): void {\n  if (model.value.selected) setTool('signature')\n  else open.value = true\n}\n\nfunction choose(id: string): void {\n  setOptions({ templateId: id })\n  setTool('signature')\n  open.value = false\n}\n\nfunction create(): void {\n  toDialog = true\n  open.value = false\n  creating.value = true\n}\n\nfunction onDialogCloseAutoFocus(e: Event): void {\n  e.preventDefault()\n  main.value?.$el.focus({ preventScroll: true })\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': SIGNATURE_LABELS.sign,\n  title: SIGNATURE_LABELS.sign,\n  onClick: onMain,\n}))\nconst triggerAttrs = {\n  'aria-label': SIGNATURE_LABELS.trigger,\n  title: SIGNATURE_LABELS.trigger,\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': SIGNATURE_LABELS.menu }\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverAnchor as-child>\n      <div\n        role=\"group\"\n        :aria-label=\"SIGNATURE_LABELS.sign\"\n        class=\"ink-split-button ink-signature-menu\"\n        data-ink-signature-menu\n        v-bind=\"$attrs\"\n      >\n        <ToolbarButton\n          ref=\"main\"\n          class=\"ink-tool-button ink-signature-button\"\n          data-ink-tool-button\n          data-ink-signature-button\n          data-tool=\"signature\"\n          :data-state=\"active ? 'on' : 'off'\"\n          v-bind=\"mainAttrs\"\n        >\n          <slot :active=\"active\"><InkIcon :icon=\"Signature\" /></slot>\n        </ToolbarButton>\n        <ToolbarButton as-child>\n          <PopoverTrigger as-child>\n            <button\n              type=\"button\"\n              class=\"ink-menu-trigger ink-signature-menu-trigger\"\n              data-ink-signature-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=\"signature\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"4\"\n            :collision-padding=\"8\"\n            v-bind=\"menuAttrs\"\n            @open-auto-focus=\"onOpenAutoFocus\"\n            @close-auto-focus=\"onCloseAutoFocus\"\n          >\n            <SignatureMenuPanel\n              :items=\"model.items\"\n              @choose=\"choose($event.id)\"\n              @create=\"create\"\n            />\n          </PopoverContent>\n        </PopoverPortal>\n        <InkSignatureDialog\n          v-model:open=\"creating\"\n          :fonts=\"props.fonts\"\n          @close-auto-focus=\"onDialogCloseAutoFocus\"\n        />\n      </div>\n    </PopoverAnchor>\n  </PopoverRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkSignatureMenu.js","names":["_sfc_main","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","InkSignatureMenu_default"],"sources":["../../src/components/InkSignatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the signature tool. The main part activates the tool with the chosen\n * signature, or opens the menu when none is chosen; the chevron opens the saved signatures as\n * previews, each with a remove button, and \"Create signature\", which opens\n * `InkSignatureDialog`. Choosing a signature switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Signature } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\n\nimport { useRegisteredTool } from '../composables/useRegisteredTool'\nimport { useTool } from '../composables/useTool'\nimport { useToolOptionsWhile } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\nimport SignatureMenuPanel from './SignatureMenuPanel.vue'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\ndefineOptions({ inheritAttrs: false })\nconst props = defineProps<{\n  /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\n\nconst NO_TEMPLATES: readonly SignatureTemplate[] = []\n\nconst { tool, setTool } = useTool()\n// Nothing renders while no `signature` tool is registered.\nconst registered = useRegisteredTool('signature')\nconst { options, setOptions } = useToolOptionsWhile<SignatureOptions>(\n  'signature',\n  registered\n)\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\nconst model = computed(() => signatureMenuModel(templates.value, options.value))\nconst active = computed(() => tool.value === 'signature')\nconst open = ref(false)\nconst creating = ref(false)\n// An old removal error is not news when the menu opens again.\nwatch(open, (isOpen) => {\n  if (isOpen) ctx.signatures.value.clearRemoveError()\n})\nconst main = useTemplateRef<{ $el: HTMLElement }>('main')\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\n/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */\nlet toDialog = false\n\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\n// Not a signature field's menu, which shares the attribute.\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>(\n    '[data-ink-menu=\"signature\"]:not([data-ink-sign-field-menu]) [role=\"menu\"]'\n  )\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  const menu = panel()\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction onCloseAutoFocus(e: Event): void {\n  if (toDialog) e.preventDefault()\n  toDialog = false\n}\n\nfunction onMain(): void {\n  if (model.value.selected) setTool('signature')\n  else open.value = true\n}\n\nfunction choose(id: string): void {\n  setOptions({ templateId: id })\n  setTool('signature')\n  open.value = false\n}\n\nfunction create(): void {\n  toDialog = true\n  open.value = false\n  creating.value = true\n}\n\nfunction onDialogCloseAutoFocus(e: Event): void {\n  e.preventDefault()\n  main.value?.$el.focus({ preventScroll: true })\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': SIGNATURE_LABELS.sign,\n  title: SIGNATURE_LABELS.sign,\n  onClick: onMain,\n}))\nconst triggerAttrs = {\n  'aria-label': SIGNATURE_LABELS.trigger,\n  title: SIGNATURE_LABELS.trigger,\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': SIGNATURE_LABELS.menu }\n</script>\n\n<template>\n  <PopoverRoot v-if=\"registered\" v-model:open=\"open\">\n    <PopoverAnchor as-child>\n      <div\n        role=\"group\"\n        :aria-label=\"SIGNATURE_LABELS.sign\"\n        class=\"ink-split-button ink-signature-menu\"\n        data-ink-signature-menu\n        v-bind=\"$attrs\"\n      >\n        <ToolbarButton\n          ref=\"main\"\n          class=\"ink-tool-button ink-signature-button\"\n          data-ink-tool-button\n          data-ink-signature-button\n          data-tool=\"signature\"\n          :data-state=\"active ? 'on' : 'off'\"\n          v-bind=\"mainAttrs\"\n        >\n          <slot :active=\"active\"><InkIcon :icon=\"Signature\" /></slot>\n        </ToolbarButton>\n        <ToolbarButton as-child>\n          <PopoverTrigger as-child>\n            <button\n              type=\"button\"\n              class=\"ink-menu-trigger ink-signature-menu-trigger\"\n              data-ink-signature-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=\"signature\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"4\"\n            :collision-padding=\"8\"\n            v-bind=\"menuAttrs\"\n            @open-auto-focus=\"onOpenAutoFocus\"\n            @close-auto-focus=\"onCloseAutoFocus\"\n          >\n            <SignatureMenuPanel\n              :items=\"model.items\"\n              @choose=\"choose($event.id)\"\n              @create=\"create\"\n            />\n          </PopoverContent>\n        </PopoverPortal>\n        <InkSignatureDialog\n          v-model:open=\"creating\"\n          :fonts=\"props.fonts\"\n          @close-auto-focus=\"onDialogCloseAutoFocus\"\n        />\n      </div>\n    </PopoverAnchor>\n  </PopoverRoot>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkSignatureMenu.vue"],"names":[],"mappings":"AAqOA,KAAK,WAAW,GAAG;IACjB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CACtC,CAAC;AAsVF,QAAA,IAAI,QAAQ;;CAAY,CAAC;AACzB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAGhD,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"InkSignatureMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkSignatureMenu.vue"],"names":[],"mappings":"AA4OA,KAAK,WAAW,GAAG;IACjB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CACtC,CAAC;AAkWF,QAAA,IAAI,QAAQ;;CAAY,CAAC;AACzB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAGhD,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkSignatureMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,97 +1,99 @@
 import { useInkContext as e } from "../context.js";
-import { useReadable as t } from "../use-readable.js";
-import { useTool as n } from "../composables/useTool.js";
-import { useToolOptions as r } from "../composables/useToolOptions.js";
-import i from "./InkSignatureDialog.js";
-import a from "./InkIcon.js";
-import o from "./SignatureMenuPanel.js";
-import { computed as s, createBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, openBlock as p, ref as m, renderSlot as ee, unref as h, useTemplateRef as g, watch as _, withCtx as v } from "vue";
-import { SIGNATURE_LABELS as y, focusInitialMenuItem as b, menuItems as x, signatureMenuModel as S } from "@inkbar/core/dom";
-import { PopoverAnchor as C, PopoverContent as w, PopoverPortal as T, PopoverRoot as E, PopoverTrigger as D, ToolbarButton as O } from "reka-ui";
-import { ChevronDown as k, Signature as A } from "@inkbar/icons";
+import { useRegisteredTool as t } from "../composables/useRegisteredTool.js";
+import { useReadable as n } from "../use-readable.js";
+import { useTool as r } from "../composables/useTool.js";
+import { useToolOptionsWhile as i } from "../composables/useToolOptions.js";
+import a from "./InkSignatureDialog.js";
+import o from "./InkIcon.js";
+import s from "./SignatureMenuPanel.js";
+import { computed as c, createBlock as l, createCommentVNode as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeProps as m, openBlock as h, ref as g, renderSlot as _, unref as v, useTemplateRef as y, watch as b, withCtx as x } from "vue";
+import { SIGNATURE_LABELS as S, focusInitialMenuItem as C, menuItems as w, signatureMenuModel as T } from "@inkbar/core/dom";
+import { PopoverAnchor as E, PopoverContent as D, PopoverPortal as O, PopoverRoot as k, PopoverTrigger as A, ToolbarButton as j } from "reka-ui";
+import { ChevronDown as M, Signature as N } from "@inkbar/icons";
 //#region src/components/InkSignatureMenu.vue?vue&type=script&setup=true&lang.ts
-var j = ["aria-label"], M = ["data-state"], N = /*@__PURE__*/ d({
+var P = ["aria-label"], F = ["data-state"], I = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "InkSignatureMenu",
 	props: { fonts: {} },
-	setup(d) {
-		let N = d, P = [], { tool: F, setTool: I } = n(), { options: L, setOptions: R } = r("signature"), z = e("InkSignatureMenu"), B = t(() => z.signatures.value.templates, P), V = s(() => S(B.value, L.value)), H = s(() => F.value === "signature"), U = m(!1), W = m(!1);
-		_(U, (e) => {
-			e && z.signatures.value.clearRemoveError();
+	setup(p) {
+		let I = p, L = [], { tool: R, setTool: z } = r(), B = t("signature"), { options: ee, setOptions: V } = i("signature", B), H = e("InkSignatureMenu"), U = n(() => H.signatures.value.templates, L), W = c(() => T(U.value, ee.value)), G = c(() => R.value === "signature"), K = g(!1), q = g(!1);
+		b(K, (e) => {
+			e && H.signatures.value.clearRemoveError();
 		});
-		let G = g("main"), K = !1, q = !1;
-		function J(e) {
-			e.key !== "ArrowDown" || e.defaultPrevented || U.value || (e.preventDefault(), K = !0, U.value = !0);
+		let J = y("main"), Y = !1, X = !1;
+		function Z(e) {
+			e.key !== "ArrowDown" || e.defaultPrevented || K.value || (e.preventDefault(), Y = !0, K.value = !0);
 		}
-		let Y = () => document.querySelector("[data-ink-menu=\"signature\"]:not([data-ink-sign-field-menu]) [role=\"menu\"]");
-		function X(e) {
+		let Q = () => document.querySelector("[data-ink-menu=\"signature\"]:not([data-ink-sign-field-menu]) [role=\"menu\"]");
+		function $(e) {
 			e.preventDefault();
-			let t = Y();
-			t && (K ? x(t)[0]?.focus({ preventScroll: !0 }) : b(t)), K = !1;
+			let t = Q();
+			t && (Y ? w(t)[0]?.focus({ preventScroll: !0 }) : C(t)), Y = !1;
 		}
-		function Z(e) {
-			q && e.preventDefault(), q = !1;
+		function te(e) {
+			X && e.preventDefault(), X = !1;
 		}
-		function Q() {
-			V.value.selected ? I("signature") : U.value = !0;
+		function ne() {
+			W.value.selected ? z("signature") : K.value = !0;
 		}
-		function $(e) {
-			R({ templateId: e }), I("signature"), U.value = !1;
+		function re(e) {
+			V({ templateId: e }), z("signature"), K.value = !1;
 		}
-		function te() {
-			q = !0, U.value = !1, W.value = !0;
+		function ie() {
+			X = !0, K.value = !1, q.value = !0;
 		}
-		function ne(e) {
-			e.preventDefault(), G.value?.$el.focus({ preventScroll: !0 });
+		function ae(e) {
+			e.preventDefault(), J.value?.$el.focus({ preventScroll: !0 });
 		}
-		let re = s(() => ({
-			"aria-pressed": String(H.value),
-			"aria-label": y.sign,
-			title: y.sign,
-			onClick: Q
-		})), ie = {
-			"aria-label": y.trigger,
-			title: y.trigger,
+		let oe = c(() => ({
+			"aria-pressed": String(G.value),
+			"aria-label": S.sign,
+			title: S.sign,
+			onClick: ne
+		})), se = {
+			"aria-label": S.trigger,
+			title: S.trigger,
 			"aria-haspopup": "menu",
-			onKeydown: J
-		}, ae = { "aria-label": y.menu };
-		return (e, t) => (p(), c(h(E), {
-			open: U.value,
-			"onUpdate:open": t[2] ||= (e) => U.value = e
+			onKeydown: Z
+		}, ce = { "aria-label": S.menu };
+		return (e, t) => v(B) ? (h(), l(v(k), {
+			key: 0,
+			open: K.value,
+			"onUpdate:open": t[2] ||= (e) => K.value = e
 		}, {
-			default: v(() => [u(h(C), { "as-child": "" }, {
-				default: v(() => [l("div", f({
+			default: x(() => [f(v(E), { "as-child": "" }, {
+				default: x(() => [d("div", m({
 					role: "group",
-					"aria-label": h(y).sign,
+					"aria-label": v(S).sign,
 					class: "ink-split-button ink-signature-menu",
 					"data-ink-signature-menu": ""
 				}, e.$attrs), [
-					u(h(O), f({
+					f(v(j), m({
 						ref_key: "main",
-						ref: G,
+						ref: J,
 						class: "ink-tool-button ink-signature-button",
 						"data-ink-tool-button": "",
 						"data-ink-signature-button": "",
 						"data-tool": "signature",
-						"data-state": H.value ? "on" : "off"
-					}, re.value), {
-						default: v(() => [ee(e.$slots, "default", { active: H.value }, () => [u(a, { icon: h(A) }, null, 8, ["icon"])])]),
+						"data-state": G.value ? "on" : "off"
+					}, oe.value), {
+						default: x(() => [_(e.$slots, "default", { active: G.value }, () => [f(o, { icon: v(N) }, null, 8, ["icon"])])]),
 						_: 3
 					}, 16, ["data-state"]),
-					u(h(O), { "as-child": "" }, {
-						default: v(() => [u(h(D), { "as-child": "" }, {
-							default: v(() => [l("button", f({
+					f(v(j), { "as-child": "" }, {
+						default: x(() => [f(v(A), { "as-child": "" }, {
+							default: x(() => [d("button", m({
 								type: "button",
 								class: "ink-menu-trigger ink-signature-menu-trigger",
 								"data-ink-signature-menu-trigger": "",
-								"data-state": U.value ? "open" : "closed"
-							}, ie), [u(a, { icon: h(k) }, null, 8, ["icon"])], 16, M)]),
+								"data-state": K.value ? "open" : "closed"
+							}, se), [f(o, { icon: v(M) }, null, 8, ["icon"])], 16, F)]),
 							_: 1
 						})]),
 						_: 1
 					}),
-					u(h(T), null, {
-						default: v(() => [u(h(w), f({
+					f(v(O), null, {
+						default: x(() => [f(v(D), m({
 							class: "ink-select-content ink-menu-content",
 							"data-ink-select-content": "",
 							"data-ink-menu": "signature",
@@ -99,33 +101,33 @@ var j = ["aria-label"], M = ["data-state"], N = /*@__PURE__*/ d({
 							align: "start",
 							"side-offset": 4,
 							"collision-padding": 8
-						}, ae, {
-							onOpenAutoFocus: X,
-							onCloseAutoFocus: Z
+						}, ce, {
+							onOpenAutoFocus: $,
+							onCloseAutoFocus: te
 						}), {
-							default: v(() => [u(o, {
-								items: V.value.items,
-								onChoose: t[0] ||= (e) => $(e.id),
-								onCreate: te
+							default: x(() => [f(s, {
+								items: W.value.items,
+								onChoose: t[0] ||= (e) => re(e.id),
+								onCreate: ie
 							}, null, 8, ["items"])]),
 							_: 1
 						}, 16)]),
 						_: 1
 					}),
-					u(i, {
-						open: W.value,
-						"onUpdate:open": t[1] ||= (e) => W.value = e,
-						fonts: N.fonts,
-						onCloseAutoFocus: ne
+					f(a, {
+						open: q.value,
+						"onUpdate:open": t[1] ||= (e) => q.value = e,
+						fonts: I.fonts,
+						onCloseAutoFocus: ae
 					}, null, 8, ["open", "fonts"])
-				], 16, j)]),
+				], 16, P)]),
 				_: 3
 			})]),
 			_: 3
-		}, 8, ["open"]));
+		}, 8, ["open"])) : u("", !0);
 	}
 });
 //#endregion
-export { N as default };
+export { I as default };
 
 //# sourceMappingURL=InkSignatureMenu.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createElementVNode","_mergeProps","_renderSlot","InkIcon","SignatureMenuPanel","InkSignatureDialog","InkSignatureDialog_default","InkIcon_default","SignatureMenuPanel_default","_hoisted_1","_hoisted_2","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","props","__props","NO_TEMPLATES","useTool","useToolOptions","ctx","useInkContext","templates","useReadable","model","computed","signatureMenuModel","options","active","tool","open","ref","creating","isOpen","main","useTemplateRef","focusFirst","toDialog","onTriggerKeydown","panel","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","onCloseAutoFocus","onMain","setTool","choose","setOptions","id","create","onDialogCloseAutoFocus","mainAttrs","SIGNATURE_LABELS","triggerAttrs","menuAttrs","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","createElementVNode","mergeProps","_ctx","ToolbarButton","renderSlot","Signature","PopoverTrigger","ChevronDown","PopoverPortal","PopoverContent"],"sources":["../../src/components/InkSignatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the signature tool. The main part activates the tool with the chosen\n * signature, or opens the menu when none is chosen; the chevron opens the saved signatures as\n * previews, each with a remove button, and \"Create signature\", which opens\n * `InkSignatureDialog`. Choosing a signature switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Signature } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\nimport SignatureMenuPanel from './SignatureMenuPanel.vue'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\ndefineOptions({ inheritAttrs: false })\nconst props = defineProps<{\n  /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\n\nconst NO_TEMPLATES: readonly SignatureTemplate[] = []\n\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<SignatureOptions>('signature')\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\nconst model = computed(() => signatureMenuModel(templates.value, options.value))\nconst active = computed(() => tool.value === 'signature')\nconst open = ref(false)\nconst creating = ref(false)\n// An old removal error is not news when the menu opens again.\nwatch(open, (isOpen) => {\n  if (isOpen) ctx.signatures.value.clearRemoveError()\n})\nconst main = useTemplateRef<{ $el: HTMLElement }>('main')\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\n/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */\nlet toDialog = false\n\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\n// Not a signature field's menu, which shares the attribute.\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>(\n    '[data-ink-menu=\"signature\"]:not([data-ink-sign-field-menu]) [role=\"menu\"]'\n  )\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  const menu = panel()\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction onCloseAutoFocus(e: Event): void {\n  if (toDialog) e.preventDefault()\n  toDialog = false\n}\n\nfunction onMain(): void {\n  if (model.value.selected) setTool('signature')\n  else open.value = true\n}\n\nfunction choose(id: string): void {\n  setOptions({ templateId: id })\n  setTool('signature')\n  open.value = false\n}\n\nfunction create(): void {\n  toDialog = true\n  open.value = false\n  creating.value = true\n}\n\nfunction onDialogCloseAutoFocus(e: Event): void {\n  e.preventDefault()\n  main.value?.$el.focus({ preventScroll: true })\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': SIGNATURE_LABELS.sign,\n  title: SIGNATURE_LABELS.sign,\n  onClick: onMain,\n}))\nconst triggerAttrs = {\n  'aria-label': SIGNATURE_LABELS.trigger,\n  title: SIGNATURE_LABELS.trigger,\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': SIGNATURE_LABELS.menu }\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverAnchor as-child>\n      <div\n        role=\"group\"\n        :aria-label=\"SIGNATURE_LABELS.sign\"\n        class=\"ink-split-button ink-signature-menu\"\n        data-ink-signature-menu\n        v-bind=\"$attrs\"\n      >\n        <ToolbarButton\n          ref=\"main\"\n          class=\"ink-tool-button ink-signature-button\"\n          data-ink-tool-button\n          data-ink-signature-button\n          data-tool=\"signature\"\n          :data-state=\"active ? 'on' : 'off'\"\n          v-bind=\"mainAttrs\"\n        >\n          <slot :active=\"active\"><InkIcon :icon=\"Signature\" /></slot>\n        </ToolbarButton>\n        <ToolbarButton as-child>\n          <PopoverTrigger as-child>\n            <button\n              type=\"button\"\n              class=\"ink-menu-trigger ink-signature-menu-trigger\"\n              data-ink-signature-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=\"signature\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"4\"\n            :collision-padding=\"8\"\n            v-bind=\"menuAttrs\"\n            @open-auto-focus=\"onOpenAutoFocus\"\n            @close-auto-focus=\"onCloseAutoFocus\"\n          >\n            <SignatureMenuPanel\n              :items=\"model.items\"\n              @choose=\"choose($event.id)\"\n              @create=\"create\"\n            />\n          </PopoverContent>\n        </PopoverPortal>\n        <InkSignatureDialog\n          v-model:open=\"creating\"\n          :fonts=\"props.fonts\"\n          @close-auto-focus=\"onDialogCloseAutoFocus\"\n        />\n      </div>\n    </PopoverAnchor>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"InkSignatureMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_unref","_openBlock","_createBlock","_withCtx","_createVNode","_createElementVNode","_mergeProps","_renderSlot","InkIcon","SignatureMenuPanel","InkSignatureDialog","_createCommentVNode","InkSignatureDialog_default","InkIcon_default","SignatureMenuPanel_default","_hoisted_1","_hoisted_2","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","props","__props","NO_TEMPLATES","useTool","registered","useRegisteredTool","useToolOptionsWhile","ctx","useInkContext","templates","useReadable","model","computed","signatureMenuModel","options","active","tool","open","ref","creating","isOpen","main","useTemplateRef","focusFirst","toDialog","onTriggerKeydown","panel","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","onCloseAutoFocus","onMain","setTool","choose","setOptions","id","create","onDialogCloseAutoFocus","mainAttrs","SIGNATURE_LABELS","triggerAttrs","menuAttrs","unref","openBlock","createBlock","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","createElementVNode","mergeProps","_ctx","ToolbarButton","renderSlot","Signature","PopoverTrigger","ChevronDown","PopoverPortal","PopoverContent","createCommentVNode"],"sources":["../../src/components/InkSignatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the signature tool. The main part activates the tool with the chosen\n * signature, or opens the menu when none is chosen; the chevron opens the saved signatures as\n * previews, each with a remove button, and \"Create signature\", which opens\n * `InkSignatureDialog`. Choosing a signature switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Signature } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, ref, useTemplateRef, watch } from 'vue'\n\nimport { useRegisteredTool } from '../composables/useRegisteredTool'\nimport { useTool } from '../composables/useTool'\nimport { useToolOptionsWhile } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\nimport SignatureMenuPanel from './SignatureMenuPanel.vue'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\ndefineOptions({ inheritAttrs: false })\nconst props = defineProps<{\n  /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\n\nconst NO_TEMPLATES: readonly SignatureTemplate[] = []\n\nconst { tool, setTool } = useTool()\n// Nothing renders while no `signature` tool is registered.\nconst registered = useRegisteredTool('signature')\nconst { options, setOptions } = useToolOptionsWhile<SignatureOptions>(\n  'signature',\n  registered\n)\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\nconst model = computed(() => signatureMenuModel(templates.value, options.value))\nconst active = computed(() => tool.value === 'signature')\nconst open = ref(false)\nconst creating = ref(false)\n// An old removal error is not news when the menu opens again.\nwatch(open, (isOpen) => {\n  if (isOpen) ctx.signatures.value.clearRemoveError()\n})\nconst main = useTemplateRef<{ $el: HTMLElement }>('main')\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\n/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */\nlet toDialog = false\n\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\n// Not a signature field's menu, which shares the attribute.\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>(\n    '[data-ink-menu=\"signature\"]:not([data-ink-sign-field-menu]) [role=\"menu\"]'\n  )\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  const menu = panel()\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction onCloseAutoFocus(e: Event): void {\n  if (toDialog) e.preventDefault()\n  toDialog = false\n}\n\nfunction onMain(): void {\n  if (model.value.selected) setTool('signature')\n  else open.value = true\n}\n\nfunction choose(id: string): void {\n  setOptions({ templateId: id })\n  setTool('signature')\n  open.value = false\n}\n\nfunction create(): void {\n  toDialog = true\n  open.value = false\n  creating.value = true\n}\n\nfunction onDialogCloseAutoFocus(e: Event): void {\n  e.preventDefault()\n  main.value?.$el.focus({ preventScroll: true })\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': SIGNATURE_LABELS.sign,\n  title: SIGNATURE_LABELS.sign,\n  onClick: onMain,\n}))\nconst triggerAttrs = {\n  'aria-label': SIGNATURE_LABELS.trigger,\n  title: SIGNATURE_LABELS.trigger,\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': SIGNATURE_LABELS.menu }\n</script>\n\n<template>\n  <PopoverRoot v-if=\"registered\" v-model:open=\"open\">\n    <PopoverAnchor as-child>\n      <div\n        role=\"group\"\n        :aria-label=\"SIGNATURE_LABELS.sign\"\n        class=\"ink-split-button ink-signature-menu\"\n        data-ink-signature-menu\n        v-bind=\"$attrs\"\n      >\n        <ToolbarButton\n          ref=\"main\"\n          class=\"ink-tool-button ink-signature-button\"\n          data-ink-tool-button\n          data-ink-signature-button\n          data-tool=\"signature\"\n          :data-state=\"active ? 'on' : 'off'\"\n          v-bind=\"mainAttrs\"\n        >\n          <slot :active=\"active\"><InkIcon :icon=\"Signature\" /></slot>\n        </ToolbarButton>\n        <ToolbarButton as-child>\n          <PopoverTrigger as-child>\n            <button\n              type=\"button\"\n              class=\"ink-menu-trigger ink-signature-menu-trigger\"\n              data-ink-signature-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=\"signature\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"4\"\n            :collision-padding=\"8\"\n            v-bind=\"menuAttrs\"\n            @open-auto-focus=\"onOpenAutoFocus\"\n            @close-auto-focus=\"onCloseAutoFocus\"\n          >\n            <SignatureMenuPanel\n              :items=\"model.items\"\n              @choose=\"choose($event.id)\"\n              @create=\"create\"\n            />\n          </PopoverContent>\n        </PopoverPortal>\n        <InkSignatureDialog\n          v-model:open=\"creating\"\n          :fonts=\"props.fonts\"\n          @close-auto-focus=\"onDialogCloseAutoFocus\"\n        />\n      </div>\n    </PopoverAnchor>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/InkThumbnail.js

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

package/dist/components/InkThumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnail.js","names":["_sfc_main","InkThumbnail_vue_vue_type_script_setup_true_lang_default","InkThumbnail_default"],"sources":["../../src/components/InkThumbnail.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * One page as a static image, with its live annotations and plugin marks: core's thumbnail\n * painter on this element, which sizes it, names it (\"Page N\" unless `label` says otherwise)\n * and draws it once it nears the visible area. `page` is 0-based. `width` (default 120) or\n * `height` sets the size; the other follows the page. It is not focusable and does nothing on\n * click: wrap it in the control you need. Inside `InkRoot`; it renders empty on the server.\n */\nimport {\n  createThumbnailPainter,\n  type ThumbnailOptions,\n  type ThumbnailPainter,\n} from '@inkbar/core/dom'\nimport { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'\n\nimport { injectInkContext } from '../context'\nimport { toReadable } from '../to-readable'\n\nconst props = withDefaults(\n  defineProps<{\n    page: number\n    width?: number | undefined\n    height?: number | undefined\n    annotations?: boolean\n    marks?: boolean\n    label?: string | undefined\n  }>(),\n  {\n    width: undefined,\n    height: undefined,\n    annotations: true,\n    marks: true,\n    label: undefined,\n  }\n)\n\nconst ctx = injectInkContext()\nconst deps = {\n  document: toReadable(() => ctx.document.value),\n  pluginHost: toReadable(() => ctx.pluginHost.value),\n}\nconst options = (): ThumbnailOptions => ({\n  page: props.page,\n  width: props.width,\n  height: props.height,\n  annotations: props.annotations,\n  marks: props.marks,\n  label: props.label,\n})\n\nconst el = useTemplateRef<HTMLElement>('el')\nlet painter: ThumbnailPainter | null = null\nonMounted(() => {\n  const p = createThumbnailPainter(el.value!, deps, options())\n  painter = p\n  watch(options, (next) => p.update(next))\n})\nonBeforeUnmount(() => {\n  painter?.destroy()\n  painter = null\n})\n</script>\n\n<template>\n  <!-- The class is the painter's too: kept here, a re-render never drops it. -->\n  <div ref=\"el\" class=\"ink-thumbnail\" />\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    page: number;
+    width?: number | undefined;
+    height?: number | undefined;
+    annotations?: boolean;
+    marks?: boolean;
+    label?: string | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    width: number | undefined;
+    annotations: boolean;
+    label: string | undefined;
+    height: number | undefined;
+    marks: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=InkThumbnail.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnail.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkThumbnail.vue"],"names":[],"mappings":"AAuFA,KAAK,WAAW,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC3B,CAAC;AA+DJ,QAAA,MAAM,YAAY;;;;;;6EAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/InkThumbnail.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { injectInkContext as e } from "../context.js";
+import { toReadable as t } from "../to-readable.js";
+import { createElementBlock as n, defineComponent as r, onBeforeUnmount as i, onMounted as a, openBlock as o, useTemplateRef as s, watch as c } from "vue";
+import { createThumbnailPainter as l } from "@inkbar/core/dom";
+//#region src/components/InkThumbnail.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ r({
+	__name: "InkThumbnail",
+	props: {
+		page: {},
+		width: { default: void 0 },
+		height: { default: void 0 },
+		annotations: {
+			type: Boolean,
+			default: !0
+		},
+		marks: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: void 0 }
+	},
+	setup(r) {
+		let u = r, d = e(), f = {
+			document: t(() => d.document.value),
+			pluginHost: t(() => d.pluginHost.value)
+		}, p = () => ({
+			page: u.page,
+			width: u.width,
+			height: u.height,
+			annotations: u.annotations,
+			marks: u.marks,
+			label: u.label
+		}), m = s("el"), h = null;
+		return a(() => {
+			let e = l(m.value, f, p());
+			h = e, c(p, (t) => e.update(t));
+		}), i(() => {
+			h?.destroy(), h = null;
+		}), (e, t) => (o(), n("div", {
+			ref_key: "el",
+			ref: m,
+			class: "ink-thumbnail"
+		}, null, 512));
+	}
+});
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=InkThumbnail.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnail.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","InkThumbnail_vue_vue_type_script_setup_true_lang_default","props","__props","ctx","injectInkContext","deps","toReadable","options","el","useTemplateRef","painter","onMounted","p","createThumbnailPainter","watch","next","onBeforeUnmount","openBlock","createElementBlock"],"sources":["../../src/components/InkThumbnail.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * One page as a static image, with its live annotations and plugin marks: core's thumbnail\n * painter on this element, which sizes it, names it (\"Page N\" unless `label` says otherwise)\n * and draws it once it nears the visible area. `page` is 0-based. `width` (default 120) or\n * `height` sets the size; the other follows the page. It is not focusable and does nothing on\n * click: wrap it in the control you need. Inside `InkRoot`; it renders empty on the server.\n */\nimport {\n  createThumbnailPainter,\n  type ThumbnailOptions,\n  type ThumbnailPainter,\n} from '@inkbar/core/dom'\nimport { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'\n\nimport { injectInkContext } from '../context'\nimport { toReadable } from '../to-readable'\n\nconst props = withDefaults(\n  defineProps<{\n    page: number\n    width?: number | undefined\n    height?: number | undefined\n    annotations?: boolean\n    marks?: boolean\n    label?: string | undefined\n  }>(),\n  {\n    width: undefined,\n    height: undefined,\n    annotations: true,\n    marks: true,\n    label: undefined,\n  }\n)\n\nconst ctx = injectInkContext()\nconst deps = {\n  document: toReadable(() => ctx.document.value),\n  pluginHost: toReadable(() => ctx.pluginHost.value),\n}\nconst options = (): ThumbnailOptions => ({\n  page: props.page,\n  width: props.width,\n  height: props.height,\n  annotations: props.annotations,\n  marks: props.marks,\n  label: props.label,\n})\n\nconst el = useTemplateRef<HTMLElement>('el')\nlet painter: ThumbnailPainter | null = null\nonMounted(() => {\n  const p = createThumbnailPainter(el.value!, deps, options())\n  painter = p\n  watch(options, (next) => p.update(next))\n})\nonBeforeUnmount(() => {\n  painter?.destroy()\n  painter = null\n})\n</script>\n\n<template>\n  <!-- The class is the painter's too: kept here, a re-render never drops it. -->\n  <div ref=\"el\" class=\"ink-thumbnail\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAkBA,IAAMG,IAAQC,GAkBRC,IAAMC,EAAiB,GACvBC,IAAO;GACX,UAAUC,QAAiBH,EAAI,SAAS,KAAK;GAC7C,YAAYG,QAAiBH,EAAI,WAAW,KAAK;EACnD,GACMI,WAAmC;GACvC,MAAMN,EAAM;GACZ,OAAOA,EAAM;GACb,QAAQA,EAAM;GACd,aAAaA,EAAM;GACnB,OAAOA,EAAM;GACb,OAAOA,EAAM;EACf,IAEMO,IAAKC,EAA4B,IAAI,GACvCC,IAAmC;SACvCC,QAAgB;GACd,IAAMC,IAAIC,EAAuBL,EAAG,OAAQH,GAAME,EAAQ,CAAC;GAE3D,AADA,IAAUK,GACVE,EAAMP,IAAU,MAASK,EAAE,OAAOG,CAAI,CAAC;EACzC,CAAC,GACDC,QAAsB;GAEpB,AADAN,GAAS,QAAQ,GACjB,IAAU;EACZ,CAAC,cAKCZ,EAAA,GAAAC,EAAsC,OAAA;GAA7B,SAAA;GAAJ,KAAIS;GAAK,OAAM"}

package/dist/components/InkThumbnails.js

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

package/dist/components/InkThumbnails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnails.js","names":["_sfc_main","InkThumbnails_vue_vue_type_script_setup_true_lang_default","InkThumbnails_default"],"sources":["../../src/components/InkThumbnails.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The pages as a list of thumbnails: `createThumbnails`' markup on core's thumbnails\n * controller, which holds the current page, the keys, the clicks, the Tab stop and the window.\n * Only the items near the visible part are mounted, each placed at its offset over a spacer of\n * the full height, and each holds an `InkThumbnail`. An item is a button that scrolls the\n * viewport to its page; the current page's has `aria-current=\"page\"`.\n *\n * `pages` lists 0-based pages in order (default: all). The `item` slot, given `{ page, current }`,\n * renders inside each item after its number. The item's height is fixed from the page's, so\n * keep what you add out of the flow (position it absolutely) or small. Inside `InkRoot`; it\n * renders empty on the server.\n */\nimport {\n  createThumbnailsController,\n  THUMBNAIL_WIDTH,\n  type ThumbnailsController,\n  type ThumbnailsOptions,\n  type ThumbnailsState,\n} from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { injectInkContext } from '../context'\nimport { toReadable } from '../to-readable'\n\nimport InkThumbnail from './InkThumbnail.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    pages?: readonly number[] | undefined\n    width?: number | undefined\n    annotations?: boolean\n    marks?: boolean\n  }>(),\n  { pages: undefined, width: undefined, annotations: true, marks: true }\n)\n\ndefineSlots<{\n  item?(props: { page: number; current: boolean }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst deps = {\n  document: toReadable(() => ctx.document.value),\n  pluginHost: toReadable(() => ctx.pluginHost.value),\n  viewport: toReadable(() => ctx.viewport.value),\n}\nconst options = (): ThumbnailsOptions => ({\n  pages: props.pages,\n  width: props.width,\n  annotations: props.annotations,\n  marks: props.marks,\n})\n\nconst state = shallowRef<ThumbnailsState>({\n  pages: [],\n  current: -1,\n  window: { start: 0, end: 0 },\n  offsets: [0],\n  width: THUMBNAIL_WIDTH,\n})\nlet controller: ThumbnailsController | null = null\nconst items = computed(() => {\n  const { pages, current, window, offsets } = state.value\n  return pages.slice(window.start, window.end).map((page, k) => {\n    const top = offsets[window.start + k]!\n    const bottom = offsets[window.start + k + 1]!\n    // Only a mounted controller has a window, so `controller` is set here.\n    const attrs = controller?.itemAttrs(window.start + k) ?? {}\n    return { page, current: page === current, top, height: bottom - top, attrs }\n  })\n})\n\nconst scroller = useTemplateRef<HTMLElement>('scroller')\nlet stopState: (() => void) | null = null\nonMounted(() => {\n  const c = createThumbnailsController(deps, options())\n  controller = c\n  state.value = c.state.get()\n  stopState = c.state.subscribe((s) => {\n    state.value = s\n  })\n  watch(options, (next) => c.update(next))\n  c.attach(scroller.value!)\n})\nonBeforeUnmount(() => {\n  stopState?.()\n  stopState = null\n  controller?.destroy()\n  controller = null\n})\n</script>\n\n<template>\n  <div ref=\"scroller\" class=\"ink-thumbnails\" data-ink-thumbnails role=\"list\">\n    <div\n      class=\"ink-thumbnails-spacer\"\n      aria-hidden=\"true\"\n      :style=\"{ height: `${state.offsets.at(-1) ?? 0}px` }\"\n    />\n    <div\n      v-for=\"item in items\"\n      :key=\"item.page\"\n      class=\"ink-thumbnails-entry\"\n      v-bind=\"item.attrs\"\n      :style=\"{ top: `${item.top}px`, height: `${item.height}px` }\"\n    >\n      <!-- The controller sets the tabindex. The thumbnail names the button \"Page N\"; the\n           visible number repeats it. -->\n      <button\n        type=\"button\"\n        class=\"ink-thumbnails-item\"\n        :data-ink-thumbnail-item=\"item.page\"\n        :aria-current=\"item.current ? 'page' : undefined\"\n      >\n        <InkThumbnail\n          :page=\"item.page\"\n          :width=\"state.width\"\n          :annotations=\"annotations\"\n          :marks=\"marks\"\n        />\n        <span class=\"ink-thumbnails-label\" aria-hidden=\"true\">{{ item.page + 1 }}</span>\n        <slot name=\"item\" :page=\"item.page\" :current=\"item.current\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    pages?: readonly number[] | undefined;
+    width?: number | undefined;
+    annotations?: boolean;
+    marks?: boolean;
+};
+type __VLS_Slots = {
+    item?(props: {
+        page: number;
+        current: boolean;
+    }): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    width: number | undefined;
+    annotations: boolean;
+    marks: boolean;
+    pages: readonly number[] | undefined;
+}, {}, {}, {}, 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=InkThumbnails.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnails.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkThumbnails.vue"],"names":[],"mappings":"AA0KA,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAC;AAMJ,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAA;CAC1D,CAAC;AAgIF,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/InkThumbnails.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,107 @@
+import { injectInkContext as e } from "../context.js";
+import { toReadable as t } from "../to-readable.js";
+import n from "./InkThumbnail.js";
+import { Fragment as r, computed as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeProps as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, openBlock as p, renderList as m, renderSlot as h, shallowRef as g, toDisplayString as _, useTemplateRef as v, watch as y } from "vue";
+import { THUMBNAIL_WIDTH as b, createThumbnailsController as x } from "@inkbar/core/dom";
+//#region src/components/InkThumbnails.vue?vue&type=script&setup=true&lang.ts
+var S = ["data-ink-thumbnail-item", "aria-current"], C = {
+	class: "ink-thumbnails-label",
+	"aria-hidden": "true"
+}, w = /*@__PURE__*/ c({
+	__name: "InkThumbnails",
+	props: {
+		pages: { default: void 0 },
+		width: { default: void 0 },
+		annotations: {
+			type: Boolean,
+			default: !0
+		},
+		marks: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(c) {
+		let w = c, T = e(), E = {
+			document: t(() => T.document.value),
+			pluginHost: t(() => T.pluginHost.value),
+			viewport: t(() => T.viewport.value)
+		}, D = () => ({
+			pages: w.pages,
+			width: w.width,
+			annotations: w.annotations,
+			marks: w.marks
+		}), O = g({
+			pages: [],
+			current: -1,
+			window: {
+				start: 0,
+				end: 0
+			},
+			offsets: [0],
+			width: b
+		}), k = null, A = i(() => {
+			let { pages: e, current: t, window: n, offsets: r } = O.value;
+			return e.slice(n.start, n.end).map((e, i) => {
+				let a = r[n.start + i], o = r[n.start + i + 1], s = k?.itemAttrs(n.start + i) ?? {};
+				return {
+					page: e,
+					current: e === t,
+					top: a,
+					height: o - a,
+					attrs: s
+				};
+			});
+		}), j = v("scroller"), M = null;
+		return f(() => {
+			let e = x(E, D());
+			k = e, O.value = e.state.get(), M = e.state.subscribe((e) => {
+				O.value = e;
+			}), y(D, (t) => e.update(t)), e.attach(j.value);
+		}), d(() => {
+			M?.(), M = null, k?.destroy(), k = null;
+		}), (e, t) => (p(), a("div", {
+			ref_key: "scroller",
+			ref: j,
+			class: "ink-thumbnails",
+			"data-ink-thumbnails": "",
+			role: "list"
+		}, [o("div", {
+			class: "ink-thumbnails-spacer",
+			"aria-hidden": "true",
+			style: u({ height: `${O.value.offsets.at(-1) ?? 0}px` })
+		}, null, 4), (p(!0), a(r, null, m(A.value, (t) => (p(), a("div", l({
+			key: t.page,
+			class: "ink-thumbnails-entry"
+		}, { ref_for: !0 }, t.attrs, { style: {
+			top: `${t.top}px`,
+			height: `${t.height}px`
+		} }), [o("button", {
+			type: "button",
+			class: "ink-thumbnails-item",
+			"data-ink-thumbnail-item": t.page,
+			"aria-current": t.current ? "page" : void 0
+		}, [
+			s(n, {
+				page: t.page,
+				width: O.value.width,
+				annotations: c.annotations,
+				marks: c.marks
+			}, null, 8, [
+				"page",
+				"width",
+				"annotations",
+				"marks"
+			]),
+			o("span", C, _(t.page + 1), 1),
+			h(e.$slots, "item", {
+				page: t.page,
+				current: t.current
+			})
+		], 8, S)], 16))), 128))], 512));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=InkThumbnails.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkThumbnails.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeStyle","_Fragment","_renderList","_mergeProps","_createVNode","InkThumbnail","_toDisplayString","_renderSlot","InkThumbnail_default","_hoisted_1","_hoisted_2","InkThumbnails_vue_vue_type_script_setup_true_lang_default","props","__props","ctx","injectInkContext","deps","toReadable","options","state","shallowRef","THUMBNAIL_WIDTH","controller","items","computed","pages","window","top","offsets","k","bottom","attrs","page","current","scroller","useTemplateRef","stopState","onMounted","c","createThumbnailsController","s","watch","next","onBeforeUnmount","openBlock","createElementBlock","createElementVNode","normalizeStyle","Fragment","renderList","mergeProps","item","createVNode","toDisplayString","renderSlot","_ctx"],"sources":["../../src/components/InkThumbnails.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The pages as a list of thumbnails: `createThumbnails`' markup on core's thumbnails\n * controller, which holds the current page, the keys, the clicks, the Tab stop and the window.\n * Only the items near the visible part are mounted, each placed at its offset over a spacer of\n * the full height, and each holds an `InkThumbnail`. An item is a button that scrolls the\n * viewport to its page; the current page's has `aria-current=\"page\"`.\n *\n * `pages` lists 0-based pages in order (default: all). The `item` slot, given `{ page, current }`,\n * renders inside each item after its number. The item's height is fixed from the page's, so\n * keep what you add out of the flow (position it absolutely) or small. Inside `InkRoot`; it\n * renders empty on the server.\n */\nimport {\n  createThumbnailsController,\n  THUMBNAIL_WIDTH,\n  type ThumbnailsController,\n  type ThumbnailsOptions,\n  type ThumbnailsState,\n} from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { injectInkContext } from '../context'\nimport { toReadable } from '../to-readable'\n\nimport InkThumbnail from './InkThumbnail.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    pages?: readonly number[] | undefined\n    width?: number | undefined\n    annotations?: boolean\n    marks?: boolean\n  }>(),\n  { pages: undefined, width: undefined, annotations: true, marks: true }\n)\n\ndefineSlots<{\n  item?(props: { page: number; current: boolean }): unknown\n}>()\n\nconst ctx = injectInkContext()\nconst deps = {\n  document: toReadable(() => ctx.document.value),\n  pluginHost: toReadable(() => ctx.pluginHost.value),\n  viewport: toReadable(() => ctx.viewport.value),\n}\nconst options = (): ThumbnailsOptions => ({\n  pages: props.pages,\n  width: props.width,\n  annotations: props.annotations,\n  marks: props.marks,\n})\n\nconst state = shallowRef<ThumbnailsState>({\n  pages: [],\n  current: -1,\n  window: { start: 0, end: 0 },\n  offsets: [0],\n  width: THUMBNAIL_WIDTH,\n})\nlet controller: ThumbnailsController | null = null\nconst items = computed(() => {\n  const { pages, current, window, offsets } = state.value\n  return pages.slice(window.start, window.end).map((page, k) => {\n    const top = offsets[window.start + k]!\n    const bottom = offsets[window.start + k + 1]!\n    // Only a mounted controller has a window, so `controller` is set here.\n    const attrs = controller?.itemAttrs(window.start + k) ?? {}\n    return { page, current: page === current, top, height: bottom - top, attrs }\n  })\n})\n\nconst scroller = useTemplateRef<HTMLElement>('scroller')\nlet stopState: (() => void) | null = null\nonMounted(() => {\n  const c = createThumbnailsController(deps, options())\n  controller = c\n  state.value = c.state.get()\n  stopState = c.state.subscribe((s) => {\n    state.value = s\n  })\n  watch(options, (next) => c.update(next))\n  c.attach(scroller.value!)\n})\nonBeforeUnmount(() => {\n  stopState?.()\n  stopState = null\n  controller?.destroy()\n  controller = null\n})\n</script>\n\n<template>\n  <div ref=\"scroller\" class=\"ink-thumbnails\" data-ink-thumbnails role=\"list\">\n    <div\n      class=\"ink-thumbnails-spacer\"\n      aria-hidden=\"true\"\n      :style=\"{ height: `${state.offsets.at(-1) ?? 0}px` }\"\n    />\n    <div\n      v-for=\"item in items\"\n      :key=\"item.page\"\n      class=\"ink-thumbnails-entry\"\n      v-bind=\"item.attrs\"\n      :style=\"{ top: `${item.top}px`, height: `${item.height}px` }\"\n    >\n      <!-- The controller sets the tabindex. The thumbnail names the button \"Page N\"; the\n           visible number repeats it. -->\n      <button\n        type=\"button\"\n        class=\"ink-thumbnails-item\"\n        :data-ink-thumbnail-item=\"item.page\"\n        :aria-current=\"item.current ? 'page' : undefined\"\n      >\n        <InkThumbnail\n          :page=\"item.page\"\n          :width=\"state.width\"\n          :annotations=\"annotations\"\n          :marks=\"marks\"\n        />\n        <span class=\"ink-thumbnails-label\" aria-hidden=\"true\">{{ item.page + 1 }}</span>\n        <slot name=\"item\" :page=\"item.page\" :current=\"item.current\" />\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAkCA,IAAMe,IAAQC,GAcRC,IAAMC,EAAiB,GACvBC,IAAO;GACX,UAAUC,QAAiBH,EAAI,SAAS,KAAK;GAC7C,YAAYG,QAAiBH,EAAI,WAAW,KAAK;GACjD,UAAUG,QAAiBH,EAAI,SAAS,KAAK;EAC/C,GACMI,WAAoC;GACxC,OAAON,EAAM;GACb,OAAOA,EAAM;GACb,aAAaA,EAAM;GACnB,OAAOA,EAAM;EACf,IAEMO,IAAQC,EAA4B;GACxC,OAAO,CAAC;GACR,SAAS;GACT,QAAQ;IAAE,OAAO;IAAG,KAAK;GAAE;GAC3B,SAAS,CAAC,CAAC;GACX,OAAOC;EACT,CAAC,GACGC,IAA0C,MACxCC,IAAQC,QAAe;GAC3B,IAAM,EAAE,UAAO,YAAS,WAAQ,eAAYL,EAAM;GAClD,OAAOM,EAAM,MAAMC,EAAO,OAAOA,EAAO,GAAG,CAAC,CAAC,KAAK,GAAM,MAAM;IAC5D,IAAMC,IAAMC,EAAQF,EAAO,QAAQG,IAC7BC,IAASF,EAAQF,EAAO,QAAQG,IAAI,IAEpCE,IAAQT,GAAY,UAAUI,EAAO,QAAQG,CAAC,KAAK,CAAC;IAC1D,OAAO;KAAE;KAAM,SAASG,MAASC;KAAS;KAAK,QAAQH,IAASH;KAAK;IAAM;GAC7E,CAAC;EACH,CAAC,GAEKO,IAAWC,EAA4B,UAAU,GACnDC,IAAiC;SACrCC,QAAgB;GACd,IAAMC,IAAIC,EAA2BvB,GAAME,EAAQ,CAAC;GAOpD,AANA,IAAaoB,GACb,EAAM,QAAQA,EAAE,MAAM,IAAI,GAC1B,IAAYA,EAAE,MAAM,WAAW,MAAM;IACnC,EAAM,QAAQE;GAChB,CAAC,GACDC,EAAMvB,IAAU,MAASoB,EAAE,OAAOI,CAAI,CAAC,GACvCJ,EAAE,OAAOJ,EAAS,KAAM;EAC1B,CAAC,GACDS,QAAsB;GAIpB,AAHAP,IAAY,GACZ,IAAY,MACZd,GAAY,QAAQ,GACpB,IAAa;EACf,CAAC,cAICzB,EAAA,GAAAC,EA+BM,OAAA;GA/BG,SAAA;GAAJ,KAAIoC;GAAW,OAAM;GAAiB,uBAAA;GAAoB,MAAK;EAClEnC,GAAAA,CAAAA,EAIE,OAAA;GAHA,OAAM;GACN,eAAY;GACX,OAAKC,EAAA,EAAA,QAAA,GAAemB,EAAA,MAAM,QAAQ,GAAE,EAAA,KAAA,EAAA,IAAA,CAAA;EAEvCtB,GAAAA,MAAAA,CAAAA,IAAAA,EAAA,EAAA,GAAAC,EAwBMG,GAAA,MAAAC,EAvBWqB,EAAA,QAAR,OADT1B,EAAA,GAAAC,EAwBM,OAxBNK,EAwBM;GAtBH,KAAKgD,EAAK;GACX,OAAM;EACE,GAAA,EAAA,SAAA,GAAA,GAAAA,EAAK,OAAK,EACjB,OAAK;GAAA,KAAA,GAAYA,EAAK,IAAG;GAAA,QAAA,GAAiBA,EAAK,OAAM;EAAA,EAAA,CAAA,GAAA,CAItDpD,EAcS,UAAA;GAbP,MAAK;GACL,OAAM;GACL,2BAAyBoD,EAAK;GAC9B,gBAAcA,EAAK,UAAO,SAAY,KAAA;;GAEvC/C,EAKEC,GAAA;IAJC,MAAM8C,EAAK;IACX,OAAOhC,EAAA,MAAM;IACb,aAAaN,EAAA;IACb,OAAOA,EAAA;;;;;;;GAEVd,EAAgF,QAAhFW,GAAgFJ,EAAvB6C,EAAK,OAAI,CAAA,GAAA,CAAA;GAClE5C,EAA8DgD,EAAA,QAAA,QAAA;IAA3C,MAAMJ,EAAK;IAAO,SAASA,EAAK"}

package/dist/components/InkToolButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkToolButton.js","names":["_sfc_main","InkToolButton_vue_vue_type_script_setup_true_lang_default","InkToolButton_default"],"sources":["../../src/components/InkToolButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TOOL_LABELS } from '@inkbar/core/dom'\nimport {\n  Highlighter,\n  MessageSquare,\n  PenLine,\n  PenTool,\n  Signature,\n  Square,\n  SquareDashedMousePointer,\n  TextCursor,\n  Type,\n} from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\nimport { computed } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useInkContext } from '../context'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { ToolId } from '@inkbar/core/dom'\nimport type { IconNode } from '@inkbar/icons'\n\nconst ICONS: Readonly<Partial<Record<ToolId, IconNode>>> = {\n  'select-text': TextCursor,\n  select: SquareDashedMousePointer,\n  highlight: Highlighter,\n  'redact-area': Square,\n  sketch: PenTool,\n  draw: PenLine,\n  note: MessageSquare,\n  freetext: Type,\n  signature: Signature,\n}\n\nconst props = withDefaults(\n  defineProps<{ tool: ToolId; label?: string | undefined; asChild?: boolean }>(),\n  { label: undefined, asChild: false }\n)\n\nconst ctx = useInkContext('InkToolButton')\nconst { tool: current, setTool } = useTool()\nconst active = computed(() => current.value === props.tool)\n/** A host or plugin tool by this id, for the name and icon core has none for. */\nconst own = computed(() =>\n  [...(ctx.hostTools.value ?? []), ...(ctx.pluginHost.value?.tools ?? [])].find(\n    (t) => t.id === props.tool\n  )\n)\n// `label` and the slot win; then core's name and icon; then the tool's own.\nconst name = computed(\n  () => props.label ?? TOOL_LABELS[props.tool] ?? own.value?.label ?? props.tool\n)\nconst icon = computed(() => ICONS[props.tool] ?? own.value?.icon)\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = computed(() => ({\n  'aria-pressed': String(active.value),\n  'aria-label': name.value,\n  title: name.value,\n  onClick: () => setTool(props.tool),\n}))\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-tool-button\"\n    data-ink-tool-button\n    :data-tool=\"tool\"\n    :data-state=\"active ? 'on' : 'off'\"\n    v-bind=\"attrs\"\n  >\n    <slot :active=\"active\" :label=\"name\"><InkIcon v-if=\"icon\" :icon=\"icon\" /></slot>\n  </ToolbarButton>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkToolButton.js","names":["_sfc_main","InkToolButton_vue_vue_type_script_setup_true_lang_default","InkToolButton_default"],"sources":["../../src/components/InkToolButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { TOOL_LABELS, withHostTools } from '@inkbar/core/dom'\nimport { SquareDashedMousePointer, TextCursor } from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\nimport { computed, mergeProps, useAttrs } from 'vue'\n\nimport { useRegisteredTool } from '../composables/useRegisteredTool'\nimport { useTool } from '../composables/useTool'\nimport { useInkContext } from '../context'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { ToolId } from '@inkbar/core/dom'\nimport type { IconNode } from '@inkbar/icons'\n\nconst ICONS: Readonly<Partial<Record<ToolId, IconNode>>> = {\n  'select-text': TextCursor,\n  select: SquareDashedMousePointer,\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(\n  defineProps<{ tool: ToolId; label?: string | undefined; asChild?: boolean }>(),\n  { label: undefined, asChild: false }\n)\n\nconst ctx = useInkContext('InkToolButton')\nconst { tool: current, setTool } = useTool()\nconst active = computed(() => current.value === props.tool)\nconst registered = useRegisteredTool(() => props.tool)\n/** The registered tool by this id, for the name and icon core has none for. */\nconst own = computed(() =>\n  withHostTools([\n    ...(ctx.hostTools.value ?? []),\n    ...(ctx.pluginHost.value?.tools ?? []),\n  ]).find((t) => t.id === props.tool)\n)\n// `label` and the slot win; then core's name and icon; then the tool's own.\nconst name = computed(\n  () => props.label ?? TOOL_LABELS[props.tool] ?? own.value?.label ?? props.tool\n)\nconst icon = computed(() => ICONS[props.tool] ?? own.value?.icon)\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object. A tool\n// nobody registered leaves the button disabled, hidden from assistive tech and unnamed.\nconst hostAttrs = useAttrs()\n// A function, not a computed: `useAttrs()` is not reactive, so the render reads it afresh.\nconst bound = () =>\n  registered.value\n    ? mergeProps(\n        {\n          'aria-pressed': String(active.value),\n          'aria-label': name.value,\n          title: name.value,\n          onClick: () => setTool(props.tool),\n        },\n        hostAttrs\n      )\n    : {\n        ...hostAttrs,\n        'aria-hidden': 'true' as const,\n        disabled: true,\n        'aria-pressed': undefined,\n        'aria-label': undefined,\n        title: undefined,\n        onClick: undefined,\n      }\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-tool-button\"\n    data-ink-tool-button\n    :data-tool=\"tool\"\n    :data-state=\"active ? 'on' : 'off'\"\n    v-bind=\"bound()\"\n  >\n    <template v-if=\"registered\">\n      <slot :active=\"active\" :label=\"name\"><InkIcon v-if=\"icon\" :icon=\"icon\" /></slot>\n    </template>\n  </ToolbarButton>\n</template>\n"],"mappings":""}