@dou-ui/chart 0.0.0-stage → 0.1.0-alpha.1

package/dist/overlay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,207 @@
+import { DouSpinner, DouTooltip, useNamespace } from "dou-ui";
+import { Fragment, Transition, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, renderList, toDisplayString, unref, useId, withCtx } from "vue";
+// src/overlay.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-pressed",
+	"aria-describedby",
+	"onClick",
+	"onKeydown",
+	"onPointerdown",
+	"onPointerenter",
+	"onFocus"
+];
+var _hoisted_2 = ["id"];
+var HOLD = 500;
+var LEGEND_PAD = 4;
+var overlay_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouChartOverlay",
+	__name: "overlay",
+	props: { state: {} },
+	setup(__props) {
+		const ns = useNamespace("chart");
+		const { shown, labels, titles, legend, legendBox, hole, toggle, isolate, hint, focus, markers, data, dataShown, dataFocus, empty, loading } = __props.state;
+		const Center = () => __props.state.center();
+		const hintId = useId();
+		/** How long a finger stays on an entry to show only it, in ms. */
+		let holdTimer;
+		/** A hold just showed one entry alone: the click that ends it isn't a toggle. */
+		let held = false;
+		function holdLegend(index) {
+			letGo();
+			held = false;
+			holdTimer = setTimeout(() => {
+				holdTimer = void 0;
+				held = true;
+				isolate(index);
+			}, HOLD);
+		}
+		function letGo() {
+			if (holdTimer) clearTimeout(holdTimer);
+			holdTimer = void 0;
+		}
+		function onLegendClick(event, index) {
+			if (held) {
+				held = false;
+				return;
+			}
+			if (event.altKey) isolate(index);
+			else toggle(index);
+		}
+		function onLegendKey(event, index) {
+			if (!event.altKey || event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			isolate(index);
+		}
+		/** No callout menu over an entry while it is held down. */
+		function noMenu(event) {
+			if (holdTimer || held) event.preventDefault();
+		}
+		onBeforeUnmount(letGo);
+		/** Room around the legend's entries in its box, so a focus ring isn't cut off where it scrolls. */
+		const Empty = () => __props.state.emptyContent();
+		const focusVisible = (e) => e.target.matches(":focus-visible");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				unref(shown) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(ns).e("labels")),
+					"aria-hidden": "true"
+				}, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(labels), (tick) => {
+						return openBlock(), createElementBlock("span", {
+							key: tick.key,
+							class: normalizeClass([
+								unref(ns).e("tick"),
+								unref(ns).is(tick.axis),
+								unref(ns).is("clipped", !!tick.clipped)
+							]),
+							style: normalizeStyle({
+								transform: `translate(${tick.left}px, ${tick.top}px)`,
+								width: tick.clipped ? `${tick.width}px` : void 0
+							})
+						}, [createElementVNode("span", { class: normalizeClass(unref(ns).e("text")) }, toDisplayString(tick.text), 3)], 6);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(titles), (title) => {
+						return openBlock(), createElementBlock("span", {
+							key: title.key,
+							class: normalizeClass([unref(ns).e("title"), unref(ns).is("end", title.align === "end")]),
+							style: normalizeStyle({ transform: `translate(${title.left}px, ${title.top}px)` })
+						}, [createElementVNode("span", { class: normalizeClass(unref(ns).e("text")) }, toDisplayString(title.text), 3)], 6);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(markers), (marker) => {
+						return openBlock(), createElementBlock("span", {
+							key: marker.key,
+							class: normalizeClass([
+								unref(ns).e("marker"),
+								unref(ns).is(marker.tone),
+								unref(ns).is(marker.align),
+								unref(ns).is("backdrop", marker.backdrop)
+							]),
+							style: normalizeStyle({ transform: `translate(${marker.left}px, ${marker.top}px)` })
+						}, [createElementVNode("span", { class: normalizeClass(unref(ns).e("text")) }, toDisplayString(marker.text), 3)], 6);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(data), (label) => {
+						return openBlock(), createElementBlock("span", {
+							key: `data:${label.key}`,
+							class: normalizeClass([
+								unref(ns).e("value"),
+								unref(ns).is(label.align),
+								unref(ns).is("inside", !!label.on),
+								unref(ns).is("hidden", !unref(dataShown)),
+								unref(ns).is("faded", unref(dataFocus) !== null && unref(dataFocus) !== label.series),
+								unref(ns).is("clipped", label.width !== void 0)
+							]),
+							style: normalizeStyle({
+								transform: `translate(${label.left}px, ${label.top}px)`,
+								color: label.ink,
+								width: label.width === void 0 ? void 0 : `${label.width}px`
+							})
+						}, [createElementVNode("span", { class: normalizeClass(unref(ns).e("text")) }, toDisplayString(label.text), 3)], 6);
+					}), 128))
+				], 2)) : createCommentVNode("", true),
+				unref(shown) && unref(legend).length && unref(legendBox) ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass([unref(ns).e("legends"), unref(ns).is("scroll", unref(legendBox).scroll)]),
+					style: normalizeStyle({
+						left: `${unref(legendBox).x - LEGEND_PAD}px`,
+						top: `${unref(legendBox).y - LEGEND_PAD}px`,
+						width: `${unref(legendBox).width + 8}px`,
+						height: `${unref(legendBox).height + 8}px`
+					})
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(legend), (item) => {
+					return openBlock(), createBlock(unref(DouTooltip), {
+						key: `legend:${item.index}`,
+						content: item.text,
+						disabled: !item.clipped
+					}, {
+						default: withCtx(() => [createElementVNode("button", {
+							type: "button",
+							class: normalizeClass([
+								unref(ns).e("legend"),
+								unref(ns).is(item.kind),
+								unref(ns).is("dashed", item.dashed),
+								unref(ns).is("off", item.off),
+								unref(ns).is("locked", item.locked),
+								unref(ns).is("clipped", !!item.clipped)
+							]),
+							style: normalizeStyle({
+								transform: `translate(${item.left - unref(legendBox).x + LEGEND_PAD}px, ${item.top - unref(legendBox).y + LEGEND_PAD}px)`,
+								width: item.clipped ? `${item.width}px` : void 0
+							}),
+							"aria-pressed": !item.off,
+							"aria-describedby": unref(hintId),
+							"aria-keyshortcuts": "Alt+Enter",
+							onClick: (e) => onLegendClick(e, item.index),
+							onKeydown: (e) => onLegendKey(e, item.index),
+							onPointerdown: (e) => e.pointerType === "touch" && holdLegend(item.index),
+							onPointerup: letGo,
+							onPointercancel: letGo,
+							onContextmenu: noMenu,
+							onPointerenter: (e) => e.pointerType !== "touch" && !item.off && unref(focus)(item.index),
+							onPointerleave: _cache[0] || (_cache[0] = ($event) => (letGo(), unref(focus)(null))),
+							onFocus: (e) => focusVisible(e) && !item.off && unref(focus)(item.index),
+							onBlur: _cache[1] || (_cache[1] = ($event) => unref(focus)(null))
+						}, [createElementVNode("span", {
+							class: normalizeClass(unref(ns).e("swatch")),
+							style: normalizeStyle(item.scale ? {
+								width: `${item.swatch}px`,
+								background: `linear-gradient(to right, ${item.scale.join(", ")})`
+							} : item.pattern ? {
+								color: item.color,
+								backgroundImage: item.pattern.image,
+								backgroundSize: item.pattern.size
+							} : { color: item.color })
+						}, null, 6), createElementVNode("span", { class: normalizeClass(unref(ns).e("text")) }, toDisplayString(item.text), 3)], 46, _hoisted_1)]),
+						_: 2
+					}, 1032, ["content", "disabled"]);
+				}), 128)), createElementVNode("span", {
+					id: unref(hintId),
+					hidden: ""
+				}, toDisplayString(unref(hint)), 9, _hoisted_2)], 6)) : createCommentVNode("", true),
+				unref(hole) ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass([unref(ns).e("center"), unref(ns).is("above", !!unref(hole).above)]),
+					style: normalizeStyle({
+						left: `${unref(hole).left}px`,
+						top: `${unref(hole).top}px`,
+						width: `${unref(hole).width}px`
+					})
+				}, [createVNode(Center)], 6)) : createCommentVNode("", true),
+				unref(empty) ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: normalizeClass(unref(ns).e("empty"))
+				}, [createVNode(Empty)], 2)) : createCommentVNode("", true),
+				createVNode(Transition, { name: "dou-fade" }, {
+					default: withCtx(() => [unref(loading) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(ns).e("loading"))
+					}, [createVNode(unref(DouSpinner))], 2)) : createCommentVNode("", true)]),
+					_: 1
+				})
+			], 64);
+		};
+	}
+});
+export { overlay_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=overlay.vue_vue_type_script_setup_true_lang.js.map

package/dist/overlay.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_unref","_normalizeClass","_renderList","_normalizeStyle","_createElementVNode","_toDisplayString","_createCommentVNode","_createBlock","_withCtx","_createVNode","_Transition"],"sources":["../src/overlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DouSpinner, DouTooltip, useNamespace, type Tone } from 'dou-ui'\nimport { onBeforeUnmount, useId, type ComputedRef, type VNodeChild } from 'vue'\nimport type { TickLabel } from './core/layout'\nimport type { PlacedDataLabel } from './core/labels'\nimport type { LegendBox } from './core/layout'\nimport type { MarkerLabel } from './core/marker'\n\n/**\n * The text over the canvas: tick labels, titles, the legend and what goes\n * in a donut's hole. Kept apart from the chart, so laying it out again\n * doesn't render the chart's slot again: a part written with a new\n * function each render (`:format=\"(v) => …\"`) would otherwise be laid out\n * again and again.\n */\nexport interface OverlayState {\n  shown: ComputedRef<boolean>\n  labels: ComputedRef<Array<TickLabel & { key: string; axis: string }>>\n  titles: ComputedRef<\n    Array<{ key: string; text: string; left: number; top: number; align: 'start' | 'end' }>\n  >\n  legend: ComputedRef<\n    Array<{\n      index: number\n      text: string\n      left: number\n      top: number\n      color: string\n      kind: string\n      dashed: boolean\n      /** Turned off. */\n      off: boolean\n      /** The last one shown: it can't be turned off. */\n      locked: boolean\n      /** The room it takes, swatch and name, in px. */\n      width: number\n      /** Its name is cut short to the room down the side. */\n      clipped?: boolean\n      /** A heatmap's scale: its colors, least to most, in a swatch `swatch` px wide. */\n      scale?: string[]\n      swatch?: number\n      /** The pattern over its color, as a CSS background image and its size. */\n      pattern?: { image: string; size?: string }\n    }>\n  >\n  /** Where the legend shows; its entries scroll in it when they don't all fit. */\n  legendBox: ComputedRef<LegendBox | undefined>\n  /** Turns the series (or slice) at `index` on or off. */\n  toggle: (index: number) => void\n  /** Shows only the series (or slice) at `index`, or all again. */\n  isolate: (index: number) => void\n  /** How to show one entry alone, read out with each entry. */\n  hint: ComputedRef<string>\n  /** Brings the series at `index` forward while the pointer or focus is on its entry; `null` to stop. */\n  focus: (index: number | null) => void\n  /** Where the donut's hole is, if there is one to fill. */\n  hole: ComputedRef<{ left: number; top: number; width: number; above?: boolean } | null>\n  center: () => VNodeChild\n  /** The markers' labels. */\n  markers: ComputedRef<Array<MarkerLabel & { key: string; tone: Tone; backdrop: boolean }>>\n  /** Data labels: values by the points and on the bars; `ink` is their color, when not the default. */\n  data: ComputedRef<Array<PlacedDataLabel & { ink?: string; width?: number }>>\n  /** Whether the data labels show (not while the series come in). */\n  dataShown: ComputedRef<boolean>\n  /** The series brought forward: the other series' labels are faded too. */\n  dataFocus: ComputedRef<number | null>\n  /** No series has a value: the empty message shows. */\n  empty: ComputedRef<boolean>\n  emptyContent: () => VNodeChild\n  loading: ComputedRef<boolean>\n}\n\ndefineOptions({ name: 'DouChartOverlay' })\n\nconst { state } = defineProps<{ state: OverlayState }>()\nconst ns = useNamespace('chart')\nconst {\n  shown,\n  labels,\n  titles,\n  legend,\n  legendBox,\n  hole,\n  toggle,\n  isolate,\n  hint,\n  focus,\n  markers,\n  data,\n  dataShown,\n  dataFocus,\n  empty,\n  loading,\n} = state\nconst Center = () => state.center()\nconst hintId = useId()\n\n/* the legend: a click turns an entry on or off; with Alt, or held down on a touch screen, it shows only that one */\n\n/** How long a finger stays on an entry to show only it, in ms. */\nconst HOLD = 500\nlet holdTimer: ReturnType<typeof setTimeout> | undefined\n/** A hold just showed one entry alone: the click that ends it isn't a toggle. */\nlet held = false\n\nfunction holdLegend(index: number) {\n  letGo()\n  held = false\n  holdTimer = setTimeout(() => {\n    holdTimer = undefined\n    held = true\n    isolate(index)\n  }, HOLD)\n}\n\nfunction letGo() {\n  if (holdTimer) clearTimeout(holdTimer)\n  holdTimer = undefined\n}\n\nfunction onLegendClick(event: MouseEvent, index: number) {\n  if (held) {\n    held = false\n    return\n  }\n  if (event.altKey) isolate(index)\n  else toggle(index)\n}\n\nfunction onLegendKey(event: KeyboardEvent, index: number) {\n  if (!event.altKey || (event.key !== 'Enter' && event.key !== ' ')) return\n  event.preventDefault()\n  isolate(index)\n}\n/** No callout menu over an entry while it is held down. */\nfunction noMenu(event: Event) {\n  if (holdTimer || held) event.preventDefault()\n}\nonBeforeUnmount(letGo)\n/** Room around the legend's entries in its box, so a focus ring isn't cut off where it scrolls. */\nconst LEGEND_PAD = 4\nconst Empty = () => state.emptyContent()\n// a click focuses the entry too: only keyboard focus brings its series forward\nconst focusVisible = (e: FocusEvent) => (e.target as Element).matches(':focus-visible')\n</script>\n\n<template>\n  <div v-if=\"shown\" :class=\"ns.e('labels')\" aria-hidden=\"true\">\n    <span\n      v-for=\"tick in labels\"\n      :key=\"tick.key\"\n      :class=\"[ns.e('tick'), ns.is(tick.axis), ns.is('clipped', !!tick.clipped)]\"\n      :style=\"{\n        transform: `translate(${tick.left}px, ${tick.top}px)`,\n        width: tick.clipped ? `${tick.width}px` : undefined,\n      }\"\n      ><span :class=\"ns.e('text')\">{{ tick.text }}</span></span\n    >\n    <span\n      v-for=\"title in titles\"\n      :key=\"title.key\"\n      :class=\"[ns.e('title'), ns.is('end', title.align === 'end')]\"\n      :style=\"{ transform: `translate(${title.left}px, ${title.top}px)` }\"\n      ><span :class=\"ns.e('text')\">{{ title.text }}</span></span\n    >\n    <span\n      v-for=\"marker in markers\"\n      :key=\"marker.key\"\n      :class=\"[\n        ns.e('marker'),\n        ns.is(marker.tone),\n        ns.is(marker.align),\n        ns.is('backdrop', marker.backdrop),\n      ]\"\n      :style=\"{ transform: `translate(${marker.left}px, ${marker.top}px)` }\"\n      ><span :class=\"ns.e('text')\">{{ marker.text }}</span></span\n    >\n    <span\n      v-for=\"label in data\"\n      :key=\"`data:${label.key}`\"\n      :class=\"[\n        ns.e('value'),\n        ns.is(label.align),\n        ns.is('inside', !!label.on),\n        ns.is('hidden', !dataShown),\n        ns.is('faded', dataFocus !== null && dataFocus !== label.series),\n        ns.is('clipped', label.width !== undefined),\n      ]\"\n      :style=\"{\n        transform: `translate(${label.left}px, ${label.top}px)`,\n        color: label.ink,\n        width: label.width === undefined ? undefined : `${label.width}px`,\n      }\"\n      ><span :class=\"ns.e('text')\">{{ label.text }}</span></span\n    >\n  </div>\n  <div\n    v-if=\"shown && legend.length && legendBox\"\n    :class=\"[ns.e('legends'), ns.is('scroll', legendBox.scroll)]\"\n    :style=\"{\n      left: `${legendBox.x - LEGEND_PAD}px`,\n      top: `${legendBox.y - LEGEND_PAD}px`,\n      width: `${legendBox.width + LEGEND_PAD * 2}px`,\n      height: `${legendBox.height + LEGEND_PAD * 2}px`,\n    }\"\n  >\n    <!-- a name cut short shows in full on hover and focus; on a phone the legend goes where names aren't cut -->\n    <DouTooltip\n      v-for=\"item in legend\"\n      :key=\"`legend:${item.index}`\"\n      :content=\"item.text\"\n      :disabled=\"!item.clipped\"\n    >\n      <button\n        type=\"button\"\n        :class=\"[\n          ns.e('legend'),\n          ns.is(item.kind),\n          ns.is('dashed', item.dashed),\n          ns.is('off', item.off),\n          ns.is('locked', item.locked),\n          ns.is('clipped', !!item.clipped),\n        ]\"\n        :style=\"{\n          transform: `translate(${item.left - legendBox.x + LEGEND_PAD}px, ${item.top - legendBox.y + LEGEND_PAD}px)`,\n          width: item.clipped ? `${item.width}px` : undefined,\n        }\"\n        :aria-pressed=\"!item.off\"\n        :aria-describedby=\"hintId\"\n        aria-keyshortcuts=\"Alt+Enter\"\n        @click=\"(e) => onLegendClick(e, item.index)\"\n        @keydown=\"(e) => onLegendKey(e, item.index)\"\n        @pointerdown=\"(e) => e.pointerType === 'touch' && holdLegend(item.index)\"\n        @pointerup=\"letGo\"\n        @pointercancel=\"letGo\"\n        @contextmenu=\"noMenu\"\n        @pointerenter=\"(e) => e.pointerType !== 'touch' && !item.off && focus(item.index)\"\n        @pointerleave=\"(letGo(), focus(null))\"\n        @focus=\"(e) => focusVisible(e) && !item.off && focus(item.index)\"\n        @blur=\"focus(null)\"\n      >\n        <span\n          :class=\"ns.e('swatch')\"\n          :style=\"\n            item.scale\n              ? {\n                  width: `${item.swatch}px`,\n                  background: `linear-gradient(to right, ${item.scale.join(', ')})`,\n                }\n              : item.pattern\n                ? {\n                    color: item.color,\n                    backgroundImage: item.pattern.image,\n                    backgroundSize: item.pattern.size,\n                  }\n                : { color: item.color }\n          \"\n        /><span :class=\"ns.e('text')\">{{ item.text }}</span>\n      </button>\n    </DouTooltip>\n    <span :id=\"hintId\" hidden>{{ hint }}</span>\n  </div>\n  <div\n    v-if=\"hole\"\n    :class=\"[ns.e('center'), ns.is('above', !!hole.above)]\"\n    :style=\"{ left: `${hole.left}px`, top: `${hole.top}px`, width: `${hole.width}px` }\"\n  >\n    <Center />\n  </div>\n  <div v-if=\"empty\" :class=\"ns.e('empty')\"><Empty /></div>\n  <Transition name=\"dou-fade\">\n    <div v-if=\"loading\" :class=\"ns.e('loading')\"><DouSpinner /></div>\n  </Transition>\n</template>\n"],"mappings":"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"}

