@orvui/vue 0.0.0-stage → 0.1.0

package/dist/status-bar-DbSKiZ3y.js

@@ -0,0 +1,332 @@
+import { a as e, s as t } from "./composables-BJ1sih_H.js";
+import { l as n, r } from "./ease-rIvCM4O3.js";
+import { n as i, t as a } from "./shared-BY_cwEzO.js";
+import { t as o } from "./ChartTooltip-BY8iAlEo.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, openBlock as b, provide as x, reactive as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useId as O, watch as k, withCtx as A } from "vue";
+import { AnimatePresence as j, motion as M } from "motion-v";
+// src/charts/status-bar/src/context.ts
+var N = [
+	{
+		id: "operational",
+		label: "Operational",
+		color: "#059669"
+	},
+	{
+		id: "degraded",
+		label: "Degraded",
+		color: "#d97706"
+	},
+	{
+		id: "outage",
+		label: "Outage",
+		color: "#e11d48"
+	},
+	{
+		id: "maintenance",
+		label: "Maintenance",
+		color: "#2563eb"
+	},
+	{
+		id: "unknown",
+		label: "No data",
+		color: "var(--muted-foreground)"
+	}
+];
+function P(n, r) {
+	let i = c(() => n.statuses ?? N), o = c(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of i.value) {
+			if (e.has(t.id)) throw Error(`StatusBar: duplicate status ID "${t.id}".`);
+			e.set(t.id, t);
+		}
+		let t = /* @__PURE__ */ new Set();
+		return n.data.map((n) => {
+			if (t.has(n.id)) throw Error(`StatusBar: duplicate period ID "${n.id}".`);
+			t.add(n.id);
+			let r = e.get(n.status);
+			if (!r) throw Error(`StatusBar: define the status "${n.status}" in statuses.`);
+			return {
+				datum: n,
+				status: r
+			};
+		});
+	}), s = a(() => n.activeId, n.defaultActiveId ?? null, c(() => o.value.map(({ datum: e }) => e.id)), (e) => {
+		r("update:activeId", e), r("activeChange", e);
+	}), l = c(() => o.value.findIndex(({ datum: e }) => e.id === s.value));
+	return S({
+		rows: o,
+		statuses: i,
+		activeId: s,
+		activeIndex: l,
+		active: c(() => o.value[l.value] ?? null),
+		label: c(() => n.label ?? "Status history"),
+		setActive(e) {
+			s.value = e;
+		},
+		plotRef: C(null),
+		tooltipOpen: C(!1),
+		tooltipId: O(),
+		reduce: t(),
+		canHover: e("(hover: hover)")
+	});
+}
+var F = i("StatusBar"), I = F.use, L = {
+	key: 0,
+	class: "py-4 text-sm text-muted-foreground"
+}, R = {
+	key: 1,
+	"data-slot": "status-bar-plot",
+	class: "min-w-0 space-y-1.5"
+}, z = {
+	"aria-hidden": "true",
+	class: "flex h-full items-center gap-0.5 sm:gap-1"
+}, B = [
+	"aria-label",
+	"max",
+	"value",
+	"aria-valuetext",
+	"aria-describedby"
+], V = {
+	key: 0,
+	class: "flex justify-between gap-4 text-xs text-muted-foreground"
+}, H = /* @__PURE__ */ h({
+	__name: "StatusBarPlot",
+	props: {
+		barClassName: {},
+		showLabels: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		let t = I(), i = C(null), a = C(!1), o = C(!1), p = c(() => t.rows[Math.max(0, t.activeIndex)]), h = c(() => p.value ? [
+			p.value.datum.label,
+			p.value.status.label,
+			p.value.datum.description
+		].filter(Boolean).join(". ") : "");
+		y(() => {
+			t.plotRef = i.value;
+		}), k(i, (e) => {
+			t.plotRef = e;
+		}, { flush: "post" }), v(() => {
+			t.plotRef === i.value && (t.plotRef = null);
+		});
+		function x(e) {
+			let n = e.currentTarget.getBoundingClientRect();
+			if (!n.width || !t.rows.length) return;
+			let r = Math.max(0, Math.min(1, (e.clientX - n.left) / n.width)), i = Math.min(t.rows.length - 1, Math.floor(r * t.rows.length));
+			t.setActive(t.rows[i].datum.id), t.tooltipOpen = !0;
+		}
+		function S() {
+			o.value = !0, !a.value && p.value && (t.setActive(p.value.datum.id), t.tooltipOpen = !0);
+		}
+		function O() {
+			o.value = !1, a.value = !1, t.tooltipOpen = !1;
+		}
+		function N(e) {
+			if (a.value) return;
+			let n = t.rows[Number(e.target.value)];
+			n && (t.setActive(n.datum.id), t.tooltipOpen = !0);
+		}
+		function P(e) {
+			a.value = !1, t.tooltipOpen = e.key !== "Escape";
+		}
+		function F(e) {
+			return {
+				opacity: {
+					duration: t.reduce ? .15 : .24,
+					ease: r,
+					delay: t.reduce ? 0 : e / Math.max(t.rows.length - 1, 1) * .18
+				},
+				y: n,
+				scaleY: n
+			};
+		}
+		return (n, c) => D(t).rows.length ? (b(), d("div", R, [
+			f("div", {
+				ref_key: "anchor",
+				ref: i,
+				class: "relative h-11 rounded-md has-focus-visible:outline-2 has-focus-visible:outline-offset-4 has-focus-visible:outline-ring"
+			}, [f("div", z, [(b(!0), d(s, null, w(D(t).rows, ({ datum: n, status: i }, a) => (b(), l(D(M).span, {
+				key: n.id,
+				"data-status-period": n.id,
+				"data-status": i.id,
+				class: g(["relative block h-8 min-w-0 flex-1 rounded-full", e.barClassName]),
+				initial: { opacity: 0 },
+				"while-in-view": D(t).reduce ? { opacity: 1 } : {
+					opacity: 1,
+					y: [4, 0],
+					scaleY: [.9, 1]
+				},
+				"in-view-options": { once: !0 },
+				transition: F(a)
+			}, {
+				default: A(() => [m(D(j), { initial: !1 }, {
+					default: A(() => [(b(), l(D(M).span, {
+						key: i.id + ":" + i.color,
+						class: "pointer-events-none absolute inset-0 rounded-[inherit]",
+						style: _({ backgroundColor: i.color }),
+						initial: { opacity: 0 },
+						animate: { opacity: 1 },
+						exit: { opacity: 0 },
+						transition: {
+							duration: .16,
+							ease: D(r)
+						}
+					}, null, 8, ["style", "transition"]))]),
+					_: 2
+				}, 1024), m(D(M).span, {
+					class: "pointer-events-none absolute -inset-0.5 rounded-[inherit] ring-1 ring-foreground/60",
+					initial: !1,
+					animate: { opacity: D(t).tooltipOpen && D(t).activeIndex === a ? 1 : 0 },
+					transition: {
+						duration: .1,
+						ease: D(r)
+					}
+				}, null, 8, ["animate", "transition"])]),
+				_: 2
+			}, 1032, [
+				"data-status-period",
+				"data-status",
+				"class",
+				"while-in-view",
+				"transition"
+			]))), 128))]), f("input", {
+				type: "range",
+				"aria-label": D(t).label + ": inspect period",
+				min: "0",
+				max: D(t).rows.length - 1,
+				step: "1",
+				value: Math.max(0, D(t).activeIndex),
+				"aria-valuetext": h.value,
+				"aria-describedby": D(t).tooltipOpen && D(t).activeIndex >= 0 ? D(t).tooltipId : void 0,
+				class: "absolute inset-0 m-0 size-full cursor-crosshair opacity-0",
+				onFocus: S,
+				onBlur: O,
+				onInput: N,
+				onKeydown: P,
+				onPointerenter: c[0] ||= (e) => D(t).canHover && x(e),
+				onPointermove: c[1] ||= (e) => (D(t).canHover || e.buttons === 1) && x(e),
+				onPointerleave: c[2] ||= (e) => (!o.value || a.value) && (D(t).tooltipOpen = !1),
+				onPointerdown: c[3] ||= (e) => {
+					a.value = !0, x(e);
+				},
+				onPointercancel: c[4] ||= (e) => {
+					a.value = !1, D(t).tooltipOpen = !1;
+				},
+				onClick: c[5] ||= (e) => a.value = !1
+			}, null, 40, B)], 512),
+			e.showLabels ? (b(), d("div", V, [f("span", null, E(D(t).rows[0].datum.label), 1), f("span", null, E(D(t).rows.at(-1)?.datum.label), 1)])) : u("", !0),
+			T(n.$slots, "default")
+		])) : (b(), d("p", L, " No status data "));
+	}
+}), U = {
+	"aria-label": "Status legend",
+	"data-slot": "status-bar-legend",
+	class: "flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted-foreground"
+}, W = {
+	key: 0,
+	class: "tabular-nums"
+}, G = /* @__PURE__ */ h({
+	__name: "StatusBarLegend",
+	props: { showCounts: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(e) {
+		let t = I(), n = c(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let { status: n } of t.rows) e.set(n.id, (e.get(n.id) ?? 0) + 1);
+			return e;
+		});
+		return (r, i) => (b(), d("ul", U, [T(r.$slots, "default", {}, () => [(b(!0), d(s, null, w(D(t).statuses, (t) => (b(), d("li", {
+			key: t.id,
+			class: "flex items-center gap-1.5"
+		}, [
+			f("span", {
+				"aria-hidden": "true",
+				class: "h-3 w-1.5 rounded-full",
+				style: _({ backgroundColor: t.color })
+			}, null, 4),
+			f("span", null, E(t.label), 1),
+			e.showCounts ? (b(), d("span", W, "(" + E(n.value.get(t.id) ?? 0) + ")", 1)) : u("", !0)
+		]))), 128))])]));
+	}
+}), K = { class: "text-muted-foreground" }, q = { class: "mt-1 flex items-center gap-2 font-medium" }, J = {
+	key: 0,
+	class: "mt-1 text-muted-foreground"
+}, Y = /* @__PURE__ */ h({
+	__name: "StatusBarTooltip",
+	props: { side: { default: "top" } },
+	setup(e) {
+		let t = I(), n = c(() => ({
+			x: (Math.max(0, t.activeIndex) + .5) / Math.max(1, t.rows.length),
+			y: .1
+		}));
+		return (r, i) => (b(), l(o, {
+			open: D(t).tooltipOpen && D(t).active !== null,
+			anchor: D(t).plotRef,
+			id: D(t).tooltipId,
+			point: n.value,
+			side: e.side,
+			"follow-cursor": !1,
+			"onUpdate:open": i[0] ||= (e) => D(t).tooltipOpen = e
+		}, {
+			default: A(() => [D(t).active ? T(r.$slots, "default", {
+				datum: D(t).active.datum,
+				status: D(t).active.status
+			}, () => [
+				f("p", K, E(D(t).active.datum.label), 1),
+				f("p", q, [f("span", {
+					class: "size-2 rounded-full",
+					style: _({ backgroundColor: D(t).active.status.color })
+				}, null, 4), p(E(D(t).active.status.label), 1)]),
+				D(t).active.datum.description ? (b(), d("p", J, E(D(t).active.datum.description), 1)) : u("", !0)
+			], void 0, 0) : u("", !0)]),
+			_: 3
+		}, 8, [
+			"open",
+			"anchor",
+			"id",
+			"point",
+			"side"
+		]));
+	}
+}), X = ["aria-label"], Z = { class: "sr-only" }, Q = /* @__PURE__ */ h({
+	__name: "StatusBar",
+	props: {
+		data: {},
+		statuses: {},
+		label: {},
+		activeId: {},
+		defaultActiveId: {},
+		className: {}
+	},
+	emits: ["update:activeId", "activeChange"],
+	setup(e, { emit: t }) {
+		let n = e, r = P(n, t);
+		return x(F.key, r), (e, t) => (b(), d("section", {
+			"aria-label": D(r).label,
+			class: g(["relative min-w-0 w-full space-y-3", n.className])
+		}, [T(e.$slots, "default", {}, () => [
+			m(H),
+			m(G),
+			m(Y)
+		]), f("div", Z, [f("table", null, [
+			f("caption", null, E(D(r).label) + " data ", 1),
+			t[0] ||= f("thead", null, [f("tr", null, [
+				f("th", null, "Period"),
+				f("th", null, "Status"),
+				f("th", null, "Description")
+			])], -1),
+			f("tbody", null, [(b(!0), d(s, null, w(D(r).rows, ({ datum: e, status: t }) => (b(), d("tr", { key: e.id }, [
+				f("th", null, E(e.label), 1),
+				f("td", null, E(t.label), 1),
+				f("td", null, E(e.description), 1)
+			]))), 128))])
+		])])], 10, X));
+	}
+});
+export { N as a, H as i, Y as n, I as o, G as r, Q as t };
+
+//# sourceMappingURL=status-bar-DbSKiZ3y.js.map

