@vizejs/fresco 0.715.0 → 0.716.0

package/dist/{components-DWIDBGTL.mjs → components-D9SeB0Be.mjs}

@@ -1,5 +1,5 @@
-import { i as useInput, r as useMouse, s as useIsScreenReaderEnabled, t as createVirtualViewport } from "./useVirtualViewport-CcJuIc7U.mjs";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, h, mergeProps, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, unref, watch, withCtx } from "vue";
+import { i as useInput, r as useMouse, s as useIsScreenReaderEnabled, t as createVirtualViewport } from "./useVirtualViewport-pPZWmwUC.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, mergeProps, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
 //#region src/components/Box.ts
 /**
 * Box Component - Container with flexbox layout
@@ -150,17 +150,17 @@ const Box = defineComponent({
 	}
 });
 //#endregion
-//#region src/components/Spacer.ts
-/**
-* Spacer Component - flexible empty space along the parent main axis.
-*/
-const Spacer = defineComponent({
+//#region src/components/FrescoSpacer.vue
+var FrescoSpacer_default = /* @__PURE__ */ defineComponent({
 	name: "Spacer",
-	setup() {
-		return () => h("box", { style: {
-			flexGrow: 1,
-			flexShrink: 1
-		} });
+	__name: "FrescoSpacer",
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Box), {
+				"flex-grow": 1,
+				"flex-shrink": 1
+			});
+		};
 	}
 });
 //#endregion
@@ -342,66 +342,96 @@ const Grid = defineComponent({
 	}
 });
 //#endregion
-//#region src/components/Card.ts
-/**
-* Card Component - Container card with optional header and footer
-*/
-const Card = defineComponent({
-	name: "Card",
+//#region src/components/FrescoCard.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$9 = [
+	"border",
+	"fg",
+	"bg"
+];
+const _hoisted_2$7 = ["fg"];
+const _hoisted_3$6 = {
+	key: 1,
+	dim: true
+};
+const _hoisted_4$2 = { dim: true };
+//#endregion
+//#region src/components/FrescoCard.vue
+var FrescoCard_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoCard",
+	__name: "FrescoCard",
 	props: {
-		title: String,
-		subtitle: String,
-		footer: String,
+		title: {
+			type: String,
+			required: false
+		},
+		subtitle: {
+			type: String,
+			required: false
+		},
+		footer: {
+			type: String,
+			required: false
+		},
 		border: {
 			type: String,
+			required: false,
 			default: "rounded"
 		},
 		padding: {
 			type: Number,
+			required: false,
 			default: 1
 		},
 		titleFg: {
 			type: String,
+			required: false,
 			default: "white"
 		},
-		borderFg: String,
-		bg: String
+		borderFg: {
+			type: String,
+			required: false
+		},
+		bg: {
+			type: String,
+			required: false
+		}
 	},
-	setup(props, { slots }) {
-		return () => {
-			const children = [];
-			if (props.title || props.subtitle) {
-				const headerContent = [];
-				if (props.title) headerContent.push(h("text", {
-					fg: props.titleFg,
+	setup(__props) {
+		const slots = useSlots();
+		const hasHeader = computed(() => Boolean(__props.title || __props.subtitle));
+		const hasFooter = computed(() => Boolean(__props.footer || slots.footer));
+		const containerStyle = computed(() => ({
+			flexDirection: "column",
+			padding: __props.padding
+		}));
+		const headerStyle = {
+			flexDirection: "row",
+			marginBottom: 1
+		};
+		const contentStyle = { flexGrow: 1 };
+		const footerStyle = { marginTop: 1 };
+		const subtitleLabel = computed(() => __props.subtitle ? __props.title ? ` - ${__props.subtitle}` : __props.subtitle : "");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				border: __props.border === "none" ? void 0 : __props.border,
+				fg: __props.borderFg,
+				bg: __props.bg,
+				style: normalizeStyle(containerStyle.value)
+			}, [
+				hasHeader.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					style: headerStyle
+				}, [__props.title ? (openBlock(), createElementBlock("text", {
+					key: 0,
+					fg: __props.titleFg,
 					bold: true
-				}, props.title));
-				if (props.subtitle) headerContent.push(h("text", { dim: true }, props.title ? ` - ${props.subtitle}` : props.subtitle));
-				children.push(h("box", {
-					key: "header",
-					style: {
-						flex_direction: "row",
-						margin_bottom: 1
-					}
-				}, headerContent));
-			}
-			children.push(h("box", {
-				key: "content",
-				style: { flex_grow: 1 }
-			}, slots.default?.()));
-			if (props.footer || slots.footer) children.push(h("box", {
-				key: "footer",
-				style: { margin_top: 1 }
-			}, slots.footer?.() ?? [h("text", { dim: true }, props.footer)]));
-			return h("box", {
-				border: props.border === "none" ? void 0 : props.border,
-				fg: props.borderFg,
-				bg: props.bg,
-				style: {
-					flex_direction: "column",
-					padding: props.padding
-				}
-			}, children);
+				}, 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),
+				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$9);
 		};
 	}
 });
