@inkbar/vue 0.3.0 → 0.4.0

package/README.md

@@ -20,7 +20,7 @@
 
 ---
 
-Drop a PDF viewer into your Vue app and let people highlight text, leave notes with replies and review redactions. `@inkbar/vue` gives you components and composables to build your own toolbars, plus note and suggestion popovers, all styled by `@inkbar/theme`.
+Drop a PDF viewer into your Vue app and let people highlight text, leave notes with replies and review redactions. `@inkbar/vue` gives you components and composables to build your own toolbars, plus thread and suggestion popovers, all styled by `@inkbar/theme`.
 
 Annotations are plain typed objects. Bind them with `v-model` to keep them in your own state, or let Inkbar hold them with undo and redo.
 
@@ -50,7 +50,7 @@ import {
   InkPageCount,
   InkNextPage,
   InkZoomSelect,
-  InkNotePopover,
+  InkThreadPopover,
   InkSuggestionCard,
 } from '@inkbar/vue'
 import type { Annotation } from '@inkbar/core'
@@ -69,7 +69,7 @@ const annotations = ref<Annotation[]>([])
     v-model:annotations="annotations"
   >
     <InkToolbar>
-      <InkToolButton tool="view" />
+      <InkToolButton tool="select-text" />
       <InkToolButton tool="select" />
       <InkToolButton tool="highlight" />
       <InkToolButton tool="redact-area" />
@@ -86,7 +86,7 @@ const annotations = ref<Annotation[]>([])
       <InkNextPage />
       <InkZoomSelect />
     </InkToolbar>
-    <InkNotePopover />
+    <InkThreadPopover />
     <InkSuggestionCard />
   </InkRoot>
 </template>
