@vizejs/fresco 0.719.0 → 0.721.0

package/dist/{components-DzkL-yHj.mjs → components-B-HgL5id.mjs}

@@ -1,6 +1,6 @@
-import { A as useFocusManager, O as provideFocusScope, k as useFocus, m as getLastRenderLayout } from "./app-C_wFlWSV.mjs";
-import { a as useInput, c as useIsScreenReaderEnabled, i as useMouse, n as createVirtualViewport, t as useBoxMetrics } from "./useBoxMetrics-lF5Myjc7.mjs";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import { A as useFocusManager, O as provideFocusScope, k as useFocus, m as getLastRenderLayout } from "./app-CjfLCWic.mjs";
+import { a as useInput, c as useIsScreenReaderEnabled, i as useMouse, n as createVirtualViewport, t as useBoxMetrics } from "./useBoxMetrics-BMD1acRU.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
 //#region src/components/Box.ts
 /**
 * Box Component - Container with flexbox layout
@@ -56,6 +56,7 @@ const Box = defineComponent({
 		overflow: String,
 		overflowX: String,
 		overflowY: String,
+		focusId: String,
 		border: String,
 		borderStyle: String,
 		borderTop: Boolean,
@@ -145,7 +146,8 @@ const Box = defineComponent({
 				"aria-label": props.ariaLabel,
 				"aria-hidden": props.ariaHidden,
 				"aria-role": props.ariaRole,
-				"aria-state": props.ariaState
+				"aria-state": props.ariaState,
+				focusId: props.focusId
 			}, children);
 		};
 	}
@@ -166,11 +168,11 @@ var FrescoSpacer_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/FrescoDivider.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$11 = ["fg"];
-const _hoisted_2$8 = ["fg"];
-const _hoisted_3$7 = ["fg"];
-const _hoisted_4$3 = ["fg"];
-const _hoisted_5$2 = ["fg"];
+const _hoisted_1$10 = ["fg"];
+const _hoisted_2$7 = ["fg"];
+const _hoisted_3$6 = ["fg"];
+const _hoisted_4$2 = ["fg"];
+const _hoisted_5$1 = ["fg"];
 //#endregion
 //#region src/components/FrescoDivider.vue
 var FrescoDivider_default = /* @__PURE__ */ defineComponent({
@@ -211,20 +213,20 @@ var FrescoDivider_default = /* @__PURE__ */ defineComponent({
 			return __props.direction === "vertical" ? (openBlock(), createElementBlock("text", {
 				key: 0,
 				fg: __props.fg
-			}, toDisplayString(dividerChar.value), 9, _hoisted_1$11)) : __props.title ? (openBlock(), createElementBlock("div", {
+			}, toDisplayString(dividerChar.value), 9, _hoisted_1$10)) : __props.title ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				style: titleRowStyle
 			}, [
-				createElementVNode("text", { fg: __props.fg }, toDisplayString(dividerChar.value.repeat(3)), 9, _hoisted_2$8),
+				createElementVNode("text", { fg: __props.fg }, toDisplayString(dividerChar.value.repeat(3)), 9, _hoisted_2$7),
 				createElementVNode("text", {
 					fg: __props.titleFg ?? __props.fg,
 					bold: true
-				}, toDisplayString(titleLabel.value), 9, _hoisted_3$7),
-				createElementVNode("text", { fg: __props.fg }, toDisplayString(dividerChar.value.repeat(3)), 9, _hoisted_4$3)
+				}, toDisplayString(titleLabel.value), 9, _hoisted_3$6),
+				createElementVNode("text", { fg: __props.fg }, toDisplayString(dividerChar.value.repeat(3)), 9, _hoisted_4$2)
 			])) : (openBlock(), createElementBlock("text", {
 				key: 2,
 				fg: __props.fg
-			}, toDisplayString(dividerChar.value.repeat(40)), 9, _hoisted_5$2));
+			}, toDisplayString(dividerChar.value.repeat(40)), 9, _hoisted_5$1));
 		};
 	}
 });
@@ -417,17 +419,17 @@ const Grid = defineComponent({
 });
 //#endregion
 //#region src/components/FrescoCard.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$10 = [
+const _hoisted_1$9 = [
 	"border",
 	"fg",
 	"bg"
 ];
-const _hoisted_2$7 = ["fg"];
-const _hoisted_3$6 = {
+const _hoisted_2$6 = ["fg"];
+const _hoisted_3$5 = {
 	key: 1,
 	dim: true
 };
-const _hoisted_4$2 = { dim: true };
+const _hoisted_4$1 = { dim: true };
 //#endregion
 //#region src/components/FrescoCard.vue
 var FrescoCard_default = /* @__PURE__ */ defineComponent({
@@ -499,13 +501,13 @@ var FrescoCard_default = /* @__PURE__ */ defineComponent({
 					key: 0,
 					fg: __props.titleFg,
 					bold: true
-				}, toDisplayString(__props.title), 9, _hoisted_2$7)) : createCommentVNode("v-if", true), __props.subtitle ? (openBlock(), createElementBlock("text", _hoisted_3$6, toDisplayString(subtitleLabel.value), 1)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
+				}, toDisplayString(__props.title), 9, _hoisted_2$6)) : createCommentVNode("v-if", true), __props.subtitle ? (openBlock(), createElementBlock("text", _hoisted_3$5, toDisplayString(subtitleLabel.value), 1)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
 				createElementVNode("div", { style: contentStyle }, [renderSlot(_ctx.$slots, "default")]),
 				hasFooter.value ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					style: footerStyle
-				}, [renderSlot(_ctx.$slots, "footer", {}, () => [createElementVNode("text", _hoisted_4$2, toDisplayString(__props.footer), 1)])])) : createCommentVNode("v-if", true)
-			], 12, _hoisted_1$10);
+				}, [renderSlot(_ctx.$slots, "footer", {}, () => [createElementVNode("text", _hoisted_4$1, toDisplayString(__props.footer), 1)])])) : createCommentVNode("v-if", true)
+			], 12, _hoisted_1$9);
 		};
 	}
 });
@@ -1020,7 +1022,7 @@ var ScrollBox_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/FrescoNewline.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$9 = ["text"];
+const _hoisted_1$8 = ["text"];
 //#endregion
 //#region src/components/FrescoNewline.vue
 var FrescoNewline_default = /* @__PURE__ */ defineComponent({
@@ -1034,7 +1036,7 @@ var FrescoNewline_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const content = computed(() => "\n".repeat(Math.max(0, __props.count)));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("text", { text: content.value }, null, 8, _hoisted_1$9);
+			return openBlock(), createElementBlock("text", { text: content.value }, null, 8, _hoisted_1$8);
 		};
 	}
 });
@@ -1085,7 +1087,7 @@ var FrescoStatic_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/components/FrescoTransform.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$8 = ["text", "aria-label"];
+const _hoisted_1$7 = ["text", "aria-label"];
 //#endregion
 //#region src/components/FrescoTransform.vue
 var FrescoTransform_default = /* @__PURE__ */ defineComponent({
@@ -1113,7 +1115,7 @@ var FrescoTransform_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("text", {
 				text: content.value,
 				"aria-label": __props.accessibilityLabel
-			}, null, 8, _hoisted_1$8);
+			}, null, 8, _hoisted_1$7);
 		};
 	}
 });
