@inkbar/vue 0.8.0 → 0.10.0

package/dist/components/InkSearchResults.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,52 @@
+import { injectInkContext as e } from "../context.js";
+import { useSearch as t } from "../composables/useSearch.js";
+import n from "./InkIcon.js";
+import r from "./RecordCards.js";
+import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, openBlock as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
+import { findCountText as h, handleResultsFieldKey as g, isBlankQuery as _, searchSource as v } from "@inkbar/core/dom";
+import { Search as y } from "@inkbar/icons";
+//#region src/components/InkSearchResults.vue?vue&type=script&setup=true&lang.ts
+var b = {
+	class: "ink-search-results",
+	"data-ink-search-results": ""
+}, x = {
+	key: 0,
+	class: "ink-search-results-bar",
+	role: "search"
+}, S = { class: "ink-input-group" }, C = { class: "ink-input-accessory" }, w = ["value"], T = {
+	class: "ink-search-results-count",
+	"data-ink-search-results-count": ""
+}, E = /*@__PURE__*/ u({
+	__name: "InkSearchResults",
+	props: { field: {
+		type: Boolean,
+		default: !0
+	} },
+	setup(u) {
+		let E = e(), D = t(), { state: O } = D, k = i(() => E.search.value ? v(E.search.value) : null), A = i(() => h(O.value)), j = i(() => _(O.value.query));
+		return (e, t) => (d(), o("div", b, [
+			u.field ? (d(), o("div", x, [s("div", S, [s("span", C, [l(n, { icon: p(y) }, null, 8, ["icon"])]), s("input", {
+				type: "text",
+				"aria-label": "Find in document",
+				placeholder: "Search for a word or phrase",
+				autocomplete: "off",
+				spellcheck: "false",
+				value: p(O).query,
+				onInput: t[0] ||= (e) => p(D).setQuery(e.target.value),
+				onKeydown: t[1] ||= (e) => p(g)(e, p(D))
+			}, null, 40, w)])])) : a("", !0),
+			l(r, {
+				source: k.value,
+				"empty-shown": j.value
+			}, {
+				empty: m(() => [...t[2] ||= [c("Search to list every match.", -1)]]),
+				_: 1
+			}, 8, ["source", "empty-shown"]),
+			s("div", T, f(A.value), 1)
+		]));
+	}
+});
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=InkSearchResults.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSearchResults.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode","InkIcon","_unref","_createCommentVNode","RecordCards","_withCtx","_createTextVNode","_toDisplayString","InkIcon_default","RecordCards_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","InkSearchResults_vue_vue_type_script_setup_true_lang_default","ctx","injectInkContext","search","useSearch","source","computed","searchSource","count","findCountText","state","blank","isBlankQuery","openBlock","createElementBlock","__props","createElementVNode","createVNode","unref","Search","_cache","$event","handleResultsFieldKey","createCommentVNode","withCtx","createTextVNode","toDisplayString"],"sources":["../../src/components/InkSearchResults.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * The search hits as a list of cards, for a sidebar panel: `createSearchResults` on core's\n * record list controller over the root's search. One card per hit, with its page and the text\n * around it. Choosing a card makes its hit current, as the find bar's next and previous do, and\n * the current hit is the selected card. Above the cards, a query field (`:field=\"false\"`\n * leaves it out when a find bar is on the page); under them, the find bar's match count.\n * Field and find bar share the search state, so they never disagree. It fills its parent's\n * height. Inside `InkRoot`; it renders empty on the server.\n */\nimport {\n  findCountText,\n  handleResultsFieldKey,\n  isBlankQuery,\n  searchSource,\n} from '@inkbar/core/dom'\nimport { Search } from '@inkbar/icons'\nimport { computed } from 'vue'\n\nimport { useSearch } from '../composables/useSearch'\nimport { injectInkContext } from '../context'\n\nimport InkIcon from './InkIcon.vue'\nimport RecordCards from './RecordCards.vue'\n\nwithDefaults(defineProps<{ field?: boolean }>(), { field: true })\n\nconst ctx = injectInkContext()\nconst search = useSearch()\nconst { state } = search\n\nconst source = computed(() => (ctx.search.value ? searchSource(ctx.search.value) : null))\nconst count = computed(() => findCountText(state.value))\n// Nothing found yet is the count's to say while a query is in: \"No results\", or a scan.\nconst blank = computed(() => isBlankQuery(state.value.query))\n</script>\n\n<template>\n  <div class=\"ink-search-results\" data-ink-search-results>\n    <div v-if=\"field\" class=\"ink-search-results-bar\" role=\"search\">\n      <div class=\"ink-input-group\">\n        <span class=\"ink-input-accessory\"><InkIcon :icon=\"Search\" /></span>\n        <input\n          type=\"text\"\n          aria-label=\"Find in document\"\n          placeholder=\"Search for a word or phrase\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          :value=\"state.query\"\n          @input=\"search.setQuery(($event.target as HTMLInputElement).value)\"\n          @keydown=\"handleResultsFieldKey($event, search)\"\n        />\n      </div>\n    </div>\n    <RecordCards :source=\"source\" :empty-shown=\"blank\">\n      <template #empty>Search to list every match.</template>\n    </RecordCards>\n    <!-- A footer under the cards, hidden while empty. -->\n    <div class=\"ink-search-results-count\" data-ink-search-results-count>{{ count }}</div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA2BA,IAAMoB,IAAMC,EAAiB,GACvBC,IAASC,EAAU,GACnB,EAAE,aAAUD,GAEZE,IAASC,QAAgBL,EAAI,OAAO,QAAQM,EAAaN,EAAI,OAAO,KAAK,IAAI,IAAK,GAClFO,IAAQF,QAAeG,EAAcC,EAAM,KAAK,CAAC,GAEjDC,IAAQL,QAAeM,EAAaF,EAAM,MAAM,KAAK,CAAC;oBAI1D7B,EAAA,GAAAC,EAqBM,OArBNY,GAqBM;GApBOqB,EAAA,SAAXlC,EAAA,GAAAC,EAcM,OAdNa,GAcM,CAbJZ,EAYM,OAZNa,GAYM,CAXJb,EAAmE,QAAnEc,GAAmE,CAAjCb,EAA0BC,GAAA,EAAhB,MAAMC,EAAAiC,CAAA,EAAM,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,CAAA,CAAA,GACxDpC,EASE,SAAA;IARA,MAAK;IACL,cAAW;IACX,aAAY;IACZ,cAAa;IACb,YAAW;IACV,OAAOG,EAAAwB,CAAA,CAAK,CAAC;IACb,SAAK,AAAAU,EAAA,QAAA,MAAElC,EAAAiB,CAAA,CAAM,CAAC,SAAUkB,EAAO,OAA4B,KAAK;IAChE,WAAO,AAAAD,EAAA,QAAA,MAAElC,EAAAoC,CAAA,CAAqB,CAACD,GAAQnC,EAAAiB,CAAA,CAAM;;GAIpDnB,EAEcI,GAAA;IAFA,QAAQiB,EAAA;IAAS,eAAaM,EAAA;;IAC/B,OAAKtB,QAA4B,CAAA,GAAA,AAAA+B,EAAA,OAAA,CAA3B9B,EAAA,+BAA2B,EAAA,CAAA,CAAA,CAAA;;;GAG9CP,EAAqF,OAArFgB,GAAqFR,EAAdiB,EAAA,KAAK,GAAA,CAAA"}

