@nocoo/basalt 2.0.2 → 2.1.0

package/dist/styles/tailwind.css

@@ -1,4 +1,8 @@
 @import "./tokens.css";
+@import "./base.css";
+
+/* Library variants follow ThemeProvider without changing the application's dark variant. */
+@custom-variant basalt-dark (&:where(.dark, .dark *, [data-mode="dark"], [data-mode="dark"] *));
 
 @theme inline {
 	--color-basalt-background: hsl(var(--basalt-background));
@@ -20,10 +24,13 @@
 	--color-basalt-destructive: hsl(var(--basalt-destructive));
 	--color-basalt-destructive-foreground: hsl(var(--basalt-destructive-foreground));
 	--color-basalt-info: hsl(var(--basalt-info));
+	--color-basalt-info-foreground: hsl(var(--basalt-info-foreground));
 	--color-basalt-info-tint: hsl(var(--basalt-info-tint));
 	--color-basalt-warning: hsl(var(--basalt-warning));
+	--color-basalt-warning-foreground: hsl(var(--basalt-warning-foreground));
 	--color-basalt-warning-tint: hsl(var(--basalt-warning-tint));
 	--color-basalt-danger: hsl(var(--basalt-danger));
+	--color-basalt-danger-foreground: hsl(var(--basalt-danger-foreground));
 	--color-basalt-danger-tint: hsl(var(--basalt-danger-tint));
 	--color-basalt-border: hsl(var(--basalt-border));
 	--color-basalt-input: hsl(var(--basalt-input));
@@ -52,6 +59,11 @@
 	--color-basalt-chart-22: hsl(var(--basalt-chart-22));
 	--color-basalt-chart-23: hsl(var(--basalt-chart-23));
 	--color-basalt-chart-24: hsl(var(--basalt-chart-24));
+	--color-basalt-badge-green-foreground: hsl(var(--basalt-badge-green-foreground));
+	--color-basalt-badge-teal: hsl(var(--basalt-badge-teal));
+	--color-basalt-badge-purple: hsl(var(--basalt-badge-purple));
+	--color-basalt-badge-teal-foreground: hsl(var(--basalt-badge-teal-foreground));
+	--color-basalt-badge-purple-foreground: hsl(var(--basalt-badge-purple-foreground));
 	--color-basalt-chart-axis: hsl(var(--basalt-chart-axis));
 	--color-basalt-chart-muted: hsl(var(--basalt-chart-muted));
 	--color-basalt-heatmap-green-1: hsl(var(--basalt-heatmap-green-1));
@@ -93,12 +105,14 @@
 	--animate-basalt-tab-in: basalt-tab-in 180ms ease-out;
 }
 
