@inkbar/vue 0.4.0 → 0.6.0

package/dist/components/InkShapeMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,118 +1,126 @@
 import { useTool as e } from "../composables/useTool.js";
 import { useToolOptions as t } from "../composables/useToolOptions.js";
 import n from "./InkIcon.js";
-import { Fragment as r, computed 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, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
-import { SHAPE_COLUMNS as b, SHAPE_ICONS as x, SHAPE_KINDS as S, focusInitialMenuItem as C, handleMenuKeys as w, menuItems as T, shapeMenuModel 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";
+import { Fragment as r, computed as i, createBlock 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 { SHAPE_COLUMNS as x, SHAPE_ICONS as S, SHAPE_KINDS as C, focusInitialMenuItem as w, handleMenuKeys as T, menuItems as E, shapeMenuModel as D } from "@inkbar/core/dom";
+import { PopoverAnchor as O, PopoverContent as k, PopoverPortal as A, PopoverRoot as j, PopoverTrigger as M, ToolbarButton as N } from "reka-ui";
+import { ChevronDown as P } from "@inkbar/icons";
 //#region src/components/InkShapeMenu.vue?vue&type=script&setup=true&lang.ts
-var N = {
-	role: "group",
-	"aria-label": "Shape",
-	class: "ink-split-button ink-shape-menu",
-	"data-ink-shape-menu": ""
-}, P = ["data-state"], F = ["data-ink-menu-columns"], I = [
+var F = ["data-state"], I = ["data-ink-menu-columns"], L = [
 	"data-key",
 	"aria-checked",
 	"data-state",
 	"onClick"
-], L = /*@__PURE__*/ l({
+], R = /*@__PURE__*/ u({
+	inheritAttrs: !1,
 	__name: "InkShapeMenu",
-	setup(l) {
-		let { tool: L, setTool: R } = e(), { options: z, setOptions: B } = t("shape"), V = m(!1), H = i(() => E(z.value, S)), U = i(() => L.value === "shape"), W = i(() => x[H.value.kind]), G = !1;
-		function K(e) {
-			e.key !== "ArrowDown" || e.defaultPrevented || V.value || (e.preventDefault(), G = !0, V.value = !0);
-		}
+	setup(u) {
+		let { tool: R, setTool: z } = e(), { options: B, setOptions: V } = t("shape"), H = h(!1), U = i(() => D(B.value, C)), W = i(() => R.value === "shape"), G = i(() => S[U.value.kind]), K = !1;
 		function q(e) {
+			e.key !== "ArrowDown" || e.defaultPrevented || H.value || (e.preventDefault(), K = !0, H.value = !0);
+		}
+		function J(e) {
 			e.preventDefault();
 			let t = document.querySelector("[data-ink-menu=\"shape\"] [role=\"menu\"]");
-			t && (G ? T(t)[0]?.focus({ preventScroll: !0 }) : C(t)), G = !1;
+			t && (K ? E(t)[0]?.focus({ preventScroll: !0 }) : w(t)), K = !1;
 		}
-		function J(e) {
-			B({ kind: e }), R("shape"), V.value = !1;
+		function Y(e) {
+			V({ kind: e }), z("shape"), H.value = !1;
 		}
-		let Y = i(() => ({
-			"aria-pressed": String(U.value),
-			"aria-label": H.value.label,
-			title: H.value.label,
-			onClick: () => R("shape")
-		})), X = {
+		let X = i(() => ({
+			"aria-pressed": String(W.value),
+			"aria-label": U.value.label,
+			title: U.value.label,
+			onClick: () => z("shape")
+		})), Z = {
 			"aria-label": "Choose shape",
 			title: "Choose shape",
 			"aria-haspopup": "menu",
-			onKeydown: K
-		}, Z = { "aria-label": "Shapes" }, Q = {
+			onKeydown: q
+		}, Q = { "aria-label": "Shapes" }, $ = {
 			role: "menu",
 			"aria-label": "Shapes",
-			onKeydown: (e) => w(e, e.currentTarget)
+			onKeydown: (e) => T(e, e.currentTarget)
 		};
-		return (e, t) => (p(), a("div", N, [c(v(j), d({
-			class: "ink-tool-button ink-shape-button",
-			"data-ink-tool-button": "",
-			"data-ink-shape-button": "",
-			"data-tool": "shape",
-			"data-kind": H.value.kind,
-			"data-state": U.value ? "on" : "off"
-		}, Y.value), {
-			default: y(() => [g(e.$slots, "default", {
-				active: U.value,
-				kind: H.value.kind
-			}, () => [c(n, { icon: W.value }, null, 8, ["icon"])])]),
-			_: 3
-		}, 16, ["data-kind", "data-state"]), c(v(k), {
-			open: V.value,
-			"onUpdate:open": t[0] ||= (e) => V.value = e
+		return (e, t) => (m(), a(y(j), {
+			open: H.value,
+			"onUpdate:open": t[0] ||= (e) => H.value = e
 		}, {
-			default: y(() => [c(v(j), { "as-child": "" }, {
-				default: y(() => [c(v(A), { "as-child": "" }, {
-					default: y(() => [o("button", d({
-						type: "button",
-						class: "ink-menu-trigger ink-shape-menu-trigger",
-						"data-ink-shape-menu-trigger": "",
-						"data-state": V.value ? "open" : "closed"
-					}, X), [c(n, { icon: v(M) }, null, 8, ["icon"])], 16, P)]),
-					_: 1
-				})]),
-				_: 1
-			}), c(v(O), null, {
-				default: y(() => [c(v(D), d({
-					class: "ink-select-content ink-menu-content",
-					"data-ink-select-content": "",
-					"data-ink-menu": "shape",
-					side: "bottom",
-					align: "start",
-					"side-offset": 4,
-					"collision-padding": 8
-				}, Z, { onOpenAutoFocus: q }), {
-					default: y(() => [o("div", f(u(Q)), [o("div", {
-						role: "group",
-						"aria-label": "Shapes",
-						class: "ink-shape-grid",
-						"data-ink-menu-columns": v(b)
-					}, [(p(!0), a(r, null, h(H.value.items, (e) => (p(), a("button", {
-						key: e.kind,
-						type: "button",
-						role: "menuitemradio",
-						class: "ink-select-item ink-menu-item ink-shape-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)
-					}, [c(n, {
-						icon: v(x)[e.kind],
-						size: 16
-					}, null, 8, ["icon"]), s(" " + _(e.label), 1)], 8, I))), 128))], 8, F)], 16)]),
-					_: 1
-				}, 16)]),
-				_: 1
+			default: b(() => [l(y(O), { "as-child": "" }, {
+				default: b(() => [s("div", f({
+					role: "group",
+					"aria-label": "Shape",
+					class: "ink-split-button ink-shape-menu",
+					"data-ink-shape-menu": ""
+				}, e.$attrs), [
+					l(y(N), f({
+						class: "ink-tool-button ink-shape-button",
+						"data-ink-tool-button": "",
+						"data-ink-shape-button": "",
+						"data-tool": "shape",
+						"data-kind": U.value.kind,
+						"data-state": W.value ? "on" : "off"
+					}, X.value), {
+						default: b(() => [_(e.$slots, "default", {
+							active: W.value,
+							kind: U.value.kind
+						}, () => [l(n, { icon: G.value }, null, 8, ["icon"])])]),
+						_: 3
+					}, 16, ["data-kind", "data-state"]),
+					l(y(N), { "as-child": "" }, {
+						default: b(() => [l(y(M), { "as-child": "" }, {
+							default: b(() => [s("button", f({
+								type: "button",
+								class: "ink-menu-trigger ink-shape-menu-trigger",
+								"data-ink-shape-menu-trigger": "",
+								"data-state": H.value ? "open" : "closed"
+							}, Z), [l(n, { icon: y(P) }, null, 8, ["icon"])], 16, F)]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					l(y(A), null, {
+						default: b(() => [l(y(k), f({
+							class: "ink-select-content ink-menu-content",
+							"data-ink-select-content": "",
+							"data-ink-menu": "shape",
+							side: "bottom",
+							align: "start",
+							"side-offset": 4,
+							"collision-padding": 8
+						}, Q, { onOpenAutoFocus: J }), {
+							default: b(() => [s("div", p(d($)), [s("div", {
+								role: "group",
+								"aria-label": "Shapes",
+								class: "ink-shape-grid",
+								"data-ink-menu-columns": y(x)
+							}, [(m(!0), o(r, null, g(U.value.items, (e) => (m(), o("button", {
+								key: e.kind,
+								type: "button",
+								role: "menuitemradio",
+								class: "ink-select-item ink-menu-item ink-shape-item",
+								"data-ink-select-item": "",
+								tabindex: "-1",
+								"data-key": e.kind,
+								"aria-checked": e.checked,
+								"data-state": e.checked ? "checked" : "unchecked",
+								onClick: (t) => Y(e.kind)
+							}, [l(n, {
+								icon: y(S)[e.kind],
+								size: 16
+							}, null, 8, ["icon"]), c(" " + v(e.label), 1)], 8, L))), 128))], 8, I)], 16)]),
+							_: 1
+						}, 16)]),
+						_: 1
+					})
+				], 16)]),
+				_: 3
 			})]),
-			_: 1
-		}, 8, ["open"])]));
+			_: 3
+		}, 8, ["open"]));
 	}
 });
 //#endregion
-export { L as default };
+export { R as default };
 
 //# sourceMappingURL=InkShapeMenu.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InkShapeMenu.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_unref","_mergeProps","_withCtx","_renderSlot","InkIcon","_createElementVNode","_normalizeProps","_guardReactiveProps","_Fragment","_renderList","_createTextVNode","_toDisplayString","InkIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","InkShapeMenu_vue_vue_type_script_setup_true_lang_default","useTool","useToolOptions","open","ref","model","computed","shapeMenuModel","options","SHAPE_KINDS","active","tool","icon","SHAPE_ICONS","focusFirst","onTriggerKeydown","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","choose","setOptions","setTool","mainAttrs","triggerAttrs","menuAttrs","innerAttrs","handleMenuKeys","openBlock","createElementBlock","createVNode","unref","ToolbarButton","mergeProps","withCtx","renderSlot","_ctx","PopoverRoot","_cache","$event","PopoverTrigger","createElementVNode","ChevronDown","PopoverPortal","PopoverContent","normalizeProps","guardReactiveProps","SHAPE_COLUMNS","Fragment","renderList","item","createTextVNode","toDisplayString"],"sources":["../../src/components/InkShapeMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the shape tool. The main part activates the tool with the current\n * kind and draws that kind's icon; the chevron opens a two-column grid of kinds. Choosing a\n * kind switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  SHAPE_COLUMNS,\n  SHAPE_ICONS,\n  SHAPE_KINDS,\n  shapeMenuModel,\n  type ShapeKind,\n  type ShapeOptions,\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 InkIcon from './InkIcon.vue'\n\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<ShapeOptions>('shape')\nconst open = ref(false)\n\nconst model = computed(() => shapeMenuModel(options.value, SHAPE_KINDS))\nconst active = computed(() => tool.value === 'shape')\nconst icon = computed(() => SHAPE_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 menu is open at a time.\n  const menu = document.querySelector('[data-ink-menu=\"shape\"] [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: ShapeKind): void {\n  setOptions({ kind })\n  setTool('shape')\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('shape'),\n}))\nconst triggerAttrs = {\n  'aria-label': 'Choose shape',\n  title: 'Choose shape',\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': 'Shapes' }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': 'Shapes',\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-label=\"Shape\"\n    class=\"ink-split-button ink-shape-menu\"\n    data-ink-shape-menu\n  >\n    <ToolbarButton\n      class=\"ink-tool-button ink-shape-button\"\n      data-ink-tool-button\n      data-ink-shape-button\n      data-tool=\"shape\"\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-shape-menu-trigger\"\n            data-ink-shape-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=\"shape\"\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              role=\"group\"\n              aria-label=\"Shapes\"\n              class=\"ink-shape-grid\"\n              :data-ink-menu-columns=\"SHAPE_COLUMNS\"\n            >\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-shape-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=\"SHAPE_ICONS[item.kind]\" :size=\"16\" />\n                {{ item.label }}\n              </button>\n            </div>\n          </div>\n        </PopoverContent>\n      </PopoverPortal>\n    </PopoverRoot>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"InkShapeMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createBlock","_unref","_withCtx","_createVNode","_createElementVNode","_mergeProps","_renderSlot","InkIcon","_normalizeProps","_guardReactiveProps","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","InkIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","InkShapeMenu_vue_vue_type_script_setup_true_lang_default","useTool","useToolOptions","open","ref","model","computed","shapeMenuModel","options","SHAPE_KINDS","active","tool","icon","SHAPE_ICONS","focusFirst","onTriggerKeydown","onOpenAutoFocus","menu","menuItems","focusInitialMenuItem","choose","setOptions","setTool","mainAttrs","triggerAttrs","menuAttrs","innerAttrs","handleMenuKeys","openBlock","createBlock","unref","PopoverRoot","_cache","$event","withCtx","createVNode","PopoverAnchor","createElementVNode","mergeProps","_ctx","ToolbarButton","renderSlot","PopoverTrigger","ChevronDown","PopoverPortal","PopoverContent","normalizeProps","guardReactiveProps","SHAPE_COLUMNS","createElementBlock","Fragment","renderList","item","createTextVNode","toDisplayString"],"sources":["../../src/components/InkShapeMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the shape tool. The main part activates the tool with the current\n * kind and draws that kind's icon; the chevron opens a two-column grid of kinds. Choosing a\n * kind switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  SHAPE_COLUMNS,\n  SHAPE_ICONS,\n  SHAPE_KINDS,\n  shapeMenuModel,\n  type ShapeKind,\n  type ShapeOptions,\n} from '@inkbar/core/dom'\nimport { ChevronDown } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\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 InkIcon from './InkIcon.vue'\n\ndefineOptions({ inheritAttrs: false })\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<ShapeOptions>('shape')\nconst open = ref(false)\n\nconst model = computed(() => shapeMenuModel(options.value, SHAPE_KINDS))\nconst active = computed(() => tool.value === 'shape')\nconst icon = computed(() => SHAPE_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 menu is open at a time.\n  const menu = document.querySelector('[data-ink-menu=\"shape\"] [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: ShapeKind): void {\n  setOptions({ kind })\n  setTool('shape')\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('shape'),\n}))\nconst triggerAttrs = {\n  'aria-label': 'Choose shape',\n  title: 'Choose shape',\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': 'Shapes' }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': 'Shapes',\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverAnchor as-child>\n      <div\n        role=\"group\"\n        aria-label=\"Shape\"\n        class=\"ink-split-button ink-shape-menu\"\n        data-ink-shape-menu\n        v-bind=\"$attrs\"\n      >\n        <ToolbarButton\n          class=\"ink-tool-button ink-shape-button\"\n          data-ink-tool-button\n          data-ink-shape-button\n          data-tool=\"shape\"\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        <ToolbarButton as-child>\n          <PopoverTrigger as-child>\n            <button\n              type=\"button\"\n              class=\"ink-menu-trigger ink-shape-menu-trigger\"\n              data-ink-shape-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=\"shape\"\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                role=\"group\"\n                aria-label=\"Shapes\"\n                class=\"ink-shape-grid\"\n                :data-ink-menu-columns=\"SHAPE_COLUMNS\"\n              >\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-shape-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=\"SHAPE_ICONS[item.kind]\" :size=\"16\" />\n                  {{ item.label }}\n                </button>\n              </div>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n      </div>\n    </PopoverAnchor>\n  </PopoverRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/InkSignatureMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureMenu.js","names":["_sfc_main","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","InkSignatureMenu_default"],"sources":["../../src/components/InkSignatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the signature tool. The main part activates the tool with the chosen\n * signature, or opens the menu when none is chosen; the chevron opens the saved signatures as\n * previews, each with a remove button, and \"Create signature\", which opens\n * `InkSignatureDialog`. Choosing a signature switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n  signaturePreview,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Plus, Signature, Trash2 } from '@inkbar/icons'\nimport {\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\nconst props = defineProps<{\n  /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\n\nconst NO_TEMPLATES: readonly SignatureTemplate[] = []\n\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<SignatureOptions>('signature')\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\nconst removeError = useReadable(() => ctx.signatures.value.removeError, undefined)\nconst model = computed(() => signatureMenuModel(templates.value, options.value))\nconst active = computed(() => tool.value === 'signature')\nconst open = ref(false)\nconst creating = ref(false)\n// An old removal error is not news when the menu opens again.\nwatch(open, (isOpen) => {\n  if (isOpen) ctx.signatures.value.clearRemoveError()\n})\nconst main = useTemplateRef<{ $el: HTMLElement }>('main')\n\n/** A saved signature drawn small: ink as filled outlines. */\nconst previews = computed(() =>\n  model.value.items.map((item) =>\n    item.template.kind === 'ink' ? signaturePreview(item.template) : null\n  )\n)\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\n/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */\nlet toDialog = false\n\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value) return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>('[data-ink-menu=\"signature\"] [role=\"menu\"]')\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  const menu = panel()\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction onCloseAutoFocus(e: Event): void {\n  if (toDialog) e.preventDefault()\n  toDialog = false\n}\n\nfunction onMain(): void {\n  if (model.value.selected) setTool('signature')\n  else open.value = true\n}\n\nfunction choose(id: string): void {\n  setOptions({ templateId: id })\n  setTool('signature')\n  open.value = false\n}\n\n/** Removes a template; focus moves to the signature now in its row, else \"Create signature\". */\nfunction remove(id: string, row: number): void {\n  ctx.signatures.value.remove(id).then(\n    async () => {\n      await nextTick()\n      const menu = panel()\n      if (!menu) return\n      const rows = menu.querySelectorAll<HTMLElement>('.ink-signature-item')\n      const next =\n        rows[Math.min(row, rows.length - 1)] ??\n        menu.querySelector<HTMLElement>('[data-ink-signature-create]')\n      next?.focus({ preventScroll: true })\n    },\n    () => {\n      // The host's store refused: the signature stays.\n    }\n  )\n}\n\nfunction create(): void {\n  toDialog = true\n  open.value = false\n  creating.value = true\n}\n\nfunction onDialogCloseAutoFocus(e: Event): void {\n  e.preventDefault()\n  main.value?.$el.focus({ preventScroll: true })\n}\n\n// Reka's typed props stop at its own; ARIA and listeners go through bound objects.\nconst mainAttrs = computed(() => ({\n  'aria-pressed': String(active.value),\n  'aria-label': SIGNATURE_LABELS.sign,\n  title: SIGNATURE_LABELS.sign,\n  onClick: onMain,\n}))\nconst triggerAttrs = {\n  'aria-label': SIGNATURE_LABELS.trigger,\n  title: SIGNATURE_LABELS.trigger,\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': SIGNATURE_LABELS.menu }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': SIGNATURE_LABELS.menu,\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    :aria-label=\"SIGNATURE_LABELS.sign\"\n    class=\"ink-split-button ink-signature-menu\"\n    data-ink-signature-menu\n  >\n    <ToolbarButton\n      ref=\"main\"\n      class=\"ink-tool-button ink-signature-button\"\n      data-ink-tool-button\n      data-ink-signature-button\n      data-tool=\"signature\"\n      :data-state=\"active ? 'on' : 'off'\"\n      v-bind=\"mainAttrs\"\n    >\n      <slot :active=\"active\"><InkIcon :icon=\"Signature\" /></slot>\n    </ToolbarButton>\n    <PopoverRoot v-model:open=\"open\">\n      <ToolbarButton as-child>\n        <PopoverTrigger as-child>\n          <button\n            type=\"button\"\n            class=\"ink-menu-trigger ink-signature-menu-trigger\"\n            data-ink-signature-menu-trigger\n            :data-state=\"open ? 'open' : 'closed'\"\n            v-bind=\"triggerAttrs\"\n          >\n            <InkIcon :icon=\"ChevronDown\" />\n          </button>\n        </PopoverTrigger>\n      </ToolbarButton>\n      <PopoverPortal>\n        <PopoverContent\n          class=\"ink-select-content ink-menu-content\"\n          data-ink-select-content\n          data-ink-menu=\"signature\"\n          side=\"bottom\"\n          align=\"start\"\n          :side-offset=\"4\"\n          :collision-padding=\"8\"\n          v-bind=\"menuAttrs\"\n          @open-auto-focus=\"onOpenAutoFocus\"\n          @close-auto-focus=\"onCloseAutoFocus\"\n        >\n          <div v-bind=\"innerAttrs\">\n            <template v-if=\"model.items.length > 0\">\n              <div\n                role=\"group\"\n                :aria-label=\"SIGNATURE_LABELS.saved\"\n                class=\"ink-signature-list\"\n                data-ink-menu-columns=\"2\"\n              >\n                <template v-for=\"(item, row) in model.items\" :key=\"item.id\">\n                  <button\n                    type=\"button\"\n                    role=\"menuitemradio\"\n                    :aria-checked=\"item.checked\"\n                    :aria-label=\"item.label\"\n                    tabindex=\"-1\"\n                    class=\"ink-select-item ink-menu-item ink-signature-item\"\n                    data-ink-select-item\n                    :data-key=\"item.id\"\n                    :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                    @click=\"choose(item.id)\"\n                  >\n                    <span class=\"ink-signature-preview\" :data-kind=\"item.template.kind\">\n                      <img\n                        v-if=\"item.template.kind === 'image'\"\n                        :src=\"item.template.imagedata\"\n                        alt=\"\"\n                        draggable=\"false\"\n                      />\n                      <svg v-else :viewBox=\"previews[row]?.viewBox\" aria-hidden=\"true\">\n                        <path\n                          v-for=\"(d, i) in previews[row]?.paths ?? []\"\n                          :key=\"i\"\n                          :d=\"d\"\n                          fill=\"currentColor\"\n                        />\n                      </svg>\n                    </span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    :aria-label=\"item.removeLabel\"\n                    :title=\"item.removeLabel\"\n                    tabindex=\"-1\"\n                    class=\"ink-menu-item ink-signature-remove\"\n                    data-ink-signature-remove\n                    :data-key=\"item.id\"\n                    @click=\"remove(item.id, row)\"\n                  >\n                    <InkIcon :icon=\"Trash2\" :size=\"16\" />\n                  </button>\n                </template>\n              </div>\n              <div role=\"separator\" class=\"ink-select-separator\" />\n            </template>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              tabindex=\"-1\"\n              class=\"ink-select-item ink-menu-item ink-signature-create\"\n              data-ink-select-item\n              data-ink-signature-create\n              @click=\"create\"\n            >\n              <InkIcon :icon=\"Plus\" :size=\"16\" />\n              {{ SIGNATURE_LABELS.create }}\n            </button>\n            <p\n              v-if=\"removeError\"\n              class=\"ink-field-error ink-signature-remove-error\"\n              role=\"alert\"\n              data-ink-signature-remove-error\n            >\n              {{ removeError }}\n            </p>\n          </div>\n        </PopoverContent>\n      </PopoverPortal>\n    </PopoverRoot>\n    <InkSignatureDialog\n      v-model:open=\"creating\"\n      :fonts=\"props.fonts\"\n      @close-auto-focus=\"onDialogCloseAutoFocus\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkSignatureMenu.js","names":["_sfc_main","InkSignatureMenu_vue_vue_type_script_setup_true_lang_default","InkSignatureMenu_default"],"sources":["../../src/components/InkSignatureMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A split button for the signature tool. The main part activates the tool with the chosen\n * signature, or opens the menu when none is chosen; the chevron opens the saved signatures as\n * previews, each with a remove button, and \"Create signature\", which opens\n * `InkSignatureDialog`. Choosing a signature switches to the tool with it.\n */\nimport {\n  focusInitialMenuItem,\n  handleMenuKeys,\n  menuItems,\n  SIGNATURE_LABELS,\n  signatureMenuModel,\n  signaturePreview,\n} from '@inkbar/core/dom'\nimport { ChevronDown, Plus, Signature, Trash2 } from '@inkbar/icons'\nimport {\n  PopoverAnchor,\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n  ToolbarButton,\n} from 'reka-ui'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\n\nimport { useTool } from '../composables/useTool'\nimport { useToolOptions } from '../composables/useToolOptions'\nimport { useInkContext } from '../context'\nimport { useReadable } from '../use-readable'\n\nimport InkIcon from './InkIcon.vue'\nimport InkSignatureDialog from './InkSignatureDialog.vue'\n\nimport type { SignatureOptions, SignatureTemplate } from '@inkbar/core'\n\ndefineOptions({ inheritAttrs: false })\nconst props = defineProps<{\n  /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */\n  fonts?: readonly string[] | undefined\n}>()\n\nconst NO_TEMPLATES: readonly SignatureTemplate[] = []\n\nconst { tool, setTool } = useTool()\nconst { options, setOptions } = useToolOptions<SignatureOptions>('signature')\nconst ctx = useInkContext('InkSignatureMenu')\nconst templates = useReadable(() => ctx.signatures.value.templates, NO_TEMPLATES)\nconst removeError = useReadable(() => ctx.signatures.value.removeError, undefined)\nconst model = computed(() => signatureMenuModel(templates.value, options.value))\nconst active = computed(() => tool.value === 'signature')\nconst open = ref(false)\nconst creating = ref(false)\n// An old removal error is not news when the menu opens again.\nwatch(open, (isOpen) => {\n  if (isOpen) ctx.signatures.value.clearRemoveError()\n})\nconst main = useTemplateRef<{ $el: HTMLElement }>('main')\n\n/** A saved signature drawn small: ink as filled outlines. */\nconst previews = computed(() =>\n  model.value.items.map((item) =>\n    item.template.kind === 'ink' ? signaturePreview(item.template) : null\n  )\n)\n\n/** ArrowDown opens on the first item; a click opens on the checked one. */\nlet focusFirst = false\n/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */\nlet toDialog = false\n\nfunction onTriggerKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'ArrowDown' || e.defaultPrevented || open.value) return\n  e.preventDefault()\n  focusFirst = true\n  open.value = true\n}\n\nconst panel = (): HTMLElement | null =>\n  document.querySelector<HTMLElement>('[data-ink-menu=\"signature\"] [role=\"menu\"]')\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  const menu = panel()\n  if (menu) {\n    if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })\n    else focusInitialMenuItem(menu)\n  }\n  focusFirst = false\n}\n\nfunction onCloseAutoFocus(e: Event): void {\n  if (toDialog) e.preventDefault()\n  toDialog = false\n}\n\nfunction onMain(): void {\n  if (model.value.selected) setTool('signature')\n  else open.value = true\n}\n\nfunction choose(id: string): void {\n  setOptions({ templateId: id })\n  setTool('signature')\n  open.value = false\n}\n\n/** Removes a template; focus moves to the signature now in its row, else \"Create signature\". */\nfunction remove(id: string, row: number): void {\n  ctx.signatures.value.remove(id).then(\n    async () => {\n      await nextTick()\n      const menu = panel()\n      if (!menu) return\n      const rows = menu.querySelectorAll<HTMLElement>('.ink-signature-item')\n      const next =\n        rows[Math.min(row, rows.length - 1)] ??\n        menu.querySelector<HTMLElement>('[data-ink-signature-create]')\n      next?.focus({ preventScroll: true })\n    },\n    () => {\n      // The host's store refused: the signature stays.\n    }\n  )\n}\n\nfunction create(): void {\n  toDialog = true\n  open.value = false\n  creating.value = true\n}\n\nfunction onDialogCloseAutoFocus(e: Event): void {\n  e.preventDefault()\n  main.value?.$el.focus({ preventScroll: true })\n}\n\n// Reka's typed props stop at its own; ARIA and listeners go through bound objects.\nconst mainAttrs = computed(() => ({\n  'aria-pressed': String(active.value),\n  'aria-label': SIGNATURE_LABELS.sign,\n  title: SIGNATURE_LABELS.sign,\n  onClick: onMain,\n}))\nconst triggerAttrs = {\n  'aria-label': SIGNATURE_LABELS.trigger,\n  title: SIGNATURE_LABELS.trigger,\n  'aria-haspopup': 'menu' as const,\n  onKeydown: onTriggerKeydown,\n}\nconst menuAttrs = { 'aria-label': SIGNATURE_LABELS.menu }\nconst innerAttrs = {\n  role: 'menu',\n  'aria-label': SIGNATURE_LABELS.menu,\n  onKeydown: (e: KeyboardEvent) => handleMenuKeys(e, e.currentTarget as HTMLElement),\n}\n</script>\n\n<template>\n  <PopoverRoot v-model:open=\"open\">\n    <PopoverAnchor as-child>\n      <div\n        role=\"group\"\n        :aria-label=\"SIGNATURE_LABELS.sign\"\n        class=\"ink-split-button ink-signature-menu\"\n        data-ink-signature-menu\n        v-bind=\"$attrs\"\n      >\n        <ToolbarButton\n          ref=\"main\"\n          class=\"ink-tool-button ink-signature-button\"\n          data-ink-tool-button\n          data-ink-signature-button\n          data-tool=\"signature\"\n          :data-state=\"active ? 'on' : 'off'\"\n          v-bind=\"mainAttrs\"\n        >\n          <slot :active=\"active\"><InkIcon :icon=\"Signature\" /></slot>\n        </ToolbarButton>\n        <ToolbarButton as-child>\n          <PopoverTrigger as-child>\n            <button\n              type=\"button\"\n              class=\"ink-menu-trigger ink-signature-menu-trigger\"\n              data-ink-signature-menu-trigger\n              :data-state=\"open ? 'open' : 'closed'\"\n              v-bind=\"triggerAttrs\"\n            >\n              <InkIcon :icon=\"ChevronDown\" />\n            </button>\n          </PopoverTrigger>\n        </ToolbarButton>\n        <PopoverPortal>\n          <PopoverContent\n            class=\"ink-select-content ink-menu-content\"\n            data-ink-select-content\n            data-ink-menu=\"signature\"\n            side=\"bottom\"\n            align=\"start\"\n            :side-offset=\"4\"\n            :collision-padding=\"8\"\n            v-bind=\"menuAttrs\"\n            @open-auto-focus=\"onOpenAutoFocus\"\n            @close-auto-focus=\"onCloseAutoFocus\"\n          >\n            <div v-bind=\"innerAttrs\">\n              <template v-if=\"model.items.length > 0\">\n                <div\n                  role=\"group\"\n                  :aria-label=\"SIGNATURE_LABELS.saved\"\n                  class=\"ink-signature-list\"\n                  data-ink-menu-columns=\"2\"\n                >\n                  <template v-for=\"(item, row) in model.items\" :key=\"item.id\">\n                    <button\n                      type=\"button\"\n                      role=\"menuitemradio\"\n                      :aria-checked=\"item.checked\"\n                      :aria-label=\"item.label\"\n                      tabindex=\"-1\"\n                      class=\"ink-select-item ink-menu-item ink-signature-item\"\n                      data-ink-select-item\n                      :data-key=\"item.id\"\n                      :data-state=\"item.checked ? 'checked' : 'unchecked'\"\n                      @click=\"choose(item.id)\"\n                    >\n                      <span class=\"ink-signature-preview\" :data-kind=\"item.template.kind\">\n                        <img\n                          v-if=\"item.template.kind === 'image'\"\n                          :src=\"item.template.imagedata\"\n                          alt=\"\"\n                          draggable=\"false\"\n                        />\n                        <svg v-else :viewBox=\"previews[row]?.viewBox\" aria-hidden=\"true\">\n                          <path\n                            v-for=\"(d, i) in previews[row]?.paths ?? []\"\n                            :key=\"i\"\n                            :d=\"d\"\n                            fill=\"currentColor\"\n                          />\n                        </svg>\n                      </span>\n                    </button>\n                    <button\n                      type=\"button\"\n                      role=\"menuitem\"\n                      :aria-label=\"item.removeLabel\"\n                      :title=\"item.removeLabel\"\n                      tabindex=\"-1\"\n                      class=\"ink-menu-item ink-signature-remove\"\n                      data-ink-signature-remove\n                      :data-key=\"item.id\"\n                      @click=\"remove(item.id, row)\"\n                    >\n                      <InkIcon :icon=\"Trash2\" :size=\"16\" />\n                    </button>\n                  </template>\n                </div>\n                <div role=\"separator\" class=\"ink-select-separator\" />\n              </template>\n              <button\n                type=\"button\"\n                role=\"menuitem\"\n                tabindex=\"-1\"\n                class=\"ink-select-item ink-menu-item ink-signature-create\"\n                data-ink-select-item\n                data-ink-signature-create\n                @click=\"create\"\n              >\n                <InkIcon :icon=\"Plus\" :size=\"16\" />\n                {{ SIGNATURE_LABELS.create }}\n              </button>\n              <p\n                v-if=\"removeError\"\n                class=\"ink-field-error ink-signature-remove-error\"\n                role=\"alert\"\n                data-ink-signature-remove-error\n              >\n                {{ removeError }}\n              </p>\n            </div>\n          </PopoverContent>\n        </PopoverPortal>\n        <InkSignatureDialog\n          v-model:open=\"creating\"\n          :fonts=\"props.fonts\"\n          @close-auto-focus=\"onDialogCloseAutoFocus\"\n        />\n      </div>\n    </PopoverAnchor>\n  </PopoverRoot>\n</template>\n"],"mappings":""}

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

@@ -2,11 +2,11 @@ type __VLS_Props = {
     /** The fonts the dialog's Type tab offers. Default: InkRoot's `signatureFonts`. */
     fonts?: readonly string[] | undefined;
 };
-declare var __VLS_7: {
+declare var __VLS_21: {
     active: boolean;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    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>;

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

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