@@ -845,80 +875,101 @@ var ScrollBox_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/Newline.ts
-/**
-* Newline Component - inserts one or more newline characters inside Text.
-*/
-const Newline = defineComponent({
+//#region src/components/FrescoNewline.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$8 = ["text"];
+//#endregion
+//#region src/components/FrescoNewline.vue
+var FrescoNewline_default = /* @__PURE__ */ defineComponent({
 	name: "Newline",
+	__name: "FrescoNewline",
 	props: { count: {
 		type: Number,
+		required: false,
 		default: 1
 	} },
-	setup(props) {
-		return () => h("text", { text: "\n".repeat(Math.max(0, props.count)) });
+	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$8);
+		};
 	}
 });
 //#endregion
-//#region src/components/Static.ts
-/**
-* Static Component - renders stable items above the live area.
-*
-* The app renderer treats this component specially: newly added items are
-* promoted into a persistent output region above the live frame.
-*/
-const Static = defineComponent({
+//#region src/components/FrescoStatic.vue
+var FrescoStatic_default = /* @__PURE__ */ defineComponent({
 	name: "Static",
+	__name: "FrescoStatic",
 	props: {
 		items: {
 			type: Array,
+			required: false,
 			default: () => []
 		},
-		style: Object
+		style: {
+			type: null,
+			required: false
+		}
 	},
-	setup(props, { slots }) {
-		return () => {
-			const renderItem = slots.default;
-			return h("box", {
+	setup(__props) {
+		const containerStyle = computed(() => ({
+			position: "absolute",
+			flexDirection: "column",
+			...__props.style
+		}));
+		const itemStyle = { flexDirection: "column" };
+		const renderedItems = computed(() => __props.items.map((item, index) => ({
+			item,
+			index,
+			key: `static-${index}`
+		})));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
 				internal_static: true,
-				style: {
-					position: "absolute",
-					flexDirection: "column",
-					...props.style
-				}
-			}, props.items.map((item, index) => h("box", {
-				key: index,
-				internal_static_item: true,
-				style: { flexDirection: "column" }
-			}, renderItem?.({
-				item,
-				index
-			}) ?? [])));
+				style: normalizeStyle(containerStyle.value)
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(renderedItems.value, (entry) => {
+				return openBlock(), createElementBlock("div", {
+					key: entry.key,
+					internal_static_item: true,
+					style: itemStyle
+				}, [renderSlot(_ctx.$slots, "default", {
+					item: entry.item,
+					index: entry.index
+				})]);
+			}), 128))], 4);
 		};
 	}
 });
 //#endregion