-.basalt-chart .recharts-wrapper :focus,
-.basalt-chart .recharts-wrapper :focus-visible,
-.basalt-chart .recharts-surface :focus,
-.basalt-chart .recharts-surface :focus-visible,
-.basalt-chart .recharts-sector:focus,
-.basalt-chart .recharts-rectangle:focus,
-.basalt-chart .recharts-layer:focus {
+.basalt-chart .recharts-sector:focus:not(:focus-visible),
+.basalt-chart .recharts-rectangle:focus:not(:focus-visible),
+.basalt-chart .recharts-layer:focus:not(:focus-visible),
+.basalt-chart .recharts-surface:focus:not(:focus-visible) {
 	outline: none;
 }
+
+.basalt-chart :focus-visible {
+	outline: 2px solid hsl(var(--basalt-ring));
+	outline-offset: 2px;
+}

package/dist/styles/tokens.css

@@ -10,23 +10,26 @@
 	--basalt-popover: 0 0% 100%;
 	--basalt-popover-foreground: 0 0% 12%;
 	--basalt-bright: 0 0% 100%;
-	--basalt-primary: 217 91% 60%;
+	--basalt-primary: 204 88% 32%;
 	--basalt-primary-foreground: 0 0% 100%;
 	--basalt-muted: 220 14% 92%;
-	--basalt-muted-foreground: 0 0% 45%;
+	--basalt-muted-foreground: 0 0% 40%;
 	--basalt-accent: 220 14% 92%;
 	--basalt-accent-foreground: 0 0% 12%;
-	--basalt-destructive: 0 72% 51%;
+	--basalt-destructive: 0 72% 49%;
 	--basalt-destructive-foreground: 0 0% 100%;
 	--basalt-info: 221 72% 38%;
+	--basalt-info-foreground: 0 0% 100%;
 	--basalt-info-tint: 217 80% 95%;
 	--basalt-warning: 28 72% 36%;
+	--basalt-warning-foreground: 0 0% 100%;
 	--basalt-warning-tint: 40 86% 95%;
 	--basalt-danger: 0 70% 40%;
+	--basalt-danger-foreground: 0 0% 100%;
 	--basalt-danger-tint: 0 78% 96%;
 	--basalt-border: 220 13% 88%;
 	--basalt-input: 220 13% 88%;
-	--basalt-ring: 217 91% 60%;
+	--basalt-ring: var(--basalt-primary);
 	--basalt-control-fill: hsl(var(--basalt-secondary));
 	--basalt-zebra-fill: hsl(var(--basalt-bright));
 	--basalt-radius: 0.75rem;
@@ -35,48 +38,72 @@
 	--basalt-radius-widget: 10px;
 	--basalt-font-sans: "Inter", system-ui, -apple-system, sans-serif;
 	--basalt-font-display: "DM Sans", system-ui, sans-serif;
-	--basalt-chart-1: 217 91% 60%;
-	--basalt-chart-2: 200 90% 55%;
-	--basalt-chart-3: 186 80% 45%;
-	--basalt-chart-4: 166 72% 44%;
-	--basalt-chart-5: 142 71% 45%;
-	--basalt-chart-6: 84 65% 46%;
-	--basalt-chart-7: 45 93% 47%;
-	--basalt-chart-8: 30 90% 55%;
-	--basalt-chart-9: 15 85% 52%;
-	--basalt-chart-10: 0 72% 51%;
-	--basalt-chart-11: 340 82% 55%;
-	--basalt-chart-12: 320 70% 55%;
-	--basalt-chart-13: 290 65% 55%;
-	--basalt-chart-14: 270 70% 60%;
-	--basalt-chart-15: 250 65% 58%;
-	--basalt-chart-16: 230 70% 56%;
-	--basalt-chart-17: 210 55% 50%;
-	--basalt-chart-18: 195 45% 55%;
-	--basalt-chart-19: 160 50% 50%;
-	--basalt-chart-20: 100 50% 48%;
-	--basalt-chart-21: 60 65% 45%;
-	--basalt-chart-22: 22 80% 50%;
-	--basalt-chart-23: 350 65% 50%;
-	--basalt-chart-24: 0 0% 25%;
+	/* Match the classic candy swatches; gray and preference ownership stay independent. */
+	--basalt-chart-blue: 204 88% 62%;
+	--basalt-chart-pink: 345 88% 72%;
+	--basalt-chart-green: 113 58% 62%;
+	--basalt-chart-yellow: 49 100% 69%;
+	--basalt-chart-pearl: 215 12% 48%;
+	--basalt-chart-1: var(--basalt-chart-blue);
+	--basalt-chart-2: var(--basalt-chart-blue);
+	--basalt-chart-3: var(--basalt-chart-green);
+	--basalt-chart-4: var(--basalt-chart-green);
+	--basalt-chart-5: var(--basalt-chart-green);
+	--basalt-chart-6: var(--basalt-chart-green);
+	--basalt-chart-7: var(--basalt-chart-yellow);
+	--basalt-chart-8: var(--basalt-chart-yellow);
+	--basalt-chart-9: var(--basalt-chart-pink);
+	--basalt-chart-10: var(--basalt-chart-pink);
+	--basalt-chart-11: var(--basalt-chart-pink);
+	--basalt-chart-12: var(--basalt-chart-pink);
+	--basalt-chart-13: var(--basalt-chart-pink);
+	--basalt-chart-14: var(--basalt-chart-blue);
+	--basalt-chart-15: var(--basalt-chart-blue);
+	--basalt-chart-16: var(--basalt-chart-blue);
+	--basalt-chart-17: var(--basalt-chart-pearl);
+	--basalt-chart-18: var(--basalt-chart-pearl);
+	--basalt-chart-19: var(--basalt-chart-green);
+	--basalt-chart-20: var(--basalt-chart-green);
+	--basalt-chart-21: var(--basalt-chart-yellow);
+	--basalt-chart-22: var(--basalt-chart-yellow);
+	--basalt-chart-23: var(--basalt-chart-pink);
+	--basalt-chart-24: var(--basalt-chart-pearl);
+	/* Control swatches are independent of the chart palette. */
+	--basalt-accent-1: 204 88% 62%;
+	--basalt-accent-2: 191 79% 70%;
+	--basalt-accent-3: 182 62% 47%;
+	--basalt-accent-4: 113 58% 62%;
+	--basalt-accent-5: 79 70% 64%;
+	--basalt-accent-6: 49 100% 69%;
+	--basalt-accent-7: 27 95% 65%;
+	--basalt-accent-8: 5 85% 66%;
+	--basalt-accent-9: 345 88% 72%;
+	--basalt-accent-10: 280 53% 71%;
+	--basalt-accent-11: 237 66% 69%;
+	--basalt-accent-12: 210 20% 87%;
+	--basalt-badge-green-foreground: 0 0% 10%;
+	--basalt-badge-teal: var(--basalt-accent-3);
+	--basalt-badge-purple: var(--basalt-accent-10);
+	--basalt-badge-teal-foreground: 0 0% 10%;
+	--basalt-badge-purple-foreground: 0 0% 10%;
 	--basalt-chart-axis: 0 0% 40%;
-	--basalt-chart-muted: 0 0% 70%;
-	--basalt-heatmap-green-1: 142 50% 85%;
-	--basalt-heatmap-green-2: 142 55% 65%;
-	--basalt-heatmap-green-3: 142 60% 45%;
-	--basalt-heatmap-green-4: 142 65% 30%;
-	--basalt-heatmap-red-1: 0 55% 85%;
-	--basalt-heatmap-red-2: 0 60% 65%;
-	--basalt-heatmap-red-3: 0 65% 48%;
-	--basalt-heatmap-red-4: 0 65% 35%;
-	--basalt-heatmap-blue-1: 217 50% 85%;
-	--basalt-heatmap-blue-2: 217 55% 65%;
-	--basalt-heatmap-blue-3: 217 60% 48%;
-	--basalt-heatmap-blue-4: 217 65% 35%;
-	--basalt-heatmap-orange-1: 30 55% 85%;
-	--basalt-heatmap-orange-2: 30 60% 65%;
-	--basalt-heatmap-orange-3: 30 65% 48%;
-	--basalt-heatmap-orange-4: 30 65% 35%;
+	--basalt-chart-muted: 220 12% 86%;
+	--basalt-heatmap-green-1: 113 50% 85%;
+	--basalt-heatmap-green-2: 113 55% 65%;
+	--basalt-heatmap-green-3: 113 60% 45%;
+	--basalt-heatmap-green-4: 113 65% 30%;
+	--basalt-heatmap-red-1: 345 55% 85%;
+	--basalt-heatmap-red-2: 345 60% 65%;
+	--basalt-heatmap-red-3: 345 65% 48%;
+	--basalt-heatmap-red-4: 345 65% 35%;
+	--basalt-heatmap-blue-1: 204 50% 85%;
+	--basalt-heatmap-blue-2: 204 55% 65%;
+	--basalt-heatmap-blue-3: 204 60% 48%;
+	--basalt-heatmap-blue-4: 204 65% 35%;
+	--basalt-heatmap-orange-1: 43 55% 85%;
+	--basalt-heatmap-orange-2: 43 60% 65%;
+	--basalt-heatmap-orange-3: 43 65% 48%;
+	--basalt-heatmap-orange-4: 43 65% 35%;
 }
 
 .dark,
