@inkbar/vue 0.4.0 → 0.6.0

package/dist/components/InkSignatureMenu.vue_vue_type_script_setup_true_lang.js

@@ -4,210 +4,215 @@ import { useTool as n } from "../composables/useTool.js";
 import { useToolOptions as r } from "../composables/useToolOptions.js";
 import i from "./InkIcon.js";
 import ee from "./InkSignatureDialog.js";
-import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as te, createVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, nextTick as ne, normalizeProps as re, openBlock as m, ref as h, renderList as g, renderSlot as ie, toDisplayString as _, unref as v, useTemplateRef as ae, watch as oe, withCtx as y } from "vue";
-import { SIGNATURE_LABELS as b, focusInitialMenuItem as se, handleMenuKeys as ce, menuItems as le, signatureMenuModel as ue, signaturePreview as de } from "@inkbar/core/dom";
-import { PopoverContent as fe, PopoverPortal as pe, PopoverRoot as x, PopoverTrigger as S, ToolbarButton as C } from "reka-ui";
-import { ChevronDown as w, Plus as T, Signature as E, Trash2 as D } from "@inkbar/icons";
+import { Fragment as a, computed as o, createBlock as te, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as ne, mergeProps as p, nextTick as re, normalizeProps as ie, openBlock as m, ref as h, renderList as g, renderSlot as ae, toDisplayString as _, unref as v, useTemplateRef as oe, watch as se, withCtx as y } from "vue";
+import { SIGNATURE_LABELS as b, focusInitialMenuItem as ce, handleMenuKeys as le, menuItems as ue, signatureMenuModel as de, signaturePreview as fe } from "@inkbar/core/dom";
+import { PopoverAnchor as pe, PopoverContent as x, PopoverPortal as S, PopoverRoot as C, PopoverTrigger as w, ToolbarButton as T } from "reka-ui";
+import { ChevronDown as E, Plus as D, Signature as O, Trash2 as k } from "@inkbar/icons";
 //#region src/components/InkSignatureMenu.vue?vue&type=script&setup=true&lang.ts