@@ -1846,7 +1848,7 @@ function renderMarkdown(source, options = {}, renderer = defaultMarkdownRenderer
 }
 //#endregion
 //#region src/components/FrescoMarkdown.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$7 = [
+const _hoisted_1$6 = [
 	"text",
 	"fg",
 	"bold",
@@ -1914,7 +1916,7 @@ var FrescoMarkdown_default = /* @__PURE__ */ defineComponent({
 						italic: span.italic,
 						underline: span.underline,
 						dim: span.dim
-					}, null, 8, _hoisted_1$7);
+					}, null, 8, _hoisted_1$6);
 				}), 128))]);
 			}), 128))]);
 		};
@@ -2452,8 +2454,8 @@ const Diff = defineComponent({
 });
 //#endregion
 //#region src/components/FrescoLink.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$6 = ["fg", "underline"];
-const _hoisted_2$6 = {
+const _hoisted_1$5 = ["fg", "underline"];
+const _hoisted_2$5 = {
 	key: 0,
 	dim: true
 };
@@ -2493,7 +2495,7 @@ var FrescoLink_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("div", { style: rowStyle }, [createElementVNode("text", {
 				fg: __props.fg,
 				underline: __props.underline
-			}, toDisplayString(__props.text), 9, _hoisted_1$6), __props.showUrl && __props.url ? (openBlock(), createElementBlock("text", _hoisted_2$6, " (" + toDisplayString(__props.url) + ")", 1)) : createCommentVNode("v-if", true)]);
+			}, toDisplayString(__props.text), 9, _hoisted_1$5), __props.showUrl && __props.url ? (openBlock(), createElementBlock("text", _hoisted_2$5, " (" + toDisplayString(__props.url) + ")", 1)) : createCommentVNode("v-if", true)]);
 		};
 	}
 });
@@ -3337,10 +3339,23 @@ function visibleCollectionOffset(highlightedIndex, currentOffset, windowSize, it
 	return Math.min(currentOffset, maximumOffset);
 }
 //#endregion
+//#region src/components/collection-values.ts
+/** Compare collection values by identity, an object key, or a custom comparator. */
+function collectionValuesEqual(left, right, by) {
+	if (typeof by === "function") return by(left, right);
+	if (by !== void 0 && typeof left === "object" && left !== null && typeof right === "object" && right !== null) return Object.is(Reflect.get(left, by), Reflect.get(right, by));
+	return Object.is(left, right);
+}
+//#endregion
 //#region src/components/Select.ts
 /**
 * Select Component - Dropdown/menu selection
 */
+function optionKey(option, index) {
+	if (option.key !== void 0) return option.key;
+	const value = option.value;
+	return typeof value === "string" || typeof value === "number" || typeof value === "symbol" ? value : index;
+}
 const Select = defineComponent({
 	name: "Select",
 	props: {
@@ -3348,11 +3363,18 @@ const Select = defineComponent({
 			type: Array,
 			required: true
 		},
-		modelValue: String,
+		modelValue: null,
+		by: [
+			String,
+			Number,
+			Symbol,
+			Function
+		],
 		placeholder: {
 			type: String,
 			default: "Select an option"
 		},
+		maxHeight: Number,
 		focused: {
 			type: Boolean,
 			default: false
@@ -3375,20 +3397,33 @@ const Select = defineComponent({
 	},
 	emits: ["update:modelValue", "select"],
 	setup(props, { emit }) {
+		const scrollOffset = ref(0);
 		const highlightedIndex = ref(-1);
 		const typeahead = createTypeaheadBuffer();
-		watch(() => props.modelValue, (value) => {
-			const selectedIndex = props.options.findIndex((option) => option.value === value && !option.disabled);
+		const viewportSize = computed(() => {
+			if (props.maxHeight === void 0 || !Number.isFinite(props.maxHeight)) return void 0;
+			return props.maxHeight > 0 ? Math.max(1, Math.floor(props.maxHeight)) : void 0;
+		});
+		watch([() => props.modelValue, () => props.by], (value) => {
+			const selectedIndex = props.options.findIndex((option) => collectionValuesEqual(option.value, value[0], value[1]) && !option.disabled);
 			highlightedIndex.value = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex(props.options);
 		}, { immediate: true });
 		watch(() => props.options, (options) => {
 			if (highlightedIndex.value < 0 || highlightedIndex.value >= options.length || options[highlightedIndex.value]?.disabled) highlightedIndex.value = firstEnabledIndex(options);
 		}, { deep: true });
+		watch([
+			highlightedIndex,
+			viewportSize,
+			() => props.options.length
+		], ([index, windowSize]) => {
+			scrollOffset.value = visibleCollectionOffset(index, scrollOffset.value, windowSize, props.options.length);
+		}, { immediate: true });
 		const activate = () => {
 			const option = props.options[highlightedIndex.value];
 			if (!option || option.disabled) return;
-			emit("update:modelValue", option.value);
-			emit("select", option.value);
+			const value = toRaw(option.value);
+			emit("update:modelValue", value);
+			emit("select", value);
 		};
 		useInput({
 			isActive: computed(() => props.focused),
@@ -3405,20 +3440,49 @@ const Select = defineComponent({
 			},
 			onSubmit: activate
 		});
+		const visibleOptions = computed(() => {
+			const windowSize = viewportSize.value;
+			const start = windowSize === void 0 ? 0 : scrollOffset.value;
+			const end = windowSize === void 0 ? props.options.length : start + windowSize;
+			return props.options.slice(start, end).map((option, visibleIndex) => ({
+				option,
+				index: start + visibleIndex
+			}));
+		});
+		const scrollIndicator = computed(() => {
+			const windowSize = viewportSize.value;
+			if (windowSize === void 0 || props.options.length <= windowSize) return {
+				showUp: false,
+				showDown: false
+			};
+			return {
+				showUp: scrollOffset.value > 0,
+				showDown: scrollOffset.value + windowSize < props.options.length
+			};
+		});
 		return () => {
-			const children = props.options.map((option, index) => {
+			const children = [];
+			if (scrollIndicator.value.showUp) children.push(h("text", {
+				key: "scroll-up",
+				dim: true
+			}, "  ..."));
+			for (const { option, index } of visibleOptions.value) {
 				const isHighlighted = index === highlightedIndex.value;
-				const isSelected = option.value === props.modelValue;
+				const isSelected = collectionValuesEqual(option.value, props.modelValue, props.by);
 				const indicator = isHighlighted ? props.indicator : props.indicatorEmpty;
-				return h("box", {
-					key: option.value,
+				children.push(h("box", {
+					key: optionKey(option, index),
 					style: { flex_direction: "row" }
 				}, [h("text", {
 					fg: isHighlighted ? props.selectedFg : props.fg,
 					bg: isHighlighted ? props.selectedBg : props.bg,
 					dim: option.disabled
-				}, `${indicator}${option.label}${isSelected ? " (selected)" : ""}`)]);
-			});
+				}, `${indicator}${option.label}${isSelected ? " (selected)" : ""}`)]));
+			}
+			if (scrollIndicator.value.showDown) children.push(h("text", {
+				key: "scroll-down",
+				dim: true
+			}, "  ..."));
 			return h("box", {
 				style: { flex_direction: "column" },
 				fg: props.fg,
@@ -3428,6 +3492,95 @@ const Select = defineComponent({
 	}
 });
 //#endregion
+//#region src/components/FrescoSelect.vue
+var FrescoSelect_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoSelect",
+	__name: "FrescoSelect",
+	props: {
+		options: {
+			type: Array,
+			required: true
+		},
+		modelValue: {
+			type: null,
+			required: false
+		},
+		by: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		maxHeight: {
+			type: Number,
+			required: false
+		},
+		focused: {
+			type: Boolean,
+			required: false
+		},
+		indicator: {
+			type: String,
+			required: false
+		},
+		indicatorEmpty: {
+			type: String,
+			required: false
+		},
+		fg: {
+			type: String,
+			required: false
+		},
+		bg: {
+			type: String,
+			required: false
+		},
+		selectedFg: {
+			type: String,
+			required: false
+		},
+		selectedBg: {
+			type: String,
+			required: false
+		}
+	},
+	emits: ["update:modelValue", "select"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const runtimeProps = computed(() => {
+			return {
+				options: __props.options,
+				modelValue: __props.modelValue,
+				by: typeof __props.by === "function" ? (left, right) => __props.by(left, right) : __props.by,
+				placeholder: __props.placeholder,
+				maxHeight: __props.maxHeight,
+				focused: __props.focused,
+				indicator: __props.indicator,
+				indicatorEmpty: __props.indicatorEmpty,
+				fg: __props.fg,
+				bg: __props.bg,
+				selectedFg: __props.selectedFg,
+				selectedBg: __props.selectedBg
+			};
+		});
+		function updateModelValue(value) {
+			emit("update:modelValue", value);
+		}
+		function selectValue(value) {
+			emit("select", value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Select), mergeProps(runtimeProps.value, {
+				"onUpdate:modelValue": updateModelValue,
+				onSelect: selectValue
+			}), null, 16);
+		};
+	}
+});
+//#endregion
 //#region src/components/Checkbox.ts
 /**
 * Checkbox Component - Toggle checkbox
@@ -4410,9 +4563,9 @@ const avatarStatusIcons = {
 };
 //#endregion
 //#region src/components/FrescoAlert.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$5 = ["border", "fg"];
-const _hoisted_2$5 = ["fg"];
-const _hoisted_3$5 = ["fg"];
+const _hoisted_1$4 = ["border", "fg"];
+const _hoisted_2$4 = ["fg"];
+const _hoisted_3$4 = ["fg"];
 //#endregion
 //#region src/components/FrescoAlert.vue
 var FrescoAlert_default = /* @__PURE__ */ defineComponent({
@@ -4461,18 +4614,18 @@ var FrescoAlert_default = /* @__PURE__ */ defineComponent({
 			}, [createElementVNode("div", { style: headerStyle }, [__props.showIcon ? (openBlock(), createElementBlock("text", {
 				key: 0,
 				fg: config.value.fg
-			}, toDisplayString(iconLabel.value), 9, _hoisted_2$5)) : createCommentVNode("v-if", true), createElementVNode("text", {
+			}, toDisplayString(iconLabel.value), 9, _hoisted_2$4)) : createCommentVNode("v-if", true), createElementVNode("text", {
 				fg: config.value.fg,
 				bold: true
-			}, toDisplayString(heading.value), 9, _hoisted_3$5)]), createElementVNode("text", { style: messageStyle }, toDisplayString(__props.message), 1)], 8, _hoisted_1$5);
+			}, toDisplayString(heading.value), 9, _hoisted_3$4)]), createElementVNode("text", { style: messageStyle }, toDisplayString(__props.message), 1)], 8, _hoisted_1$4);
 		};
 	}
 });
 //#endregion
 //#region src/components/FrescoBadge.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$4 = ["fg", "bg"];