@@ -116,15 +116,21 @@ Inside `InkRoot`, `useHistory()` returns the same object. Its `batch(fn)` runs `
 
 `key` identifies the document. Reuse the same key when only the signed URL changes and the document is not reloaded.
 
-## Note popover
+## Thread popover
 
-`InkNotePopover` opens the thread of the activated note. A new note has no text yet, so the form first writes the note's own text (labelled "Comment"); after that it adds replies.
+`InkThreadPopover` opens the comment thread of the activated note or text markup (a highlight, underline, strikeout or squiggly). A new note or highlight has no text yet, so the form first writes its own `contents` (labelled "Comment"); after that it adds replies. A highlight with a comment shows a small marker at its end. Replies show in the thread only; the page draws just the note or highlight they answer.
 
-A root note with no text and no replies is removed when its popover closes, or when activation moves to another annotation, so abandoned notes do not stay on the page. Locked notes are never removed. If you add notes yourself (`add({ type: 'text', ... })`), give them `contents`, or they will be removed the first time someone opens and closes them.
+A root note with no text and no replies is removed when its popover closes, or when activation moves to another annotation, so abandoned notes do not stay on the page. A highlight stays: the mark is the point. Locked annotations are never removed. If you add notes yourself (`add({ type: 'text', ... })`), give them `contents`, or they will be removed the first time someone opens and closes them.
+
+The highlight tool leaves `contents` free for the comment. `doc.text(page)` returns the page's text items; match the markup's `quads` against them to get the marked text. `InkHighlightMenu` is a split button for the tool: it picks the markup kind and its colour.
+
+## Signatures
+
+`InkSignatureMenu` lists saved signatures, picks one for the `signature` tool, removes them, and opens `InkSignatureDialog` to draw, type or upload a new one. These are marks on the page, not cryptographic signatures. Pass `signatures` to `InkRoot` to keep them somewhere: `createLocalSignatureStore(key)` from `@inkbar/core` uses `localStorage`, and without it they last until reload. `signatureFonts` lists the handwriting fonts the Type tab offers; load them with `@font-face`. A placed signature keeps its aspect ratio when resized.
 
 ## Custom rendering
 
-Slots let you render parts yourself. `InkViewport` has `loading`, `empty`, `error`, `annotation` and `page-error` slots. `InkNotePopover` and `InkSuggestionCard` have a scoped default slot that receives the popover's props, and the default slot of `InkToolButton` receives `{ active, label }`. The props are typed as `AnnotationSlotProps`, `NotePopoverSlotProps` and `SuggestionCardSlotProps`, the same types the React and Svelte packages export.
+Slots let you render parts yourself. `InkViewport` has `loading`, `empty`, `error`, `annotation` and `page-error` slots. `InkThreadPopover` and `InkSuggestionCard` have a scoped default slot that receives the popover's props, and the default slot of `InkToolButton` receives `{ active, label }`. The props are typed as `AnnotationSlotProps`, `ThreadPopoverSlotProps` and `SuggestionCardSlotProps`, the same types the React and Svelte packages export.
 
 `InkRoot`, `InkToolbar`, `InkToolButton`, `InkUndo`, `InkRedo`, `InkPrevPage`, `InkNextPage`, `InkZoomIn` and `InkZoomOut` take `as-child` to render your own element in place of theirs, such as a button from your design system. Put that element in the default slot. The control keeps its behaviour and accessible name.
 
@@ -134,6 +140,7 @@ The scroll area takes focus. From there:
 
 - With the `highlight` or `redact-area` tool active, `Enter` turns the text selection into a mark.
 - With the `note` tool active, `Enter` places a note at the centre of the current page and opens it.
+- With the `signature` tool active, `Enter` places the chosen signature at the centre of the current page.
 
 On a focused annotation:
 
@@ -151,7 +158,7 @@ Components carry state on data attributes, for example `[data-annotation][data-s
 
 ## Composables
 
-`useDocument`, `useAnnotations`, `useTool`, `useSelection`, `useZoom`, `usePage`, `useHistory` and `useEmbedded` read the state of the nearest `InkRoot`. Build your own toolbar or side panel from them.
+`useDocument`, `useAnnotations`, `useTool`, `useSelection`, `useZoom`, `usePage`, `useHistory` and `useEmbedded` read the state of the nearest `InkRoot`. Build your own toolbar or side panel from them. Tool options, such as the shape kind, last as long as `InkRoot`. The tool style that `useToolStyle` reads and sets (colours, line style, text style) belongs to the document: opening another one starts again from the theme's defaults.
 
 ## Licence
 

package/dist/components/InkColorMenu.js

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

package/dist/components/InkColorMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkColorMenu.js","names":["_sfc_main","InkColorMenu_vue_vue_type_script_setup_true_lang_default","InkColorMenu_default"],"sources":["../../src/components/InkColorMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A colour menu for one colour property (border, fill or text) of the selection or the active\n * tool. The trigger shows the current colour as a swatch: split when the selection disagrees,\n * slashed for no fill. The panel is a palette grid, plus \"No fill\" for `fill` and \"Custom…\",\n * which opens a native colour input. The menu disables when nothing supports the property.\n */\nimport {\n  COLOR_COLUMNS,\n  colorMenuModel,\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  type ColorProperty,\n} from '@inkbar/core/dom'\nimport { Check } from '@inkbar/icons'\nimport {\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, defineComponent, mergeProps, ref, useAttrs, watch } from 'vue'\n\nimport { useToolStyle } from '../composables/useToolStyle'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { StyleGroup } from '@inkbar/core'\n\ndefineOptions({ inheritAttrs: false })\nconst attrs = useAttrs()\n\n/** Stands in for the toolbar item when the menu is nested in another panel. */\nconst PassThrough = defineComponent({\n  inheritAttrs: false,\n  setup:\n    (_, { slots }) =>\n    () =>\n      slots.default?.(),\n})\n\nconst props = defineProps<{\n  /** The colour this menu sets. */\n  property: ColorProperty\n  /** Accessible name; defaults to \"Border colour\", \"Fill colour\" or \"Text colour\". */\n  label?: string\n  /**\n   * Renders the trigger outside the toolbar's roving focus, for a menu nested in another\n   * panel (the text style menu's text colour).\n   */\n  standalone?: boolean\n  /**\n   * Scopes the menu to one style group: it shows and sets that group's colour whatever tool\n   * is active, and recolours the selection only when it is all in the group.\n   */\n  group?: StyleGroup | undefined\n}>()\n\nconst { current, supported, set } = useToolStyle(() => props.group)\nconst open = ref(false)\nconst customInput = ref<HTMLInputElement | null>(null)\n\nconst model = computed(() =>\n  colorMenuModel(props.property, current.value, supported.value)\n)\nconst name = computed(() => props.label ?? model.value.label)\nconst trigger = computed(() => model.value.trigger)\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\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value || !model.value.enabled)\n    return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  // One menu is open at a time.\n  const menu = document.querySelector(\n    `[data-ink-menu=\"color-${props.property}\"] [role=\"menu\"]`\n  )\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\n// Reka's typed props stop at its own; ARIA goes through bound objects.\nconst triggerAttrs = computed(() => ({\n  'aria-label': name.value,\n  title: name.value,\n  'aria-haspopup': 'menu' 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': name.value }))\nconst innerAttrs = computed(() => ({\n  role: 'menu',\n  'aria-label': name.value,\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}))\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <component :is=\"standalone ? PassThrough : ToolbarButton\" as-child>\n      <PopoverTrigger as-child>\n        <button\n          type=\"button\"\n          class=\"ink-menu-trigger ink-color-menu\"\n          :data-ink-color-menu=\"property\"\n          :data-state=\"open ? 'open' : 'closed'\"\n          v-bind=\"triggerBindings\"\n        >\n          <slot>\n            <span\n              class=\"ink-swatch\"\n              data-ink-swatch\n              aria-hidden=\"true\"\n              :data-property=\"property\"\n              :data-kind=\"trigger.kind\"\n              :data-color=\"trigger.kind === 'color' ? trigger.color : undefined\"\n              :style=\"\n                trigger.kind === 'color' ? { '--ink-swatch': trigger.color } : undefined\n              \"\n            />\n          </slot>\n        </button>\n      </PopoverTrigger>\n    </component>\n    <PopoverPortal>\n      <PopoverContent\n        class=\"ink-select-content ink-menu-content\"\n        data-ink-select-content\n        :data-ink-menu=\"`color-${property}`\"\n        side=\"bottom\"\n        align=\"start\"\n        :side-offset=\"4\"\n        :collision-padding=\"8\"\n        v-bind=\"menuAttrs\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n      >\n        <div v-bind=\"innerAttrs\">\n          <button\n            v-if=\"model.noFill\"\n            type=\"button\"\n            role=\"menuitemradio\"\n            class=\"ink-select-item ink-menu-item\"\n            data-ink-select-item\n            tabindex=\"-1\"\n            :aria-checked=\"model.noFill.checked\"\n            :data-state=\"model.noFill.checked ? 'checked' : 'unchecked'\"\n            @click=\"set(model.noFill.patch)\"\n          >\n            No fill\n            <span v-if=\"model.noFill.checked\" class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </span>\n          </button>\n          <div\n            role=\"group\"\n            aria-label=\"Colours\"\n            class=\"ink-color-grid\"\n            :data-ink-menu-columns=\"COLOR_COLUMNS\"\n          >\n            <button\n              v-for=\"sw in model.swatches\"\n              :key=\"sw.key\"\n              type=\"button\"\n              role=\"menuitemradio\"\n              class=\"ink-swatch-item\"\n              tabindex=\"-1\"\n              :aria-label=\"sw.label\"\n              :aria-checked=\"sw.checked\"\n              :data-state=\"sw.checked ? 'checked' : 'unchecked'\"\n              :style=\"{ '--ink-swatch': sw.color }\"\n              @click=\"set(sw.patch)\"\n            />\n          </div>\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"ink-select-item ink-menu-item\"\n            data-ink-select-item\n            tabindex=\"-1\"\n            @click=\"customInput?.click()\"\n          >\n            Custom…\n          </button>\n        </div>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n  <input\n    ref=\"customInput\"\n    type=\"color\"\n    class=\"ink-color-input\"\n    aria-label=\"Custom colour\"\n    :data-ink-color-input=\"property\"\n    tabindex=\"-1\"\n    :value=\"model.customValue.toLowerCase()\"\n    @change=\"set(model.custom(($event.target as HTMLInputElement).value))\"\n  />\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,32 @@
+import { ColorProperty } from '@inkbar/core/dom';
+import { StyleGroup } from '@inkbar/core';
+type __VLS_Props = {
+    /** The colour this menu sets. */
+    property: ColorProperty;
+    /** Accessible name; defaults to "Border colour", "Fill colour" or "Text colour". */
+    label?: string;
+    /**
+     * Renders the trigger outside the toolbar's roving focus, for a menu nested in another
+     * panel (the text style menu's text colour).
+     */
+    standalone?: boolean;
+    /**
+     * Scopes the menu to one style group: it shows and sets that group's colour whatever tool
+     * is active, and recolours the selection only when it is all in the group.
+     */
+    group?: StyleGroup | undefined;
+};
+declare var __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => 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=InkColorMenu.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkColorMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkColorMenu.vue"],"names":[],"mappings":"AA2OA,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAA;AAezB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAe9C,KAAK,WAAW,GAAG;IACjB,iCAAiC;IACjC,QAAQ,EAAE,aAAa,CAAA;IACvB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;CAC/B,CAAC;AAqTF,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,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/InkColorMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,152 @@
+import { useToolStyle as e } from "../composables/useToolStyle.js";
+import t from "./InkIcon.js";
+import { Fragment as n, computed as r, createBlock as ee, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, mergeProps as d, normalizeProps as f, normalizeStyle as p, openBlock as m, ref as h, renderList as g, renderSlot as _, resolveDynamicComponent as v, unref as y, useAttrs as b, watch as x, withCtx as S } from "vue";
+import { COLOR_COLUMNS as C, colorMenuModel as w, focusInitialMenuItem as T, handleMenuKeys as E, menuItems as D } from "@inkbar/core/dom";
+import { PopoverContent as O, PopoverPortal as k, PopoverRoot as A, PopoverTrigger as j, ToolbarButton as M } from "reka-ui";
+import { Check as N } from "@inkbar/icons";
+//#region src/components/InkColorMenu.vue?vue&type=script&setup=true&lang.ts
+var P = ["data-ink-color-menu", "data-state"], F = [
+	"data-property",
+	"data-kind",
+	"data-color"
+], I = ["aria-checked", "data-state"], L = {
+	key: 0,
+	class: "ink-select-indicator"
+}, R = ["data-ink-menu-columns"], z = [
+	"aria-label",
+	"aria-checked",
+	"data-state",
+	"onClick"
+], B = ["data-ink-color-input", "value"], V = /*@__PURE__*/ l({
+	inheritAttrs: !1,
+	__name: "InkColorMenu",
+	props: {
+		property: {},
+		label: {},
+		standalone: { type: Boolean },
+		group: {}
+	},
+	setup(V) {
+		let H = b(), U = l({
+			inheritAttrs: !1,
+			setup: (e, { slots: t }) => () => t.default?.()
+		}), W = V, { current: G, supported: K, set: q } = e(() => W.group), J = h(!1), Y = h(null), X = r(() => w(W.property, G.value, K.value)), Z = r(() => W.label ?? X.value.label), Q = r(() => X.value.trigger);
+		x(() => X.value.enabled, (e) => {
+			e || (J.value = !1);
+		});
+		let $ = !1;
+		function te(e) {
+			e.key !== "ArrowDown" || e.defaultPrevented || J.value || !X.value.enabled || (e.preventDefault(), $ = !0, J.value = !0);
+		}
+		function ne(e) {
+			e.preventDefault();
+			let t = document.querySelector(`[data-ink-menu="color-${W.property}"] [role="menu"]`);
+			t && ($ ? D(t)[0]?.focus({ preventScroll: !0 }) : T(t)), $ = !1;
+		}
+		let re = r(() => ({
+			"aria-label": Z.value,
+			title: Z.value,
+			"aria-haspopup": "menu",
+			onKeydown: te,
+			"data-mixed": X.value.mixed ? "" : void 0
+		})), ie = r(() => d(H, re.value, { disabled: (H.disabled ?? !1) !== !1 || !X.value.enabled })), ae = r(() => ({ "aria-label": Z.value })), oe = r(() => ({
+			role: "menu",
+			"aria-label": Z.value,
+			onKeydown: (e) => E(e, e.currentTarget)
+		}));
+		return (e, r) => (m(), a(n, null, [c(y(A), {
+			open: J.value,
+			"onUpdate:open": r[2] ||= (e) => J.value = e
+		}, {
+			default: S(() => [(m(), ee(v(V.standalone ? y(U) : y(M)), { "as-child": "" }, {
+				default: S(() => [c(y(j), { "as-child": "" }, {
+					default: S(() => [o("button", d({
+						type: "button",
+						class: "ink-menu-trigger ink-color-menu",
+						"data-ink-color-menu": V.property,
+						"data-state": J.value ? "open" : "closed"
+					}, ie.value), [_(e.$slots, "default", {}, () => [o("span", {
+						class: "ink-swatch",
+						"data-ink-swatch": "",
+						"aria-hidden": "true",
+						"data-property": V.property,
+						"data-kind": Q.value.kind,
+						"data-color": Q.value.kind === "color" ? Q.value.color : void 0,
+						style: p(Q.value.kind === "color" ? { "--ink-swatch": Q.value.color } : void 0)
+					}, null, 12, F)])], 16, P)]),
+					_: 3
+				})]),
+				_: 3
+			})), c(y(k), null, {
+				default: S(() => [c(y(O), d({
+					class: "ink-select-content ink-menu-content",
+					"data-ink-select-content": "",
+					"data-ink-menu": `color-${V.property}`,
+					side: "bottom",
+					align: "start",
+					"side-offset": 4,
+					"collision-padding": 8
+				}, ae.value, { onOpenAutoFocus: ne }), {
+					default: S(() => [o("div", f(u(oe.value)), [
+						X.value.noFill ? (m(), a("button", {
+							key: 0,
+							type: "button",
+							role: "menuitemradio",
+							class: "ink-select-item ink-menu-item",
+							"data-ink-select-item": "",
+							tabindex: "-1",
+							"aria-checked": X.value.noFill.checked,
+							"data-state": X.value.noFill.checked ? "checked" : "unchecked",
+							onClick: r[0] ||= (e) => y(q)(X.value.noFill.patch)
+						}, [r[4] ||= s(" No fill ", -1), X.value.noFill.checked ? (m(), a("span", L, [c(t, {
+							icon: y(N),
+							size: 16
+						}, null, 8, ["icon"])])) : i("", !0)], 8, I)) : i("", !0),
+						o("div", {
+							role: "group",
+							"aria-label": "Colours",
+							class: "ink-color-grid",
+							"data-ink-menu-columns": y(C)
+						}, [(m(!0), a(n, null, g(X.value.swatches, (e) => (m(), a("button", {
+							key: e.key,
+							type: "button",
+							role: "menuitemradio",
+							class: "ink-swatch-item",
+							tabindex: "-1",
+							"aria-label": e.label,
+							"aria-checked": e.checked,
+							"data-state": e.checked ? "checked" : "unchecked",
+							style: p({ "--ink-swatch": e.color }),
+							onClick: (t) => y(q)(e.patch)
+						}, null, 12, z))), 128))], 8, R),
+						o("button", {
+							type: "button",
+							role: "menuitem",
+							class: "ink-select-item ink-menu-item",
+							"data-ink-select-item": "",
+							tabindex: "-1",
+							onClick: r[1] ||= (e) => Y.value?.click()
+						}, " Custom… ")
+					], 16)]),
+					_: 1
+				}, 16, ["data-ink-menu"])]),
+				_: 1
+			})]),
+			_: 3
+		}, 8, ["open"]), o("input", {
+			ref_key: "customInput",
+			ref: Y,
+			type: "color",
+			class: "ink-color-input",
+			"aria-label": "Custom colour",
+			"data-ink-color-input": V.property,
+			tabindex: "-1",
+			value: X.value.customValue.toLowerCase(),
+			onChange: r[3] ||= (e) => y(q)(X.value.custom(e.target.value))
+		}, null, 40, B)], 64));
+	}
+});
+//#endregion
+export { V as default };
+
+//# sourceMappingURL=InkColorMenu.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkColorMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createVNode","_unref","_withCtx","_createBlock","_resolveDynamicComponent","_createElementVNode","_mergeProps","_renderSlot","_normalizeStyle","_normalizeProps","_guardReactiveProps","_createTextVNode","InkIcon","_createCommentVNode","_renderList","InkIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","InkColorMenu_vue_vue_type_script_setup_true_lang_default","attrs","useAttrs","PassThrough","defineComponent","slots","props","__props","useToolStyle","open","ref","customInput","model","computed","colorMenuModel","current","supported","name","trigger","enabled","focusFirst","onTriggerKeydown","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","triggerAttrs","triggerBindings","mergeProps","menuAttrs","innerAttrs","handleMenuKeys","openBlock","createElementBlock","Fragment","createVNode","unref","PopoverRoot","_cache","$event","withCtx","createBlock","resolveDynamicComponent","ToolbarButton","PopoverTrigger","createElementVNode","renderSlot","_ctx","normalizeStyle","PopoverPortal","PopoverContent","normalizeProps","guardReactiveProps","set","createTextVNode","Check","createCommentVNode","COLOR_COLUMNS","renderList","sw"],"sources":["../../src/components/InkColorMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A colour menu for one colour property (border, fill or text) of the selection or the active\n * tool. The trigger shows the current colour as a swatch: split when the selection disagrees,\n * slashed for no fill. The panel is a palette grid, plus \"No fill\" for `fill` and \"Custom…\",\n * which opens a native colour input. The menu disables when nothing supports the property.\n */\nimport {\n  COLOR_COLUMNS,\n  colorMenuModel,\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  type ColorProperty,\n} from '@inkbar/core/dom'\nimport { Check } from '@inkbar/icons'\nimport {\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, defineComponent, mergeProps, ref, useAttrs, watch } from 'vue'\n\nimport { useToolStyle } from '../composables/useToolStyle'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { StyleGroup } from '@inkbar/core'\n\ndefineOptions({ inheritAttrs: false })\nconst attrs = useAttrs()\n\n/** Stands in for the toolbar item when the menu is nested in another panel. */\nconst PassThrough = defineComponent({\n  inheritAttrs: false,\n  setup:\n    (_, { slots }) =>\n    () =>\n      slots.default?.(),\n})\n\nconst props = defineProps<{\n  /** The colour this menu sets. */\n  property: ColorProperty\n  /** Accessible name; defaults to \"Border colour\", \"Fill colour\" or \"Text colour\". */\n  label?: string\n  /**\n   * Renders the trigger outside the toolbar's roving focus, for a menu nested in another\n   * panel (the text style menu's text colour).\n   */\n  standalone?: boolean\n  /**\n   * Scopes the menu to one style group: it shows and sets that group's colour whatever tool\n   * is active, and recolours the selection only when it is all in the group.\n   */\n  group?: StyleGroup | undefined\n}>()\n\nconst { current, supported, set } = useToolStyle(() => props.group)\nconst open = ref(false)\nconst customInput = ref<HTMLInputElement | null>(null)\n\nconst model = computed(() =>\n  colorMenuModel(props.property, current.value, supported.value)\n)\nconst name = computed(() => props.label ?? model.value.label)\nconst trigger = computed(() => model.value.trigger)\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\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value || !model.value.enabled)\n    return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  // One menu is open at a time.\n  const menu = document.querySelector(\n    `[data-ink-menu=\"color-${props.property}\"] [role=\"menu\"]`\n  )\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\n// Reka's typed props stop at its own; ARIA goes through bound objects.\nconst triggerAttrs = computed(() => ({\n  'aria-label': name.value,\n  title: name.value,\n  'aria-haspopup': 'menu' 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': name.value }))\nconst innerAttrs = computed(() => ({\n  role: 'menu',\n  'aria-label': name.value,\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}))\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <component :is=\"standalone ? PassThrough : ToolbarButton\" as-child>\n      <PopoverTrigger as-child>\n        <button\n          type=\"button\"\n          class=\"ink-menu-trigger ink-color-menu\"\n          :data-ink-color-menu=\"property\"\n          :data-state=\"open ? 'open' : 'closed'\"\n          v-bind=\"triggerBindings\"\n        >\n          <slot>\n            <span\n              class=\"ink-swatch\"\n              data-ink-swatch\n              aria-hidden=\"true\"\n              :data-property=\"property\"\n              :data-kind=\"trigger.kind\"\n              :data-color=\"trigger.kind === 'color' ? trigger.color : undefined\"\n              :style=\"\n                trigger.kind === 'color' ? { '--ink-swatch': trigger.color } : undefined\n              \"\n            />\n          </slot>\n        </button>\n      </PopoverTrigger>\n    </component>\n    <PopoverPortal>\n      <PopoverContent\n        class=\"ink-select-content ink-menu-content\"\n        data-ink-select-content\n        :data-ink-menu=\"`color-${property}`\"\n        side=\"bottom\"\n        align=\"start\"\n        :side-offset=\"4\"\n        :collision-padding=\"8\"\n        v-bind=\"menuAttrs\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n      >\n        <div v-bind=\"innerAttrs\">\n          <button\n            v-if=\"model.noFill\"\n            type=\"button\"\n            role=\"menuitemradio\"\n            class=\"ink-select-item ink-menu-item\"\n            data-ink-select-item\n            tabindex=\"-1\"\n            :aria-checked=\"model.noFill.checked\"\n            :data-state=\"model.noFill.checked ? 'checked' : 'unchecked'\"\n            @click=\"set(model.noFill.patch)\"\n          >\n            No fill\n            <span v-if=\"model.noFill.checked\" class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </span>\n          </button>\n          <div\n            role=\"group\"\n            aria-label=\"Colours\"\n            class=\"ink-color-grid\"\n            :data-ink-menu-columns=\"COLOR_COLUMNS\"\n          >\n            <button\n              v-for=\"sw in model.swatches\"\n              :key=\"sw.key\"\n              type=\"button\"\n              role=\"menuitemradio\"\n              class=\"ink-swatch-item\"\n              tabindex=\"-1\"\n              :aria-label=\"sw.label\"\n              :aria-checked=\"sw.checked\"\n              :data-state=\"sw.checked ? 'checked' : 'unchecked'\"\n              :style=\"{ '--ink-swatch': sw.color }\"\n              @click=\"set(sw.patch)\"\n            />\n          </div>\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"ink-select-item ink-menu-item\"\n            data-ink-select-item\n            tabindex=\"-1\"\n            @click=\"customInput?.click()\"\n          >\n            Custom…\n          </button>\n        </div>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n  <input\n    ref=\"customInput\"\n    type=\"color\"\n    class=\"ink-color-input\"\n    aria-label=\"Custom colour\"\n    :data-ink-color-input=\"property\"\n    tabindex=\"-1\"\n    :value=\"model.customValue.toLowerCase()\"\n    @change=\"set(model.custom(($event.target as HTMLInputElement).value))\"\n  />\n</template>\n"],"mappings":"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"}

package/dist/components/InkHighlightMenu.js

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

package/dist/components/InkHighlightMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkHighlightMenu.js","names":["_sfc_main","InkHighlightMenu_vue_vue_type_script_setup_true_lang_default","InkHighlightMenu_default"],"sources":["../../src/components/InkHighlightMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the highlight tool. The main part activates the tool with the current\n * markup kind and draws that kind's icon; the chevron opens a menu of the four kinds plus\n * the markup colour. Choosing a kind switches to the tool with it. The colour is a nested\n * `InkColorMenu` scoped to the `markup` style group, so it works whatever tool is active.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  highlightMenuModel,\n  MARKUP_ICONS,\n  MARKUP_KINDS,\n  menuItems,\n  type HighlightOptions,\n  type MarkupKind,\n} from '@inkbar/core/dom'\nimport { ChevronDown } from '@inkbar/icons'\nimport {\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\n\nimport InkColorMenu from './InkColorMenu.vue'\nimport InkIcon from './InkIcon.vue'\n\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<HighlightOptions>('highlight')\nconst open = ref(false)\n\nconst model = computed(() => highlightMenuModel(options.value, MARKUP_KINDS))\nconst active = computed(() => tool.value === 'highlight')\nconst icon = computed(() => MARKUP_ICONS[model.value.kind])\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value) return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  // One highlight menu is open at a time.\n  const menu = document.querySelector('[data-ink-menu=\"highlight\"] [role=\"menu\"]')\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction choose(kind: MarkupKind): void {\n  setOptions({ kind })\n  setTool('highlight')\n  open.value = false\n}\n\n// Reka's typed props stop at its own; ARIA and listeners go through bound objects.\nconst mainAttrs = computed(() => ({\n  'aria-pressed': String(active.value),\n  'aria-label': model.value.label,\n  title: model.value.label,\n  onClick: () => setTool('highlight'),\n}))\nconst triggerAttrs = {\n  'aria-label': 'Choose highlight',\n  title: 'Choose highlight',\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': 'Highlights' }\n/** The colour trigger is an item of this menu, reached with the arrow keys. */\nconst colourAttrs = { role: 'menuitem', tabindex: -1 }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': 'Highlights',\n  // Capture, so the arrow keys move on from the colour item before its own ArrowDown\n  // opens the nested menu.\n  onKeydownCapture: (e: KeyboardEvent) =>\n    handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-label=\"Highlight\"\n    class=\"ink-split-button ink-highlight-menu\"\n    data-ink-highlight-menu\n  >\n    <ToolbarButton\n      class=\"ink-tool-button ink-highlight-button\"\n      data-ink-tool-button\n      data-ink-highlight-button\n      data-tool=\"highlight\"\n      :data-kind=\"model.kind\"\n      :data-state=\"active ? 'on' : 'off'\"\n      v-bind=\"mainAttrs\"\n    >\n      <slot :active=\"active\" :kind=\"model.kind\"><InkIcon :icon=\"icon\" /></slot>\n    </ToolbarButton>\n    <PopoverRoot v-model:open=\"open\">\n      <ToolbarButton as-child>\n        <PopoverTrigger as-child>\n          <button\n            type=\"button\"\n            class=\"ink-menu-trigger ink-highlight-menu-trigger\"\n            data-ink-highlight-menu-trigger\n            :data-state=\"open ? 'open' : 'closed'\"\n            v-bind=\"triggerAttrs\"\n          >\n            <InkIcon :icon=\"ChevronDown\" />\n          </button>\n        </PopoverTrigger>\n      </ToolbarButton>\n      <PopoverPortal>\n        <PopoverContent\n          class=\"ink-select-content ink-menu-content\"\n          data-ink-select-content\n          data-ink-menu=\"highlight\"\n          side=\"bottom\"\n          align=\"start\"\n          :side-offset=\"4\"\n          :collision-padding=\"8\"\n          v-bind=\"menuAttrs\"\n          @open-auto-focus=\"onOpenAutoFocus\"\n        >\n          <div v-bind=\"innerAttrs\">\n            <div role=\"group\" aria-label=\"Kinds\" class=\"ink-highlight-kinds\">\n              <button\n                v-for=\"item in model.items\"\n                :key=\"item.kind\"\n                type=\"button\"\n                role=\"menuitemradio\"\n                class=\"ink-select-item ink-menu-item ink-highlight-item\"\n                data-ink-select-item\n                tabindex=\"-1\"\n                :data-key=\"item.kind\"\n                :aria-checked=\"item.checked\"\n                :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                @click=\"choose(item.kind)\"\n              >\n                <InkIcon :icon=\"MARKUP_ICONS[item.kind]\" :size=\"16\" />\n                {{ item.label }}\n              </button>\n            </div>\n            <div role=\"separator\" class=\"ink-select-separator\" />\n            <div role=\"group\" aria-label=\"Colour\" class=\"ink-highlight-colour\">\n              <span class=\"ink-highlight-colour-label\" aria-hidden=\"true\">Colour</span>\n              <InkColorMenu\n                property=\"border\"\n                group=\"markup\"\n                label=\"Highlight colour\"\n                standalone\n                v-bind=\"colourAttrs\"\n              />\n            </div>\n          </div>\n        </PopoverContent>\n      </PopoverPortal>\n    </PopoverRoot>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,17 @@
+declare var __VLS_7: {
+    active: boolean;
+    kind: "highlight" | "underline" | "strikeout" | "squiggly";
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => 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=InkHighlightMenu.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkHighlightMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkHighlightMenu.vue"],"names":[],"mappings":"AA4fA,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,+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/InkHighlightMenu.vue_vue_type_script_setup_true_lang.js

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

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

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

package/dist/components/InkLineStyleMenu.js

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

package/dist/components/InkLineStyleMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkLineStyleMenu.js","names":["_sfc_main","InkLineStyleMenu_vue_vue_type_script_setup_true_lang_default","InkLineStyleMenu_default"],"sources":["../../src/components/InkLineStyleMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * Line weight, solid or dashed, and arrowheads, for the selection or the active tool. Each\n * section disables when nothing selected (or no active tool) supports its props. The trigger\n * carries `data-mixed` when the selection disagrees on any of them; a section with no single\n * value shows no checkmark.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  lineStyleMenuModel,\n  menuItems,\n} from '@inkbar/core/dom'\nimport { Check, Minus } 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'\n\nimport InkIcon from './InkIcon.vue'\n\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\nconst model = computed(() => lineStyleMenuModel(current.value, supported.value))\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\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value || !model.value.enabled)\n    return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  // One menu is open at a time.\n  const menu = document.querySelector('[data-ink-menu=\"line-style\"] [role=\"menu\"]')\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\n// Reka's typed props stop at its own; ARIA goes through bound objects.\nconst triggerAttrs = computed(() => ({\n  'aria-label': 'Line style',\n  title: 'Line style',\n  'aria-haspopup': 'menu' 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 = { 'aria-label': 'Line style' }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': 'Line style',\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\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-line-style-menu\"\n          data-ink-line-style-menu\n          :data-state=\"open ? 'open' : 'closed'\"\n          v-bind=\"triggerBindings\"\n        >\n          <slot><InkIcon :icon=\"Minus\" /></slot>\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=\"line-style\"\n        side=\"bottom\"\n        align=\"start\"\n        :side-offset=\"4\"\n        :collision-padding=\"8\"\n        v-bind=\"menuAttrs\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n      >\n        <div v-bind=\"innerAttrs\">\n          <div\n            v-for=\"section in model.sections\"\n            :key=\"section.label\"\n            role=\"group\"\n            class=\"ink-menu-group\"\n            :aria-label=\"section.label\"\n            :aria-disabled=\"section.disabled || undefined\"\n            :data-disabled=\"section.disabled ? '' : undefined\"\n          >\n            <div class=\"ink-menu-label\" aria-hidden=\"true\">{{ section.label }}</div>\n            <button\n              v-for=\"item in section.items\"\n              :key=\"item.key\"\n              type=\"button\"\n              role=\"menuitemradio\"\n              class=\"ink-select-item ink-menu-item\"\n              data-ink-select-item\n              tabindex=\"-1\"\n              :aria-checked=\"item.checked\"\n              :disabled=\"section.disabled\"\n              :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n              @click=\"set(item.patch)\"\n            >\n              {{ item.label }}\n              <span v-if=\"item.checked\" class=\"ink-select-indicator\">\n                <InkIcon :icon=\"Check\" :size=\"16\" />\n              </span>\n            </button>\n          </div>\n        </div>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n"],"mappings":""}

package/dist/components/InkLineStyleMenu.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=InkLineStyleMenu.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkLineStyleMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkLineStyleMenu.vue"],"names":[],"mappings":"AAmbA,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"}