@poveste/app 0.15.0 → 0.16.0

package/dist/bundled/components/base/BaseSelect.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { refAutoReset } from "@poveste/vendors/vue-use";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, withCtx, withModifiers } from "@poveste/vendors/vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, onMounted, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, watch, withCtx, withModifiers } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
-import { Dropdown } from "@poveste/vendors/floating-vue";
+import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, portalTarget } from "@poveste/controls";
 //#region src/app/components/base/BaseSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-label",
@@ -131,59 +131,88 @@ var BaseSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				case "Tab": choose(activeIndex.value);
 			}
 		}
+		const target = shallowRef();
+		onMounted(() => {
+			target.value = portalTarget();
+		});
+		function keepOpenOnTheTrigger(event) {
+			if (combobox.value?.contains(event.target)) event.preventDefault();
+		}
+		watch([open, activeIndex], async ([isOpen, index]) => {
+			if (!isOpen || index < 0) return;
+			await nextTick();
+			target.value?.ownerDocument.getElementById(optionId(index))?.scrollIntoView({ block: "nearest" });
+		});
 		__expose({ focus: () => combobox.value?.focus() });
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Dropdown), {
-				shown: open.value,
-				"onUpdate:shown": _cache[2] || (_cache[2] = ($event) => open.value = $event),
-				class: "poveste-base-select",
-				triggers: [],
-				"no-auto-focus": "",
-				"auto-size": "",
-				"auto-boundary-max-size": ""
+			return openBlock(), createBlock(unref(PopoverRoot), {
+				open: open.value,
+				"onUpdate:open": _cache[4] || (_cache[4] = ($event) => open.value = $event)
 			}, {
-				popper: withCtx(() => [createElementVNode("div", {
-					id: listboxId,
-					role: "listbox",
-					"aria-label": __props.label,
-					class: "flex flex-col bg-gray-50 dark:bg-gray-700"
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, ([value, optionLabel], index) => {
-					return openBlock(), createElementBlock("div", {
-						id: optionId(index),
-						key: value,
-						role: "option",
-						"aria-selected": value === __props.modelValue,
-						class: normalizeClass(["px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700", {
-							"bg-primary-200 dark:bg-primary-800": value === __props.modelValue,
-							"outline outline-2 -outline-offset-2 outline-primary-500": index === activeIndex.value
-						}]),
-						onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
-						onMousemove: ($event) => activeIndex.value = index,
-						onClick: ($event) => choose(index)
-					}, [renderSlot(_ctx.$slots, "option", {
-						label: optionLabel,
-						value
-					}, () => [createTextVNode(toDisplayString(optionLabel), 1)])], 42, _hoisted_4);
-				}), 128))], 8, _hoisted_3)]),
-				default: withCtx(() => [createElementVNode("div", {
-					ref_key: "combobox",
-					ref: combobox,
-					role: "combobox",
-					tabindex: "0",
-					"aria-label": __props.label,
-					"aria-haspopup": "listbox",
-					"aria-expanded": open.value,
-					"aria-controls": open.value ? listboxId : void 0,
-					"aria-activedescendant": open.value && activeIndex.value >= 0 ? optionId(activeIndex.value) : void 0,
-					class: "cursor-pointer w-full outline-none focus-visible:border-primary-500 px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal",
-					onClick: _cache[0] || (_cache[0] = ($event) => open.value ? close() : openList()),
-					onKeydown
-				}, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", { label: selectedLabel.value }, () => [createTextVNode(toDisplayString(selectedLabel.value), 1)])]), createVNode(unref(Icon), {
-					icon: "carbon:chevron-sort",
-					class: "w-4 h-4 flex-none ml-auto"
-				})], 40, _hoisted_1)]),
+				default: withCtx(() => [createVNode(unref(PopoverAnchor), {
+					"as-child": "",
+					class: "poveste-base-select"
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						ref_key: "combobox",
+						ref: combobox,
+						role: "combobox",
+						tabindex: "0",
+						"aria-label": __props.label,
+						"aria-haspopup": "listbox",
+						"aria-expanded": open.value,
+						"aria-controls": open.value ? listboxId : void 0,
+						"aria-activedescendant": open.value && activeIndex.value >= 0 ? optionId(activeIndex.value) : void 0,
+						class: "cursor-pointer w-full outline-none focus-visible:border-primary-500 px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal",
+						onClick: _cache[0] || (_cache[0] = ($event) => open.value ? close() : openList()),
+						onKeydown
+					}, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", { label: selectedLabel.value }, () => [createTextVNode(toDisplayString(selectedLabel.value), 1)])]), createVNode(unref(Icon), {
+						icon: "carbon:chevron-sort",
+						class: "w-4 h-4 flex-none ml-auto"
+					})], 40, _hoisted_1)]),
+					_: 3
+				}), target.value ? (openBlock(), createBlock(unref(PopoverPortal), {
+					key: 0,
+					to: target.value
+				}, {
+					default: withCtx(() => [createVNode(unref(PopoverContent), {
+						class: "poveste-base-select-popper",
+						align: "start",
+						"side-offset": 6,
+						"collision-padding": 8,
+						onOpenAutoFocus: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+						onCloseAutoFocus: _cache[3] || (_cache[3] = withModifiers(() => {}, ["prevent"])),
+						onInteractOutside: keepOpenOnTheTrigger
+					}, {
+						default: withCtx(() => [createElementVNode("div", {
+							id: listboxId,
+							role: "listbox",
+							"aria-label": __props.label,
+							class: "poveste-base-select-options flex flex-col bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, ([value, optionLabel], index) => {
+							return openBlock(), createElementBlock("div", {
+								id: optionId(index),
+								key: value,
+								role: "option",
+								"aria-selected": value === __props.modelValue,
+								class: normalizeClass(["px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700", {
+									"bg-primary-200 dark:bg-primary-800": value === __props.modelValue,
+									"outline outline-2 -outline-offset-2 outline-primary-500": index === activeIndex.value
+								}]),
+								onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+								onMousemove: ($event) => activeIndex.value = index,
+								onClick: ($event) => choose(index)
+							}, [renderSlot(_ctx.$slots, "option", {
+								label: optionLabel,
+								value
+							}, () => [createTextVNode(toDisplayString(optionLabel), 1)])], 42, _hoisted_4);
+						}), 128))], 8, _hoisted_3)]),
+						_: 3
+					})]),
+					_: 3
+				}, 8, ["to"])) : createCommentVNode("", true)]),
 				_: 3