@@ -90,10 +117,10 @@
 	--basalt-popover: 0 0% 10.6%;
 	--basalt-popover-foreground: 0 0% 93%;
 	--basalt-bright: 0 0% 14%;
-	--basalt-primary: 217 91% 60%;
-	--basalt-primary-foreground: 0 0% 100%;
+	--basalt-primary: 204 90% 70%;
+	--basalt-primary-foreground: 0 0% 10%;
 	--basalt-muted: 0 0% 12.2%;
-	--basalt-muted-foreground: 0 0% 48%;
+	--basalt-muted-foreground: 0 0% 63%;
 	--basalt-accent: 0 0% 14%;
 	--basalt-accent-foreground: 0 0% 93%;
 	--basalt-destructive: 0 72% 51%;
@@ -103,54 +130,81 @@
 	--basalt-warning: 32 80% 68%;
 	--basalt-warning-tint: 32 35% 16%;
 	--basalt-danger: 0 75% 70%;
+	--basalt-danger-foreground: 0 0% 10%;
 	--basalt-danger-tint: 0 40% 16%;
+	--basalt-info-foreground: 0 0% 10%;
+	--basalt-warning-foreground: 0 0% 10%;
+	--basalt-badge-green-foreground: 0 0% 10%;
+	--basalt-badge-teal: var(--basalt-accent-3);
+	--basalt-badge-purple: var(--basalt-accent-10);
+	--basalt-badge-teal-foreground: 0 0% 10%;
+	--basalt-badge-purple-foreground: 0 0% 10%;
 	--basalt-border: 0 0% 16%;
 	--basalt-input: 0 0% 18%;
-	--basalt-ring: 217 91% 60%;
+	--basalt-ring: var(--basalt-primary);
 	--basalt-control-fill: hsl(var(--basalt-secondary));
 	--basalt-zebra-fill: hsl(var(--basalt-bright));
