@mechane-ai/elements 0.16.0 → 0.17.0

package/dist/content/markdown.js

@@ -14,6 +14,17 @@ var h = /* @__PURE__ */ new Set(["href", "src"]), g = {
 		if (h.has(n)) return t(e);
 	}
 }, _ = {
+	root: {
+		k7Eaqz: "xeuugli",
+		kMwMTN: "xbixft",
+		kMv6JI: "x1hz01jw",
+		khiITx: "xvmahel",
+		kGuDYH: "xtqrqnz",
+		kLWn49: "x1ytb0s6",
+		k63SB2: "xj57cvi",
+		kHjlTd: "xj0a0fe",
+		$$css: !0
+	},
 	block: {
 		keoZOQ: "xyrmp21 x14l7nz5",
 		k1K539: "x1jfksii xzboxd6",
@@ -49,14 +60,28 @@ var h = /* @__PURE__ */ new Set(["href", "src"]), g = {
 		ksu8eU: "x1y0btm7",
 		kVAM5u: "x1ey3b81",
 		$$css: !0
+	},
+	strong: {
+		k63SB2: "x1b5ytql",
+		$$css: !0
+	},
+	muted: {
+		kMwMTN: "x153jb6y",
+		$$css: !0
 	}
-}, v = /* @__PURE__ */ new Set(["string", "number"]);
-function y(e) {
-	return v.has(typeof e);
+}, v = {
+	default: null,
+	muted: _.muted
+}, y = {
+	regular: null,
+	strong: _.strong
+}, b = /* @__PURE__ */ new Set(["string", "number"]);
+function x(e) {
+	return b.has(typeof e);
 }
-function b({ children: t, className: n }) {
+function S({ children: t, className: n }) {
 	let r = m(), i = typeof n == "string" ? /(?:^|\s)language-([^\s]+)/u.exec(n) : null, o = i === null ? void 0 : i[1], s = a.toArray(t);
-	return s.every(y) ? /* @__PURE__ */ c("div", {
+	return s.every(x) ? /* @__PURE__ */ c("div", {
 		className: "xyrmp21 x14l7nz5 x1jfksii xzboxd6",
 		children: /* @__PURE__ */ c(e, {
 			code: s.join(""),
@@ -68,14 +93,14 @@ function b({ children: t, className: n }) {
 		children: t
 	});
 }
-function x({ level: e, headingLevel: t, children: n, id: r }) {
+function C({ level: e, headingLevel: t, children: n, id: r }) {
 	let a = `h${Math.min(e + t - 1, 6)}`, s = e === 1 ? _.title : e === 2 ? _.section : _.minor;
 	return o(a, {
 		id: r,
 		...i.props(_.heading, s)
 	}, n);
 }
-var S = {
+var w = {
 	p: ({ children: e }) => /* @__PURE__ */ c("p", {
 		className: "xyrmp21 x14l7nz5 x1jfksii xzboxd6",
 		children: e
@@ -97,7 +122,7 @@ var S = {
 		className: "xyrmp21 x14l7nz5 x1jfksii xzboxd6 xrxpjvj x1umj4g3 xyumdvf x1t7ytsu x97x49r x153jb6y",
 		children: e
 	}),
-	code: ({ children: e, className: t }) => /* @__PURE__ */ c(b, {
+	code: ({ children: e, className: t }) => /* @__PURE__ */ c(S, {
 		className: t,
 		children: e
 	}),
@@ -157,35 +182,35 @@ var S = {
 		className: "x5lhwog",
 		children: e
 	})
-}, C = /* @__PURE__ */ "p.h1.h2.h3.h4.h5.h6.ul.ol.li.blockquote.pre.code.a.img.table.thead.tbody.tr.th.td.input.hr.strong.em.del.br.sup.sub.section".split(".");
-function w({ children: e, isStreaming: t = !1, label: n, headingLevel: r = 1 }) {
-	let i = {
-		h1: (e) => /* @__PURE__ */ c(x, {
+}, T = /* @__PURE__ */ "p.h1.h2.h3.h4.h5.h6.ul.ol.li.blockquote.pre.code.a.img.table.thead.tbody.tr.th.td.input.hr.strong.em.del.br.sup.sub.section".split(".");
+function E({ children: e, isStreaming: t = !1, label: n, headingLevel: r = 1, tone: a = "default", weight: o = "regular" }) {
+	let s = {
+		h1: (e) => /* @__PURE__ */ c(C, {
 			...e,
 			level: 1,
 			headingLevel: r
 		}),
-		h2: (e) => /* @__PURE__ */ c(x, {
+		h2: (e) => /* @__PURE__ */ c(C, {
 			...e,
 			level: 2,
 			headingLevel: r
 		}),
-		h3: (e) => /* @__PURE__ */ c(x, {
+		h3: (e) => /* @__PURE__ */ c(C, {
 			...e,
 			level: 3,
 			headingLevel: r
 		}),
-		h4: (e) => /* @__PURE__ */ c(x, {
+		h4: (e) => /* @__PURE__ */ c(C, {
 			...e,
 			level: 4,
 			headingLevel: r
 		}),
-		h5: (e) => /* @__PURE__ */ c(x, {
+		h5: (e) => /* @__PURE__ */ c(C, {
 			...e,
 			level: 5,
 			headingLevel: r
 		}),
-		h6: (e) => /* @__PURE__ */ c(x, {
+		h6: (e) => /* @__PURE__ */ c(C, {
 			...e,
 			level: 6,
 			headingLevel: r
@@ -193,48 +218,48 @@ function w({ children: e, isStreaming: t = !1, label: n, headingLevel: r = 1 })
 	};
 	return /* @__PURE__ */ c(d, {
 		...g,
-		className: "xeuugli xbixft x1hz01jw xvmahel xtqrqnz x1ytb0s6 xj57cvi xj0a0fe",
+		...i.props(_.root, v[a], y[o]),
 		"aria-label": n,
 		components: {
-			...S,
-			...i
+			...w,
+			...s
 		},
 		mode: t ? "streaming" : "static",
 		isAnimating: t,
 		animated: !1,
 		controls: !1,
 		linkSafety: { enabled: !1 },
-		allowedElements: C,
+		allowedElements: T,
 		children: e
 	}, r);
 }
 // packages/content/src/markdown/markdown-preview.tsx
-function T({ children: e }) {
+function D({ children: e }) {
 	return /* @__PURE__ */ l(s, { children: [e, " "] });
 }
-var E = {
-	p: T,
-	li: T,
-	h1: T,
-	h2: T,
-	h3: T,
-	h4: T,
-	h5: T,
-	h6: T,
-	blockquote: T,
-	pre: T,
+var O = {
+	p: D,
+	li: D,
+	h1: D,
+	h2: D,
+	h3: D,
+	h4: D,
+	h5: D,
+	h6: D,
+	blockquote: D,
+	pre: D,
 	code: ({ children: e }) => /* @__PURE__ */ c(s, { children: e }),
-	th: T,
-	td: T,
+	th: D,
+	td: D,
 	br: () => /* @__PURE__ */ c(s, { children: " " }),
 	img: ({ alt: e }) => /* @__PURE__ */ c(s, { children: e })
 };
-function D({ children: e }) {
+function k({ children: e }) {
 	return /* @__PURE__ */ c(u, {
 		...g,
 		content: e,
-		components: E,
-		allowedElements: Object.keys(E),
+		components: O,
+		allowedElements: Object.keys(O),
 		unwrapDisallowed: !0,
 		shouldParseIncompleteMarkdown: !1,
 		shouldNormalizeHtmlIndentation: !1,
@@ -242,4 +267,4 @@ function D({ children: e }) {
 		index: 0
 	});
 }
-export { w as Markdown, D as MarkdownPreview };
+export { E as Markdown, k as MarkdownPreview };

package/dist/content.js

@@ -3,38 +3,38 @@ import { t as i } from "./viewer-styles-CpHqp5Qv.js";
 import { t as a } from "./code-block-DB42-a0M.js";
 import { t as o } from "./content-link-rdxJ94P8.js";
 import * as s from "@stylexjs/stylex";
-import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { Check as m, Circle as h, CircleDashed as g, CircleHelp as _, Clock as v, X as y } from "lucide-react";
-import b from "strip-ansi";
+import { useCallback as c, useEffect as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Check as h, Circle as g, CircleDashed as _, CircleHelp as v, Clock as y, X as b } from "lucide-react";
+import x from "strip-ansi";
 // packages/content/src/json-viewer.tsx
-var x = { body: {
+var S = { body: {
 	kmVPX3: "x1mvvolr",
 	kVQacm: "xysyzu8",
 	kskxy: "x1phlbz0",
 	kMv6JI: "xiard35",
 	kGuDYH: "xy8obcc",
 	$$css: !0
-} }, S = 500;
-function C({ value: e, name: t, path: n, depth: r, maxDepth: i, maxEntries: a }) {
-	let [o, s] = d(r === 0);
+} }, C = 500;
+function w({ value: e, name: t, path: n, depth: r, maxDepth: i, maxEntries: a }) {
+	let [o, s] = f(r === 0);
 	if (typeof e != "object" || !e) {
-		let n = JSON.stringify(e), r = n.length > S;
-		return /* @__PURE__ */ p("div", {
+		let n = JSON.stringify(e), r = n.length > C;
+		return /* @__PURE__ */ m("div", {
 			className: "xeuugli x126k92a xj0a0fe",
 			children: [
-				/* @__PURE__ */ p("span", {
+				/* @__PURE__ */ m("span", {
 					className: "x153jb6y",
 					children: [t, ": "]
 				}),
-				/* @__PURE__ */ f("span", {
+				/* @__PURE__ */ p("span", {
 					...{
 						0: { className: "xbixft" },
 						1: { className: "x7ixh4y" }
 					}[typeof e == "string" | 0],
-					children: n.slice(0, S)
+					children: n.slice(0, C)
 				}),
-				r && /* @__PURE__ */ f("span", {
+				r && /* @__PURE__ */ p("span", {
 					className: "x153jb6y x1hz01jw",
 					children: "… (value truncated)"
 				})
@@ -42,38 +42,38 @@ function C({ value: e, name: t, path: n, depth: r, maxDepth: i, maxEntries: a })
 		});
 	}
 	let c = Object.entries(e), l = Array.isArray(e) ? `${c.length} items` : `${c.length} fields`;
-	return r >= i ? /* @__PURE__ */ p("div", {
+	return r >= i ? /* @__PURE__ */ m("div", {
 		className: "xeuugli x126k92a xj0a0fe",
-		children: [/* @__PURE__ */ p("span", {
+		children: [/* @__PURE__ */ m("span", {
 			className: "x153jb6y",
 			children: [t, ": "]
-		}), /* @__PURE__ */ p("span", {
+		}), /* @__PURE__ */ m("span", {
 			className: "x153jb6y x1hz01jw",
 			children: [l, " · depth limit"]
 		})]
-	}) : /* @__PURE__ */ p("details", {
+	}) : /* @__PURE__ */ m("details", {
 		open: o,
 		onToggle: (e) => s(e.currentTarget.open),
 		className: "xeuugli x126k92a xj0a0fe",
-		children: [/* @__PURE__ */ p("summary", {
+		children: [/* @__PURE__ */ m("summary", {
 			className: "x9f619 x1ypdohk x16exltd x17oiadl xt970qd x1r6zayv xjbqb8w xif5pkx x1s9zmfe x19rmrnh x13qnu6 x9v5kkp x1bqaal",
 			children: [
-				/* @__PURE__ */ p("span", {
+				/* @__PURE__ */ m("span", {
 					className: "x153jb6y",
 					children: [t, ": "]
 				}),
 				Array.isArray(e) ? "[]" : "{}",
 				" ",
-				/* @__PURE__ */ f("span", {
+				/* @__PURE__ */ p("span", {
 					className: "x153jb6y x1hz01jw",
 					children: l
 				})
 			]
-		}), o && /* @__PURE__ */ p("div", {
+		}), o && /* @__PURE__ */ m("div", {
 			className: "xo02m6d xpilrb4 x1t7ytsu x97x49r xa1dmyi",
 			children: [c.slice(0, a).map(([e, t]) => {
 				let o = `${n}/${e.replaceAll("~", "~0").replaceAll("/", "~1")}`;
-				return /* @__PURE__ */ f(C, {
+				return /* @__PURE__ */ p(w, {
 					name: JSON.stringify(e),
 					path: o,
 					value: t,
@@ -81,34 +81,34 @@ function C({ value: e, name: t, path: n, depth: r, maxDepth: i, maxEntries: a })
 					maxDepth: i,
 					maxEntries: a
 				}, o);
-			}), c.length > a && /* @__PURE__ */ p("div", {
+			}), c.length > a && /* @__PURE__ */ m("div", {
 				className: "x153jb6y x1hz01jw",
 				children: [c.length - a, " more entries · copy to inspect the complete value"]
 			})]
 		})]
 	});
 }
-function w({ value: e, label: t, maxDepth: r = 6, maxEntries: a = 50 }) {
+function T({ value: e, label: t, maxDepth: r = 6, maxEntries: a = 50 }) {
 	let o = c(() => JSON.stringify(e, null, 2), [e]);
-	return /* @__PURE__ */ p("section", {
+	return /* @__PURE__ */ m("section", {
 		"aria-label": t,
 		...s.props(i.root),
-		children: [/* @__PURE__ */ p("div", {
+		children: [/* @__PURE__ */ m("div", {
 			...s.props(i.header),
-			children: [/* @__PURE__ */ f("span", {
+			children: [/* @__PURE__ */ p("span", {
 				...s.props(i.label),
 				children: t
-			}), /* @__PURE__ */ f(n, {
+			}), /* @__PURE__ */ p(n, {
 				label: t,
 				value: o,
 				children: "Copy JSON"
 			})]
-		}), /* @__PURE__ */ f("div", {
+		}), /* @__PURE__ */ p("div", {
 			role: "region",
 			"aria-label": `${t} fields`,
 			tabIndex: 0,
-			...s.props(i.scrollRegion, x.body),
-			children: /* @__PURE__ */ f(C, {
+			...s.props(i.scrollRegion, S.body),
+			children: /* @__PURE__ */ p(w, {
 				name: "root",
 				path: "",
 				value: e,
@@ -120,7 +120,7 @@ function w({ value: e, label: t, maxDepth: r = 6, maxEntries: a = 50 }) {
 	});
 }
 // packages/content/src/log-viewer.tsx
-var T = {
+var E = {
 	kVQacm: "xysyzu8",
 	kmVPX3: "x1mvvolr",
 	kogj98: "x1ghz6dp",
@@ -131,9 +131,9 @@ var T = {
 	kHjlTd: "xj0a0fe",
 	kKi2Bq: "xeq4nuv",
 	$$css: !0
-}, E = {
+}, D = {
 	output: (e) => [
-		T,
+		E,
 		{
 			kskxy: e == null ? e : "x1jols5v",
 			$$css: !0
@@ -146,68 +146,124 @@ var T = {
 		kL6WhQ: "x1qndepd",
 		$$css: !0
 	}
-}, D = 2e5;
-function O({ output: t, label: r, maxLines: a = 500, maxHeight: o = 320, isRunning: c = !1 }) {
-	let m = u(null), [h, g] = d(!0), _ = b(t), v = _.slice(-2e5).split("\n"), y = v.slice(-Math.max(1, a)), x = v.length - y.length;
+}, O = 2e5;
+function k({ output: t, label: r, maxLines: a = 500, maxHeight: o = 320, isRunning: c = !1 }) {
+	let h = d(null), g = d(!1), [_, v] = f(!0), y = x(t), b = y.slice(-2e5).split("\n"), S = b.slice(-Math.max(1, a)), C = b.length - S.length;
 	return l(() => {
-		h && m.current !== null && (m.current.scrollTop = m.current.scrollHeight);
-	}, [t, h]), /* @__PURE__ */ p("section", {
+		_ && h.current !== null && (h.current.scrollTop = h.current.scrollHeight);
+	}, [t, _]), u(() => {
+		!c && g.current && (g.current = !1, h.current?.focus({ preventScroll: !0 }));
+	}, [c]), /* @__PURE__ */ m("section", {
 		"aria-label": r,
 		...s.props(i.root),
 		children: [
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				...s.props(i.header),
-				children: [/* @__PURE__ */ p("span", {
+				children: [/* @__PURE__ */ m("span", {
 					...s.props(i.label),
 					children: [r, c && " · running"]
-				}), /* @__PURE__ */ p("div", {
+				}), /* @__PURE__ */ m("div", {
 					...s.props(i.actions),
-					children: [/* @__PURE__ */ f(e, {
+					children: [c && /* @__PURE__ */ p(e, {
 						variant: "ghost",
-						onClick: () => g(!h),
-						children: h ? "Pause following" : "Follow output"
-					}), /* @__PURE__ */ f(n, {
+						onClick: () => v(!_),
+						onFocus: () => {
+							g.current = !0;
+						},
+						onBlur: () => {
+							g.current = !1;
+						},
+						children: _ ? "Pause following" : "Follow output"
+					}), /* @__PURE__ */ p(n, {
 						value: t,
 						label: r,
 						children: "Copy"
 					})]
 				})]
 			}),
-			x > 0 && /* @__PURE__ */ p("div", {
-				...s.props(i.note, E.notice),
-				children: [x, " earlier lines omitted from this view. Copy includes the supplied output."]
+			C > 0 && /* @__PURE__ */ m("div", {
+				...s.props(i.note, D.notice),
+				children: [C, " earlier lines omitted from this view. Copy includes the supplied output."]
 			}),
-			_.length > D && /* @__PURE__ */ f("div", {
-				...s.props(i.note, E.notice),
+			y.length > O && /* @__PURE__ */ p("div", {
+				...s.props(i.note, D.notice),
 				children: "Preview limited to the last 200,000 characters. Copy includes the supplied output."
 			}),
-			/* @__PURE__ */ f("pre", {
-				ref: m,
+			/* @__PURE__ */ p("pre", {
+				ref: h,
 				role: "region",
 				"aria-label": `${r} output`,
 				tabIndex: 0,
 				onScroll: (e) => {
 					let t = e.currentTarget;
-					g(t.scrollHeight - t.scrollTop - t.clientHeight < 8);
+					v(t.scrollHeight - t.scrollTop - t.clientHeight < 8);
 				},
-				...s.props(i.scrollRegion, E.output(o)),
-				children: _.length === 0 ? "No output recorded." : y.join("\n")
+				...s.props(i.scrollRegion, D.output(o)),
+				children: y.length === 0 ? "No output recorded." : S.join("\n")
 			})
 		]
 	});
 }
+// packages/content/src/media-viewer.tsx
+var A = {
+	viewport: {
+		k1xSpc: "xrvj5dj",
+		kgQiWS: "x1ku5rj1",
+		kzqmXN: "xh8yej3",
+		kOBAk4: "x186iv6y",
+		kskxy: "xcwfpss",
+		k7Eaqz: "xeuugli",
+		kVQacm: "xb3r6kr",
+		kWkggS: "x1r7kqkb",
+		$$css: !0
+	},
+	placeholder: {
+		kWkggS: "x1fa40ue",
+		$$css: !0
+	}
+};
+function j() {
+	return /* @__PURE__ */ p("div", {
+		"aria-hidden": !0,
+		...s.props(i.root, A.viewport, A.placeholder)
+	});
+}
+function M({ kind: e, src: t, label: n, widthPixels: r, heightPixels: a, onError: o }) {
+	return /* @__PURE__ */ p("div", {
+		...s.props(i.root, A.viewport),
+		children: e === "image" ? /* @__PURE__ */ p("img", {
+			src: t,
+			alt: n,
+			width: r,
+			height: a,
+			onError: o,
+			className: "x1lliihq xh8yej3 x5yr21d x2lwn1j x19kjcj4"
+		}) : /* @__PURE__ */ p("video", {
+			src: t,
+			"aria-label": n,
+			width: r,
+			height: a,
+			controls: !0,
+			muted: !0,
+			playsInline: !0,
+			preload: "metadata",
+			onError: o,
+			className: "x1lliihq xh8yej3 x5yr21d x2lwn1j x19kjcj4"
+		})
+	});
+}
 // packages/content/src/stack-trace.tsx
-function k({ message: e, frames: t }) {
-	return /* @__PURE__ */ p("section", {
+function N({ message: e, frames: t }) {
+	return /* @__PURE__ */ m("section", {
 		"aria-label": "Stack trace",
 		...s.props(i.root),
-		children: [/* @__PURE__ */ f("p", {
+		children: [/* @__PURE__ */ p("p", {
 			className: "x1ghz6dp x1mvvolr xso031l x1q0q8m5 x1qndepd xr5kp14 xk4h15q xj0a0fe",
 			children: e
-		}), t.length === 0 ? /* @__PURE__ */ f("p", {
+		}), t.length === 0 ? /* @__PURE__ */ p("p", {
 			className: "x1ghz6dp x1mvvolr x153jb6y",
 			children: "No frames recorded."
-		}) : /* @__PURE__ */ f("ol", {
+		}) : /* @__PURE__ */ p("ol", {
 			className: "x1ghz6dp x1717udv x3ct3a4",
 			children: t.map((e) => {
 				let t = [
@@ -215,15 +271,15 @@ function k({ message: e, frames: t }) {
 					e.line,
 					e.column
 				].filter((e) => e !== void 0).join(":");
-				return /* @__PURE__ */ p("li", {
+				return /* @__PURE__ */ m("li", {
 					className: "x78zum5 xdt5ytf x1hnptsi xeuugli xj0a0fe x1mvvolr xso031l x1t1lzn6 x1q0q8m5 x1qndepd",
-					children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(o, {
+					children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p(o, {
 						href: e.href,
 						children: e.name
-					}), t.length > 0 && /* @__PURE__ */ f("span", {
+					}), t.length > 0 && /* @__PURE__ */ p("span", {
 						className: "x1lliihq x153jb6y xiard35 xy8obcc xj0a0fe",
 						children: t
-					})] }), e.code !== void 0 && /* @__PURE__ */ f(a, {
+					})] }), e.code !== void 0 && /* @__PURE__ */ p(a, {
 						code: e.code,
 						language: e.language,
 						filename: e.file
@@ -234,7 +290,7 @@ function k({ message: e, frames: t }) {
 	});
 }
 // packages/content/src/trace.tsx
-var A = {
+var P = {
 	pending: {
 		kMwMTN: "x153jb6y",
 		$$css: !0
@@ -259,78 +315,78 @@ var A = {
 		kMwMTN: "x153jb6y",
 		$$css: !0
 	}
-}, j = {
-	pending: A.pending,
-	running: A.running,
-	complete: A.complete,
-	failed: A.failed,
-	skipped: A.skipped,
-	unknown: A.unknown
-}, M = {
-	pending: v,
-	running: h,
-	complete: m,
-	failed: y,
-	skipped: g,
-	unknown: _
+}, F = {
+	pending: P.pending,
+	running: P.running,
+	complete: P.complete,
+	failed: P.failed,
+	skipped: P.skipped,
+	unknown: P.unknown
+}, I = {
+	pending: y,
+	running: g,
+	complete: h,
+	failed: b,
+	skipped: _,
+	unknown: v
 };
-function N({ label: e, children: t }) {
-	return /* @__PURE__ */ f("ol", {
+function L({ label: e, children: t }) {
+	return /* @__PURE__ */ p("ol", {
 		"aria-label": e,
 		className: "x1ghz6dp x1717udv x3ct3a4 xeuugli x1hz01jw xtqrqnz x1778rvt xj57cvi xbixft",
 		children: t
 	});
 }
-function P({ label: e, children: t }) {
-	return /* @__PURE__ */ f("ol", {
+function R({ label: e, children: t }) {
+	return /* @__PURE__ */ p("ol", {
 		"aria-label": e,
 		className: "x1ghz6dp x1717udv x3ct3a4 xeuugli x1hz01jw xtqrqnz x1778rvt xj57cvi xbixft x3bg4vu",
 		children: t
 	});
 }
-function F({ id: e, label: n, status: i, statusLabel: a, description: o, detail: c, isSelected: l, onSelect: u, children: d }) {
-	let m = M[i];
-	return /* @__PURE__ */ p("li", {
+function z({ id: e, label: n, status: i, statusLabel: a, description: o, detail: c, isSelected: l, onSelect: u, children: d }) {
+	let f = I[i];
+	return /* @__PURE__ */ m("li", {
 		"data-item-id": e,
 		className: "x1n2onr6 xrvj5dj x1qpdrs7 x8zbtdt x1wv5www xup0pd7",
-		children: [/* @__PURE__ */ p("div", {
+		children: [/* @__PURE__ */ m("div", {
 			"aria-hidden": !0,
 			className: "x78zum5 xdt5ytf x6s0dn4 xunmzkg x1lk341d",
-			children: [/* @__PURE__ */ f(m, {
+			children: [/* @__PURE__ */ p(f, {
 				size: 14,
-				...s.props(j[i])
-			}), /* @__PURE__ */ f("span", { className: "x1i1rx1s x1f6qilh x98rzlu x1fa40ue" })]
-		}), /* @__PURE__ */ p("div", {
+				...s.props(F[i])
+			}), /* @__PURE__ */ p("span", { className: "x1i1rx1s x1f6qilh x98rzlu x1fa40ue" })]
+		}), /* @__PURE__ */ m("div", {
 			className: "x78zum5 xdt5ytf xunmzkg xeuugli",
 			children: [
-				/* @__PURE__ */ f("div", {
+				/* @__PURE__ */ p("div", {
 					...{
 						0: { className: "xk4h15q xj0a0fe" },
 						1: { className: "xk4h15q xj0a0fe xujl8zx xda060z" }
 					}[l === !0 | 0],
-					children: u === void 0 ? n : /* @__PURE__ */ f(t, {
+					children: u === void 0 ? n : /* @__PURE__ */ p(t, {
 						"aria-pressed": l,
 						onClick: () => u(e),
 						children: n
 					})
 				}),
-				/* @__PURE__ */ f("span", {
+				/* @__PURE__ */ p("span", {
 					className: "xy8obcc xas2l8k x153jb6y xj0a0fe",
 					children: a
 				}),
-				o !== void 0 && /* @__PURE__ */ f("p", {
+				o !== void 0 && /* @__PURE__ */ p("p", {
 					className: "x1ghz6dp x153jb6y xj0a0fe",
 					children: o
 				}),
-				c !== void 0 && /* @__PURE__ */ p(r.Root, { children: [/* @__PURE__ */ f(r.Trigger, { children: "Details" }), /* @__PURE__ */ f(r.Panel, { children: c })] }),
+				c !== void 0 && /* @__PURE__ */ m(r.Root, { children: [/* @__PURE__ */ p(r.Trigger, { children: "Details" }), /* @__PURE__ */ p(r.Panel, { children: c })] }),
 				d
 			]
 		})]
 	});
 }
-var I = {
-	Root: N,
-	Item: F,
-	Group: P
+var B = {
+	Root: L,
+	Item: z,
+	Group: R
 };
-export { w as JsonViewer, O as LogViewer, k as StackTrace, I as Trace };
+export { T as JsonViewer, k as LogViewer, M as MediaViewer, j as MediaViewerPlaceholder, N as StackTrace, B as Trace };

package/dist/elements.css

@@ -684,6 +684,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     animation-timing-function: var(--x5xz5r2);
   }
 
+  .x186iv6y {
+    aspect-ratio: 16 / 9;
+  }
+
   .xjbqb8w {
     background-color: #0000;
   }
@@ -1293,6 +1297,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     margin-inline-start: var(--x1xijsos);
   }
 
+  .x19kjcj4 {
+    object-fit: contain;
+  }
+
   .xl1xv1r {
     object-fit: cover;
   }
@@ -2293,6 +2301,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     max-height: 520px;
   }
 
+  .xcwfpss {
+    max-height: 70dvh;
+  }
+
   .xs8sm83 {
     max-height: calc(100dvh - 32px);
   }

package/dist/packages/content/src/index.d.ts

@@ -2,6 +2,8 @@ export type { JsonValue, JsonViewerProps } from './json-viewer.tsx';
 export { JsonViewer } from './json-viewer.tsx';
 export type { LogViewerProps } from './log-viewer.tsx';
 export { LogViewer } from './log-viewer.tsx';
+export type { MediaViewerProps } from './media-viewer.tsx';
+export { MediaViewer, MediaViewerPlaceholder } from './media-viewer.tsx';
 export type { StackFrame, StackTraceProps } from './stack-trace.tsx';
 export { StackTrace } from './stack-trace.tsx';
 export type { TraceStatus, TraceRootProps, TraceGroupProps, TraceItemProps } from './trace.tsx';

package/dist/packages/content/src/markdown/markdown.d.ts

@@ -5,6 +5,8 @@ export type MarkdownProps = {
     readonly isStreaming?: boolean;
     readonly label?: string;
     readonly headingLevel?: HeadingLevel;
+    readonly tone?: 'default' | 'muted';
+    readonly weight?: 'regular' | 'strong';
 };
-export declare function Markdown({ children, isStreaming, label, headingLevel }: MarkdownProps): ReactNode;
+export declare function Markdown({ children, isStreaming, label, headingLevel, tone, weight, }: MarkdownProps): ReactNode;
 export {};

package/dist/packages/content/src/media-viewer.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type MediaViewerProps = {
+    readonly kind: 'image' | 'video';
+    readonly src: string;
+    readonly label: string;
+    readonly widthPixels: number;
+    readonly heightPixels: number;
+    readonly onError?: () => void;
+};
+export declare function MediaViewerPlaceholder(): ReactNode;
+export declare function MediaViewer({ kind, src, label, widthPixels, heightPixels, onError }: MediaViewerProps): ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mechane-ai/elements",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Elements by Mechane — React components for applications, AI interfaces, and analytical graphics",
   "license": "Apache-2.0",
   "repository": {