@jfrader/ui 0.5.1 → 0.7.0

package/dist/typewriter-terminal-BUEsMzo3.js

@@ -0,0 +1,588 @@
+'use client';
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./sx-BJXJ2xJK.js";
+import { t as o } from "./use-controlled-state-DpeVQZNR.js";
+import { t as s } from "./visually-hidden-DgVO3NaB.js";
+import { t as ee } from "./renderable-DzcIj1Lo.js";
+import { t as c } from "./button-C6OV0C7J.js";
+import { t as te } from "./spinner-CvzajSg9.js";
+import { useEffect as l, useId as ne, useLayoutEffect as re, useMemo as u, useRef as d, useState as f } from "react";
+import { vars as p } from "@jfrader/tokens/vars";
+import { Fragment as ie, jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
+import { MotionConfig as ae, animate as oe, useMotionValue as se, useReducedMotion as ce } from "motion/react";
+//#region src/components/typewriter-terminal/typewriter-terminal.tsx
+var le = 40, g = 160, ue = 1200, _ = 240, v = 11, y = 10, de = {
+	type: "spring",
+	stiffness: 180,
+	damping: 28,
+	mass: 1
+}, fe = {
+	play: "Play",
+	pause: "Pause",
+	replay: "Replay",
+	copy: "Copy commands",
+	seek: "Seek session",
+	copied: "Commands copied",
+	copyError: "Could not copy commands",
+	playing: "Playing",
+	paused: "Paused",
+	replayed: "Replayed",
+	step: (e, t) => `Step ${e}: ${t}`,
+	completed: "Complete",
+	tones: {
+		neutral: "Output",
+		muted: "Note",
+		success: "Success",
+		warning: "Warning",
+		danger: "Error",
+		accent: "Output"
+	}
+}, b = e({
+	"0%, 49%": { opacity: 1 },
+	"50%, 100%": { opacity: 0 }
+}), pe = t({
+	label: "typewriter-terminal",
+	margin: 0,
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	border: `1px solid ${p.color.border}`,
+	borderRadius: p.radius.md,
+	boxShadow: p.shadow.raised,
+	backgroundColor: p.color.surfaceRaised,
+	color: p.color.text,
+	fontFamily: p.font.sans,
+	fontSize: p.textSize.sm,
+	lineHeight: p.lineHeight.base,
+	overflow: "hidden",
+	[r]: {
+		borderColor: "CanvasText",
+		boxShadow: "none"
+	}
+}), me = t({
+	display: "flex",
+	alignItems: "center",
+	flexWrap: "wrap",
+	justifyContent: "space-between",
+	gap: p.space[2],
+	padding: p.space[3],
+	fontWeight: p.fontWeight.medium,
+	overflowWrap: "anywhere"
+}), he = t({
+	direction: "ltr",
+	blockSize: `calc(var(--terminal-rows) * 1em * ${p.lineHeight.base} + ${p.space[6]})`,
+	boxSizing: "border-box",
+	overflow: "auto",
+	padding: p.space[3],
+	backgroundColor: p.color.surfaceInset,
+	fontFamily: p.font.mono,
+	fontSize: p.textSize.sm,
+	lineHeight: p.lineHeight.base,
+	scrollbarWidth: "thin"
+}), ge = t({
+	margin: 0,
+	minBlockSize: `calc(1em * ${p.lineHeight.base})`,
+	whiteSpace: "pre-wrap",
+	overflowWrap: "anywhere",
+	font: "inherit",
+	"&[data-tone=\"accent\"]": { color: p.color.accentText }
+}), _e = t({ color: p.color.textMuted }), ve = t({ color: p.color.accentText }), ye = t({
+	display: "inline-block",
+	inlineSize: "0.6ch",
+	blockSize: "1em",
+	verticalAlign: "text-bottom",
+	backgroundColor: "currentColor",
+	animation: `${b} calc(${p.motion.duration.slow} * 4) step-end infinite`,
+	"&[data-static]": { animation: "none" },
+	[i]: { animation: "none" },
+	[r]: { backgroundColor: "CanvasText" }
+}), be = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: p.space[2],
+	padding: p.space[3]
+}), x = t({
+	minBlockSize: p.space[12],
+	blockSize: "auto",
+	minInlineSize: p.space[12],
+	paddingBlock: p.space[2],
+	whiteSpace: "normal",
+	overflowWrap: "anywhere"
+}), xe = t({
+	flex: "1 1 auto",
+	minInlineSize: p.space[12],
+	inlineSize: "100%",
+	minBlockSize: p.space[12],
+	accentColor: p.color.accent,
+	"&:focus-visible": n,
+	[r]: { border: "1px solid ButtonText" }
+}), Se = t({
+	flex: "1 1 10em",
+	minInlineSize: 0
+}), Ce = t({
+	fontVariantNumeric: "tabular-nums",
+	whiteSpace: "nowrap"
+}), we = t({
+	padding: p.space[3],
+	overflowWrap: "anywhere",
+	color: p.color.textMuted
+}), Te = t({
+	paddingInline: p.space[3],
+	paddingBlockEnd: p.space[3],
+	minBlockSize: `calc(1em * ${p.lineHeight.base})`,
+	overflowWrap: "anywhere"
+}), Ee = t({
+	...s,
+	"&:focus-within": {
+		position: "static",
+		inlineSize: "auto",
+		blockSize: "auto",
+		clip: "auto",
+		clipPath: "none",
+		overflow: "visible",
+		whiteSpace: "normal",
+		margin: p.space[3],
+		paddingInlineStart: p.space[6]
+	}
+}), De = t({
+	display: "inline-flex",
+	alignItems: "center",
+	minBlockSize: p.space[12],
+	color: p.color.accentText,
+	overflowWrap: "anywhere",
+	"&:focus-visible": n
+}), Oe = t({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: p.space[2]
+}), ke = t({
+	display: "inline-block",
+	inlineSize: "8ch",
+	blockSize: p.space[2],
+	border: `1px solid ${p.color.borderControl}`,
+	borderRadius: p.radius.full,
+	overflow: "hidden",
+	[r]: { borderColor: "CanvasText" }
+}), Ae = t({
+	display: "block",
+	blockSize: "100%",
+	inlineSize: "var(--terminal-progress)",
+	backgroundColor: p.color.accentText,
+	[r]: {
+		forcedColorAdjust: "none",
+		backgroundColor: "Highlight"
+	}
+}), je = {
+	neutral: "·",
+	muted: "·",
+	success: "✓",
+	warning: "△",
+	danger: "×",
+	accent: "◆"
+}, Me = {
+	neutral: t({ color: p.color.text }),
+	muted: t({ color: p.color.textMuted }),
+	success: t({ color: p.color.success }),
+	warning: t({ color: p.color.warning }),
+	danger: t({ color: p.color.dangerText }),
+	accent: t({ color: p.color.accentText })
+};
+function S(e, t) {
+	return e !== void 0 && Number.isFinite(e) && e >= 0 ? e : t;
+}
+function C(e, t) {
+	return Math.min(t, Math.max(0, Number.isFinite(e) ? e : 0));
+}
+function Ne(e, t, n) {
+	let r = new Intl.Segmenter(n, { granularity: "grapheme" }), i = 0, a = t, o = /* @__PURE__ */ new Set();
+	return {
+		commands: e.map((e) => {
+			a = e.cwd ?? a;
+			let t = i, n = Array.from(r.segment(e.command), ({ segment: e }) => e);
+			for (let e of n) i += le, o.add(i);
+			let s = i, ee = (e.output ?? []).map((e) => {
+				let t = typeof e == "string" ? g : "kind" in e ? 0 : S(e.delayMs, g);
+				i += t;
+				let n = i;
+				if (o.add(i), typeof e != "string" && "kind" in e) {
+					let t = S(e.durationMs, ue);
+					for (let e = 1; e <= y; e++) o.add(i + t * e / y);
+					i += t;
+				}
+				return {
+					output: e,
+					start: n,
+					end: i
+				};
+			});
+			return i += S(e.pauseMs, _), o.add(i), {
+				step: e,
+				cwd: a,
+				start: t,
+				typedEnd: s,
+				end: i,
+				graphemes: n,
+				outputs: ee
+			};
+		}),
+		ticks: [...o].sort((e, t) => e - t),
+		duration: i
+	};
+}
+function Pe(e) {
+	if (e !== void 0) try {
+		let t = new URL(e, "https://terminal.invalid/");
+		return ["http:", "https:"].includes(t.protocol) ? e : void 0;
+	} catch {
+		return;
+	}
+}
+function Fe(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function w({ ref: e, steps: t, title: n = "Terminal", cwd: r = "~", symbol: i = "$", value: s, defaultValue: p = 0, onValueChange: g, paused: ue, defaultPaused: _ = !1, onPausedChange: y, speed: b = 1, loop: S = !1, rows: w = v, copyable: Ie = !0, caption: T, label: Le = "Terminal session", labels: E, locale: D, slotProps: O, className: Re, sx: ze, style: Be, "aria-labelledby": Ve, "aria-describedby": He, ...Ue }) {
+	let k = {
+		...fe,
+		...E,
+		tones: {
+			...fe.tones,
+			...E?.tones
+		}
+	}, A = u(() => Ne(t, r, D), [
+		t,
+		r,
+		D
+	]), [We, j] = o(s === void 0 ? void 0 : C(s, A.duration), C(p, A.duration), g), [M, N] = o(ue, _, y), P = C(We ?? 0, A.duration), Ge = ce(), [Ke, qe] = f(null), F = Ke ?? Ge, [Je, I] = f({
+		active: !1,
+		target: null
+	}), [Ye, L] = f(""), [R, z] = f(null), [Xe, B] = f(!1), V = d(null), H = d(0), U = d(!1), W = d(null), [G, Ze] = f(!0), [K, Qe] = f(!0), q = se(0), $e = ne(), et = O?.caption?.id ?? `${$e}-caption`, tt = ee(T), nt = Number.isFinite(b) && b > 0 ? b : 1, rt = Number.isInteger(w) && w > 0 ? w : v, J = u(() => new Intl.NumberFormat(D, { maximumFractionDigits: 1 }), [D]), it = u(() => new Intl.NumberFormat(D, {
+		style: "percent",
+		maximumFractionDigits: 0
+	}), [D]), Y = Math.max(0, A.commands.findLastIndex((e) => e.start <= P)), at = A.commands[Y], ot = `${at ? k.step(Y + 1, at.step.command) : k.completed}; ${J.format(P / 1e3)} / ${J.format(A.duration / 1e3)} s`, X = Je.active || Je.target === P, Z = F ? X ? A.commands[Math.max(0, A.commands.findLastIndex((e) => e.start <= P))]?.end ?? 0 : A.duration : P;
+	l(() => (H.current++, U.current = !1, B(!1), I({
+		active: !1,
+		target: null
+	}), () => {
+		H.current++, U.current = !1;
+	}), [A]), l(() => {
+		let e = V.current;
+		if (!e) return;
+		let t = e.ownerDocument, n = t.defaultView?.matchMedia("(prefers-reduced-motion: reduce)"), r = () => {
+			n && (qe(n.matches), n.matches && I({
+				active: !1,
+				target: null
+			}));
+		};
+		r(), n?.addEventListener("change", r);
+		let i = () => Qe(t.visibilityState !== "hidden");
+		i(), t.addEventListener("visibilitychange", i);
+		let a = t.defaultView?.IntersectionObserver, o = a ? new a(([e]) => {
+			e && Ze(e.isIntersecting);
+		}) : null;
+		return o?.observe(e), () => {
+			t.removeEventListener("visibilitychange", i), n?.removeEventListener("change", r), o?.disconnect();
+		};
+	}, []), l(() => {
+		if (M || F || !G || !K || A.duration === 0) return;
+		let e = A.ticks.find((e) => e > P);
+		if (e === void 0 && W.current !== A) return;
+		let t = setTimeout(function() {
+			e === void 0 ? (W.current = null, S ? j(0) : N(!0)) : (e === A.duration && (W.current = A), j(e));
+		}, e === void 0 ? 0 : (e - P) / nt);
+		return () => clearTimeout(t);
+	}, [
+		P,
+		M,
+		F,
+		G,
+		K,
+		nt,
+		S,
+		A,
+		j,
+		N
+	]), l(() => {
+		R && (z(null), (R.position === void 0 || R.position === P) && (R.paused === void 0 || R.paused === M) && L(R.message));
+	}, [
+		R,
+		P,
+		M
+	]), re(() => {
+		let e = V.current;
+		if (!e || M || !G || !K) return;
+		let t = Math.max(0, e.scrollHeight - e.clientHeight);
+		if (F) {
+			e.scrollTop = t, q.set(t);
+			return;
+		}
+		q.set(e.scrollTop);
+		let n = q.on("change", (t) => {
+			e.scrollTop = t;
+		}), r = oe(q, t, de);
+		return () => {
+			r.stop(), n();
+		};
+	}, [
+		Z,
+		M,
+		F,
+		G,
+		K,
+		q
+	]);
+	function Q(e) {
+		let t = C(e, A.duration);
+		F && I({
+			active: X,
+			target: t
+		}), t !== P && (j(t), z({
+			message: `${k.seek}: ${J.format(t / 1e3)} s`,
+			position: t
+		}));
+	}
+	function $() {
+		N(!M), z({
+			message: M ? k.playing : k.paused,
+			paused: !M
+		});
+	}
+	async function st() {
+		if (U.current) return;
+		U.current = !0, B(!0);
+		let e = ++H.current;
+		try {
+			let n = V.current?.ownerDocument.defaultView?.navigator.clipboard;
+			if (!n) throw Error("Clipboard unavailable");
+			await n.writeText(t.map(({ command: e }) => e).join("\n")), e === H.current && L(k.copied);
+		} catch {
+			e === H.current && L(k.copyError);
+		} finally {
+			e === H.current && (U.current = !1, B(!1));
+		}
+	}
+	function ct(e) {
+		return typeof e == "string" ? e : "kind" in e ? e.label : e.text;
+	}
+	function lt(e, t, n) {
+		if (typeof e == "string") return e;
+		if (!("kind" in e)) return /* @__PURE__ */ h(ie, { children: [/* @__PURE__ */ h("span", {
+			css: Me[e.tone ?? "neutral"],
+			children: [je[e.tone ?? "neutral"], " "]
+		}), e.text] });
+		let r = Z >= n, i = n === t ? 1 : Math.min(1, (Z - t) / (n - t));
+		return /* @__PURE__ */ h("span", {
+			css: Oe,
+			children: [
+				e.kind === "task" ? r ? "✓" : /* @__PURE__ */ m(te, {
+					size: "sm",
+					label: e.label
+				}) : /* @__PURE__ */ m("span", {
+					css: ke,
+					children: /* @__PURE__ */ m("span", {
+						css: Ae,
+						style: { "--terminal-progress": `${i * 100}%` }
+					})
+				}),
+				r && e.kind === "task" ? e.doneLabel ?? e.label : e.label,
+				" ",
+				e.kind === "progress" ? it.format(i) : r ? k.completed : ""
+			]
+		});
+	}
+	return /* @__PURE__ */ m(ae, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ m(a, {
+			className: Re,
+			styles: pe,
+			sx: ze,
+			children: (t) => /* @__PURE__ */ h("figure", {
+				...Ue,
+				ref: e,
+				className: t,
+				"data-ui": "typewriter-terminal",
+				"aria-label": Ue["aria-label"] ?? (Ve ? void 0 : Le),
+				"aria-labelledby": Ve,
+				"aria-describedby": Fe(He, tt ? et : void 0),
+				style: {
+					...Be,
+					"--terminal-rows": rt
+				},
+				children: [
+					/* @__PURE__ */ h("header", {
+						...O?.header,
+						role: "group",
+						css: [me, O?.header?.css],
+						children: [/* @__PURE__ */ m("span", { children: n }), Ie && /* @__PURE__ */ m(c, {
+							...O?.copyButton,
+							css: [x, O?.copyButton?.css],
+							variant: "ghost",
+							"aria-disabled": Xe || O?.copyButton?.["aria-disabled"],
+							onClick: (e) => {
+								O?.copyButton?.onClick?.(e), e.defaultPrevented || st();
+							},
+							children: k.copy
+						})]
+					}),
+					/* @__PURE__ */ m("div", {
+						...O?.screen,
+						ref: V,
+						css: [he, O?.screen?.css],
+						"data-ui": "typewriter-terminal-screen",
+						"aria-hidden": "true",
+						inert: !0,
+						children: A.commands.filter((e, t) => e.start <= Z && (!F || !X || t <= Y)).map((e, t) => {
+							let n = F ? e.graphemes.length : Math.min(e.graphemes.length, Math.floor((Z - e.start) / le));
+							return /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("pre", {
+								css: ge,
+								children: [
+									/* @__PURE__ */ h("span", {
+										css: _e,
+										children: [
+											e.cwd,
+											" ",
+											i,
+											" "
+										]
+									}),
+									/* @__PURE__ */ m("span", {
+										css: ve,
+										children: e.graphemes.slice(0, n).join("")
+									}),
+									Z < e.typedEnd && /* @__PURE__ */ m("span", {
+										css: ye,
+										"data-static": M || F ? "" : void 0
+									})
+								]
+							}), e.outputs.filter((e) => e.start <= Z).map(({ output: e, start: t, end: n }, r) => /* @__PURE__ */ m("pre", {
+								css: ge,
+								"data-tone": typeof e == "object" && !("kind" in e) ? e.tone : void 0,
+								children: lt(e, t, n)
+							}, r))] }, t);
+						})
+					}),
+					/* @__PURE__ */ h("div", {
+						...O?.controls,
+						css: [be, O?.controls?.css],
+						children: [
+							/* @__PURE__ */ m(c, {
+								...O?.playButton,
+								css: [x, O?.playButton?.css],
+								variant: "outline",
+								disabled: A.duration === 0 || O?.playButton?.disabled,
+								onClick: (e) => {
+									O?.playButton?.onClick?.(e), e.defaultPrevented || $();
+								},
+								children: M ? k.play : k.pause
+							}),
+							/* @__PURE__ */ m(c, {
+								...O?.replayButton,
+								css: [x, O?.replayButton?.css],
+								variant: "ghost",
+								disabled: A.duration === 0 || O?.replayButton?.disabled,
+								onClick: (e) => {
+									O?.replayButton?.onClick?.(e), !e.defaultPrevented && (j(0), N(!1), W.current = null, I({
+										active: !1,
+										target: null
+									}), z({
+										message: k.replayed,
+										position: 0,
+										paused: !1
+									}));
+								},
+								children: k.replay
+							}),
+							/* @__PURE__ */ m("div", {
+								css: Se,
+								children: /* @__PURE__ */ m("input", {
+									...O?.scrubber,
+									css: [xe, O?.scrubber?.css],
+									type: "range",
+									min: 0,
+									max: A.duration,
+									step: "any",
+									value: P,
+									disabled: A.duration === 0 || O?.scrubber?.disabled,
+									"aria-label": O?.scrubber?.["aria-label"] ?? k.seek,
+									"aria-valuetext": ot,
+									onChange: (e) => {
+										O?.scrubber?.onChange?.(e), e.defaultPrevented || Q(Number(e.currentTarget.value));
+									},
+									onKeyDown: (e) => {
+										if (O?.scrubber?.onKeyDown?.(e), e.defaultPrevented) return;
+										let t = [...A.commands.map(({ start: e }) => e), A.duration], n = {
+											ArrowRight: () => Q(t.find((e) => e > P) ?? A.duration),
+											ArrowUp: () => Q(t.find((e) => e > P) ?? A.duration),
+											PageUp: () => Q(t.find((e) => e > P) ?? A.duration),
+											ArrowLeft: () => Q(t.findLast((e) => e < P) ?? 0),
+											ArrowDown: () => Q(t.findLast((e) => e < P) ?? 0),
+											PageDown: () => Q(t.findLast((e) => e < P) ?? 0),
+											Home: () => Q(0),
+											End: () => Q(A.duration),
+											" ": $,
+											k: $,
+											K: $
+										}[e.key];
+										n && (e.preventDefault(), n());
+									}
+								})
+							}),
+							/* @__PURE__ */ h("span", {
+								css: Ce,
+								children: [
+									J.format(P / 1e3),
+									" / ",
+									J.format(A.duration / 1e3),
+									" s"
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ m("ol", {
+						...O?.transcript,
+						css: [Ee, O?.transcript?.css],
+						"data-ui": "typewriter-terminal-transcript",
+						"aria-hidden": void 0,
+						inert: !1,
+						children: A.commands.map((e, t) => /* @__PURE__ */ h("li", { children: [/* @__PURE__ */ h("span", { children: [
+							e.cwd,
+							" ",
+							i,
+							" ",
+							e.step.command
+						] }), e.outputs.map(({ output: e }, t) => {
+							let n = typeof e == "object" && !("kind" in e) ? Pe(e.href) : void 0, r = ct(e);
+							return /* @__PURE__ */ h("div", { children: [
+								typeof e == "object" && !("kind" in e) && e.tone ? `${k.tones[e.tone]}: ` : "",
+								n === void 0 ? r : /* @__PURE__ */ m("a", {
+									css: De,
+									href: n,
+									children: r
+								}),
+								typeof e == "object" && "kind" in e ? ` — ${e.kind === "task" ? e.doneLabel ?? k.completed : it.format(1)}` : ""
+							] }, t);
+						})] }, t))
+					}),
+					/* @__PURE__ */ m("div", {
+						...O?.status,
+						css: [Te, O?.status?.css],
+						role: "status",
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						children: Ye
+					}),
+					tt && /* @__PURE__ */ m("figcaption", {
+						...O?.caption,
+						id: et,
+						css: [we, O?.caption?.css],
+						children: T
+					})
+				]
+			})
+		})
+	});
+}
+w.displayName = "TypewriterTerminal";
+//#endregion
+export { w as t };

package/dist/typewriter-terminal.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as TypewriterTerminal } from "./typewriter-terminal-BUEsMzo3.js";