package/dist/components/InkShapeMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkShapeMenu.js","names":["_sfc_main","InkShapeMenu_vue_vue_type_script_setup_true_lang_default","InkShapeMenu_default"],"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":""}
+{"version":3,"file":"InkShapeMenu.js","names":["_sfc_main","InkShapeMenu_vue_vue_type_script_setup_true_lang_default","InkShapeMenu_default"],"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 { useRegisteredTool } from '../composables/useRegisteredTool'\nimport { useTool } from '../composables/useTool'\nimport { useToolOptionsWhile } from '../composables/useToolOptions'\n\nimport InkIcon from './InkIcon.vue'\n\ndefineOptions({ inheritAttrs: false })\nconst { tool, setTool } = useTool()\n// Nothing renders while no `shape` tool is registered.\nconst registered = useRegisteredTool('shape')\nconst { options, setOptions } = useToolOptionsWhile<ShapeOptions>('shape', registered)\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-if=\"registered\" 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":""}

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

@@ -1 +1 @@
-{"version":3,"file":"InkShapeMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkShapeMenu.vue"],"names":[],"mappings":"AA6KA,OAAO,EAQL,KAAK,SAAS,EAEf,MAAM,kBAAkB,CAAA;AA+SzB,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,+QACd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"InkShapeMenu.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkShapeMenu.vue"],"names":[],"mappings":"AAgLA,OAAO,EAQL,KAAK,SAAS,EAEf,MAAM,kBAAkB,CAAA;AAwTzB,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,+QACd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/InkShapeMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,86 +1,88 @@
-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, 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";
+import { useRegisteredTool as e } from "../composables/useRegisteredTool.js";
+import { useTool as t } from "../composables/useTool.js";
+import { useToolOptionsWhile as n } from "../composables/useToolOptions.js";
+import r from "./InkIcon.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, mergeProps as m, normalizeProps as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
+import { SHAPE_COLUMNS as C, SHAPE_ICONS as w, SHAPE_KINDS as T, focusInitialMenuItem as E, handleMenuKeys as D, menuItems as O, shapeMenuModel as k } from "@inkbar/core/dom";
+import { PopoverAnchor as A, PopoverContent as j, PopoverPortal as M, PopoverRoot as N, PopoverTrigger as P, ToolbarButton as F } from "reka-ui";
+import { ChevronDown as I } from "@inkbar/icons";
 //#region src/components/InkShapeMenu.vue?vue&type=script&setup=true&lang.ts