-//#region src/components/Transform.ts
-/**
-* Transform Component - transforms stringified child output before rendering.
-*/
-const Transform = defineComponent({
+//#region src/components/FrescoTransform.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$7 = ["text", "aria-label"];
+//#endregion
+//#region src/components/FrescoTransform.vue
+var FrescoTransform_default = /* @__PURE__ */ defineComponent({
 	name: "Transform",
+	__name: "FrescoTransform",
 	props: {
-		accessibilityLabel: String,
+		accessibilityLabel: {
+			type: String,
+			required: false
+		},
 		transform: {
 			type: Function,
 			required: true
 		}
 	},
-	setup(props, { slots }) {
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
 		const isScreenReaderEnabled = useIsScreenReaderEnabled();
-		return () => {
+		const content = computed(() => {
 			const text = stringifyChildren(slots.default?.());
-			return h("text", {
-				text: isScreenReaderEnabled && props.accessibilityLabel ? props.accessibilityLabel : text.split("\n").map((line, index) => props.transform(line, index)).join("\n"),
-				"aria-label": props.accessibilityLabel
-			});
+			return isScreenReaderEnabled && props.accessibilityLabel ? props.accessibilityLabel : text.split("\n").map((line, index) => props.transform(line, index)).join("\n");
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("text", {
+				text: content.value,
+				"aria-label": __props.accessibilityLabel
+			}, null, 8, _hoisted_1$7);
 		};
 	}
 });
@@ -1003,40 +1054,50 @@ const Code = defineComponent({
 	}
 });
 //#endregion
-//#region src/components/Link.ts
-/**
-* Link Component - Clickable/styled link
-*/
-const Link = defineComponent({
-	name: "Link",
+//#region src/components/FrescoLink.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$6 = ["fg", "underline"];
+const _hoisted_2$6 = {
+	key: 0,
+	dim: true
+};
+//#endregion
+//#region src/components/FrescoLink.vue
+var FrescoLink_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoLink",
+	__name: "FrescoLink",
 	props: {
 		text: {
 			type: String,
 			required: true
 		},
-		url: String,
+		url: {
+			type: String,
+			required: false
+		},
 		fg: {
 			type: String,
+			required: false,
 			default: "blue"
 		},
 		underline: {
 			type: Boolean,
+			required: false,
 			default: true
 		},
 		showUrl: {
 			type: Boolean,
+			required: false,
 			default: false
 		}
 	},
 	emits: ["click"],
-	setup(props, { emit: _emit }) {
-		return () => {
-			const parts = [h("text", {
-				fg: props.fg,
-				underline: props.underline
-			}, props.text)];
-			if (props.showUrl && props.url) parts.push(h("text", { dim: true }, ` (${props.url})`));
-			return h("box", { style: { flex_direction: "row" } }, parts);
+	setup(__props) {
+		const rowStyle = { flexDirection: "row" };
+		return (_ctx, _cache) => {
+			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)]);
 		};
 	}
 });
@@ -1707,13 +1768,16 @@ const Form = defineComponent({
 	}
 });
 //#endregion
-//#region src/components/Spinner.ts
-/**
-* Spinner Component - Loading indicator
-*/
-/**
-* Spinner frame sets
-*/
+//#region src/components/display-primitive-types.ts
+/** Default foreground and background colors for each Badge variant. */
+const badgeVariantColors = {
+	default: { fg: "white" },
+	success: { fg: "green" },
+	warning: { fg: "yellow" },
+	error: { fg: "red" },
+	info: { fg: "cyan" }
+};
+/** Built-in animation frame sets for Spinner. */
 const spinnerTypes = {
 	dots: [
 		"⠋",
@@ -1813,37 +1877,56 @@ const spinnerTypes = {
 		"🌏"
 	]
 };
-const Spinner = defineComponent({
+//#endregion
+//#region src/components/FrescoSpinner.vue
+var FrescoSpinner_default = /* @__PURE__ */ defineComponent({
 	name: "Spinner",
+	__name: "FrescoSpinner",
 	props: {
 		type: {
-			type: String,
+			type: null,
+			required: false,
 			default: "dots"
 		},
-		frames: Array,
+		frames: {
+			type: Array,
+			required: false
+		},
 		interval: {
 			type: Number,
+			required: false,
 			default: 80
 		},
-		label: String,
-		fg: String
+		label: {
+			type: String,
+			required: false
+		},
+		fg: {
+			type: String,
+			required: false
+		}
 	},
-	setup(props) {
+	setup(__props) {
 		const frameIndex = ref(0);
+		const frames = computed(() => __props.frames ?? spinnerTypes[__props.type] ?? spinnerTypes.dots);
+		const content = computed(() => {
+			const frame = frames.value[frameIndex.value];
+			return __props.label ? `${frame} ${__props.label}` : frame;
+		});
 		let timer = null;
-		const frames = props.frames ?? spinnerTypes[props.type] ?? spinnerTypes.dots;
 		onMounted(() => {
 			timer = setInterval(() => {
-				frameIndex.value = (frameIndex.value + 1) % frames.length;
-			}, props.interval);
+				frameIndex.value = (frameIndex.value + 1) % frames.value.length;
+			}, __props.interval);
 		});
 		onUnmounted(() => {
 			if (timer) clearInterval(timer);
 		});
-		return () => {
-			const frame = frames[frameIndex.value];
-			const content = props.label ? `${frame} ${props.label}` : frame;
-			return h(Text, { fg: props.fg }, () => content);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Text), {
+				content: content.value,
+				fg: __props.fg
+			}, null, 8, ["content", "fg"]);
 		};
 	}
 });
@@ -1950,11 +2033,9 @@ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/Alert.ts
-/**
-* Alert Component - Alert/notification box
-*/
-const ALERT_CONFIG = {
+//#region src/components/presentational-primitive-types.ts
+/** Visual defaults for each alert type. */
+const alertConfigs = {
 	info: {
 		icon: "ℹ",
 		fg: "cyan",
@@ -1976,8 +2057,30 @@ const ALERT_CONFIG = {
 		title: "Error"
 	}
 };
-const Alert = defineComponent({
-	name: "Alert",
+/** Foreground colors for avatar statuses. */
+const avatarStatusColors = {
+	online: "green",
+	offline: "gray",
+	away: "yellow",
+	busy: "red"
+};
+/** Glyphs for avatar statuses. */
+const avatarStatusIcons = {
+	online: "●",
+	offline: "○",
+	away: "◐",
+	busy: "⊘"
+};
+//#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"];
+//#endregion
+//#region src/components/FrescoAlert.vue
+var FrescoAlert_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoAlert",
+	__name: "FrescoAlert",
 	props: {
 		message: {
 			type: String,
@@ -1985,62 +2088,59 @@ const Alert = defineComponent({
 		},
 		type: {
 			type: String,
+			required: false,
 			default: "info"
 		},
-		title: String,
+		title: {
+			type: String,
+			required: false
+		},
 		showIcon: {
 			type: Boolean,
+			required: false,
 			default: true
 		},
 		border: {
 			type: String,
+			required: false,
 			default: "rounded"
 		}
 	},
-	setup(props) {
-		return () => {
-			const config = ALERT_CONFIG[props.type];
-			const title = props.title ?? config.title;
-			const children = [];
-			const headerParts = [];
-			if (props.showIcon) headerParts.push(h("text", { fg: config.fg }, `${config.icon} `));
-			headerParts.push(h("text", {
-				fg: config.fg,
+	setup(__props) {
+		const config = computed(() => alertConfigs[__props.type]);
+		const heading = computed(() => __props.title ?? config.value.title);
+		const iconLabel = computed(() => `${config.value.icon} `);
+		const containerStyle = {
+			flexDirection: "column",
+			padding: 1
+		};
+		const headerStyle = { flexDirection: "row" };
+		const messageStyle = { marginTop: 1 };
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				border: __props.border === "none" ? void 0 : __props.border,
+				fg: config.value.fg,
+				style: containerStyle
+			}, [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", {
+				fg: config.value.fg,
 				bold: true
-			}, title));
-			children.push(h("box", {
-				key: "header",
-				style: { flex_direction: "row" }
-			}, headerParts));
-			children.push(h("text", {
-				key: "message",
-				style: { margin_top: 1 }
-			}, props.message));
-			return h("box", {
-				border: props.border === "none" ? void 0 : props.border,
-				fg: config.fg,
-				style: {
-					flex_direction: "column",
-					padding: 1
-				}
-			}, children);
+			}, toDisplayString(heading.value), 9, _hoisted_3$5)]), createElementVNode("text", { style: messageStyle }, toDisplayString(__props.message), 1)], 8, _hoisted_1$5);
 		};
 	}
 });
 //#endregion
