@rinzai/zen 0.5.0 → 0.6.1

package/dist/utils/theme.js

@@ -0,0 +1,200 @@
+"use client";
+//#region packages/utils/theme.ts
+var e = [
+	"mono",
+	"muted",
+	"balanced",
+	"vivid"
+], t = [
+	{
+		id: "violet",
+		label: "Violet",
+		hue: 295,
+		intensity: "balanced",
+		tint: "tinted"
+	},
+	{
+		id: "ocean",
+		label: "Ocean",
+		hue: 250,
+		intensity: "balanced",
+		tint: "tinted"
+	},
+	{
+		id: "teal",
+		label: "Teal",
+		hue: 195,
+		intensity: "balanced",
+		tint: "tinted"
+	},
+	{
+		id: "forest",
+		label: "Forest",
+		hue: 150,
+		intensity: "muted",
+		tint: "tinted"
+	},
+	{
+		id: "amber",
+		label: "Amber",
+		hue: 75,
+		intensity: "balanced",
+		tint: "neutral"
+	},
+	{
+		id: "rose",
+		label: "Rose",
+		hue: 15,
+		intensity: "muted",
+		tint: "neutral"
+	},
+	{
+		id: "graphite",
+		label: "Graphite",
+		hue: 270,
+		intensity: "mono",
+		tint: "neutral"
+	}
+], n = {
+	preset: "violet",
+	hue: 295,
+	intensity: "balanced",
+	tint: "tinted",
+	contrast: "standard",
+	glow: "soft",
+	topography: "subtle"
+};
+function r(e, n) {
+	let r = t.find((e) => e.id === n);
+	return {
+		...e,
+		preset: r.id,
+		hue: r.hue,
+		intensity: r.intensity,
+		tint: r.tint
+	};
+}
+function i(e, t) {
+	return {
+		...e,
+		...t,
+		preset: "custom"
+	};
+}
+var a = {
+	mono: .012,
+	muted: .07,
+	balanced: .13,
+	vivid: .19
+}, o = (e, t, n) => `${s(e, 3)} ${s(t, 3)} ${s((n % 360 + 360) % 360, 1)}`, s = (e, t) => Math.round(e * 10 ** t) / 10 ** t;
+function c(e, t = "dark") {
+	let n = e.hue, r = a[e.intensity], i = e.contrast === "high", s = e.tint === "tinted" ? Math.min(.014, r * .12) : .003, c = e.intensity === "mono", l = (e, t = 1) => o(e, s * t, n), u = { "topo-strength": String({
+		off: 0,
+		subtle: .55,
+		visible: 1
+	}[e.topography]) };
+	return t === "light" ? {
+		background: l(i ? .995 : .985, .4),
+		foreground: o(i ? .16 : .21, .02, n),
+		card: o(1, 0, 0),
+		"card-foreground": o(i ? .16 : .21, .02, n),
+		popover: o(1, 0, 0),
+		"popover-foreground": o(i ? .16 : .21, .02, n),
+		secondary: l(.955, .6),
+		"secondary-foreground": o(.21, .02, n),
+		muted: l(.96, .5),
+		"muted-foreground": l(i ? .42 : .5, 1.5),
+		border: l(i ? .78 : .91, .8),
+		input: l(i ? .78 : .91, .8),
+		primary: o(c ? .3 : .48, c ? .02 : Math.min(.22, r * 1.5), n),
+		"primary-foreground": o(.985, 0, 0),
+		accent: o(.95, c ? .005 : r * .25, n),
+		"accent-foreground": o(.42, c ? .02 : Math.min(.16, r * .9), n),
+		ring: o(c ? .3 : .48, c ? .02 : Math.min(.22, r * 1.5), n),
+		destructive: o(.55, .22, 25),
+		"destructive-foreground": o(.985, 0, 0),
+		glow: o(.62, c ? .02 : Math.min(.2, r * 1.4), n),
+		"glow-2": o(.65, c ? .02 : r * 1.05, n + 30),
+		tint: o(.21, .02, n),
+		"glow-strength": String({
+			off: 0,
+			soft: .4,
+			bright: .8
+		}[e.glow]),
+		...u
+	} : {
+		background: l(i ? .13 : .155),
+		foreground: o(.97, .004, n),
+		card: l(i ? .17 : .195),
+		"card-foreground": o(.97, .004, n),
+		popover: l(i ? .18 : .21),
+		"popover-foreground": o(.97, .004, n),
+		secondary: l(.25),
+		"secondary-foreground": o(.97, .004, n),
+		muted: l(.235),
+		"muted-foreground": l(i ? .84 : .72, 1.5),
+		border: l(i ? .4 : .28, 1.5),
+		input: l(i ? .4 : .28, 1.5),
+		primary: o(c ? .88 : .72, r, n),
+		"primary-foreground": o(c ? .2 : .17, c ? .01 : .03, n),
+		accent: o(.3, r * .35, n),
+		"accent-foreground": o(.88, r * .5, n),
+		ring: o(.72, r, n),
+		destructive: o(.64, .2, 25),
+		"destructive-foreground": o(.985, 0, 0),
+		glow: o(.7, c ? .02 : r, n),
+		"glow-2": o(.72, c ? .02 : r * .75, n + 30),
+		tint: o(1, 0, 0),
+		"glow-strength": String({
+			off: 0,
+			soft: .55,
+			bright: 1
+		}[e.glow]),
+		...u
+	};
+}
+function l(e, { appearance: t = "dark", target: n } = {}) {
+	let r = n ?? document.documentElement;
+	for (let [n, i] of Object.entries(c(e, t))) r.style.setProperty(`--${n}`, i);
+}
+function u(e) {
+	let t = e ?? document.documentElement;
+	for (let e of Object.keys(c(n))) t.style.removeProperty(`--${e}`);
+}
+function d(r) {
+	let i = typeof r == "object" && r ? r : {}, a = (e, t, n) => t.includes(e) ? e : n, o = n, s = t.map((e) => e.id);
+	return {
+		preset: typeof i.preset == "string" && (i.preset === "custom" || s.includes(i.preset)) ? i.preset : o.preset,
+		hue: typeof i.hue == "number" && Number.isFinite(i.hue) ? (Math.round(i.hue) % 360 + 360) % 360 : o.hue,
+		intensity: a(i.intensity, e, o.intensity),
+		tint: a(i.tint, ["neutral", "tinted"], o.tint),
+		contrast: a(i.contrast, ["standard", "high"], o.contrast),
+		glow: a(i.glow, [
+			"off",
+			"soft",
+			"bright"
+		], o.glow),
+		topography: a(i.topography, [
+			"off",
+			"subtle",
+			"visible"
+		], o.topography)
+	};
+}
+function f(e) {
+	let [t, n, r] = e.split(" ").map(Number), i = n * Math.cos(r * Math.PI / 180), a = n * Math.sin(r * Math.PI / 180), o = (t + .3963377774 * i + .2158037573 * a) ** 3, s = (t - .1055613458 * i - .0638541728 * a) ** 3, c = (t - .0894841775 * i - 1.291485548 * a) ** 3, l = (e) => Math.min(1, Math.max(0, e));
+	return [
+		l(4.0767416621 * o - 3.3077115913 * s + .2309699292 * c),
+		l(-1.2684380046 * o + 2.6097574011 * s - .3413193965 * c),
+		l(-.0041960863 * o - .7034186147 * s + 1.707614701 * c)
+	];
+}
+function p(e, t) {
+	let n = (e) => {
+		let [t, n, r] = f(e);
+		return .2126 * t + .7152 * n + .0722 * r;
+	}, [r, i] = [n(e), n(t)].sort((e, t) => t - e);
+	return (r + .05) / (i + .05);
+}
+//#endregion
+export { n as DEFAULT_THEME, e as INTENSITIES, t as PRESETS, r as applyPreset, l as applyTheme, p as contrastRatio, i as customize, d as normalizeTheme, f as oklchToLinearRgb, u as resetTheme, c as themeVars };