-const _hoisted_2$4 = ["fg", "bg"];
-const _hoisted_3$4 = ["fg", "bg"];
+const _hoisted_1$3 = ["fg", "bg"];
+const _hoisted_2$3 = ["fg", "bg"];
+const _hoisted_3$3 = ["fg", "bg"];
 //#endregion
 //#region src/components/FrescoBadge.vue
 var FrescoBadge_default = /* @__PURE__ */ defineComponent({
@@ -4520,12 +4673,12 @@ var FrescoBadge_default = /* @__PURE__ */ defineComponent({
 			}, [createElementVNode("text", {
 				fg: foreground.value,
 				bg: background.value
-			}, toDisplayString(__props.label), 9, _hoisted_2$4)], 8, _hoisted_1$4)) : (openBlock(), createElementBlock("text", {
+			}, toDisplayString(__props.label), 9, _hoisted_2$3)], 8, _hoisted_1$3)) : (openBlock(), createElementBlock("text", {
 				key: 1,
 				fg: foreground.value,
 				bg: background.value,
 				bold: true
-			}, "[" + toDisplayString(__props.label) + "]", 9, _hoisted_3$4));
+			}, "[" + toDisplayString(__props.label) + "]", 9, _hoisted_3$3));
 		};
 	}
 });
@@ -4648,17 +4801,6 @@ const Timer = defineComponent({
 	}
 });
 //#endregion
-//#region src/components/FrescoTooltip.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$3 = { key: 0 };
-const _hoisted_2$3 = [
-	"border",
-	"bg",
-	"fg"
-];
-const _hoisted_3$3 = ["fg", "bg"];
-const _hoisted_4$1 = { key: 1 };
-const _hoisted_5$1 = { key: 1 };
-//#endregion
 //#region src/components/FrescoTooltip.vue
 var FrescoTooltip_default = /* @__PURE__ */ defineComponent({
 	name: "FrescoTooltip",
@@ -4678,6 +4820,11 @@ var FrescoTooltip_default = /* @__PURE__ */ defineComponent({
 			required: false,
 			default: "top"
 		},
+		offset: {
+			type: Number,
+			required: false,
+			default: 0
+		},
 		border: {
 			type: String,
 			required: false,
@@ -4695,29 +4842,70 @@ var FrescoTooltip_default = /* @__PURE__ */ defineComponent({
 		}
 	},
 	setup(__props) {
-		const containerStyle = computed(() => ({ flexDirection: __props.position === "left" || __props.position === "right" ? "row" : "column" }));
-		const tooltipStyle = {
-			paddingLeft: 1,
-			paddingRight: 1
-		};
-		const contentComesFirst = computed(() => __props.position === "bottom" || __props.position === "right");
+		const panelPosition = computed(() => {
+			const gap = Number.isFinite(__props.offset) ? Math.max(0, __props.offset) : 0;
+			switch (__props.position) {
+				case "bottom": return {
+					top: "100%",
+					marginTop: gap
+				};
+				case "right": return {
+					left: "100%",
+					marginLeft: gap
+				};
+				case "left": return {
+					right: "100%",
+					marginRight: gap
+				};
+				default: return {
+					bottom: "100%",
+					marginBottom: gap
+				};
+			}
+		});
 		return (_ctx, _cache) => {
-			return __props.visible ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				style: normalizeStyle(containerStyle.value)
-			}, [
-				contentComesFirst.value ? (openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("v-if", true),
-				createElementVNode("div", {
+			return openBlock(), createBlock(unref(Box), { position: "relative" }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), __props.visible ? (openBlock(), createBlock(unref(Box), {
+					key: 0,
+					position: "absolute",
+					top: panelPosition.value.top,
+					right: panelPosition.value.right,
+					bottom: panelPosition.value.bottom,
+					left: panelPosition.value.left,
+					"margin-top": panelPosition.value.marginTop,
+					"margin-right": panelPosition.value.marginRight,
+					"margin-bottom": panelPosition.value.marginBottom,
+					"margin-left": panelPosition.value.marginLeft,
 					border: __props.border === "none" ? void 0 : __props.border,
 					bg: __props.bg,
 					fg: __props.fg,
-					style: tooltipStyle
-				}, [createElementVNode("text", {
-					fg: __props.fg,
-					bg: __props.bg
-				}, toDisplayString(__props.text), 9, _hoisted_3$3)], 8, _hoisted_2$3),
-				!contentComesFirst.value ? (openBlock(), createElementBlock("div", _hoisted_4$1, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("v-if", true)
-			], 4)) : (openBlock(), createElementBlock("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "default")]));
+					"padding-x": 1
+				}, {
+					default: withCtx(() => [createVNode(unref(Text), {
+						content: __props.text,
+						fg: __props.fg,
+						bg: __props.bg
+					}, null, 8, [
+						"content",
+						"fg",
+						"bg"
+					])]),
+					_: 1
+				}, 8, [
+					"top",
+					"right",
+					"bottom",
+					"left",
+					"margin-top",
+					"margin-right",
+					"margin-bottom",
+					"margin-left",
+					"border",
+					"bg",
+					"fg"
+				])) : createCommentVNode("v-if", true)]),
+				_: 3
+			});
 		};
 	}
 });