-//#region src/components/Badge.ts
-/**
-* Badge Component - Status badge/tag
-*/
-const VARIANT_COLORS = {
-	default: { fg: "white" },
-	success: { fg: "green" },
-	warning: { fg: "yellow" },
-	error: { fg: "red" },
-	info: { fg: "cyan" }
-};
-const Badge = defineComponent({
+//#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"];
+//#endregion
+//#region src/components/FrescoBadge.vue
+var FrescoBadge_default = /* @__PURE__ */ defineComponent({
 	name: "Badge",
+	__name: "FrescoBadge",
 	props: {
 		label: {
 			type: String,
@@ -2048,37 +2148,47 @@ const Badge = defineComponent({
 		},
 		variant: {
 			type: String,
+			required: false,
 			default: "default"
 		},
-		fg: String,
-		bg: String,
+		fg: {
+			type: String,
+			required: false
+		},
+		bg: {
+			type: String,
+			required: false
+		},
 		border: {
 			type: Boolean,
+			required: false,
 			default: false
 		}
 	},
-	setup(props) {
-		return () => {
-			const colors = VARIANT_COLORS[props.variant];
-			const fg = props.fg ?? colors.fg;
-			const bg = props.bg ?? colors.bg;
-			if (props.border) return h("box", {
+	setup(__props) {
+		const colors = computed(() => badgeVariantColors[__props.variant]);
+		const foreground = computed(() => __props.fg ?? colors.value.fg);
+		const background = computed(() => __props.bg ?? colors.value.bg);
+		const borderStyle = {
+			paddingLeft: 1,
+			paddingRight: 1
+		};
+		return (_ctx, _cache) => {
+			return __props.border ? (openBlock(), createElementBlock("div", {
+				key: 0,
 				border: "single",
-				fg,
-				bg,
-				style: {
-					padding_left: 1,
-					padding_right: 1
-				}
-			}, [h("text", {
-				fg,
-				bg
-			}, props.label)]);
-			return h("text", {
-				fg,
-				bg,
+				fg: foreground.value,
+				bg: background.value,
+				style: borderStyle
+			}, [createElementVNode("text", {
+				fg: foreground.value,
+				bg: background.value
+			}, toDisplayString(__props.label), 9, _hoisted_2$4)], 8, _hoisted_1$4)) : (openBlock(), createElementBlock("text", {
+				key: 1,
+				fg: foreground.value,
+				bg: background.value,
 				bold: true
-			}, `[${props.label}]`);
+			}, "[" + toDisplayString(__props.label) + "]", 9, _hoisted_3$4));
 		};
 	}
 });
@@ -2201,12 +2311,21 @@ const Timer = defineComponent({
 	}
 });
 //#endregion
-//#region src/components/Tooltip.ts
-/**
-* Tooltip Component - Tooltip overlay
-*/
-const Tooltip = defineComponent({
-	name: "Tooltip",
+//#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",
+	__name: "FrescoTooltip",
 	props: {
 		text: {
 			type: String,
@@ -2214,56 +2333,54 @@ const Tooltip = defineComponent({
 		},
 		visible: {
 			type: Boolean,
+			required: false,
 			default: true
 		},
 		position: {
 			type: String,
+			required: false,
 			default: "top"
 		},
 		border: {
 			type: String,
+			required: false,
 			default: "rounded"
 		},
 		bg: {
 			type: String,
+			required: false,
 			default: "white"
 		},
 		fg: {
 			type: String,
+			required: false,
 			default: "black"
 		}
 	},
-	setup(props, { slots }) {
-		return () => {
-			const content = slots.default?.();
-			if (!props.visible) return h("box", {}, content);
-			const tooltip = h("box", {
-				key: "tooltip",
-				border: props.border === "none" ? void 0 : props.border,
-				bg: props.bg,
-				fg: props.fg,
-				style: {
-					padding_left: 1,
-					padding_right: 1
-				}
-			}, [h("text", {
-				fg: props.fg,
-				bg: props.bg
-			}, props.text)]);
-			const children = [];
-			switch (props.position) {
-				case "top":
-					children.push(tooltip);
-					children.push(h("box", { key: "content" }, content));
-					break;
-				case "bottom":
-					children.push(h("box", { key: "content" }, content));
-					children.push(tooltip);
-					break;
-				case "left": return h("box", { style: { flex_direction: "row" } }, [tooltip, h("box", { key: "content" }, content)]);
-				case "right": return h("box", { style: { flex_direction: "row" } }, [h("box", { key: "content" }, content), tooltip]);
-			}
-			return h("box", { style: { flex_direction: "column" } }, children);
+	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");
+		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", {
+					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")]));
 		};
 	}
 });
@@ -2672,12 +2789,19 @@ const Tabs = defineComponent({
 	}
 });
 //#endregion
-//#region src/components/Breadcrumb.ts
-/**
-* Breadcrumb Component - Navigation breadcrumb
-*/
-const Breadcrumb = defineComponent({
-	name: "Breadcrumb",
+//#region src/components/FrescoBreadcrumb.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = ["fg"];
+const _hoisted_2$2 = [
+	"fg",
+	"bold",
+	"underline"
+];
+const _hoisted_3$2 = ["fg"];
+//#endregion
+//#region src/components/FrescoBreadcrumb.vue
+var FrescoBreadcrumb_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoBreadcrumb",
+	__name: "FrescoBreadcrumb",
 	props: {
 		items: {
 			type: Array,
@@ -2685,43 +2809,47 @@ const Breadcrumb = defineComponent({
 		},
 		separator: {
 			type: String,
+			required: false,
 			default: " > "
 		},
 		fg: {
 			type: String,
+			required: false,
 			default: "gray"
 		},
 		activeFg: {
 			type: String,
+			required: false,
 			default: "white"
 		},
 		separatorFg: {
 			type: String,
+			required: false,
 			default: "gray"
 		}
 	},
 	emits: ["select"],
-	setup(props, { emit: _emit }) {
-		return () => {
-			return h("box", { style: { flex_direction: "row" } }, props.items.flatMap((item, index) => {
-				const isLast = index === props.items.length - 1;
-				const result = [];
-				if (item.icon) result.push(h("text", {
-					key: `icon-${item.key}`,
-					fg: isLast ? props.activeFg : props.fg
-				}, `${item.icon} `));
-				result.push(h("text", {
-					key: item.key,
-					fg: isLast ? props.activeFg : props.fg,
-					bold: isLast,
-					underline: !isLast
-				}, item.label));
-				if (!isLast) result.push(h("text", {
-					key: `sep-${item.key}`,
-					fg: props.separatorFg
-				}, props.separator));
-				return result;
-			}));
+	setup(__props) {
+		const rowStyle = { flexDirection: "row" };
+		const iconLabel = (item) => item.icon ? `${item.icon} ` : "";
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { style: rowStyle }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: item.key }, [
+					item.icon ? (openBlock(), createElementBlock("text", {
+						key: 0,
+						fg: index === __props.items.length - 1 ? __props.activeFg : __props.fg
+					}, toDisplayString(iconLabel(item)), 9, _hoisted_1$2)) : createCommentVNode("v-if", true),
+					createElementVNode("text", {
+						fg: index === __props.items.length - 1 ? __props.activeFg : __props.fg,
+						bold: index === __props.items.length - 1,
+						underline: index !== __props.items.length - 1
+					}, toDisplayString(item.label), 9, _hoisted_2$2),
+					index !== __props.items.length - 1 ? (openBlock(), createElementBlock("text", {
+						key: 1,
+						fg: __props.separatorFg
+					}, toDisplayString(__props.separator), 9, _hoisted_3$2)) : createCommentVNode("v-if", true)
+				], 64);
+			}), 128))]);
 		};
 	}
 });
@@ -2979,75 +3107,85 @@ const StatusBar = defineComponent({
 	}
 });
 //#endregion
