@rinzai/zen 0.5.0 → 0.6.0

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

@@ -24,9 +24,15 @@ export declare function useAnchoredPopup<T extends HTMLElement = HTMLDivElement>
     };
     popupRef: import('react').RefObject<T | null>;
 };
+/**
+ * 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. For parts that take
+ * their own `align`/`offset` (PopoverContent, MenuContent).
+ */
+export declare function anchoredStyle(id: string, { align, offset, matchWidth }?: Omit<AnchoredPopupOptions, 'onOpenChange'>): CSSProperties;
 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). */

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,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;;;;;;;;;EAWxD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CACzB,EAAE,EAAE,MAAM,EACV,EAAE,KAAe,EAAE,MAAU,EAAE,UAAkB,EAAE,GAAE,IAAI,CAAC,oBAAoB,EAAE,cAAc,CAAM,GACrG,aAAa,CAcf;AAED,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,63 @@
+"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: s = 4, matchWidth: c = !1, onOpenChange: l } = {}) {
+	let u = `zen__popup-${n().replace(/[^\w-]/g, "")}`, d = r(null), [f, p] = i(!1), m = r(l);
+	m.current = l;
+	let h = r(!1), g = e((e) => {
+		p(e), h.current !== e && (h.current = e, m.current?.(e));
+	}, []), _ = e((e) => {
+		let t = d.current;
+		if (t) {
+			try {
+				e ? t.showPopover?.() : t.hidePopover?.();
+			} catch {}
+			g(e);
+		}
+	}, [g]);
+	return t(() => {
+		let e = d.current;
+		if (!e) return;
+		let t = (e) => g(e.newState === "open");
+		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
+	}, [g]), {
+		id: u,
+		open: f,
+		setOpen: _,
+		triggerProps: {
+			popoverTarget: u,
+			"aria-expanded": f,
+			"aria-controls": u,
+			"data-popup-open": f || void 0,
+			style: { anchorName: `--${u}` }
+		},
+		popupProps: {
+			ref: d,
+			id: u,
+			popover: "auto",
+			style: o(u, {
+				align: a,
+				offset: s,
+				matchWidth: c
+			})
+		},
+		popupRef: d
+	};
+}
+function o(e, { align: t = "start", offset: n = 4, matchWidth: r = !1 } = {}) {
+	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 && { minWidth: "anchor-size(width)" }
+	};
+}
+//#endregion
+export { o as anchoredStyle, 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;
 }