@astryx-vue/core 0.2.5 → 0.3.0

package/dist/{Chat-BFox3u9D.js → Chat-Bmna9EOA.js}

@@ -1,16 +1,16 @@
 import { t as _sfc_main$24 } from "./VisuallyHidden-C7NN3VEP.js";
-import { t as _sfc_main$25 } from "./Button-DrqeomlE.js";
+import { t as _sfc_main$25 } from "./Button-B6Hj_O_s.js";
 import { t as useAnnounce } from "./announce-Cnio10Wk.js";
 import { r as useChatNewMessages, t as useChatStreamScroll } from "./useChatStreamScroll-oDfybEos.js";
-import { t as useDismiss } from "./useDismiss-Cj8x_51F.js";
-import { a as useAstryxLocale, o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
+import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
+import { a as useAstryxLocale, o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { t as _sfc_main$26 } from "./Badge-CjDQPF5g.js";
 import { t as _sfc_main$27 } from "./Icon-bteSId7T.js";
 import { t as _sfc_main$28 } from "./Divider-BtwnL18I.js";
-import { t as _sfc_main$29 } from "./HoverCard-EhbWaGOW.js";
+import { t as _sfc_main$29 } from "./HoverCard-ycY50pRN.js";
 import { t as _sfc_main$30 } from "./Spinner-9cYUCnDy.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeModels, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useModel, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeModels, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
 import "../styles/popover.css";
 import "../styles/chat.css";
 //#region src/Chat/useChatPasteAsToken.ts
@@ -171,7 +171,7 @@ const _hoisted_3$11 = {
 	class: "astryx-chat-trigger__status"
 };
 const _hoisted_4$10 = ["aria-label"];
-const _hoisted_5$8 = {
+const _hoisted_5$9 = {
 	class: "astryx-chat-trigger__heading",
 	"aria-hidden": "true"
 };
@@ -185,9 +185,14 @@ const _hoisted_6$7 = [
 ];
 const _hoisted_7$6 = {
 	key: 1,
-	class: "astryx-chat-trigger__label"
+	class: "astryx-chat-trigger__copy"
 };
-const _hoisted_8$4 = [
+const _hoisted_8$4 = { class: "astryx-chat-trigger__label" };
+const _hoisted_9$4 = {
+	key: 0,
+	class: "astryx-chat-trigger__description"
+};
+const _hoisted_10$4 = [
 	"id",
 	"aria-selected",
 	"data-highlighted",
@@ -195,9 +200,14 @@ const _hoisted_8$4 = [
 	"onMouseenter",
 	"onFocus"
 ];
-const _hoisted_9$4 = {
+const _hoisted_11$3 = {
 	key: 1,
-	class: "astryx-chat-trigger__label"
+	class: "astryx-chat-trigger__copy"
+};
+const _hoisted_12$1 = { class: "astryx-chat-trigger__label" };
+const _hoisted_13$1 = {
+	key: 0,
+	class: "astryx-chat-trigger__description"
 };
 const _sfc_main$21 = /*@__PURE__*/ defineComponent({
 	__name: "ChatTriggerMenu",
@@ -278,6 +288,8 @@ const _sfc_main$21 = /*@__PURE__*/ defineComponent({
 			if (!props.open || !props.keyboardMove || index < 0) return;
 			document.getElementById(optionId(index))?.scrollIntoView({ block: "nearest" });
 		});
+		const listEl = useTemplateRef("list");
+		useScrollbars(listEl);
 		function onSelect(item, event) {
 			event.preventDefault();
 			emit("select", item);
@@ -291,6 +303,7 @@ const _sfc_main$21 = /*@__PURE__*/ defineComponent({
 				style: normalizeStyle(style.value)
 			}, [createElementVNode("div", {
 				id: __props.listboxId,
+				ref: "list",
 				class: "astryx-chat-trigger__list",
 				role: "listbox",
 				"aria-label": __props.label
@@ -299,7 +312,7 @@ const _sfc_main$21 = /*@__PURE__*/ defineComponent({
 					key: 0,
 					role: "group",
 					"aria-label": group.heading
-				}, [createElementVNode("div", _hoisted_5$8, toDisplayString(group.heading), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item, index) => {
+				}, [createElementVNode("div", _hoisted_5$9, toDisplayString(group.heading), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item, index) => {
 					return openBlock(), createElementBlock("div", {
 						id: optionId(flatIndex(group, index)),
 						key: item.id,
@@ -314,7 +327,7 @@ const _sfc_main$21 = /*@__PURE__*/ defineComponent({
 					}, [itemView.value ? (openBlock(), createBlock(resolveDynamicComponent(itemView.value), {
 						key: 0,
 						item
-					}, null, 8, ["item"])) : (openBlock(), createElementBlock("span", _hoisted_7$6, toDisplayString(item.label), 1))], 40, _hoisted_6$7);
+					}, null, 8, ["item"])) : (openBlock(), createElementBlock("span", _hoisted_7$6, [createElementVNode("span", _hoisted_8$4, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_9$4, toDisplayString(item.description), 1)) : createCommentVNode("v-if", true)]))], 40, _hoisted_6$7);
 				}), 128))], 8, _hoisted_4$10)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(group.items, (item, index) => {
 					return openBlock(), createElementBlock("div", {
 						id: optionId(flatIndex(group, index)),
@@ -330,7 +343,7 @@ const _sfc_main$21 = /*@__PURE__*/ defineComponent({
 					}, [itemView.value ? (openBlock(), createBlock(resolveDynamicComponent(itemView.value), {
 						key: 0,
 						item
-					}, null, 8, ["item"])) : (openBlock(), createElementBlock("span", _hoisted_9$4, toDisplayString(item.label), 1))], 40, _hoisted_8$4);
+					}, null, 8, ["item"])) : (openBlock(), createElementBlock("span", _hoisted_11$3, [createElementVNode("span", _hoisted_12$1, toDisplayString(item.label), 1), item.description ? (openBlock(), createElementBlock("span", _hoisted_13$1, toDisplayString(item.description), 1)) : createCommentVNode("v-if", true)]))], 40, _hoisted_10$4);
 				}), 128))], 64);
 			}), 128))], 8, _hoisted_1$18)], 4), [[vShow, open.value]])]);
 		};
