@cascivo/react 0.4.3 → 0.5.1

package/dist/alert-dialog/alert-dialog.js

@@ -1,63 +1,63 @@
 "use client";
 
 import e from "./alert-dialog.module.js";
-import { useSignal as t, useSignalEffect as n } from "@cascivo/core";
-import { builtin as r, t as i } from "@cascivo/i18n";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useRef as s } from "react";
+import { useId as t, useSignal as n, useSignalEffect as r } from "@cascivo/core";
+import { builtin as i, t as a } from "@cascivo/i18n";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useRef as c } from "react";
 //#region ../components/src/alert-dialog/alert-dialog.tsx
-function c({ open: c, title: l, description: u, onConfirm: d, onCancel: f, labels: p, variant: m = "default" }) {
-	let h = s(null), g = t(c);
-	g.value = c;
-	let _ = s(null), v = s(f);
-	v.current = f;
-	let y = s(d);
-	return y.current = d, n(() => {
-		let e = h.current;
-		if (e) if (g.value) {
+function l({ open: l, title: u, description: d, onConfirm: f, onCancel: p, labels: m, variant: h = "default" }) {
+	let g = c(null), _ = t("cascivo-alert-dialog-title"), v = t("cascivo-alert-dialog-desc"), y = n(l);
+	y.value = l;
+	let b = c(null), x = c(p);
+	x.current = p;
+	let S = c(f);
+	return S.current = f, r(() => {
+		let e = g.current;
+		if (e) if (y.value) {
 			try {
 				e.showPopover();
 			} catch {}
-			requestAnimationFrame(() => _.current?.focus());
+			requestAnimationFrame(() => b.current?.focus());
 		} else try {
 			e.hidePopover();
 		} catch {}
-	}), /* @__PURE__ */ a("div", {
-		ref: h,
+	}), /* @__PURE__ */ o("div", {
+		ref: g,
 		popover: "manual",
 		role: "alertdialog",
 		"aria-modal": "true",
-		"aria-labelledby": "cascade-alert-dialog-title",
-		"aria-describedby": "cascade-alert-dialog-desc",
-		"data-state": c ? "open" : "closed",
-		"data-variant": m,
+		"aria-labelledby": _,
+		"aria-describedby": v,
+		"data-state": l ? "open" : "closed",
+		"data-variant": h,
 		className: e.dialog,
-		children: /* @__PURE__ */ o("div", {
+		children: /* @__PURE__ */ s("div", {
 			className: e.content,
 			children: [
-				/* @__PURE__ */ a("p", {
-					id: "cascade-alert-dialog-title",
+				/* @__PURE__ */ o("p", {
+					id: _,
 					className: e.title,
-					children: l
+					children: u
 				}),
-				/* @__PURE__ */ a("p", {
-					id: "cascade-alert-dialog-desc",
+				/* @__PURE__ */ o("p", {
+					id: v,
 					className: e.description,
-					children: u
+					children: d
 				}),
-				/* @__PURE__ */ o("div", {
+				/* @__PURE__ */ s("div", {
 					className: e.actions,
-					children: [/* @__PURE__ */ a("button", {
-						ref: _,
+					children: [/* @__PURE__ */ o("button", {
+						ref: b,
 						type: "button",
 						className: e.cancel,
-						onClick: () => v.current(),
-						children: p?.cancel ?? i(r.alertDialog.cancel)
-					}), /* @__PURE__ */ a("button", {
+						onClick: () => x.current(),
+						children: m?.cancel ?? a(i.alertDialog.cancel)
+					}), /* @__PURE__ */ o("button", {
 						type: "button",
 						className: e.confirm,
-						onClick: () => y.current(),
-						children: p?.confirm ?? i(r.alertDialog.confirm)
+						onClick: () => S.current(),
+						children: m?.confirm ?? a(i.alertDialog.confirm)
 					})]
 				})
 			]
@@ -65,4 +65,4 @@ function c({ open: c, title: l, description: u, onConfirm: d, onCancel: f, label
 	});
 }
 //#endregion
-export { c as AlertDialog };
+export { l as AlertDialog };

package/dist/context-menu/context-menu.js

@@ -7,13 +7,36 @@ import { useRef as o } from "react";
 //#region ../components/src/context-menu/context-menu.tsx
 function s({ children: s }) {
 	r();
-	let c = o(null), l = o(null), u = t(!1);
+	let c = o(null), l = o(null), u = t(!1), d = () => {
+		let e = c.current;
+		return e ? Array.from(e.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])")) : [];
+	}, f = (e) => {
+		let t = d();
+		t.length !== 0 && t[e(t, t.indexOf(document.activeElement))]?.focus();
+	}, p = (e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), f((e, t) => t < 0 ? 0 : (t + 1) % e.length);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), f((e, t) => t < 0 ? e.length - 1 : (t - 1 + e.length) % e.length);
+				break;
+			case "Home":
+				e.preventDefault(), f(() => 0);
+				break;
+			case "End":
+				e.preventDefault(), f((e) => e.length - 1);
+				break;
+		}
+	};
 	n(() => {
 		let e = c.current;
-		if (e) if (u.value) try {
-			e.showPopover();
-		} catch {}
-		else try {
+		if (e) if (u.value) {
+			try {
+				e.showPopover();
+			} catch {}
+			d()[0]?.focus();
+		} else try {
 			e.hidePopover();
 		} catch {}
 	}), n(() => {
@@ -24,34 +47,40 @@ function s({ children: s }) {
 		};
 		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
 	});
-	function d(e) {
+	function m(e) {
 		e.preventDefault();
 		let t = l.current;
 		t && (t.style.setProperty("--cascivo-context-x", `${e.clientX}px`), t.style.setProperty("--cascivo-context-y", `${e.clientY}px`), u.value = !0);
 	}
-	let [f, ...p] = Array.isArray(s) ? s : [s];
+	let [h, ...g] = Array.isArray(s) ? s : [s];
 	return /* @__PURE__ */ a("div", {
 		ref: l,
-		onContextMenu: d,
+		onContextMenu: m,
 		className: e.wrapper,
-		children: [f, /* @__PURE__ */ i("div", {
+		children: [h, /* @__PURE__ */ i("div", {
 			ref: c,
 			popover: "auto",
 			role: "menu",
 			"data-state": u.value ? "open" : "closed",
 			className: e.menu,
-			children: p
+			onKeyDown: p,
+			children: g
 		})]
 	});
 }
 function c({ children: t, onSelect: n, disabled: r }) {
+	function a() {
+		r || n();
+	}
+	function o(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), a());
+	}
 	return /* @__PURE__ */ i("div", {
 		role: "menuitem",
 		tabIndex: r ? -1 : 0,
 		"aria-disabled": r,
-		onClick: () => {
-			r || n();
-		},
+		onClick: a,
+		onKeyDown: o,
 		className: e.item,
 		children: t
 	});

package/dist/index.d.ts

@@ -1866,12 +1866,14 @@ declare function CopyButton({
   className,
   ...props
 }: CopyButtonProps): import("react").JSX.Element;
-interface StatProps extends HTMLAttributes<HTMLDivElement> {
+interface StatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   label: string;
   value: string | number;
   delta?: string;
   trend?: 'up' | 'down' | 'flat';
   helpText?: string;
+  /** Trailing visual, e.g. a `Sparkline` from `@cascivo/charts`. Purely decorative — mark it `aria-hidden` yourself if it duplicates the value/delta already announced. */
+  visual?: ReactNode;
 }
 declare function Stat({
   label,
@@ -1879,6 +1881,7 @@ declare function Stat({
   delta,
   trend,
   helpText,
+  visual,
   className,
   ...props
 }: StatProps): import("react").JSX.Element;

package/dist/menu/menu.js

@@ -2,80 +2,105 @@
 
 import { usePopover as e } from "../popover/use-popover.js";
 import t from "./menu.module.js";
-import { useSignalEffect as n, useSignals as r } from "@cascivo/core";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { createContext as o } from "react";
+import { useSignalEffect as n, useSignals as r, useTypeahead as i } from "@cascivo/core";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createContext as s } from "react";
 //#region ../components/src/menu/menu.tsx
-var s = o(null);
-function c({ ctx: e, children: a }) {
+var c = s(null);
+function l({ ctx: e, children: o }) {
 	r();
-	let { popoverRef: o, anchorName: s, isOpen: c } = e;
+	let { popoverRef: s, anchorName: c, isOpen: l } = e, u = () => {
+		let e = s.current;
+		return e ? Array.from(e.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])")) : [];
+	}, d = (e) => {
+		let t = u();
+		t.length !== 0 && t[e(t, t.indexOf(document.activeElement))]?.focus();
+	}, f = i({ onMatch: (e) => {
+		u().find((t) => (t.textContent ?? "").trim().toLowerCase().startsWith(e))?.focus();
+	} });
 	return n(() => {
-		if (!c.value) return;
-		let e = o.current;
+		if (!l.value) return;
+		let e = s.current;
 		e && e.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])")?.focus();
-	}), /* @__PURE__ */ i("div", {
-		ref: o,
+	}), /* @__PURE__ */ a("div", {
+		ref: s,
 		popover: "auto",
 		role: "menu",
-		"data-state": c.value ? "open" : "closed",
-		style: { positionAnchor: s },
+		"data-state": l.value ? "open" : "closed",
+		style: { positionAnchor: c },
 		className: t.panel,
-		children: a
+		onKeyDown: (e) => {
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), d((e, t) => t < 0 ? 0 : (t + 1) % e.length);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), d((e, t) => t < 0 ? e.length - 1 : (t - 1 + e.length) % e.length);
+					break;
+				case "Home":
+					e.preventDefault(), d(() => 0);
+					break;
+				case "End":
+					e.preventDefault(), d((e) => e.length - 1);
+					break;
+				default: f.onKeyDown(e);
+			}
+		},
+		children: o
 	});
 }
-function l({ children: e }) {
-	return /* @__PURE__ */ i(s.Consumer, { children: (t) => {
+function u({ children: e }) {
+	return /* @__PURE__ */ a(c.Consumer, { children: (t) => {
 		if (!t) throw Error("MenuPanel must be inside <Menu>");
-		return /* @__PURE__ */ i(c, {
+		return /* @__PURE__ */ a(l, {
 			ctx: t,
 			children: e
 		});
 	} });
 }
-function u({ children: t }) {
-	let n = e(), [r, ...o] = Array.isArray(t) ? t : [t];
-	return /* @__PURE__ */ a(s.Provider, {
+function d({ children: t }) {
+	let n = e(), [r, ...i] = Array.isArray(t) ? t : [t];
+	return /* @__PURE__ */ o(c.Provider, {
 		value: n,
-		children: [r, /* @__PURE__ */ i(l, { children: o })]
+		children: [r, /* @__PURE__ */ a(u, { children: i })]
 	});
 }
-function d({ ctx: e, children: n, "aria-label": a }) {
+function f({ ctx: e, children: n, "aria-label": i }) {
 	r();
 	let { triggerRef: o, toggle: s, anchorName: c, isOpen: l } = e;
-	return /* @__PURE__ */ i("button", {
+	return /* @__PURE__ */ a("button", {
 		ref: o,
 		type: "button",
 		"aria-haspopup": "menu",
 		"aria-expanded": l.value,
-		"aria-label": a,
+		"aria-label": i,
 		style: { anchorName: c },
 		onClick: s,
 		className: t.trigger,
 		children: n
 	});
 }
-function f({ children: e, "aria-label": t }) {
-	return /* @__PURE__ */ i(s.Consumer, { children: (n) => {
+function p({ children: e, "aria-label": t }) {
+	return /* @__PURE__ */ a(c.Consumer, { children: (n) => {
 		if (!n) throw Error("MenuTrigger must be inside <Menu>");
-		return /* @__PURE__ */ i(d, {
+		return /* @__PURE__ */ a(f, {
 			ctx: n,
 			...t !== void 0 && { "aria-label": t },
 			children: e
 		});
 	} });
 }
-function p({ children: e, onSelect: n, disabled: r }) {
-	return /* @__PURE__ */ i(s.Consumer, { children: (a) => {
-		if (!a) throw Error("MenuItem must be inside <Menu>");
-		let { close: o } = a;
+function m({ children: e, onSelect: n, disabled: r }) {
+	return /* @__PURE__ */ a(c.Consumer, { children: (i) => {
+		if (!i) throw Error("MenuItem must be inside <Menu>");
+		let { close: o } = i;
 		function s() {
 			r || (n(), o());
 		}
 		function c(e) {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), s()), e.key === "ArrowDown" && (e.preventDefault(), e.currentTarget.nextElementSibling?.focus()), e.key === "ArrowUp" && (e.preventDefault(), e.currentTarget.previousElementSibling?.focus());
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), s());
 		}
-		return /* @__PURE__ */ i("div", {
+		return /* @__PURE__ */ a("div", {
 			role: "menuitem",
 			tabIndex: r ? -1 : 0,
 			"aria-disabled": r,
@@ -86,11 +111,11 @@ function p({ children: e, onSelect: n, disabled: r }) {
 		});
 	} });
 }
-function m() {
-	return /* @__PURE__ */ i("div", {
+function h() {
+	return /* @__PURE__ */ a("div", {
 		role: "separator",
 		className: t.separator
 	});
 }
 //#endregion
-export { u as Menu, p as MenuItem, m as MenuSeparator, f as MenuTrigger };
+export { d as Menu, m as MenuItem, h as MenuSeparator, p as MenuTrigger };

package/dist/modal/modal.js

@@ -1,73 +1,70 @@
 "use client";
 
 import e from "./modal.module.js";
-import { cn as t, useDraggable as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
-import { builtin as o, t as s } from "@cascivo/i18n";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useRef as u } from "react";
+import { cn as t, useDraggable as n, useId as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { builtin as s, t as c } from "@cascivo/i18n";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useRef as d } from "react";
 //#region ../components/src/modal/modal.tsx
-function d({ open: d = !1, onClose: f, title: p, description: m, children: h, className: g, size: _ = "md", draggable: v = !1 }) {
-	a();
-	let y = u(null), b = u(f);
-	b.current = f;
-	let { handleRef: x, offset: S } = n({ isDisabled: !v }), C = v ? {
-		"--modal-x": `${S.value.x}px`,
-		"--modal-y": `${S.value.y}px`
-	} : void 0, w = r(d);
-	return w.value = d, i(() => {
-		let e = y.current;
-		e && (w.value ? e.open || e.showModal() : e.open && e.close());
-	}), i(() => {
-		let e = y.current;
+function f({ open: f = !1, onClose: p, title: m, description: h, children: g, className: _, size: v = "md", draggable: y = !1 }) {
+	o();
+	let b = d(null), x = d(p);
+	x.current = p;
+	let S = r("cascivo-modal-title"), C = r("cascivo-modal-desc"), { handleRef: w, offset: T } = n({ isDisabled: !y }), E = y ? {
+		"--modal-x": `${T.value.x}px`,
+		"--modal-y": `${T.value.y}px`
+	} : void 0, D = i(f);
+	return D.value = f, a(() => {
+		let e = b.current;
+		e && (D.value ? e.open || e.showModal() : e.open && e.close());
+	}), a(() => {
+		let e = b.current;
 		if (!e) return;
-		let t = () => b.current?.();
+		let t = () => x.current?.();
 		return e.addEventListener("close", t), () => e.removeEventListener("close", t);
-	}), /* @__PURE__ */ c("dialog", {
-		ref: y,
-		"data-size": _,
-		"data-draggable": v || void 0,
-		className: t(e.dialog, g),
-		style: C,
+	}), /* @__PURE__ */ l("dialog", {
+		ref: b,
+		"data-size": v,
+		"data-draggable": y || void 0,
+		className: t(e.dialog, _),
+		style: E,
 		onClick: (e) => {
-			e.target === y.current && y.current?.close();
+			e.target === b.current && b.current?.close();
 		},
-		onKeyDown: (e) => {
-			e.key === "Escape" && (e.preventDefault(), y.current?.close());
-		},
-		"aria-labelledby": p ? "cascade-modal-title" : void 0,
-		"aria-describedby": m ? "cascade-modal-desc" : void 0,
-		children: /* @__PURE__ */ l("div", {
+		"aria-labelledby": m ? S : void 0,
+		"aria-describedby": h ? C : void 0,
+		children: /* @__PURE__ */ u("div", {
 			className: e.panel,
 			children: [
-				(p || f) && /* @__PURE__ */ l("div", {
+				(m || p) && /* @__PURE__ */ u("div", {
 					className: e.header,
-					ref: v ? (e) => {
-						x.current = e;
+					ref: y ? (e) => {
+						w.current = e;
 					} : void 0,
-					children: [p && /* @__PURE__ */ c("h2", {
-						id: "cascade-modal-title",
+					children: [m && /* @__PURE__ */ l("h2", {
+						id: S,
 						className: e.title,
-						children: p
-					}), f && /* @__PURE__ */ c("button", {
+						children: m
+					}), p && /* @__PURE__ */ l("button", {
 						type: "button",
 						className: e.close,
-						onClick: () => y.current?.close(),
-						"aria-label": s(o.modal.close),
+						onClick: () => b.current?.close(),
+						"aria-label": c(s.modal.close),
 						children: "✕"
 					})]
 				}),
-				m && /* @__PURE__ */ c("p", {
-					id: "cascade-modal-desc",
+				h && /* @__PURE__ */ l("p", {
+					id: C,
 					className: e.description,
-					children: m
+					children: h
 				}),
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ l("div", {
 					className: e.body,
-					children: h
+					children: g
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { d as Modal };
+export { f as Modal };

package/dist/stat/stat.css

@@ -1 +1 @@
-@layer cascivo.component{._stat_119kx_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._label_119kx_9{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._value_119kx_15{font-size:var(--cascivo-text-2xl);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);font-variant-numeric:tabular-nums}._delta_119kx_23{align-items:center;gap:var(--cascivo-space-1);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);font-variant-numeric:tabular-nums;display:inline-flex}._delta_119kx_23[data-trend=up]{color:var(--cascivo-color-success-foreground)}._delta_119kx_23[data-trend=down]{color:var(--cascivo-color-destructive-foreground)}._delta_119kx_23[data-trend=flat]{color:var(--cascivo-color-text-subtle)}._arrow_119kx_44{font-size:var(--cascivo-text-xs);line-height:1}._help_119kx_49{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}}
+@layer cascivo.component{._stat_r3v5x_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._label_r3v5x_9{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._value_r3v5x_15{font-size:var(--cascivo-text-2xl);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);font-variant-numeric:tabular-nums}._delta_r3v5x_23{align-items:center;gap:var(--cascivo-space-1);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);font-variant-numeric:tabular-nums;display:inline-flex}._delta_r3v5x_23[data-trend=up]{color:var(--cascivo-color-success-foreground)}._delta_r3v5x_23[data-trend=down]{color:var(--cascivo-color-destructive-foreground)}._delta_r3v5x_23[data-trend=flat]{color:var(--cascivo-color-text-subtle)}._arrow_r3v5x_44{font-size:var(--cascivo-text-xs);line-height:1}._help_r3v5x_49{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._visual_r3v5x_55{margin-block-start:var(--cascivo-space-1)}}

package/dist/stat/stat.js

@@ -4,10 +4,10 @@ import e from "./stat.module.js";
 import { cn as t } from "@cascivo/core";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region ../components/src/stat/stat.tsx
-function i({ label: i, value: a, delta: o, trend: s = "flat", helpText: c, className: l, ...u }) {
+function i({ label: i, value: a, delta: o, trend: s = "flat", helpText: c, visual: l, className: u, ...d }) {
 	return /* @__PURE__ */ r("div", {
-		className: t(e.stat, l),
-		...u,
+		className: t(e.stat, u),
+		...d,
 		children: [
 			/* @__PURE__ */ n("span", {
 				className: e.label,
@@ -29,6 +29,10 @@ function i({ label: i, value: a, delta: o, trend: s = "flat", helpText: c, class
 			c && /* @__PURE__ */ n("span", {
 				className: e.help,
 				children: c
+			}),
+			l && /* @__PURE__ */ n("span", {
+				className: e.visual,
+				children: l
 			})
 		]
 	});

package/dist/stat/stat.module.js

@@ -2,12 +2,13 @@
 
 import './stat.css';
 var e = {
-	stat: "_stat_119kx_2",
-	label: "_label_119kx_9",
-	value: "_value_119kx_15",
-	delta: "_delta_119kx_23",
-	arrow: "_arrow_119kx_44",
-	help: "_help_119kx_49"
+	stat: "_stat_r3v5x_2",
+	label: "_label_r3v5x_9",
+	value: "_value_r3v5x_15",
+	delta: "_delta_r3v5x_23",
+	arrow: "_arrow_r3v5x_44",
+	help: "_help_r3v5x_49",
+	visual: "_visual_r3v5x_55"
 };
 //#endregion
 export { e as default };

package/dist/styles.css

@@ -1,3 +1,32 @@
+/* packages/tokens/src/layers.css */
+/* cascivo — canonical @layer order (single source of truth). */
+/*
+ * This statement is the ONE authoritative declaration of cascivo's cascade-layer
+ * order. Every entry path emits it first (via @import of this file, or — for the
+ * @cascivo/react aggregate — by prepending its contents), and identical @layer
+ * statements are idempotent, so the order is deterministic no matter which
+ * cascivo stylesheet a consumer loads first.
+ *
+ * Ordered lowest-priority → highest-priority:
+ *
+ *   cascivo.reset      consumer reset (box-sizing, margin/padding zeroing) — the floor
+ *   cascivo.base       minimal html font/color reset (@cascivo/themes/base.css)
+ *   cascivo.tokens     primitive design tokens (@cascivo/tokens)
+ *   cascivo.component  component + layout styles
+ *   cascivo.theme      semantic token values per [data-theme] (@cascivo/themes/*)
+ *   cascivo.override   consumer escape hatch — beats tokens, components, and themes
+ *
+ * theme > component matches the CLI scaffold and every example app: themes own
+ * the semantic tier, so a theme always wins over component defaults. cascivo.override
+ * sits on top: put brand/one-off overrides in `@layer cascivo.override { … }` and
+ * they beat everything cascivo ships — with no `:root:not([data-theme])` specificity
+ * fight. App-local sublayers (cascivo.example, cascivo.blocks.*) are not shipped by
+ * any package; insert them between cascivo.theme and cascivo.override.
+ *
+ * Guard: scripts/checks/layer-order.test.ts asserts every shipped/scaffolded
+ * @layer statement is an ordered subsequence of this one.
+ */
+@layer cascivo.reset, cascivo.base, cascivo.tokens, cascivo.component, cascivo.theme, cascivo.override;
 @layer cascivo.component{._accordion_9ch4s_2{border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);flex-direction:column;display:flex;overflow:hidden}._item_9ch4s_10:not(:last-child){border-block-end:1px solid var(--cascivo-color-border)}._heading_9ch4s_16{font-size:inherit;font-weight:inherit;margin:0}._trigger_9ch4s_22{justify-content:space-between;align-items:center;gap:var(--cascivo-space-3);inline-size:100%;padding:var(--cascivo-space-4);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);text-align:start;color:var(--cascivo-color-text);cursor:pointer;background:0 0;border:none;display:flex}._trigger_9ch4s_22:hover{background-color:var(--cascivo-color-bg-subtle)}._trigger_9ch4s_22:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._indicator_9ch4s_48{block-size:.75rem;inline-size:.75rem;transition:rotate var(--cascivo-duration-200) var(--cascivo-ease-out);background-color:currentColor;flex-shrink:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat}._trigger_9ch4s_22[data-state=open] ._indicator_9ch4s_48{rotate:180deg}._content_9ch4s_62{visibility:hidden;color:var(--cascivo-color-text);transition:grid-template-rows var(--cascivo-duration-200) var(--cascivo-ease-out), visibility var(--cascivo-duration-200) var(--cascivo-ease-out);grid-template-rows:0fr;display:grid}._content_9ch4s_62[data-state=open]{visibility:visible;grid-template-rows:1fr}._contentInner_9ch4s_77{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);overflow:hidden}._content_9ch4s_62[data-state=open] ._contentInner_9ch4s_77{padding-inline:var(--cascivo-space-4);padding-block-end:var(--cascivo-space-4)}}@media (forced-colors:active){._accordion_9ch4s_2{border:1px solid buttontext}._trigger_9ch4s_22:focus-visible{outline-offset:2px;outline:2px solid highlight}}
 
 @layer cascivo.component{._overlay_17irl_2{z-index:var(--cascivo-z-overlay,50);padding:var(--cascivo-space-3);opacity:1;transition:opacity var(--cascivo-motion-enter);background-color:#0006;flex-direction:column;justify-content:flex-end;align-items:center;padding-block-end:calc(var(--cascivo-space-3) + env(safe-area-inset-bottom,0px));display:flex;position:fixed;inset:0}._overlay_17irl_2[data-state=closed]{opacity:0;transition:opacity var(--cascivo-motion-exit)}@starting-style{._overlay_17irl_2[data-state=open]{opacity:0}}._sheet_17irl_28{gap:var(--cascivo-space-2);inline-size:100%;max-inline-size:32rem;transition:translate var(--cascivo-motion-enter);flex-direction:column;display:flex;translate:0}._overlay_17irl_2[data-state=closed] ._sheet_17irl_28{transition:translate var(--cascivo-motion-exit);translate:0 100%}@starting-style{._overlay_17irl_2[data-state=open] ._sheet_17irl_28{translate:0 100%}}._group_17irl_50{background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);flex-direction:column;display:flex;overflow:hidden}._heading_17irl_60{padding:var(--cascivo-space-4) var(--cascivo-space-6);text-align:center;border-block-end:1px solid var(--cascivo-color-border)}._title_17irl_66{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);margin:0}._description_17irl_73{margin:var(--cascivo-space-1) 0 0;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle)}._item_17irl_79{min-block-size:3rem;inline-size:100%;padding:var(--cascivo-space-3) var(--cascivo-space-6);font-size:var(--cascivo-text-base);color:var(--cascivo-color-accent);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex}._item_17irl_79+._item_17irl_79{border-block-start:1px solid var(--cascivo-color-border)}._item_17irl_79:hover{background-color:var(--cascivo-color-bg-subtle)}._item_17irl_79:focus-visible{box-shadow:var(--cascivo-focus-ring);z-index:1;outline:none;position:relative}._item_17irl_79[aria-disabled=true]{color:var(--cascivo-color-text-muted);cursor:not-allowed}._item_17irl_79[data-destructive]{color:var(--cascivo-color-destructive)}._cancel_17irl_119{font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}@media (prefers-reduced-motion:reduce){._sheet_17irl_28{transition:none}}}
@@ -200,7 +229,7 @@
 /*$vite$:1*/
 @layer cascivo.component{._stack_2ay4v_2{isolation:isolate;grid-template-areas:"stack";display:grid}._layer_2ay4v_8{transform:translate(calc(var(--cascivo-stack-index,0) * var(--cascivo-stack-offset,4px)), calc(var(--cascivo-stack-index,0) * var(--cascivo-stack-offset,4px)));z-index:calc(10 - var(--cascivo-stack-index,0));grid-area:stack}}
 /*$vite$:1*/
-@layer cascivo.component{._stat_119kx_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._label_119kx_9{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._value_119kx_15{font-size:var(--cascivo-text-2xl);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);font-variant-numeric:tabular-nums}._delta_119kx_23{align-items:center;gap:var(--cascivo-space-1);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);font-variant-numeric:tabular-nums;display:inline-flex}._delta_119kx_23[data-trend=up]{color:var(--cascivo-color-success-foreground)}._delta_119kx_23[data-trend=down]{color:var(--cascivo-color-destructive-foreground)}._delta_119kx_23[data-trend=flat]{color:var(--cascivo-color-text-subtle)}._arrow_119kx_44{font-size:var(--cascivo-text-xs);line-height:1}._help_119kx_49{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}}
+@layer cascivo.component{._stat_r3v5x_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._label_r3v5x_9{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._value_r3v5x_15{font-size:var(--cascivo-text-2xl);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);font-variant-numeric:tabular-nums}._delta_r3v5x_23{align-items:center;gap:var(--cascivo-space-1);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);font-variant-numeric:tabular-nums;display:inline-flex}._delta_r3v5x_23[data-trend=up]{color:var(--cascivo-color-success-foreground)}._delta_r3v5x_23[data-trend=down]{color:var(--cascivo-color-destructive-foreground)}._delta_r3v5x_23[data-trend=flat]{color:var(--cascivo-color-text-subtle)}._arrow_r3v5x_44{font-size:var(--cascivo-text-xs);line-height:1}._help_r3v5x_49{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-tight)}._visual_r3v5x_55{margin-block-start:var(--cascivo-space-1)}}
 /*$vite$:1*/
 @layer cascivo.component{._status_u4gep_2{align-items:center;gap:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);display:inline-flex}._status_u4gep_2[data-status=success] ._dot_u4gep_11{background-color:var(--cascivo-color-success)}._status_u4gep_2[data-status=warning] ._dot_u4gep_11{background-color:var(--cascivo-color-warning)}._status_u4gep_2[data-status=error] ._dot_u4gep_11{background-color:var(--cascivo-color-error)}._status_u4gep_2[data-status=info] ._dot_u4gep_11{background-color:var(--cascivo-color-info)}._status_u4gep_2[data-status=neutral] ._dot_u4gep_11{background-color:var(--cascivo-color-text-muted)}._dot_u4gep_11{border-radius:var(--cascivo-radius-full);flex-shrink:0;block-size:.5rem;inline-size:.5rem}@media (prefers-reduced-motion:no-preference){._status_u4gep_2[data-pulse] ._dot_u4gep_11{animation:_cascade-status-pulse_u4gep_1 2s var(--cascivo-ease-in-out) infinite}}@keyframes _cascade-status-pulse_u4gep_1{0%,to{opacity:1}50%{opacity:.4}}}
 /*$vite$:1*/

package/dist/tooltip/tooltip.js

@@ -1,9 +1,9 @@
 "use client";
 
 import e from "./tooltip.module.js";
-import { createMachine as t, useMachine as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { cloneElement as s, useId as c, useRef as l } from "react";
+import { createMachine as t, useId as n, useMachine as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { cloneElement as c, useRef as l } from "react";
 //#region ../components/src/tooltip/tooltip.tsx
 var u = t({
 	initial: "hidden",
@@ -13,18 +13,18 @@ var u = t({
 	}
 });
 function d({ content: t, placement: d = "top", children: f, delay: p = 200 }) {
-	i();
-	let [m, h] = n(u), g = c(), _ = l(`t${Math.random().toString(36).slice(2)}`), v = l(void 0), y = l(null), b = m.value === "visible", x = () => {
+	a();
+	let [m, h] = r(u), g = n("cascivo-tooltip"), _ = n("cascivo-anchor"), v = l(void 0), y = l(null), b = m.value === "visible", x = () => {
 		clearTimeout(v.current), v.current = setTimeout(() => h("SHOW"), p);
 	}, S = () => {
 		clearTimeout(v.current), h("HIDE");
 	};
-	r(() => () => clearTimeout(v.current)), r(() => {
+	i(() => () => clearTimeout(v.current)), i(() => {
 		m.value === "visible" ? y.current?.showPopover() : y.current?.hidePopover();
 	});
 	let C = f, w = C.props, T = {
-		id: _.current,
-		style: { anchorName: `--tooltip-${_.current}` },
+		id: _,
+		style: { anchorName: `--tooltip-${_}` },
 		onMouseEnter: (e) => {
 			w.onMouseEnter?.(e), x();
 		},
@@ -39,16 +39,16 @@ function d({ content: t, placement: d = "top", children: f, delay: p = 200 }) {
 		},
 		"aria-describedby": b ? g : w["aria-describedby"]
 	};
-	return /* @__PURE__ */ o("span", {
+	return /* @__PURE__ */ s("span", {
 		className: e.root,
-		children: [s(C, T), /* @__PURE__ */ a("span", {
+		children: [c(C, T), /* @__PURE__ */ o("span", {
 			ref: y,
 			popover: "manual",
 			role: "tooltip",
 			id: g,
 			"data-placement": d,
 			"data-state": b ? "visible" : "hidden",
-			"data-anchor": `--tooltip-${_.current}`,
+			"data-anchor": `--tooltip-${_}`,
 			className: e.tooltip,
 			children: t
 		})]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/react",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "private": false,
   "description": "Prebuilt cascivo design system components — use without copying source",
   "keywords": [
@@ -44,8 +44,8 @@
     "provenance": true
   },
   "dependencies": {
-    "@cascivo/core": "^0.2.6",
-    "@cascivo/i18n": "^0.2.3"
+    "@cascivo/core": "^0.3.1",
+    "@cascivo/i18n": "^0.2.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",