package/dist/pointer.js

@@ -0,0 +1,6 @@
+import pointer_vue_vue_type_script_setup_true_lang_default from "./pointer.vue_vue_type_script_setup_true_lang.js";
+// src/pointer.vue
+var pointer_default = pointer_vue_vue_type_script_setup_true_lang_default;
+export { pointer_default as default };
+
+//# sourceMappingURL=pointer.js.map

package/dist/pointer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer.js","names":["_sfc_main"],"sources":["../src/pointer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useNamespace } from 'dou-ui'\nimport { useTemplateRef, watchPostEffect, type ComputedRef, type Ref } from 'vue'\nimport type { Rect } from './core/painter'\nimport type { ChartTooltipItem, ChartTooltipSlots } from './types'\n\n/** What is shown for the point (or x) under the pointer. */\nexport interface Tip {\n  title?: string\n  items: ChartTooltipItem[]\n  /** One of the items' series is under the pointer: the others are muted. */\n  focused?: boolean\n  /** Where the tooltip points from, in px from the chart's top left. */\n  anchor: [number, number]\n  /** A hairline across the plot at the x. */\n  line?: Rect\n  /** A shaded band over the x's room, for bars. */\n  band?: Rect\n  /** A ring around a heatmap's cell. */\n  cell?: Rect\n  /** Rings and dots on the points. */\n  marks: Array<{\n    left: number\n    top: number\n    color: string\n    radius: number\n    ring: boolean\n    /** Its series is faded: another one is under the pointer. */\n    faded?: boolean\n  }>\n  /** Above the anchor rather than below, out from under a finger. */\n  above?: boolean\n  /** A place to keep clear of (the x under a finger): the tooltip goes beside it. */\n  clear?: Rect\n  /** A line under the values (slices left out of a pie). */\n  note?: string\n  /** The x as given, for `select`. */\n  x?: unknown\n}\n\nexport interface PointerState {\n  tip: ComputedRef<Tip | null>\n  /** The chart's size, to keep the tooltip inside it. */\n  size: ComputedRef<{ width: number; height: number } | null>\n  content: Ref<ChartTooltipSlots['default'] | undefined>\n  /** Read out as the keys move. */\n  live: ComputedRef<string>\n}\n\ndefineOptions({ name: 'DouChartPointer' })\n\nconst { state } = defineProps<{ state: PointerState }>()\nconst ns = useNamespace('chart')\nconst { tip, live } = state\nconst box = useTemplateRef<HTMLElement>('box')\n\n/** Room between the tooltip and what it points at, and the chart's edges. */\nconst GAP = 12\nconst EDGE = 4\n\n// placed after it renders, when its size is known: beside the anchor, on whichever side has room\nwatchPostEffect(() => {\n  const el = box.value\n  const t = tip.value\n  const size = state.size.value\n  if (!el || !t || !size) return\n  const width = el.offsetWidth\n  const height = el.offsetHeight\n  const c = t.clear\n  if (c) {\n    const fits = (at: number, span: number, room: number) => at >= EDGE && at + span <= room - EDGE\n    if (c.width < c.height) {\n      // a column: to its right, or its left, at the top of the plot\n      const right = c.x + c.width + GAP\n      const left = c.x - GAP - width\n      if (fits(right, width, size.width) || fits(left, width, size.width)) {\n        const x = fits(right, width, size.width) ? right : left\n        el.style.transform = `translate(${Math.round(x)}px, ${Math.round(Math.max(EDGE, c.y))}px)`\n        return\n      }\n    } else {\n      // a row: below it, or above it, at the start of the plot\n      const below = c.y + c.height + GAP\n      const above = c.y - GAP - height\n      if (fits(below, height, size.height) || fits(above, height, size.height)) {\n        const y = fits(below, height, size.height) ? below : above\n        const x = Math.min(Math.max(EDGE, c.x), size.width - EDGE - width)\n        el.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`\n        return\n      }\n    }\n  }\n  const [x, y] = t.anchor\n  let left = x + GAP\n  if (left + width > size.width - EDGE) left = x - GAP - width\n  left = Math.max(EDGE, Math.min(left, size.width - EDGE - width))\n  let top = t.above ? y - GAP - height : y + GAP\n  if (t.above ? top < EDGE : top + height > size.height - EDGE)\n    top = t.above ? y + GAP : y - GAP - height\n  top = Math.max(EDGE, Math.min(top, size.height - EDGE - height))\n  el.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`\n})\n\nconst px = (r: Rect) => ({\n  transform: `translate(${r.x}px, ${r.y}px)`,\n  width: `${r.width}px`,\n  height: `${r.height}px`,\n})\n</script>\n\n<template>\n  <div :class=\"ns.e('live')\" aria-live=\"polite\">{{ live }}</div>\n  <div v-if=\"tip\" :class=\"ns.e('pointer')\" aria-hidden=\"true\">\n    <div v-if=\"tip.band\" :class=\"ns.e('band')\" :style=\"px(tip.band)\" />\n    <div v-if=\"tip.cell\" :class=\"ns.e('cell')\" :style=\"px(tip.cell)\" />\n    <div v-if=\"tip.line\" :class=\"ns.e('crosshair')\" :style=\"px(tip.line)\" />\n    <span\n      v-for=\"(mark, i) in tip.marks\"\n      :key=\"i\"\n      :class=\"[ns.e('mark'), ns.is('ring', mark.ring), ns.is('faded', !!mark.faded)]\"\n      :style=\"{\n        transform: `translate(${mark.left - mark.radius}px, ${mark.top - mark.radius}px)`,\n        width: `${mark.radius * 2}px`,\n        height: `${mark.radius * 2}px`,\n        color: mark.color,\n      }\"\n    />\n    <div ref=\"box\" :class=\"ns.e('tooltip')\">\n      <component\n        :is=\"() => state.content.value!({ title: tip!.title, items: tip!.items, note: tip!.note })\"\n        v-if=\"state.content.value\"\n      />\n      <template v-else>\n        <div v-if=\"tip.title\" :class=\"ns.e('tooltip-title')\">\n          <span :class=\"ns.e('text')\">{{ tip.title }}</span>\n        </div>\n        <div\n          v-for=\"(item, i) in tip.items\"\n          :key=\"i\"\n          :class=\"[ns.e('tooltip-item'), ns.is('muted', tip.focused && !item.active)]\"\n        >\n          <span v-if=\"item.color\" :class=\"ns.e('tooltip-swatch')\" :style=\"{ color: item.color }\" />\n          <span :class=\"[ns.e('tooltip-name'), ns.e('text')]\">{{ item.name }}</span>\n          <span :class=\"[ns.e('tooltip-value'), ns.e('text')]\">{{ item.text }}</span>\n        </div>\n        <div v-if=\"tip.note\" :class=\"ns.e('tooltip-note')\">{{ tip.note }}</div>\n      </template>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/pointer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,136 @@
+import { useNamespace } from "dou-ui";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, watchPostEffect } from "vue";
+// src/pointer.vue?vue&type=script&setup=true&lang.ts
+var GAP = 12;
+var EDGE = 4;
+var pointer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouChartPointer",
+	__name: "pointer",
+	props: { state: {} },
+	setup(__props) {
+		const ns = useNamespace("chart");
+		const { tip, live } = __props.state;
+		const box = useTemplateRef("box");
+		/** Room between the tooltip and what it points at, and the chart's edges. */
+		watchPostEffect(() => {
+			const el = box.value;
+			const t = tip.value;
+			const size = __props.state.size.value;
+			if (!el || !t || !size) return;
+			const width = el.offsetWidth;
+			const height = el.offsetHeight;
+			const c = t.clear;
+			if (c) {
+				const fits = (at, span, room) => at >= EDGE && at + span <= room - EDGE;
+				if (c.width < c.height) {
+					const right = c.x + c.width + GAP;
+					const left = c.x - GAP - width;
+					if (fits(right, width, size.width) || fits(left, width, size.width)) {
+						const x = fits(right, width, size.width) ? right : left;
+						el.style.transform = `translate(${Math.round(x)}px, ${Math.round(Math.max(EDGE, c.y))}px)`;
+						return;
+					}
+				} else {
+					const below = c.y + c.height + GAP;
+					const above = c.y - GAP - height;
+					if (fits(below, height, size.height) || fits(above, height, size.height)) {
+						const y = fits(below, height, size.height) ? below : above;
+						const x = Math.min(Math.max(EDGE, c.x), size.width - EDGE - width);
+						el.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+						return;
+					}
+				}
+			}
+			const [x, y] = t.anchor;
+			let left = x + GAP;
+			if (left + width > size.width - EDGE) left = x - GAP - width;
+			left = Math.max(EDGE, Math.min(left, size.width - EDGE - width));
+			let top = t.above ? y - GAP - height : y + GAP;
+			if (t.above ? top < EDGE : top + height > size.height - EDGE) top = t.above ? y + GAP : y - GAP - height;
+			top = Math.max(EDGE, Math.min(top, size.height - EDGE - height));
+			el.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+		});
+		const px = (r) => ({
+			transform: `translate(${r.x}px, ${r.y}px)`,
+			width: `${r.width}px`,
+			height: `${r.height}px`
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", {
+				class: normalizeClass(unref(ns).e("live")),
+				"aria-live": "polite"
+			}, toDisplayString(unref(live)), 3), unref(tip) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(ns).e("pointer")),
+				"aria-hidden": "true"
+			}, [
+				unref(tip).band ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(ns).e("band")),
+					style: normalizeStyle(px(unref(tip).band))
+				}, null, 6)) : createCommentVNode("", true),
+				unref(tip).cell ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(ns).e("cell")),
+					style: normalizeStyle(px(unref(tip).cell))
+				}, null, 6)) : createCommentVNode("", true),
+				unref(tip).line ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(unref(ns).e("crosshair")),
+					style: normalizeStyle(px(unref(tip).line))
+				}, null, 6)) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(unref(tip).marks, (mark, i) => {
+					return openBlock(), createElementBlock("span", {
+						key: i,
+						class: normalizeClass([
+							unref(ns).e("mark"),
+							unref(ns).is("ring", mark.ring),
+							unref(ns).is("faded", !!mark.faded)
+						]),
+						style: normalizeStyle({
+							transform: `translate(${mark.left - mark.radius}px, ${mark.top - mark.radius}px)`,
+							width: `${mark.radius * 2}px`,
+							height: `${mark.radius * 2}px`,
+							color: mark.color
+						})
+					}, null, 6);
+				}), 128)),
+				createElementVNode("div", {
+					ref_key: "box",
+					ref: box,
+					class: normalizeClass(unref(ns).e("tooltip"))
+				}, [__props.state.content.value ? (openBlock(), createBlock(resolveDynamicComponent(() => __props.state.content.value({
+					title: unref(tip).title,
+					items: unref(tip).items,
+					note: unref(tip).note
+				})), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+					unref(tip).title ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(ns).e("tooltip-title"))
+					}, [createElementVNode("span", { class: normalizeClass(unref(ns).e("text")) }, toDisplayString(unref(tip).title), 3)], 2)) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(tip).items, (item, i) => {
+						return openBlock(), createElementBlock("div", {
+							key: i,
+							class: normalizeClass([unref(ns).e("tooltip-item"), unref(ns).is("muted", unref(tip).focused && !item.active)])
+						}, [
+							item.color ? (openBlock(), createElementBlock("span", {
+								key: 0,
+								class: normalizeClass(unref(ns).e("tooltip-swatch")),
+								style: normalizeStyle({ color: item.color })
+							}, null, 6)) : createCommentVNode("", true),
+							createElementVNode("span", { class: normalizeClass([unref(ns).e("tooltip-name"), unref(ns).e("text")]) }, toDisplayString(item.name), 3),
+							createElementVNode("span", { class: normalizeClass([unref(ns).e("tooltip-value"), unref(ns).e("text")]) }, toDisplayString(item.text), 3)
+						], 2);
+					}), 128)),
+					unref(tip).note ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(ns).e("tooltip-note"))
+					}, toDisplayString(unref(tip).note), 3)) : createCommentVNode("", true)
+				], 64))], 2)
+			], 2)) : createCommentVNode("", true)], 64);
+		};
+	}
+});
+export { pointer_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=pointer.vue_vue_type_script_setup_true_lang.js.map

package/dist/pointer.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_Fragment","_createElementVNode","_normalizeClass","_unref","_toDisplayString","_normalizeStyle","_createCommentVNode","_renderList","_createBlock","_resolveDynamicComponent"],"sources":["../src/pointer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useNamespace } from 'dou-ui'\nimport { useTemplateRef, watchPostEffect, type ComputedRef, type Ref } from 'vue'\nimport type { Rect } from './core/painter'\nimport type { ChartTooltipItem, ChartTooltipSlots } from './types'\n\n/** What is shown for the point (or x) under the pointer. */\nexport interface Tip {\n  title?: string\n  items: ChartTooltipItem[]\n  /** One of the items' series is under the pointer: the others are muted. */\n  focused?: boolean\n  /** Where the tooltip points from, in px from the chart's top left. */\n  anchor: [number, number]\n  /** A hairline across the plot at the x. */\n  line?: Rect\n  /** A shaded band over the x's room, for bars. */\n  band?: Rect\n  /** A ring around a heatmap's cell. */\n  cell?: Rect\n  /** Rings and dots on the points. */\n  marks: Array<{\n    left: number\n    top: number\n    color: string\n    radius: number\n    ring: boolean\n    /** Its series is faded: another one is under the pointer. */\n    faded?: boolean\n  }>\n  /** Above the anchor rather than below, out from under a finger. */\n  above?: boolean\n  /** A place to keep clear of (the x under a finger): the tooltip goes beside it. */\n  clear?: Rect\n  /** A line under the values (slices left out of a pie). */\n  note?: string\n  /** The x as given, for `select`. */\n  x?: unknown\n}\n\nexport interface PointerState {\n  tip: ComputedRef<Tip | null>\n  /** The chart's size, to keep the tooltip inside it. */\n  size: ComputedRef<{ width: number; height: number } | null>\n  content: Ref<ChartTooltipSlots['default'] | undefined>\n  /** Read out as the keys move. */\n  live: ComputedRef<string>\n}\n\ndefineOptions({ name: 'DouChartPointer' })\n\nconst { state } = defineProps<{ state: PointerState }>()\nconst ns = useNamespace('chart')\nconst { tip, live } = state\nconst box = useTemplateRef<HTMLElement>('box')\n\n/** Room between the tooltip and what it points at, and the chart's edges. */\nconst GAP = 12\nconst EDGE = 4\n\n// placed after it renders, when its size is known: beside the anchor, on whichever side has room\nwatchPostEffect(() => {\n  const el = box.value\n  const t = tip.value\n  const size = state.size.value\n  if (!el || !t || !size) return\n  const width = el.offsetWidth\n  const height = el.offsetHeight\n  const c = t.clear\n  if (c) {\n    const fits = (at: number, span: number, room: number) => at >= EDGE && at + span <= room - EDGE\n    if (c.width < c.height) {\n      // a column: to its right, or its left, at the top of the plot\n      const right = c.x + c.width + GAP\n      const left = c.x - GAP - width\n      if (fits(right, width, size.width) || fits(left, width, size.width)) {\n        const x = fits(right, width, size.width) ? right : left\n        el.style.transform = `translate(${Math.round(x)}px, ${Math.round(Math.max(EDGE, c.y))}px)`\n        return\n      }\n    } else {\n      // a row: below it, or above it, at the start of the plot\n      const below = c.y + c.height + GAP\n      const above = c.y - GAP - height\n      if (fits(below, height, size.height) || fits(above, height, size.height)) {\n        const y = fits(below, height, size.height) ? below : above\n        const x = Math.min(Math.max(EDGE, c.x), size.width - EDGE - width)\n        el.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`\n        return\n      }\n    }\n  }\n  const [x, y] = t.anchor\n  let left = x + GAP\n  if (left + width > size.width - EDGE) left = x - GAP - width\n  left = Math.max(EDGE, Math.min(left, size.width - EDGE - width))\n  let top = t.above ? y - GAP - height : y + GAP\n  if (t.above ? top < EDGE : top + height > size.height - EDGE)\n    top = t.above ? y + GAP : y - GAP - height\n  top = Math.max(EDGE, Math.min(top, size.height - EDGE - height))\n  el.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`\n})\n\nconst px = (r: Rect) => ({\n  transform: `translate(${r.x}px, ${r.y}px)`,\n  width: `${r.width}px`,\n  height: `${r.height}px`,\n})\n</script>\n\n<template>\n  <div :class=\"ns.e('live')\" aria-live=\"polite\">{{ live }}</div>\n  <div v-if=\"tip\" :class=\"ns.e('pointer')\" aria-hidden=\"true\">\n    <div v-if=\"tip.band\" :class=\"ns.e('band')\" :style=\"px(tip.band)\" />\n    <div v-if=\"tip.cell\" :class=\"ns.e('cell')\" :style=\"px(tip.cell)\" />\n    <div v-if=\"tip.line\" :class=\"ns.e('crosshair')\" :style=\"px(tip.line)\" />\n    <span\n      v-for=\"(mark, i) in tip.marks\"\n      :key=\"i\"\n      :class=\"[ns.e('mark'), ns.is('ring', mark.ring), ns.is('faded', !!mark.faded)]\"\n      :style=\"{\n        transform: `translate(${mark.left - mark.radius}px, ${mark.top - mark.radius}px)`,\n        width: `${mark.radius * 2}px`,\n        height: `${mark.radius * 2}px`,\n        color: mark.color,\n      }\"\n    />\n    <div ref=\"box\" :class=\"ns.e('tooltip')\">\n      <component\n        :is=\"() => state.content.value!({ title: tip!.title, items: tip!.items, note: tip!.note })\"\n        v-if=\"state.content.value\"\n      />\n      <template v-else>\n        <div v-if=\"tip.title\" :class=\"ns.e('tooltip-title')\">\n          <span :class=\"ns.e('text')\">{{ tip.title }}</span>\n        </div>\n        <div\n          v-for=\"(item, i) in tip.items\"\n          :key=\"i\"\n          :class=\"[ns.e('tooltip-item'), ns.is('muted', tip.focused && !item.active)]\"\n        >\n          <span v-if=\"item.color\" :class=\"ns.e('tooltip-swatch')\" :style=\"{ color: item.color }\" />\n          <span :class=\"[ns.e('tooltip-name'), ns.e('text')]\">{{ item.name }}</span>\n          <span :class=\"[ns.e('tooltip-value'), ns.e('text')]\">{{ item.text }}</span>\n        </div>\n        <div v-if=\"tip.note\" :class=\"ns.e('tooltip-note')\">{{ tip.note }}</div>\n      </template>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/static.js