package/dist/status-bar-DbSKiZ3y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar-DbSKiZ3y.js","names":["_hoisted_1","_hoisted_2","_hoisted_3","_unref","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_createBlock","_normalizeClass","_withCtx","_createVNode","_normalizeStyle","_toDisplayString","_createCommentVNode","_renderSlot","_sfc_main","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_renderSlot","_Fragment","_renderList","_unref","_createElementVNode","_normalizeStyle","_toDisplayString","_createCommentVNode","_sfc_main","_hoisted_1","_hoisted_2","_openBlock","_createBlock","ChartTooltip","_unref","_withCtx","_renderSlot","_createElementVNode","_toDisplayString","_normalizeStyle","_createTextVNode","_createElementBlock","_createCommentVNode","_sfc_main","emit","_openBlock","_createElementBlock","_unref","_normalizeClass","_renderSlot","_createVNode","StatusBarPlot","StatusBarLegend","StatusBarTooltip","_createElementVNode","_toDisplayString","_Fragment","_renderList","_sfc_main","useMediaQuery","useReducedMotion","SPRING_PRESS","context","activeSelection","ChartTooltip_default","STATUS_BAR_STATUSES","createStatusBarModel","statuses","computed","props","rows","definitions","status","periods","datum","activeId","emit","value","activeIndex","reactive","ref","useId","statusBarContext","useStatusBar","_hoisted_1$3","_hoisted_2$3","_hoisted_3$1","_hoisted_4","_hoisted_5","StatusBarPlot_default","defineComponent","history","anchor","pointer","focused","selected","valueText","onMounted","watch","element","onBeforeUnmount","inspect","bounds","event","fraction","index","focus","blur","input","row","keydown","reveal","EASE_OUT","unref","openBlock","createElementBlock","createElementVNode","Fragment","renderList","createBlock","motion","normalizeClass","__props","withCtx","createVNode","AnimatePresence","normalizeStyle","_cache","$event","toDisplayString","createCommentVNode","renderSlot","_ctx","_hoisted_1$2","_hoisted_2$2","StatusBarLegend_default","counts","totals","_hoisted_1$1","_hoisted_2$1","_hoisted_3","StatusBarTooltip_default","point","createTextVNode","_hoisted_1","_hoisted_2","StatusBar_default","__emit","provide"],"sources":["../src/charts/status-bar/src/context.ts","../src/charts/status-bar/src/StatusBarPlot.vue","../src/charts/status-bar/src/StatusBarPlot.vue","../src/charts/status-bar/src/StatusBarLegend.vue","../src/charts/status-bar/src/StatusBarLegend.vue","../src/charts/status-bar/src/StatusBarTooltip.vue","../src/charts/status-bar/src/StatusBarTooltip.vue","../src/charts/status-bar/src/StatusBar.vue","../src/charts/status-bar/src/StatusBar.vue"],"sourcesContent":["import { computed, reactive, ref, useId } from \"vue\";\nimport { useMediaQuery, useReducedMotion } from \"../../../lib/composables\";\nimport { activeSelection, context } from \"../../shared\";\nexport interface StatusBarDatum {\n  id: string;\n  label: string;\n  status: string;\n  description?: string;\n}\nexport interface StatusBarStatus {\n  id: string;\n  label: string;\n  color: string;\n}\nexport const STATUS_BAR_STATUSES: readonly StatusBarStatus[] = [\n  { id: \"operational\", label: \"Operational\", color: \"#059669\" },\n  { id: \"degraded\", label: \"Degraded\", color: \"#d97706\" },\n  { id: \"outage\", label: \"Outage\", color: \"#e11d48\" },\n  { id: \"maintenance\", label: \"Maintenance\", color: \"#2563eb\" },\n  { id: \"unknown\", label: \"No data\", color: \"var(--muted-foreground)\" },\n];\nexport interface StatusBarProps {\n  data: readonly StatusBarDatum[];\n  statuses?: readonly StatusBarStatus[];\n  label?: string;\n  activeId?: string | null;\n  defaultActiveId?: string | null;\n  className?: string;\n}\nexport function createStatusBarModel(\n  props: StatusBarProps,\n  emit: (event: any, ...args: any[]) => void,\n) {\n  const statuses = computed(() => props.statuses ?? STATUS_BAR_STATUSES);\n  const rows = computed(() => {\n    const definitions = new Map<string, StatusBarStatus>();\n    for (const status of statuses.value) {\n      if (definitions.has(status.id))\n        throw Error(`StatusBar: duplicate status ID \"${status.id}\".`);\n      definitions.set(status.id, status);\n    }\n    const periods = new Set<string>();\n    return props.data.map((datum) => {\n      if (periods.has(datum.id))\n        throw Error(`StatusBar: duplicate period ID \"${datum.id}\".`);\n      periods.add(datum.id);\n      const status = definitions.get(datum.status);\n      if (!status)\n        throw Error(\n          `StatusBar: define the status \"${datum.status}\" in statuses.`,\n        );\n      return { datum, status };\n    });\n  });\n  const activeId = activeSelection(\n    () => props.activeId,\n    props.defaultActiveId ?? null,\n    computed(() => rows.value.map(({ datum }) => datum.id)),\n    (value) => {\n      emit(\"update:activeId\", value);\n      emit(\"activeChange\", value);\n    },\n  );\n  const activeIndex = computed(() =>\n    rows.value.findIndex(({ datum }) => datum.id === activeId.value),\n  );\n  return reactive({\n    rows,\n    statuses,\n    activeId,\n    activeIndex,\n    active: computed(() => rows.value[activeIndex.value] ?? null),\n    label: computed(() => props.label ?? \"Status history\"),\n    setActive(value: string | null) {\n      activeId.value = value;\n    },\n    plotRef: ref<HTMLElement | null>(null),\n    tooltipOpen: ref(false),\n    tooltipId: useId(),\n    reduce: useReducedMotion(),\n    canHover: useMediaQuery(\"(hover: hover)\"),\n  });\n}\nexport const statusBarContext =\n  context<ReturnType<typeof createStatusBarModel>>(\"StatusBar\");\nexport const useStatusBar = statusBarContext.use;\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { motion, AnimatePresence } from \"motion-v\";\nimport { EASE_OUT, SPRING_PRESS } from \"../../../lib/ease\";\nimport { useStatusBar } from \"./context\";\nwithDefaults(defineProps<{ barClassName?: string; showLabels?: boolean }>(), {\n  showLabels: true,\n});\nconst history = useStatusBar();\nconst anchor = ref<HTMLElement | null>(null);\nconst pointer = ref(false);\nconst focused = ref(false);\nconst selected = computed(() => history.rows[Math.max(0, history.activeIndex)]);\nconst valueText = computed(() =>\n  selected.value\n    ? [\n        selected.value.datum.label,\n        selected.value.status.label,\n        selected.value.datum.description,\n      ]\n        .filter(Boolean)\n        .join(\". \")\n    : \"\",\n);\nonMounted(() => {\n  history.plotRef = anchor.value;\n});\nwatch(\n  anchor,\n  (element) => {\n    history.plotRef = element;\n  },\n  { flush: \"post\" },\n);\nonBeforeUnmount(() => {\n  if (history.plotRef === anchor.value) history.plotRef = null;\n});\nfunction inspect(event: PointerEvent) {\n  const element = event.currentTarget as HTMLElement;\n  const bounds = element.getBoundingClientRect();\n  if (!bounds.width || !history.rows.length) return;\n  const fraction = Math.max(\n    0,\n    Math.min(1, (event.clientX - bounds.left) / bounds.width),\n  );\n  const index = Math.min(\n    history.rows.length - 1,\n    Math.floor(fraction * history.rows.length),\n  );\n  history.setActive(history.rows[index].datum.id);\n  history.tooltipOpen = true;\n}\nfunction focus() {\n  focused.value = true;\n  if (!pointer.value && selected.value) {\n    history.setActive(selected.value.datum.id);\n    history.tooltipOpen = true;\n  }\n}\nfunction blur() {\n  focused.value = false;\n  pointer.value = false;\n  history.tooltipOpen = false;\n}\nfunction input(event: Event) {\n  if (pointer.value) return;\n  const row = history.rows[Number((event.target as HTMLInputElement).value)];\n  if (row) {\n    history.setActive(row.datum.id);\n    history.tooltipOpen = true;\n  }\n}\nfunction keydown(event: KeyboardEvent) {\n  pointer.value = false;\n  history.tooltipOpen = event.key !== \"Escape\";\n}\nfunction reveal(index: number) {\n  return {\n    opacity: {\n      duration: history.reduce ? 0.15 : 0.24,\n      ease: EASE_OUT,\n      delay: history.reduce\n        ? 0\n        : (index / Math.max(history.rows.length - 1, 1)) * 0.18,\n    },\n    y: SPRING_PRESS,\n    scaleY: SPRING_PRESS,\n  };\n}\n</script>\n\n<template>\n  <p v-if=\"!history.rows.length\" class=\"py-4 text-sm text-muted-foreground\">\n    No status data\n  </p>\n  <div v-else data-slot=\"status-bar-plot\" class=\"min-w-0 space-y-1.5\">\n    <div\n      ref=\"anchor\"\n      class=\"relative h-11 rounded-md has-focus-visible:outline-2 has-focus-visible:outline-offset-4 has-focus-visible:outline-ring\"\n    >\n      <div aria-hidden=\"true\" class=\"flex h-full items-center gap-0.5 sm:gap-1\">\n        <motion.span\n          v-for=\"({ datum, status }, index) in history.rows\"\n          :key=\"datum.id\"\n          :data-status-period=\"datum.id\"\n          :data-status=\"status.id\"\n          :class=\"[\n            'relative block h-8 min-w-0 flex-1 rounded-full',\n            barClassName,\n          ]\"\n          :initial=\"{ opacity: 0 }\"\n          :while-in-view=\"\n            history.reduce\n              ? { opacity: 1 }\n              : { opacity: 1, y: [4, 0], scaleY: [0.9, 1] }\n          \"\n          :in-view-options=\"{ once: true }\"\n          :transition=\"reveal(index)\"\n        >\n          <AnimatePresence :initial=\"false\">\n            <motion.span\n              :key=\"status.id + ':' + status.color\"\n              class=\"pointer-events-none absolute inset-0 rounded-[inherit]\"\n              :style=\"{ backgroundColor: status.color }\"\n              :initial=\"{ opacity: 0 }\"\n              :animate=\"{ opacity: 1 }\"\n              :exit=\"{ opacity: 0 }\"\n              :transition=\"{ duration: 0.16, ease: EASE_OUT }\"\n            />\n          </AnimatePresence>\n          <motion.span\n            class=\"pointer-events-none absolute -inset-0.5 rounded-[inherit] ring-1 ring-foreground/60\"\n            :initial=\"false\"\n            :animate=\"{\n              opacity:\n                history.tooltipOpen && history.activeIndex === index ? 1 : 0,\n            }\"\n            :transition=\"{ duration: 0.1, ease: EASE_OUT }\"\n          />\n        </motion.span>\n      </div>\n      <input\n        type=\"range\"\n        :aria-label=\"history.label + ': inspect period'\"\n        min=\"0\"\n        :max=\"history.rows.length - 1\"\n        step=\"1\"\n        :value=\"Math.max(0, history.activeIndex)\"\n        :aria-valuetext=\"valueText\"\n        :aria-describedby=\"\n          history.tooltipOpen && history.activeIndex >= 0\n            ? history.tooltipId\n            : undefined\n        \"\n        class=\"absolute inset-0 m-0 size-full cursor-crosshair opacity-0\"\n        @focus=\"focus\"\n        @blur=\"blur\"\n        @input=\"input\"\n        @keydown=\"keydown\"\n        @pointerenter=\"history.canHover && inspect($event)\"\n        @pointermove=\"\n          (history.canHover || $event.buttons === 1) && inspect($event)\n        \"\n        @pointerleave=\"(!focused || pointer) && (history.tooltipOpen = false)\"\n        @pointerdown=\"\n          pointer = true;\n          inspect($event);\n        \"\n        @pointercancel=\"\n          pointer = false;\n          history.tooltipOpen = false;\n        \"\n        @click=\"pointer = false\"\n      />\n    </div>\n    <div\n      v-if=\"showLabels\"\n      class=\"flex justify-between gap-4 text-xs text-muted-foreground\"\n    >\n      <span>{{ history.rows[0].datum.label }}</span\n      ><span>{{ history.rows.at(-1)?.datum.label }}</span>\n    </div>\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { motion, AnimatePresence } from \"motion-v\";\nimport { EASE_OUT, SPRING_PRESS } from \"../../../lib/ease\";\nimport { useStatusBar } from \"./context\";\nwithDefaults(defineProps<{ barClassName?: string; showLabels?: boolean }>(), {\n  showLabels: true,\n});\nconst history = useStatusBar();\nconst anchor = ref<HTMLElement | null>(null);\nconst pointer = ref(false);\nconst focused = ref(false);\nconst selected = computed(() => history.rows[Math.max(0, history.activeIndex)]);\nconst valueText = computed(() =>\n  selected.value\n    ? [\n        selected.value.datum.label,\n        selected.value.status.label,\n        selected.value.datum.description,\n      ]\n        .filter(Boolean)\n        .join(\". \")\n    : \"\",\n);\nonMounted(() => {\n  history.plotRef = anchor.value;\n});\nwatch(\n  anchor,\n  (element) => {\n    history.plotRef = element;\n  },\n  { flush: \"post\" },\n);\nonBeforeUnmount(() => {\n  if (history.plotRef === anchor.value) history.plotRef = null;\n});\nfunction inspect(event: PointerEvent) {\n  const element = event.currentTarget as HTMLElement;\n  const bounds = element.getBoundingClientRect();\n  if (!bounds.width || !history.rows.length) return;\n  const fraction = Math.max(\n    0,\n    Math.min(1, (event.clientX - bounds.left) / bounds.width),\n  );\n  const index = Math.min(\n    history.rows.length - 1,\n    Math.floor(fraction * history.rows.length),\n  );\n  history.setActive(history.rows[index].datum.id);\n  history.tooltipOpen = true;\n}\nfunction focus() {\n  focused.value = true;\n  if (!pointer.value && selected.value) {\n    history.setActive(selected.value.datum.id);\n    history.tooltipOpen = true;\n  }\n}\nfunction blur() {\n  focused.value = false;\n  pointer.value = false;\n  history.tooltipOpen = false;\n}\nfunction input(event: Event) {\n  if (pointer.value) return;\n  const row = history.rows[Number((event.target as HTMLInputElement).value)];\n  if (row) {\n    history.setActive(row.datum.id);\n    history.tooltipOpen = true;\n  }\n}\nfunction keydown(event: KeyboardEvent) {\n  pointer.value = false;\n  history.tooltipOpen = event.key !== \"Escape\";\n}\nfunction reveal(index: number) {\n  return {\n    opacity: {\n      duration: history.reduce ? 0.15 : 0.24,\n      ease: EASE_OUT,\n      delay: history.reduce\n        ? 0\n        : (index / Math.max(history.rows.length - 1, 1)) * 0.18,\n    },\n    y: SPRING_PRESS,\n    scaleY: SPRING_PRESS,\n  };\n}\n</script>\n\n<template>\n  <p v-if=\"!history.rows.length\" class=\"py-4 text-sm text-muted-foreground\">\n    No status data\n  </p>\n  <div v-else data-slot=\"status-bar-plot\" class=\"min-w-0 space-y-1.5\">\n    <div\n      ref=\"anchor\"\n      class=\"relative h-11 rounded-md has-focus-visible:outline-2 has-focus-visible:outline-offset-4 has-focus-visible:outline-ring\"\n    >\n      <div aria-hidden=\"true\" class=\"flex h-full items-center gap-0.5 sm:gap-1\">\n        <motion.span\n          v-for=\"({ datum, status }, index) in history.rows\"\n          :key=\"datum.id\"\n          :data-status-period=\"datum.id\"\n          :data-status=\"status.id\"\n          :class=\"[\n            'relative block h-8 min-w-0 flex-1 rounded-full',\n            barClassName,\n          ]\"\n          :initial=\"{ opacity: 0 }\"\n          :while-in-view=\"\n            history.reduce\n              ? { opacity: 1 }\n              : { opacity: 1, y: [4, 0], scaleY: [0.9, 1] }\n          \"\n          :in-view-options=\"{ once: true }\"\n          :transition=\"reveal(index)\"\n        >\n          <AnimatePresence :initial=\"false\">\n            <motion.span\n              :key=\"status.id + ':' + status.color\"\n              class=\"pointer-events-none absolute inset-0 rounded-[inherit]\"\n              :style=\"{ backgroundColor: status.color }\"\n              :initial=\"{ opacity: 0 }\"\n              :animate=\"{ opacity: 1 }\"\n              :exit=\"{ opacity: 0 }\"\n              :transition=\"{ duration: 0.16, ease: EASE_OUT }\"\n            />\n          </AnimatePresence>\n          <motion.span\n            class=\"pointer-events-none absolute -inset-0.5 rounded-[inherit] ring-1 ring-foreground/60\"\n            :initial=\"false\"\n            :animate=\"{\n              opacity:\n                history.tooltipOpen && history.activeIndex === index ? 1 : 0,\n            }\"\n            :transition=\"{ duration: 0.1, ease: EASE_OUT }\"\n          />\n        </motion.span>\n      </div>\n      <input\n        type=\"range\"\n        :aria-label=\"history.label + ': inspect period'\"\n        min=\"0\"\n        :max=\"history.rows.length - 1\"\n        step=\"1\"\n        :value=\"Math.max(0, history.activeIndex)\"\n        :aria-valuetext=\"valueText\"\n        :aria-describedby=\"\n          history.tooltipOpen && history.activeIndex >= 0\n            ? history.tooltipId\n            : undefined\n        \"\n        class=\"absolute inset-0 m-0 size-full cursor-crosshair opacity-0\"\n        @focus=\"focus\"\n        @blur=\"blur\"\n        @input=\"input\"\n        @keydown=\"keydown\"\n        @pointerenter=\"history.canHover && inspect($event)\"\n        @pointermove=\"\n          (history.canHover || $event.buttons === 1) && inspect($event)\n        \"\n        @pointerleave=\"(!focused || pointer) && (history.tooltipOpen = false)\"\n        @pointerdown=\"\n          pointer = true;\n          inspect($event);\n        \"\n        @pointercancel=\"\n          pointer = false;\n          history.tooltipOpen = false;\n        \"\n        @click=\"pointer = false\"\n      />\n    </div>\n    <div\n      v-if=\"showLabels\"\n      class=\"flex justify-between gap-4 text-xs text-muted-foreground\"\n    >\n      <span>{{ history.rows[0].datum.label }}</span\n      ><span>{{ history.rows.at(-1)?.datum.label }}</span>\n    </div>\n    <slot />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useStatusBar } from \"./context\";\nwithDefaults(defineProps<{ showCounts?: boolean }>(), { showCounts: false });\nconst history = useStatusBar();\nconst counts = computed(() => {\n  const totals = new Map<string, number>();\n  for (const { status } of history.rows)\n    totals.set(status.id, (totals.get(status.id) ?? 0) + 1);\n  return totals;\n});\n</script>\n\n<template>\n  <ul\n    aria-label=\"Status legend\"\n    data-slot=\"status-bar-legend\"\n    class=\"flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted-foreground\"\n  >\n    <slot>\n      <li\n        v-for=\"status in history.statuses\"\n        :key=\"status.id\"\n        class=\"flex items-center gap-1.5\"\n      >\n        <span\n          aria-hidden=\"true\"\n          class=\"h-3 w-1.5 rounded-full\"\n          :style=\"{ backgroundColor: status.color }\"\n        />\n        <span>{{ status.label }}</span\n        ><span v-if=\"showCounts\" class=\"tabular-nums\"\n          >({{ counts.get(status.id) ?? 0 }})</span\n        >\n      </li>\n    </slot>\n  </ul>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useStatusBar } from \"./context\";\nwithDefaults(defineProps<{ showCounts?: boolean }>(), { showCounts: false });\nconst history = useStatusBar();\nconst counts = computed(() => {\n  const totals = new Map<string, number>();\n  for (const { status } of history.rows)\n    totals.set(status.id, (totals.get(status.id) ?? 0) + 1);\n  return totals;\n});\n</script>\n\n<template>\n  <ul\n    aria-label=\"Status legend\"\n    data-slot=\"status-bar-legend\"\n    class=\"flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted-foreground\"\n  >\n    <slot>\n      <li\n        v-for=\"status in history.statuses\"\n        :key=\"status.id\"\n        class=\"flex items-center gap-1.5\"\n      >\n        <span\n          aria-hidden=\"true\"\n          class=\"h-3 w-1.5 rounded-full\"\n          :style=\"{ backgroundColor: status.color }\"\n        />\n        <span>{{ status.label }}</span\n        ><span v-if=\"showCounts\" class=\"tabular-nums\"\n          >({{ counts.get(status.id) ?? 0 }})</span\n        >\n      </li>\n    </slot>\n  </ul>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport ChartTooltip from \"../../ChartTooltip.vue\";\nimport { useStatusBar } from \"./context\";\nwithDefaults(defineProps<{ side?: \"top\" | \"right\" | \"bottom\" | \"left\" }>(), {\n  side: \"top\",\n});\nconst history = useStatusBar();\nconst point = computed(() => ({\n  x:\n    (Math.max(0, history.activeIndex) + 0.5) / Math.max(1, history.rows.length),\n  y: 0.1,\n}));\n</script>\n\n<template>\n  <ChartTooltip\n    :open=\"history.tooltipOpen && history.active !== null\"\n    :anchor=\"history.plotRef\"\n    :id=\"history.tooltipId\"\n    :point=\"point\"\n    :side=\"side\"\n    :follow-cursor=\"false\"\n    @update:open=\"history.tooltipOpen = $event\"\n  >\n    <slot\n      v-if=\"history.active\"\n      :datum=\"history.active.datum\"\n      :status=\"history.active.status\"\n    >\n      <p class=\"text-muted-foreground\">{{ history.active.datum.label }}</p>\n      <p class=\"mt-1 flex items-center gap-2 font-medium\">\n        <span\n          class=\"size-2 rounded-full\"\n          :style=\"{ backgroundColor: history.active.status.color }\"\n        />{{ history.active.status.label }}\n      </p>\n      <p\n        v-if=\"history.active.datum.description\"\n        class=\"mt-1 text-muted-foreground\"\n      >\n        {{ history.active.datum.description }}\n      </p>\n    </slot>\n  </ChartTooltip>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport ChartTooltip from \"../../ChartTooltip.vue\";\nimport { useStatusBar } from \"./context\";\nwithDefaults(defineProps<{ side?: \"top\" | \"right\" | \"bottom\" | \"left\" }>(), {\n  side: \"top\",\n});\nconst history = useStatusBar();\nconst point = computed(() => ({\n  x:\n    (Math.max(0, history.activeIndex) + 0.5) / Math.max(1, history.rows.length),\n  y: 0.1,\n}));\n</script>\n\n<template>\n  <ChartTooltip\n    :open=\"history.tooltipOpen && history.active !== null\"\n    :anchor=\"history.plotRef\"\n    :id=\"history.tooltipId\"\n    :point=\"point\"\n    :side=\"side\"\n    :follow-cursor=\"false\"\n    @update:open=\"history.tooltipOpen = $event\"\n  >\n    <slot\n      v-if=\"history.active\"\n      :datum=\"history.active.datum\"\n      :status=\"history.active.status\"\n    >\n      <p class=\"text-muted-foreground\">{{ history.active.datum.label }}</p>\n      <p class=\"mt-1 flex items-center gap-2 font-medium\">\n        <span\n          class=\"size-2 rounded-full\"\n          :style=\"{ backgroundColor: history.active.status.color }\"\n        />{{ history.active.status.label }}\n      </p>\n      <p\n        v-if=\"history.active.datum.description\"\n        class=\"mt-1 text-muted-foreground\"\n      >\n        {{ history.active.datum.description }}\n      </p>\n    </slot>\n  </ChartTooltip>\n</template>\n","<script setup lang=\"ts\">\nimport { provide } from \"vue\";\nimport {\n  createStatusBarModel,\n  statusBarContext,\n  type StatusBarProps,\n} from \"./context\";\nimport StatusBarPlot from \"./StatusBarPlot.vue\";\nimport StatusBarLegend from \"./StatusBarLegend.vue\";\nimport StatusBarTooltip from \"./StatusBarTooltip.vue\";\nconst props = defineProps<StatusBarProps>();\nconst emit = defineEmits([\"update:activeId\", \"activeChange\"]);\nconst history = createStatusBarModel(props, emit);\nprovide(statusBarContext.key, history);\n</script>\n\n<template>\n  <section\n    :aria-label=\"history.label\"\n    :class=\"['relative min-w-0 w-full space-y-3', props.className]\"\n  >\n    <slot><StatusBarPlot /><StatusBarLegend /><StatusBarTooltip /></slot>\n    <div class=\"sr-only\">\n      <table>\n        <caption>\n          {{\n            history.label\n          }}\n          data\n        </caption>\n        <thead>\n          <tr>\n            <th>Period</th>\n            <th>Status</th>\n            <th>Description</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr v-for=\"{ datum, status } in history.rows\" :key=\"datum.id\">\n            <th>{{ datum.label }}</th>\n            <td>{{ status.label }}</td>\n            <td>{{ datum.description }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </section>\n</template>\n","<script setup lang=\"ts\">\nimport { provide } from \"vue\";\nimport {\n  createStatusBarModel,\n  statusBarContext,\n  type StatusBarProps,\n} from \"./context\";\nimport StatusBarPlot from \"./StatusBarPlot.vue\";\nimport StatusBarLegend from \"./StatusBarLegend.vue\";\nimport StatusBarTooltip from \"./StatusBarTooltip.vue\";\nconst props = defineProps<StatusBarProps>();\nconst emit = defineEmits([\"update:activeId\", \"activeChange\"]);\nconst history = createStatusBarModel(props, emit);\nprovide(statusBarContext.key, history);\n</script>\n\n<template>\n  <section\n    :aria-label=\"history.label\"\n    :class=\"['relative min-w-0 w-full space-y-3', props.className]\"\n  >\n    <slot><StatusBarPlot /><StatusBarLegend /><StatusBarTooltip /></slot>\n    <div class=\"sr-only\">\n      <table>\n        <caption>\n          {{\n            history.label\n          }}\n          data\n        </caption>\n        <thead>\n          <tr>\n            <th>Period</th>\n            <th>Status</th>\n            <th>Description</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr v-for=\"{ datum, status } in history.rows\" :key=\"datum.id\">\n            <th>{{ datum.label }}</th>\n            <td>{{ status.label }}</td>\n            <td>{{ datum.description }}</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </section>\n</template>\n"],"mappings":"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"}