-	--basalt-chart-1: 217 91% 65%;
-	--basalt-chart-2: 200 90% 60%;
-	--basalt-chart-3: 186 80% 50%;
-	--basalt-chart-4: 166 72% 50%;
-	--basalt-chart-5: 142 71% 50%;
-	--basalt-chart-6: 84 65% 52%;
-	--basalt-chart-7: 45 93% 52%;
-	--basalt-chart-8: 30 90% 60%;
-	--basalt-chart-9: 15 85% 57%;
-	--basalt-chart-10: 0 72% 56%;
-	--basalt-chart-11: 340 82% 60%;
-	--basalt-chart-12: 320 70% 60%;
-	--basalt-chart-13: 290 65% 60%;
-	--basalt-chart-14: 270 70% 65%;
-	--basalt-chart-15: 250 65% 63%;
-	--basalt-chart-16: 230 70% 61%;
-	--basalt-chart-17: 210 55% 56%;
-	--basalt-chart-18: 195 45% 60%;
-	--basalt-chart-19: 160 50% 55%;
-	--basalt-chart-20: 100 50% 53%;
-	--basalt-chart-21: 60 65% 50%;
-	--basalt-chart-22: 22 80% 55%;
-	--basalt-chart-23: 350 65% 55%;
-	--basalt-chart-24: 0 0% 65%;
-	--basalt-chart-axis: 0 0% 50%;
-	--basalt-chart-muted: 0 0% 35%;
-	--basalt-heatmap-green-1: 142 45% 25%;
-	--basalt-heatmap-green-2: 142 50% 35%;
-	--basalt-heatmap-green-3: 142 55% 45%;
-	--basalt-heatmap-green-4: 142 60% 58%;
-	--basalt-heatmap-red-1: 0 45% 25%;
-	--basalt-heatmap-red-2: 0 55% 35%;
-	--basalt-heatmap-red-3: 0 60% 45%;
-	--basalt-heatmap-red-4: 0 65% 55%;
-	--basalt-heatmap-blue-1: 217 45% 25%;
-	--basalt-heatmap-blue-2: 217 50% 35%;
-	--basalt-heatmap-blue-3: 217 55% 45%;
-	--basalt-heatmap-blue-4: 217 60% 55%;
-	--basalt-heatmap-orange-1: 30 45% 25%;
-	--basalt-heatmap-orange-2: 30 55% 35%;
-	--basalt-heatmap-orange-3: 30 60% 45%;
-	--basalt-heatmap-orange-4: 30 65% 55%;
+	/* Match the classic candy swatches; gray and preference ownership stay independent. */
+	--basalt-chart-blue: 204 90% 70%;
+	--basalt-chart-pink: 345 88% 77%;
+	--basalt-chart-green: 113 58% 70%;
+	--basalt-chart-yellow: 49 100% 73%;
+	--basalt-chart-pearl: 210 20% 86%;
+	--basalt-chart-1: var(--basalt-chart-blue);
+	--basalt-chart-2: var(--basalt-chart-blue);
+	--basalt-chart-3: var(--basalt-chart-green);
+	--basalt-chart-4: var(--basalt-chart-green);
+	--basalt-chart-5: var(--basalt-chart-green);
+	--basalt-chart-6: var(--basalt-chart-green);
+	--basalt-chart-7: var(--basalt-chart-yellow);
+	--basalt-chart-8: var(--basalt-chart-yellow);
+	--basalt-chart-9: var(--basalt-chart-pink);
+	--basalt-chart-10: var(--basalt-chart-pink);
+	--basalt-chart-11: var(--basalt-chart-pink);
+	--basalt-chart-12: var(--basalt-chart-pink);
+	--basalt-chart-13: var(--basalt-chart-pink);
+	--basalt-chart-14: var(--basalt-chart-blue);
+	--basalt-chart-15: var(--basalt-chart-blue);
+	--basalt-chart-16: var(--basalt-chart-blue);
+	--basalt-chart-17: var(--basalt-chart-pearl);
+	--basalt-chart-18: var(--basalt-chart-pearl);
+	--basalt-chart-19: var(--basalt-chart-green);
+	--basalt-chart-20: var(--basalt-chart-green);
+	--basalt-chart-21: var(--basalt-chart-yellow);
+	--basalt-chart-22: var(--basalt-chart-yellow);
+	--basalt-chart-23: var(--basalt-chart-pink);
+	--basalt-chart-24: var(--basalt-chart-pearl);
+	/* Control swatches are independent of the chart palette. */
+	--basalt-accent-1: 204 90% 70%;
+	--basalt-accent-2: 191 79% 74%;
+	--basalt-accent-3: 182 62% 63%;
+	--basalt-accent-4: 113 58% 70%;
+	--basalt-accent-5: 79 70% 70%;
+	--basalt-accent-6: 49 100% 73%;
+	--basalt-accent-7: 27 95% 72%;
+	--basalt-accent-8: 5 85% 73%;
+	--basalt-accent-9: 345 88% 77%;
+	--basalt-accent-10: 280 53% 77%;
+	--basalt-accent-11: 237 66% 77%;
+	--basalt-accent-12: 210 20% 88%;
+	--basalt-chart-axis: 0 0% 63%;
+	--basalt-chart-muted: 220 6% 24%;
+	--basalt-heatmap-green-1: 113 45% 25%;
+	--basalt-heatmap-green-2: 113 50% 35%;
+	--basalt-heatmap-green-3: 113 55% 45%;
+	--basalt-heatmap-green-4: 113 60% 58%;
+	--basalt-heatmap-red-1: 345 45% 25%;
+	--basalt-heatmap-red-2: 345 55% 35%;
+	--basalt-heatmap-red-3: 345 60% 45%;
+	--basalt-heatmap-red-4: 345 65% 55%;
+	--basalt-heatmap-blue-1: 204 45% 25%;
+	--basalt-heatmap-blue-2: 204 50% 35%;
+	--basalt-heatmap-blue-3: 204 55% 45%;
+	--basalt-heatmap-blue-4: 204 60% 55%;
+	--basalt-heatmap-orange-1: 43 45% 25%;
+	--basalt-heatmap-orange-2: 43 55% 35%;
+	--basalt-heatmap-orange-3: 43 60% 45%;
+	--basalt-heatmap-orange-4: 43 65% 55%;
 }
 
 [data-basalt-surface-root] {
@@ -183,6 +237,7 @@
 	--basalt-zebra-fill: hsl(var(--basalt-secondary));
 }
 