@@ -0,0 +1,6 @@
+import static_vue_vue_type_script_setup_true_lang_default from "./static.vue_vue_type_script_setup_true_lang.js";
+// src/static.vue
+var static_default = static_vue_vue_type_script_setup_true_lang_default;
+export { static_default as default };
+
+//# sourceMappingURL=static.js.map

package/dist/static.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static.js","names":["_sfc_main"],"sources":["../src/static.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useNamespace } from 'dou-ui'\nimport { computed, getCurrentInstance, type ComputedRef } from 'vue'\n\n/**\n * The chart drawn on the server, as an SVG filling the chart's box. Its own\n * component, after the chart's parts: on the server those are known only\n * once the chart's slot has rendered. In the browser it keeps the\n * server's drawing until the canvas has drawn.\n */\nexport interface StaticState {\n  shown: ComputedRef<boolean>\n  size: ComputedRef<{ width: number; height: number }>\n  /** The drawing; empty in the browser, which takes the server's. */\n  markup: ComputedRef<string>\n  /** What the chart shows, read out. */\n  label: ComputedRef<string>\n}\n\ndefineOptions({ name: 'DouChartStatic' })\n\nconst { state } = defineProps<{ state: StaticState }>()\nconst ns = useNamespace('chart')\nconst { shown, size, label } = state\n// taking over the server's page: its drawing, as the browser doesn't draw one\nconst taken = getCurrentInstance()?.vnode.el\nconst kept =\n  typeof Element !== 'undefined' && taken instanceof Element && taken.matches(`.${ns.e('static')}`)\n    ? taken.innerHTML\n    : ''\nconst markup = computed(() => state.markup.value || kept)\n</script>\n\n<template>\n  <svg\n    v-if=\"shown\"\n    :class=\"ns.e('static')\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    :viewBox=\"`0 0 ${size.width} ${size.height}`\"\n    role=\"img\"\n    :aria-label=\"label\"\n    v-html=\"markup\"\n  />\n</template>\n"],"mappings":""}

