@inkbar/vue 0.2.0 → 0.4.0

package/dist/components/InkSignatureDialog.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import e from "./SignatureForm.js";
+import { createBlock as t, createTextVNode as n, createVNode as r, defineComponent as i, mergeModels as a, mergeProps as o, openBlock as s, toDisplayString as c, unref as l, useModel as u, withCtx as d } from "vue";
+import { SIGNATURE_LABELS as f } from "@inkbar/core/dom";
+import { DialogContent as p, DialogOverlay as m, DialogPortal as h, DialogRoot as g, DialogTitle as _ } from "reka-ui";
+//#region src/components/InkSignatureDialog.vue?vue&type=script&setup=true&lang.ts
+var v = /*@__PURE__*/ i({
+	__name: "InkSignatureDialog",
+	props: /*@__PURE__*/ a({ fonts: {} }, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ a(["save", "closeAutoFocus"], ["update:open"]),
+	setup(i, { emit: a }) {
+		let v = i, y = u(i, "open"), b = a, x = {
+			"aria-modal": "true",
+			"aria-describedby": void 0
+		};
+		function S(e) {
+			e.preventDefault(), e.target?.querySelector("[role=\"tab\"][aria-selected=\"true\"]")?.focus({ preventScroll: !0 });
+		}
+		return (i, a) => (s(), t(l(g), {
+			open: y.value,
+			"onUpdate:open": a[3] ||= (e) => y.value = e
+		}, {
+			default: d(() => [r(l(h), null, {
+				default: d(() => [r(l(m), {
+					class: "ink-dialog-overlay",
+					"data-ink-dialog-overlay": ""
+				}), r(l(p), o({
+					class: "ink-dialog ink-signature-dialog",
+					"data-ink-signature-dialog": ""
+				}, x, {
+					onOpenAutoFocus: S,
+					onCloseAutoFocus: a[2] ||= (e) => b("closeAutoFocus", e)
+				}), {
+					default: d(() => [r(l(_), { class: "ink-dialog-title" }, {
+						default: d(() => [n(c(l(f).dialog), 1)]),
+						_: 1
+					}), r(e, {
+						fonts: v.fonts,
+						onSaved: a[0] ||= (e) => b("save", e),
+						onClose: a[1] ||= (e) => y.value = !1
+					}, null, 8, ["fonts"])]),
+					_: 1
+				}, 16)]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["open"]));
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=InkSignatureDialog.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSignatureDialog.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","_createTextVNode","_toDisplayString","SignatureForm","SignatureForm_default","InkSignatureDialog_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","__emit","props","__props","open","useModel","emit","contentAttrs","onOpenAutoFocus","openBlock","createBlock","unref","DialogRoot","_cache","$event","withCtx","createVNode","DialogPortal","DialogOverlay","DialogContent","mergeProps","DialogTitle","createTextVNode","toDisplayString","SIGNATURE_LABELS"],"sources":["../../src/components/InkSignatureDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * \"Create signature\": a modal with Draw, Type and Image tabs. Draw is a pad with the draw\n * tool's renderer; Type sets a name in one of the host's handwriting fonts; Image takes a PNG\n * or JPEG scan. Save stores the template through InkRoot's signature store and selects it for\n * the `signature` tool. Escape, Cancel or a press outside closes it.\n */\nimport { SIGNATURE_LABELS } from '@inkbar/core/dom'\nimport {\n  DialogContent,\n  DialogOverlay,\n  DialogPortal,\n  DialogRoot,\n  DialogTitle,\n} from 'reka-ui'\n\nimport SignatureForm from './SignatureForm.vue'\n\nimport type { SignatureTemplate } from '@inkbar/core'\n\nconst props = defineProps<{\n  /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\nconst open = defineModel<boolean>('open', { default: false })\nconst emit = defineEmits<{\n  /** The new template, once saved and selected. */\n  save: [template: SignatureTemplate]\n  /** Reka's close auto-focus; prevent it to place focus yourself. */\n  closeAutoFocus: [event: Event]\n}>()\n\n// Reka's typed props stop at its own; ARIA goes through a bound object. No description: the\n// title says it all.\nconst contentAttrs = { 'aria-modal': 'true', 'aria-describedby': undefined }\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  ;(e.target as HTMLElement | null)\n    ?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')\n    ?.focus({ preventScroll: true })\n}\n</script>\n\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay class=\"ink-dialog-overlay\" data-ink-dialog-overlay />\n      <DialogContent\n        class=\"ink-dialog ink-signature-dialog\"\n        data-ink-signature-dialog\n        v-bind=\"contentAttrs\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n        @close-auto-focus=\"emit('closeAutoFocus', $event)\"\n      >\n        <DialogTitle class=\"ink-dialog-title\">{{ SIGNATURE_LABELS.dialog }}</DialogTitle>\n        <SignatureForm\n          :fonts=\"props.fonts\"\n          @saved=\"emit('save', $event)\"\n          @close=\"open = false\"\n        />\n      </DialogContent>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAoBA,IAAMe,IAAQC,GAIRC,IAAOjB,EAAoBgB,GAAC,MAA0B,GACtDG,IAAOL,GASPM,IAAe;GAAE,cAAc;GAAQ,oBAAoB,KAAA;EAAU;EAE3E,SAASC,EAAgB,GAAgB;GAEtC,AADD,EAAE,eAAe,GAChB,EAAG,QACA,cAA2B,wCAAoC,CAAA,EAC/D,MAAM,EAAE,eAAe,GAAK,CAAC;EACnC;oBAIEpB,EAAA,GAAAC,EAkBaC,EAAAsB,CAAA,GAAA;GAlBO,MAAMR,EAAA;GAAA,iBAAA,AAAAS,EAAA,QAAA,MAAA,EAAI,QAAAC;;GAC5B,SAAAvB,QAgBe,CAhBfC,EAgBeF,EAAA2B,CAAA,GAAA,MAAA;IAfb,SAAA1B,QAAoE,CAApEC,EAAoEF,EAAA4B,CAAA,GAAA;KAArD,OAAM;KAAqB,2BAAA;IAC1C1B,CAAAA,GAAAA,EAagBF,EAAA6B,CAAA,GAbhB1B,EAagB;KAZd,OAAM;KACN,6BAAA;IACQ,GAAAc,GAAY;KACF;KACjB,kBAAgB,AAAAM,EAAA,QAAA,MAAEP,EAAI,kBAAmBQ,CAAM;;KAEhD,SAAAvB,QAAiF,CAAjFC,EAAiFF,EAAA+B,CAAA,GAAA,EAApE,OAAM,mBAAkB,GAAA;MAAC,SAAA9B,QAA6B,CAA1BG,EAAAC,EAAAL,EAAAkC,CAAA,CAAgB,CAAC,MAAM,GAAA,CAAA,CAAA,CAAA;;KAChEhC,CAAAA,GAAAA,EAIEI,GAAA;MAHC,OAAOM,EAAM;MACb,SAAK,AAAAW,EAAA,QAAA,MAAEP,EAAI,QAASQ,CAAM;MAC1B,SAAK,AAAAD,EAAA,QAAA,MAAE,EAAA,QAAI"}

package/dist/components/InkSignatureMenu.js

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

package/dist/components/InkSignatureMenu.js.map

@@ -0,0 +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  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":""}

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */
+    fonts?: readonly string[] | undefined;
+};
+declare var __VLS_7: {
+    active: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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=InkSignatureMenu.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSignatureMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkSignatureMenu.vue"],"names":[],"mappings":"AAoUA,KAAK,WAAW,GAAG;IACjB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;CACtC,CAAC;AA2cF,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,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

@@ -0,0 +1,213 @@
+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 "./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";
+//#region src/components/InkSignatureMenu.vue?vue&type=script&setup=true&lang.ts
+var O = ["aria-label"], k = ["data-state"], A = ["aria-label"], j = [
+	"aria-checked",
+	"aria-label",
+	"data-key",
+	"data-state",
+	"onClick"
+], M = ["data-kind"], N = ["src"], P = ["viewBox"], F = ["d"], I = [
+	"aria-label",
+	"title",
+	"data-key",
+	"onClick"
+], L = {
+	key: 1,
+	class: "ink-field-error ink-signature-remove-error",
+	role: "alert",
+	"data-ink-signature-remove-error": ""
+}, R = /*@__PURE__*/ d({
+	__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) => {
+			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) {
+			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) {
+			e.preventDefault();
+			let t = Q();
+			t && (X ? le(t)[0]?.focus({ preventScroll: !0 }) : se(t)), X = !1;
+		}
+		function ye(e) {
+			Z && e.preventDefault(), Z = !1;
+		}
+		function be() {
+			W.value.selected ? V("signature") : K.value = !0;
+		}
+		function xe(e) {
+			he({ templateId: e }), V("signature"), K.value = !1;
+		}
+		function Se(e, t) {
+			H.signatures.value.remove(e).then(async () => {
+				await ne();
+				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() {
+			Z = !0, K.value = !1, q.value = !0;
+		}
+		function $(e) {
+			e.preventDefault(), J.value?.$el.focus({ preventScroll: !0 });
+		}
+		let we = o(() => ({
+			"aria-pressed": String(G.value),
+			"aria-label": b.sign,
+			title: b.sign,
+			onClick: be
+		})), Te = {
+			"aria-label": b.trigger,
+			title: b.trigger,
+			"aria-haspopup": "menu",
+			onKeydown: _e
+		}, Ee = { "aria-label": b.menu }, De = {
+			role: "menu",
+			"aria-label": b.menu,
+			onKeydown: (e) => ce(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", {
+								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)]),
+						_: 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));
+	}
+});
+//#endregion
+export { R 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

@@ -0,0 +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":"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"}

package/dist/components/InkTextStyleMenu.js

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

package/dist/components/InkTextStyleMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkTextStyleMenu.js","names":["_sfc_main","InkTextStyleMenu_vue_vue_type_script_setup_true_lang_default","InkTextStyleMenu_default"],"sources":["../../src/components/InkTextStyleMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * Font, size, text colour, bold, italic, underline and alignment for the selected text boxes or\n * the text tool. A popover panel rather than a menu list: it holds a select, a number input\n * with a stepper, toggle buttons and a radio group, each named and operable on its own. The\n * trigger carries `data-mixed` when the selection disagrees on any of them.\n */\nimport { handleRadioKeys, textStyleMenuModel } from '@inkbar/core/dom'\nimport {\n  ALargeSmall,\n  AlignCenter,\n  AlignJustify,\n  AlignLeft,\n  AlignRight,\n  Bold,\n  Italic,\n  Minus,\n  Plus,\n  Underline,\n} from '@inkbar/icons'\nimport {\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, mergeProps, ref, useAttrs, watch } from 'vue'\n\nimport { useToolStyle } from '../composables/useToolStyle'\nimport { useInkContext } from '../context'\n\nimport InkColorMenu from './InkColorMenu.vue'\nimport InkIcon from './InkIcon.vue'\n\nconst { fonts } = useInkContext('InkTextStyleMenu')\n// The host's attributes go on the trigger: the root is a renderless popover.\ndefineOptions({ inheritAttrs: false })\nconst attrs = useAttrs()\n\nconst { current, supported, set } = useToolStyle()\nconst open = ref(false)\n/** The size as typed, until it is committed with Enter or blur. */\nconst draft = ref<string | null>(null)\n\nconst model = computed(() =>\n  textStyleMenuModel(current.value, supported.value, fonts.value)\n)\nconst sizeShown = computed(\n  () =>\n    draft.value ?? (model.value.size.value === null ? '' : String(model.value.size.value))\n)\n\nconst TOGGLE_ICONS = { bold: Bold, italic: Italic, underline: Underline }\nconst ALIGN_ICONS = {\n  left: AlignLeft,\n  center: AlignCenter,\n  right: AlignRight,\n  justify: AlignJustify,\n}\n\n// The menu closes when the control disables (the selection cleared while it was open).\nwatch(\n  () => model.value.enabled,\n  (enabled) => {\n    if (!enabled) open.value = false\n  }\n)\n\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value || !model.value.enabled)\n    return\n  e.preventDefault()\n  open.value = true\n}\n\nfunction commitSize(): void {\n  if (draft.value === null) return\n  if (draft.value.trim() !== '') {\n    const patch = model.value.size.commit(Number(draft.value))\n    if (patch) set(patch)\n  }\n  draft.value = null\n}\nfunction nudge(direction: 1 | -1): void {\n  const patch = model.value.size.nudge(direction)\n  if (patch) set(patch)\n  draft.value = null\n}\n\n// Reka's typed props stop at its own; ARIA goes through bound objects.\nconst triggerAttrs = computed(() => ({\n  'aria-label': model.value.label,\n  title: model.value.label,\n  'aria-haspopup': 'dialog' as const,\n  onKeydown: onTriggerKeydown,\n  'data-mixed': model.value.mixed ? '' : undefined,\n}))\n/**\n * The trigger's bindings over the host's: both keydown listeners run, the host's first, and a\n * host `disabled` can disable the trigger but not enable it.\n */\nconst triggerBindings = computed(() =>\n  mergeProps(attrs, triggerAttrs.value, {\n    disabled: (attrs.disabled ?? false) !== false || !model.value.enabled,\n  })\n)\nconst menuAttrs = computed(() => ({ 'aria-label': model.value.label }))\n</script>\n\n<template>\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-text-style-menu\"\n          data-ink-text-style-menu\n          :data-state=\"open ? 'open' : 'closed'\"\n          v-bind=\"triggerBindings\"\n        >\n          <slot><InkIcon :icon=\"ALargeSmall\" /></slot>\n        </button>\n      </PopoverTrigger>\n    </ToolbarButton>\n    <PopoverPortal>\n      <PopoverContent\n        class=\"ink-select-content ink-menu-content ink-text-style-content\"\n        data-ink-select-content\n        data-ink-menu=\"text-style\"\n        side=\"bottom\"\n        align=\"start\"\n        :side-offset=\"4\"\n        :collision-padding=\"8\"\n        v-bind=\"menuAttrs\"\n      >\n        <select\n          class=\"ink-text-style-font\"\n          :aria-label=\"model.font.label\"\n          :value=\"model.font.value\"\n          @change=\"set(model.font.patch(($event.target as HTMLSelectElement).value))\"\n        >\n          <option v-if=\"model.font.value === ''\" value=\"\" disabled hidden>Mixed</option>\n          <option v-for=\"f in model.font.options\" :key=\"f\" :value=\"f\">{{ f }}</option>\n        </select>\n        <div class=\"ink-text-style-row\">\n          <InkColorMenu property=\"textColor\" standalone />\n          <div class=\"ink-text-style-size\" role=\"group\" aria-label=\"Size\">\n            <button\n              type=\"button\"\n              class=\"ink-text-style-button\"\n              aria-label=\"Decrease font size\"\n              @click=\"nudge(-1)\"\n            >\n              <InkIcon :icon=\"Minus\" :size=\"16\" />\n            </button>\n            <input\n              type=\"number\"\n              class=\"ink-text-style-input\"\n              :aria-label=\"model.size.label\"\n              :min=\"model.size.min\"\n              :max=\"model.size.max\"\n              :step=\"model.size.step\"\n              :value=\"sizeShown\"\n              @input=\"draft = ($event.target as HTMLInputElement).value\"\n              @blur=\"commitSize\"\n              @keydown.enter.prevent=\"commitSize\"\n            />\n            <button\n              type=\"button\"\n              class=\"ink-text-style-button\"\n              aria-label=\"Increase font size\"\n              @click=\"nudge(1)\"\n            >\n              <InkIcon :icon=\"Plus\" :size=\"16\" />\n            </button>\n          </div>\n        </div>\n        <div class=\"ink-text-style-row\" role=\"group\" aria-label=\"Emphasis\">\n          <button\n            v-for=\"t in model.toggles\"\n            :key=\"t.key\"\n            type=\"button\"\n            class=\"ink-text-style-button\"\n            :aria-label=\"t.label\"\n            :title=\"t.label\"\n            :aria-pressed=\"t.pressed\"\n            :data-state=\"t.pressed === true ? 'on' : 'off'\"\n            :data-mixed=\"t.pressed === 'mixed' ? '' : undefined\"\n            @click=\"set(t.patch)\"\n          >\n            <InkIcon :icon=\"TOGGLE_ICONS[t.key]\" :size=\"16\" />\n          </button>\n        </div>\n        <div\n          class=\"ink-text-style-row\"\n          role=\"radiogroup\"\n          :aria-label=\"model.align.label\"\n          @keydown=\"handleRadioKeys($event, $event.currentTarget as HTMLElement)\"\n        >\n          <button\n            v-for=\"c in model.align.choices\"\n            :key=\"c.key\"\n            type=\"button\"\n            role=\"radio\"\n            class=\"ink-text-style-button\"\n            :aria-label=\"c.label\"\n            :title=\"c.label\"\n            :aria-checked=\"c.checked\"\n            :tabindex=\"c.tabStop ? 0 : -1\"\n            :data-state=\"c.checked ? 'on' : 'off'\"\n            @click=\"set(c.patch)\"\n          >\n            <InkIcon :icon=\"ALIGN_ICONS[c.key]\" :size=\"16\" />\n          </button>\n        </div>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,14 @@
+declare var __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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=InkTextStyleMenu.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkTextStyleMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkTextStyleMenu.vue"],"names":[],"mappings":"AAgpBA,QAAA,IAAI,QAAQ,IAAY,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,+QACd,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/InkTextStyleMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,200 @@
+import { useInkContext as e } from "../context.js";
+import { useToolStyle as t } from "../composables/useToolStyle.js";
+import n from "./InkIcon.js";
+import ee from "./InkColorMenu.js";
+import { Fragment as r, computed as i, createBlock as te, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeProps as u, openBlock as d, ref as f, renderList as p, renderSlot as ne, toDisplayString as re, unref as m, useAttrs as ie, watch as ae, withCtx as h, withKeys as oe, withModifiers as g } from "vue";
+import { handleRadioKeys as _, textStyleMenuModel as v } from "@inkbar/core/dom";
+import { PopoverContent as y, PopoverPortal as b, PopoverRoot as x, PopoverTrigger as S, ToolbarButton as C } from "reka-ui";
+import { ALargeSmall as w, AlignCenter as T, AlignJustify as E, AlignLeft as D, AlignRight as O, Bold as k, Italic as A, Minus as j, Plus as M, Underline as N } from "@inkbar/icons";
+//#region src/components/InkTextStyleMenu.vue?vue&type=script&setup=true&lang.ts
+var P = ["data-state"], F = ["aria-label", "value"], se = {
+	key: 0,
+	value: "",
+	disabled: "",
+	hidden: ""
+}, I = ["value"], L = { class: "ink-text-style-row" }, R = {
+	class: "ink-text-style-size",
+	role: "group",
+	"aria-label": "Size"
+}, z = [
+	"aria-label",
+	"min",
+	"max",
+	"step",
+	"value",
+	"onKeydown"
+], B = {
+	class: "ink-text-style-row",
+	role: "group",
+	"aria-label": "Emphasis"
+}, V = [
+	"aria-label",
+	"title",
+	"aria-pressed",
+	"data-state",
+	"data-mixed",
+	"onClick"
+], H = ["aria-label"], U = [
+	"aria-label",
+	"title",
+	"aria-checked",
+	"tabindex",
+	"data-state",
+	"onClick"
+], W = /*@__PURE__*/ l({
+	inheritAttrs: !1,
+	__name: "InkTextStyleMenu",
+	setup(l) {
+		let { fonts: W } = e("InkTextStyleMenu"), G = ie(), { current: K, supported: ce, set: q } = t(), J = f(!1), Y = f(null), X = i(() => v(K.value, ce.value, W.value)), le = i(() => Y.value ?? (X.value.size.value === null ? "" : String(X.value.size.value))), ue = {
+			bold: k,
+			italic: A,
+			underline: N
+		}, de = {
+			left: D,
+			center: T,
+			right: O,
+			justify: E
+		};
+		ae(() => X.value.enabled, (e) => {
+			e || (J.value = !1);
+		});
+		function Z(e) {
+			e.key !== "ArrowDown" || e.defaultPrevented || J.value || !X.value.enabled || (e.preventDefault(), J.value = !0);
+		}
+		function Q() {
+			if (Y.value !== null) {
+				if (Y.value.trim() !== "") {
+					let e = X.value.size.commit(Number(Y.value));
+					e && q(e);
+				}
+				Y.value = null;
+			}
+		}
+		function $(e) {
+			let t = X.value.size.nudge(e);
+			t && q(t), Y.value = null;
+		}
+		let fe = i(() => ({
+			"aria-label": X.value.label,
+			title: X.value.label,
+			"aria-haspopup": "dialog",
+			onKeydown: Z,
+			"data-mixed": X.value.mixed ? "" : void 0
+		})), pe = i(() => u(G, fe.value, { disabled: (G.disabled ?? !1) !== !1 || !X.value.enabled })), me = i(() => ({ "aria-label": X.value.label }));
+		return (e, t) => (d(), te(m(x), {
+			open: J.value,
+			"onUpdate:open": t[5] ||= (e) => J.value = e
+		}, {
+			default: h(() => [c(m(C), { "as-child": "" }, {
+				default: h(() => [c(m(S), { "as-child": "" }, {
+					default: h(() => [s("button", u({
+						type: "button",
+						class: "ink-menu-trigger ink-text-style-menu",
+						"data-ink-text-style-menu": "",
+						"data-state": J.value ? "open" : "closed"
+					}, pe.value), [ne(e.$slots, "default", {}, () => [c(n, { icon: m(w) }, null, 8, ["icon"])])], 16, P)]),
+					_: 3
+				})]),
+				_: 3
+			}), c(m(b), null, {
+				default: h(() => [c(m(y), u({
+					class: "ink-select-content ink-menu-content ink-text-style-content",
+					"data-ink-select-content": "",
+					"data-ink-menu": "text-style",
+					side: "bottom",
+					align: "start",
+					"side-offset": 4,
+					"collision-padding": 8
+				}, me.value), {
+					default: h(() => [
+						s("select", {
+							class: "ink-text-style-font",
+							"aria-label": X.value.font.label,
+							value: X.value.font.value,
+							onChange: t[0] ||= (e) => m(q)(X.value.font.patch(e.target.value))
+						}, [X.value.font.value === "" ? (d(), o("option", se, "Mixed")) : a("", !0), (d(!0), o(r, null, p(X.value.font.options, (e) => (d(), o("option", {
+							key: e,
+							value: e
+						}, re(e), 9, I))), 128))], 40, F),
+						s("div", L, [c(ee, {
+							property: "textColor",
+							standalone: ""
+						}), s("div", R, [
+							s("button", {
+								type: "button",
+								class: "ink-text-style-button",
+								"aria-label": "Decrease font size",
+								onClick: t[1] ||= (e) => $(-1)
+							}, [c(n, {
+								icon: m(j),
+								size: 16
+							}, null, 8, ["icon"])]),
+							s("input", {
+								type: "number",
+								class: "ink-text-style-input",
+								"aria-label": X.value.size.label,
+								min: X.value.size.min,
+								max: X.value.size.max,
+								step: X.value.size.step,
+								value: le.value,
+								onInput: t[2] ||= (e) => Y.value = e.target.value,
+								onBlur: Q,
+								onKeydown: oe(g(Q, ["prevent"]), ["enter"])
+							}, null, 40, z),
+							s("button", {
+								type: "button",
+								class: "ink-text-style-button",
+								"aria-label": "Increase font size",
+								onClick: t[3] ||= (e) => $(1)
+							}, [c(n, {
+								icon: m(M),
+								size: 16
+							}, null, 8, ["icon"])])
+						])]),
+						s("div", B, [(d(!0), o(r, null, p(X.value.toggles, (e) => (d(), o("button", {
+							key: e.key,
+							type: "button",
+							class: "ink-text-style-button",
+							"aria-label": e.label,
+							title: e.label,
+							"aria-pressed": e.pressed,
+							"data-state": e.pressed === !0 ? "on" : "off",
+							"data-mixed": e.pressed === "mixed" ? "" : void 0,
+							onClick: (t) => m(q)(e.patch)
+						}, [c(n, {
+							icon: ue[e.key],
+							size: 16
+						}, null, 8, ["icon"])], 8, V))), 128))]),
+						s("div", {
+							class: "ink-text-style-row",
+							role: "radiogroup",
+							"aria-label": X.value.align.label,
+							onKeydown: t[4] ||= (e) => m(_)(e, e.currentTarget)
+						}, [(d(!0), o(r, null, p(X.value.align.choices, (e) => (d(), o("button", {
+							key: e.key,
+							type: "button",
+							role: "radio",
+							class: "ink-text-style-button",
+							"aria-label": e.label,
+							title: e.label,
+							"aria-checked": e.checked,
+							tabindex: e.tabStop ? 0 : -1,
+							"data-state": e.checked ? "on" : "off",
+							onClick: (t) => m(q)(e.patch)
+						}, [c(n, {
+							icon: de[e.key],
+							size: 16
+						}, null, 8, ["icon"])], 8, U))), 128))], 40, H)
+					]),
+					_: 1
+				}, 16)]),
+				_: 1
+			})]),
+			_: 3
+		}, 8, ["open"]));
+	}
+});
+//#endregion
+export { W as default };
+
+//# sourceMappingURL=InkTextStyleMenu.vue_vue_type_script_setup_true_lang.js.map