+/* biome-ignore lint/style/noDescendingSpecificity: Rootless surface trees cannot overlap a surface-root tree. */
 [data-basalt-surface]:not([data-basalt-surface-root] *) [data-basalt-surface] {
 	background: hsl(var(--basalt-secondary));
 	--basalt-control-fill: hsl(var(--basalt-secondary));

package/dist/utils/control-surface.d.ts

@@ -1,2 +1,3 @@
-export declare const CONTROL_SURFACE_CLASS = "rounded-basalt-md border border-basalt-border bg-basalt-control text-sm";
+export declare const BASALT_UI_CLASS = "basalt-ui";
+export declare const CONTROL_SURFACE_CLASS = "basalt-ui rounded-basalt-md border border-basalt-border bg-basalt-control text-sm";
 export declare function controlSurfaceClass(className?: string): string;

package/dist/utils/control-surface.js

@@ -1,11 +1,11 @@
 "use client";
 import { cn as e } from "./cn.js";
 //#region src/utils/control-surface.ts
-var t = "rounded-basalt-md border border-basalt-border bg-basalt-control text-sm";
-function n(n) {
-	return e(t, n);
+var t = "basalt-ui", n = "basalt-ui rounded-basalt-md border border-basalt-border bg-basalt-control text-sm";
+function r(t) {
+	return e(n, t);
 }
 //#endregion
-export { t as CONTROL_SURFACE_CLASS, n as controlSurfaceClass };
+export { t as BASALT_UI_CLASS, n as CONTROL_SURFACE_CLASS, r as controlSurfaceClass };
 
 //# sourceMappingURL=control-surface.js.map

package/dist/utils/control-surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-surface.js","names":[],"sources":["../../src/utils/control-surface.ts"],"sourcesContent":["import { cn } from \"./cn\";\n\nexport const CONTROL_SURFACE_CLASS =\n\t\"rounded-basalt-md border border-basalt-border bg-basalt-control text-sm\";\n\nexport function controlSurfaceClass(className?: string) {\n\treturn cn(CONTROL_SURFACE_CLASS, className);\n}\n"],"mappings":";;;AAEA,IAAa,IACZ;AAED,SAAgB,EAAoB,GAAoB;CACvD,OAAO,EAAG,GAAuB,CAAS;AAC3C"}
+{"version":3,"file":"control-surface.js","names":[],"sources":["../../src/utils/control-surface.ts"],"sourcesContent":["import { cn } from \"./cn\";\n\nexport const BASALT_UI_CLASS = \"basalt-ui\";\n\nexport const CONTROL_SURFACE_CLASS =\n\t\"basalt-ui rounded-basalt-md border border-basalt-border bg-basalt-control text-sm\";\n\nexport function controlSurfaceClass(className?: string) {\n\treturn cn(CONTROL_SURFACE_CLASS, className);\n}\n"],"mappings":";;;AAEA,IAAa,IAAkB,aAElB,IACZ;AAED,SAAgB,EAAoB,GAAoB;CACvD,OAAO,EAAG,GAAuB,CAAS;AAC3C"}

package/dist/utils/selection-indicator.js

@@ -26,7 +26,7 @@ function o(e) {
 	for (let n of e.children) n instanceof HTMLElement && n.getAttribute("aria-hidden") !== "true" && t.push(n);
 	return t;
 }