-			}, 8, ["shown"]);
+			}, 8, ["open"]);
 		};
 	}
 });

package/dist/bundled/components/base/BaseSplitPane.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import BaseSplitPane_vue_vue_type_script_setup_true_lang_default from "./BaseSplitPane.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                              */
 //#region src/app/components/base/BaseSplitPane.vue
-var BaseSplitPane_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseSplitPane_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e5174855"]]);
+var BaseSplitPane_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseSplitPane_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c01bd041"]]);
 //#endregion
 export { BaseSplitPane_default as default };

package/dist/bundled/components/base/BaseSplitPane.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,17 @@
-import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderSlot, watch, withModifiers } from "@poveste/vendors/vue";
+import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderSlot, unref, useId, watch, withModifiers } from "@poveste/vendors/vue";
 //#region src/app/components/base/BaseSplitPane.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var _hoisted_2 = [
+	"aria-label",
+	"aria-orientation",
+	"aria-controls",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax"
+];
 var SAVE_PREFIX = "__poveste";
+var STEP = 1;
+var PAGE_STEP = 10;
 var BaseSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "BaseSplitPane",
 	props: {
@@ -47,6 +58,16 @@ var BaseSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			default: true
 		},
 		/**
+		* What the divider is called to a screen reader.
+		*
+		* Four are on screen at once and they resize different things, so a shared
+		* default would announce four identical separators.
+		*/
+		label: {
+			type: String,
+			default: "Resize panels"
+		},
+		/**
 		* Whether the first pane exists at all.
 		*
 		* Dropping it here rather than at the call site keeps the other slot at one
@@ -149,6 +170,36 @@ var BaseSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		watch(hasBothPanes, (both) => {
 			if (!both && dragging.value) dragEnd();
 		});
+		function moveBy(amount) {
+			currentSplit.value = Math.min(props.max, Math.max(props.min, boundSplit.value + amount));
+		}
+		function onKeydown(event) {
+			const back = props.orientation === "landscape" ? "ArrowLeft" : "ArrowUp";
+			const forward = props.orientation === "landscape" ? "ArrowRight" : "ArrowDown";
+			switch (event.key) {
+				case back:
+					moveBy(-STEP);
+					break;
+				case forward:
+					moveBy(STEP);
+					break;
+				case "PageUp":
+					moveBy(-PAGE_STEP);
+					break;
+				case "PageDown":
+					moveBy(PAGE_STEP);
+					break;
+				case "Home":
+					currentSplit.value = props.min;
+					break;
+				case "End":
+					currentSplit.value = props.max;
+					break;
+				default: return;
+			}
+			event.preventDefault();
+		}
+		const firstPaneId = useId();
 		function removeDragListeners() {
 			window.removeEventListener("mousemove", dragMove);
 			window.removeEventListener("mouseup", dragEnd);
@@ -168,6 +219,7 @@ var BaseSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				}])
 			}, [__props.showFirst ? (openBlock(), createElementBlock("div", {
 				key: 0,
+				id: unref(firstPaneId),
 				class: normalizeClass(["relative top-0 left-0 z-20", {
 					"pointer-events-none": dragging.value,
 					"border-r border-gray-300/30 dark:border-gray-800": __props.orientation === "landscape" && __props.showDivider && hasBothPanes.value,
@@ -176,14 +228,23 @@ var BaseSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				style: normalizeStyle(leftStyle.value)
 			}, [renderSlot(_ctx.$slots, "first", {}, void 0, true), hasBothPanes.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				class: normalizeClass(["dragger absolute z-100 hover:bg-primary-500/50 transition-colors duration-150 delay-150", {
+				role: "separator",
+				tabindex: "0",
+				"aria-label": __props.label,
+				"aria-orientation": __props.orientation === "landscape" ? "vertical" : "horizontal",
+				"aria-controls": unref(firstPaneId),
+				"aria-valuenow": Math.round(boundSplit.value),
+				"aria-valuemin": __props.min,
+				"aria-valuemax": __props.max,
+				class: normalizeClass(["dragger absolute z-100 hover:bg-primary-500/50 focus-visible:bg-primary-500/50 focus-visible:outline-2 focus-visible:outline-primary-500 transition-colors duration-150 delay-150", {
 					"top-0 bottom-0 cursor-ew-resize": __props.orientation === "landscape",
 					"left-0 right-0 cursor-ns-resize": __props.orientation === "portrait",
 					[`dragger-offset-${__props.draggerOffset}`]: true,
 					"bg-primary-500/25": dragging.value
 				}]),
-				onMousedown: withModifiers(dragStart, ["prevent"])
-			}, null, 34)) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), __props.showLast ? (openBlock(), createElementBlock("div", {
+				onMousedown: withModifiers(dragStart, ["prevent"]),
+				onKeydown
+			}, null, 42, _hoisted_2)) : createCommentVNode("", true)], 14, _hoisted_1)) : createCommentVNode("", true), __props.showLast ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: normalizeClass(["relative bottom-0 right-0", {
 					"pointer-events-none": dragging.value,

package/dist/bundled/components/panel/ControlsComponentPropItem.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, resolveDirective, resolveDynamicComponent, unref, withDirectives } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, resolveDynamicComponent, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
-import { HstCheckbox, HstJson, HstNumber, HstText } from "@poveste/controls";
+import { HstCheckbox, HstJson, HstNumber, HstText, HstTooltip } from "@poveste/controls";
 //#region src/app/components/panel/ControlsComponentPropItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -38,7 +38,6 @@ var ControlsComponentPropItem_vue_vue_type_script_setup_true_lang_default = /*@_
 		}
 		const canReset = computed(() => props.variant.state?._hPropState?.[props.component.index] && props.definition.name in props.variant.state._hPropState[props.component.index]);
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
 			return comp.value ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(), createBlock(resolveDynamicComponent(comp.value), {
 				modelValue: model.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
@@ -49,16 +48,19 @@ var ControlsComponentPropItem_vue_vue_type_script_setup_true_lang_default = /*@_
 				"modelValue",
 				"placeholder",
 				"title"
-			])), withDirectives((openBlock(), createElementBlock("button", {
-				type: "button",
-				"aria-label": `Remove override of ${__props.definition.name}`,
-				disabled: !canReset.value,
-				class: normalizeClass(["flex-none flex mr-2 mb-[10px] p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canReset.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
-				onClick: _cache[1] || (_cache[1] = ($event) => reset())
-			}, [createVNode(unref(Icon), {
-				icon: "carbon:erase",
-				class: "w-4 h-4"
-			})], 10, _hoisted_2)), [[_directive_tooltip, "Remove override"]])])) : createCommentVNode("", true);
+			])), createVNode(unref(HstTooltip), { content: "Remove override" }, {
+				default: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					"aria-label": `Remove override of ${__props.definition.name}`,
+					disabled: !canReset.value,
+					class: normalizeClass(["flex-none flex mr-2 mb-[10px] p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canReset.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
+					onClick: _cache[1] || (_cache[1] = ($event) => reset())
+				}, [createVNode(unref(Icon), {
+					icon: "carbon:erase",
+					class: "w-4 h-4"
+				})], 10, _hoisted_2)]),
+				_: 1
+			})])) : createCommentVNode("", true);
 		};
 	}
 });

package/dist/bundled/components/panel/ControlsComponentProps.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import ControlsComponentPropItem_default from "./ControlsComponentPropItem.js";
-import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, resolveDirective, toDisplayString, unref, withDirectives } from "@poveste/vendors/vue";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/panel/ControlsComponentProps.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-controls-component-props" };
 var _hoisted_2 = { class: "font-mono p-2 flex items-center gap-1" };
@@ -12,11 +13,13 @@ var ControlsComponentProps_vue_vue_type_script_setup_true_lang_default = /*@__PU
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
-			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [withDirectives(createVNode(unref(Icon), {
-				icon: "carbon:flash",
-				class: "w-4 h-4 text-primary-500 flex-none"
-			}, null, 512), [[_directive_tooltip, "Auto-detected props"]]), createElementVNode("div", null, [
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(unref(HstTooltip), { content: "Auto-detected props" }, {
+				default: withCtx(() => [createVNode(unref(Icon), {
+					icon: "carbon:flash",
+					class: "w-4 h-4 text-primary-500 flex-none"
+				})]),
+				_: 1
+			}), createElementVNode("div", null, [
 				_cache[0] || (_cache[0] = createElementVNode("span", { class: "opacity-30" }, "<", -1)),
 				createTextVNode(toDisplayString(__props.definition.name), 1),
 				_cache[1] || (_cache[1] = createElementVNode("span", { class: "opacity-30" }, ">", -1))

package/dist/bundled/components/panel/ControlsComponentState.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import ControlsComponentStateItem_default from "./ControlsComponentStateItem.js";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, resolveDirective, unref, withDirectives } from "@poveste/vendors/vue";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/panel/ControlsComponentState.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-controls-component-init-state" };
 var _hoisted_2 = { class: "p-2 flex items-center gap-1" };
@@ -11,11 +12,13 @@ var ControlsComponentState_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		const props = __props;
 		const stateKeys = computed(() => Object.keys(props.variant.state || {}).filter((key) => !key.startsWith("_h")));
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
-			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [withDirectives(createVNode(unref(Icon), {
-				icon: "carbon:data-vis-1",
-				class: "w-4 h-4 text-primary-500 flex-none"
-			}, null, 512), [[_directive_tooltip, "Auto-detected state"]]), _cache[0] || (_cache[0] = createElementVNode("div", null, " State ", -1))]), (openBlock(true), createElementBlock(Fragment, null, renderList(stateKeys.value, (key) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(unref(HstTooltip), { content: "Auto-detected state" }, {
+				default: withCtx(() => [createVNode(unref(Icon), {
+					icon: "carbon:data-vis-1",
+					class: "w-4 h-4 text-primary-500 flex-none"
+				})]),
+				_: 1
+			}), _cache[0] || (_cache[0] = createElementVNode("div", null, " State ", -1))]), (openBlock(true), createElementBlock(Fragment, null, renderList(stateKeys.value, (key) => {
 				return openBlock(), createBlock(ControlsComponentStateItem_default, {
 					key,
 					item: key,

package/dist/bundled/components/panel/StatePresets.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
 import { toPresetState, toRawDeep } from "../../util/state.js";
 import BaseSelect_default from "../base/BaseSelect.js";
 import { onClickOutside, useLiveAnnouncer, useStorage, useTimeoutFn } from "@poveste/vendors/vue-use";
-import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, nextTick, normalizeClass, onMounted, openBlock, ref, resolveDirective, unref, vModelText, withDirectives, withKeys } from "@poveste/vendors/vue";
+import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, nextTick, normalizeClass, onMounted, openBlock, ref, unref, vModelText, withCtx, withDirectives, withKeys } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 import { applyState, clone } from "@poveste/shared";
 //#region src/app/components/panel/StatePresets.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-state-presets flex gap-2 w-full items-center" };
@@ -102,7 +103,6 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		}
 		onClickOutside(select, () => stopEditing());
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createElementVNode("div", {
 					ref_key: "select",
@@ -128,58 +128,73 @@ var StatePresets_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					onDblclick: _cache[4] || (_cache[4] = ($event) => startEditing()),
 					onSelect: _cache[5] || (_cache[5] = (id) => applyPreset(id))
 				}, null, 8, ["modelValue", "options"]))], 512),
-				withDirectives((openBlock(), createElementBlock("button", {
-					type: "button",
-					"data-testid": "preset-rename",
-					"aria-label": "Rename preset",
-					disabled: !canEdit.value,
-					class: normalizeClass(["flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canEdit.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
-					onClick: _cache[6] || (_cache[6] = ($event) => startEditing())
-				}, [createVNode(unref(Icon), {
-					icon: "carbon:edit",
-					class: "w-4 h-4"
-				})], 10, _hoisted_2)), [[_directive_tooltip, canEdit.value ? "Rename this preset" : null]]),
-				withDirectives((openBlock(), createElementBlock("button", {
-					type: "button",
-					"data-testid": "preset-delete",
-					"aria-label": "Delete preset",
-					disabled: !canEdit.value,
-					class: normalizeClass(["flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canEdit.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
-					onClick: _cache[7] || (_cache[7] = ($event) => deletePreset(unref(selectedOption)))
-				}, [createVNode(unref(Icon), {
-					icon: "carbon:trash-can",
-					class: "w-4 h-4"
-				})], 10, _hoisted_3)), [[_directive_tooltip, canEdit.value ? "Delete this preset" : null]]),
-				withDirectives((openBlock(), createElementBlock("button", {
-					type: "button",
-					"data-testid": "preset-save",
-					"aria-label": "Save to preset",
-					disabled: !canEdit.value,
-					class: normalizeClass(["flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canEdit.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
-					onClick: _cache[8] || (_cache[8] = ($event) => savePreset())
-				}, [createVNode(unref(Icon), {
-					icon: savedNotif.value ? "carbon:checkmark" : "carbon:save",
-					class: "w-4 h-4"
-				}, null, 8, ["icon"])], 10, _hoisted_4)), [[_directive_tooltip, savedNotif.value ? "Saved!" : canEdit.value ? "Save to preset" : null]]),
-				withDirectives((openBlock(), createElementBlock("button", {
-					type: "button",
-					"data-testid": "preset-create",
-					"aria-label": "Create new preset",
-					class: "flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100",
-					onClick: _cache[9] || (_cache[9] = ($event) => createPreset())
-				}, [createVNode(unref(Icon), {
-					icon: "carbon:add-alt",
-					class: "w-4 h-4"
-				})])), [[_directive_tooltip, "Create new preset"]]),
-				withDirectives((openBlock(), createElementBlock("button", {
-					type: "button",
-					"aria-label": "Reset to initial state",
-					class: "flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100",
-					onClick: _cache[10] || (_cache[10] = ($event) => resetState())
-				}, [createVNode(unref(Icon), {
-					icon: "carbon:reset",
-					class: "w-4 h-4"
-				})])), [[_directive_tooltip, "Reset to initial state"]])
+				createVNode(unref(HstTooltip), { content: canEdit.value ? "Rename this preset" : null }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						"data-testid": "preset-rename",
+						"aria-label": "Rename preset",
+						disabled: !canEdit.value,
+						class: normalizeClass(["flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canEdit.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
+						onClick: _cache[6] || (_cache[6] = ($event) => startEditing())
+					}, [createVNode(unref(Icon), {
+						icon: "carbon:edit",
+						class: "w-4 h-4"
+					})], 10, _hoisted_2)]),
+					_: 1
+				}, 8, ["content"]),
+				createVNode(unref(HstTooltip), { content: canEdit.value ? "Delete this preset" : null }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						"data-testid": "preset-delete",
+						"aria-label": "Delete preset",
+						disabled: !canEdit.value,
+						class: normalizeClass(["flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canEdit.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
+						onClick: _cache[7] || (_cache[7] = ($event) => deletePreset(unref(selectedOption)))
+					}, [createVNode(unref(Icon), {
+						icon: "carbon:trash-can",
+						class: "w-4 h-4"
+					})], 10, _hoisted_3)]),
+					_: 1
+				}, 8, ["content"]),
+				createVNode(unref(HstTooltip), { content: savedNotif.value ? "Saved!" : canEdit.value ? "Save to preset" : null }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						"data-testid": "preset-save",
+						"aria-label": "Save to preset",
+						disabled: !canEdit.value,
+						class: normalizeClass(["flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canEdit.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
+						onClick: _cache[8] || (_cache[8] = ($event) => savePreset())
+					}, [createVNode(unref(Icon), {
+						icon: savedNotif.value ? "carbon:checkmark" : "carbon:save",
+						class: "w-4 h-4"
+					}, null, 8, ["icon"])], 10, _hoisted_4)]),
+					_: 1
+				}, 8, ["content"]),
+				createVNode(unref(HstTooltip), { content: "Create new preset" }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						"data-testid": "preset-create",
+						"aria-label": "Create new preset",
+						class: "flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100",
+						onClick: _cache[9] || (_cache[9] = ($event) => createPreset())
+					}, [createVNode(unref(Icon), {
+						icon: "carbon:add-alt",
+						class: "w-4 h-4"
+					})])]),
+					_: 1
+				}),
+				createVNode(unref(HstTooltip), { content: "Reset to initial state" }, {
+					default: withCtx(() => [createElementVNode("button", {
+						type: "button",
+						"aria-label": "Reset to initial state",
+						class: "flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100",
+						onClick: _cache[10] || (_cache[10] = ($event) => resetState())
+					}, [createVNode(unref(Icon), {
+						icon: "carbon:reset",
+						class: "w-4 h-4"
+					})])]),
+					_: 1
+				})
 			]);
 		};
 	}

package/dist/bundled/components/panel/StoryEvent.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,5 @@
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, resolveComponent, toDisplayString, withCtx } from "@poveste/vendors/vue";
+import BaseDropdown_default from "../base/BaseDropdown.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, withCtx } from "@poveste/vendors/vue";
 //#region src/app/components/panel/StoryEvent.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -23,13 +24,12 @@ var StoryEvent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			}
 		});
 		return (_ctx, _cache) => {
-			const _component_VDropdown = resolveComponent("VDropdown");
-			return openBlock(), createBlock(_component_VDropdown, {
+			return openBlock(), createBlock(BaseDropdown_default, {
+				side: "right",
 				class: "poveste-story-event group",
-				placement: "right",
 				"data-testid": "event-item"
 			}, {
-				default: withCtx(({ shown }) => [createElementVNode("div", { class: normalizeClass(["group-hover:bg-primary-100 dark:group-hover:bg-primary-700 cursor-pointer py-2 px-4 flex items-baseline gap-1 leading-normal", [shown ? "bg-primary-50 dark:bg-primary-600" : "group-odd:bg-gray-100/50 dark:group-odd:bg-gray-750/40"]]) }, [createElementVNode("span", { class: normalizeClass({ "text-primary-500": shown }) }, toDisplayString(__props.event.name), 3), __props.event.argument ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(formattedArgument.value), 1)) : createCommentVNode("", true)], 2)]),
+				default: withCtx(({ open }) => [createElementVNode("button", { class: normalizeClass(["group-hover:bg-primary-100 dark:group-hover:bg-primary-700 cursor-pointer py-2 px-4 w-full text-left flex items-baseline gap-1 leading-normal", [open ? "bg-primary-50 dark:bg-primary-600" : "group-odd:bg-gray-100/50 dark:group-odd:bg-gray-750/40"]]) }, [createElementVNode("span", { class: normalizeClass({ "text-primary-500": open }) }, toDisplayString(__props.event.name), 3), __props.event.argument ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(formattedArgument.value), 1)) : createCommentVNode("", true)], 2)]),
 				popper: withCtx(() => [createElementVNode("div", _hoisted_2, [createElementVNode("pre", _hoisted_3, toDisplayString(__props.event.argument), 1)])]),
 				_: 1
 			});

package/dist/bundled/components/panel/StorySidePanel.vue_vue_type_script_setup_true_lang.js

@@ -43,6 +43,7 @@ var StorySidePanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			})) : (openBlock(), createBlock(BaseSplitPane_default, {
 				key: 2,
 				"save-id": `story-sidepane-${innerOrientation.value}`,
+				label: "Resize the controls panel",
 				orientation: innerOrientation.value,
 				class: "poveste-story-side-panel poveste-loaded h-full",
 				"data-testid": "story-side-panel"

package/dist/bundled/components/panel/StorySourceCode.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StorySourceCode_vue_vue_type_script_setup_true_lang_default from "./StorySourceCode.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                */
 //#region src/app/components/panel/StorySourceCode.vue
-var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b595e0d4"]]);
+var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e112aa54"]]);
 //#endregion
 export { StorySourceCode_default as default };