package/dist/static.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,34 @@
+import { useNamespace } from "dou-ui";
+import { computed, createCommentVNode, createElementBlock, defineComponent, getCurrentInstance, normalizeClass, openBlock, unref } from "vue";
+// src/static.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"viewBox",
+	"aria-label",
+	"innerHTML"
+];
+var static_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouChartStatic",
+	__name: "static",
+	props: { state: {} },
+	setup(__props) {
+		const ns = useNamespace("chart");
+		const { shown, size, label } = __props.state;
+		const taken = getCurrentInstance()?.vnode.el;
+		const kept = typeof Element !== "undefined" && taken instanceof Element && taken.matches(`.${ns.e("static")}`) ? taken.innerHTML : "";
+		const markup = computed(() => __props.state.markup.value || kept);
+		return (_ctx, _cache) => {
+			return unref(shown) ? (openBlock(), createElementBlock("svg", {
+				key: 0,
+				class: normalizeClass(unref(ns).e("static")),
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: `0 0 ${unref(size).width} ${unref(size).height}`,
+				role: "img",
+				"aria-label": unref(label),
+				innerHTML: markup.value
+			}, null, 10, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+export { static_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=static.vue_vue_type_script_setup_true_lang.js.map

package/dist/static.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode"],"sources":["../src/static.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useNamespace } from 'dou-ui'\nimport { computed, getCurrentInstance, type ComputedRef } from 'vue'\n\n/**\n * The chart drawn on the server, as an SVG filling the chart's box. Its own\n * component, after the chart's parts: on the server those are known only\n * once the chart's slot has rendered. In the browser it keeps the\n * server's drawing until the canvas has drawn.\n */\nexport interface StaticState {\n  shown: ComputedRef<boolean>\n  size: ComputedRef<{ width: number; height: number }>\n  /** The drawing; empty in the browser, which takes the server's. */\n  markup: ComputedRef<string>\n  /** What the chart shows, read out. */\n  label: ComputedRef<string>\n}\n\ndefineOptions({ name: 'DouChartStatic' })\n\nconst { state } = defineProps<{ state: StaticState }>()\nconst ns = useNamespace('chart')\nconst { shown, size, label } = state\n// taking over the server's page: its drawing, as the browser doesn't draw one\nconst taken = getCurrentInstance()?.vnode.el\nconst kept =\n  typeof Element !== 'undefined' && taken instanceof Element && taken.matches(`.${ns.e('static')}`)\n    ? taken.innerHTML\n    : ''\nconst markup = computed(() => state.markup.value || kept)\n</script>\n\n<template>\n  <svg\n    v-if=\"shown\"\n    :class=\"ns.e('static')\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    :viewBox=\"`0 0 ${size.width} ${size.height}`\"\n    role=\"img\"\n    :aria-label=\"label\"\n    v-html=\"markup\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;EAsBA,MAAM,KAAK,aAAa,OAAO;EAC/B,MAAM,EAAE,OAAO,MAAM,UAAU,QAAA;EAE/B,MAAM,QAAQ,mBAAmB,CAAC,EAAE,MAAM;EAC1C,MAAM,OACJ,OAAO,YAAY,eAAe,iBAAiB,WAAW,MAAM,QAAQ,IAAI,GAAG,EAAE,QAAQ,GAAG,IAC5F,MAAM,YACN;EACN,MAAM,SAAS,eAAe,QAAA,MAAM,OAAO,SAAS,IAAI;;GAK9C,OAAAA,MAAA,KAAA,KADRC,UAAA,GAAAC,mBAQE,OAAA;;IANC,OAAKC,eAAEH,MAAA,EAAA,CAAE,CAAC,EAAC,QAAA,CAAA;IACZ,OAAM;IACL,SAAO,OAASA,MAAA,IAAA,CAAI,CAAC,MAAK,GAAIA,MAAA,IAAA,CAAI,CAAC;IACpC,MAAK;IACJ,cAAYA,MAAA,KAAA;IACb,WAAQ,OAAA"}

package/dist/style.css

@@ -0,0 +1 @@
+@layer dou.components{.dou-chart{--dou-chart-surface:var(--dou-color-bg-surface);--dou-chart-grid:var(--dou-color-border-subtle);--dou-chart-baseline:var(--dou-color-border-strong);--dou-chart-label:var(--dou-color-text-tertiary);--dou-chart-title:var(--dou-color-text-secondary);--dou-chart-range-ink:var(--dou-color-text-tertiary);--dou-chart-marker:color-mix(in oklab,var(--dou-color-text)45%,transparent);--dou-chart-track:color-mix(in oklab,var(--dou-color-text)10%,transparent);position:relative;box-sizing:border-box;overflow:hidden;color:var(--dou-color-text);font-family:var(--dou-font-family);font-variant-numeric:tabular-nums;width:100%;min-width:0;font-size:12px;line-height:16px}.dou-chart__canvas{position:absolute;display:block;top:0;left:0}.dou-chart__static{position:absolute;display:block;width:100%;height:100%;font-size:12px;inset:0}.dou-chart__canvas,.dou-chart__static,.dou-chart__labels,.dou-chart__legends{transition:opacity var(--dou-motion-duration-fast)var(--dou-motion-easing)}.dou-chart.is-loading>:is(.dou-chart__canvas,.dou-chart__static,.dou-chart__labels,.dou-chart__legends){opacity:.4}.dou-chart__loading{position:absolute;display:flex;color:var(--dou-color-text-secondary);justify-content:center;align-items: center;inset:0}.dou-chart__labels{position:absolute;pointer-events:none;inset:0}.dou-chart__tick,.dou-chart__title{position:absolute;display:flex;white-space:nowrap;align-items: center;height:16px}.dou-chart__text{text-box:trim-both cap alphabetic}.dou-chart__tick{color:var(--dou-chart-label);will-change:transform;top:0;left:0}.dou-chart__tick.is-value{color:var(--dou-color-text-secondary);font-variant-numeric:tabular-nums}.dou-chart__tick.is-rate{font-variant-numeric:tabular-nums}.dou-chart__tick.is-clipped{pointer-events:auto}.dou-chart__tick.is-clipped>.dou-chart__text{overflow:hidden;text-overflow:ellipsis;text-box:normal;min-width:0;line-height:16px}.dou-chart__value{position:absolute;display:flex;color:var(--dou-color-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;transition:opacity var(--dou-motion-duration-fast)var(--dou-motion-easing);align-items: center;height:16px;top:0;left:0}.dou-chart__value.is-middle{translate:-50%}.dou-chart__value.is-end{translate:-100%}.dou-chart__value.is-inside{font-weight:var(--dou-font-weight-medium)}.dou-chart__value.is-faded{opacity:.24}.dou-chart__value.is-clipped{pointer-events:auto}.dou-chart__value.is-clipped>.dou-chart__text{overflow:hidden;text-overflow:ellipsis;text-box:normal;min-width:0;line-height:16px}.dou-chart__value.is-hidden{opacity:0;transition:none}.dou-chart__marker{position:absolute;display:flex;color:var(--dou-color-text-secondary);white-space:nowrap;align-items: center;height:16px;top:0;left:0}.dou-chart__marker.is-middle{translate:-50%}.dou-chart__marker.is-end{translate:-100%}.dou-chart__marker.is-backdrop{background-color:color-mix(in oklab,currentColor 10%,var(--dou-chart-surface));border-radius:4px;padding-inline-start:4px;padding-inline-end:4px}.dou-chart__marker.is-backdrop.is-start{margin-left:-4px}.dou-chart__marker.is-backdrop.is-end{margin-left:4px}.dou-chart__marker.is-primary{color:var(--dou-color-primary-text)}.dou-chart__marker.is-success{color:var(--dou-color-success-text)}.dou-chart__marker.is-warning{color:var(--dou-color-warning-text)}.dou-chart__marker.is-danger{color:var(--dou-color-danger-text)}.dou-chart__measure{visibility:hidden;contain:layout style}.dou-chart__title,.dou-chart__legend{top:0;left:0}.dou-chart.is-interactive:focus-visible{outline:2px solid var(--dou-color-focus);outline-offset:2px;border-radius:var(--dou-radius-control)}.dou-chart__legends{position:absolute;pointer-events:none}.dou-chart__legends.is-scroll{overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;scrollbar-width:thin}.dou-chart__title{color:var(--dou-chart-title);font-weight:var(--dou-font-weight-medium)}.dou-chart__title.is-end{translate:-100%}.dou-chart__legend{position:absolute;display:flex;color:var(--dou-color-text-secondary);font:inherit;white-space:nowrap;cursor:pointer;pointer-events:auto;transition:color var(--dou-motion-duration-fast)var(--dou-motion-easing);-webkit-touch-callout:none;user-select:none;background:0 0;border:0;border-radius:2px;align-items: center;gap:6px;height:16px;padding:0}.dou-chart__legend:before{position:absolute;content:"";inset:-6px -4px}@media (pointer:coarse){.dou-chart__legend:before{inset:-12px -4px}}.dou-chart__legend:hover{color:var(--dou-color-text)}.dou-chart__legend:focus-visible{outline:2px solid var(--dou-color-focus);outline-offset:2px}.dou-chart__legend.is-clipped>.dou-chart__text{overflow:hidden;text-overflow:ellipsis;text-box:normal;min-width:0;line-height:16px}.dou-chart__legend.is-locked{cursor:default}.dou-chart__legend.is-locked:hover{color:var(--dou-color-text-secondary)}.dou-chart__legend.is-off{color:var(--dou-color-text-disabled)}.dou-chart__legend.is-off>.dou-chart__swatch{opacity:.32}.dou-chart__swatch{background-color:currentColor;border-radius:1px;flex-shrink:0;width:12px;height:2px}.is-area>.dou-chart__swatch{border-radius:2px;height:8px}.is-radar>.dou-chart__swatch{border-radius:2px;height:8px}.is-bar>.dou-chart__swatch{border-radius:2px;width:8px;height:8px;margin-inline-start:2px;margin-inline-end:2px}.is-pie>.dou-chart__swatch{border-radius:2px;width:8px;height:8px;margin-inline-start:2px;margin-inline-end:2px}.is-box>.dou-chart__swatch{box-sizing:border-box;background-color:color-mix(in srgb,currentColor 16%,transparent);border:1px solid;border-radius:1px;width:8px;height:10px;margin-inline-start:2px;margin-inline-end:2px}.is-scatter>.dou-chart__swatch{border-radius:50%;width:8px;height:8px;margin-inline-start:2px;margin-inline-end:2px}.is-heatmap>.dou-chart__swatch{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--dou-color-text)8%,transparent);border-radius:2px;height:8px}.is-dashed>.dou-chart__swatch{background:repeating-linear-gradient(90deg,currentColor 0 4px,#0000 4px 7px)}.dou-chart__center{position:absolute;display:flex;text-align:center;flex-direction:column;justify-content:center;align-items: center;translate:-50% -50%}.dou-chart__center.is-above{translate:-50% calc(-100% - 4px)}.dou-chart__gauge-value{color:var(--dou-color-text);font-size:var(--dou-chart-gauge-value-size,28px);font-weight:var(--dou-font-weight-bold);font-variant-numeric:tabular-nums;line-height:1.3}.dou-chart__gauge-name{color:var(--dou-color-text-tertiary);font-size:var(--dou-font-size-sm);line-height:20px}.dou-chart__empty{position:absolute;display:flex;color:var(--dou-color-text-tertiary);font-size:var(--dou-font-size-sm);justify-content:center;align-items: center;inset:0}.dou-chart.is-table>:not(:-webkit-any(.dou-chart__table,.dou-chart__parts)){visibility:hidden}.dou-chart.is-table>:not(:-moz-any(.dou-chart__table,.dou-chart__parts)){visibility:hidden}.dou-chart.is-table>:not(:is(.dou-chart__table,.dou-chart__parts)){visibility:hidden}.dou-chart__table{position:absolute;overflow:auto;border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-container);background-color:var(--dou-chart-surface);color:var(--dou-color-text);font-size:var(--dou-font-size-sm);overscroll-behavior:contain;line-height:1.5;inset:0}.dou-chart__table:focus-visible{outline:2px solid var(--dou-color-focus);outline-offset:2px}.dou-chart__table table{border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;width:100%}.dou-chart__table caption{position:absolute;overflow:hidden;clip-path:inset(50%);white-space:nowrap;width:1px;height:1px}.dou-chart__table th{box-sizing:border-box;border-bottom:1px solid var(--dou-color-border-subtle);text-align:end;white-space:nowrap;height:36px;padding:6px 10px}.dou-chart__table td{box-sizing:border-box;border-bottom:1px solid var(--dou-color-border-subtle);text-align:end;white-space:nowrap;height:36px;padding:6px 10px}.dou-chart__table th[scope=row]{text-align:start}.dou-chart__table thead th:first-child{text-align:start}.dou-chart__table th[scope=row]{font-weight:var(--dou-font-weight-regular)}.dou-chart__table thead th{position:sticky;z-index:1;border-bottom-color:var(--dou-color-border);background-color:color-mix(in oklab,var(--dou-color-text)2.5%,var(--dou-chart-surface));color:var(--dou-color-text-secondary);font-weight:var(--dou-font-weight-medium);height:32px;top:0}.dou-chart__table tbody tr:last-child>*{border-bottom:0}.dou-chart__table-more{border-top:1px solid var(--dou-color-border-subtle);color:var(--dou-color-text-tertiary);margin:0;padding:8px 10px}.dou-chart__pointer{position:absolute;pointer-events:none;inset:0}.dou-chart__crosshair,.dou-chart__band,.dou-chart__cell,.dou-chart__mark,.dou-chart__tooltip{position:absolute;top:0;left:0}.dou-chart__crosshair{background-color:var(--dou-chart-baseline)}.dou-chart__band{background-color:color-mix(in oklab,var(--dou-color-text)5%,transparent)}.dou-chart__cell{box-sizing:border-box;border:2px solid var(--dou-color-text);box-shadow:inset 0 0 0 1px var(--dou-chart-surface);border-radius:4px}.dou-chart__mark{box-sizing:border-box;border:2px solid var(--dou-chart-surface);box-shadow:0 0 0 1px color-mix(in oklab,currentColor 24%,transparent);background-color:currentColor;border-radius:50%}.dou-chart__mark.is-faded{opacity:.32}.dou-chart__mark.is-ring{box-shadow:0 0 0 1px var(--dou-chart-surface);background:0 0;border-color:currentColor}.dou-chart__tooltip{--dou-chart-tooltip-bg:color-mix(in oklab,var(--dou-color-text)calc(4%*var(--dou-scheme-dark)),var(--dou-color-bg-surface));box-sizing:border-box;border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-container);background-color:var(--dou-chart-tooltip-bg);box-shadow:var(--dou-shadow-md);color:var(--dou-color-text-secondary);will-change:transform;min-width:120px;max-width:min(280px,100% - 8px);padding:8px 10px}.dou-chart__tooltip-title{display:flex;color:var(--dou-color-text);font-weight:var(--dou-font-weight-medium);align-items: center;min-height:16px;margin-bottom:6px}.dou-chart__tooltip-item{display:flex;align-items: center;gap:6px;min-height:16px}.dou-chart__tooltip-item+.dou-chart__tooltip-item{margin-top:4px}.dou-chart__tooltip-item.is-muted{color:var(--dou-color-text-tertiary)}.dou-chart__tooltip-item.is-muted>.dou-chart__tooltip-value{color:var(--dou-color-text-secondary)}.dou-chart__tooltip-swatch{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--dou-color-text)8%,transparent);background-color:currentColor;border-radius:2px;flex-shrink:0;width:8px;height:8px}.dou-chart__tooltip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-box:normal;flex:1;min-width:0;line-height:16px}.dou-chart__tooltip-value{color:var(--dou-color-text);font-weight:var(--dou-font-weight-medium);white-space:nowrap;margin-left:12px}.dou-chart__tooltip-note{color:var(--dou-color-text-tertiary);margin-top:6px;line-height:16px}.dou-chart__live{position:absolute;overflow:hidden;clip-path:inset(50%);white-space:nowrap;width:1px;height:1px}.dou-chart.is-zoomed{cursor:grab}.dou-chart.is-brushing{cursor:crosshair}.dou-chart__brush{position:absolute;box-sizing:border-box;border:1px solid color-mix(in oklab,var(--dou-color-text)28%,transparent);background-color:color-mix(in oklab,var(--dou-color-text)6%,transparent);pointer-events:none;top:0;left:0}.dou-chart__range{position:absolute;box-sizing:border-box;border-radius:var(--dou-radius-control);box-shadow:inset 0 0 0 1px var(--dou-color-border-subtle);cursor:pointer;touch-action:none;user-select:none;top:0;left:0}.dou-chart__range-canvas{position:absolute;display:block;opacity:.56;top:0;left:0}.dou-chart__range-shade,.dou-chart__range-window,.dou-chart__range-handle{position:absolute;top:0;left:0}.dou-chart__range-shade{background-color:color-mix(in oklab,var(--dou-chart-surface)72%,transparent)}.dou-chart__range-window{box-sizing:border-box;--dou-chart-range-edge:color-mix(in oklab,var(--dou-color-text)32%,transparent);border-block:1px solid var(--dou-chart-range-edge);background-color:color-mix(in oklab,var(--dou-color-text)6%,transparent);cursor:grab}.is-vertical>.dou-chart__range-window{border-block-start:none;border-block-end:none;border-inline:1px solid var(--dou-chart-range-edge)}.dou-chart__range-handle{box-sizing:border-box;border:1px solid var(--dou-color-border-strong);background-color:var(--dou-color-bg-surface);box-shadow:var(--dou-shadow-sm);outline:none;cursor:ew-resize;border-radius:4px;width:8px;height:20px;margin:6px 0 0 -4px}.dou-chart__range-handle:before{position:absolute;content:"";inset:-6px -8px}.dou-chart__range-handle:hover{border-color:var(--dou-color-text-tertiary)}.dou-chart__range-handle:focus-visible{outline:2px solid var(--dou-color-focus);outline-offset:2px}.is-vertical>.dou-chart__range-handle{cursor:ns-resize;width:20px;height:8px;margin:-4px 0 0 6px}.is-vertical>.dou-chart__range-handle:before{inset:-8px -6px}@media (pointer:coarse){.dou-chart__range-handle:before{inset:-10px -16px}.is-vertical>.dou-chart__range-handle:before{inset:-16px -10px}}}

package/dist/style.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/style.js

@@ -0,0 +1,3 @@
+import 'dou-ui/components/spinner/style'
+import 'dou-ui/components/tooltip/style'
+import './style.css'

package/dist/table.js

@@ -0,0 +1,6 @@
+import table_vue_vue_type_script_setup_true_lang_default from "./table.vue_vue_type_script_setup_true_lang.js";
+// src/table.vue
+var table_default = table_vue_vue_type_script_setup_true_lang_default;
+export { table_default as default };
+
+//# sourceMappingURL=table.js.map

package/dist/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":["_sfc_main"],"sources":["../src/table.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useNamespace } from 'dou-ui'\nimport type { ComputedRef } from 'vue'\n\n/** The chart's data as a table, shown in its place. */\nexport interface TableState {\n  shown: ComputedRef<boolean>\n  caption: ComputedRef<string>\n  head: ComputedRef<string[]>\n  /** Each row's cells; the first is the row's head. */\n  rows: ComputedRef<string[][]>\n  /** A line under a table cut short. */\n  more: ComputedRef<string>\n  /** Escape in the table: back to the chart. */\n  close: () => void\n}\n\ndefineOptions({ name: 'DouChartTable' })\n\nconst { state } = defineProps<{ state: TableState }>()\nconst ns = useNamespace('chart')\nconst { shown, caption, head, rows, more } = state\n\nfunction onKeydown(event: KeyboardEvent) {\n  // the chart's own keys are for its tooltip\n  event.stopPropagation()\n  if (event.key === 'Escape') state.close()\n}\n</script>\n\n<template>\n  <!-- scrolls on its own, so it can take focus and be scrolled with the keys -->\n  <!-- oxlint-disable-next-line vuejs-accessibility/no-noninteractive-tabindex -->\n  <div\n    v-if=\"shown\"\n    :class=\"ns.e('table')\"\n    tabindex=\"0\"\n    @keydown=\"onKeydown\"\n    @pointerdown.stop\n    @pointermove.stop\n    @wheel.stop\n    @dblclick.stop\n  >\n    <table>\n      <caption>\n        {{\n          caption\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th v-for=\"(cell, i) in head\" :key=\"i\" scope=\"col\">{{ cell }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr v-for=\"(row, r) in rows\" :key=\"r\">\n          <template v-for=\"(cell, i) in row\" :key=\"i\">\n            <th v-if=\"i === 0\" scope=\"row\">{{ cell }}</th>\n            <td v-else>{{ cell }}</td>\n          </template>\n        </tr>\n      </tbody>\n    </table>\n    <p v-if=\"more\" :class=\"ns.e('table-more')\">{{ more }}</p>\n  </div>\n</template>\n"],"mappings":""}

package/dist/table.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,52 @@
+import { useNamespace } from "dou-ui";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, withModifiers } from "vue";
+// src/table.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	scope: "row"
+};
+var _hoisted_2 = { key: 1 };
+var table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouChartTable",
+	__name: "table",
+	props: { state: {} },
+	setup(__props) {
+		const ns = useNamespace("chart");
+		const { shown, caption, head, rows, more } = __props.state;
+		function onKeydown(event) {
+			event.stopPropagation();
+			if (event.key === "Escape") __props.state.close();
+		}
+		return (_ctx, _cache) => {
+			return unref(shown) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(ns).e("table")),
+				tabindex: "0",
+				onKeydown,
+				onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+				onPointermove: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
+				onWheel: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+				onDblclick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
+			}, [createElementVNode("table", null, [
+				createElementVNode("caption", null, toDisplayString(unref(caption)), 1),
+				createElementVNode("thead", null, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(head), (cell, i) => {
+					return openBlock(), createElementBlock("th", {
+						key: i,
+						scope: "col"
+					}, toDisplayString(cell), 1);
+				}), 128))])]),
+				createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, r) => {
+					return openBlock(), createElementBlock("tr", { key: r }, [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, i) => {
+						return openBlock(), createElementBlock(Fragment, { key: i }, [i === 0 ? (openBlock(), createElementBlock("th", _hoisted_1, toDisplayString(cell), 1)) : (openBlock(), createElementBlock("td", _hoisted_2, toDisplayString(cell), 1))], 64);
+					}), 128))]);
+				}), 128))])
+			]), unref(more) ? (openBlock(), createElementBlock("p", {
+				key: 0,
+				class: normalizeClass(unref(ns).e("table-more"))
+			}, toDisplayString(unref(more)), 3)) : createCommentVNode("", true)], 34)) : createCommentVNode("", true);
+		};
+	}
+});
+export { table_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=table.vue_vue_type_script_setup_true_lang.js.map

package/dist/table.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createElementBlock","_normalizeClass","_withModifiers","_createElementVNode","_toDisplayString","_Fragment","_renderList","_createCommentVNode"],"sources":["../src/table.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useNamespace } from 'dou-ui'\nimport type { ComputedRef } from 'vue'\n\n/** The chart's data as a table, shown in its place. */\nexport interface TableState {\n  shown: ComputedRef<boolean>\n  caption: ComputedRef<string>\n  head: ComputedRef<string[]>\n  /** Each row's cells; the first is the row's head. */\n  rows: ComputedRef<string[][]>\n  /** A line under a table cut short. */\n  more: ComputedRef<string>\n  /** Escape in the table: back to the chart. */\n  close: () => void\n}\n\ndefineOptions({ name: 'DouChartTable' })\n\nconst { state } = defineProps<{ state: TableState }>()\nconst ns = useNamespace('chart')\nconst { shown, caption, head, rows, more } = state\n\nfunction onKeydown(event: KeyboardEvent) {\n  // the chart's own keys are for its tooltip\n  event.stopPropagation()\n  if (event.key === 'Escape') state.close()\n}\n</script>\n\n<template>\n  <!-- scrolls on its own, so it can take focus and be scrolled with the keys -->\n  <!-- oxlint-disable-next-line vuejs-accessibility/no-noninteractive-tabindex -->\n  <div\n    v-if=\"shown\"\n    :class=\"ns.e('table')\"\n    tabindex=\"0\"\n    @keydown=\"onKeydown\"\n    @pointerdown.stop\n    @pointermove.stop\n    @wheel.stop\n    @dblclick.stop\n  >\n    <table>\n      <caption>\n        {{\n          caption\n        }}\n      </caption>\n      <thead>\n        <tr>\n          <th v-for=\"(cell, i) in head\" :key=\"i\" scope=\"col\">{{ cell }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr v-for=\"(row, r) in rows\" :key=\"r\">\n          <template v-for=\"(cell, i) in row\" :key=\"i\">\n            <th v-if=\"i === 0\" scope=\"row\">{{ cell }}</th>\n            <td v-else>{{ cell }}</td>\n          </template>\n        </tr>\n      </tbody>\n    </table>\n    <p v-if=\"more\" :class=\"ns.e('table-more')\">{{ more }}</p>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAoBA,MAAM,KAAK,aAAa,OAAO;EAC/B,MAAM,EAAE,OAAO,SAAS,MAAM,MAAM,SAAS,QAAA;EAE7C,SAAS,UAAU,OAAsB;GAEvC,MAAM,gBAAgB;GACtB,IAAI,MAAM,QAAQ,UAAU,QAAA,MAAM,MAAM;EAC1C;;GAOU,OAAAA,MAAA,KAAA,KADRC,UAAA,GAAAC,mBA+BM,OAAA;;IA7BH,OAAKC,eAAEH,MAAA,EAAA,CAAE,CAAC,EAAC,OAAA,CAAA;IACZ,UAAS;IACC;IACT,eAAW,OAAA,OAAA,OAAA,KAAAI,oBAAZ,CAAA,GAAiB,CAAA,MAAA,CAAA;IAChB,eAAW,OAAA,OAAA,OAAA,KAAAA,oBAAZ,CAAA,GAAiB,CAAA,MAAA,CAAA;IAChB,SAAK,OAAA,OAAA,OAAA,KAAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;IACV,YAAQ,OAAA,OAAA,OAAA,KAAAA,oBAAT,CAAA,GAAc,CAAA,MAAA,CAAA;G,IAEdC,mBAmBQ,SAAA,MAAA;IAlBNA,mBAIU,WAAA,MAAAC,gBAFNN,MAAA,OAAA,CAAO,GAAA,CAAA;IAGXK,mBAIQ,SAAA,MAAA,CAHNA,mBAEK,MAAA,MAAA,EADHJ,UAAA,IAAA,GAAAC,mBAAkEK,UAAA,MAAAC,WAA1CR,MAAA,IAAA,IAAZ,MAAM,MAAC;KAAnB,OAAAC,UAAA,GAAAC,mBAAkE,MAAA;MAAnC,KAAK;MAAG,OAAM;KAAS,GAAAI,gBAAA,IAAI,GAAA,CAAA;;IAG9DD,mBAOQ,SAAA,MAAA,EANNJ,UAAA,IAAA,GAAAC,mBAKKK,UAAA,MAAAC,WALkBR,MAAA,IAAA,IAAX,KAAK,MAAC;KAAlB,OAAAC,UAAA,GAAAC,mBAKK,MAAA,EALyB,KAAK,EAAC,GAAA,EAClCD,UAAA,IAAA,GAAAC,mBAGWK,UAAA,MAAAC,WAHmB,MAAZ,MAAM,MAAC;MAAgB,OAAAP,UAAA,GAAAC,mBAAAK,UAAA,EAAA,KAAA,EAAC,GAAA,CAC9B,MAAC,KAAXN,UAAA,GAAAC,mBAA8C,MAA9C,YAA8CI,gBAAZ,IAAI,GAAA,CAAA,MACtCL,UAAA,GAAAC,mBAA0B,MAAA,YAAAI,gBAAZ,IAAI,GAAA,CAAA,E;;;G,IAKjBN,MAAA,IAAA,KAATC,UAAA,GAAAC,mBAAyD,KAAA;;IAAzC,OAAKC,eAAEH,MAAA,EAAA,CAAE,CAAC,EAAC,YAAA,CAAA;GAAmB,GAAAM,gBAAAN,MAAA,IAAA,CAAI,GAAA,CAAA,K"}