@@ -4726,6 +4914,9 @@ var FrescoTooltip_default = /* @__PURE__ */ defineComponent({
 /**
 * List Component - Scrollable list of items
 */
+function listItemValue(item) {
+	return Object.hasOwn(item, "value") ? item.value : item.key;
+}
 const List = defineComponent({
 	name: "List",
 	props: {
@@ -4733,7 +4924,13 @@ const List = defineComponent({
 			type: Array,
 			required: true
 		},
-		modelValue: String,
+		modelValue: null,
+		by: [
+			String,
+			Number,
+			Symbol,
+			Function
+		],
 		maxHeight: Number,
 		focused: {
 			type: Boolean,
@@ -4760,11 +4957,15 @@ const List = defineComponent({
 		const highlightedIndex = ref(-1);
 		const typeahead = createTypeaheadBuffer();
 		const syncHighlight = () => {
-			const selectedIndex = props.items.findIndex((item) => item.key === props.modelValue && !item.disabled);
+			const selectedIndex = props.items.findIndex((item) => collectionValuesEqual(listItemValue(item), props.modelValue, props.by) && !item.disabled);
 			if (selectedIndex >= 0) highlightedIndex.value = selectedIndex;
 			else if (highlightedIndex.value < 0 || highlightedIndex.value >= props.items.length || props.items[highlightedIndex.value]?.disabled) highlightedIndex.value = firstEnabledIndex(props.items);
 		};
-		watch([() => props.modelValue, () => props.items], syncHighlight, {
+		watch([
+			() => props.modelValue,
+			() => props.items,
+			() => props.by
+		], syncHighlight, {
 			deep: true,
 			immediate: true
 		});
@@ -4788,8 +4989,9 @@ const List = defineComponent({
 		const activate = () => {
 			const item = props.items[highlightedIndex.value];
 			if (!item || item.disabled) return;
-			emit("update:modelValue", item.key);
-			emit("select", item.key);
+			const value = toRaw(listItemValue(item));
+			emit("update:modelValue", value);
+			emit("select", value);
 		};
 		useInput({
 			isActive: computed(() => props.focused),
@@ -4832,7 +5034,7 @@ const List = defineComponent({
 			}, "  ..."));
 			visibleItems.value.forEach((item, visibleIndex) => {
 				const isHighlighted = scrollOffset.value + visibleIndex === highlightedIndex.value;
-				const isSelected = item.key === props.modelValue;
+				const isSelected = collectionValuesEqual(listItemValue(item), props.modelValue, props.by);
 				const indicator = isHighlighted ? props.indicator : props.indicatorEmpty;
 				children.push(h("text", {
 					key: item.key,
@@ -4854,6 +5056,85 @@ const List = defineComponent({
 	}
 });
 //#endregion
+//#region src/components/FrescoList.vue
+var FrescoList_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoList",
+	__name: "FrescoList",
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		modelValue: {
+			type: null,
+			required: false
+		},
+		by: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		maxHeight: {
+			type: Number,
+			required: false
+		},
+		focused: {
+			type: Boolean,
+			required: false
+		},
+		indicator: {
+			type: String,
+			required: false
+		},
+		indicatorEmpty: {
+			type: String,
+			required: false
+		},
+		fg: {
+			type: String,
+			required: false
+		},
+		selectedFg: {
+			type: String,
+			required: false
+		},
+		selectedBg: {
+			type: String,
+			required: false
+		}
+	},
+	emits: ["update:modelValue", "select"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const runtimeProps = computed(() => {
+			return {
+				items: __props.items,
+				modelValue: __props.modelValue,
+				by: typeof __props.by === "function" ? (left, right) => __props.by(left, right) : __props.by,
+				maxHeight: __props.maxHeight,
+				focused: __props.focused,
+				indicator: __props.indicator,
+				indicatorEmpty: __props.indicatorEmpty,
+				fg: __props.fg,
+				selectedFg: __props.selectedFg,
+				selectedBg: __props.selectedBg
+			};
+		});
+		function updateModelValue(value) {
+			emit("update:modelValue", value);
+		}
+		function selectValue(value) {
+			emit("select", value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(List), mergeProps(runtimeProps.value, {
+				"onUpdate:modelValue": updateModelValue,
+				onSelect: selectValue
+			}), null, 16);
+		};
+	}
+});
+//#endregion
 //#region src/components/table-utils.ts
 function finiteInteger(value, fallback) {
 	return Number.isFinite(value) ? Math.trunc(value) : fallback;
@@ -5130,6 +5411,9 @@ const Table = defineComponent({
 /**
 * Tree Component - Tree view for hierarchical data
 */
+function treeNodeValue(node) {
+	return Object.hasOwn(node, "value") ? node.value : node.key;
+}
 const Tree = defineComponent({
 	name: "Tree",
 	props: {
@@ -5141,11 +5425,18 @@ const Tree = defineComponent({
 			type: Array,
 			default: () => []
 		},
-		selected: String,
+		selected: null,
+		by: [
+			String,
+			Number,
+			Symbol,
+			Function
+		],
 		focused: {
 			type: Boolean,
 			default: false
 		},
+		maxHeight: Number,
 		showLines: {
 			type: Boolean,
 			default: true
@@ -5204,22 +5495,34 @@ const Tree = defineComponent({
 			return visible;
 		});
 		const highlightedKey = ref();
+		const scrollOffset = ref(0);
 		const typeahead = createTypeaheadBuffer();
+		const viewportSize = computed(() => {
+			if (props.maxHeight === void 0 || !Number.isFinite(props.maxHeight)) return void 0;
+			return props.maxHeight > 0 ? Math.max(1, Math.floor(props.maxHeight)) : void 0;
+		});
 		const navigableNodes = computed(() => visibleNodes.value.map(({ node }) => ({ disabled: node.disabled })));
 		const highlightedIndex = computed(() => visibleNodes.value.findIndex(({ node }) => node.key === highlightedKey.value));
 		const syncVisibleHighlight = () => {
 			const currentIndex = highlightedIndex.value;
 			if (currentIndex >= 0 && !visibleNodes.value[currentIndex]?.node.disabled) return;
-			const selectedIndex = visibleNodes.value.findIndex(({ node }) => node.key === props.selected && !node.disabled);
+			const selectedIndex = visibleNodes.value.findIndex(({ node }) => collectionValuesEqual(treeNodeValue(node), props.selected, props.by) && !node.disabled);
 			const nextIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex(navigableNodes.value);
 			highlightedKey.value = visibleNodes.value[nextIndex]?.node.key;
 		};
-		watch(() => props.selected, (selected) => {
-			const selectedIndex = visibleNodes.value.findIndex(({ node }) => node.key === selected && !node.disabled);
+		watch([() => props.selected, () => props.by], ([selected, by]) => {
+			const selectedIndex = visibleNodes.value.findIndex(({ node }) => collectionValuesEqual(treeNodeValue(node), selected, by) && !node.disabled);
 			if (selectedIndex >= 0) highlightedKey.value = visibleNodes.value[selectedIndex]?.node.key;
 			else syncVisibleHighlight();
 		}, { immediate: true });
 		watch(visibleNodes, syncVisibleHighlight, { deep: true });
+		watch([
+			highlightedIndex,
+			viewportSize,
+			() => visibleNodes.value.length
+		], ([index, windowSize]) => {
+			scrollOffset.value = visibleCollectionOffset(index, scrollOffset.value, windowSize, visibleNodes.value.length);
+		}, { immediate: true });
 		const setHighlight = (index) => {
 			const entry = visibleNodes.value[index];
 			if (!entry || entry.node.disabled) return;
@@ -5235,8 +5538,9 @@ const Tree = defineComponent({
 		const activate = () => {
 			const entry = visibleNodes.value[highlightedIndex.value];
 			if (!entry || entry.node.disabled) return;
-			emit("update:selected", entry.node.key);
-			emit("select", entry.node.key);
+			const value = toRaw(treeNodeValue(entry.node));
+			emit("update:selected", value);
+			emit("select", value);
 		};
 		const moveToParent = (parentKey) => {
 			let key = parentKey;
@@ -5280,47 +5584,187 @@ const Tree = defineComponent({
 			},
 			onSubmit: activate
 		});
-		return () => h("box", { style: { flex_direction: "column" } }, visibleNodes.value.map(({ node, prefix, icon }) => {
-			const isSelected = node.key === props.selected;
-			const isHighlighted = node.key === highlightedKey.value;
-			return h("text", {
-				key: node.key,
-				fg: isSelected || isHighlighted ? props.selectedFg : props.fg,
-				bold: isSelected,
-				underline: props.focused && isHighlighted,
-				dim: node.disabled
-			}, `${prefix}${icon} ${node.label}`);
-		}));
+		const viewportNodes = computed(() => {
+			const windowSize = viewportSize.value;
+			const start = windowSize === void 0 ? 0 : scrollOffset.value;
+			const end = windowSize === void 0 ? visibleNodes.value.length : start + windowSize;
+			return visibleNodes.value.slice(start, end);
+		});
+		const scrollIndicator = computed(() => {
+			const windowSize = viewportSize.value;
+			if (windowSize === void 0 || visibleNodes.value.length <= windowSize) return {
+				showUp: false,
+				showDown: false
+			};
+			return {
+				showUp: scrollOffset.value > 0,
+				showDown: scrollOffset.value + windowSize < visibleNodes.value.length
+			};
+		});
+		return () => {
+			const children = [];
+			if (scrollIndicator.value.showUp) children.push(h("text", {
+				key: "scroll-up",
+				dim: true
+			}, "  ..."));
+			for (const { node, prefix, icon } of viewportNodes.value) {
+				const isSelected = collectionValuesEqual(treeNodeValue(node), props.selected, props.by);
+				const isHighlighted = node.key === highlightedKey.value;
+				children.push(h("text", {
+					key: node.key,
+					fg: isSelected || isHighlighted ? props.selectedFg : props.fg,
+					bold: isSelected,
+					underline: props.focused && isHighlighted,
+					dim: node.disabled
+				}, `${prefix}${icon} ${node.label}`));
+			}
+			if (scrollIndicator.value.showDown) children.push(h("text", {
+				key: "scroll-down",
+				dim: true
+			}, "  ..."));
+			return h("box", { style: { flex_direction: "column" } }, children);
+		};
 	}
 });
 //#endregion
-//#region src/components/Menu.ts
-/**
-* Menu Component - Command menu/palette
-*/
-const Menu = defineComponent({
-	name: "Menu",
+//#region src/components/FrescoTree.vue
+var FrescoTree_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoTree",
+	__name: "FrescoTree",
 	props: {
-		items: {
+		data: {
 			type: Array,
 			required: true
 		},
-		focusedIndex: {
-			type: Number,
-			default: 0
+		expanded: {
+			type: Array,
+			required: false
+		},
+		selected: {
+			type: null,
+			required: false
+		},
+		by: {
+			type: Function,
+			required: false,
+			skipCheck: true
 		},
 		focused: {
 			type: Boolean,
-			default: false
+			required: false
 		},
-		border: {
-			type: String,
-			default: "single"
+		maxHeight: {
+			type: Number,
+			required: false
 		},
-		width: Number,
-		fg: String,
-		focusedFg: {
-			type: String,
+		showLines: {
+			type: Boolean,
+			required: false
+		},
+		indent: {
+			type: Number,
+			required: false
+		},
+		expandedIcon: {
+			type: String,
+			required: false
+		},
+		collapsedIcon: {
+			type: String,
+			required: false
+		},
+		leafIcon: {
+			type: String,
+			required: false
+		},
+		fg: {
+			type: String,
+			required: false
+		},
+		selectedFg: {
+			type: String,
+			required: false
+		}
+	},
+	emits: [
+		"select",
+		"update:selected",
+		"toggle",
+		"update:expanded"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const runtimeProps = computed(() => {
+			return {
+				data: __props.data,
+				expanded: __props.expanded,
+				selected: __props.selected,
+				by: typeof __props.by === "function" ? (left, right) => __props.by(left, right) : __props.by,
+				focused: __props.focused,
+				maxHeight: __props.maxHeight,
+				showLines: __props.showLines,
+				indent: __props.indent,
+				expandedIcon: __props.expandedIcon,
+				collapsedIcon: __props.collapsedIcon,
+				leafIcon: __props.leafIcon,
+				fg: __props.fg,
+				selectedFg: __props.selectedFg
+			};
+		});
+		function selectValue(value) {
+			emit("select", value);
+		}
+		function updateSelected(value) {
+			emit("update:selected", value);
+		}
+		function toggle(key, expanded) {
+			emit("toggle", key, expanded);
+		}
+		function updateExpanded(keys) {
+			emit("update:expanded", keys);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Tree), mergeProps(runtimeProps.value, {
+				onSelect: selectValue,
+				"onUpdate:selected": updateSelected,
+				onToggle: toggle,
+				"onUpdate:expanded": updateExpanded
+			}), null, 16);
+		};
+	}
+});
+//#endregion
+//#region src/components/Menu.ts
+/**
+* Menu Component - Command menu/palette
+*/
+function menuItemValue(item) {
+	return Object.hasOwn(item, "value") ? item.value : item.key;
+}
+const Menu = defineComponent({
+	name: "Menu",
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		focusedIndex: {
+			type: Number,
+			default: 0
+		},
+		focused: {
+			type: Boolean,
+			default: false
+		},
+		maxHeight: Number,
+		border: {
+			type: String,
+			default: "single"
+		},
+		width: Number,
+		fg: String,
+		focusedFg: {
+			type: String,
 			default: "black"
 		},
 		focusedBg: {
@@ -5334,8 +5778,13 @@ const Menu = defineComponent({
 	},
 	emits: ["select", "update:focusedIndex"],
 	setup(props, { emit }) {
+		const scrollOffset = ref(0);
 		const highlightedIndex = ref(-1);
 		const typeahead = createTypeaheadBuffer();
+		const viewportSize = computed(() => {
+			if (props.maxHeight === void 0 || !Number.isFinite(props.maxHeight)) return void 0;
+			return props.maxHeight > 0 ? Math.max(1, Math.floor(props.maxHeight)) : void 0;
+		});
 		const syncHighlight = () => {
 			const requested = props.focusedIndex;
 			const requestedItem = props.items[requested];
@@ -5345,6 +5794,13 @@ const Menu = defineComponent({
 			deep: true,
 			immediate: true
 		});
+		watch([
+			highlightedIndex,
+			viewportSize,
+			() => props.items.length
+		], ([index, windowSize]) => {
+			scrollOffset.value = visibleCollectionOffset(index, scrollOffset.value, windowSize, props.items.length);
+		}, { immediate: true });
 		const setHighlight = (index) => {
 			if (index < 0 || index === highlightedIndex.value) return;
 			highlightedIndex.value = index;
@@ -5353,7 +5809,7 @@ const Menu = defineComponent({
 		const activate = () => {
 			const item = props.items[highlightedIndex.value];
 			if (!item || item.disabled || item.separator) return;
-			emit("select", item.key);
+			emit("select", toRaw(menuItemValue(item)));
 		};
 		useInput({
 			isActive: computed(() => props.focused),
@@ -5374,9 +5830,33 @@ const Menu = defineComponent({
 			},
 			onSubmit: activate
 		});
+		const visibleItems = computed(() => {
+			const windowSize = viewportSize.value;
+			const start = windowSize === void 0 ? 0 : scrollOffset.value;
+			const end = windowSize === void 0 ? props.items.length : start + windowSize;
+			return props.items.slice(start, end).map((item, visibleIndex) => ({
+				item,
+				index: start + visibleIndex
+			}));
+		});
+		const scrollIndicator = computed(() => {
+			const windowSize = viewportSize.value;
+			if (windowSize === void 0 || props.items.length <= windowSize) return {
+				showUp: false,
+				showDown: false
+			};
+			return {
+				showUp: scrollOffset.value > 0,
+				showDown: scrollOffset.value + windowSize < props.items.length
+			};
+		});
 		return () => {
 			const children = [];
-			props.items.forEach((item, index) => {
+			if (scrollIndicator.value.showUp) children.push(h("text", {
+				key: "scroll-up",
+				dim: true
+			}, "  ..."));
+			visibleItems.value.forEach(({ item, index }) => {
 				if (item.separator) {
 					children.push(h("text", {
 						key: `sep-${index}`,
@@ -5409,6 +5889,10 @@ const Menu = defineComponent({
 					bg: isFocused ? props.focusedBg : void 0
 				}, itemContent));
 			});
+			if (scrollIndicator.value.showDown) children.push(h("text", {
+				key: "scroll-down",
+				dim: true
+			}, "  ..."));
 			return h("box", {
 				border: props.border === "none" ? void 0 : props.border,
 				style: {
@@ -5420,10 +5904,89 @@ const Menu = defineComponent({
 	}
 });
 //#endregion
+//#region src/components/FrescoMenu.vue
+var FrescoMenu_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoMenu",
+	__name: "FrescoMenu",
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		focusedIndex: {
+			type: Number,
+			required: false
+		},
+		focused: {
+			type: Boolean,
+			required: false
+		},
+		maxHeight: {
+			type: Number,
+			required: false
+		},
+		border: {
+			type: String,
+			required: false
+		},
+		width: {
+			type: Number,
+			required: false
+		},
+		fg: {
+			type: String,
+			required: false
+		},
+		focusedFg: {
+			type: String,
+			required: false
+		},
+		focusedBg: {
+			type: String,
+			required: false
+		},
+		shortcutFg: {
+			type: String,
+			required: false
+		}
+	},
+	emits: ["select", "update:focusedIndex"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const runtimeProps = computed(() => ({
+			items: __props.items,
+			focusedIndex: __props.focusedIndex,
+			focused: __props.focused,
+			maxHeight: __props.maxHeight,
+			border: __props.border,
+			width: __props.width,
+			fg: __props.fg,
+			focusedFg: __props.focusedFg,
+			focusedBg: __props.focusedBg,
+			shortcutFg: __props.shortcutFg
+		}));
+		function selectValue(value) {
+			emit("select", value);
+		}
+		function updateFocusedIndex(index) {
+			emit("update:focusedIndex", index);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Menu), mergeProps(runtimeProps.value, {
+				onSelect: selectValue,
+				"onUpdate:focusedIndex": updateFocusedIndex
+			}), null, 16);
+		};
+	}
+});
+//#endregion
 //#region src/components/Tabs.ts
 /**
 * Tabs Component - Tab navigation
 */
+function tabValue(tab) {
+	return Object.hasOwn(tab, "value") ? tab.value : tab.key;
+}
 const Tabs = defineComponent({
 	name: "Tabs",
 	props: {
@@ -5431,11 +5994,18 @@ const Tabs = defineComponent({
 			type: Array,
 			required: true
 		},
-		modelValue: String,
+		modelValue: null,
+		by: [
+			String,
+			Number,
+			Symbol,
+			Function
+		],
 		focused: {
 			type: Boolean,
 			default: false
 		},
+		maxItems: Number,
 		position: {
 			type: String,
 			default: "top"
@@ -5457,22 +6027,39 @@ const Tabs = defineComponent({
 	},
 	emits: ["update:modelValue", "change"],
 	setup(props, { slots, emit }) {
+		const scrollOffset = ref(0);
 		const highlightedIndex = ref(-1);
 		const typeahead = createTypeaheadBuffer();
+		const viewportSize = computed(() => {
+			if (props.maxItems === void 0 || !Number.isFinite(props.maxItems)) return void 0;
+			return props.maxItems > 0 ? Math.max(1, Math.floor(props.maxItems)) : void 0;
+		});
 		const syncHighlight = () => {
-			const activeIndex = props.tabs.findIndex((tab) => tab.key === props.modelValue && !tab.disabled);
+			const activeIndex = props.tabs.findIndex((tab) => collectionValuesEqual(tabValue(tab), props.modelValue, props.by) && !tab.disabled);
 			if (activeIndex >= 0) highlightedIndex.value = activeIndex;
 			else if (highlightedIndex.value < 0 || highlightedIndex.value >= props.tabs.length || props.tabs[highlightedIndex.value]?.disabled) highlightedIndex.value = firstEnabledIndex(props.tabs);
 		};
-		watch([() => props.modelValue, () => props.tabs], syncHighlight, {
+		watch([
+			() => props.modelValue,
+			() => props.by,
+			() => props.tabs
+		], syncHighlight, {
 			deep: true,
 			immediate: true
 		});
+		watch([
+			highlightedIndex,
+			viewportSize,
+			() => props.tabs.length
+		], ([index, windowSize]) => {
+			scrollOffset.value = visibleCollectionOffset(index, scrollOffset.value, windowSize, props.tabs.length);
+		}, { immediate: true });
 		const activate = () => {
 			const tab = props.tabs[highlightedIndex.value];
 			if (!tab || tab.disabled) return;
-			emit("update:modelValue", tab.key);
-			emit("change", tab.key);
+			const value = toRaw(tabValue(tab));
+			emit("update:modelValue", value);
+			emit("change", value);
 		};
 		useInput({
 			isActive: computed(() => props.focused),
@@ -5493,14 +6080,38 @@ const Tabs = defineComponent({
 			},
 			onSubmit: activate
 		});
+		const visibleTabs = computed(() => {
+			const windowSize = viewportSize.value;
+			const start = windowSize === void 0 ? 0 : scrollOffset.value;
+			const end = windowSize === void 0 ? props.tabs.length : start + windowSize;
+			return props.tabs.slice(start, end).map((tab, visibleIndex) => ({
+				tab,
+				index: start + visibleIndex
+			}));
+		});
+		const scrollIndicator = computed(() => {
+			const windowSize = viewportSize.value;
+			if (windowSize === void 0 || props.tabs.length <= windowSize) return {
+				showBefore: false,
+				showAfter: false
+			};
+			return {
+				showBefore: scrollOffset.value > 0,
+				showAfter: scrollOffset.value + windowSize < props.tabs.length
+			};
+		});
 		return () => {
 			const tabItems = [];
-			props.tabs.forEach((tab, index) => {
-				if (index > 0) tabItems.push(h("text", {
+			if (scrollIndicator.value.showBefore) tabItems.push(h("text", {
+				key: "scroll-before",
+				dim: true
+			}, "…"));
+			visibleTabs.value.forEach(({ tab, index }, visibleIndex) => {
+				if (visibleIndex > 0) tabItems.push(h("text", {
 					key: `sep-${index}`,
 					dim: true
 				}, props.separator));
-				const isActive = tab.key === props.modelValue;
+				const isActive = collectionValuesEqual(tabValue(tab), props.modelValue, props.by);
 				const isHighlighted = index === highlightedIndex.value;
 				tabItems.push(h("text", {
 					key: tab.key,
@@ -5508,9 +6119,14 @@ const Tabs = defineComponent({
 					bg: isActive || props.focused && isHighlighted ? props.activeBg : void 0,
 					bold: isActive,
 					underline: isActive && props.underline || props.focused && isHighlighted,
-					dim: tab.disabled
+					dim: tab.disabled,
+					"data-tab-index": index
 				}, tab.label));
 			});
+			if (scrollIndicator.value.showAfter) tabItems.push(h("text", {
+				key: "scroll-after",
+				dim: true
+			}, "…"));
 			const tabBar = h("box", {
 				key: "tab-bar",
 				style: {
@@ -5531,6 +6147,93 @@ const Tabs = defineComponent({
 	}
 });
 //#endregion
+//#region src/components/FrescoTabs.vue
+var FrescoTabs_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoTabs",
+	__name: "FrescoTabs",
+	props: {
+		tabs: {
+			type: Array,
+			required: true
+		},
+		modelValue: {
+			type: null,
+			required: false
+		},
+		by: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		focused: {
+			type: Boolean,
+			required: false
+		},
+		maxItems: {
+			type: Number,
+			required: false
+		},
+		position: {
+			type: String,
+			required: false
+		},
+		separator: {
+			type: String,
+			required: false
+		},
+		activeFg: {
+			type: String,
+			required: false
+		},
+		activeBg: {
+			type: String,
+			required: false
+		},
+		inactiveFg: {
+			type: String,
+			required: false
+		},
+		underline: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const runtimeProps = computed(() => {
+			return {
+				tabs: __props.tabs,
+				modelValue: __props.modelValue,
+				by: typeof __props.by === "function" ? (left, right) => __props.by(left, right) : __props.by,
+				focused: __props.focused,
+				maxItems: __props.maxItems,
+				position: __props.position,
+				separator: __props.separator,
+				activeFg: __props.activeFg,
+				activeBg: __props.activeBg,
+				inactiveFg: __props.inactiveFg,
+				underline: __props.underline
+			};
+		});
+		function updateModelValue(value) {
+			emit("update:modelValue", value);
+		}
+		function changeValue(value) {
+			emit("change", value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Tabs), mergeProps(runtimeProps.value, {
+				"onUpdate:modelValue": updateModelValue,
+				onChange: changeValue
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
 //#region src/components/FrescoBreadcrumb.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1$2 = ["fg"];
 const _hoisted_2$2 = [
@@ -5794,13 +6497,14 @@ var FrescoModal_default = /* @__PURE__ */ defineComponent({
 		watch(isVisible, (next, previous) => {
 			if (next && !previous) wasFocusedBeforeOpen.value = manager.activeId.value;
 		}, { flush: "sync" });
-		provideFocusScope(useFocus({
+		const modalFocus = useFocus({
 			id: __props.focusId,
 			isActive: isVisible,
 			autoFocus: true,
 			delegateFocusTo: computed(() => __props.initialFocusId),
 			trapFocus: trapsFocus
-		}).id);
+		});
+		provideFocusScope(modalFocus.id);
 		function focusInitialTarget() {
 			if (!__props.visible || !__props.initialFocusId || !manager.focusableIds.value.includes(__props.initialFocusId)) return;
 			manager.focus(__props.initialFocusId);
@@ -5834,7 +6538,8 @@ var FrescoModal_default = /* @__PURE__ */ defineComponent({
 				"justify-content": "center",
 				"align-items": "center",
 				width: "100%",
-				height: "100%"
+				height: "100%",
+				"focus-id": unref(modalFocus).id
 			}, accessibilityProps.value), {
 				default: withCtx(() => [__props.visible ? (openBlock(), createBlock(unref(Box), {
 					key: 0,
@@ -5870,7 +6575,195 @@ var FrescoModal_default = /* @__PURE__ */ defineComponent({
 					"bg"
 				])) : createCommentVNode("v-if", true)]),
 				_: 3
-			}, 16, ["display"]);
+			}, 16, ["display", "focus-id"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/FrescoPopover.vue
+var FrescoPopover_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoPopover",
+	__name: "FrescoPopover",
+	props: {
+		open: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		placement: {
+			type: String,
+			required: false,
+			default: "bottom"
+		},
+		offset: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		width: {
+			type: [Number, String],
+			required: false
+		},
+		height: {
+			type: [Number, String],
+			required: false
+		},
+		border: {
+			type: String,
+			required: false,
+			default: "rounded"
+		},
+		fg: {
+			type: String,
+			required: false
+		},
+		bg: {
+			type: String,
+			required: false
+		},
+		focusId: {
+			type: String,
+			required: false,
+			default: `popover-${Math.random().toString(36).slice(2)}`
+		},
+		initialFocusId: {
+			type: String,
+			required: false
+		},
+		trapFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		restoreFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		closeOnEscape: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		accessibilityRole: {
+			type: String,
+			required: false,
+			default: "dialog"
+		},
+		accessibilityLabel: {
+			type: String,
+			required: false,
+			default: "Popover"
+		}
+	},
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const manager = useFocusManager();
+		const wasFocusedBeforeOpen = ref();
+		const isOpen = computed(() => __props.open);
+		const trapsFocus = computed(() => __props.open && __props.trapFocus);
+		if (__props.open) wasFocusedBeforeOpen.value = manager.activeId.value;
+		watch(isOpen, (next, previous) => {
+			if (next && !previous) wasFocusedBeforeOpen.value = manager.activeId.value;
+		}, { flush: "sync" });
+		const popoverFocus = useFocus({
+			id: __props.focusId,
+			isActive: isOpen,
+			autoFocus: true,
+			delegateFocusTo: computed(() => __props.initialFocusId),
+			trapFocus: trapsFocus
+		});
+		provideFocusScope(popoverFocus.id);
+		function focusInitialTarget() {
+			if (!__props.open || !__props.initialFocusId || !manager.focusableIds.value.includes(__props.initialFocusId)) return;
+			manager.focus(__props.initialFocusId);
+		}
+		watch([isOpen, manager.focusableIds], () => {
+			nextTick(focusInitialTarget);
+		}, {
+			deep: true,
+			flush: "post"
+		});
+		watch(isOpen, (next, previous) => {
+			if (next || !previous || !__props.restoreFocus) return;
+			const target = wasFocusedBeforeOpen.value;
+			if (target && manager.focusableIds.value.includes(target)) manager.focus(target);
+			wasFocusedBeforeOpen.value = void 0;
+		}, { flush: "post" });
+		onMounted(() => void nextTick(focusInitialTarget));
+		useInput({
+			isActive: computed(() => __props.open && __props.closeOnEscape),
+			onEscape: () => emit("close")
+		});
+		function panelPosition(selected) {
+			const gap = Number.isFinite(__props.offset) ? Math.max(0, __props.offset) : 0;
+			switch (selected) {
+				case "top": return {
+					bottom: "100%",
+					marginBottom: gap
+				};
+				case "right": return {
+					left: "100%",
+					marginLeft: gap
+				};
+				case "left": return {
+					right: "100%",
+					marginRight: gap
+				};
+				default: return {
+					top: "100%",
+					marginTop: gap
+				};
+			}
+		}
+		const position = computed(() => panelPosition(__props.placement));
+		const accessibilityProps = computed(() => ({
+			ariaRole: __props.accessibilityRole,
+			ariaLabel: __props.accessibilityLabel,
+			ariaState: { expanded: __props.open }
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), { position: "relative" }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "anchor"), __props.open ? (openBlock(), createBlock(unref(Box), mergeProps({
+					key: 0,
+					position: "absolute",
+					top: position.value.top,
+					right: position.value.right,
+					bottom: position.value.bottom,
+					left: position.value.left,
+					"margin-top": position.value.marginTop,
+					"margin-right": position.value.marginRight,
+					"margin-bottom": position.value.marginBottom,
+					"margin-left": position.value.marginLeft,
+					width: __props.width,
+					height: __props.height,
+					border: __props.border === "none" ? void 0 : __props.border,
+					fg: __props.fg,
+					bg: __props.bg,
+					padding: 1,
+					"focus-id": unref(popoverFocus).id
+				}, accessibilityProps.value), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, [
+					"top",
+					"right",
+					"bottom",
+					"left",
+					"margin-top",
+					"margin-right",
+					"margin-bottom",
+					"margin-left",
+					"width",
+					"height",
+					"border",
+					"fg",
+					"bg",
+					"focus-id"
+				])) : createCommentVNode("v-if", true)]),
+				_: 3
+			});
 		};
 	}
 });
@@ -6160,6 +7053,6 @@ var FrescoAvatar_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { FrescoMarkdown_default as A, ScrollBox_default as B, Checkbox as C, FrescoLink_default as D, TextInput as E, createCodeBuffer as F, FrescoVStack_default as G, Text as H, LineNumber as I, FrescoDivider_default as J, FrescoHStack_default as K, FrescoTransform_default as L, parseMarkdown as M, renderMarkdown as N, Diff as O, Code as P, FrescoStatic_default as R, RadioGroup as S, TextArea as T, FrescoCard_default as U, ScrollBar_default as V, Grid as W, Box as X, FrescoSpacer_default as Y, ProgressBar as _, FrescoModal_default as a, FrescoSlider_default as b, Tabs as c, Table as d, List as f, FrescoAlert_default as g, FrescoBadge_default as h, StatusBar as i, defaultMarkdownRenderer as j, FrescoFrameBuffer_default as k, Menu as l, Timer as m, KeyHint as n, Stepper as o, FrescoTooltip_default as p, FrescoStack_default as q, FrescoHeader_default as r, FrescoBreadcrumb_default as s, FrescoAvatar_default as t, Tree as u, FrescoSpinner_default as v, Select as w, Confirm as x, Form as y, FrescoNewline_default as z };
+export { FrescoFrameBuffer_default as A, FrescoNewline_default as B, RadioGroup as C, TextInput as D, TextArea as E, Code as F, Grid as G, ScrollBar_default as H, createCodeBuffer as I, FrescoStack_default as J, FrescoVStack_default as K, LineNumber as L, defaultMarkdownRenderer as M, parseMarkdown as N, FrescoLink_default as O, renderMarkdown as P, FrescoTransform_default as R, Confirm as S, FrescoSelect_default as T, Text as U, ScrollBox_default as V, FrescoCard_default as W, FrescoSpacer_default as X, FrescoDivider_default as Y, Box as Z, FrescoAlert_default as _, FrescoPopover_default as a, Form as b, FrescoBreadcrumb_default as c, FrescoTree_default as d, Table as f, FrescoBadge_default as g, Timer as h, StatusBar as i, FrescoMarkdown_default as j, Diff as k, FrescoTabs_default as l, FrescoTooltip_default as m, KeyHint as n, FrescoModal_default as o, FrescoList_default as p, FrescoHStack_default as q, FrescoHeader_default as r, Stepper as s, FrescoAvatar_default as t, FrescoMenu_default as u, ProgressBar as v, Checkbox as w, FrescoSlider_default as x, FrescoSpinner_default as y, FrescoStatic_default as z };
 
-//# sourceMappingURL=components-DzkL-yHj.mjs.map
+//# sourceMappingURL=components-B-HgL5id.mjs.map