package/dist/stream-follow-D51R7eNh.js

@@ -0,0 +1,28 @@
+import { onBeforeUnmount as e, onMounted as t, watch as n } from "vue";
+// src/agents/stream-follow.ts
+function r(r, i, a, o) {
+	let s = !1, c, l = () => {
+		c !== void 0 && cancelAnimationFrame(c), c = void 0;
+	};
+	function u() {
+		l(), s && i() && (c = requestAnimationFrame(() => {
+			c = void 0;
+			let e = r.value;
+			!s || !i() || !e || e.scrollHeight <= e.clientHeight || (typeof e.scrollTo == "function" ? e.scrollTo({
+				top: e.scrollHeight,
+				behavior: a.value ? "auto" : "smooth"
+			}) : e.scrollTop = e.scrollHeight);
+		}));
+	}
+	return n(o, u, {
+		deep: !0,
+		flush: "post"
+	}), t(() => {
+		s = !0, u();
+	}), e(() => {
+		s = !1, l();
+	}), u;
+}
+export { r as t };
+
+//# sourceMappingURL=stream-follow-D51R7eNh.js.map

package/dist/stream-follow-D51R7eNh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stream-follow-D51R7eNh.js","names":["useStreamFollow","mounted","pending","clear","schedule","enabled","viewport","element","reduced","watch","changes","onMounted","onBeforeUnmount"],"sources":["../src/agents/stream-follow.ts"],"sourcesContent":["import {\n  onBeforeUnmount,\n  onMounted,\n  watch,\n  type Ref,\n  type WatchSource,\n} from \"vue\";\n\n/** Follow a caller-owned stream only after mount; one queued scroll owns each frame. */\nexport function useStreamFollow(\n  element: Ref<HTMLElement | undefined>,\n  enabled: () => boolean,\n  reduced: Ref<boolean>,\n  changes: WatchSource[],\n) {\n  let mounted = false;\n  let pending: number | undefined;\n  const clear = () => {\n    if (pending !== undefined) cancelAnimationFrame(pending);\n    pending = undefined;\n  };\n  function schedule() {\n    clear();\n    if (!mounted || !enabled()) return;\n    pending = requestAnimationFrame(() => {\n      pending = undefined;\n      const viewport = element.value;\n      if (\n        !mounted ||\n        !enabled() ||\n        !viewport ||\n        viewport.scrollHeight <= viewport.clientHeight\n      )\n        return;\n      if (typeof viewport.scrollTo === \"function\")\n        viewport.scrollTo({\n          top: viewport.scrollHeight,\n          behavior: reduced.value ? \"auto\" : \"smooth\",\n        });\n      else viewport.scrollTop = viewport.scrollHeight;\n    });\n  }\n  watch(changes, schedule, { deep: true, flush: \"post\" });\n  onMounted(() => {\n    mounted = true;\n    schedule();\n  });\n  onBeforeUnmount(() => {\n    mounted = false;\n    clear();\n  });\n  return schedule;\n}\n"],"mappings":";;AASA,SAAgBA,EACd,GACA,GACA,GACA,GACA;CACA,IAAIC,IAAU,IACVC,GACEC,UAAc;EAElB,AADID,MAAY,KAAA,KAAW,qBAAqBA,CAAO,GACvD,IAAU,KAAA;CACZ;CACA,SAASE,IAAW;EAElB,AADAD,EAAM,GACDF,KAAYI,EAAQ,MACzB,IAAU,4BAA4B;GACpC,IAAU,KAAA;GACV,IAAMC,IAAWC,EAAQ;GACzB,AACE,CAACN,KACD,CAACI,EAAQ,KACT,CAACC,KACDA,EAAS,gBAAgBA,EAAS,iBAGhC,OAAOA,EAAS,YAAa,aAC/BA,EAAS,SAAS;IAChB,KAAKA,EAAS;IACd,UAAUE,EAAQ,QAAQ,SAAS;GACrC,CAAC,IACE,EAAS,YAAYF,EAAS;EACrC,CAAC;CACH;CAUA,OATAG,EAAMC,GAASN,GAAU;EAAE,MAAM;EAAM,OAAO;CAAO,CAAC,GACtDO,QAAgB;EAEd,AADA,IAAU,IACVP,EAAS;CACX,CAAC,GACDQ,QAAsB;EAEpB,AADA,IAAU,IACVT,EAAM;CACR,CAAC,GACMC;AACT"}