package/dist/utils/useAnchoredPopup.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, RefObject } from 'react';
 /**
  * A popup anchored to a trigger, on the native Popover API: opens below the
  * trigger (flipping above if there's no room), closes on outside click and
@@ -10,27 +10,49 @@ export declare function useAnchoredPopup<T extends HTMLElement = HTMLDivElement>
     open: boolean;
     setOpen: (next: boolean) => void;
     triggerProps: {
+        'data-zen-anchor': string;
+        style: CSSProperties;
         popoverTarget: string;
         'aria-expanded': boolean;
         'aria-controls': string;
         'data-popup-open': true | undefined;
-        style: CSSProperties;
     };
     popupProps: {
-        ref: import('react').RefObject<T | null>;
+        ref: RefObject<T | null>;
         id: string;
         popover: "auto";
         style: CSSProperties;
     };
-    popupRef: import('react').RefObject<T | null>;
+    popupRef: RefObject<T | null>;
 };
+/** Makes an element the anchor its popup (`id`) is placed against. Spread it on the trigger. */
+export declare function anchorFor(id: string): {
+    'data-zen-anchor': string;
+    style: CSSProperties;
+};
+/**
+ * The popup's position: below the trigger (above it if there's no room below),
+ * lined up with its start or end edge, or centred on it; `width` makes it as
+ * wide as the trigger, or at least as wide. For parts that take their own
+ * `align`/`offset` (PopoverContent, MenuContent). The same choices are kept as
+ * custom properties, for placing it where anchor positioning isn't supported.
+ */
+export declare function anchoredStyle(id: string, { align, offset, width }?: AnchorOptions): CSSProperties;
+interface AnchorOptions {
+    align?: 'start' | 'end' | 'center';
+    offset?: number;
+    width?: 'match' | 'at-least';
+}
+/** Places the popup in `ref` against its trigger while it's open, where the browser can't. */
+export declare function useAnchorFallback(ref: RefObject<HTMLElement | null>): void;
 export interface AnchoredPopupOptions {
-    /** Line the popup up with the trigger's start (default) or end edge. */
-    align?: 'start' | 'end';
+    /** Line the popup up with the trigger's start (default) or end edge, or centre it. */
+    align?: 'start' | 'end' | 'center';
     /** Gap below the trigger, in px. */
     offset?: number;
     /** At least as wide as the trigger (e.g. a select's list). */
     matchWidth?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
+export {};
 //# sourceMappingURL=useAnchoredPopup.d.ts.map

package/dist/utils/useAnchoredPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchoredPopup.d.ts","sourceRoot":"","sources":["../../packages/utils/useAnchoredPopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAmD,MAAM,OAAO,CAAC;AAEvF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAAE,EACrE,KAAe,EACf,MAAU,EACV,UAAkB,EAClB,YAAY,GACf,GAAE,oBAAyB;;;oBAgBb,OAAO;;;;;;eA4BsB,aAAa;;;;;;eAe5C,aAAa;;;EAIzB;AAED,MAAM,WAAW,oBAAoB;IACjC,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C"}
+{"version":3,"file":"useAnchoredPopup.d.ts","sourceRoot":"","sources":["../../packages/utils/useAnchoredPopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAmD,MAAM,OAAO,CAAC;AAElG;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EAAE,EACrE,KAAe,EACf,MAAU,EACV,UAAkB,EAClB,YAAY,GACf,GAAE,oBAAyB;;;oBAgBb,OAAO;;;eA6CkD,aAAa;;;;;;;;;;;;;EAJpF;AAED,gGAAgG;AAChG,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM;;WACoC,aAAa;EACpF;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,KAAe,EAAE,MAAU,EAAE,KAAK,EAAE,GAAE,aAAkB,GAAG,aAAa,CAoBnH;AAED,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CAChC;AAYD,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,QAiCnE;AAmCD,MAAM,WAAW,oBAAoB;IACjC,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C"}

package/dist/utils/useAnchoredPopup.js

@@ -0,0 +1,119 @@
+"use client";
+import { useCallback as e, useEffect as t, useId as n, useRef as r, useState as i } from "react";
+//#region packages/utils/useAnchoredPopup.ts
+function a({ align: a = "start", offset: c = 4, matchWidth: l = !1, onOpenChange: d } = {}) {
+	let f = `zen__popup-${n().replace(/[^\w-]/g, "")}`, p = r(null), [m, h] = i(!1), g = r(d);
+	g.current = d;
+	let _ = r(!1), v = e((e) => {
+		h(e), _.current !== e && (_.current = e, g.current?.(e));
+	}, []), y = e((e) => {
+		let t = p.current;
+		if (t) {
+			try {
+				e ? t.showPopover?.() : t.hidePopover?.();
+			} catch {}
+			v(e);
+		}
+	}, [v]);
+	return u(p), t(() => {
+		let e = p.current;
+		if (!e) return;
+		let t = (e) => v(e.newState === "open");
+		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
+	}, [v]), {
+		id: f,
+		open: m,
+		setOpen: y,
+		triggerProps: {
+			popoverTarget: f,
+			"aria-expanded": m,
+			"aria-controls": f,
+			"data-popup-open": m || void 0,
+			...o(f)
+		},
+		popupProps: {
+			ref: p,
+			id: f,
+			popover: "auto",
+			style: s(f, {
+				align: a,
+				offset: c,
+				width: l ? "at-least" : void 0
+			})
+		},
+		popupRef: p
+	};
+}
+function o(e) {
+	return {
+		"data-zen-anchor": e,
+		style: { anchorName: `--${e}` }
+	};
+}
+function s(e, { align: t = "start", offset: n = 4, width: r } = {}) {
+	let i = {
+		start: "block-end span-inline-end",
+		end: "block-end span-inline-start",
+		center: "block-end center"
+	}[t];
+	return {
+		positionAnchor: `--${e}`,
+		positionArea: i,
+		positionTryFallbacks: "flip-block",
+		inset: "auto",
+		margin: `${n}px 0`,
+		...r === "at-least" && {
+			width: "max-content",
+			minWidth: "anchor-size(width)"
+		},
+		...r === "match" && {
+			width: "anchor-size(width)",
+			minWidth: 0
+		},
+		"--zen-anchor": e,
+		"--zen-anchor-align": t,
+		"--zen-anchor-offset": n,
+		"--zen-anchor-width": r ?? "auto"
+	};
+}
+var c, l = () => c ??= typeof CSS < "u" && !!CSS.supports?.("position-area: block-end");
+function u(e) {
+	t(() => {
+		let t = e.current;
+		if (!t || l()) return;
+		let n = 0, r = () => {
+			n ||= requestAnimationFrame(() => {
+				n = 0, f(t);
+			});
+		}, i = typeof ResizeObserver > "u" ? null : new ResizeObserver(r), a = () => {
+			window.removeEventListener("scroll", r, { capture: !0 }), window.removeEventListener("resize", r), i?.disconnect(), cancelAnimationFrame(n), n = 0;
+		}, o = (e) => {
+			a(), e.newState === "open" && (f(t), window.addEventListener("scroll", r, {
+				capture: !0,
+				passive: !0
+			}), window.addEventListener("resize", r, { passive: !0 }), i?.observe(t));
+		};
+		return t.addEventListener("toggle", o), () => {
+			t.removeEventListener("toggle", o), a();
+		};
+	}, [e]);
+}
+var d = 8;
+function f(e) {
+	let t = e.style.getPropertyValue("--zen-anchor").trim(), n = t ? document.querySelector(`[data-zen-anchor="${t}"]`) : null;
+	if (!n) return;
+	let r = e.style.getPropertyValue("--zen-anchor-align").trim() || "start", i = Number(e.style.getPropertyValue("--zen-anchor-offset")) || 0, a = e.style.getPropertyValue("--zen-anchor-width").trim(), o = n.getBoundingClientRect(), s = e.style;
+	for (let e of [
+		"position-anchor",
+		"position-area",
+		"position-try-fallbacks"
+	]) s.removeProperty(e);
+	s.inset = "0 auto auto 0", s.margin = "0", a === "match" && (s.width = `${o.width}px`), a === "at-least" && (s.minWidth = `${o.width}px`);
+	let c = {
+		width: e.offsetWidth,
+		height: e.offsetHeight
+	}, l = document.documentElement.clientWidth, u = window.innerHeight, f = o.bottom + i, p = o.top - i - c.height, m = f + c.height > u - d && p >= d ? p : f, h = getComputedStyle(n).direction === "rtl", g = h ? o.right - c.width : o.left, _ = h ? o.left : o.right - c.width, v = r === "center" ? o.left + (o.width - c.width) / 2 : r === "end" ? _ : g;
+	s.top = `${m}px`, s.left = `${Math.max(d, Math.min(v, l - c.width - d))}px`;
+}
+//#endregion
+export { o as anchorFor, s as anchoredStyle, u as useAnchorFallback, a as useAnchoredPopup };

package/dist/utils/useHydrated.js

@@ -0,0 +1,9 @@
+"use client";
+import { useSyncExternalStore as e } from "react";
+//#region packages/utils/useHydrated.ts
+var t = () => () => {};
+function n() {
+	return e(t, () => !0, () => !1);
+}
+//#endregion
+export { n as useHydrated };

package/dist/utils/useVirtualList.js

@@ -0,0 +1,45 @@
+"use client";
+import { useLayoutEffect as e, useState as t } from "react";
+//#region packages/utils/useVirtualList.ts
+function n({ count: n, itemHeight: r, scrollRef: i, overscan: a = 6 }) {
+	let o = (e, t) => {
+		let i = t || r * 10;
+		return {
+			first: Math.max(0, Math.floor(e / r) - a),
+			last: Math.min(n, Math.ceil((e + i) / r) + a)
+		};
+	}, [s, c] = t(() => o(0, 0));
+	e(() => {
+		let e = i.current;
+		if (!e) return;
+		let t = () => {
+			let t = o(e.scrollTop, e.clientHeight);
+			c((e) => e.first === t.first && e.last === t.last ? e : t);
+		};
+		t(), e.addEventListener("scroll", t, { passive: !0 });
+		let n = typeof ResizeObserver > "u" ? null : new ResizeObserver(t);
+		return n?.observe(e), () => {
+			e.removeEventListener("scroll", t), n?.disconnect();
+		};
+	}, [
+		i,
+		n,
+		r,
+		a
+	]);
+	let l = Math.min(s.first, n), u = Math.min(s.last, n), d = [];
+	for (let e = l; e < u; e++) d.push({
+		index: e,
+		start: e * r,
+		size: r
+	});
+	let f = n * r;
+	return {
+		items: d,
+		totalSize: f,
+		paddingTop: d.length ? d[0].start : 0,
+		paddingBottom: d.length ? f - (d[d.length - 1].start + r) : 0
+	};
+}
+//#endregion
+export { n as useVirtualList };

package/dist/variables.css

@@ -48,6 +48,19 @@
     --toast-shadow: 0 18px 50px -20px oklch(0 0 0 / 0.8);
     --backdrop-scrim: oklch(0 0 0 / 0.5);
     --topo-strength: 0.55;
+    /*
+     * Chart series, in this order (full colours, not L C H triplets). Validated as a
+     * set on the dark and light surfaces: lightness band, chroma, colour-blind
+     * separation of neighbours, contrast. Assign in order; never cycle past 8.
+     */
+    --chart-1: #3987e5;
+    --chart-2: #d95926;
+    --chart-3: #199e70;
+    --chart-4: #c98500;
+    --chart-5: #d55181;
+    --chart-6: #008300;
+    --chart-7: #9085e9;
+    --chart-8: #e66767;
     --mx: -9999px; /* pointer position, set by <Backdrop> */
     --my: -9999px;
 }
@@ -87,4 +100,13 @@
     --toast-shadow: 0 18px 50px -20px oklch(0.3 0.05 295 / 0.35);
     --backdrop-scrim: oklch(0.21 0.02 295 / 0.3);
     --topo-strength: 0.55;
+
+    --chart-1: #2a78d6;
+    --chart-2: #eb6834;
+    --chart-3: #1baf7a;
+    --chart-4: #eda100;
+    --chart-5: #e87ba4;
+    --chart-6: #008300;
+    --chart-7: #4a3aa7;
+    --chart-8: #e34948;
 }