-function s({ itemSelector: s, enabled: c = !0, mapGeometry: l = i, ref: u }) {
+function s({ itemSelector: s, enabled: c = !0, mapGeometry: l, ref: u }) {
 	let d = e.useRef(null), f = e.useMemo(() => (e) => {
 		d.current = e, r(u, e);
 	}, [u]), [p, m] = e.useState({
@@ -60,7 +60,7 @@ function s({ itemSelector: s, enabled: c = !0, mapGeometry: l = i, ref: u }) {
 			}));
 			return;
 		}
-		let r = l(t, e);
+		let r = (l ?? i)(t, e);
 		m((e) => ({
 			...r,
 			visible: !0,

package/dist/utils/selection-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-indicator.js","names":[],"sources":["../../src/utils/selection-indicator.ts"],"sourcesContent":["import * as React from \"react\";\n\nexport const SELECTION_INDICATOR_MOTION_CLASS =\n\t\"transition-[left,width,top,height] duration-200 ease-out\";\n\nexport type SelectionGeometry = {\n\tleft: number;\n\twidth: number;\n\ttop: number;\n\theight: number;\n};\n\nexport type SelectionIndicatorState = SelectionGeometry & {\n\tvisible: boolean;\n\tanimated: boolean;\n};\n\nconst EMPTY: SelectionGeometry = { left: 0, width: 0, top: 0, height: 0 };\n\nexport function assignRef<T>(ref: React.Ref<T> | undefined, value: T | null) {\n\tif (typeof ref === \"function\") {\n\t\tref(value);\n\t} else if (ref) {\n\t\t(ref as React.MutableRefObject<T | null>).current = value;\n\t}\n}\n\nexport function measureSelectionItem(item: HTMLElement): SelectionGeometry {\n\treturn {\n\t\tleft: item.offsetLeft,\n\t\twidth: item.offsetWidth,\n\t\ttop: item.offsetTop,\n\t\theight: item.offsetHeight,\n\t};\n}\n\nfunction prefersReducedMotion() {\n\treturn (\n\t\ttypeof window !== \"undefined\" && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n\t);\n}\n\nfunction selectionTargets(root: HTMLElement) {\n\tconst targets: HTMLElement[] = [root];\n\tfor (const node of root.children) {\n\t\tif (node instanceof HTMLElement && node.getAttribute(\"aria-hidden\") !== \"true\") {\n\t\t\ttargets.push(node);\n\t\t}\n\t}\n\treturn targets;\n}\n\nexport function useSelectionIndicator({\n\titemSelector,\n\tenabled = true,\n\tmapGeometry = measureSelectionItem,\n\tref,\n}: {\n\titemSelector: string;\n\tenabled?: boolean;\n\tmapGeometry?: (item: HTMLElement, root: HTMLElement) => SelectionGeometry;\n\tref?: React.Ref<HTMLElement | null>;\n}) {\n\tconst rootRef = React.useRef<HTMLElement | null>(null);\n\tconst composedRef = React.useMemo(() => {\n\t\treturn (node: HTMLElement | null) => {\n\t\t\trootRef.current = node;\n\t\t\tassignRef(ref, node);\n\t\t};\n\t}, [ref]);\n\tconst [state, setState] = React.useState<SelectionIndicatorState>({\n\t\t...EMPTY,\n\t\tvisible: false,\n\t\tanimated: false,\n\t});\n\tconst [reduced, setReduced] = React.useState(prefersReducedMotion);\n\n\tReact.useEffect(() => {\n\t\tconst media = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\t\tconst onChange = () => setReduced(media.matches);\n\t\tonChange();\n\t\tmedia.addEventListener(\"change\", onChange);\n\t\treturn () => media.removeEventListener(\"change\", onChange);\n\t}, []);\n\n\tconst sync = React.useCallback(() => {\n\t\tconst root = rootRef.current;\n\t\tif (!root || !enabled) {\n\t\t\tsetState((current) => ({ ...current, ...EMPTY, visible: false, animated: false }));\n\t\t\treturn;\n\t\t}\n\t\tconst item = root.querySelector<HTMLElement>(itemSelector);\n\t\tif (!item) {\n\t\t\tsetState((current) => ({ ...current, width: 0, height: 0, visible: false, animated: false }));\n\t\t\treturn;\n\t\t}\n\t\tconst geometry = mapGeometry(item, root);\n\t\tsetState((current) => ({\n\t\t\t...geometry,\n\t\t\tvisible: true,\n\t\t\tanimated: current.visible && !reduced,\n\t\t}));\n\t}, [enabled, itemSelector, mapGeometry, reduced]);\n\n\tReact.useLayoutEffect(() => {\n\t\tconst root = rootRef.current;\n\t\tif (!root || !enabled) {\n\t\t\treturn;\n\t\t}\n\t\tlet frame = 0;\n\t\tconst ro = new ResizeObserver(() => {\n\t\t\tcancelAnimationFrame(frame);\n\t\t\tframe = requestAnimationFrame(sync);\n\t\t});\n\t\tconst observe = () => {\n\t\t\tro.disconnect();\n\t\t\tfor (const node of selectionTargets(root)) {\n\t\t\t\tro.observe(node);\n\t\t\t}\n\t\t};\n\t\tobserve();\n\t\tsync();\n\t\tconst mo = new MutationObserver(() => {\n\t\t\tcancelAnimationFrame(frame);\n\t\t\tframe = requestAnimationFrame(() => {\n\t\t\t\tobserve();\n\t\t\t\tsync();\n\t\t\t});\n\t\t});\n\t\tmo.observe(root, {\n\t\t\tattributes: true,\n\t\t\tsubtree: true,\n\t\t\tchildList: true,\n\t\t\tcharacterData: true,\n\t\t\tattributeFilter: [\"data-state\"],\n\t\t});\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(frame);\n\t\t\tmo.disconnect();\n\t\t\tro.disconnect();\n\t\t};\n\t}, [enabled, sync]);\n\n\treturn {\n\t\tref: composedRef,\n\t\tstate,\n\t\tmotionClassName: state.animated && !reduced ? SELECTION_INDICATOR_MOTION_CLASS : undefined,\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"file":"selection-indicator.js","names":[],"sources":["../../src/utils/selection-indicator.ts"],"sourcesContent":["import * as React from \"react\";\n\nexport const SELECTION_INDICATOR_MOTION_CLASS =\n\t\"transition-[left,width,top,height] duration-200 ease-out\";\n\nexport type SelectionGeometry = {\n\tleft: number;\n\twidth: number;\n\ttop: number;\n\theight: number;\n};\n\nexport type SelectionIndicatorState = SelectionGeometry & {\n\tvisible: boolean;\n\tanimated: boolean;\n};\n\nconst EMPTY: SelectionGeometry = { left: 0, width: 0, top: 0, height: 0 };\n\nexport function assignRef<T>(ref: React.Ref<T> | undefined, value: T | null) {\n\tif (typeof ref === \"function\") {\n\t\tref(value);\n\t} else if (ref) {\n\t\t(ref as React.MutableRefObject<T | null>).current = value;\n\t}\n}\n\nexport function measureSelectionItem(item: HTMLElement): SelectionGeometry {\n\treturn {\n\t\tleft: item.offsetLeft,\n\t\twidth: item.offsetWidth,\n\t\ttop: item.offsetTop,\n\t\theight: item.offsetHeight,\n\t};\n}\n\nfunction prefersReducedMotion() {\n\treturn (\n\t\ttypeof window !== \"undefined\" && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n\t);\n}\n\nfunction selectionTargets(root: HTMLElement) {\n\tconst targets: HTMLElement[] = [root];\n\tfor (const node of root.children) {\n\t\tif (node instanceof HTMLElement && node.getAttribute(\"aria-hidden\") !== \"true\") {\n\t\t\ttargets.push(node);\n\t\t}\n\t}\n\treturn targets;\n}\n\nexport function useSelectionIndicator({\n\titemSelector,\n\tenabled = true,\n\tmapGeometry,\n\tref,\n}: {\n\titemSelector: string;\n\tenabled?: boolean;\n\tmapGeometry?: (item: HTMLElement, root: HTMLElement) => SelectionGeometry;\n\tref?: React.Ref<HTMLElement | null>;\n}) {\n\tconst rootRef = React.useRef<HTMLElement | null>(null);\n\tconst composedRef = React.useMemo(() => {\n\t\treturn (node: HTMLElement | null) => {\n\t\t\trootRef.current = node;\n\t\t\tassignRef(ref, node);\n\t\t};\n\t}, [ref]);\n\tconst [state, setState] = React.useState<SelectionIndicatorState>({\n\t\t...EMPTY,\n\t\tvisible: false,\n\t\tanimated: false,\n\t});\n\tconst [reduced, setReduced] = React.useState(prefersReducedMotion);\n\n\tReact.useEffect(() => {\n\t\tconst media = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\t\tconst onChange = () => setReduced(media.matches);\n\t\tonChange();\n\t\tmedia.addEventListener(\"change\", onChange);\n\t\treturn () => media.removeEventListener(\"change\", onChange);\n\t}, []);\n\n\tconst sync = React.useCallback(() => {\n\t\tconst root = rootRef.current;\n\t\tif (!root || !enabled) {\n\t\t\tsetState((current) => ({ ...current, ...EMPTY, visible: false, animated: false }));\n\t\t\treturn;\n\t\t}\n\t\tconst item = root.querySelector<HTMLElement>(itemSelector);\n\t\tif (!item) {\n\t\t\tsetState((current) => ({ ...current, width: 0, height: 0, visible: false, animated: false }));\n\t\t\treturn;\n\t\t}\n\t\t// Keep the optional dependency undefined. Production optimizers may inline a\n\t\t// function-valued parameter default, creating a new effect dependency every render.\n\t\tconst geometry = (mapGeometry ?? measureSelectionItem)(item, root);\n\t\tsetState((current) => ({\n\t\t\t...geometry,\n\t\t\tvisible: true,\n\t\t\tanimated: current.visible && !reduced,\n\t\t}));\n\t}, [enabled, itemSelector, mapGeometry, reduced]);\n\n\tReact.useLayoutEffect(() => {\n\t\tconst root = rootRef.current;\n\t\tif (!root || !enabled) {\n\t\t\treturn;\n\t\t}\n\t\tlet frame = 0;\n\t\tconst ro = new ResizeObserver(() => {\n\t\t\tcancelAnimationFrame(frame);\n\t\t\tframe = requestAnimationFrame(sync);\n\t\t});\n\t\tconst observe = () => {\n\t\t\tro.disconnect();\n\t\t\tfor (const node of selectionTargets(root)) {\n\t\t\t\tro.observe(node);\n\t\t\t}\n\t\t};\n\t\tobserve();\n\t\tsync();\n\t\tconst mo = new MutationObserver(() => {\n\t\t\tcancelAnimationFrame(frame);\n\t\t\tframe = requestAnimationFrame(() => {\n\t\t\t\tobserve();\n\t\t\t\tsync();\n\t\t\t});\n\t\t});\n\t\tmo.observe(root, {\n\t\t\tattributes: true,\n\t\t\tsubtree: true,\n\t\t\tchildList: true,\n\t\t\tcharacterData: true,\n\t\t\tattributeFilter: [\"data-state\"],\n\t\t});\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(frame);\n\t\t\tmo.disconnect();\n\t\t\tro.disconnect();\n\t\t};\n\t}, [enabled, sync]);\n\n\treturn {\n\t\tref: composedRef,\n\t\tstate,\n\t\tmotionClassName: state.animated && !reduced ? SELECTION_INDICATOR_MOTION_CLASS : undefined,\n\t};\n}\n"],"mappings":";;;AAEA,IAAa,IACZ,4DAcK,IAA2B;CAAE,MAAM;CAAG,OAAO;CAAG,KAAK;CAAG,QAAQ;AAAE;AAExE,SAAgB,EAAa,GAA+B,GAAiB;CAC5E,AAAI,OAAO,KAAQ,aAClB,EAAI,CAAK,IACC,MACV,EAA0C,UAAU;AAEtD;AAEA,SAAgB,EAAqB,GAAsC;CAC1E,OAAO;EACN,MAAM,EAAK;EACX,OAAO,EAAK;EACZ,KAAK,EAAK;EACV,QAAQ,EAAK;CACd;AACD;AAEA,SAAS,IAAuB;CAC/B,OACC,OAAO,SAAW,OAAe,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAEzF;AAEA,SAAS,EAAiB,GAAmB;CAC5C,IAAM,IAAyB,CAAC,CAAI;CACpC,KAAK,IAAM,KAAQ,EAAK,UACvB,AAAI,aAAgB,eAAe,EAAK,aAAa,aAAa,MAAM,UACvE,EAAQ,KAAK,CAAI;CAGnB,OAAO;AACR;AAEA,SAAgB,EAAsB,EACrC,iBACA,aAAU,IACV,gBACA,UAME;CACF,IAAM,IAAU,EAAM,OAA2B,IAAI,GAC/C,IAAc,EAAM,eACjB,MAA6B;EAEpC,AADA,EAAQ,UAAU,GAClB,EAAU,GAAK,CAAI;CACpB,GACE,CAAC,CAAG,CAAC,GACF,CAAC,GAAO,KAAY,EAAM,SAAkC;EACjE,GAAG;EACH,SAAS;EACT,UAAU;CACX,CAAC,GACK,CAAC,GAAS,KAAc,EAAM,SAAS,CAAoB;CAEjE,EAAM,gBAAgB;EACrB,IAAM,IAAQ,OAAO,WAAW,kCAAkC,GAC5D,UAAiB,EAAW,EAAM,OAAO;EAG/C,OAFA,EAAS,GACT,EAAM,iBAAiB,UAAU,CAAQ,SAC5B,EAAM,oBAAoB,UAAU,CAAQ;CAC1D,GAAG,CAAC,CAAC;CAEL,IAAM,IAAO,EAAM,kBAAkB;EACpC,IAAM,IAAO,EAAQ;EACrB,IAAI,CAAC,KAAQ,CAAC,GAAS;GACtB,GAAU,OAAa;IAAE,GAAG;IAAS,GAAG;IAAO,SAAS;IAAO,UAAU;GAAM,EAAE;GACjF;EACD;EACA,IAAM,IAAO,EAAK,cAA2B,CAAY;EACzD,IAAI,CAAC,GAAM;GACV,GAAU,OAAa;IAAE,GAAG;IAAS,OAAO;IAAG,QAAQ;IAAG,SAAS;IAAO,UAAU;GAAM,EAAE;GAC5F;EACD;EAGA,IAAM,KAAY,KAAe,EAAA,CAAsB,GAAM,CAAI;EACjE,GAAU,OAAa;GACtB,GAAG;GACH,SAAS;GACT,UAAU,EAAQ,WAAW,CAAC;EAC/B,EAAE;CACH,GAAG;EAAC;EAAS;EAAc;EAAa;CAAO,CAAC;CAyChD,OAvCA,EAAM,sBAAsB;EAC3B,IAAM,IAAO,EAAQ;EACrB,IAAI,CAAC,KAAQ,CAAC,GACb;EAED,IAAI,IAAQ,GACN,IAAK,IAAI,qBAAqB;GAEnC,AADA,qBAAqB,CAAK,GAC1B,IAAQ,sBAAsB,CAAI;EACnC,CAAC,GACK,UAAgB;GACrB,EAAG,WAAW;GACd,KAAK,IAAM,KAAQ,EAAiB,CAAI,GACvC,EAAG,QAAQ,CAAI;EAEjB;EAEA,AADA,EAAQ,GACR,EAAK;EACL,IAAM,IAAK,IAAI,uBAAuB;GAErC,AADA,qBAAqB,CAAK,GAC1B,IAAQ,4BAA4B;IAEnC,AADA,EAAQ,GACR,EAAK;GACN,CAAC;EACF,CAAC;EAQD,OAPA,EAAG,QAAQ,GAAM;GAChB,YAAY;GACZ,SAAS;GACT,WAAW;GACX,eAAe;GACf,iBAAiB,CAAC,YAAY;EAC/B,CAAC,SACY;GAGZ,AAFA,qBAAqB,CAAK,GAC1B,EAAG,WAAW,GACd,EAAG,WAAW;EACf;CACD,GAAG,CAAC,GAAS,CAAI,CAAC,GAEX;EACN,KAAK;EACL;EACA,iBAAiB,EAAM,YAAY,CAAC,IAAU,IAAmC,KAAA;CAClF;AACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nocoo/basalt",
-	"version": "2.0.2",
+	"version": "2.1.0",
 	"type": "module",
 	"license": "MIT",
 	"repository": {
@@ -13,16 +13,19 @@
 	},
 	"files": [
 		"dist",
+		"ai",
 		"README.md",
 		"LICENSE"
 	],
 	"scripts": {
-		"build": "bun run build:css && vite build && tsc -p tsconfig.build.json && bun scripts/rewrite-declarations.ts && bun scripts/verify-dist.ts && bun scripts/root-boundary.ts && node scripts/verify-runtime.mjs",
+		"build": "bun run build:metadata && bun run build:css && vite build && tsc -p tsconfig.build.json && bun scripts/rewrite-declarations.ts && bun scripts/verify-dist.ts && bun scripts/verify-public-api.ts && bun scripts/root-boundary.ts && node scripts/verify-runtime.mjs",
 		"build:css": "bun ../../scripts/build-basalt-standalone.ts",
+		"build:metadata": "bun ../../scripts/catalog-api-cli.ts check",
 		"pack:check": "bun scripts/verify-pack.ts",
 		"prepublishOnly": "bun run --cwd ../.. package:prepublish",
 		"publint": "publint --strict --pack npm",
-		"types:check": "tsc -p type-tests/tsconfig.bundler.json --noEmit && tsc -p type-tests/tsconfig.nodenext.json --noEmit"
+		"types:check": "tsc -p type-tests/tsconfig.bundler.json --noEmit && tsc -p type-tests/tsconfig.nodenext.json --noEmit",
+		"verify:api": "bun scripts/verify-public-api.ts"
 	},
 	"sideEffects": [
 		"*.css"
@@ -103,5 +106,6 @@
 		"@tanstack/react-table": {
 			"optional": true
 		}
-	}
+	},
+	"homepage": "https://basaltui.com"
 }