@vizejs/fresco 0.720.0 → 0.722.0

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

@@ -1,6 +1,6 @@
 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, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
+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
@@ -3339,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: {
@@ -3350,7 +3363,13 @@ const Select = defineComponent({
 			type: Array,
 			required: true
 		},
-		modelValue: String,
+		modelValue: null,
+		by: [
+			String,
+			Number,
+			Symbol,
+			Function
+		],
 		placeholder: {
 			type: String,
 			default: "Select an option"
@@ -3385,8 +3404,8 @@ const Select = defineComponent({
 			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, (value) => {
-			const selectedIndex = props.options.findIndex((option) => option.value === value && !option.disabled);
+		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) => {
@@ -3402,8 +3421,9 @@ const Select = defineComponent({
 		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),
@@ -3448,10 +3468,10 @@ const Select = defineComponent({
 			}, "  ..."));
 			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;
 				children.push(h("box", {
-					key: option.value,
+					key: optionKey(option, index),
 					style: { flex_direction: "row" }
 				}, [h("text", {
 					fg: isHighlighted ? props.selectedFg : props.fg,
@@ -3472,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
@@ -4805,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: {
@@ -4812,7 +4924,13 @@ const List = defineComponent({
 			type: Array,
 			required: true
 		},
-		modelValue: String,
+		modelValue: null,
+		by: [
+			String,
+			Number,
+			Symbol,
+			Function
+		],
 		maxHeight: Number,
 		focused: {
 			type: Boolean,
@@ -4839,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
 		});
@@ -4867,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),
@@ -4911,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,
@@ -4933,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;
@@ -5209,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: {
@@ -5220,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
@@ -5283,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;
@@ -5314,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;
@@ -5359,17 +5584,153 @@ 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/FrescoTree.vue
+var FrescoTree_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoTree",
+	__name: "FrescoTree",
+	props: {
+		data: {
+			type: Array,
+			required: true
+		},
+		expanded: {
+			type: Array,
+			required: false
+		},
+		selected: {
+			type: null,
+			required: false
+		},
+		by: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		focused: {
+			type: Boolean,
+			required: false
+		},
+		maxHeight: {
+			type: Number,
+			required: false
+		},
+		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
@@ -5377,6 +5738,9 @@ const Tree = defineComponent({
 /**
 * Menu Component - Command menu/palette
 */
+function menuItemValue(item) {
+	return Object.hasOwn(item, "value") ? item.value : item.key;
+}
 const Menu = defineComponent({
 	name: "Menu",
 	props: {
@@ -5392,6 +5756,7 @@ const Menu = defineComponent({
 			type: Boolean,
 			default: false
 		},
+		maxHeight: Number,
 		border: {
 			type: String,
 			default: "single"
@@ -5413,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];
@@ -5424,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;
@@ -5432,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),
@@ -5453,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}`,
@@ -5488,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: {
@@ -5499,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: {
@@ -5510,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"
@@ -5536,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),
@@ -5572,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,
@@ -5587,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: {
@@ -5610,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 = [
@@ -6429,6 +7053,6 @@ var FrescoAvatar_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-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, Select 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, Tree as d, Table as f, FrescoBadge_default as g, Timer as h, StatusBar as i, FrescoMarkdown_default as j, Diff as k, Tabs as l, FrescoTooltip_default as m, KeyHint as n, FrescoModal_default as o, List as p, FrescoHStack_default as q, FrescoHeader_default as r, Stepper as s, FrescoAvatar_default as t, Menu as u, ProgressBar as v, Checkbox as w, FrescoSlider_default as x, FrescoSpinner_default as y, FrescoStatic_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-DgDohiXo.mjs.map
+//# sourceMappingURL=components-B-HgL5id.mjs.map