@@ -459,7 +472,7 @@ function insertTextAtCursor(editable, text) {
 	range.deleteContents();
 	const textNode = document.createTextNode(text);
 	range.insertNode(textNode);
-	range.setStartAfter(textNode);
+	range.setStart(textNode, textNode.textContent?.length ?? 0);
 	range.collapse(true);
 	selection.removeAllRanges();
 	selection.addRange(range);
@@ -1017,13 +1030,11 @@ const _sfc_main$20 = /*@__PURE__*/ defineComponent({
 			tokens.cleanupPortals();
 		}
 		const defaultPaste = useChatPasteAsToken({ input: self });
-		const pasteAsToken = computed(() => props.pasteAsToken === false ? null : props.pasteAsToken ?? defaultPaste);
-		function insertText(text) {
-			const editable = editableRef.value;
-			if (!editable) return;
-			insertTextAtCursor(editable, text);
-			publish(readValue());
-		}
+		const pastePassed = wasPropPassed("pasteAsToken");
+		const pasteAsToken = computed(() => {
+			if (!pastePassed) return defaultPaste;
+			return props.pasteAsToken === false ? null : props.pasteAsToken ?? defaultPaste;
+		});
 		function focusEditable() {
 			const editable = editableRef.value;
 			if (!editable) return;
@@ -1041,18 +1052,6 @@ const _sfc_main$20 = /*@__PURE__*/ defineComponent({
 			editable.focus();
 			placeCaretAtEnd(editable);
 		}
-		const handle = {
-			insertToken: (token) => {
-				const id = tokens.insertToken(token);
-				if (id) publish(readValue());
-				return id;
-			},
-			expandToken: (id) => tokens.expandToken(id),
-			insertText,
-			focus: focusEditable,
-			getValue: readValue
-		};
-		self.value = handle;
 		const history = useComposerHistory({
 			enabled: historyEnabled,
 			editable: editableRef,
@@ -1071,6 +1070,25 @@ const _sfc_main$20 = /*@__PURE__*/ defineComponent({
 			},
 			onEmitChange: () => publish(readValue())
 		});
+		function insertText(text) {
+			const editable = editableRef.value;
+			if (!editable) return;
+			insertTextAtCursor(editable, text);
+			publish(readValue());
+			menu.handleInput();
+		}
+		const handle = {
+			insertToken: (token) => {
+				const id = tokens.insertToken(token);
+				if (id) publish(readValue());
+				return id;
+			},
+			expandToken: (id) => tokens.expandToken(id),
+			insertText,
+			focus: focusEditable,
+			getValue: readValue
+		};
+		self.value = handle;
 		const activeDescendant = computed(() => {
 			if (!menu.state.isActive || menu.state.highlightedIndex < 0) return void 0;
 			return `${menu.listboxId}-option-${menu.state.highlightedIndex}`;
@@ -1346,7 +1364,7 @@ const _hoisted_4$9 = {
 	key: 0,
 	class: "astryx-chat-composer__header"
 };
-const _hoisted_5$7 = { class: "astryx-chat-composer__header-start" };
+const _hoisted_5$8 = { class: "astryx-chat-composer__header-start" };
 const _hoisted_6$6 = { class: "astryx-chat-composer__header-end" };
 const _hoisted_7$5 = { class: "astryx-chat-composer__input" };
 const _hoisted_8$3 = { class: "astryx-chat-composer__footer" };
@@ -1474,7 +1492,7 @@ const _sfc_main$18 = /*@__PURE__*/ defineComponent({
 					onFocusin: onFocusIn,
 					onFocusout: onFocusOut
 				}, [
-					hasHeader.value ? (openBlock(), createElementBlock("div", _hoisted_4$9, [createElementVNode("div", _hoisted_5$7, [renderSlot(_ctx.$slots, "headerActions")]), createElementVNode("div", _hoisted_6$6, [renderSlot(_ctx.$slots, "headerContext")])])) : createCommentVNode("v-if", true),
+					hasHeader.value ? (openBlock(), createElementBlock("div", _hoisted_4$9, [createElementVNode("div", _hoisted_5$8, [renderSlot(_ctx.$slots, "headerActions")]), createElementVNode("div", _hoisted_6$6, [renderSlot(_ctx.$slots, "headerContext")])])) : createCommentVNode("v-if", true),
 					createElementVNode("div", _hoisted_7$5, [renderSlot(_ctx.$slots, "input", {}, () => [createVNode(_sfc_main$20)])]),
 					createElementVNode("div", _hoisted_8$3, [createElementVNode("div", _hoisted_9$3, [renderSlot(_ctx.$slots, "footerActions")]), createElementVNode("div", {
 						class: "astryx-chat-composer__footer-end",
@@ -1506,7 +1524,7 @@ const _hoisted_2$10 = [
 ];
 const _hoisted_3$8 = ["data-hidden"];
 const _hoisted_4$8 = { class: "astryx-chat-drawer__label" };
-const _hoisted_5$6 = ["data-hidden"];
+const _hoisted_5$7 = ["data-hidden"];
 const _hoisted_6$5 = [
 	"id",
 	"data-collapsed",
@@ -1579,7 +1597,7 @@ const _sfc_main$17 = /*@__PURE__*/ defineComponent({
 			}, null, 8, ["label"]), createElementVNode("span", _hoisted_4$8, toDisplayString(label.value), 1)])], 8, _hoisted_3$8), createElementVNode("div", {
 				class: "astryx-chat-drawer__handle",
 				"data-hidden": collapsed.value ? "" : void 0
-			}, null, 8, _hoisted_5$6)], 40, _hoisted_2$10)) : createCommentVNode("v-if", true), createElementVNode("div", {
+			}, null, 8, _hoisted_5$7)], 40, _hoisted_2$10)) : createCommentVNode("v-if", true), createElementVNode("div", {
 				id: unref(contentId),
 				class: "astryx-chat-drawer__grid",
 				"data-collapsed": canCollapse.value && collapsed.value ? "" : void 0,
@@ -1630,7 +1648,8 @@ const _sfc_main$15 = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const messages = useAstryxMessages();
-		const listening = computed(() => props.dictation.isListening);
+		const supported = computed(() => toValue(props.dictation.isSupported));
+		const listening = computed(() => toValue(props.dictation.isListening));
 		const label = computed(() => props.label ?? (listening.value ? messages.value.chat.stopDictation : messages.value.chat.startDictation));
 		const sizes = {
 			sm: {
@@ -1645,18 +1664,18 @@ const _sfc_main$15 = /*@__PURE__*/ defineComponent({
 			}
 		};
 		const metrics = computed(() => sizes[props.size]);
-		const bars = computed(() => props.dictation.bands.slice(0, BAR_COUNT).map((level, index) => ({
+		const bars = computed(() => toValue(props.dictation.bands).slice(0, BAR_COUNT).map((level, index) => ({
 			key: `band-${index}`,
 			scale: BAR_MIN + Math.min(Math.sqrt(level / .2), 1) * .92
 		})));
 		const clipping = computed(() => {
-			const volume = props.dictation.volume;
+			const volume = toValue(props.dictation.volume);
 			if (volume < .2) return 0;
 			return Math.min((volume - .2) / .1, 1) * 100;
 		});
 		const barColor = computed(() => clipping.value > 0 ? `color-mix(in srgb, var(--astryx-color-accent), var(--astryx-color-error) ${clipping.value}%)` : "var(--astryx-color-accent)");
 		return (_ctx, _cache) => {
-			return __props.dictation.isSupported || !__props.isHiddenWhenUnsupported ? (openBlock(), createElementBlock("span", mergeProps({ key: 0 }, _ctx.$attrs, { class: "astryx-chat-dictation" }), [listening.value ? (openBlock(), createElementBlock("span", {
+			return supported.value || !__props.isHiddenWhenUnsupported ? (openBlock(), createElementBlock("span", mergeProps({ key: 0 }, _ctx.$attrs, { class: "astryx-chat-dictation" }), [listening.value ? (openBlock(), createElementBlock("span", {
 				key: 0,
 				class: "astryx-chat-dictation__bars",
 				"aria-hidden": "true",
@@ -1679,7 +1698,7 @@ const _sfc_main$15 = /*@__PURE__*/ defineComponent({
 				variant: "ghost",
 				size: __props.size,
 				"is-icon-only": "",
-				"is-disabled": !__props.dictation.isSupported,
+				"is-disabled": !supported.value,
 				onClick: _cache[0] || (_cache[0] = ($event) => __props.dictation.toggle())
 			}, createSlots({ _: 2 }, [!listening.value ? {
 				name: "icon",
@@ -1746,7 +1765,7 @@ const _hoisted_3$7 = {
 	class: "astryx-chat-layout__empty"
 };
 const _hoisted_4$7 = ["data-density"];
-const _hoisted_5$5 = ["data-density"];
+const _hoisted_5$6 = ["data-density"];
 const _hoisted_6$4 = ["data-density"];
 const _hoisted_7$3 = ["data-density"];
 const _sfc_main$13 = /*@__PURE__*/ defineComponent({
@@ -1768,6 +1787,7 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 		const root = useTemplateRef("root");
 		const scrollTarget = computed(() => props.scrollRef ?? root.value);
 		const isSelfScrolling = computed(() => props.scrollRef == null);
+		useScrollbars(root, { enabled: isSelfScrolling });
 		const scroll = useChatStreamScroll({ scrollRef: scrollTarget });
 		const newMessages = useChatNewMessages({
 			isLocked: scroll.isLocked,
@@ -1818,7 +1838,7 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 				createElementVNode("div", {
 					class: "astryx-chat-layout__blur",
 					"data-density": __props.density
-				}, null, 8, _hoisted_5$5),
+				}, null, 8, _hoisted_5$6),
 				createElementVNode("div", {
 					class: "astryx-chat-layout__composer",
 					"data-density": __props.density
@@ -1844,7 +1864,7 @@ const _hoisted_2$8 = {
 };
 const _hoisted_3$6 = ["data-sender"];
 const _hoisted_4$6 = ["data-sender", "data-density"];
-const _hoisted_5$4 = {
+const _hoisted_5$5 = {
 	key: 1,
 	class: "astryx-chat-message__metadata"
 };
@@ -1903,7 +1923,7 @@ const _sfc_main$12 = /*@__PURE__*/ defineComponent({
 					"data-sender": __props.sender,
 					"data-density": density.value
 				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_4$6),
-				!isSystem.value && _ctx.$slots.metadata ? (openBlock(), createElementBlock("div", _hoisted_5$4, [renderSlot(_ctx.$slots, "metadata")])) : createCommentVNode("v-if", true)
+				!isSystem.value && _ctx.$slots.metadata ? (openBlock(), createElementBlock("div", _hoisted_5$5, [renderSlot(_ctx.$slots, "metadata")])) : createCommentVNode("v-if", true)
 			], 8, _hoisted_3$6)], 16, _hoisted_1$11);
 		};
 	}
@@ -1992,7 +2012,12 @@ const _hoisted_3$4 = {
 	class: "astryx-chat-message-list__loading"
 };
 const _hoisted_4$4 = {
-	key: 3,
+	key: 2,
+	class: "astryx-chat-message-list__spacer",
+	"aria-hidden": "true"
+};
+const _hoisted_5$4 = {
+	key: 4,
 	class: "astryx-chat-message-list__empty"
 };
 const _sfc_main$10 = /*@__PURE__*/ defineComponent({
@@ -2007,7 +2032,8 @@ const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: false
 		},
-		label: {}
+		label: {},
+		align: { default: "bottom" }
 	},
 	setup(__props) {
 		const props = __props;
@@ -2072,11 +2098,8 @@ const _sfc_main$10 = /*@__PURE__*/ defineComponent({
 					size: "md",
 					"aria-label": unref(messages).chat.toolRunning
 				}, null, 8, ["aria-label"])])) : createCommentVNode("v-if", true),
-				_cache[0] || (_cache[0] = createElementVNode("div", {
-					class: "astryx-chat-message-list__spacer",
-					"aria-hidden": "true"
-				}, null, -1)),
-				_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 2) : _ctx.$slots.empty ? (openBlock(), createElementBlock("div", _hoisted_4$4, [renderSlot(_ctx.$slots, "empty")])) : createCommentVNode("v-if", true)
+				__props.align === "bottom" ? (openBlock(), createElementBlock("div", _hoisted_4$4)) : createCommentVNode("v-if", true),
+				_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 3) : _ctx.$slots.emptyState || _ctx.$slots.empty ? (openBlock(), createElementBlock("div", _hoisted_5$4, [_ctx.$slots.emptyState ? renderSlot(_ctx.$slots, "emptyState", {}, void 0, void 0, 0) : renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 1)])) : createCommentVNode("v-if", true)
 			], 8, _hoisted_2$6)], 16, _hoisted_1$9);
 		};
 	}
@@ -2357,11 +2380,22 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
+		const slots = useSlots();
 		function escapeRegExp(value) {
 			return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 		}
-		const parts = computed(() => {
-			const text = props.text ?? "";
+		/** Text of the default slot. Only plain strings contribute; other content is ignored. */
+		function slotText() {
+			const nodes = slots.default?.();
+			if (!nodes) return "";
+			return nodes.map((node) => typeof node.children === "string" ? node.children : "").join("");
+		}
+		/**
+		* Splits the message into plain runs and token runs. Built during render so a
+		* new slot value from the parent re-splits on the same tick.
+		*/
+		function buildParts() {
+			const text = props.text ?? slotText();
 			const tokens = (props.tokens ?? []).filter((token) => token.value.length > 0);
 			if (text.length === 0 || tokens.length === 0) return [{
 				key: "all",
@@ -2394,9 +2428,9 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 				text: text.slice(last)
 			});
 			return rendered;
-		});
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, { class: "astryx-chat-tokenized" }), [(openBlock(true), createElementBlock(Fragment, null, renderList(parts.value, (part) => {
+			return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, { class: "astryx-chat-tokenized" }), [(openBlock(true), createElementBlock(Fragment, null, renderList(buildParts(), (part) => {
 				return openBlock(), createElementBlock(Fragment, { key: part.key }, [part.token ? (openBlock(), createElementBlock("span", _hoisted_1$5, [createVNode(_sfc_main$22, { token: part.token }, null, 8, ["token"])])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
 			}), 128))], 16);
 		};
@@ -2636,8 +2670,11 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		function rowKey(call, index) {
 			return call.key ?? `${call.name}\u001F${call.target ?? ""}\u001F${call.node ?? ""}\u001F${index}`;
 		}
+		function detailOf(call) {
+			return call.resultDetail ?? call.detail;
+		}
 		function expandable(call) {
-			return Boolean(call.detail) || Boolean(slots.detail);
+			return detailOf(call) != null || Boolean(slots.detail);
 		}
 		__expose({ element: root });
 		return (_ctx, _cache) => {
@@ -2651,7 +2688,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 				expandable: expandable(single.value)
 			}, createSlots({ _: 2 }, [expandable(single.value) ? {
 				name: "detail",
-				fn: withCtx(() => [renderSlot(_ctx.$slots, "detail", { call: single.value }, () => [createTextVNode(toDisplayString(single.value.detail), 1)])]),
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "detail", { call: single.value }, () => [createTextVNode(toDisplayString(detailOf(single.value)), 1)])]),
 				key: "0"
 			} : void 0]), 1032, ["call", "expandable"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("button", {
 				type: "button",
@@ -2695,7 +2732,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 					expandable: expandable(call)
 				}, createSlots({ _: 2 }, [expandable(call) ? {
 					name: "detail",
-					fn: withCtx(() => [renderSlot(_ctx.$slots, "detail", { call }, () => [createTextVNode(toDisplayString(call.detail), 1)])]),
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "detail", { call }, () => [createTextVNode(toDisplayString(detailOf(call)), 1)])]),
 					key: "0"
 				} : void 0]), 1032, ["call", "expandable"]);
 			}), 128))])])], 8, _hoisted_8)], 64))], 16)) : createCommentVNode("v-if", true);

package/dist/CheckboxInput/index.d.ts

@@ -1,2 +1,2 @@
-import { ai as CheckboxInputChangeAction, ci as CheckboxInputProps, ii as _default, li as CheckboxInputSlots, oi as CheckboxInputChangeEvent, si as CheckboxInputEmits, ui as CheckboxValue } from "../index-B9rqmYxh.js";
+import { Aa as CheckboxInputProps, Da as CheckboxInputChangeAction, Ea as _default, Ma as CheckboxValue, Oa as CheckboxInputChangeEvent, ja as CheckboxInputSlots, ka as CheckboxInputEmits } from "../index-DUaLJO7l.js";
 export { _default as CheckboxInput, type CheckboxInputChangeAction, type CheckboxInputChangeEvent, type CheckboxInputEmits, type CheckboxInputProps, type CheckboxInputSlots, type CheckboxValue };

package/dist/CheckboxInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../CheckboxInput-25Q8ItH-.js";
+import { t as _sfc_main } from "../CheckboxInput-BS9J6edf.js";
 export { _sfc_main as CheckboxInput };

package/dist/{CheckboxInput-25Q8ItH-.js → CheckboxInput-BS9J6edf.js}

@@ -1,8 +1,8 @@
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-DrqeomlE.js";
+import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
 import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
 import { i as useAriaRequired } from "./context-Cfjh8te1.js";
-import { t as _sfc_main$3 } from "./FieldLabel-DmmJyX7w.js";
+import { t as _sfc_main$3 } from "./FieldLabel-BNeXRuGH.js";
 import { t as _sfc_main$4 } from "./FieldStatus-MjY19ERl.js";
 import { t as useIndicator } from "./useIndicator-i1NORM7W.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";

package/dist/CheckboxList/index.d.ts

@@ -1,2 +1,2 @@
-import { $r as _default, Qr as _default$1, ei as CheckboxListEmits, ni as CheckboxListItemProps, ri as CheckboxListProps, ti as CheckboxListItemEmits } from "../index-B9rqmYxh.js";
+import { Ca as CheckboxListItemEmits, Sa as CheckboxListEmits, Ta as CheckboxListProps, ba as _default$1, wa as CheckboxListItemProps, xa as _default } from "../index-DUaLJO7l.js";
 export { _default as CheckboxList, type CheckboxListEmits, _default$1 as CheckboxListItem, type CheckboxListItemEmits, type CheckboxListItemProps, type CheckboxListProps };

package/dist/CheckboxList/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../CheckboxList-BlPf7vPe.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../CheckboxList-CX1i_jVP.js";
 export { _sfc_main as CheckboxList, _sfc_main$1 as CheckboxListItem };

package/dist/{CheckboxList-BlPf7vPe.js → CheckboxList-CX1i_jVP.js}

@@ -1,9 +1,9 @@
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { t as _sfc_main$2 } from "./Tooltip-C2fh9anJ.js";
-import { r as useItemDescriptionId } from "./Item-DrYJL1TG.js";
-import { t as _sfc_main$3 } from "./CheckboxInput-25Q8ItH-.js";
-import { t as _sfc_main$4 } from "./Field-8zRxzDHE.js";
-import { n as _sfc_main$5, t as _sfc_main$6 } from "./ListItem-CcRHWuEm.js";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { t as _sfc_main$2 } from "./Tooltip-C4Vaqd3G.js";
+import { r as useItemDescriptionId } from "./Item-KhFKX9St.js";
+import { t as _sfc_main$3 } from "./CheckboxInput-BS9J6edf.js";
+import { t as _sfc_main$4 } from "./Field-D5gUEGw4.js";
+import { n as _sfc_main$5, t as _sfc_main$6 } from "./ListItem-8RWT8XAG.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, inject, mergeModels, openBlock, provide, ref, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef, withCtx } from "vue";
 import "../styles/checkbox-list.css";
 import "../styles/visually-hidden-utility.css";
@@ -25,6 +25,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			default: false
 		},
 		isDisabled: { type: Boolean },
+		disabledMessage: {},
 		disabledReason: {},
 		isReadOnly: { type: Boolean },
 		changeAction: {},
@@ -49,7 +50,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const optimistic = ref(null);
 		const shown = computed(() => optimistic.value ?? model.value);
 		const groupDisabled = computed(() => props.isDisabled ?? false);
-		const disabledReason = computed(() => props.disabledReason?.trim() || void 0);
+		const disabledReason = computed(() => (props.disabledMessage ?? props.disabledReason)?.trim() || void 0);
 		const showsReason = computed(() => groupDisabled.value && disabledReason.value != null);
 		function toggle(value, checked) {
 			if (props.isReadOnly || pending.value.includes(value)) return;

package/dist/Citation/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Citation-BG-vg9ia.js";
+import { t as _sfc_main } from "../Citation-Djgwa0ko.js";
 export { _sfc_main as Citation };

package/dist/{Citation-BG-vg9ia.js → Citation-Djgwa0ko.js}

@@ -1,4 +1,4 @@
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
 import { t as _sfc_main$1 } from "./Icon-bteSId7T.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, openBlock, toDisplayString, useTemplateRef } from "vue";
 import "../styles/citation.css";

package/dist/ClickableCard/index.d.ts

@@ -1,2 +1,2 @@
-import { Jr as _default, Xr as ClickableCardProps, Yr as ClickableCardEmits, Zr as ClickableCardSlots } from "../index-B9rqmYxh.js";
+import { _a as ClickableCardEmits, ga as _default, va as ClickableCardProps, ya as ClickableCardSlots } from "../index-DUaLJO7l.js";
 export { _default as ClickableCard, _default as default, type ClickableCardEmits, type ClickableCardProps, type ClickableCardSlots };

package/dist/ClickableCard/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as ClickableCard_default } from "../ClickableCard-Bhds4RRe.js";
+import { n as _sfc_main, t as ClickableCard_default } from "../ClickableCard-DUsC-j03.js";
 export { _sfc_main as ClickableCard, ClickableCard_default as default };

package/dist/{ClickableCard-Bhds4RRe.js → ClickableCard-DUsC-j03.js}

@@ -1,6 +1,6 @@
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
 import { n as useClickableContainer } from "./useClickableContainer-DyNpnSEa.js";
-import { t as _sfc_main$2 } from "./Card-HAjZQg2s.js";
+import { t as _sfc_main$2 } from "./Card-B-I24X9S.js";
 import { computed, createBlock, defineComponent, openBlock, renderSlot, useTemplateRef, withCtx } from "vue";
 import "../styles/clickable-card.css";
 //#region src/ClickableCard/ClickableCard.vue

package/dist/Code/index.d.ts

@@ -1,4 +1,4 @@
 import { a as SyntaxThemeInput, c as SyntaxTokenValue, i as SyntaxThemeDefinition, l as defineSyntaxTheme, n as SYNTAX_TOKEN_KEYS, o as SyntaxThemeTokens, r as SyntaxDiffTokenKey, s as SyntaxTokenKey, t as DIFF_SYNTAX_TOKEN_KEYS, u as githubDark } from "../syntaxTheme-CwVEcVDk.js";
-import { A as _default, B as CodeSlots, C as applyHighlightRanges, D as parseFenceLanguage, E as diffLineKind, F as CodeBlockTokenizer, H as TokenLine, I as CodeColor, L as CodeHighlightMode, M as CodeBlockEmits, N as CodeBlockProps, O as splitDiffLines, P as CodeBlockSize, R as CodeProps, S as HIGHLIGHTED_TOKEN_TYPES, T as DiffLines, V as SyntaxToken, _ as oneDarkPro, a as tokenize, b as tokyoNight, c as allSyntaxPresets, d as darkSyntaxPresets, f as dracula, g as nord, h as monokai, i as flatTokensToLines, j as CodeBlockContainer, k as _default$1, l as catppuccinLatte, m as lightSyntaxPresets, n as useSyntaxTheme, o as tokenizeAsync, p as githubLight, r as SYNC_TOKENIZE_THRESHOLD, s as _default$2, t as UseSyntaxThemeReturn, u as catppuccinMocha, v as oneLight, w as DiffLineKind, x as tokyoNightLight, y as solarizedLight, z as CodeSize } from "../index-D5N9ikrS.js";
+import { A as _default, B as CodeSlots, C as applyHighlightRanges, D as parseFenceLanguage, E as diffLineKind, F as CodeBlockTokenizer, H as TokenLine, I as CodeColor, L as CodeHighlightMode, M as CodeBlockEmits, N as CodeBlockProps, O as splitDiffLines, P as CodeBlockSize, R as CodeProps, S as HIGHLIGHTED_TOKEN_TYPES, T as DiffLines, V as SyntaxToken, _ as oneDarkPro, a as tokenize, b as tokyoNight, c as allSyntaxPresets, d as darkSyntaxPresets, f as dracula, g as nord, h as monokai, i as flatTokensToLines, j as CodeBlockContainer, k as _default$1, l as catppuccinLatte, m as lightSyntaxPresets, n as useSyntaxTheme, o as tokenizeAsync, p as githubLight, r as SYNC_TOKENIZE_THRESHOLD, s as _default$2, t as UseSyntaxThemeReturn, u as catppuccinMocha, v as oneLight, w as DiffLineKind, x as tokyoNightLight, y as solarizedLight, z as CodeSize } from "../index-hCpxKePE.js";
 import { n as UseClipboardReturn, r as useClipboard, t as UseClipboardOptions } from "../useClipboard-CU-kfqeJ.js";
 export { _default as Code, _default$1 as CodeBlock, type CodeBlockContainer, type CodeBlockEmits, type CodeBlockProps, type CodeBlockSize, type CodeBlockTokenizer, type CodeColor, type CodeHighlightMode, type CodeProps, type CodeSize, type CodeSlots, type UseClipboardOptions as CopyToClipboardOptions, type UseClipboardReturn as CopyToClipboardReturn, DIFF_SYNTAX_TOKEN_KEYS, type DiffLineKind, type DiffLines, HIGHLIGHTED_TOKEN_TYPES, SYNC_TOKENIZE_THRESHOLD, SYNTAX_TOKEN_KEYS, type SyntaxDiffTokenKey, _default$2 as SyntaxTheme, type SyntaxThemeDefinition, type SyntaxThemeInput, type SyntaxThemeTokens, type SyntaxToken, type SyntaxTokenKey, type SyntaxTokenValue, type TokenLine, type UseSyntaxThemeReturn, allSyntaxPresets, applyHighlightRanges, catppuccinLatte, catppuccinMocha, darkSyntaxPresets, defineSyntaxTheme, diffLineKind, dracula, flatTokensToLines, githubDark, githubLight, lightSyntaxPresets, monokai, nord, oneDarkPro, oneLight, parseFenceLanguage, solarizedLight, splitDiffLines, tokenize, tokenizeAsync, tokyoNight, tokyoNightLight, useClipboard as useCopyToClipboard, useSyntaxTheme };

package/dist/Code/index.js

@@ -1,5 +1,5 @@
 import { t as useClipboard } from "../useClipboard-BDfbEsWd.js";
-import { a as tokenizeAsync, c as splitDiffLines, d as _sfc_main, i as tokenize, l as HIGHLIGHTED_TOKEN_TYPES, n as SYNC_TOKENIZE_THRESHOLD, o as diffLineKind, r as flatTokensToLines, s as parseFenceLanguage, t as _sfc_main$1, u as applyHighlightRanges } from "../CodeBlock-B2pnEOJY.js";
+import { a as tokenizeAsync, c as splitDiffLines, d as _sfc_main, i as tokenize, l as HIGHLIGHTED_TOKEN_TYPES, n as SYNC_TOKENIZE_THRESHOLD, o as diffLineKind, r as flatTokensToLines, s as parseFenceLanguage, t as _sfc_main$1, u as applyHighlightRanges } from "../CodeBlock-D0BFubut.js";
 import { i as githubDark, n as SYNTAX_TOKEN_KEYS, r as defineSyntaxTheme, t as DIFF_SYNTAX_TOKEN_KEYS } from "../syntaxTheme-R7xnu5x5.js";
 import { a as catppuccinMocha, c as githubLight, d as nord, f as oneDarkPro, g as tokyoNightLight, h as tokyoNight, i as catppuccinLatte, l as lightSyntaxPresets, m as solarizedLight, n as _sfc_main$2, o as darkSyntaxPresets, p as oneLight, r as allSyntaxPresets, s as dracula, t as useSyntaxTheme, u as monokai } from "../Code-XnPuGxey.js";
 export { _sfc_main as Code, _sfc_main$1 as CodeBlock, DIFF_SYNTAX_TOKEN_KEYS, HIGHLIGHTED_TOKEN_TYPES, SYNC_TOKENIZE_THRESHOLD, SYNTAX_TOKEN_KEYS, _sfc_main$2 as SyntaxTheme, allSyntaxPresets, applyHighlightRanges, catppuccinLatte, catppuccinMocha, darkSyntaxPresets, defineSyntaxTheme, diffLineKind, dracula, flatTokensToLines, githubDark, githubLight, lightSyntaxPresets, monokai, nord, oneDarkPro, oneLight, parseFenceLanguage, solarizedLight, splitDiffLines, tokenize, tokenizeAsync, tokyoNight, tokyoNightLight, useClipboard as useCopyToClipboard, useSyntaxTheme };

package/dist/{CodeBlock-B2pnEOJY.js → CodeBlock-D0BFubut.js}

@@ -1,6 +1,7 @@
 import { t as _sfc_main$3 } from "./VisuallyHidden-C7NN3VEP.js";
 import { t as useClipboard } from "./useClipboard-BDfbEsWd.js";
-import { t as _sfc_main$4 } from "./IconButton-BNQuz9W_.js";
+import { t as _sfc_main$4 } from "./IconButton-DDNgNl7B.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { t as _sfc_main$5 } from "./Icon-bteSId7T.js";
 import { a as syntaxThemeStyle } from "./syntaxTheme-R7xnu5x5.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useId, useTemplateRef, watch, withCtx, withModifiers } from "vue";
@@ -161,6 +162,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const code = useTemplateRef("code");
+		const scrollEl = useTemplateRef("scroll");
+		useScrollbars(scrollEl);
 		const chunks = computed(() => {
 			const lines = props.lines;
 			if (lines.length < CHUNK_THRESHOLD) return [{
@@ -252,6 +255,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		onBeforeUnmount(() => removeRanges?.());
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
+				ref: "scroll",
 				class: "astryx-code-block__scroll",
 				role: "group",
 				tabindex: "0",

package/dist/Collapsible/index.d.ts

@@ -1,2 +1,2 @@
-import { a as CollapsibleGroupDensity, c as _default, d as CollapsibleProps, f as CollapsibleSlots, i as CollapsibleGroupSlots, l as CollapsibleChevronPosition, n as CollapsibleGroupEmits, o as CollapsibleGroupType, r as CollapsibleGroupProps, s as CollapsibleGroupValue, t as _default$1, u as CollapsibleEmits } from "../index-BcJBLWJ0.js";
-export { _default as Collapsible, type CollapsibleChevronPosition, type CollapsibleEmits, _default$1 as CollapsibleGroup, type CollapsibleGroupDensity, type CollapsibleGroupEmits, type CollapsibleGroupProps, type CollapsibleGroupSlots, type CollapsibleGroupType, type CollapsibleGroupValue, type CollapsibleProps, type CollapsibleSlots };
+import { a as _default$1, c as CollapsibleGroupSlots, d as CollapsibleGroupValue, f as _default, g as CollapsibleSlots, h as CollapsibleProps, i as useCollapsible, l as CollapsibleGroupDensity, m as CollapsibleEmits, n as UseCollapsibleOptions, o as CollapsibleGroupEmits, p as CollapsibleChevronPosition, r as UseCollapsibleReturn, s as CollapsibleGroupProps, t as CollapsibleConfig, u as CollapsibleGroupType } from "../index-BkjSF265.js";
+export { _default as Collapsible, type CollapsibleChevronPosition, type CollapsibleConfig, type CollapsibleEmits, _default$1 as CollapsibleGroup, type CollapsibleGroupDensity, type CollapsibleGroupEmits, type CollapsibleGroupProps, type CollapsibleGroupSlots, type CollapsibleGroupType, type CollapsibleGroupValue, type CollapsibleProps, type CollapsibleSlots, type UseCollapsibleOptions, type UseCollapsibleReturn, useCollapsible };

package/dist/Collapsible/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../Collapsible-3YerR-FO.js";
-export { _sfc_main as Collapsible, _sfc_main$1 as CollapsibleGroup };
+import { n as _sfc_main, r as useCollapsible, t as _sfc_main$1 } from "../Collapsible-Cov3Pyq5.js";
+export { _sfc_main as Collapsible, _sfc_main$1 as CollapsibleGroup, useCollapsible };