-//#region src/components/Header.ts
-/**
-* Header Component - Application header
-*/
-const Header = defineComponent({
-	name: "Header",
+//#region src/components/FrescoHeader.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = ["bg"];
+const _hoisted_2$1 = { key: 0 };
+const _hoisted_3$1 = ["fg"];
+const _hoisted_4 = ["fg"];
+const _hoisted_5 = { key: 0 };
+const _hoisted_6 = {
+	key: 0,
+	dim: true
+};
+//#endregion
+//#region src/components/FrescoHeader.vue
+var FrescoHeader_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoHeader",
+	__name: "FrescoHeader",
 	props: {
 		title: {
 			type: String,
 			required: true
 		},
-		subtitle: String,
-		left: String,
-		right: String,
-		bg: String,
+		subtitle: {
+			type: String,
+			required: false
+		},
+		left: {
+			type: String,
+			required: false
+		},
+		right: {
+			type: String,
+			required: false
+		},
+		bg: {
+			type: String,
+			required: false
+		},
 		titleFg: {
 			type: String,
+			required: false,
 			default: "white"
 		},
 		subtitleFg: {
 			type: String,
+			required: false,
 			default: "gray"
 		},
 		borderBottom: {
 			type: Boolean,
+			required: false,
 			default: false
 		}
 	},
-	setup(props, { slots }) {
-		return () => {
-			const leftContent = slots.left?.() ?? (props.left ? [h("text", {}, props.left)] : []);
-			const rightContent = slots.right?.() ?? (props.right ? [h("text", {}, props.right)] : []);
-			const centerContent = [h("text", {
-				fg: props.titleFg,
-				bold: true
-			}, props.title)];
-			if (props.subtitle) centerContent.push(h("text", {
-				fg: props.subtitleFg,
-				dim: true
-			}, ` - ${props.subtitle}`));
-			const children = [h("box", {
-				key: "header-content",
-				bg: props.bg,
-				style: {
-					flex_direction: "row",
-					justify_content: "space-between",
-					align_items: "center",
-					width: "100%",
-					padding: 1
-				}
+	setup(__props) {
+		const rootStyle = { flexDirection: "column" };
+		const contentStyle = {
+			flexDirection: "row",
+			justifyContent: "space-between",
+			alignItems: "center",
+			width: "100%",
+			padding: 1
+		};
+		const rowStyle = { flexDirection: "row" };
+		const borderLabel = "─".repeat(80);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { style: rootStyle }, [createElementVNode("div", {
+				bg: __props.bg,
+				style: contentStyle
 			}, [
-				h("box", {
-					key: "left",
-					style: { flex_direction: "row" }
-				}, leftContent),
-				h("box", {
-					key: "center",
-					style: { flex_direction: "row" }
-				}, centerContent),
-				h("box", {
-					key: "right",
-					style: { flex_direction: "row" }
-				}, rightContent)
-			])];
-			if (props.borderBottom) children.push(h("text", {
-				key: "border",
-				dim: true
-			}, "─".repeat(80)));
-			return h("box", { style: { flex_direction: "column" } }, children);
+				createElementVNode("div", { style: rowStyle }, [renderSlot(_ctx.$slots, "left", {}, () => [__props.left ? (openBlock(), createElementBlock("text", _hoisted_2$1, toDisplayString(__props.left), 1)) : createCommentVNode("v-if", true)])]),
+				createElementVNode("div", { style: rowStyle }, [createElementVNode("text", {
+					fg: __props.titleFg,
+					bold: true
+				}, toDisplayString(__props.title), 9, _hoisted_3$1), __props.subtitle ? (openBlock(), createElementBlock("text", {
+					key: 0,
+					fg: __props.subtitleFg,
+					dim: true
+				}, " - " + toDisplayString(__props.subtitle), 9, _hoisted_4)) : createCommentVNode("v-if", true)]),
+				createElementVNode("div", { style: rowStyle }, [renderSlot(_ctx.$slots, "right", {}, () => [__props.right ? (openBlock(), createElementBlock("text", _hoisted_5, toDisplayString(__props.right), 1)) : createCommentVNode("v-if", true)])])
+			], 8, _hoisted_1$1), __props.borderBottom ? (openBlock(), createElementBlock("text", _hoisted_6, toDisplayString(unref(borderLabel)), 1)) : createCommentVNode("v-if", true)]);
 		};
 	}
 });