-var O = ["aria-label"], k = ["data-state"], A = ["aria-label"], j = [
+var A = ["aria-label"], j = ["data-state"], M = ["aria-label"], N = [
 	"aria-checked",
 	"aria-label",
 	"data-key",
 	"data-state",
 	"onClick"
-], M = ["data-kind"], N = ["src"], P = ["viewBox"], F = ["d"], I = [
+], P = ["data-kind"], F = ["src"], I = ["viewBox"], L = ["d"], R = [
 	"aria-label",
 	"title",
 	"data-key",
 	"onClick"
-], L = {
+], z = {
 	key: 1,
 	class: "ink-field-error ink-signature-remove-error",
 	role: "alert",
 	"data-ink-signature-remove-error": ""
-}, R = /*@__PURE__*/ d({
+}, B = /*@__PURE__*/ f({
+	inheritAttrs: !1,
 	__name: "InkSignatureMenu",
 	props: { fonts: {} },
-	setup(d) {
-		let R = d, z = [], { tool: B, setTool: V } = n(), { options: me, setOptions: he } = r("signature"), H = e("InkSignatureMenu"), ge = t(() => H.signatures.value.templates, z), U = t(() => H.signatures.value.removeError, void 0), W = o(() => ue(ge.value, me.value)), G = o(() => B.value === "signature"), K = h(!1), q = h(!1);
-		oe(K, (e) => {
+	setup(f) {
+		let B = f, me = [], { tool: he, setTool: V } = n(), { options: ge, setOptions: _e } = r("signature"), H = e("InkSignatureMenu"), ve = t(() => H.signatures.value.templates, me), U = t(() => H.signatures.value.removeError, void 0), W = o(() => de(ve.value, ge.value)), G = o(() => he.value === "signature"), K = h(!1), q = h(!1);
+		se(K, (e) => {
 			e && H.signatures.value.clearRemoveError();
 		});
-		let J = ae("main"), Y = o(() => W.value.items.map((e) => e.template.kind === "ink" ? de(e.template) : null)), X = !1, Z = !1;
-		function _e(e) {
+		let J = oe("main"), Y = o(() => W.value.items.map((e) => e.template.kind === "ink" ? fe(e.template) : null)), X = !1, Z = !1;
+		function ye(e) {
 			e.key !== "ArrowDown" || e.defaultPrevented || K.value || (e.preventDefault(), X = !0, K.value = !0);
 		}
 		let Q = () => document.querySelector("[data-ink-menu=\"signature\"] [role=\"menu\"]");
-		function ve(e) {
+		function be(e) {
 			e.preventDefault();
 			let t = Q();
-			t && (X ? le(t)[0]?.focus({ preventScroll: !0 }) : se(t)), X = !1;
+			t && (X ? ue(t)[0]?.focus({ preventScroll: !0 }) : ce(t)), X = !1;
 		}
-		function ye(e) {
+		function xe(e) {
 			Z && e.preventDefault(), Z = !1;
 		}
-		function be() {
+		function Se() {
 			W.value.selected ? V("signature") : K.value = !0;
 		}
-		function xe(e) {
-			he({ templateId: e }), V("signature"), K.value = !1;
+		function Ce(e) {
+			_e({ templateId: e }), V("signature"), K.value = !1;
 		}
-		function Se(e, t) {
+		function $(e, t) {
 			H.signatures.value.remove(e).then(async () => {
-				await ne();
+				await re();
 				let e = Q();
 				if (!e) return;
 				let n = e.querySelectorAll(".ink-signature-item");
 				(n[Math.min(t, n.length - 1)] ?? e.querySelector("[data-ink-signature-create]"))?.focus({ preventScroll: !0 });
 			}, () => {});
 		}
-		function Ce() {
+		function we() {
 			Z = !0, K.value = !1, q.value = !0;
 		}
-		function $(e) {
+		function Te(e) {
 			e.preventDefault(), J.value?.$el.focus({ preventScroll: !0 });
 		}
-		let we = o(() => ({
+		let Ee = o(() => ({
 			"aria-pressed": String(G.value),
 			"aria-label": b.sign,
 			title: b.sign,
-			onClick: be
-		})), Te = {
+			onClick: Se
+		})), De = {
 			"aria-label": b.trigger,
 			title: b.trigger,
 			"aria-haspopup": "menu",
-			onKeydown: _e
-		}, Ee = { "aria-label": b.menu }, De = {
+			onKeydown: ye
+		}, Oe = { "aria-label": b.menu }, ke = {
 			role: "menu",
 			"aria-label": b.menu,
-			onKeydown: (e) => ce(e, e.currentTarget)
+			onKeydown: (e) => le(e, e.currentTarget)
 		};
-		return (e, t) => (m(), c("div", {
-			role: "group",
-			"aria-label": v(b).sign,
-			class: "ink-split-button ink-signature-menu",
-			"data-ink-signature-menu": ""
-		}, [
-			u(v(C), p({
-				ref_key: "main",
-				ref: J,
-				class: "ink-tool-button ink-signature-button",
-				"data-ink-tool-button": "",
-				"data-ink-signature-button": "",
-				"data-tool": "signature",
-				"data-state": G.value ? "on" : "off"
-			}, we.value), {
-				default: y(() => [ie(e.$slots, "default", { active: G.value }, () => [u(i, { icon: v(E) }, null, 8, ["icon"])])]),
-				_: 3
-			}, 16, ["data-state"]),
-			u(v(x), {
-				open: K.value,
-				"onUpdate:open": t[0] ||= (e) => K.value = e
-			}, {
-				default: y(() => [u(v(C), { "as-child": "" }, {
-					default: y(() => [u(v(S), { "as-child": "" }, {
-						default: y(() => [l("button", p({
-							type: "button",
-							class: "ink-menu-trigger ink-signature-menu-trigger",
-							"data-ink-signature-menu-trigger": "",
-							"data-state": K.value ? "open" : "closed"
-						}, Te), [u(i, { icon: v(w) }, null, 8, ["icon"])], 16, k)]),
-						_: 1
-					})]),
-					_: 1
-				}), u(v(pe), null, {
-					default: y(() => [u(v(fe), p({
-						class: "ink-select-content ink-menu-content",
-						"data-ink-select-content": "",
-						"data-ink-menu": "signature",
-						side: "bottom",
-						align: "start",
-						"side-offset": 4,
-						"collision-padding": 8
-					}, Ee, {
-						onOpenAutoFocus: ve,
-						onCloseAutoFocus: ye
-					}), {
-						default: y(() => [l("div", re(f(De)), [
-							W.value.items.length > 0 ? (m(), c(a, { key: 0 }, [l("div", {
-								role: "group",
-								"aria-label": v(b).saved,
-								class: "ink-signature-list",
-								"data-ink-menu-columns": "2"
-							}, [(m(!0), c(a, null, g(W.value.items, (e, t) => (m(), c(a, { key: e.id }, [l("button", {
-								type: "button",
-								role: "menuitemradio",
-								"aria-checked": e.checked,
-								"aria-label": e.label,
-								tabindex: "-1",
-								class: "ink-select-item ink-menu-item ink-signature-item",
-								"data-ink-select-item": "",
-								"data-key": e.id,
-								"data-state": e.checked ? "checked" : "unchecked",
-								onClick: (t) => xe(e.id)
-							}, [l("span", {
-								class: "ink-signature-preview",
-								"data-kind": e.template.kind
-							}, [e.template.kind === "image" ? (m(), c("img", {
-								key: 0,
-								src: e.template.imagedata,
-								alt: "",
-								draggable: "false"
-							}, null, 8, N)) : (m(), c("svg", {
-								key: 1,
-								viewBox: Y.value[t]?.viewBox,
-								"aria-hidden": "true"
-							}, [(m(!0), c(a, null, g(Y.value[t]?.paths ?? [], (e, t) => (m(), c("path", {
-								key: t,
-								d: e,
-								fill: "currentColor"
-							}, null, 8, F))), 128))], 8, P))], 8, M)], 8, j), l("button", {
-								type: "button",
-								role: "menuitem",
-								"aria-label": e.removeLabel,
-								title: e.removeLabel,
-								tabindex: "-1",
-								class: "ink-menu-item ink-signature-remove",
-								"data-ink-signature-remove": "",
-								"data-key": e.id,
-								onClick: (n) => Se(e.id, t)
-							}, [u(i, {
-								icon: v(D),
-								size: 16
-							}, null, 8, ["icon"])], 8, I)], 64))), 128))], 8, A), t[2] ||= l("div", {
-								role: "separator",
-								class: "ink-select-separator"
-							}, null, -1)], 64)) : s("", !0),
-							l("button", {
+		return (e, t) => (m(), te(v(C), {
+			open: K.value,
+			"onUpdate:open": t[1] ||= (e) => K.value = e
+		}, {
+			default: y(() => [d(v(pe), { "as-child": "" }, {
+				default: y(() => [l("div", p({
+					role: "group",
+					"aria-label": v(b).sign,
+					class: "ink-split-button ink-signature-menu",
+					"data-ink-signature-menu": ""
+				}, e.$attrs), [
+					d(v(T), p({
+						ref_key: "main",
+						ref: J,
+						class: "ink-tool-button ink-signature-button",
+						"data-ink-tool-button": "",
+						"data-ink-signature-button": "",
+						"data-tool": "signature",
+						"data-state": G.value ? "on" : "off"
+					}, Ee.value), {
+						default: y(() => [ae(e.$slots, "default", { active: G.value }, () => [d(i, { icon: v(O) }, null, 8, ["icon"])])]),
+						_: 3
+					}, 16, ["data-state"]),
+					d(v(T), { "as-child": "" }, {
+						default: y(() => [d(v(w), { "as-child": "" }, {
+							default: y(() => [l("button", p({
 								type: "button",
-								role: "menuitem",
-								tabindex: "-1",
-								class: "ink-select-item ink-menu-item ink-signature-create",
-								"data-ink-select-item": "",
-								"data-ink-signature-create": "",
-								onClick: Ce
-							}, [u(i, {
-								icon: v(T),
-								size: 16
-							}, null, 8, ["icon"]), te(" " + _(v(b).create), 1)]),
-							v(U) ? (m(), c("p", L, _(v(U)), 1)) : s("", !0)
-						], 16)]),
+								class: "ink-menu-trigger ink-signature-menu-trigger",
+								"data-ink-signature-menu-trigger": "",
+								"data-state": K.value ? "open" : "closed"
+							}, De), [d(i, { icon: v(E) }, null, 8, ["icon"])], 16, j)]),
+							_: 1
+						})]),
 						_: 1
-					}, 16)]),
-					_: 1
-				})]),
-				_: 1
-			}, 8, ["open"]),
-			u(ee, {
-				open: q.value,
-				"onUpdate:open": t[1] ||= (e) => q.value = e,
-				fonts: R.fonts,
-				onCloseAutoFocus: $
-			}, null, 8, ["open", "fonts"])
-		], 8, O));
+					}),
+					d(v(S), null, {
+						default: y(() => [d(v(x), p({
+							class: "ink-select-content ink-menu-content",
+							"data-ink-select-content": "",
+							"data-ink-menu": "signature",
+							side: "bottom",
+							align: "start",
+							"side-offset": 4,
+							"collision-padding": 8
+						}, Oe, {
+							onOpenAutoFocus: be,
+							onCloseAutoFocus: xe
+						}), {
+							default: y(() => [l("div", ie(ne(ke)), [
+								W.value.items.length > 0 ? (m(), c(a, { key: 0 }, [l("div", {
+									role: "group",
+									"aria-label": v(b).saved,
+									class: "ink-signature-list",
+									"data-ink-menu-columns": "2"
+								}, [(m(!0), c(a, null, g(W.value.items, (e, t) => (m(), c(a, { key: e.id }, [l("button", {
+									type: "button",
+									role: "menuitemradio",
+									"aria-checked": e.checked,
+									"aria-label": e.label,
+									tabindex: "-1",
+									class: "ink-select-item ink-menu-item ink-signature-item",
+									"data-ink-select-item": "",
+									"data-key": e.id,
+									"data-state": e.checked ? "checked" : "unchecked",
+									onClick: (t) => Ce(e.id)
+								}, [l("span", {
+									class: "ink-signature-preview",
+									"data-kind": e.template.kind
+								}, [e.template.kind === "image" ? (m(), c("img", {
+									key: 0,
+									src: e.template.imagedata,
+									alt: "",
+									draggable: "false"
+								}, null, 8, F)) : (m(), c("svg", {
+									key: 1,
+									viewBox: Y.value[t]?.viewBox,
+									"aria-hidden": "true"
+								}, [(m(!0), c(a, null, g(Y.value[t]?.paths ?? [], (e, t) => (m(), c("path", {
+									key: t,
+									d: e,
+									fill: "currentColor"
+								}, null, 8, L))), 128))], 8, I))], 8, P)], 8, N), l("button", {
+									type: "button",
+									role: "menuitem",
+									"aria-label": e.removeLabel,
+									title: e.removeLabel,
+									tabindex: "-1",
+									class: "ink-menu-item ink-signature-remove",
+									"data-ink-signature-remove": "",
+									"data-key": e.id,
+									onClick: (n) => $(e.id, t)
+								}, [d(i, {
+									icon: v(k),
+									size: 16
+								}, null, 8, ["icon"])], 8, R)], 64))), 128))], 8, M), t[2] ||= l("div", {
+									role: "separator",
+									class: "ink-select-separator"
+								}, null, -1)], 64)) : s("", !0),
+								l("button", {
+									type: "button",
+									role: "menuitem",
+									tabindex: "-1",
+									class: "ink-select-item ink-menu-item ink-signature-create",
+									"data-ink-select-item": "",
+									"data-ink-signature-create": "",
+									onClick: we
+								}, [d(i, {
+									icon: v(D),
+									size: 16
+								}, null, 8, ["icon"]), u(" " + _(v(b).create), 1)]),
+								v(U) ? (m(), c("p", z, _(v(U)), 1)) : s("", !0)
+							], 16)]),
+							_: 1
+						}, 16)]),
+						_: 1
+					}),
+					d(ee, {
+						open: q.value,
+						"onUpdate:open": t[0] ||= (e) => q.value = e,
+						fonts: B.fonts,
+						onCloseAutoFocus: Te
+					}, null, 8, ["open", "fonts"])
+				], 16, A)]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["open"]));
 	}
 });
 //#endregion
-export { R as default };
+export { B 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":["_openBlock","_createElementBlock","_unref","_createVNode","_mergeProps","_withCtx","_renderSlot","InkIcon","_createElementVNode","_normalizeProps","_guardReactiveProps","_Fragment","_renderList","_createCommentVNode","_createTextVNode","_toDisplayString","InkSignatureDialog","InkIcon_default","InkSignatureDialog_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","props","__props","NO_TEMPLATES","useTool","useToolOptions","ctx","useInkContext","templates","useReadable","removeError","model","computed","signatureMenuModel","options","active","tool","open","ref","creating","isOpen","main","useTemplateRef","previews","item","signaturePreview","focusFirst","toDialog","onTriggerKeydown","panel","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","onCloseAutoFocus","onMain","setTool","choose","setOptions","id","remove","nextTick","rows","row","create","onDialogCloseAutoFocus","mainAttrs","SIGNATURE_LABELS","triggerAttrs","menuAttrs","innerAttrs","handleMenuKeys","openBlock","createElementBlock","unref","createVNode","ToolbarButton","mergeProps","withCtx","renderSlot","_ctx","Signature","PopoverRoot","_cache","$event","PopoverTrigger","createElementVNode","ChevronDown","PopoverPortal","PopoverContent","normalizeProps","guardReactiveProps","Fragment","renderList","i","Trash2","createCommentVNode","Plus","createTextVNode","toDisplayString"],"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  handleMenuKeys,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n  signaturePreview,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Plus, Signature, Trash2 } from '@inkbar/icons'\nimport {\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, nextTick, 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'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\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 removeError = useReadable(() => ctx.signatures.value.removeError, undefined)\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/** A saved signature drawn small: ink as filled outlines. */\nconst previews = computed(() =>\n  model.value.items.map((item) =>\n    item.template.kind === 'ink' ? signaturePreview(item.template) : null\n  )\n)\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\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>('[data-ink-menu=\"signature\"] [role=\"menu\"]')\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\n/** Removes a template; focus moves to the signature now in its row, else \"Create signature\". */\nfunction remove(id: string, row: number): void {\n  ctx.signatures.value.remove(id).then(\n    async () => {\n      await nextTick()\n      const menu = panel()\n      if (!menu) return\n      const rows = menu.querySelectorAll<HTMLElement>('.ink-signature-item')\n      const next =\n        rows[Math.min(row, rows.length - 1)] ??\n        menu.querySelector<HTMLElement>('[data-ink-signature-create]')\n      next?.focus({ preventScroll: true })\n    },\n    () => {\n      // The host's store refused: the signature stays.\n    }\n  )\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 }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': SIGNATURE_LABELS.menu,\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\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  >\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    <PopoverRoot v-model:open=\"open\">\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          <div v-bind=\"innerAttrs\">\n            <template v-if=\"model.items.length > 0\">\n              <div\n                role=\"group\"\n                :aria-label=\"SIGNATURE_LABELS.saved\"\n                class=\"ink-signature-list\"\n                data-ink-menu-columns=\"2\"\n              >\n                <template v-for=\"(item, row) in model.items\" :key=\"item.id\">\n                  <button\n                    type=\"button\"\n                    role=\"menuitemradio\"\n                    :aria-checked=\"item.checked\"\n                    :aria-label=\"item.label\"\n                    tabindex=\"-1\"\n                    class=\"ink-select-item ink-menu-item ink-signature-item\"\n                    data-ink-select-item\n                    :data-key=\"item.id\"\n                    :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                    @click=\"choose(item.id)\"\n                  >\n                    <span class=\"ink-signature-preview\" :data-kind=\"item.template.kind\">\n                      <img\n                        v-if=\"item.template.kind === 'image'\"\n                        :src=\"item.template.imagedata\"\n                        alt=\"\"\n                        draggable=\"false\"\n                      />\n                      <svg v-else :viewBox=\"previews[row]?.viewBox\" aria-hidden=\"true\">\n                        <path\n                          v-for=\"(d, i) in previews[row]?.paths ?? []\"\n                          :key=\"i\"\n                          :d=\"d\"\n                          fill=\"currentColor\"\n                        />\n                      </svg>\n                    </span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    :aria-label=\"item.removeLabel\"\n                    :title=\"item.removeLabel\"\n                    tabindex=\"-1\"\n                    class=\"ink-menu-item ink-signature-remove\"\n                    data-ink-signature-remove\n                    :data-key=\"item.id\"\n                    @click=\"remove(item.id, row)\"\n                  >\n                    <InkIcon :icon=\"Trash2\" :size=\"16\" />\n                  </button>\n                </template>\n              </div>\n              <div role=\"separator\" class=\"ink-select-separator\" />\n            </template>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              class=\"ink-select-item ink-menu-item ink-signature-create\"\n              data-ink-select-item\n              data-ink-signature-create\n              @click=\"create\"\n            >\n              <InkIcon :icon=\"Plus\" :size=\"16\" />\n              {{ SIGNATURE_LABELS.create }}\n            </button>\n            <p\n              v-if=\"removeError\"\n              class=\"ink-field-error ink-signature-remove-error\"\n              role=\"alert\"\n              data-ink-signature-remove-error\n            >\n              {{ removeError }}\n            </p>\n          </div>\n        </PopoverContent>\n      </PopoverPortal>\n    </PopoverRoot>\n    <InkSignatureDialog\n      v-model:open=\"creating\"\n      :fonts=\"props.fonts\"\n      @close-auto-focus=\"onDialogCloseAutoFocus\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,IAAM8B,IAAQC,GAKRC,IAA6C,CAAC,GAE9C,EAAE,SAAM,eAAYC,EAAQ,GAC5B,EAAE,aAAS,mBAAeC,EAAiC,WAAW,GACtEC,IAAMC,EAAc,kBAAkB,GACtCC,KAAYC,QAAkBH,EAAI,WAAW,MAAM,WAAWH,CAAY,GAC1EO,IAAcD,QAAkBH,EAAI,WAAW,MAAM,aAAa,KAAA,CAAS,GAC3EK,IAAQC,QAAeC,GAAmBL,GAAU,OAAOM,GAAQ,KAAK,CAAC,GACzEC,IAASH,QAAeI,EAAK,UAAU,WAAW,GAClDC,IAAOC,EAAI,EAAK,GAChBC,IAAWD,EAAI,EAAK;EAE1B,GAAMD,IAAO,MAAW;GACtB,AAAIG,KAAQd,EAAI,WAAW,MAAM,iBAAiB;EACpD,CAAC;EACD,IAAMe,IAAOC,GAAqC,MAAM,GAGlDC,IAAWX,QACfD,EAAM,MAAM,MAAM,KAAK,MACrBa,EAAK,SAAS,SAAS,QAAQC,GAAiBD,EAAK,QAAQ,IAAI,IACnE,CACF,GAGIE,IAAa,IAEbC,IAAW;EAEf,SAASC,GAAiB,GAAwB;GAChD,AAAI,EAAE,QAAQ,eAAe,EAAE,oBAAoBX,EAAK,UACxD,EAAE,eAAe,GACjB,IAAa,IACb,EAAK,QAAQ;EACf;EAEA,IAAMY,UACJ,SAAS,cAA2B,+CAA2C;EAEjF,SAASC,GAAgB,GAAgB;GACvC,EAAE,eAAe;GACjB,IAAMC,IAAOF,EAAM;GAKnB,AAJIE,MACEL,IAAYM,GAAUD,CAAI,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,eAAe,GAAK,CAAC,IAC5DE,GAAqBF,CAAI,IAEhC,IAAa;EACf;EAEA,SAASG,GAAiB,GAAgB;GAExC,AADIP,KAAU,EAAE,eAAe,GAC/B,IAAW;EACb;EAEA,SAASQ,KAAe;GACtB,AAAIxB,EAAM,MAAM,WAAUyB,EAAQ,WAAW,IACxC,EAAK,QAAQ;EACpB;EAEA,SAASC,GAAO,GAAkB;GAGhC,AAFAC,GAAW,EAAE,YAAYC,EAAG,CAAC,GAC7BH,EAAQ,WAAW,GACnB,EAAK,QAAQ;EACf;EAGA,SAASI,GAAO,GAAY,GAAmB;GAC7C,EAAI,WAAW,MAAM,OAAOD,CAAE,CAAC,CAAC,KAC9B,YAAY;IACV,MAAME,GAAS;IACf,IAAMV,IAAOF,EAAM;IACnB,IAAI,CAACE,GAAM;IACX,IAAMW,IAAOX,EAAK,iBAA8B,qBAAqB;IAIrE,CAFEW,EAAK,KAAK,IAAIC,GAAKD,EAAK,SAAS,CAAC,MAClCX,EAAK,cAA2B,6BAA6B,EAAA,EACzD,MAAM,EAAE,eAAe,GAAK,CAAC;GACrC,SACM,CAEN,CACF;EACF;EAEA,SAASa,KAAe;GAGtB,AAFA,IAAW,IACX,EAAK,QAAQ,IACb,EAAS,QAAQ;EACnB;EAEA,SAASC,EAAuB,GAAgB;GAE9C,AADA,EAAE,eAAe,GACjBxB,EAAK,OAAO,IAAI,MAAM,EAAE,eAAe,GAAK,CAAC;EAC/C;EAGA,IAAMyB,KAAYlC,SAAgB;GAChC,gBAAgB,OAAOG,EAAO,KAAK;GACnC,cAAcgC,EAAiB;GAC/B,OAAOA,EAAiB;GACxB,SAASZ;EACX,EAAE,GACIa,KAAe;GACnB,cAAcD,EAAiB;GAC/B,OAAOA,EAAiB;GACxB,iBAAiB;GACjB,WAAWnB;EACb,GACMqB,KAAY,EAAE,cAAcF,EAAiB,KAAK,GAClDG,KAAa;GACjB,MAAM;GACN,cAAcH,EAAiB;GAC/B,YAAY,MAAqBI,GAAe,GAAG,EAAE,aAA4B;EACnF;oBAIEhF,EAAA,GAAAC,EAgIM,OAAA;GA/HJ,MAAK;GACJ,cAAYC,EAAA0E,CAAA,CAAgB,CAAC;GAC9B,OAAM;GACN,2BAAA;;GAEAzE,EAUgBD,EAAAmF,CAAA,GAVhBjF,EAUgB;IATV,SAAA;IAAJ,KAAI8C;IACJ,OAAM;IACN,wBAAA;IACA,6BAAA;IACA,aAAU;IACT,cAAYN,EAAA,QAAM,OAAA;GACX,GAAA+B,GAAA,KAAS,GAAA;IAEjB,SAAAtE,QAA2D,CAA3DC,GAA2DmF,EAAA,QAAA,WAAA,EAApD,QAAQ7C,EAAA,MAAM,SAAsC,CAApCzC,EAA6BI,GAAA,EAAnB,MAAML,EAAAwF,CAAA,EAAS,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAElDvF,EAyGcD,EAAAyF,CAAA,GAAA;IAzGO,MAAM7C,EAAA;IAAA,iBAAA,AAAA8C,EAAA,QAAA,MAAA,EAAI,QAAAC;;IAC7B,SAAAxF,QAYgB,CAZhBF,EAYgBD,EAAAmF,CAAA,GAAA,EAZD,YAAA,GAAQ,GAAA;KACrB,SAAAhF,QAUiB,CAVjBF,EAUiBD,EAAA4F,CAAA,GAAA,EAVD,YAAA,GAAQ,GAAA;MACtB,SAAAzF,QAQS,CARTG,EAQS,UARTJ,EAQS;OAPP,MAAK;OACL,OAAM;OACN,mCAAA;OACC,cAAY0C,EAAA,QAAI,SAAA;MACT,GAAA+B,EAAY,GAAA,CAEpB1E,EAA+BI,GAAA,EAArB,MAAML,EAAA8F,CAAA,EAAW,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,GAAA,IAAA5E,CAAA,CAAA,CAAA;;;;IAIjCjB,CAAAA,GAAAA,EA0FgBD,EAAA+F,EAAA,GAAA,MAAA;KAzFd,SAAA5F,QAwFiB,CAxFjBF,EAwFiBD,EAAAgG,EAAA,GAxFjB9F,EAwFiB;MAvFf,OAAM;MACN,2BAAA;MACA,iBAAc;MACd,MAAK;MACL,OAAM;MACL,eAAa;MACb,qBAAmB;KACZ,GAAA0E,IAAS;MACC;MACC;;MAEnB,SAAAzE,QA2EM,CA3ENG,EA2EM,OAAAC,GAAAC,EA3EOqE,EAAU,CAAA,GAAA;OACLvC,EAAA,MAAM,MAAM,SAAM,KAAlCxC,EAAA,GAAAC,EAqDWU,GAAA,EAAA,KAAA,EAAA,GAAA,CApDTH,EAkDM,OAAA;QAjDJ,MAAK;QACJ,cAAYN,EAAA0E,CAAA,CAAgB,CAAC;QAC9B,OAAM;QACN,yBAAsB;OAEtB5E,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EA2CWU,GAAA,MAAAC,EA3CqB4B,EAAA,MAAM,QAApB,GAAM,OAA2ByC,EAAA,GAAAC,EAAAmB,GAAA,EAAA,KAAAhD,EAAK,GAAA,GAAA,CACtD7C,EA4BS,UAAA;QA3BP,MAAK;QACL,MAAK;QACJ,gBAAc6C,EAAK;QACnB,cAAYA,EAAK;QAClB,UAAS;QACT,OAAM;QACN,wBAAA;QACC,YAAUA,EAAK;QACf,cAAYA,EAAK,UAAO,YAAA;QACxB,UAAK,MAAEa,GAAOb,EAAK,EAAE;OAEtB7C,GAAAA,CAAAA,EAeO,QAAA;QAfD,OAAM;QAAyB,aAAW6C,EAAK,SAAS;OAEpD,GAAA,CAAAA,EAAK,SAAS,SAAI,WAD1BrD,EAAA,GAAAC,EAKE,OAAA;;QAHC,KAAKoD,EAAK,SAAS;QACpB,KAAI;QACJ,WAAU;OAEZrD,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,EAAA,GAAAC,EAOM,OAAA;;QAPO,SAASmD,EAAA,MAASoB,EAAG,EAAG;QAAS,eAAY;OACxDxE,GAAAA,EAAAA,EAAA,EAAA,GAAAC,EAKEU,GAAA,MAAAC,EAJiBwC,EAAA,MAASoB,EAAG,EAAG,SAAK,CAAA,IAA7B,GAAG,OADbxE,EAAA,GAAAC,EAKE,QAAA;QAHC,KAAKsG;QACF;QACJ,MAAK;sBAKb/F,GAAAA,GAAAA,EAAAA,GAAAA,GAAAA,CAAAA,EAAAA,GAAAA,GAAAA,CAAAA,CAAAA,GAAAA,GAAAA,CAAAA,GAAAA,EAYS,UAAA;QAXP,MAAK;QACL,MAAK;QACJ,cAAY6C,EAAK;QACjB,OAAOA,EAAK;QACb,UAAS;QACT,OAAM;QACN,6BAAA;QACC,YAAUA,EAAK;QACf,UAAK,MAAEgB,GAAOhB,EAAK,IAAImB,CAAG;OAE3BrE,GAAAA,CAAAA,EAAqCI,GAAA;QAA3B,MAAML,EAAAsG,CAAA;QAAS,MAAM;2CAIrC,GAAA,GAAA,EAAA,GAAA,GAAAnF,CAAA,GAAA,AAAAuE,EAAA,OAAApF,EAAqD,OAAA;QAAhD,MAAK;QAAY,OAAM;;OAE9BA,EAWS,UAAA;QAVP,MAAK;QACL,MAAK;QACL,UAAS;QACT,OAAM;QACN,wBAAA;QACA,6BAAA;QACC,SAAOiE;OAERtE,GAAAA,CAAAA,EAAmCI,GAAA;QAAzB,MAAML,EAAAwG,CAAA;QAAO,MAAM;OAAM5F,GAAAA,MAAAA,GAAAA,CAAAA,MAAAA,CAAAA,GAAAA,GAAA,MACnCC,EAAGb,EAAA0E,CAAA,CAAgB,CAAC,MAAM,GAAA,CAAA,CAAA,CAAA;OAGpB1E,EAAAqC,CAAA,KADRvC,EAAA,GAAAC,EAOI,KAPJ2B,GAOIb,EADCb,EAAAqC,CAAA,CAAW,GAAA,CAAA,KAAAkE,EAAA,IAAA,EAAA;;;;;;;;GAMxBtG,EAIEa,IAAA;IAHQ,MAAMgC,EAAA;IAAA,iBAAA,AAAA4C,EAAA,QAAA,MAAA,EAAQ,QAAAC;IACrB,OAAO/D,EAAM;IACb,kBAAkB4C"}
+{"version":3,"file":"InkSignatureMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createElementVNode","_mergeProps","_renderSlot","InkIcon","_normalizeProps","_guardReactiveProps","_createElementBlock","_Fragment","_renderList","_createCommentVNode","_createTextVNode","_toDisplayString","InkSignatureDialog","InkIcon_default","InkSignatureDialog_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","props","__props","NO_TEMPLATES","useTool","useToolOptions","ctx","useInkContext","templates","useReadable","removeError","model","computed","signatureMenuModel","options","active","tool","open","ref","creating","isOpen","main","useTemplateRef","previews","item","signaturePreview","focusFirst","toDialog","onTriggerKeydown","panel","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","onCloseAutoFocus","onMain","setTool","choose","setOptions","id","remove","nextTick","rows","row","create","onDialogCloseAutoFocus","mainAttrs","SIGNATURE_LABELS","triggerAttrs","menuAttrs","innerAttrs","handleMenuKeys","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","createElementVNode","mergeProps","_ctx","ToolbarButton","renderSlot","Signature","PopoverTrigger","ChevronDown","PopoverPortal","PopoverContent","normalizeProps","guardReactiveProps","createElementBlock","Fragment","renderList","i","Trash2","createCommentVNode","Plus","createTextVNode","toDisplayString"],"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  handleMenuKeys,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n  signaturePreview,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Plus, Signature, Trash2 } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, nextTick, 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'\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 removeError = useReadable(() => ctx.signatures.value.removeError, undefined)\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/** A saved signature drawn small: ink as filled outlines. */\nconst previews = computed(() =>\n  model.value.items.map((item) =>\n    item.template.kind === 'ink' ? signaturePreview(item.template) : null\n  )\n)\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\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>('[data-ink-menu=\"signature\"] [role=\"menu\"]')\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\n/** Removes a template; focus moves to the signature now in its row, else \"Create signature\". */\nfunction remove(id: string, row: number): void {\n  ctx.signatures.value.remove(id).then(\n    async () => {\n      await nextTick()\n      const menu = panel()\n      if (!menu) return\n      const rows = menu.querySelectorAll<HTMLElement>('.ink-signature-item')\n      const next =\n        rows[Math.min(row, rows.length - 1)] ??\n        menu.querySelector<HTMLElement>('[data-ink-signature-create]')\n      next?.focus({ preventScroll: true })\n    },\n    () => {\n      // The host's store refused: the signature stays.\n    }\n  )\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 }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': SIGNATURE_LABELS.menu,\n  onKeydown: (e: KeyboardEvent) => 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=\"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            <div v-bind=\"innerAttrs\">\n              <template v-if=\"model.items.length > 0\">\n                <div\n                  role=\"group\"\n                  :aria-label=\"SIGNATURE_LABELS.saved\"\n                  class=\"ink-signature-list\"\n                  data-ink-menu-columns=\"2\"\n                >\n                  <template v-for=\"(item, row) in model.items\" :key=\"item.id\">\n                    <button\n                      type=\"button\"\n                      role=\"menuitemradio\"\n                      :aria-checked=\"item.checked\"\n                      :aria-label=\"item.label\"\n                      tabindex=\"-1\"\n                      class=\"ink-select-item ink-menu-item ink-signature-item\"\n                      data-ink-select-item\n                      :data-key=\"item.id\"\n                      :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                      @click=\"choose(item.id)\"\n                    >\n                      <span class=\"ink-signature-preview\" :data-kind=\"item.template.kind\">\n                        <img\n                          v-if=\"item.template.kind === 'image'\"\n                          :src=\"item.template.imagedata\"\n                          alt=\"\"\n                          draggable=\"false\"\n                        />\n                        <svg v-else :viewBox=\"previews[row]?.viewBox\" aria-hidden=\"true\">\n                          <path\n                            v-for=\"(d, i) in previews[row]?.paths ?? []\"\n                            :key=\"i\"\n                            :d=\"d\"\n                            fill=\"currentColor\"\n                          />\n                        </svg>\n                      </span>\n                    </button>\n                    <button\n                      type=\"button\"\n                      role=\"menuitem\"\n                      :aria-label=\"item.removeLabel\"\n                      :title=\"item.removeLabel\"\n                      tabindex=\"-1\"\n                      class=\"ink-menu-item ink-signature-remove\"\n                      data-ink-signature-remove\n                      :data-key=\"item.id\"\n                      @click=\"remove(item.id, row)\"\n                    >\n                      <InkIcon :icon=\"Trash2\" :size=\"16\" />\n                    </button>\n                  </template>\n                </div>\n                <div role=\"separator\" class=\"ink-select-separator\" />\n              </template>\n              <button\n                type=\"button\"\n                role=\"menuitem\"\n                tabindex=\"-1\"\n                class=\"ink-select-item ink-menu-item ink-signature-create\"\n                data-ink-select-item\n                data-ink-signature-create\n                @click=\"create\"\n              >\n                <InkIcon :icon=\"Plus\" :size=\"16\" />\n                {{ SIGNATURE_LABELS.create }}\n              </button>\n              <p\n                v-if=\"removeError\"\n                class=\"ink-field-error ink-signature-remove-error\"\n                role=\"alert\"\n                data-ink-signature-remove-error\n              >\n                {{ removeError }}\n              </p>\n            </div>\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/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'\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 { tool: current, setTool } = useTool()\nconst active = computed(() => current.value === props.tool)\n// A host tool has no built-in name or icon: `label` and the slot supply them.\nconst name = computed(() => props.label ?? TOOL_LABELS[props.tool] ?? props.tool)\nconst icon = computed(() => ICONS[props.tool])\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 } 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":""}

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

@@ -1 +1 @@
-{"version":3,"file":"InkToolButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkToolButton.vue"],"names":[],"mappings":"AAuFA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAgB9C,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAyEnF,QAAA,IAAI,OAAO;;;CAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU;;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"InkToolButton.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkToolButton.vue"],"names":[],"mappings":"AAkGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAgB9C,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAkFnF,QAAA,IAAI,OAAO;;;CAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU;;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkToolButton.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,12 @@
-import { useTool as e } from "../composables/useTool.js";
-import t from "./InkIcon.js";
-import { computed as n, createBlock as r, createCommentVNode as i, defineComponent as a, mergeProps as o, openBlock as s, renderSlot as c, unref as l, withCtx as u } from "vue";
-import { TOOL_LABELS as d } from "@inkbar/core/dom";
-import { ToolbarButton as f } from "reka-ui";
-import { Highlighter as p, MessageSquare as m, PenLine as h, PenTool as g, Signature as _, Square as v, SquareDashedMousePointer as y, TextCursor as b, Type as x } from "@inkbar/icons";
+import { useInkContext as e } from "../context.js";
+import { useTool as t } from "../composables/useTool.js";
+import n from "./InkIcon.js";
+import { computed as r, createBlock as i, createCommentVNode as a, defineComponent as o, mergeProps as s, openBlock as c, renderSlot as l, unref as u, withCtx as d } from "vue";
+import { TOOL_LABELS as f } from "@inkbar/core/dom";
+import { ToolbarButton as p } from "reka-ui";
+import { Highlighter as m, MessageSquare as h, PenLine as g, PenTool as _, Signature as v, Square as y, SquareDashedMousePointer as b, TextCursor as x, Type as S } from "@inkbar/icons";
 //#region src/components/InkToolButton.vue?vue&type=script&setup=true&lang.ts
-var S = /*@__PURE__*/ a({
+var C = /*@__PURE__*/ o({
 	__name: "InkToolButton",
 	props: {
 		tool: {},
@@ -15,37 +16,37 @@ var S = /*@__PURE__*/ a({
 			default: !1
 		}
 	},
-	setup(a) {
-		let S = {
-			"select-text": b,
-			select: y,
-			highlight: p,
-			"redact-area": v,
-			sketch: g,
-			draw: h,
-			note: m,
-			freetext: x,
-			signature: _
-		}, C = a, { tool: w, setTool: T } = e(), E = n(() => w.value === C.tool), D = n(() => C.label ?? d[C.tool] ?? C.tool), O = n(() => S[C.tool]), k = n(() => ({
-			"aria-pressed": String(E.value),
-			"aria-label": D.value,
-			title: D.value,
-			onClick: () => T(C.tool)
+	setup(o) {
+		let C = {
+			"select-text": x,
+			select: b,
+			highlight: m,
+			"redact-area": y,
+			sketch: _,
+			draw: g,
+			note: h,
+			freetext: S,
+			signature: v
+		}, w = o, T = e("InkToolButton"), { tool: E, setTool: D } = t(), O = r(() => E.value === w.tool), k = r(() => [...T.hostTools.value ?? [], ...T.pluginHost.value?.tools ?? []].find((e) => e.id === w.tool)), A = r(() => w.label ?? f[w.tool] ?? k.value?.label ?? w.tool), j = r(() => C[w.tool] ?? k.value?.icon), M = r(() => ({
+			"aria-pressed": String(O.value),
+			"aria-label": A.value,
+			title: A.value,
+			onClick: () => D(w.tool)
 		}));
-		return (e, n) => (s(), r(l(f), o({
-			"as-child": a.asChild,
+		return (e, t) => (c(), i(u(p), s({
+			"as-child": o.asChild,
 			class: "ink-tool-button",
 			"data-ink-tool-button": "",
-			"data-tool": a.tool,
-			"data-state": E.value ? "on" : "off"
-		}, k.value), {
-			default: u(() => [c(e.$slots, "default", {
-				active: E.value,
-				label: D.value
-			}, () => [O.value ? (s(), r(t, {
+			"data-tool": o.tool,
+			"data-state": O.value ? "on" : "off"
+		}, M.value), {
+			default: d(() => [l(e.$slots, "default", {
+				active: O.value,
+				label: A.value
+			}, () => [j.value ? (c(), i(n, {
 				key: 0,
-				icon: O.value
-			}, null, 8, ["icon"])) : i("", !0)])]),
+				icon: j.value
+			}, null, 8, ["icon"])) : a("", !0)])]),
 			_: 3
 		}, 16, [
 			"as-child",
@@ -55,6 +56,6 @@ var S = /*@__PURE__*/ a({
 	}
 });
 //#endregion
-export { S as default };
+export { C as default };
 
 //# sourceMappingURL=InkToolButton.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InkToolButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","InkIcon","_createCommentVNode","InkIcon_default","InkToolButton_vue_vue_type_script_setup_true_lang_default","ICONS","TextCursor","SquareDashedMousePointer","Highlighter","Square","PenTool","PenLine","MessageSquare","Type","Signature","props","__props","current","useTool","active","computed","name","TOOL_LABELS","icon","attrs","setTool","openBlock","createBlock","unref","ToolbarButton","mergeProps","withCtx","renderSlot","_ctx","createCommentVNode"],"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'\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 { tool: current, setTool } = useTool()\nconst active = computed(() => current.value === props.tool)\n// A host tool has no built-in name or icon: `label` and the slot supply them.\nconst name = computed(() => props.label ?? TOOL_LABELS[props.tool] ?? props.tool)\nconst icon = computed(() => ICONS[props.tool])\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":";;;;;;;;;;;;;;;;;;EAuBA,IAAMU,IAAqD;GACzD,eAAeC;GACf,QAAQC;GACR,WAAWC;GACX,eAAeC;GACf,QAAQC;GACR,MAAMC;GACN,MAAMC;GACN,UAAUC;GACV,WAAWC;EACb,GAEMC,IAAQC,GAKR,EAAE,MAAMC,GAAS,eAAYC,EAAQ,GACrCC,IAASC,QAAeH,EAAQ,UAAUF,EAAM,IAAI,GAEpDM,IAAOD,QAAeL,EAAM,SAASO,EAAYP,EAAM,SAASA,EAAM,IAAI,GAC1EQ,IAAOH,QAAef,EAAMU,EAAM,KAAK,GAEvCS,IAAQJ,SAAgB;GAC5B,gBAAgB,OAAOD,EAAO,KAAK;GACnC,cAAcE,EAAK;GACnB,OAAOA,EAAK;GACZ,eAAeI,EAAQV,EAAM,IAAI;EACnC,EAAE;oBAIApB,EAAA,GAAAC,EASgBC,EAAAgC,CAAA,GAThB/B,EASgB;GARb,YAAUkB,EAAA;GACX,OAAM;GACN,wBAAA;GACC,aAAWA,EAAA;GACX,cAAYG,EAAA,QAAM,OAAA;EACX,GAAAK,EAAA,KAAK,GAAA;GAEb,SAAAzB,QAAgF,CAAhFC,EAAgFiC,EAAA,QAAA,WAAA;IAAzE,QAAQd,EAAA;IAAS,OAAOE,EAAA;GAA/B,SAAgF,CAA5BE,EAAA,SAAf5B,EAAA,GAAAC,EAAoCK,GAAA;;IAAd,MAAMsB,EAAA"}
+{"version":3,"file":"InkToolButton.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","InkIcon","_createCommentVNode","InkIcon_default","InkToolButton_vue_vue_type_script_setup_true_lang_default","ICONS","TextCursor","SquareDashedMousePointer","Highlighter","Square","PenTool","PenLine","MessageSquare","Type","Signature","props","__props","ctx","useInkContext","current","useTool","active","computed","own","t","name","TOOL_LABELS","icon","attrs","setTool","openBlock","createBlock","unref","ToolbarButton","mergeProps","withCtx","renderSlot","_ctx","createCommentVNode"],"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":";;;;;;;;;;;;;;;;;;;EAwBA,IAAMU,IAAqD;GACzD,eAAeC;GACf,QAAQC;GACR,WAAWC;GACX,eAAeC;GACf,QAAQC;GACR,MAAMC;GACN,MAAMC;GACN,UAAUC;GACV,WAAWC;EACb,GAEMC,IAAQC,GAKRC,IAAMC,EAAc,eAAe,GACnC,EAAE,MAAMC,GAAS,eAAYC,EAAQ,GACrCC,IAASC,QAAeH,EAAQ,UAAUJ,EAAM,IAAI,GAEpDQ,IAAMD,QACV,CAAC,GAAIL,EAAI,UAAU,SAAS,CAAC,GAAI,GAAIA,EAAI,WAAW,OAAO,SAAS,CAAC,CAAE,CAAC,CAAC,MACtE,MAAMO,EAAE,OAAOT,EAAM,IACxB,CACF,GAEMU,IAAOH,QACLP,EAAM,SAASW,EAAYX,EAAM,SAASQ,EAAI,OAAO,SAASR,EAAM,IAC5E,GACMY,IAAOL,QAAejB,EAAMU,EAAM,SAASQ,EAAI,OAAO,IAAI,GAE1DK,IAAQN,SAAgB;GAC5B,gBAAgB,OAAOD,EAAO,KAAK;GACnC,cAAcI,EAAK;GACnB,OAAOA,EAAK;GACZ,eAAeI,EAAQd,EAAM,IAAI;EACnC,EAAE;oBAIApB,EAAA,GAAAC,EASgBC,EAAAoC,CAAA,GAThBnC,EASgB;GARb,YAAUkB,EAAA;GACX,OAAM;GACN,wBAAA;GACC,aAAWA,EAAA;GACX,cAAYK,EAAA,QAAM,OAAA;EACX,GAAAO,EAAA,KAAK,GAAA;GAEb,SAAA7B,QAAgF,CAAhFC,EAAgFqC,EAAA,QAAA,WAAA;IAAzE,QAAQhB,EAAA;IAAS,OAAOI,EAAA;GAA/B,SAAgF,CAA5BE,EAAA,SAAfhC,EAAA,GAAAC,EAAoCK,GAAA;;IAAd,MAAM0B,EAAA"}