-var F = ["data-state"], I = ["data-ink-menu-columns"], L = [
+var ee = ["data-state"], L = ["data-ink-menu-columns"], R = [
 	"data-key",
 	"aria-checked",
 	"data-state",
 	"onClick"
-], R = /*@__PURE__*/ u({
+], z = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "InkShapeMenu",
-	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);
+	setup(f) {
+		let { tool: z, setTool: B } = t(), V = e("shape"), { options: H, setOptions: U } = n("shape", V), W = _(!1), G = a(() => k(H.value, T)), K = a(() => z.value === "shape"), q = a(() => w[G.value.kind]), J = !1;
+		function Y(e) {
+			e.key !== "ArrowDown" || e.defaultPrevented || W.value || (e.preventDefault(), J = !0, W.value = !0);
 		}
-		function J(e) {
+		function X(e) {
 			e.preventDefault();
 			let t = document.querySelector("[data-ink-menu=\"shape\"] [role=\"menu\"]");
-			t && (K ? E(t)[0]?.focus({ preventScroll: !0 }) : w(t)), K = !1;
+			t && (J ? O(t)[0]?.focus({ preventScroll: !0 }) : E(t)), J = !1;
 		}
-		function Y(e) {
-			V({ kind: e }), z("shape"), H.value = !1;
+		function Z(e) {
+			U({ kind: e }), B("shape"), W.value = !1;
 		}
-		let X = i(() => ({
-			"aria-pressed": String(W.value),
-			"aria-label": U.value.label,
-			title: U.value.label,
-			onClick: () => z("shape")
-		})), Z = {
+		let Q = a(() => ({
+			"aria-pressed": String(K.value),
+			"aria-label": G.value.label,
+			title: G.value.label,
+			onClick: () => B("shape")
+		})), $ = {
 			"aria-label": "Choose shape",
 			title: "Choose shape",
 			"aria-haspopup": "menu",
-			onKeydown: q
-		}, Q = { "aria-label": "Shapes" }, $ = {
+			onKeydown: Y
+		}, te = { "aria-label": "Shapes" }, ne = {
 			role: "menu",
 			"aria-label": "Shapes",
-			onKeydown: (e) => T(e, e.currentTarget)
+			onKeydown: (e) => D(e, e.currentTarget)
 		};
-		return (e, t) => (m(), a(y(j), {
-			open: H.value,
-			"onUpdate:open": t[0] ||= (e) => H.value = e
+		return (e, t) => x(V) ? (g(), o(x(N), {
+			key: 0,
+			open: W.value,
+			"onUpdate:open": t[0] ||= (e) => W.value = e
 		}, {
-			default: b(() => [l(y(O), { "as-child": "" }, {
-				default: b(() => [s("div", f({
+			default: S(() => [d(x(A), { "as-child": "" }, {
+				default: S(() => [l("div", m({
 					role: "group",
 					"aria-label": "Shape",
 					class: "ink-split-button ink-shape-menu",
 					"data-ink-shape-menu": ""
 				}, e.$attrs), [
-					l(y(N), f({
+					d(x(F), m({
 						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"])])]),
+						"data-kind": G.value.kind,
+						"data-state": K.value ? "on" : "off"
+					}, Q.value), {
+						default: S(() => [y(e.$slots, "default", {
+							active: K.value,
+							kind: G.value.kind
+						}, () => [d(r, { icon: q.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({
+					d(x(F), { "as-child": "" }, {
+						default: S(() => [d(x(P), { "as-child": "" }, {
+							default: S(() => [l("button", m({
 								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)]),
+								"data-state": W.value ? "open" : "closed"
+							}, $), [d(r, { icon: x(I) }, null, 8, ["icon"])], 16, ee)]),
 							_: 1
 						})]),
 						_: 1
 					}),
-					l(y(A), null, {
-						default: b(() => [l(y(k), f({
+					d(x(M), null, {
+						default: S(() => [d(x(j), m({
 							class: "ink-select-content ink-menu-content",
 							"data-ink-select-content": "",
 							"data-ink-menu": "shape",
@@ -88,13 +90,13 @@ var F = ["data-state"], I = ["data-ink-menu-columns"], L = [
 							align: "start",
 							"side-offset": 4,
 							"collision-padding": 8
-						}, Q, { onOpenAutoFocus: J }), {
-							default: b(() => [s("div", p(d($)), [s("div", {
+						}, te, { onOpenAutoFocus: X }), {
+							default: S(() => [l("div", h(p(ne)), [l("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", {
+								"data-ink-menu-columns": x(C)
+							}, [(g(!0), c(i, null, v(G.value.items, (e) => (g(), c("button", {
 								key: e.kind,
 								type: "button",
 								role: "menuitemradio",
@@ -104,11 +106,11 @@ var F = ["data-state"], I = ["data-ink-menu-columns"], L = [
 								"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],
+								onClick: (t) => Z(e.kind)
+							}, [d(r, {
+								icon: x(w)[e.kind],
 								size: 16
-							}, null, 8, ["icon"]), c(" " + v(e.label), 1)], 8, L))), 128))], 8, I)], 16)]),
+							}, null, 8, ["icon"]), u(" " + b(e.label), 1)], 8, R))), 128))], 8, L)], 16)]),
 							_: 1
 						}, 16)]),
 						_: 1
@@ -117,10 +119,10 @@ var F = ["data-state"], I = ["data-ink-menu-columns"], L = [
 				_: 3
 			})]),
 			_: 3
-		}, 8, ["open"]));
+		}, 8, ["open"])) : s("", !0);
 	}
 });
 //#endregion
-export { R as default };
+export { z 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":["$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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"}
+{"version":3,"file":"InkShapeMenu.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_unref","_openBlock","_createBlock","_withCtx","_createVNode","_createElementVNode","_mergeProps","_renderSlot","InkIcon","_normalizeProps","_guardReactiveProps","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","_createCommentVNode","InkIcon_default","_hoisted_1","_hoisted_2","_hoisted_3","InkShapeMenu_vue_vue_type_script_setup_true_lang_default","useTool","registered","useRegisteredTool","useToolOptionsWhile","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","unref","openBlock","createBlock","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","createCommentVNode"],"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 { useRegisteredTool } from '../composables/useRegisteredTool'\nimport { useTool } from '../composables/useTool'\nimport { useToolOptionsWhile } from '../composables/useToolOptions'\n\nimport InkIcon from './InkIcon.vue'\n\ndefineOptions({ inheritAttrs: false })\nconst { tool, setTool } = useTool()\n// Nothing renders while no `shape` tool is registered.\nconst registered = useRegisteredTool('shape')\nconst { options, setOptions } = useToolOptionsWhile<ShapeOptions>('shape', registered)\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-if=\"registered\" 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/InkSidebar.js

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

package/dist/components/InkSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkSidebar.js","names":["_sfc_main","InkSidebar_vue_vue_type_script_setup_true_lang_default","InkSidebar_default"],"sources":["../../src/components/InkSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A sidebar of `InkPanel`s: `createSidebar`'s markup on core's sidebar controller, which holds\n * the open state, the ARIA, the keys and the clicks. Rail and tabs render their triggers here;\n * in a stack each panel renders its own header. Panels register as they are set up and take\n * their place in DOM order once mounted, so a panel added later with `v-if` slots in where it\n * stands. A closed panel stays mounted and hidden, and the panels' content stays in place\n * across layouts, so its state survives switching.\n *\n * `v-model:open` is the open panel's id (or null) for rail and tabs, and the expanded ids for\n * stack. Left unbound, the first panel starts open. It needs no document, so it works outside\n * `InkRoot`. The server renders the root, the panels (the open one shown) and the stack\n * headers; rail and tab buttons follow once mounted, as the panels register after the root\n * has rendered.\n */\nimport {\n  createSidebarController,\n  type SidebarLayout,\n  type SidebarOpen,\n  type SidebarSide,\n} from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  useId,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { useReadable } from '../use-readable'\n\nimport { provideSidebarContext, type SidebarPanelEntry } from './sidebar-context'\nimport SidebarTrigger from './SidebarTrigger.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    side?: SidebarSide | undefined\n    layout?: SidebarLayout | undefined\n    /** Default true. False hides the whole sidebar and keeps its open panel, content and scroll for when it shows again. */\n    visible?: boolean | undefined\n  }>(),\n  { side: 'left', layout: 'rail', visible: true }\n)\n/** Undefined while unbound and untouched: the controller then opens the first panel. */\nconst open = defineModel<SidebarOpen | undefined>('open')\n\nconst entries = shallowRef<readonly SidebarPanelEntry[]>([])\nconst panels = computed(() => entries.value.map((e) => e.info()))\n\n// Pending until mounted: the panels register one by one while they are set up, and an open id\n// not registered yet is not a removed panel.\nconst controller = createSidebarController({\n  layout: props.layout,\n  side: props.side,\n  visible: props.visible,\n  panels: [],\n  ...(open.value !== undefined && { open: open.value }),\n  pending: true,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  // The same ids on the server and the client.\n  idPrefix: useId(),\n})\n// Sync, so a panel set up next reads the attributes its registration gives (on the server too).\nwatch(\n  () => [props.layout, props.side, props.visible, panels.value, open.value] as const,\n  ([layout, side, visible, list, value]) =>\n    controller.update({\n      layout,\n      side,\n      visible,\n      panels: list,\n      ...(value !== undefined && { open: value }),\n    }),\n  { flush: 'sync' }\n)\nconst state = useReadable(controller.state, controller.state.get())\n\nfunction register(entry: SidebarPanelEntry): () => void {\n  entries.value = [...entries.value, entry]\n  return () => {\n    entries.value = entries.value.filter((e) => e !== entry)\n  }\n}\n\nfunction arrange(): void {\n  const list = entries.value\n  const sorted = [...list].sort((a, b) => {\n    const x = a.element()\n    const y = b.element()\n    if (!x || !y || x === y) return 0\n    return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1\n  })\n  if (sorted.some((e, i) => e !== list[i])) entries.value = sorted\n}\n\nprovideSidebarContext({ controller, state, register, arrange })\n\nconst view = computed(() => {\n  const s = state.value\n  return {\n    root: controller.rootAttrs(),\n    tablist: controller.tablistAttrs(),\n    triggers: s.panels.map((panel) => ({\n      panel,\n      attrs: controller.triggerAttrs(panel.id),\n    })),\n  }\n})\n\nconst root = useTemplateRef<HTMLElement>('root')\n// The controller handles the triggers' clicks and keys, stack headers included.\nonMounted(() => {\n  controller.bindTriggers(root.value!)\n  controller.update({ pending: false })\n})\nonBeforeUnmount(() => controller.destroy())\n</script>\n\n<template>\n  <div ref=\"root\" class=\"ink-sidebar\" v-bind=\"view.root\">\n    <div\n      v-if=\"state.layout !== 'stack'\"\n      :class=\"state.layout === 'rail' ? 'ink-sidebar-rail' : 'ink-sidebar-tabs'\"\n      v-bind=\"view.tablist\"\n    >\n      <button v-for=\"t in view.triggers\" :key=\"t.panel.id\" v-bind=\"t.attrs\">\n        <SidebarTrigger :panel=\"t.panel\" :rail=\"state.layout === 'rail'\" />\n      </button>\n    </div>\n    <!-- One element in every layout, so the panels are never remounted. -->\n    <div :class=\"{ 'ink-sidebar-panels': state.layout !== 'stack' }\"><slot /></div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,34 @@
+import { SidebarLayout, SidebarOpen, SidebarSide } from '@inkbar/core/dom';
+type __VLS_Props = {
+    side?: SidebarSide | undefined;
+    layout?: SidebarLayout | undefined;
+    /** Default true. False hides the whole sidebar and keeps its open panel, content and scroll for when it shows again. */
+    visible?: boolean | undefined;
+};
+type __VLS_ModelProps = {
+    /** Undefined while unbound and untouched: the controller then opens the first panel. */
+    'open'?: SidebarOpen | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: SidebarOpen | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: (value: SidebarOpen | undefined) => any;
+}>, {
+    side: SidebarSide | undefined;
+    layout: SidebarLayout | undefined;
+    visible: boolean | undefined;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=InkSidebar.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSidebar.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkSidebar.vue"],"names":[],"mappings":"AAyJA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,MAAM,kBAAkB,CAAA;AAiBzB,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC9B,MAAM,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;IAClC,wHAAwH;IACxH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC9B,CAAC;AAgFJ,KAAK,gBAAgB,GAAG;IACxB,wFAAwF;IACxF,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;CAChC,CAAC;AAOF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAyDxD,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;;;;;;;;6EAId,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/InkSidebar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,95 @@
+import { useReadable as e } from "../use-readable.js";
+import { provideSidebarContext as t } from "./sidebar-context.js";
+import n from "./SidebarTrigger.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, normalizeClass as f, onBeforeUnmount as p, onMounted as m, openBlock as h, renderList as g, renderSlot as _, shallowRef as v, unref as y, useId as b, useModel as x, useTemplateRef as S, watch as C } from "vue";
+import { createSidebarController as w } from "@inkbar/core/dom";
+//#region src/components/InkSidebar.vue?vue&type=script&setup=true&lang.ts
+var T = /*@__PURE__*/ l({
+	__name: "InkSidebar",
+	props: /*@__PURE__*/ u({
+		side: { default: "left" },
+		layout: { default: "rail" },
+		visible: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		open: {},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(l) {
+		let u = l, T = x(l, "open"), E = v([]), D = i(() => E.value.map((e) => e.info())), O = w({
+			layout: u.layout,
+			side: u.side,
+			visible: u.visible,
+			panels: [],
+			...T.value !== void 0 && { open: T.value },
+			pending: !0,
+			onOpenChange: (e) => {
+				T.value = e;
+			},
+			idPrefix: b()
+		});
+		C(() => [
+			u.layout,
+			u.side,
+			u.visible,
+			D.value,
+			T.value
+		], ([e, t, n, r, i]) => O.update({
+			layout: e,
+			side: t,
+			visible: n,
+			panels: r,
+			...i !== void 0 && { open: i }
+		}), { flush: "sync" });
+		let k = e(O.state, O.state.get());
+		function A(e) {
+			return E.value = [...E.value, e], () => {
+				E.value = E.value.filter((t) => t !== e);
+			};
+		}
+		function j() {
+			let e = E.value, t = [...e].sort((e, t) => {
+				let n = e.element(), r = t.element();
+				return !n || !r || n === r ? 0 : n.compareDocumentPosition(r) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+			});
+			t.some((t, n) => t !== e[n]) && (E.value = t);
+		}
+		t({
+			controller: O,
+			state: k,
+			register: A,
+			arrange: j
+		});
+		let M = i(() => {
+			let e = k.value;
+			return {
+				root: O.rootAttrs(),
+				tablist: O.tablistAttrs(),
+				triggers: e.panels.map((e) => ({
+					panel: e,
+					attrs: O.triggerAttrs(e.id)
+				}))
+			};
+		}), N = S("root");
+		return m(() => {
+			O.bindTriggers(N.value), O.update({ pending: !1 });
+		}), p(() => O.destroy()), (e, t) => (h(), o("div", d({
+			ref_key: "root",
+			ref: N,
+			class: "ink-sidebar"
+		}, M.value.root), [y(k).layout === "stack" ? a("", !0) : (h(), o("div", d({
+			key: 0,
+			class: y(k).layout === "rail" ? "ink-sidebar-rail" : "ink-sidebar-tabs"
+		}, M.value.tablist), [(h(!0), o(r, null, g(M.value.triggers, (e) => (h(), o("button", d({ key: e.panel.id }, { ref_for: !0 }, e.attrs), [c(n, {
+			panel: e.panel,
+			rail: y(k).layout === "rail"
+		}, null, 8, ["panel", "rail"])], 16))), 128))], 16)), s("div", { class: f({ "ink-sidebar-panels": y(k).layout !== "stack" }) }, [_(e.$slots, "default")], 2)], 16));
+	}
+});
+//#endregion
+export { T as default };
+
+//# sourceMappingURL=InkSidebar.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InkSidebar.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_createVNode","SidebarTrigger","_createCommentVNode","_createElementVNode","_normalizeClass","_renderSlot","SidebarTrigger_default","InkSidebar_vue_vue_type_script_setup_true_lang_default","\"open\"","\"openModifiers\"","props","__props","open","useModel","entries","shallowRef","panels","computed","controller","createSidebarController","value","useId","layout","side","visible","list","state","useReadable","register","entry","e","arrange","sorted","x","a","y","b","i","view","s","panel","root","useTemplateRef","onMounted","onBeforeUnmount","openBlock","createElementBlock","mergeProps","unref","createCommentVNode","Fragment","renderList","t","createVNode","createElementVNode","normalizeClass","renderSlot","_ctx"],"sources":["../../src/components/InkSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * A sidebar of `InkPanel`s: `createSidebar`'s markup on core's sidebar controller, which holds\n * the open state, the ARIA, the keys and the clicks. Rail and tabs render their triggers here;\n * in a stack each panel renders its own header. Panels register as they are set up and take\n * their place in DOM order once mounted, so a panel added later with `v-if` slots in where it\n * stands. A closed panel stays mounted and hidden, and the panels' content stays in place\n * across layouts, so its state survives switching.\n *\n * `v-model:open` is the open panel's id (or null) for rail and tabs, and the expanded ids for\n * stack. Left unbound, the first panel starts open. It needs no document, so it works outside\n * `InkRoot`. The server renders the root, the panels (the open one shown) and the stack\n * headers; rail and tab buttons follow once mounted, as the panels register after the root\n * has rendered.\n */\nimport {\n  createSidebarController,\n  type SidebarLayout,\n  type SidebarOpen,\n  type SidebarSide,\n} from '@inkbar/core/dom'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  useId,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { useReadable } from '../use-readable'\n\nimport { provideSidebarContext, type SidebarPanelEntry } from './sidebar-context'\nimport SidebarTrigger from './SidebarTrigger.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    side?: SidebarSide | undefined\n    layout?: SidebarLayout | undefined\n    /** Default true. False hides the whole sidebar and keeps its open panel, content and scroll for when it shows again. */\n    visible?: boolean | undefined\n  }>(),\n  { side: 'left', layout: 'rail', visible: true }\n)\n/** Undefined while unbound and untouched: the controller then opens the first panel. */\nconst open = defineModel<SidebarOpen | undefined>('open')\n\nconst entries = shallowRef<readonly SidebarPanelEntry[]>([])\nconst panels = computed(() => entries.value.map((e) => e.info()))\n\n// Pending until mounted: the panels register one by one while they are set up, and an open id\n// not registered yet is not a removed panel.\nconst controller = createSidebarController({\n  layout: props.layout,\n  side: props.side,\n  visible: props.visible,\n  panels: [],\n  ...(open.value !== undefined && { open: open.value }),\n  pending: true,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  // The same ids on the server and the client.\n  idPrefix: useId(),\n})\n// Sync, so a panel set up next reads the attributes its registration gives (on the server too).\nwatch(\n  () => [props.layout, props.side, props.visible, panels.value, open.value] as const,\n  ([layout, side, visible, list, value]) =>\n    controller.update({\n      layout,\n      side,\n      visible,\n      panels: list,\n      ...(value !== undefined && { open: value }),\n    }),\n  { flush: 'sync' }\n)\nconst state = useReadable(controller.state, controller.state.get())\n\nfunction register(entry: SidebarPanelEntry): () => void {\n  entries.value = [...entries.value, entry]\n  return () => {\n    entries.value = entries.value.filter((e) => e !== entry)\n  }\n}\n\nfunction arrange(): void {\n  const list = entries.value\n  const sorted = [...list].sort((a, b) => {\n    const x = a.element()\n    const y = b.element()\n    if (!x || !y || x === y) return 0\n    return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1\n  })\n  if (sorted.some((e, i) => e !== list[i])) entries.value = sorted\n}\n\nprovideSidebarContext({ controller, state, register, arrange })\n\nconst view = computed(() => {\n  const s = state.value\n  return {\n    root: controller.rootAttrs(),\n    tablist: controller.tablistAttrs(),\n    triggers: s.panels.map((panel) => ({\n      panel,\n      attrs: controller.triggerAttrs(panel.id),\n    })),\n  }\n})\n\nconst root = useTemplateRef<HTMLElement>('root')\n// The controller handles the triggers' clicks and keys, stack headers included.\nonMounted(() => {\n  controller.bindTriggers(root.value!)\n  controller.update({ pending: false })\n})\nonBeforeUnmount(() => controller.destroy())\n</script>\n\n<template>\n  <div ref=\"root\" class=\"ink-sidebar\" v-bind=\"view.root\">\n    <div\n      v-if=\"state.layout !== 'stack'\"\n      :class=\"state.layout === 'rail' ? 'ink-sidebar-rail' : 'ink-sidebar-tabs'\"\n      v-bind=\"view.tablist\"\n    >\n      <button v-for=\"t in view.triggers\" :key=\"t.panel.id\" v-bind=\"t.attrs\">\n        <SidebarTrigger :panel=\"t.panel\" :rail=\"state.layout === 'rail'\" />\n      </button>\n    </div>\n    <!-- One element in every layout, so the panels are never remounted. -->\n    <div :class=\"{ 'ink-sidebar-panels': state.layout !== 'stack' }\"><slot /></div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/InkSignatureDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureDialog.js","names":["_sfc_main","InkSignatureDialog_vue_vue_type_script_setup_true_lang_default","InkSignatureDialog_default"],"sources":["../../src/components/InkSignatureDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * \"Create signature\": a modal with Draw, Type and Image tabs. Draw is a pad with the draw\n * tool's renderer; Type sets a name in one of the host's handwriting fonts; Image takes a PNG\n * or JPEG scan. Save stores the template through InkRoot's signature store and, unless `select`\n * is false, selects it for the `signature` tool. Escape, Cancel or a press outside closes it.\n */\nimport { SIGNATURE_LABELS } from '@inkbar/core/dom'\nimport {\n  DialogContent,\n  DialogOverlay,\n  DialogPortal,\n  DialogRoot,\n  DialogTitle,\n} from 'reka-ui'\n\nimport SignatureForm from './SignatureForm.vue'\n\nimport type { SignatureTemplate } from '@inkbar/core'\n\nconst props = withDefaults(\n  defineProps<{\n    /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */\n    fonts?: readonly string[] | undefined\n    /**\n     * Whether saving selects the new signature for the `signature` tool. False leaves the tool\n     * alone, for a dialog that signs a field with it through `save`.\n     */\n    select?: boolean\n  }>(),\n  { fonts: undefined, select: true }\n)\nconst open = defineModel<boolean>('open', { default: false })\nconst emit = defineEmits<{\n  /** The new template, once saved (and selected, with `select`). */\n  save: [template: SignatureTemplate]\n  /** Reka's close auto-focus; prevent it to place focus yourself. */\n  closeAutoFocus: [event: Event]\n}>()\n\n// Reka's typed props stop at its own; ARIA goes through a bound object. No description: the\n// title says it all.\nconst contentAttrs = { 'aria-modal': 'true', 'aria-describedby': undefined }\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  ;(e.target as HTMLElement | null)\n    ?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')\n    ?.focus({ preventScroll: true })\n}\n</script>\n\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay class=\"ink-dialog-overlay\" data-ink-dialog-overlay />\n      <DialogContent\n        class=\"ink-dialog ink-signature-dialog\"\n        data-ink-signature-dialog\n        v-bind=\"contentAttrs\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n        @close-auto-focus=\"emit('closeAutoFocus', $event)\"\n      >\n        <DialogTitle class=\"ink-dialog-title\">{{ SIGNATURE_LABELS.dialog }}</DialogTitle>\n        <SignatureForm\n          :fonts=\"props.fonts\"\n          :select=\"props.select\"\n          @saved=\"emit('save', $event)\"\n          @close=\"open = false\"\n        />\n      </DialogContent>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InkSignatureDialog.js","names":["_sfc_main","InkSignatureDialog_vue_vue_type_script_setup_true_lang_default","InkSignatureDialog_default"],"sources":["../../src/components/InkSignatureDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/*\n * \"Create signature\": a modal with Draw, Type and Image tabs. Draw is a pad with the draw\n * tool's renderer; Type sets a name in one of the host's handwriting fonts; Image takes a PNG\n * or JPEG scan. Save stores the template through InkRoot's signature store and, unless `select`\n * is false or no `signature` tool is registered, selects it for that tool. Escape, Cancel or a\n * press outside closes it.\n */\nimport { SIGNATURE_LABELS } from '@inkbar/core/dom'\nimport {\n  DialogContent,\n  DialogOverlay,\n  DialogPortal,\n  DialogRoot,\n  DialogTitle,\n} from 'reka-ui'\n\nimport SignatureForm from './SignatureForm.vue'\n\nimport type { SignatureTemplate } from '@inkbar/core'\n\nconst props = withDefaults(\n  defineProps<{\n    /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */\n    fonts?: readonly string[] | undefined\n    /**\n     * Whether saving selects the new signature for the `signature` tool, when one is\n     * registered. False leaves the tool alone, for a dialog that signs a field with it through\n     * `save`.\n     */\n    select?: boolean\n  }>(),\n  { fonts: undefined, select: true }\n)\nconst open = defineModel<boolean>('open', { default: false })\nconst emit = defineEmits<{\n  /** The new template, once saved (and selected, with `select`). */\n  save: [template: SignatureTemplate]\n  /** Reka's close auto-focus; prevent it to place focus yourself. */\n  closeAutoFocus: [event: Event]\n}>()\n\n// Reka's typed props stop at its own; ARIA goes through a bound object. No description: the\n// title says it all.\nconst contentAttrs = { 'aria-modal': 'true', 'aria-describedby': undefined }\n\nfunction onOpenAutoFocus(e: Event): void {\n  e.preventDefault()\n  ;(e.target as HTMLElement | null)\n    ?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]')\n    ?.focus({ preventScroll: true })\n}\n</script>\n\n<template>\n  <DialogRoot v-model:open=\"open\">\n    <DialogPortal>\n      <DialogOverlay class=\"ink-dialog-overlay\" data-ink-dialog-overlay />\n      <DialogContent\n        class=\"ink-dialog ink-signature-dialog\"\n        data-ink-signature-dialog\n        v-bind=\"contentAttrs\"\n        @open-auto-focus=\"onOpenAutoFocus\"\n        @close-auto-focus=\"emit('closeAutoFocus', $event)\"\n      >\n        <DialogTitle class=\"ink-dialog-title\">{{ SIGNATURE_LABELS.dialog }}</DialogTitle>\n        <SignatureForm\n          :fonts=\"props.fonts\"\n          :select=\"props.select\"\n          @saved=\"emit('save', $event)\"\n          @close=\"open = false\"\n        />\n      </DialogContent>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}

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

@@ -3,8 +3,9 @@ type __VLS_Props = {
     /** The fonts the Type tab offers. Default: InkRoot's `signatureFonts`. */
     fonts?: readonly string[] | undefined;
     /**
-     * Whether saving selects the new signature for the `signature` tool. False leaves the tool
-     * alone, for a dialog that signs a field with it through `save`.
+     * Whether saving selects the new signature for the `signature` tool, when one is
+     * registered. False leaves the tool alone, for a dialog that signs a field with it through
+     * `save`.
      */
     select?: boolean;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"InkSignatureDialog.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkSignatureDialog.vue"],"names":[],"mappings":"AA6FA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGrD,KAAK,WAAW,GAAG;IACf,0EAA0E;IAC1E,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AA4BJ,KAAK,gBAAgB,GAAG;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAOF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAoKxD,QAAA,MAAM,YAAY;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"InkSignatureDialog.vue.d.ts","sourceRoot":"","sources":["../../src/components/InkSignatureDialog.vue"],"names":[],"mappings":"AAgGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGrD,KAAK,WAAW,GAAG;IACf,0EAA0E;IAC1E,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AA4BJ,KAAK,gBAAgB,GAAG;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAOF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAoKxD,QAAA,MAAM,YAAY;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

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