@@ -3113,82 +3251,81 @@ const KeyHint = defineComponent({
 	}
 });
 //#endregion
-//#region src/components/Avatar.ts
-/**
-* Avatar Component - User avatar display
-*/
-const STATUS_COLORS = {
-	online: "green",
-	offline: "gray",
-	away: "yellow",
-	busy: "red"
-};
-const STATUS_ICONS = {
-	online: "●",
-	offline: "○",
-	away: "◐",
-	busy: "⊘"
-};
-const Avatar = defineComponent({
-	name: "Avatar",
+//#region src/components/FrescoAvatar.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["border", "bg"];
+const _hoisted_2 = ["fg", "bg"];
+const _hoisted_3 = ["fg"];
+//#endregion
+//#region src/components/FrescoAvatar.vue
+var FrescoAvatar_default = /* @__PURE__ */ defineComponent({
+	name: "FrescoAvatar",
+	__name: "FrescoAvatar",
 	props: {
-		name: String,
-		initials: String,
+		name: {
+			type: String,
+			required: false
+		},
+		initials: {
+			type: String,
+			required: false
+		},
 		size: {
 			type: String,
+			required: false,
 			default: "md"
 		},
 		bg: {
 			type: String,
+			required: false,
 			default: "blue"
 		},
 		fg: {
 			type: String,
+			required: false,
 			default: "white"
 		},
 		border: {
 			type: Boolean,
+			required: false,
 			default: true
 		},
-		status: { type: String }
+		status: {
+			type: String,
+			required: false
+		}
 	},
-	setup(props) {
-		return () => {
-			let displayInitials = props.initials;
-			if (!displayInitials && props.name) {
-				const parts = props.name.split(" ").filter(Boolean);
-				if (parts.length >= 2) displayInitials = `${parts[0][0]}${parts[1][0]}`.toUpperCase();
-				else if (parts.length === 1) displayInitials = parts[0].slice(0, 2).toUpperCase();
-			}
-			displayInitials = displayInitials || "??";
-			const padding = props.size === "sm" ? 0 : props.size === "lg" ? 1 : 0;
-			const children = [h("text", {
-				fg: props.fg,
-				bg: props.bg,
+	setup(__props) {
+		const takeCodePoints = (value, count) => Array.from(value).slice(0, count).join("");
+		const displayInitials = computed(() => {
+			if (__props.initials) return __props.initials;
+			const parts = __props.name?.split(" ").filter(Boolean) ?? [];
+			if (parts.length >= 2) return `${takeCodePoints(parts[0], 1)}${takeCodePoints(parts[1], 1)}`.toUpperCase();
+			if (parts.length === 1) return takeCodePoints(parts[0], 2).toUpperCase();
+			return "??";
+		});
+		const padding = computed(() => __props.size === "lg" ? 1 : 0);
+		const containerStyle = computed(() => ({
+			flexDirection: "row",
+			paddingLeft: padding.value,
+			paddingRight: padding.value
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				border: __props.border ? "rounded" : void 0,
+				bg: __props.bg,
+				style: normalizeStyle(containerStyle.value)
+			}, [createElementVNode("text", {
+				fg: __props.fg,
+				bg: __props.bg,
 				bold: true
-			}, displayInitials)];
-			if (props.status) children.push(h("text", { fg: STATUS_COLORS[props.status] }, STATUS_ICONS[props.status]));
-			if (props.border) return h("box", {
-				border: "rounded",
-				bg: props.bg,
-				style: {
-					flex_direction: "row",
-					padding_left: padding,
-					padding_right: padding
-				}
-			}, children);
-			return h("box", {
-				bg: props.bg,
-				style: {
-					flex_direction: "row",
-					padding_left: padding,
-					padding_right: padding
-				}
-			}, children);
+			}, toDisplayString(displayInitials.value), 9, _hoisted_2), __props.status ? (openBlock(), createElementBlock("text", {
+				key: 0,
+				fg: unref(avatarStatusColors)[__props.status]
+			}, toDisplayString(unref(avatarStatusIcons)[__props.status]), 9, _hoisted_3)) : createCommentVNode("v-if", true)], 12, _hoisted_1);
 		};
 	}
 });
 //#endregion
-export { Newline as A, Spacer as B, Select as C, Code as D, Link as E, Grid as F, HStack as I, Stack as L, ScrollBar_default as M, Text as N, Transform as O, Card as P, VStack as R, Checkbox as S, TextInput as T, Box as V, ProgressBar as _, Modal as a, Confirm as b, Tabs as c, Table as d, List as f, Alert as g, Badge as h, StatusBar as i, ScrollBox_default as j, Static as k, Menu as l, Timer as m, KeyHint as n, Stepper as o, Tooltip as p, Header as r, Breadcrumb as s, Avatar as t, Tree as u, Spinner as v, TextArea as w, RadioGroup as x, Form as y, Divider as z };
+export { FrescoNewline_default as A, FrescoSpacer_default as B, Select as C, Code as D, FrescoLink_default as E, Grid as F, HStack as I, Stack as L, ScrollBar_default as M, Text as N, FrescoTransform_default as O, FrescoCard_default as P, VStack as R, Checkbox as S, TextInput as T, Box as V, ProgressBar as _, Modal as a, Confirm as b, Tabs as c, Table as d, List as f, FrescoAlert_default as g, FrescoBadge_default as h, StatusBar as i, ScrollBox_default as j, FrescoStatic_default as k, Menu as l, Timer as m, KeyHint as n, Stepper as o, FrescoTooltip_default as p, FrescoHeader_default as r, FrescoBreadcrumb_default as s, FrescoAvatar_default as t, Tree as u, FrescoSpinner_default as v, TextArea as w, RadioGroup as x, Form as y, Divider as z };
 
-//# sourceMappingURL=components-DWIDBGTL.mjs.map
+//# sourceMappingURL=components-D9SeB0Be.mjs.map