@rinzai/zen 0.8.6 → 0.9.0

package/dist/table/index.js

@@ -1,107 +1,139 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import t from "../icons/chevron-down.js";
-import n from "../icons/chevron-up.js";
-import { useCallback as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { reducedMotion as t } from "../utils/motion.js";
+import n from "../icons/chevron-down.js";
+import r from "../icons/chevron-up.js";
+import { useCallback as i, useEffect as a, useLayoutEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region packages/table/index.tsx
-function u({ label: t, className: n, ref: a, onScroll: s, ...l }) {
-	let u = o(null), d = r(() => {
-		let e = u.current;
+function f({ label: t, className: n, ref: r, onScroll: o, ...s }) {
+	let l = c(null), d = i(() => {
+		let e = l.current;
 		if (!e) return;
 		let t = (t, n) => n !== e.hasAttribute(t) && e.toggleAttribute(t, n);
 		t("data-under-top", e.scrollTop > 0), t("data-under-left", e.scrollLeft > 0), t("data-under-bottom", e.scrollTop + e.clientHeight < e.scrollHeight - 1);
 	}, []);
-	return i(() => {
-		let e = u.current;
+	return a(() => {
+		let e = l.current;
 		if (!e) return;
 		d();
 		let t = typeof ResizeObserver > "u" ? null : new ResizeObserver(d);
 		return t?.observe(e), e.firstElementChild && t?.observe(e.firstElementChild), () => t?.disconnect();
-	}, [d]), /* @__PURE__ */ c("div", {
+	}, [d]), /* @__PURE__ */ u("div", {
 		className: e("zen__table-panel glass glow-edge isolate flex flex-col overflow-hidden rounded-xl", n),
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ u("div", {
 			ref: (e) => {
-				u.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+				l.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
 			},
 			onScroll: (e) => {
-				d(), s?.(e);
+				d(), o?.(e);
 			},
 			role: t ? "region" : void 0,
 			"aria-label": t,
 			tabIndex: t ? 0 : void 0,
 			className: "zen__table-container focus-visible:ring-ring/30 min-h-0 overflow-auto rounded-[inherit] outline-hidden will-change-scroll focus-visible:ring-2 focus-visible:ring-inset",
-			...l
+			...s
 		})
 	});
 }
-function d({ className: t, ...n }) {
-	return /* @__PURE__ */ c("table", {
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ u("table", {
 		className: e("zen__table w-full border-separate border-spacing-0 text-sm", t),
 		...n
 	});
 }
-function f({ className: t, ...n }) {
-	return /* @__PURE__ */ c("thead", {
+function m({ className: t, ...n }) {
+	return /* @__PURE__ */ u("thead", {
 		className: e("zen__sticky-top sticky top-0 z-20", t),
 		...n
 	});
 }
-function p(e) {
-	return /* @__PURE__ */ c("tbody", { ...e });
+function h({ ref: e, ...n }) {
+	let r = c(null), i = c(null);
+	return g(() => {
+		let e = r.current;
+		if (!e) return;
+		let n = [...e.rows], a = i.current;
+		if (a && n.length === a.rows.length && n.every((e, t) => e === a.rows[t])) return;
+		let o = new Map(n.map((e) => [e, e.offsetTop]));
+		if (i.current = {
+			rows: n,
+			tops: o
+		}, !(!a || t() || e.querySelector("[data-zen-spacer]"))) for (let e of n) {
+			let t = a.tops.get(e);
+			t === void 0 ? e.hasAttribute("data-tree-key") || e.animate?.({
+				opacity: [0, 1],
+				translate: ["0 -6px", "0 0"]
+			}, v) : t !== o.get(e) && e.animate?.({ translate: [`0 ${t - o.get(e)}px`, "0 0"] }, _);
+		}
+	}), /* @__PURE__ */ u("tbody", {
+		ref: (t) => {
+			if (r.current = t, typeof e == "function") return e(t);
+			e && (e.current = t);
+		},
+		...n
+	});
 }
-function m({ className: t, ...n }) {
-	return /* @__PURE__ */ c("tfoot", {
+var g = typeof window > "u" ? a : o, _ = {
+	duration: 320,
+	easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
+}, v = {
+	duration: 260,
+	easing: "ease-out"
+};
+function y({ className: t, ...n }) {
+	return /* @__PURE__ */ u("tfoot", {
 		className: e("zen__sticky-bottom sticky bottom-0 z-20", t),
 		...n
 	});
 }
-function h({ className: t, ...n }) {
-	return /* @__PURE__ */ c("tr", {
+function b({ className: t, ...n }) {
+	return /* @__PURE__ */ u("tr", {
 		className: e("group", t),
 		...n
 	});
 }
-function g({ numeric: r, sticky: i, sortDirection: a, onSort: o, scope: s = "col", className: u, children: d, ...f }) {
-	return /* @__PURE__ */ c("th", {
+function x({ numeric: t, sticky: i, sortDirection: a, onSort: o, scope: s = "col", className: c, children: l, ...f }) {
+	return /* @__PURE__ */ u("th", {
 		scope: s,
 		"aria-sort": a === "asc" ? "ascending" : a === "desc" ? "descending" : void 0,
-		className: e("border-tint/[0.07] text-muted-foreground border-b px-3 py-2.5 align-middle text-xs leading-5 font-medium tracking-wider whitespace-nowrap uppercase", i === "left" && "zen__sticky-left sticky left-0 z-10", r ? "text-right" : "text-left", u),
+		className: e("border-tint/[0.07] text-muted-foreground border-b px-3 py-2.5 align-middle text-xs leading-5 font-medium tracking-wider whitespace-nowrap uppercase", i === "left" && "zen__sticky-left sticky left-0 z-10", t ? "text-right" : "text-left", c),
 		...f,
-		children: o ? /* @__PURE__ */ l("button", {
+		children: o ? /* @__PURE__ */ d("button", {
 			type: "button",
 			onClick: o,
-			className: e("hover:text-foreground inline-flex cursor-pointer items-center gap-1 align-middle leading-5 tracking-wider uppercase", r && "flex-row-reverse"),
-			children: [d, /* @__PURE__ */ c("span", {
+			className: e("hover:text-foreground touch-target inline-flex cursor-pointer items-center gap-1 align-middle leading-5 tracking-wider uppercase", t && "flex-row-reverse"),
+			children: [l, /* @__PURE__ */ u("span", {
 				"aria-hidden": !0,
 				className: "inline-flex w-3",
-				children: a === "asc" ? /* @__PURE__ */ c(n, {
+				children: a === "asc" ? /* @__PURE__ */ u(r, {
 					className: "size-3",
 					strokeWidth: 2.5
-				}) : a === "desc" ? /* @__PURE__ */ c(t, {
+				}) : a === "desc" ? /* @__PURE__ */ u(n, {
 					className: "size-3",
 					strokeWidth: 2.5
 				}) : null
 			})]
-		}) : d
+		}) : l
 	});
 }
-function _({ numeric: t, sticky: n, className: r, ...i }) {
-	return /* @__PURE__ */ c("td", {
+function S({ numeric: t, sticky: n, className: r, ...i }) {
+	return /* @__PURE__ */ u("td", {
 		className: e("border-tint/[0.045] border-b px-3 py-2.5 transition-colors duration-150", "group-hover:[background-image:linear-gradient(oklch(var(--tint)/0.035),oklch(var(--tint)/0.035))]", n === "left" && "zen__sticky-left sticky left-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)]", t && "text-right tabular-nums", r),
 		...i
 	});
 }
-function v({ numeric: t, sticky: n, className: r, ...i }) {
-	return /* @__PURE__ */ c("td", {
+function C({ numeric: t, sticky: n, className: r, ...i }) {
+	return /* @__PURE__ */ u("td", {
 		className: e("border-tint/[0.07] h-9 border-t px-3 font-medium whitespace-nowrap", n === "left" && "zen__sticky-left sticky left-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)]", t && "text-right tabular-nums", r),
 		...i
 	});
 }
-function y({ height: e, colSpan: t }) {
-	return e <= 0 ? null : /* @__PURE__ */ c("tr", {
+function w({ height: e, colSpan: t }) {
+	return e <= 0 ? null : /* @__PURE__ */ u("tr", {
 		"aria-hidden": !0,
-		children: /* @__PURE__ */ c("td", {
+		"data-zen-spacer": !0,
+		children: /* @__PURE__ */ u("td", {
 			colSpan: t,
 			style: {
 				height: e,
@@ -111,17 +143,17 @@ function y({ height: e, colSpan: t }) {
 		})
 	});
 }
-function b({ colSpan: e, children: t = "Nothing here yet." }) {
-	return /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", {
+function T({ colSpan: e, children: t = "Nothing here yet." }) {
+	return /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", {
 		colSpan: e,
 		className: "text-muted-foreground px-3 py-8 text-center",
 		children: t
 	}) });
 }
-function x(e, t, n) {
-	let [r, i] = s(n ?? null);
+function E(e, t, n) {
+	let [r, i] = l(n ?? null);
 	return {
-		rows: a(() => {
+		rows: s(() => {
 			if (!r) return e;
 			let n = t[r.key], i = [...e].sort(n);
 			return r.direction === "desc" ? i.reverse() : i;
@@ -145,4 +177,4 @@ function x(e, t, n) {
 	};
 }
 //#endregion
-export { p as TableBody, _ as TableCell, u as TableContainer, b as TableEmpty, m as TableFooter, v as TableFooterCell, g as TableHead, f as TableHeader, h as TableRow, y as TableSpacerRow, d as default, x as useSort };
+export { h as TableBody, S as TableCell, f as TableContainer, T as TableEmpty, y as TableFooter, C as TableFooterCell, x as TableHead, m as TableHeader, b as TableRow, w as TableSpacerRow, p as default, E as useSort };

package/dist/table-of-contents/index.d.ts

@@ -12,6 +12,7 @@ export interface TableOfContentsItem {
 }
 export interface TableOfContentsProps {
     items: TableOfContentsItem[];
+    /** Shown above the list, and names it. Empty: no heading shown (e.g. under a trigger that says it). */
     title?: string;
     className?: string;
 }

package/dist/table-of-contents/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/table-of-contents/index.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,KAAK,EAAE,KAAsB,EAAE,SAAS,EAAE,EAAE,oBAAoB,sCA6CzG;AAED,MAAM,WAAW,mBAAmB;IAChC,iDAAiD;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/table-of-contents/index.tsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,KAAK,EAAE,KAAsB,EAAE,SAAS,EAAE,EAAE,oBAAoB,sCA8CzG;AAED,MAAM,WAAW,mBAAmB;IAChC,iDAAiD;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACjB;AAED,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,uGAAuG;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/table-of-contents/index.js

@@ -1,37 +1,39 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useEffect as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { followSectionLink as t } from "../utils/section-link.js";
+import { useEffect as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region packages/table-of-contents/index.tsx
-function a({ items: a, title: o = "On this page", className: s }) {
-	let [c, l] = n();
-	return t(() => {
+function o({ items: o, title: s = "On this page", className: c }) {
+	let [l, u] = r();
+	return n(() => {
 		if (typeof IntersectionObserver > "u") return;
-		let e = a.map((e) => document.getElementById(e.id)).filter((e) => !!e), t = /* @__PURE__ */ new Set(), n = new IntersectionObserver((e) => {
+		let e = o.map((e) => document.getElementById(e.id)).filter((e) => !!e), t = /* @__PURE__ */ new Set(), n = new IntersectionObserver((e) => {
 			for (let n of e) n.isIntersecting ? t.add(n.target.id) : t.delete(n.target.id);
-			let n = a.find((e) => t.has(e.id));
-			n && l(n.id);
+			let n = o.find((e) => t.has(e.id));
+			n && u(n.id);
 		}, { rootMargin: "0px 0px -65% 0px" });
 		return e.forEach((e) => n.observe(e)), () => n.disconnect();
-	}, [a]), a.length ? /* @__PURE__ */ i("nav", {
-		"aria-label": o,
-		className: e("zen__toc flex flex-col gap-3", s),
-		children: [/* @__PURE__ */ r("p", {
+	}, [o]), o.length ? /* @__PURE__ */ a("nav", {
+		"aria-label": s || "On this page",
+		className: e("zen__toc flex flex-col gap-3", c),
+		children: [s && /* @__PURE__ */ i("p", {
 			className: "text-muted-foreground text-2xs mt-0! tracking-widest uppercase",
-			children: o
-		}), /* @__PURE__ */ r("ul", {
+			children: s
+		}), /* @__PURE__ */ i("ul", {
 			className: "border-tint/[0.07] flex flex-col gap-2 border-l text-sm",
-			children: a.map((t) => /* @__PURE__ */ r("li", {
-				className: e("-ml-px", t.depth === 2 && "pl-3"),
-				children: /* @__PURE__ */ r("a", {
-					href: `#${t.id}`,
-					"aria-current": t.id === c ? "location" : void 0,
-					className: e("text-muted-foreground hover:text-foreground block border-l border-transparent pl-3 transition-colors", "aria-[current=location]:border-primary aria-[current=location]:text-foreground"),
-					children: t.label
+			children: o.map((n) => /* @__PURE__ */ i("li", {
+				className: e("-ml-px", n.depth === 2 && "pl-3"),
+				children: /* @__PURE__ */ i("a", {
+					href: `#${n.id}`,
+					onClick: t,
+					"aria-current": n.id === l ? "location" : void 0,
+					className: e("text-muted-foreground hover:text-foreground block border-l border-transparent pl-3 transition-colors pointer-coarse:py-1.5", "aria-[current=location]:border-primary aria-[current=location]:text-foreground"),
+					children: n.label
 				})
-			}, t.id))
+			}, n.id))
 		})]
 	}) : null;
 }
 //#endregion
-export { a as default };
+export { o as default };

package/dist/tag-input/index.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+/**
+ * A field of short values (tags, emails, labels): typing one and pressing
+ * Enter or a comma adds it, pasting a list adds each, Backspace in the empty
+ * field takes the last one back. Each is removed with its ×. Values are
+ * trimmed and kept once. Past about three rows the tags scroll, under a
+ * typing line that stays in view (a max-h-* class sets the field's height).
+ */
+export default function TagInput({ value: controlled, defaultValue, onValueChange, validate, removeLabel, className, disabled, ...rest }: TagInputProps): import('react').JSX.Element;
+export interface TagInputProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue'> {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Whether an entry may be added (e.g. looks like an email). */
+    validate?: (entry: string) => boolean;
+    /** The × button's label, for screen readers. */
+    removeLabel?: (tag: string) => string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/tag-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tag-input/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,cAAc,EAAoD,MAAM,OAAO,CAAC;AAEzG;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC7B,KAAK,EAAE,UAAU,EACjB,YAAiB,EACjB,aAAa,EACb,QAAQ,EACR,WAAsC,EACtC,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,aAAa,+BAgGf;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAC1F,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC"}

package/dist/tag-input/index.js

@@ -0,0 +1,61 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { FIELD as t } from "../utils/styles.js";
+import { useFieldProps as n } from "../field/index.js";
+import r from "../icons/micro/x-mark.js";
+import { useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region packages/tag-input/index.tsx
+function l({ value: l, defaultValue: u = [], onValueChange: d, validate: f, removeLabel: p = (e) => `Remove ${e}`, className: m, disabled: h, ...g }) {
+	let [_, v] = o(u), y = l ?? _, [b, x] = o(""), S = n(g), C = a(null), w = y.length;
+	i(() => {
+		let e = C.current;
+		e?.parentElement?.contains(document.activeElement) && (e.scrollTop = e.scrollHeight);
+	}, [w]);
+	let T = (e) => {
+		l === void 0 && v(e), d?.(e);
+	}, E = (e) => {
+		let t = [...y];
+		for (let n of e.map((e) => e.trim())) n && !t.includes(n) && (f?.(n) ?? !0) && t.push(n);
+		t.length !== y.length && T(t);
+	};
+	return /* @__PURE__ */ c("div", {
+		className: e("zen__tag-input", t, "flex h-auto max-h-36 min-h-10 w-full cursor-text flex-col gap-1.5 py-1.5", "has-[input:focus-visible]:border-glow/60 has-[input:focus-visible]:bg-tint/[0.05] has-[input:focus-visible]:shadow-glow-focus has-[input:focus-visible]:[--glow-border-color:transparent]", h && "cursor-not-allowed opacity-50", m),
+		onClick: (e) => e.currentTarget.querySelector("input")?.focus(),
+		children: [w > 0 && /* @__PURE__ */ s("div", {
+			ref: C,
+			className: "flex min-h-0 flex-wrap gap-1.5 overflow-y-auto",
+			children: y.map((e) => /* @__PURE__ */ c("span", {
+				className: "zen__tag bg-primary/12 text-foreground inline-flex items-center gap-1 rounded-md py-0.5 pr-1 pl-2 text-xs shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)]",
+				children: [e, /* @__PURE__ */ s("button", {
+					type: "button",
+					disabled: h,
+					"aria-label": p(e),
+					onClick: () => T(y.filter((t) => t !== e)),
+					className: "text-muted-foreground hover:text-foreground hover:bg-tint/10 focus-visible:ring-ring/50 touch-target grid size-4 cursor-pointer place-items-center rounded-sm outline-hidden focus-visible:ring-2",
+					children: /* @__PURE__ */ s(r, { className: "size-3" })
+				})]
+			}, e))
+		}), /* @__PURE__ */ s("input", {
+			...g,
+			...S,
+			disabled: h,
+			value: b,
+			onChange: (e) => x(e.target.value),
+			onKeyDown: (e) => {
+				g.onKeyDown?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && ((e.key === "Enter" || e.key === ",") && b.trim() ? (e.preventDefault(), E([b]), x("")) : e.key === "Backspace" && !b && y.length && (e.preventDefault(), x(y[y.length - 1]), T(y.slice(0, -1))));
+			},
+			onBlur: (e) => {
+				g.onBlur?.(e), b.trim() && (E([b]), x(""));
+			},
+			onPaste: (e) => {
+				g.onPaste?.(e);
+				let t = e.clipboardData.getData("text");
+				!e.defaultPrevented && /[,\n]/.test(t) && (e.preventDefault(), E(t.split(/[,\n]/)));
+			},
+			className: "h-7 w-full shrink-0 bg-transparent outline-hidden placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"
+		})]
+	});
+}
+//#endregion
+export { l as default };

package/dist/theme.css

@@ -224,6 +224,25 @@
  * surface's own `!` background (a Dialog's) is: an unlayered !important rule
  * loses to a layered one.
  */
+/*
+ * On touch screens, a small control's hit area grows to at least 44px (centred on
+ * it), while it looks the same. For controls that aren't positioned themselves.
+ */
+@utility touch-target {
+    @media (pointer: coarse) {
+        position: relative;
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            translate: -50% -50%;
+            width: max(100%, 44px);
+            height: max(100%, 44px);
+        }
+    }
+}
+
 @utility glass-blur {
     @apply backdrop-blur-[18px] backdrop-saturate-140;
     /*
@@ -383,6 +402,53 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     --sh-comment: oklch(var(--muted-foreground));
 }
 
+/*
+ * Code wider than its block fades out at the edge it carries on past. The mask is
+ * only in the keyframes: code that fits has no scroll timeline, so no mask at all.
+ */
+@property --zen-code-l {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@property --zen-code-r {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+}
+@keyframes zen-code-fade {
+    0% {
+        --zen-code-l: 0px;
+        --zen-code-r: 2rem;
+    }
+    5% {
+        --zen-code-l: 2rem;
+    }
+    95% {
+        --zen-code-r: 2rem;
+    }
+    100% {
+        --zen-code-l: 2rem;
+        --zen-code-r: 0px;
+    }
+    0%,
+    100% {
+        mask-image: linear-gradient(
+            to right,
+            transparent,
+            #000 var(--zen-code-l),
+            #000 calc(100% - var(--zen-code-r)),
+            transparent
+        );
+    }
+}
+@supports (animation-timeline: scroll()) {
+    .zen__code-block pre {
+        animation: zen-code-fade linear both;
+        animation-timeline: scroll(self inline);
+    }
+}
+
 /* ───────────────────────── Backdrop: contours / dots + light ───────────────────────── */
 
 .zen-backdrop {
@@ -930,6 +996,13 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
 .zen__dialog:not([open])::backdrop {
     opacity: 0;
 }
+/* A dialog opened from a button grows out of it, and shrinks back into it (useModal sets the origin). */
+.zen__dialog[data-zen-from] {
+    transition-duration: 280ms;
+}
+.zen__dialog[data-zen-from]:not([open]) {
+    scale: 0.4;
+}
 /* Sheets slide from their edge instead of scaling up. */
 .zen__dialog[data-side] {
     transition:
@@ -953,6 +1026,18 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
 .zen__dialog[data-side='left']:not([open]) {
     translate: -100% 0;
 }
+/* A sheet being swiped back to its edge (useSheetSwipe): it follows the finger, and the scrim fades with it. */
+.zen__dialog[data-side][open] {
+    translate: var(--zen-swipe, 0 0);
+}
+.zen__dialog[data-side][open]::backdrop {
+    opacity: calc(1 - var(--zen-swipe-progress, 0));
+}
+.zen__dialog[data-swiping],
+.zen__dialog[data-swiping]::backdrop {
+    transition: none;
+    user-select: none;
+}
 @starting-style {
     .zen__popover:popover-open,
     .zen__dialog[open] {
@@ -962,9 +1047,15 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     .zen__dialog[open]::backdrop {
         opacity: 0;
     }
+    .zen__dialog[data-zen-from][open] {
+        scale: 0.4;
+    }
     .zen__dialog[data-side][open] {
         scale: none;
     }
+    .zen__dialog[data-side][open]::backdrop {
+        opacity: 0;
+    }
     .zen__dialog[data-side='bottom'][open] {
         translate: 0 100%;
     }
@@ -1096,6 +1187,37 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     }
 }
 
+/*
+ * Morphs: a card opening into its page. Give the pair the view-transition class
+ * zen-morph (React: <ViewTransition name=… share="zen-morph">). The box moves and
+ * resizes; what's in it keeps its size, clipped to the box, so text never stretches.
+ */
+::view-transition-group(*.zen-morph) {
+    animation-duration: 0.42s;
+    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+::view-transition-image-pair(*.zen-morph) {
+    overflow: clip;
+    border-radius: var(--radius-xl);
+}
+::view-transition-old(*.zen-morph),
+::view-transition-new(*.zen-morph) {
+    height: 100%;
+    object-fit: none;
+    object-position: top left;
+}
+
+/* Content arriving where its placeholder was. */
+.zen__reveal {
+    animation: zen-reveal 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+@keyframes zen-reveal {
+    from {
+        opacity: 0;
+        translate: 0 4px;
+    }
+}
+
 /* Time left before a toast goes away. */
 .zen__toast-timer {
     animation: zen-toast-timer linear forwards;
@@ -1116,6 +1238,21 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     }
 }
 
+/* A tag added to a TagInput pops in. */
+.zen__tag {
+    animation: zen-pop 0.3s var(--ease-out-soft) backwards;
+}
+
+/* CodeInput's caret, in the box typing goes into. */
+.zen__code-caret {
+    animation: zen-caret 1s steps(1) infinite;
+}
+@keyframes zen-caret {
+    50% {
+        opacity: 0;
+    }
+}
+
 /* Charts: lines draw themselves in, bars grow from the baseline, fills and donut segments fade up. */
 .zen__chart-draw {
     stroke-dasharray: 1;
@@ -1150,6 +1287,28 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
         opacity: 0;
     }
 }
+/* Held at their start until the chart is first on screen, so they're seen. */
+/*
+ * A sparkline is revealed from the left instead: its stroke doesn't scale with the
+ * stretched drawing (non-scaling-stroke), and Chrome then measures a dash in screen
+ * pixels, not along the path, breaking the line up. Its points only go rightwards,
+ * so the reveal draws it just the same.
+ */
+.zen__sparkline-draw {
+    animation: zen-sparkline-draw 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) both;
+}
+@keyframes zen-sparkline-draw {
+    from {
+        clip-path: inset(0 100% 0 0);
+    }
+    to {
+        clip-path: inset(0);
+    }
+}
+[data-zen-unseen] :is(.zen__chart-draw, .zen__sparkline-draw, .zen__chart-grow, .zen__chart-fade),
+[data-zen-unseen]:is(.zen__chart-draw, .zen__sparkline-draw, .zen__chart-grow, .zen__chart-fade) {
+    animation-play-state: paused;
+}
 
 /*
  * Reduced motion: the OS setting, or opt in with html.reduce-motion. It reaches

package/dist/timeline/index.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, ReactNode } from 'react';
+/** Events in order, each on a dot joined by a line: an activity feed, a history. */
+export default function Timeline({ className, ...rest }: ComponentProps<'ol'>): import('react').JSX.Element;
+/**
+ * One event: its title, when (`time`), and anything more as children. `icon`
+ * replaces the dot; `active` lights it in the accent, e.g. what's happening now.
+ */
+export declare function TimelineItem({ title, time, icon, active, className, children, ...rest }: TimelineItemProps): import('react').JSX.Element;
+export interface TimelineItemProps extends Omit<ComponentProps<'li'>, 'title'> {
+    title: ReactNode;
+    /** When it happened, e.g. a <time> or "2 hours ago". */
+    time?: ReactNode;
+    /** An icon in place of the dot. */
+    icon?: ReactNode;
+    /** Lit in the accent: the current or latest event. */
+    active?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/timeline/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,oFAAoF;AACpF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,+BAE5E;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BA8B1G;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAC1E,KAAK,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/timeline/index.js

@@ -0,0 +1,45 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region packages/timeline/index.tsx
+function r({ className: n, ...r }) {
+	return /* @__PURE__ */ t("ol", {
+		className: e("zen__timeline flex flex-col", n),
+		...r
+	});
+}
+function i({ title: r, time: i, icon: a, active: o, className: s, children: c, ...l }) {
+	return /* @__PURE__ */ n("li", {
+		className: e("group/timeline relative flex gap-3 pb-6 last:pb-0", s),
+		...l,
+		children: [
+			/* @__PURE__ */ t("span", {
+				"aria-hidden": !0,
+				className: "bg-tint/10 absolute top-7 bottom-1 left-[11px] w-px group-last/timeline:hidden"
+			}),
+			/* @__PURE__ */ t("span", {
+				"aria-hidden": !0,
+				className: e("relative mt-0.5 grid size-6 shrink-0 place-items-center rounded-full [&_svg]:size-3.5", a ? "bg-tint/[0.06] text-muted-foreground shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.1)]" : "after:bg-tint/30 after:size-2 after:rounded-full", o && "bg-primary/15 text-primary shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.35),0_0_16px_-2px_oklch(var(--glow)/calc(0.7*var(--glow-k)))] after:bg-primary"),
+				children: a
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [/* @__PURE__ */ n("div", {
+					className: "flex flex-wrap items-baseline justify-between gap-x-3",
+					children: [/* @__PURE__ */ t("span", {
+						className: "text-foreground text-sm font-medium",
+						children: r
+					}), i && /* @__PURE__ */ t("span", {
+						className: "text-muted-foreground text-xs tabular-nums",
+						children: i
+					})]
+				}), c && /* @__PURE__ */ t("div", {
+					className: "text-muted-foreground text-sm leading-6",
+					children: c
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { i as TimelineItem, r as default };