package/dist/streaming-response-BzqBjbJ3.js

@@ -0,0 +1,191 @@
+import { s as e } from "./composables-BJ1sih_H.js";
+import { l as t, r as n, u as r } from "./ease-rIvCM4O3.js";
+import { t as i } from "./utils-DIrLOK2M.js";
+import { r as a } from "./shared-DAEawhBJ.js";
+import { t as o } from "./shared-ByEZ4bm_.js";
+import { t as s } from "./AgentDisclosure-BaLK1NwF.js";
+import { i as c, t as l } from "./citations-DTgV7SYB.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, getCurrentInstance as v, normalizeClass as y, openBlock as b, renderSlot as x, toDisplayString as S, unref as C, useId as w, withCtx as T } from "vue";
+import { AnimatePresence as E, motion as D } from "motion-v";
+import { Check as O, ChevronDown as k, Copy as A, RotateCcw as j, ThumbsDown as M, ThumbsUp as N } from "lucide-vue-next";
+// src/agents/streaming-response/src/ResponseAction.vue
+var P = /* @__PURE__ */ _({
+	__name: "ResponseAction",
+	props: {
+		label: {},
+		active: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(n) {
+		let r = n, a = e(), o = d(() => ["Helpful", "Not helpful"].includes(r.label) ? r.active : void 0);
+		return (e, r) => (b(), f(C(D).button, {
+			type: "button",
+			"aria-label": n.label,
+			title: n.label,
+			"aria-pressed": o.value,
+			"while-press": C(a) ? void 0 : { scale: .9 },
+			transition: C(t),
+			class: y(C(i)("grid size-7 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", n.active && "bg-muted text-foreground"))
+		}, {
+			default: T(() => [x(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"aria-label",
+			"title",
+			"aria-pressed",
+			"while-press",
+			"transition",
+			"class"
+		]));
+	}
+}), F = ["data-state", "aria-busy"], I = ["aria-live"], L = ["aria-expanded", "aria-controls"], R = { class: "tabular-nums" }, z = /* @__PURE__ */ _({
+	__name: "StreamingResponse",
+	props: {
+		status: { default: "streaming" },
+		copyText: {},
+		onCopy: {},
+		sources: { default: () => [] },
+		sourcesOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultSourcesOpen: {
+			type: Boolean,
+			default: !1
+		},
+		sourceIdPrefix: {},
+		feedback: {},
+		defaultFeedback: { default: null },
+		announce: {
+			type: Boolean,
+			default: !0
+		},
+		showActions: {
+			type: Boolean,
+			default: !0
+		},
+		contentClassName: {},
+		actionsClassName: {}
+	},
+	emits: [
+		"retry",
+		"update:sourcesOpen",
+		"sourcesOpenChange",
+		"update:feedback",
+		"feedbackChange"
+	],
+	setup(t, { emit: _ }) {
+		let z = t, B = _, V = a(() => z.feedback, z.defaultFeedback, (e) => {
+			B("update:feedback", e), B("feedbackChange", e);
+		}), H = a(() => z.sourcesOpen, z.defaultSourcesOpen, (e) => {
+			B("update:sourcesOpen", e), B("sourcesOpenChange", e);
+		}), { copy: U, copied: W } = o(() => z.copyText ?? "", () => z.onCopy ? z.onCopy() : navigator.clipboard.writeText(z.copyText ?? "")), G = e(), K = w(), q = v(), J = () => !!q?.vnode.props?.onRetry, Y = d(() => z.showActions && z.status !== "streaming" && !!(z.copyText || z.onCopy || J() || z.status === "complete" || z.sources.length));
+		function X(e) {
+			V.value = V.value === e ? null : e;
+		}
+		return (e, a) => (b(), m("div", {
+			"data-state": t.status,
+			"aria-busy": t.status === "streaming",
+			class: "w-full"
+		}, [h("div", {
+			"aria-live": t.announce ? "polite" : "off",
+			class: y(C(i)("text-sm leading-6 text-foreground/90 [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:space-y-1 [&_ol]:pl-5 [&_p+p]:mt-3 [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted/45 [&_pre]:p-3 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_ul]:my-3 [&_ul]:list-disc [&_ul]:space-y-1 [&_ul]:pl-5", t.contentClassName))
+		}, [x(e.$slots, "default")], 10, I), g(C(E), { initial: !1 }, {
+			default: T(() => [Y.value ? (b(), f(C(D).div, {
+				key: 0,
+				class: "mt-3",
+				initial: C(G) ? { opacity: 0 } : {
+					opacity: 0,
+					y: 4
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				exit: { opacity: 0 },
+				transition: {
+					duration: C(G) ? .12 : .22,
+					ease: C(n)
+				}
+			}, {
+				default: T(() => [h("div", { class: y(C(i)("flex items-center gap-0.5", t.actionsClassName)) }, [
+					t.copyText || t.onCopy ? (b(), f(P, {
+						key: 0,
+						label: C(W) ? "Copied" : "Copy response",
+						onClick: C(U)
+					}, {
+						default: T(() => [C(W) ? (b(), f(C(O), {
+							key: 0,
+							class: "size-3.5"
+						})) : (b(), f(C(A), {
+							key: 1,
+							class: "size-3.5"
+						}))]),
+						_: 1
+					}, 8, ["label", "onClick"])) : p("", !0),
+					J() ? (b(), f(P, {
+						key: 1,
+						label: "Retry response",
+						onClick: a[0] ||= (e) => B("retry")
+					}, {
+						default: T(() => [g(C(j), { class: "size-3.5" })]),
+						_: 1
+					})) : p("", !0),
+					t.status === "complete" ? (b(), m(u, { key: 2 }, [g(P, {
+						label: "Helpful",
+						active: C(V) === "up",
+						onClick: a[1] ||= (e) => X("up")
+					}, {
+						default: T(() => [g(C(N), { class: "size-3.5" })]),
+						_: 1
+					}, 8, ["active"]), g(P, {
+						label: "Not helpful",
+						active: C(V) === "down",
+						onClick: a[2] ||= (e) => X("down")
+					}, {
+						default: T(() => [g(C(M), { class: "size-3.5" })]),
+						_: 1
+					}, 8, ["active"])], 64)) : p("", !0),
+					t.sources.length ? (b(), m("button", {
+						key: 3,
+						type: "button",
+						"aria-expanded": C(H),
+						"aria-controls": `${C(K)}-sources`,
+						onClick: a[3] ||= (e) => H.value = !C(H),
+						class: "group ml-1 inline-flex min-h-7 items-center gap-2 rounded-md px-1.5 text-xs text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+					}, [
+						g(C(l), { citations: t.sources }, null, 8, ["citations"]),
+						h("span", R, S(t.sources.length) + " " + S(t.sources.length === 1 ? "source" : "sources"), 1),
+						g(C(D).span, {
+							"aria-hidden": "true",
+							class: "text-muted-foreground/70 group-hover:text-muted-foreground",
+							animate: { rotate: C(H) ? 180 : 0 },
+							transition: C(G) ? { duration: 0 } : C(r)
+						}, {
+							default: T(() => [g(C(k), { class: "size-3" })]),
+							_: 1
+						}, 8, ["animate", "transition"])
+					], 8, L)) : p("", !0)
+				], 2), t.sources.length ? (b(), f(s, {
+					key: 0,
+					id: `${C(K)}-sources`,
+					open: C(H)
+				}, {
+					default: T(() => [g(C(c), {
+						citations: t.sources,
+						"id-prefix": t.sourceIdPrefix ?? `response-source-${C(K).replace(/:/g, "")}`,
+						class: "mt-2 rounded-xl bg-muted p-2"
+					}, null, 8, ["citations", "id-prefix"])]),
+					_: 1
+				}, 8, ["id", "open"])) : p("", !0)]),
+				_: 1
+			}, 8, ["initial", "transition"])) : p("", !0)]),
+			_: 1
+		})], 8, F));
+	}
+});
+export { z as t };
+
+//# sourceMappingURL=streaming-response-BzqBjbJ3.js.map