@inkbar/vue 0.1.1 → 0.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"InkZoomIn.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkZoomIn.vue"],"names":[],"mappings":"AA2BA,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AA6CzC,QAAA,IAAI,OAAO,IAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"InkZoomIn.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkZoomIn.vue"],"names":[],"mappings":"AAiCA,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAsDzC,QAAA,IAAI,OAAO,IAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkZoomIn.vue_vue_type_script_setup_true_lang.js

@@ -1,30 +1,32 @@
 import { useZoom as e } from "../composables/useZoom.js";
-import { createBlock as t, createTextVNode as n, defineComponent as r, mergeProps as i, openBlock as a, renderSlot as o, unref as s, withCtx as c } from "vue";
-import { ToolbarButton as l } from "reka-ui";
+import t from "./InkIcon.js";
+import { createBlock as n, createVNode as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, withCtx as l } from "vue";
+import { ToolbarButton as u } from "reka-ui";
+import { ZoomIn as d } from "@inkbar/icons";
 //#region src/components/InkZoomIn.vue?vue&type=script&setup=true&lang.ts
-var u = /*@__PURE__*/ r({
+var f = /*@__PURE__*/ i({
 	__name: "InkZoomIn",
 	props: { asChild: {
 		type: Boolean,
 		default: !1
 	} },
-	setup(r) {
-		let { zoomIn: u } = e(), d = {
+	setup(i) {
+		let { zoomIn: f } = e(), p = {
 			"aria-label": "Zoom in",
 			title: "Zoom in",
-			onClick: () => u()
+			onClick: () => f()
 		};
-		return (e, u) => (a(), t(s(l), i({
-			"as-child": r.asChild,
+		return (e, f) => (o(), n(c(u), a({
+			"as-child": i.asChild,
 			class: "ink-zoom-in",
 			"data-ink-zoom-in": ""
-		}, d), {
-			default: c(() => [o(e.$slots, "default", {}, () => [u[0] ||= n("+", -1)])]),
+		}, p), {
+			default: l(() => [s(e.$slots, "default", {}, () => [r(t, { icon: c(d) }, null, 8, ["icon"])])]),
 			_: 3
 		}, 16, ["as-child"]));
 	}
 });
 //#endregion
-export { u as default };
+export { f as default };
 
 //# sourceMappingURL=InkZoomIn.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InkZoomIn.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","_createTextVNode","InkZoomIn_vue_vue_type_script_setup_true_lang_default","useZoom","attrs","zoomIn","openBlock","createBlock","unref","ToolbarButton","mergeProps","__props","withCtx","renderSlot","_ctx","_cache","createTextVNode"],"sources":["../../src/components/InkZoomIn.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomIn } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom in',\n  title: 'Zoom in',\n  onClick: () => zoomIn(),\n}\n</script>\n\n<template>\n  <ToolbarButton :as-child=\"asChild\" class=\"ink-zoom-in\" data-ink-zoom-in v-bind=\"attrs\">\n    <slot>+</slot>\n  </ToolbarButton>\n</template>\n"],"mappings":";;;;;;;;;;;EAMA,IAAM,EAAE,cAAWQ,EAAQ,GAErBC,IAAQ;GACZ,cAAc;GACd,OAAO;GACP,eAAeC,EAAO;EACxB;oBAIEV,EAAA,GAAAC,EAEgBC,EAAAY,CAAA,GAFhBX,EAEgB;GAFA,YAAUa,EAAA;GAAS,OAAM;GAAc,oBAAA;EAAyB,GAAAP,CAAK,GAAA;GACnF,SAAAL,QAAc,CAAdC,EAAcc,EAAA,QAAA,WAAA,CAAA,SAAA,CAAR,AAAAC,EAAA,OAAAd,EAAA,KAAC,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"InkZoomIn.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","_createVNode","InkIcon","InkIcon_default","InkZoomIn_vue_vue_type_script_setup_true_lang_default","useZoom","attrs","zoomIn","openBlock","createBlock","unref","ToolbarButton","mergeProps","__props","withCtx","renderSlot","_ctx","createVNode","ZoomIn"],"sources":["../../src/components/InkZoomIn.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZoomIn } from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport InkIcon from './InkIcon.vue'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomIn } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom in',\n  title: 'Zoom in',\n  onClick: () => zoomIn(),\n}\n</script>\n\n<template>\n  <ToolbarButton :as-child=\"asChild\" class=\"ink-zoom-in\" data-ink-zoom-in v-bind=\"attrs\">\n    <slot><InkIcon :icon=\"ZoomIn\" /></slot>\n  </ToolbarButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;EASA,IAAM,EAAE,cAAWU,EAAQ,GAErBC,IAAQ;GACZ,cAAc;GACd,OAAO;GACP,eAAeC,EAAO;EACxB;oBAIEZ,EAAA,GAAAC,EAEgBC,EAAAc,CAAA,GAFhBb,EAEgB;GAFA,YAAUe,EAAA;GAAS,OAAM;GAAc,oBAAA;EAAyB,GAAAP,CAAK,GAAA;GACnF,SAAAP,QAAuC,CAAvCC,EAAuCgB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAjCf,EAA0BC,GAAA,EAAhB,MAAML,EAAAqB,CAAA,EAAM,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/InkZoomOut.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkZoomOut.js","names":["_sfc_main","InkZoomOut_vue_vue_type_script_setup_true_lang_default","InkZoomOut_default"],"sources":["../../src/components/InkZoomOut.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomOut } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom out',\n  title: 'Zoom out',\n  onClick: () => zoomOut(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-zoom-out\"\n    data-ink-zoom-out\n    v-bind=\"attrs\"\n  >\n    <slot>−</slot>\n  </ToolbarButton>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkZoomOut.js","names":["_sfc_main","InkZoomOut_vue_vue_type_script_setup_true_lang_default","InkZoomOut_default"],"sources":["../../src/components/InkZoomOut.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZoomOut } from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport InkIcon from './InkIcon.vue'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomOut } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom out',\n  title: 'Zoom out',\n  onClick: () => zoomOut(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-zoom-out\"\n    data-ink-zoom-out\n    v-bind=\"attrs\"\n  >\n    <slot><InkIcon :icon=\"ZoomOut\" /></slot>\n  </ToolbarButton>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"InkZoomOut.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkZoomOut.vue"],"names":[],"mappings":"AAgCA,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AA6CzC,QAAA,IAAI,OAAO,IAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"InkZoomOut.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkZoomOut.vue"],"names":[],"mappings":"AAsCA,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAsDzC,QAAA,IAAI,OAAO,IAAW,CAAC;AACvB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAG/C,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkZoomOut.vue_vue_type_script_setup_true_lang.js

@@ -1,30 +1,32 @@
 import { useZoom as e } from "../composables/useZoom.js";
-import { createBlock as t, createTextVNode as n, defineComponent as r, mergeProps as i, openBlock as a, renderSlot as o, unref as s, withCtx as c } from "vue";
-import { ToolbarButton as l } from "reka-ui";
+import t from "./InkIcon.js";
+import { createBlock as n, createVNode as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, withCtx as l } from "vue";
+import { ToolbarButton as u } from "reka-ui";
+import { ZoomOut as d } from "@inkbar/icons";
 //#region src/components/InkZoomOut.vue?vue&type=script&setup=true&lang.ts
-var u = /*@__PURE__*/ r({
+var f = /*@__PURE__*/ i({
 	__name: "InkZoomOut",
 	props: { asChild: {
 		type: Boolean,
 		default: !1
 	} },
-	setup(r) {
-		let { zoomOut: u } = e(), d = {
+	setup(i) {
+		let { zoomOut: f } = e(), p = {
 			"aria-label": "Zoom out",
 			title: "Zoom out",
-			onClick: () => u()
+			onClick: () => f()
 		};
-		return (e, u) => (a(), t(s(l), i({
-			"as-child": r.asChild,
+		return (e, f) => (o(), n(c(u), a({
+			"as-child": i.asChild,
 			class: "ink-zoom-out",
 			"data-ink-zoom-out": ""
-		}, d), {
-			default: c(() => [o(e.$slots, "default", {}, () => [u[0] ||= n("−", -1)])]),
+		}, p), {
+			default: l(() => [s(e.$slots, "default", {}, () => [r(t, { icon: c(d) }, null, 8, ["icon"])])]),
 			_: 3
 		}, 16, ["as-child"]));
 	}
 });
 //#endregion
-export { u as default };
+export { f as default };
 
 //# sourceMappingURL=InkZoomOut.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InkZoomOut.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","_createTextVNode","InkZoomOut_vue_vue_type_script_setup_true_lang_default","useZoom","attrs","zoomOut","openBlock","createBlock","unref","ToolbarButton","mergeProps","__props","withCtx","renderSlot","_ctx","_cache","createTextVNode"],"sources":["../../src/components/InkZoomOut.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomOut } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom out',\n  title: 'Zoom out',\n  onClick: () => zoomOut(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-zoom-out\"\n    data-ink-zoom-out\n    v-bind=\"attrs\"\n  >\n    <slot>−</slot>\n  </ToolbarButton>\n</template>\n"],"mappings":";;;;;;;;;;;EAMA,IAAM,EAAE,eAAYQ,EAAQ,GAEtBC,IAAQ;GACZ,cAAc;GACd,OAAO;GACP,eAAeC,EAAQ;EACzB;oBAIEV,EAAA,GAAAC,EAOgBC,EAAAY,CAAA,GAPhBX,EAOgB;GANb,YAAUa,EAAA;GACX,OAAM;GACN,qBAAA;EACQ,GAAAP,CAAK,GAAA;GAEb,SAAAL,QAAc,CAAdC,EAAcc,EAAA,QAAA,WAAA,CAAA,SAAA,CAAR,AAAAC,EAAA,OAAAd,EAAA,KAAC,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"InkZoomOut.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_mergeProps","_withCtx","_renderSlot","_createVNode","InkIcon","InkIcon_default","InkZoomOut_vue_vue_type_script_setup_true_lang_default","useZoom","attrs","zoomOut","openBlock","createBlock","unref","ToolbarButton","mergeProps","__props","withCtx","renderSlot","_ctx","createVNode","ZoomOut"],"sources":["../../src/components/InkZoomOut.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZoomOut } from '@inkbar/icons'\nimport { ToolbarButton } from 'reka-ui'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport InkIcon from './InkIcon.vue'\n\nwithDefaults(defineProps<{ asChild?: boolean }>(), { asChild: false })\nconst { zoomOut } = useZoom()\n// Reka's typed props stop at its own; ARIA and listeners go through a bound object.\nconst attrs = {\n  'aria-label': 'Zoom out',\n  title: 'Zoom out',\n  onClick: () => zoomOut(),\n}\n</script>\n\n<template>\n  <ToolbarButton\n    :as-child=\"asChild\"\n    class=\"ink-zoom-out\"\n    data-ink-zoom-out\n    v-bind=\"attrs\"\n  >\n    <slot><InkIcon :icon=\"ZoomOut\" /></slot>\n  </ToolbarButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;EASA,IAAM,EAAE,eAAYU,EAAQ,GAEtBC,IAAQ;GACZ,cAAc;GACd,OAAO;GACP,eAAeC,EAAQ;EACzB;oBAIEZ,EAAA,GAAAC,EAOgBC,EAAAc,CAAA,GAPhBb,EAOgB;GANb,YAAUe,EAAA;GACX,OAAM;GACN,qBAAA;EACQ,GAAAP,CAAK,GAAA;GAEb,SAAAP,QAAwC,CAAxCC,EAAwCgB,EAAA,QAAA,WAAA,CAAA,SAAA,CAAlCf,EAA2BC,GAAA,EAAjB,MAAML,EAAAqB,CAAA,EAAO,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/InkZoomSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkZoomSelect.js","names":["_sfc_main","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","InkZoomSelect_default"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(e: Event): void {\n  const v = (e.target as HTMLSelectElement).value\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n</script>\n\n<template>\n  <select\n    class=\"ink-zoom-select\"\n    data-ink-zoom-select\n    aria-label=\"Zoom\"\n    :value=\"value\"\n    @change=\"onChange\"\n  >\n    <option value=\"fit-width\">Fit width</option>\n    <option value=\"fit-page\">Fit page</option>\n    <option v-for=\"l in ZOOM_LEVELS\" :key=\"l\" :value=\"String(l)\">\n      {{ Math.round(l * 100) }}%\n    </option>\n    <option v-if=\"custom !== null\" :value=\"`${CUSTOM}${custom}`\">\n      {{ Math.round(scale * 100) }}%\n    </option>\n  </select>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkZoomSelect.js","names":["_sfc_main","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","InkZoomSelect_default"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { Check, ChevronDown } from '@inkbar/icons'\nimport {\n  SelectContent,\n  SelectIcon,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectPortal,\n  SelectRoot,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  SelectViewport,\n} from 'reka-ui'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(v: unknown): void {\n  if (typeof v !== 'string' || v === value.value) return\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n\nconst FITS = [\n  { value: 'fit-width', label: 'Fit width' },\n  { value: 'fit-page', label: 'Fit page' },\n]\n// Reka's typed props stop at its own; ARIA goes through a bound object.\nconst triggerAttrs = { 'aria-label': 'Zoom' }\nconst percent = (z: number) => `${Math.round(z * 100)}%`\n/** The levels, with a custom zoom in its place among them. */\nconst levels = computed(() => {\n  const list = ZOOM_LEVELS.map((l) => ({ z: l, value: String(l), label: percent(l) }))\n  const c = custom.value\n  if (c !== null) list.push({ z: c, value: `${CUSTOM}${c}`, label: percent(scale.value) })\n  return list.sort((a, b) => a.z - b.z)\n})\n</script>\n\n<template>\n  <SelectRoot :model-value=\"value\" @update:model-value=\"onChange\">\n    <SelectTrigger\n      class=\"ink-zoom-select ink-select-trigger\"\n      data-ink-zoom-select\n      v-bind=\"triggerAttrs\"\n    >\n      <SelectValue class=\"ink-select-value\" />\n      <SelectIcon class=\"ink-select-icon\">\n        <InkIcon :icon=\"ChevronDown\" :size=\"16\" />\n      </SelectIcon>\n    </SelectTrigger>\n    <SelectPortal>\n      <SelectContent\n        class=\"ink-select-content\"\n        data-ink-select-content\n        position=\"popper\"\n        side=\"top\"\n        :side-offset=\"4\"\n      >\n        <SelectViewport>\n          <SelectItem\n            v-for=\"o in FITS\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n          <SelectSeparator class=\"ink-select-separator\" />\n          <SelectItem\n            v-for=\"o in levels\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n  </SelectRoot>\n</template>\n"],"mappings":""}

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

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

package/dist/components/InkZoomSelect.vue_vue_type_script_setup_true_lang.js

@@ -1,39 +1,115 @@
 import { useZoom as e } from "../composables/useZoom.js";
-import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, openBlock as s, renderList as c, toDisplayString as l, unref as u } from "vue";
-import { ZOOM_LEVELS as d } from "@inkbar/core/dom";
+import t from "./InkIcon.js";
+import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, openBlock as u, renderList as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
+import { ZOOM_LEVELS as h } from "@inkbar/core/dom";
+import { SelectContent as g, SelectIcon as _, SelectItem as v, SelectItemIndicator as y, SelectItemText as b, SelectPortal as x, SelectRoot as S, SelectSeparator as C, SelectTrigger as w, SelectValue as T, SelectViewport as E } from "reka-ui";
+import { Check as D, ChevronDown as O } from "@inkbar/icons";
 //#region src/components/InkZoomSelect.vue?vue&type=script&setup=true&lang.ts
-var f = ["value"], p = ["value"], m = ["value"], h = "custom:", g = /*@__PURE__*/ o({
+var k = "custom:", A = /*@__PURE__*/ c({
 	__name: "InkZoomSelect",
-	setup(o) {
-		let { zoom: g, scale: _, setZoom: v } = e(), y = (e) => d.find((t) => Math.abs(t - e) < .001), b = n(() => typeof g.value == "number" && y(g.value) === void 0 ? g.value : null), x = n(() => {
-			let e = g.value;
-			return typeof e == "number" ? b.value === null ? String(y(e)) : `${h}${e}` : e;
+	setup(c) {
+		let { zoom: A, scale: j, setZoom: M } = e(), N = (e) => h.find((t) => Math.abs(t - e) < .001), P = r(() => typeof A.value == "number" && N(A.value) === void 0 ? A.value : null), F = r(() => {
+			let e = A.value;
+			return typeof e == "number" ? P.value === null ? String(N(e)) : `${k}${e}` : e;
 		});
-		function S(e) {
-			let t = e.target.value, n = t === "fit-width" || t === "fit-page" ? t : Number(t.replace(h, ""));
-			v(n);
+		function I(e) {
+			if (typeof e != "string" || e === F.value) return;
+			let t = e === "fit-width" || e === "fit-page" ? e : Number(e.replace(k, ""));
+			M(t);
 		}
-		return (e, n) => (s(), i("select", {
-			class: "ink-zoom-select",
-			"data-ink-zoom-select": "",
-			"aria-label": "Zoom",
-			value: x.value,
-			onChange: S
-		}, [
-			n[0] ||= a("option", { value: "fit-width" }, "Fit width", -1),
-			n[1] ||= a("option", { value: "fit-page" }, "Fit page", -1),
-			(s(!0), i(t, null, c(u(d), (e) => (s(), i("option", {
-				key: e,
-				value: String(e)
-			}, l(Math.round(e * 100)) + "% ", 9, p))), 128)),
-			b.value === null ? r("", !0) : (s(), i("option", {
-				key: 0,
-				value: `${h}${b.value}`
-			}, l(Math.round(u(_) * 100)) + "% ", 9, m))
-		], 40, f));
+		let L = [{
+			value: "fit-width",
+			label: "Fit width"
+		}, {
+			value: "fit-page",
+			label: "Fit page"
+		}], R = { "aria-label": "Zoom" }, z = (e) => `${Math.round(e * 100)}%`, B = r(() => {
+			let e = h.map((e) => ({
+				z: e,
+				value: String(e),
+				label: z(e)
+			})), t = P.value;
+			return t !== null && e.push({
+				z: t,
+				value: `${k}${t}`,
+				label: z(j.value)
+			}), e.sort((e, t) => e.z - t.z);
+		});
+		return (e, r) => (u(), i(p(S), {
+			"model-value": F.value,
+			"onUpdate:modelValue": I
+		}, {
+			default: m(() => [s(p(w), l({
+				class: "ink-zoom-select ink-select-trigger",
+				"data-ink-zoom-select": ""
+			}, R), {
+				default: m(() => [s(p(T), { class: "ink-select-value" }), s(p(_), { class: "ink-select-icon" }, {
+					default: m(() => [s(t, {
+						icon: p(O),
+						size: 16
+					}, null, 8, ["icon"])]),
+					_: 1
+				})]),
+				_: 1
+			}, 16), s(p(x), null, {
+				default: m(() => [s(p(g), {
+					class: "ink-select-content",
+					"data-ink-select-content": "",
+					position: "popper",
+					side: "top",
+					"side-offset": 4
+				}, {
+					default: m(() => [s(p(E), null, {
+						default: m(() => [
+							(u(), a(n, null, d(L, (e) => s(p(v), {
+								key: e.value,
+								value: e.value,
+								class: "ink-select-item",
+								"data-ink-select-item": ""
+							}, {
+								default: m(() => [s(p(b), null, {
+									default: m(() => [o(f(e.label), 1)]),
+									_: 2
+								}, 1024), s(p(y), { class: "ink-select-indicator" }, {
+									default: m(() => [s(t, {
+										icon: p(D),
+										size: 16
+									}, null, 8, ["icon"])]),
+									_: 1
+								})]),
+								_: 2
+							}, 1032, ["value"])), 64)),
+							s(p(C), { class: "ink-select-separator" }),
+							(u(!0), a(n, null, d(B.value, (e) => (u(), i(p(v), {
+								key: e.value,
+								value: e.value,
+								class: "ink-select-item",
+								"data-ink-select-item": ""
+							}, {
+								default: m(() => [s(p(b), null, {
+									default: m(() => [o(f(e.label), 1)]),
+									_: 2
+								}, 1024), s(p(y), { class: "ink-select-indicator" }, {
+									default: m(() => [s(t, {
+										icon: p(D),
+										size: 16
+									}, null, 8, ["icon"])]),
+									_: 1
+								})]),
+								_: 2
+							}, 1032, ["value"]))), 128))
+						]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["model-value"]));
 	}
 });
 //#endregion
-export { g as default };
+export { A as default };
 
 //# sourceMappingURL=InkZoomSelect.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InkZoomSelect.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_unref","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","_hoisted_3","CUSTOM","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","useZoom","level","ZOOM_LEVELS","l","z","custom","computed","zoom","value","onChange","v","next","openBlock","createElementBlock","_cache","createElementVNode","Fragment","renderList","unref","toDisplayString","createCommentVNode","scale"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(e: Event): void {\n  const v = (e.target as HTMLSelectElement).value\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n</script>\n\n<template>\n  <select\n    class=\"ink-zoom-select\"\n    data-ink-zoom-select\n    aria-label=\"Zoom\"\n    :value=\"value\"\n    @change=\"onChange\"\n  >\n    <option value=\"fit-width\">Fit width</option>\n    <option value=\"fit-page\">Fit page</option>\n    <option v-for=\"l in ZOOM_LEVELS\" :key=\"l\" :value=\"String(l)\">\n      {{ Math.round(l * 100) }}%\n    </option>\n    <option v-if=\"custom !== null\" :value=\"`${CUSTOM}${custom}`\">\n      {{ Math.round(scale * 100) }}%\n    </option>\n  </select>\n</template>\n"],"mappings":";;;;iDAQMW,IAAS;;;EAEf,IAAM,EAAE,SAAM,UAAO,eAAYE,EAAQ,GAEnCC,KAAS,MAAcC,EAAY,MAAM,MAAM,KAAK,IAAIC,IAAIC,CAAC,IAAI,IAAK,GAEtEC,IAASC,QACb,OAAOC,EAAK,SAAU,YAAYN,EAAMM,EAAK,KAAK,MAAM,KAAA,IAAYA,EAAK,QAAQ,IACnF,GACMC,IAAQF,QAAe;GAC3B,IAAMF,IAAIG,EAAK;GAEf,OADI,OAAOH,KAAM,WACVC,EAAO,UAAU,OAAO,OAAOJ,EAAMG,CAAC,CAAC,IAAI,GAAGN,IAASM,MAD5BA;EAEpC,CAAC;EAED,SAASK,EAAS,GAAgB;GAChC,IAAMC,IAAK,EAAE,OAA6B,OACpCC,IACJD,MAAM,eAAeA,MAAM,aAAaA,IAAI,OAAOA,EAAE,QAAQZ,GAAQ,EAAE,CAAC;GAC1E,EAAQa,CAAI;EACd;oBAIExB,EAAA,GAAAC,EAeS,UAAA;GAdP,OAAM;GACN,wBAAA;GACA,cAAW;GACV,OAAOoB,EAAA;GACC;;GAET,AAAAM,EAAA,OAAAzB,EAA4C,UAAA,EAApC,OAAM,YAAW,GAAC,aAAS,EAAA;GACnC,AAAAyB,EAAA,OAAAzB,EAA0C,UAAA,EAAlC,OAAM,WAAU,GAAC,YAAQ,EAAA;IACjCF,EAAA,EAAA,GAAAC,EAESE,GAAA,MAAAC,EAFWC,EAAAU,CAAA,IAAL,OAAff,EAAA,GAAAC,EAES,UAAA;IAFyB,KAAKe;IAAI,OAAO,OAAOA,CAAC;GACrD,GAAAV,EAAA,KAAK,MAAMU,IAAC,GAAA,CAAA,IAAU,MAC3B,GAAAP,CAAA;GACcS,EAAA,UAAM,OAEpBe,EAAA,IAAA,EAAA,KAFAjC,EAAA,GAAAC,EAES,UAAA;;IAFuB,OAAK,GAAKU,IAASO,EAAA;GAC9C,GAAAZ,EAAA,KAAK,MAAMD,EAAA6B,CAAA,IAAK,GAAA,CAAA,IAAU,MAC/B,GAAAxB,CAAA"}
+{"version":3,"file":"InkZoomSelect.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_withCtx","_createVNode","_mergeProps","InkIcon","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","InkIcon_default","CUSTOM","InkZoomSelect_vue_vue_type_script_setup_true_lang_default","useZoom","level","ZOOM_LEVELS","l","z","custom","computed","zoom","value","onChange","v","next","FITS","triggerAttrs","percent","levels","list","c","scale","a","b","openBlock","createBlock","unref","SelectRoot","withCtx","createVNode","SelectTrigger","mergeProps","SelectValue","SelectIcon","ChevronDown","SelectPortal","SelectContent","SelectViewport","createElementBlock","Fragment","renderList","SelectItem","o","SelectItemText","createTextVNode","toDisplayString","SelectItemIndicator","Check","SelectSeparator"],"sources":["../../src/components/InkZoomSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ZOOM_LEVELS } from '@inkbar/core/dom'\nimport { Check, ChevronDown } from '@inkbar/icons'\nimport {\n  SelectContent,\n  SelectIcon,\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectPortal,\n  SelectRoot,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  SelectViewport,\n} from 'reka-ui'\nimport { computed } from 'vue'\n\nimport { useZoom } from '../composables/useZoom'\n\nimport InkIcon from './InkIcon.vue'\n\nimport type { ZoomValue } from '@inkbar/core/dom'\n\nconst CUSTOM = 'custom:'\n\nconst { zoom, scale, setZoom } = useZoom()\n\nconst level = (z: number) => ZOOM_LEVELS.find((l) => Math.abs(l - z) < 0.001)\n/** A numeric zoom that is not one of the levels (zoom in and out multiply). */\nconst custom = computed(() =>\n  typeof zoom.value === 'number' && level(zoom.value) === undefined ? zoom.value : null\n)\nconst value = computed(() => {\n  const z = zoom.value\n  if (typeof z !== 'number') return z\n  return custom.value === null ? String(level(z)) : `${CUSTOM}${z}`\n})\n\nfunction onChange(v: unknown): void {\n  if (typeof v !== 'string' || v === value.value) return\n  const next: ZoomValue =\n    v === 'fit-width' || v === 'fit-page' ? v : Number(v.replace(CUSTOM, ''))\n  setZoom(next)\n}\n\nconst FITS = [\n  { value: 'fit-width', label: 'Fit width' },\n  { value: 'fit-page', label: 'Fit page' },\n]\n// Reka's typed props stop at its own; ARIA goes through a bound object.\nconst triggerAttrs = { 'aria-label': 'Zoom' }\nconst percent = (z: number) => `${Math.round(z * 100)}%`\n/** The levels, with a custom zoom in its place among them. */\nconst levels = computed(() => {\n  const list = ZOOM_LEVELS.map((l) => ({ z: l, value: String(l), label: percent(l) }))\n  const c = custom.value\n  if (c !== null) list.push({ z: c, value: `${CUSTOM}${c}`, label: percent(scale.value) })\n  return list.sort((a, b) => a.z - b.z)\n})\n</script>\n\n<template>\n  <SelectRoot :model-value=\"value\" @update:model-value=\"onChange\">\n    <SelectTrigger\n      class=\"ink-zoom-select ink-select-trigger\"\n      data-ink-zoom-select\n      v-bind=\"triggerAttrs\"\n    >\n      <SelectValue class=\"ink-select-value\" />\n      <SelectIcon class=\"ink-select-icon\">\n        <InkIcon :icon=\"ChevronDown\" :size=\"16\" />\n      </SelectIcon>\n    </SelectTrigger>\n    <SelectPortal>\n      <SelectContent\n        class=\"ink-select-content\"\n        data-ink-select-content\n        position=\"popper\"\n        side=\"top\"\n        :side-offset=\"4\"\n      >\n        <SelectViewport>\n          <SelectItem\n            v-for=\"o in FITS\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n          <SelectSeparator class=\"ink-select-separator\" />\n          <SelectItem\n            v-for=\"o in levels\"\n            :key=\"o.value\"\n            :value=\"o.value\"\n            class=\"ink-select-item\"\n            data-ink-select-item\n          >\n            <SelectItemText>{{ o.label }}</SelectItemText>\n            <SelectItemIndicator class=\"ink-select-indicator\">\n              <InkIcon :icon=\"Check\" :size=\"16\" />\n            </SelectItemIndicator>\n          </SelectItem>\n        </SelectViewport>\n      </SelectContent>\n    </SelectPortal>\n  </SelectRoot>\n</template>\n"],"mappings":";;;;;;;AAwBA,IAAMa,IAAS;;;EAEf,IAAM,EAAE,SAAM,UAAO,eAAYE,EAAQ,GAEnCC,KAAS,MAAcC,EAAY,MAAM,MAAM,KAAK,IAAIC,IAAIC,CAAC,IAAI,IAAK,GAEtEC,IAASC,QACb,OAAOC,EAAK,SAAU,YAAYN,EAAMM,EAAK,KAAK,MAAM,KAAA,IAAYA,EAAK,QAAQ,IACnF,GACMC,IAAQF,QAAe;GAC3B,IAAMF,IAAIG,EAAK;GAEf,OADI,OAAOH,KAAM,WACVC,EAAO,UAAU,OAAO,OAAOJ,EAAMG,CAAC,CAAC,IAAI,GAAGN,IAASM,MAD5BA;EAEpC,CAAC;EAED,SAASK,EAAS,GAAkB;GAClC,IAAI,OAAOC,KAAM,YAAYA,MAAMF,EAAM,OAAO;GAChD,IAAMG,IACJD,MAAM,eAAeA,MAAM,aAAaA,IAAI,OAAOA,EAAE,QAAQZ,GAAQ,EAAE,CAAC;GAC1E,EAAQa,CAAI;EACd;EAEA,IAAMC,IAAO,CACX;GAAE,OAAO;GAAa,OAAO;EAAY,GACzC;GAAE,OAAO;GAAY,OAAO;EAAW,CACzC,GAEMC,IAAe,EAAE,cAAc,OAAO,GACtCC,KAAW,MAAc,GAAG,KAAK,MAAMV,IAAI,GAAG,EAAE,IAEhDW,IAAST,QAAe;GAC5B,IAAMU,IAAOd,EAAY,KAAK,OAAO;IAAE,GAAGC;IAAG,OAAO,OAAOA,CAAC;IAAG,OAAOW,EAAQX,CAAC;GAAE,EAAE,GAC7Ec,IAAIZ,EAAO;GAEjB,OADIY,MAAM,QAAMD,EAAK,KAAK;IAAE,GAAGC;IAAG,OAAO,GAAGnB,IAASmB;IAAK,OAAOH,EAAQI,EAAM,KAAK;GAAE,CAAC,GAChFF,EAAK,MAAM,GAAG,MAAMG,EAAE,IAAIC,EAAE,CAAC;EACtC,CAAC;oBAICnC,EAAA,GAAAC,EAgDaC,EAAAqC,CAAA,GAAA;GAhDA,eAAahB,EAAA;GAAQ,uBAAoBC;;GACpD,SAAArB,QASgB,CAThBC,EASgBF,EAAAwC,CAAA,GAThBrC,EASgB;IARd,OAAM;IACN,wBAAA;GACQ,GAAAuB,CAAY,GAAA;IAEpB,SAAAzB,QAAwC,CAAxCC,EAAwCF,EAAA0C,CAAA,GAAA,EAA3B,OAAM,mBAAkB,CAAA,GACrCxC,EAEaF,EAAA2C,CAAA,GAAA,EAFD,OAAM,kBAAiB,GAAA;KACjC,SAAA1C,QAA0C,CAA1CC,EAA0CE,GAAA;MAAhC,MAAMJ,EAAA4C,CAAA;MAAc,MAAM;;;;;GAGxC1C,GAAAA,EAAAA,GAAAA,EAoCeF,EAAA6C,CAAA,GAAA,MAAA;IAnCb,SAAA5C,QAkCgB,CAlChBC,EAkCgBF,EAAA8C,CAAA,GAAA;KAjCd,OAAM;KACN,2BAAA;KACA,UAAS;KACT,MAAK;KACJ,eAAa;;KAEd,SAAA7C,QA0BiB,CA1BjBC,EA0BiBF,EAAA+C,CAAA,GAAA,MAAA;MAxBb,SAAA9C,QAAiB;QADnBH,EAAA,GAAAO,EAWaC,GAAA,MAAAC,EAVCkB,IAAL,MADTvB,EAWaF,EAAAmD,CAAA,GAAA;QATV,KAAKC,EAAE;QACP,OAAOA,EAAE;QACV,OAAM;QACN,wBAAA;;QAEA,SAAAnD,QAA8C,CAA9CC,EAA8CF,EAAAqD,CAAA,GAAA,MAAA;SAA9B,SAAApD,QAAa,CAAVO,EAAAC,EAAA2C,EAAE,KAAK,GAAA,CAAA,CAAA,CAAA;;QAC1BlD,GAAAA,IAAAA,GAAAA,EAEsBF,EAAAwD,CAAA,GAAA,EAFD,OAAM,uBAAsB,GAAA;SAC/C,SAAAvD,QAAoC,CAApCC,EAAoCE,GAAA;UAA1B,MAAMJ,EAAAyD,CAAA;UAAQ,MAAM;;;;;;OAGlCvD,EAAgDF,EAAA0D,CAAA,GAAA,EAA/B,OAAM,uBAAsB,CAAA;QAC7C5D,EAAA,EAAA,GAAAO,EAWaC,GAAA,MAAAC,EAVCqB,EAAA,QAAL,OADT9B,EAAA,GAAAC,EAWaC,EAAAmD,CAAA,GAAA;QATV,KAAKC,EAAE;QACP,OAAOA,EAAE;QACV,OAAM;QACN,wBAAA;;QAEA,SAAAnD,QAA8C,CAA9CC,EAA8CF,EAAAqD,CAAA,GAAA,MAAA;SAA9B,SAAApD,QAAa,CAAVO,EAAAC,EAAA2C,EAAE,KAAK,GAAA,CAAA,CAAA,CAAA;;QAC1BlD,GAAAA,IAAAA,GAAAA,EAEsBF,EAAAwD,CAAA,GAAA,EAFD,OAAM,uBAAsB,GAAA;SAC/C,SAAAvD,QAAoC,CAApCC,EAAoCE,GAAA;UAA1B,MAAMJ,EAAAyD,CAAA;UAAQ,MAAM"}

package/dist/index.d.ts

@@ -15,15 +15,20 @@ export { default as InkPage } from './components/InkPage.vue';
 export { default as InkAnnotation } from './components/InkAnnotation.vue';
 export type { AnnotationSlotProps, AnnotationState } from './components/annotation-slot';
 export { default as InkToolbar } from './components/InkToolbar.vue';
+export { default as InkIcon } from './components/InkIcon.vue';
 export { default as InkToolButton } from './components/InkToolButton.vue';
+export { default as InkToolbarSeparator } from './components/InkToolbarSeparator.vue';
+export { default as InkUndo } from './components/InkUndo.vue';
+export { default as InkRedo } from './components/InkRedo.vue';
 export { default as InkZoomIn } from './components/InkZoomIn.vue';
 export { default as InkZoomOut } from './components/InkZoomOut.vue';
 export { default as InkZoomSelect } from './components/InkZoomSelect.vue';
 export { default as InkPageInput } from './components/InkPageInput.vue';
 export { default as InkPageCount } from './components/InkPageCount.vue';
+export { default as InkPrevPage } from './components/InkPrevPage.vue';
+export { default as InkNextPage } from './components/InkNextPage.vue';
 export { default as InkNotePopover } from './components/InkNotePopover.vue';
 export type { NotePopoverSlotProps } from './components/InkNotePopover.vue';
 export { default as InkSuggestionCard } from './components/InkSuggestionCard.vue';
 export type { ConfidenceBucket, SuggestionCardSlotProps, } from './components/InkSuggestionCard.vue';
-export { default as DefaultToolbar } from './compositions/DefaultToolbar.vue';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AACxF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,oCAAoC,CAAA;AACjF,YAAY,EACV,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,oCAAoC,CAAA;AAC3C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AACxF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AACrF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,oCAAoC,CAAA;AACjF,YAAY,EACV,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,oCAAoC,CAAA"}

package/dist/index.js

@@ -13,13 +13,18 @@ import d from "./components/InkAnnotation.js";
 import f from "./components/InkPage.js";
 import p from "./components/InkViewport.js";
 import m from "./components/InkToolbar.js";
-import h from "./components/InkToolButton.js";
-import g from "./components/InkZoomIn.js";
-import _ from "./components/InkZoomOut.js";
-import v from "./components/InkZoomSelect.js";
-import y from "./components/InkPageInput.js";
-import b from "./components/InkPageCount.js";
-import x from "./components/InkNotePopover.js";
-import S from "./components/InkSuggestionCard.js";
-import C from "./compositions/DefaultToolbar.js";
-export { C as DefaultToolbar, d as InkAnnotation, x as InkNotePopover, f as InkPage, b as InkPageCount, y as InkPageInput, n as InkRoot, S as InkSuggestionCard, h as InkToolButton, m as InkToolbar, p as InkViewport, g as InkZoomIn, _ as InkZoomOut, v as InkZoomSelect, e as injectInkContext, i as useAnnotations, r as useDocument, u as useEmbedded, l as useHistory, c as usePage, t as useReadable, o as useSelection, a as useTool, s as useZoom };
+import h from "./components/InkIcon.js";
+import g from "./components/InkToolButton.js";
+import _ from "./components/InkToolbarSeparator.js";
+import v from "./components/InkUndo.js";
+import y from "./components/InkRedo.js";
+import b from "./components/InkZoomIn.js";
+import x from "./components/InkZoomOut.js";
+import S from "./components/InkZoomSelect.js";
+import C from "./components/InkPageInput.js";
+import w from "./components/InkPageCount.js";
+import T from "./components/InkPrevPage.js";
+import E from "./components/InkNextPage.js";
+import D from "./components/InkNotePopover.js";
+import O from "./components/InkSuggestionCard.js";
+export { d as InkAnnotation, h as InkIcon, E as InkNextPage, D as InkNotePopover, f as InkPage, w as InkPageCount, C as InkPageInput, T as InkPrevPage, y as InkRedo, n as InkRoot, O as InkSuggestionCard, g as InkToolButton, m as InkToolbar, _ as InkToolbarSeparator, v as InkUndo, p as InkViewport, b as InkZoomIn, x as InkZoomOut, S as InkZoomSelect, e as injectInkContext, i as useAnnotations, r as useDocument, u as useEmbedded, l as useHistory, c as usePage, t as useReadable, o as useSelection, a as useTool, s as useZoom };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkbar/vue",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Vue 3 components and composables for Inkbar, the browser PDF viewer and editor.",
   "license": "MIT",
   "homepage": "https://inkbar.dev",
@@ -24,17 +24,17 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@lucide/vue": "^1.55.0",
+    "@inkbar/icons": "^0.2.0",
     "reka-ui": "^2.11.0"
   },
   "peerDependencies": {
-    "@inkbar/core": "^0.1.1",
+    "@inkbar/core": "^0.2.0",
     "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@inkbar/core": "0.1.1",
+    "@inkbar/core": "0.2.0",
     "@inkbar/fixtures": "0.0.0",
-    "@inkbar/theme": "0.1.1",
+    "@inkbar/theme": "0.2.0",
     "@playwright/experimental-ct-vue": "1.62.1",
     "@playwright/test": "1.62.1",
     "@vitejs/plugin-vue": "^6.0.10",

package/dist/compositions/DefaultToolbar.js

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

package/dist/compositions/DefaultToolbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultToolbar.js","names":["_sfc_main","DefaultToolbar_vue_vue_type_script_setup_true_lang_default","DefaultToolbar_default"],"sources":["../../src/compositions/DefaultToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The standard toolbar: tools, zoom and page controls with icons. It adds no styles of its\n * own; the theme styles the `data-ink-*` hooks. Extra controls go in the default slot.\n */\nimport {\n  Hand,\n  Highlighter,\n  MessageSquare,\n  MousePointer2,\n  Square,\n  ZoomIn,\n  ZoomOut,\n} from '@lucide/vue'\n\nimport InkPageCount from '../components/InkPageCount.vue'\nimport InkPageInput from '../components/InkPageInput.vue'\nimport InkToolbar from '../components/InkToolbar.vue'\nimport InkToolButton from '../components/InkToolButton.vue'\nimport InkZoomIn from '../components/InkZoomIn.vue'\nimport InkZoomOut from '../components/InkZoomOut.vue'\nimport InkZoomSelect from '../components/InkZoomSelect.vue'\n\nwithDefaults(defineProps<{ label?: string }>(), { label: 'Document tools' })\n\nconst ICON = 18\n</script>\n\n<template>\n  <InkToolbar :label=\"label\" class=\"ink-default-toolbar\" data-ink-default-toolbar>\n    <div\n      class=\"ink-toolbar-group\"\n      data-ink-toolbar-group=\"tools\"\n      role=\"group\"\n      aria-label=\"Tools\"\n    >\n      <InkToolButton tool=\"view\"><Hand :size=\"ICON\" aria-hidden=\"true\" /></InkToolButton>\n      <InkToolButton tool=\"select\">\n        <MousePointer2 :size=\"ICON\" aria-hidden=\"true\" />\n      </InkToolButton>\n      <InkToolButton tool=\"highlight\">\n        <Highlighter :size=\"ICON\" aria-hidden=\"true\" />\n      </InkToolButton>\n      <InkToolButton tool=\"redact-area\">\n        <Square :size=\"ICON\" aria-hidden=\"true\" />\n      </InkToolButton>\n      <InkToolButton tool=\"note\">\n        <MessageSquare :size=\"ICON\" aria-hidden=\"true\" />\n      </InkToolButton>\n    </div>\n    <div\n      class=\"ink-toolbar-group\"\n      data-ink-toolbar-group=\"zoom\"\n      role=\"group\"\n      aria-label=\"Zoom\"\n    >\n      <InkZoomOut><ZoomOut :size=\"ICON\" aria-hidden=\"true\" /></InkZoomOut>\n      <InkZoomSelect />\n      <InkZoomIn><ZoomIn :size=\"ICON\" aria-hidden=\"true\" /></InkZoomIn>\n    </div>\n    <div\n      class=\"ink-toolbar-group\"\n      data-ink-toolbar-group=\"page\"\n      role=\"group\"\n      aria-label=\"Page\"\n    >\n      <InkPageInput />\n      <InkPageCount />\n    </div>\n    <slot />\n  </InkToolbar>\n</template>\n"],"mappings":""}

package/dist/compositions/DefaultToolbar.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultToolbar.vue.d.ts","sourceRoot":"","sources":["../../src/compositions/DefaultToolbar.vue"],"names":[],"mappings":"AAiGA,KAAK,WAAW,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAwPtC,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;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/compositions/DefaultToolbar.vue_vue_type_script_setup_true_lang.js

@@ -1,100 +0,0 @@
-import e from "../components/InkToolbar.js";
-import t from "../components/InkToolButton.js";
-import n from "../components/InkZoomIn.js";
-import r from "../components/InkZoomOut.js";
-import i from "../components/InkZoomSelect.js";
-import a from "../components/InkPageInput.js";
-import o from "../components/InkPageCount.js";
-import { createBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, openBlock as d, renderSlot as f, unref as p, withCtx as m } from "vue";
-import { Hand as h, Highlighter as g, MessageSquare as _, MousePointer2 as v, Square as y, ZoomIn as b, ZoomOut as x } from "@lucide/vue";
-//#region src/compositions/DefaultToolbar.vue?vue&type=script&setup=true&lang.ts
-var S = {
-	class: "ink-toolbar-group",
-	"data-ink-toolbar-group": "tools",
-	role: "group",
-	"aria-label": "Tools"
-}, C = {
-	class: "ink-toolbar-group",
-	"data-ink-toolbar-group": "zoom",
-	role: "group",
-	"aria-label": "Zoom"
-}, w = {
-	class: "ink-toolbar-group",
-	"data-ink-toolbar-group": "page",
-	role: "group",
-	"aria-label": "Page"
-}, T = 18, E = /*@__PURE__*/ u({
-	__name: "DefaultToolbar",
-	props: { label: { default: "Document tools" } },
-	setup(u) {
-		return (E, D) => (d(), s(e, {
-			label: u.label,
-			class: "ink-default-toolbar",
-			"data-ink-default-toolbar": ""
-		}, {
-			default: m(() => [
-				c("div", S, [
-					l(t, { tool: "view" }, {
-						default: m(() => [l(p(h), {
-							size: T,
-							"aria-hidden": "true"
-						})]),
-						_: 1
-					}),
-					l(t, { tool: "select" }, {
-						default: m(() => [l(p(v), {
-							size: T,
-							"aria-hidden": "true"
-						})]),
-						_: 1
-					}),
-					l(t, { tool: "highlight" }, {
-						default: m(() => [l(p(g), {
-							size: T,
-							"aria-hidden": "true"
-						})]),
-						_: 1
-					}),
-					l(t, { tool: "redact-area" }, {
-						default: m(() => [l(p(y), {
-							size: T,
-							"aria-hidden": "true"
-						})]),
-						_: 1
-					}),
-					l(t, { tool: "note" }, {
-						default: m(() => [l(p(_), {
-							size: T,
-							"aria-hidden": "true"
-						})]),
-						_: 1
-					})
-				]),
-				c("div", C, [
-					l(r, null, {
-						default: m(() => [l(p(x), {
-							size: T,
-							"aria-hidden": "true"
-						})]),
-						_: 1
-					}),
-					l(i),
-					l(n, null, {
-						default: m(() => [l(p(b), {
-							size: T,
-							"aria-hidden": "true"
-						})]),
-						_: 1
-					})
-				]),
-				c("div", w, [l(a), l(o)]),
-				f(E.$slots, "default")
-			]),
-			_: 3
-		}, 8, ["label"]));
-	}
-});
-//#endregion
-export { E as default };
-
-//# sourceMappingURL=DefaultToolbar.vue_vue_type_script_setup_true_lang.js.map

package/dist/compositions/DefaultToolbar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DefaultToolbar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","InkToolbar","_withCtx","_createElementVNode","_createVNode","InkToolButton","_unref","InkZoomOut","InkZoomSelect","InkZoomIn","InkPageInput","InkPageCount","_renderSlot","InkToolbar_default","InkToolButton_default","InkZoomIn_default","InkZoomOut_default","InkZoomSelect_default","InkPageInput_default","InkPageCount_default","_hoisted_1","_hoisted_2","_hoisted_3","ICON","DefaultToolbar_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","__props","withCtx","createElementVNode","createVNode","unref","Hand","MousePointer2","Highlighter","Square","MessageSquare","ZoomOut","ZoomIn","renderSlot","_ctx"],"sources":["../../src/compositions/DefaultToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The standard toolbar: tools, zoom and page controls with icons. It adds no styles of its\n * own; the theme styles the `data-ink-*` hooks. Extra controls go in the default slot.\n */\nimport {\n  Hand,\n  Highlighter,\n  MessageSquare,\n  MousePointer2,\n  Square,\n  ZoomIn,\n  ZoomOut,\n} from '@lucide/vue'\n\nimport InkPageCount from '../components/InkPageCount.vue'\nimport InkPageInput from '../components/InkPageInput.vue'\nimport InkToolbar from '../components/InkToolbar.vue'\nimport InkToolButton from '../components/InkToolButton.vue'\nimport InkZoomIn from '../components/InkZoomIn.vue'\nimport InkZoomOut from '../components/InkZoomOut.vue'\nimport InkZoomSelect from '../components/InkZoomSelect.vue'\n\nwithDefaults(defineProps<{ label?: string }>(), { label: 'Document tools' })\n\nconst ICON = 18\n</script>\n\n<template>\n  <InkToolbar :label=\"label\" class=\"ink-default-toolbar\" data-ink-default-toolbar>\n    <div\n      class=\"ink-toolbar-group\"\n      data-ink-toolbar-group=\"tools\"\n      role=\"group\"\n      aria-label=\"Tools\"\n    >\n      <InkToolButton tool=\"view\"><Hand :size=\"ICON\" aria-hidden=\"true\" /></InkToolButton>\n      <InkToolButton tool=\"select\">\n        <MousePointer2 :size=\"ICON\" aria-hidden=\"true\" />\n      </InkToolButton>\n      <InkToolButton tool=\"highlight\">\n        <Highlighter :size=\"ICON\" aria-hidden=\"true\" />\n      </InkToolButton>\n      <InkToolButton tool=\"redact-area\">\n        <Square :size=\"ICON\" aria-hidden=\"true\" />\n      </InkToolButton>\n      <InkToolButton tool=\"note\">\n        <MessageSquare :size=\"ICON\" aria-hidden=\"true\" />\n      </InkToolButton>\n    </div>\n    <div\n      class=\"ink-toolbar-group\"\n      data-ink-toolbar-group=\"zoom\"\n      role=\"group\"\n      aria-label=\"Zoom\"\n    >\n      <InkZoomOut><ZoomOut :size=\"ICON\" aria-hidden=\"true\" /></InkZoomOut>\n      <InkZoomSelect />\n      <InkZoomIn><ZoomIn :size=\"ICON\" aria-hidden=\"true\" /></InkZoomIn>\n    </div>\n    <div\n      class=\"ink-toolbar-group\"\n      data-ink-toolbar-group=\"page\"\n      role=\"group\"\n      aria-label=\"Page\"\n    >\n      <InkPageInput />\n      <InkPageCount />\n    </div>\n    <slot />\n  </InkToolbar>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;GAyBMwB,IAAO;;;;oBAIXxB,EAAA,GAAAC,EAyCaC,GAAA;GAzCA,OAAO0B,EAAA;GAAO,OAAM;GAAsB,4BAAA;;GACrD,SAAAzB,QAmBM;IAnBNC,EAmBM,OAnBNiB,GAmBM;KAbJhB,EAAmFC,GAAA,EAApE,MAAK,OAAM,GAAA;MAAC,SAAAH,QAAwC,CAAxCE,EAAwCE,EAAA0B,CAAA,GAAA;OAAjC,MAAMT;OAAM,eAAY;;;;KAC1DnB,EAEgBC,GAAA,EAFD,MAAK,SAAQ,GAAA;MAC1B,SAAAH,QAAiD,CAAjDE,EAAiDE,EAAA2B,CAAA,GAAA;OAAjC,MAAMV;OAAM,eAAY;;;;KAE1CnB,EAEgBC,GAAA,EAFD,MAAK,YAAW,GAAA;MAC7B,SAAAH,QAA+C,CAA/CE,EAA+CE,EAAA4B,CAAA,GAAA;OAAjC,MAAMX;OAAM,eAAY;;;;KAExCnB,EAEgBC,GAAA,EAFD,MAAK,cAAa,GAAA;MAC/B,SAAAH,QAA0C,CAA1CE,EAA0CE,EAAA6B,CAAA,GAAA;OAAjC,MAAMZ;OAAM,eAAY;;;;KAEnCnB,EAEgBC,GAAA,EAFD,MAAK,OAAM,GAAA;MACxB,SAAAH,QAAiD,CAAjDE,EAAiDE,EAAA8B,CAAA,GAAA;OAAjC,MAAMb;OAAM,eAAY;;;;;IAG5CpB,EASM,OATNkB,GASM;KAHJjB,EAAoEG,GAAA,MAAA;MAAxD,SAAAL,QAA2C,CAA3CE,EAA2CE,EAAA+B,CAAA,GAAA;OAAjC,MAAMd;OAAM,eAAY;;;;KAC9CnB,EAAiBI,CAAA;KACjBJ,EAAiEK,GAAA,MAAA;MAAtD,SAAAP,QAA0C,CAA1CE,EAA0CE,EAAAgC,CAAA,GAAA;OAAjC,MAAMf;OAAM,eAAY;;;;;IAE9CpB,EAQM,OARNmB,GAQM,CAFJlB,EAAgBM,CAAA,GAChBN,EAAgBO,CAAA,CAAA,CAAA;IAElBC,EAAQ4B,EAAA,QAAA,SAAA"}