@nxgt/material 3.6.0 → 3.7.0

package/dist/{icon-badge-C30yKsAM.js → icon-badge-Bb5-73XP.js}

@@ -1,13 +1,13 @@
 import { t as e } from "./utils-Bcd2Z3ea.js";
-import { t } from "./icon-button-BXlI3DJ_.js";
-import { f as n } from "./dialog-JQT6iETD.js";
-import { a as r, i, n as a } from "./field-blur-context-Dw9ZAgBr.js";
+import { f as t } from "./dialog-DdJ1C4BR.js";
+import { a as n, i as r, n as i } from "./field-blur-context-Dw9ZAgBr.js";
+import { t as a } from "./icon-button-5A6Mrj6w.js";
 import { isValidElement as o, useId as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { describedBy as u } from "@nxgt/material-core/described-by";
 //#region lib/components/ui/fields/text-field/text-field.tsx
-function d({ error: t, helperText: d, label: p, className: m, leading: h, trailing: g, ..._ }) {
-	let v = a(), y = s(), b = s(), x = u(_["aria-describedby"], !!d && b), S = !!h && !o(h), C = !!g && !o(g), w = /* @__PURE__ */ l("div", {
+function d({ error: a, helperText: d, label: p, className: m, leading: h, trailing: g, ..._ }) {
+	let v = i(), y = s(), b = s(), x = u(_["aria-describedby"], !!d && b), S = !!h && !o(h), C = !!g && !o(g), w = /* @__PURE__ */ l("div", {
 		className: e("relative", {
 			"*:first:size-8 *:first:absolute *:first:top-[calc(50%-16px)] *:first:left-1.5 [&_input]:pl-10 *:first:bg-muted/80 *:first:text-muted-foreground": !!h && !S,
 			"*:last:size-8 *:last:absolute *:last:top-[calc(50%-16px)] *:last:right-1.5 *:last:pointer-coarse:size-11 *:last:pointer-coarse:top-[calc(50%-22px)] *:last:pointer-coarse:right-0 [&_input]:pr-.5 *:last:bg-muted/80  *:last:text-muted-foreground": !!g && !C,
@@ -19,8 +19,8 @@ function d({ error: t, helperText: d, label: p, className: m, leading: h, traili
 				slot: "leading",
 				children: h
 			}) : h && h,
-			/* @__PURE__ */ c(n, {
-				"aria-invalid": t,
+			/* @__PURE__ */ c(t, {
+				"aria-invalid": a,
 				..._,
 				id: _.id ?? y,
 				"aria-describedby": x
@@ -35,15 +35,15 @@ function d({ error: t, helperText: d, label: p, className: m, leading: h, traili
 		ref: v,
 		"data-slot": "text-field",
 		className: e("grid w-full gap-1.5", m),
-		children: [/* @__PURE__ */ c(i, {
+		children: [/* @__PURE__ */ c(r, {
 			withAsterisk: _.required,
 			htmlFor: _.id ?? y,
 			children: p
 		}), /* @__PURE__ */ l("div", {
 			className: "flex flex-col gap-0.5",
-			children: [w, d ? /* @__PURE__ */ c(r, {
+			children: [w, d ? /* @__PURE__ */ c(n, {
 				id: b,
-				error: t,
+				error: a,
 				children: d
 			}) : null]
 		})]
@@ -58,15 +58,15 @@ function f({ slot: t, children: n }) {
 }
 //#endregion
 //#region lib/components/ui/actions/icon-button/icon-badge.tsx
-function p({ children: n, className: r, ...i }) {
-	let a = !!(i["aria-label"] || i["aria-labelledby"]);
-	return /* @__PURE__ */ c(t, {
-		"aria-hidden": a ? void 0 : "true",
-		role: a ? "img" : void 0,
-		...i,
+function p({ children: t, className: n, ...r }) {
+	let i = !!(r["aria-label"] || r["aria-labelledby"]);
+	return /* @__PURE__ */ c(a, {
+		"aria-hidden": i ? void 0 : "true",
+		role: i ? "img" : void 0,
+		...r,
 		asChild: !0,
-		className: e("cursor-default", r),
-		children: /* @__PURE__ */ c("span", { children: n })
+		className: e("cursor-default", n),
+		children: /* @__PURE__ */ c("span", { children: t })
 	});
 }
 //#endregion

package/dist/{icon-button-BXlI3DJ_.js → icon-button-5A6Mrj6w.js}

@@ -1,43 +1,13 @@
 import { t as e } from "./utils-Bcd2Z3ea.js";
-import { F as t, P as n, o as r, t as i } from "./tooltip-tmFoTU_d.js";
-import { i as a, n as o, r as s, t as c } from "./button-tones-BgZJ1tkD.js";
-import { morph as l, morphAt as u, shapeOutline as d, toSvgPath as f } from "@nxgt/material-core/shapes";
-import { useLayoutEffect as p, useRef as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-//#region lib/components/ui/display/shape/use-shape-morph.ts
-var _ = .8, v = 14, y = v * Math.sqrt(1 - _ * _), b = 520;
-function x(e) {
-	let t = e / 1e3;
-	return 1 - Math.exp(-.8 * v * t) * (Math.cos(y * t) + _ * v / y * Math.sin(y * t));
-}
-var S = () => typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-function C(e, t, n) {
-	let r = m(t);
-	p(() => {
-		let i = e.current, a = r.current;
-		if (!i || a === t || !n || S()) {
-			i && a !== t && i.setAttribute("d", f(t)), r.current = t;
-			return;
-		}
-		let o = l(a, t), s = f(t), c = 0, d = performance.now(), p = (e) => {
-			let n = e - d;
-			if (n >= b) {
-				r.current = t, i.setAttribute("d", s);
-				return;
-			}
-			let a = u(o, x(n));
-			r.current = a, i.setAttribute("d", f(a)), c = requestAnimationFrame(p);
-		};
-		return i.setAttribute("d", f(o.from)), c = requestAnimationFrame(p), () => cancelAnimationFrame(c);
-	}, [
-		e,
-		t,
-		n
-	]);
-}
+import { n as t } from "./use-shape-morph-BKA_R5P5.js";
+import { F as n, P as r, o as i, t as a } from "./tooltip-tmFoTU_d.js";
+import { i as o, n as s, r as c, t as l } from "./button-tones-BgZJ1tkD.js";
+import { shapeOutline as u, toSvgPath as d } from "@nxgt/material-core/shapes";
+import { useRef as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#endregion
 //#region lib/components/ui/actions/icon-button/icon-button.variants.ts
-var w = r("inline-flex size-9 center gap-2 cursor-pointer whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:bg-transparent [&_svg]:text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error has-[[data-slot=icon]]:p-1.5 aspect-square rounded-full", {
+var h = i("inline-flex size-9 center gap-2 cursor-pointer whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:bg-transparent [&_svg]:text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error has-[[data-slot=icon]]:p-1.5 aspect-square rounded-full", {
 	variants: {
 		variant: {
 			filled: "shadow-xs bg-primary text-primary-foreground [&_svg]:data-[slot=icon]:text-primary-foreground [&_svg]:stroke-primary-foreground hover:bg-[color-mix(in_oklab,var(--color-primary)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-primary)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-primary)_85%,black)]",
@@ -99,37 +69,37 @@ var w = r("inline-flex size-9 center gap-2 cursor-pointer whitespace-nowrap text
 		{
 			variant: "tonal",
 			color: "primary",
-			class: `${s.primary} ${c.primary} ${o.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+			class: `${c.primary} ${l.primary} ${s.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 		},
 		{
 			variant: "tonal",
 			color: "secondary",
-			class: `${s.secondary} ${c.secondary} ${o.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+			class: `${c.secondary} ${l.secondary} ${s.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 		},
 		{
 			variant: "tonal",
 			color: "success",
-			class: `${s.success} ${c.success} ${o.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+			class: `${c.success} ${l.success} ${s.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 		},
 		{
 			variant: "tonal",
 			color: "info",
-			class: `${s.info} ${c.info} ${o.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+			class: `${c.info} ${l.info} ${s.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 		},
 		{
 			variant: "tonal",
 			color: "warning",
-			class: `${s.warning} ${c.warning} ${o.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+			class: `${c.warning} ${l.warning} ${s.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 		},
 		{
 			variant: "tonal",
 			color: "error",
-			class: `${s.error} ${c.error} ${o.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+			class: `${c.error} ${l.error} ${s.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 		},
 		{
 			variant: "tonal",
 			color: "default",
-			class: `${s.default} ${c.default} ${o.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
+			class: `${c.default} ${l.default} ${s.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
 		},
 		{
 			variant: "ghost",
@@ -144,103 +114,103 @@ var w = r("inline-flex size-9 center gap-2 cursor-pointer whitespace-nowrap text
 		{
 			variant: "ghost",
 			color: "secondary",
-			class: `${s.secondary} ${c.secondary} ${o.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+			class: `${c.secondary} ${l.secondary} ${s.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 		},
 		{
 			variant: "ghost",
 			color: "success",
-			class: `${s.success} ${c.success} ${o.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+			class: `${c.success} ${l.success} ${s.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 		},
 		{
 			variant: "ghost",
 			color: "info",
-			class: `${s.info} ${c.info} ${o.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+			class: `${c.info} ${l.info} ${s.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 		},
 		{
 			variant: "ghost",
 			color: "warning",
-			class: `${s.warning} ${c.warning} ${o.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+			class: `${c.warning} ${l.warning} ${s.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 		},
 		{
 			variant: "ghost",
 			color: "error",
-			class: `${s.error} ${c.error} ${o.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+			class: `${c.error} ${l.error} ${s.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 		},
 		{
 			variant: "outlined",
 			color: "primary",
-			class: `${s.primary} ${c.primary} ${o.primary} border-primary/50 focus:bg-primary/10 hover:bg-primary/10`
+			class: `${c.primary} ${l.primary} ${s.primary} border-primary/50 focus:bg-primary/10 hover:bg-primary/10`
 		},
 		{
 			variant: "outlined",
 			color: "secondary",
-			class: `${s.secondary} ${c.secondary} ${o.secondary} border-secondary/50 focus:bg-secondary/10 hover:bg-secondary/10`
+			class: `${c.secondary} ${l.secondary} ${s.secondary} border-secondary/50 focus:bg-secondary/10 hover:bg-secondary/10`
 		},
 		{
 			variant: "outlined",
 			color: "success",
-			class: `${s.success} ${c.success} ${o.success} border-success/50 focus:bg-success/10 hover:bg-success/10`
+			class: `${c.success} ${l.success} ${s.success} border-success/50 focus:bg-success/10 hover:bg-success/10`
 		},
 		{
 			variant: "outlined",
 			color: "info",
-			class: `${s.info} ${c.info} ${o.info} border-info/50 focus:bg-info/10 hover:bg-info/10`
+			class: `${c.info} ${l.info} ${s.info} border-info/50 focus:bg-info/10 hover:bg-info/10`
 		},
 		{
 			variant: "outlined",
 			color: "warning",
-			class: `${s.warning} ${c.warning} ${o.warning} border-warning/50 focus:bg-warning/10 hover:bg-warning/10`
+			class: `${c.warning} ${l.warning} ${s.warning} border-warning/50 focus:bg-warning/10 hover:bg-warning/10`
 		},
 		{
 			variant: "outlined",
 			color: "error",
-			class: `${s.error} ${c.error} ${o.error} border-error/50 focus:bg-error/10 hover:bg-error/10`
+			class: `${c.error} ${l.error} ${s.error} border-error/50 focus:bg-error/10 hover:bg-error/10`
 		},
 		{
 			variant: "outlined",
 			color: "default",
-			class: `${s.default} ${c.default} ${o.default} border-foreground/50 focus:bg-foreground/10 hover:bg-foreground/10`
+			class: `${c.default} ${l.default} ${s.default} border-foreground/50 focus:bg-foreground/10 hover:bg-foreground/10`
 		},
 		{
 			variant: "link",
 			color: "primary",
-			class: `${s.primary} ${c.primary} ${o.primary} underline-offset-4 hover:underline hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+			class: `${c.primary} ${l.primary} ${s.primary} underline-offset-4 hover:underline hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 		},
 		{
 			variant: "link",
 			color: "secondary",
-			class: `${s.secondary} ${c.secondary} ${o.secondary} underline-offset-4 hover:underline hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+			class: `${c.secondary} ${l.secondary} ${s.secondary} underline-offset-4 hover:underline hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 		},
 		{
 			variant: "link",
 			color: "success",
-			class: `${s.success} ${c.success} ${o.success} underline-offset-4 hover:underline hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+			class: `${c.success} ${l.success} ${s.success} underline-offset-4 hover:underline hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 		},
 		{
 			variant: "link",
 			color: "info",
-			class: `${s.info} ${c.info} ${o.info} underline-offset-4 hover:underline hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+			class: `${c.info} ${l.info} ${s.info} underline-offset-4 hover:underline hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 		},
 		{
 			variant: "link",
 			color: "warning",
-			class: `${s.warning} ${c.warning} ${o.warning} underline-offset-4 hover:underline hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+			class: `${c.warning} ${l.warning} ${s.warning} underline-offset-4 hover:underline hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 		},
 		{
 			variant: "link",
 			color: "error",
-			class: `${s.error} ${c.error} ${o.error} underline-offset-4 hover:underline hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+			class: `${c.error} ${l.error} ${s.error} underline-offset-4 hover:underline hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 		},
 		{
 			variant: "link",
 			color: "default",
-			class: `${s.default} ${c.default} ${o.default} underline-offset-4 hover:underline hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
+			class: `${c.default} ${l.default} ${s.default} underline-offset-4 hover:underline hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
 		}
 	]
-}), T = ((e) => w(e?.variant === "ghost" && e.color === null ? {
+}), g = ((e) => h(e?.variant === "ghost" && e.color === null ? {
 	...e,
 	color: void 0
-} : e)), E = {
+} : e)), _ = {
 	filled: {
 		primary: "fill-primary",
 		secondary: "fill-secondary dark:fill-[color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))]",
@@ -287,62 +257,62 @@ var w = r("inline-flex size-9 center gap-2 cursor-pointer whitespace-nowrap text
 		default: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50"
 	}
 };
-function D({ shape: t, variant: n, color: r }) {
-	let i = d(t), a = m(null);
-	return C(a, i, !0), /* @__PURE__ */ h("svg", {
+function v({ shape: n, variant: r, color: i }) {
+	let a = u(n), o = f(null);
+	return t(o, a, !0), /* @__PURE__ */ p("svg", {
 		"data-slot": "icon-button-shape",
 		viewBox: "0 0 100 100",
 		"aria-hidden": "true",
 		focusable: "false",
-		className: e("-z-10 pointer-events-none absolute inset-0 size-full overflow-visible transition-[filter]", n === "filled" && "group-hover/icon-button:brightness-90 group-active/icon-button:brightness-80"),
-		children: /* @__PURE__ */ h("path", {
-			ref: a,
-			d: f(i),
+		className: e("-z-10 pointer-events-none absolute inset-0 size-full overflow-visible transition-[filter]", r === "filled" && "group-hover/icon-button:brightness-90 group-active/icon-button:brightness-80"),
+		children: /* @__PURE__ */ p("path", {
+			ref: o,
+			d: d(a),
 			vectorEffect: "non-scaling-stroke",
 			paintOrder: "stroke",
-			className: e("stroke-transparent stroke-1 transition-[fill]", E[n][r], "group-focus-visible/icon-button:stroke-ring/50 group-focus-visible/icon-button:stroke-[6px]", "forced-colors:fill-none forced-colors:stroke-[ButtonText] forced-colors:group-focus-visible/icon-button:stroke-[Highlight]")
+			className: e("stroke-transparent stroke-1 transition-[fill]", _[r][i], "group-focus-visible/icon-button:stroke-ring/50 group-focus-visible/icon-button:stroke-[6px]", "forced-colors:fill-none forced-colors:stroke-[ButtonText] forced-colors:group-focus-visible/icon-button:stroke-[Highlight]")
 		})
 	});
 }
 //#endregion
 //#region lib/components/ui/actions/icon-button/icon-button.tsx
-function O({ variant: r, color: i, className: o, asChild: s, type: c = "button", shape: l, morph: u = "pill", children: d, ...f }) {
-	let p = s ? n : "button";
-	return /* @__PURE__ */ h(a, {
+function y({ variant: t, color: i, className: a, asChild: s, type: c = "button", shape: l, morph: u = "pill", children: d, ...f }) {
+	let h = s ? r : "button";
+	return /* @__PURE__ */ p(o, {
 		value: !!(f["aria-label"] || f["aria-labelledby"]),
-		children: /* @__PURE__ */ g(p, {
+		children: /* @__PURE__ */ m(h, {
 			"data-slot": "icon-button",
 			"data-icon-button": "",
-			"data-variant": r,
+			"data-variant": t,
 			"data-color": i,
 			type: s ? void 0 : c,
 			"data-shape": l,
 			"data-morph": !l && u !== "none" && f["aria-pressed"] !== void 0 ? u : void 0,
-			className: e(T({
-				variant: r,
+			className: e(g({
+				variant: t,
 				color: i
-			}), l && "group/icon-button relative isolate bg-transparent! border-0! shadow-none! ring-0! focus-visible:ring-0! aria-invalid:ring-0! forced-colors:[&_svg]:stroke-[ButtonText] forced-colors:[&_svg]:text-[ButtonText]", o),
+			}), l && "group/icon-button relative isolate bg-transparent! border-0! shadow-none! ring-0! focus-visible:ring-0! aria-invalid:ring-0! forced-colors:[&_svg]:stroke-[ButtonText] forced-colors:[&_svg]:text-[ButtonText]", a),
 			...f,
-			children: [l ? /* @__PURE__ */ h(D, {
+			children: [l ? /* @__PURE__ */ p(v, {
 				shape: l,
-				variant: r ?? "filled",
-				color: i ?? (r === "ghost" ? "default" : "primary")
-			}) : null, /* @__PURE__ */ h(t, { children: d })]
+				variant: t ?? "filled",
+				color: i ?? (t === "ghost" ? "default" : "primary")
+			}) : null, /* @__PURE__ */ p(n, { children: d })]
 		})
 	});
 }
-function k({ tooltip: e, "aria-label": t, ...n }) {
+function b({ tooltip: e, "aria-label": t, ...n }) {
 	let r = t ?? (typeof e == "string" ? e : void 0);
-	return e ? /* @__PURE__ */ h(i, {
+	return e ? /* @__PURE__ */ p(a, {
 		content: e,
-		children: /* @__PURE__ */ h(O, {
+		children: /* @__PURE__ */ p(y, {
 			"aria-label": r,
 			...n
 		})
-	}) : /* @__PURE__ */ h(O, {
+	}) : /* @__PURE__ */ p(y, {
 		"aria-label": r,
 		...n
 	});
 }
 //#endregion
-export { T as n, C as r, k as t };
+export { g as n, b as t };

package/dist/lib/components/ui/display/shape/use-shape-morph.d.ts

@@ -1,5 +1,6 @@
 import { Outline } from '@nxgt/material-core/shapes';
 import { RefObject } from 'react';
+export declare const SETTLE_MS = 520;
 export declare function spring(ms: number): number;
 /**
  * Morphs the path in `ref` whenever `outline` changes, frame by frame

package/dist/lib/components/ui/widgets/drawing/drawing-a11y.d.ts

@@ -0,0 +1,20 @@
+export type RootRole = 'img' | 'group' | 'none';
+type Attrs = Record<string, string | number | undefined>;
+/** The root `<svg>`: decorative, a named image, or a named group when a node inside is interactive. */
+export declare function rootRole(o: {
+    decorative?: boolean;
+    interactive: boolean;
+}): RootRole;
+export declare function rootA11y(role: RootRole, title: string | undefined): Record<string, string>;
+/**
+ * An interactive node is a focusable `button` (it has a click) or `img`, named
+ * by its label. A node with only a label is a named `img`, unless the root
+ * already is one (its parts are then presentational).
+ */
+export declare function nodeA11y(o: {
+    interactive: boolean;
+    clickable: boolean;
+    label?: string;
+    root: RootRole;
+}): Attrs;
+export {};

package/dist/lib/components/ui/widgets/drawing/drawing-context.d.ts

@@ -0,0 +1,23 @@
+import { DrawNode, Scene } from '@nxgt/material-core/draw';
+import { RootRole } from './drawing-a11y.js';
+import { NodeClick } from './drawing-types.js';
+/** What a `Drawing` hands the primitives inside it. */
+export type DrawingContextValue = {
+    /** The root's role: a primitive's label is a name only when the root is a group. */
+    root: RootRole;
+    decorative: boolean;
+    exactText: boolean;
+    onNodeClick?: NodeClick;
+    /** An interactive primitive calls it when it mounts, so the root becomes a group. */
+    register: () => () => void;
+    /**
+     * A plugin's hook: every primitive passes its node through it before it is
+     * compiled (`Sketch` of `@nxgt/material/draw/sketch` draws it by hand). It
+     * must be pure and deterministic, so the server and the client agree.
+     */
+    transform?: (node: DrawNode) => DrawNode;
+    /** The same for a whole `scene` given to a `Drawing`. */
+    transformScene?: (scene: Scene) => Scene;
+};
+export declare const DrawingContext: import('react').Context<DrawingContextValue>;
+export declare const useDrawingContext: () => DrawingContextValue;

package/dist/lib/components/ui/widgets/drawing/drawing-types.d.ts

@@ -0,0 +1,63 @@
+import { Paint, Scene } from '@nxgt/material-core/draw';
+import { ComponentProps, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent, ReactNode } from 'react';
+/** The events one drawn node takes: set per scene id (`handlers`) or as props of a JSX primitive. */
+export type NodeHandlers = {
+    onClick?: (event: MouseEvent<SVGGElement>) => void;
+    onPointerEnter?: (event: PointerEvent<SVGGElement>) => void;
+    onPointerLeave?: (event: PointerEvent<SVGGElement>) => void;
+    onPointerDown?: (event: PointerEvent<SVGGElement>) => void;
+    onPointerUp?: (event: PointerEvent<SVGGElement>) => void;
+    onFocus?: (event: FocusEvent<SVGGElement>) => void;
+    onBlur?: (event: FocusEvent<SVGGElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<SVGGElement>) => void;
+};
+/** Called with the node's scene `id` when an interactive node is clicked, or activated with Enter or Space. */
+export type NodeClick = (id: string, event: MouseEvent<SVGGElement>) => void;
+/** The root takes a name or is decorative, never neither: the type enforces it. */
+export type DrawingName = {
+    title: string;
+    decorative?: never;
+} | {
+    decorative: true;
+    title?: never;
+};
+type Root = Omit<ComponentProps<'svg'>, 'children' | 'style' | 'title' | 'role' | 'width' | 'height' | 'viewBox' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'>;
+type Shared = Root & {
+    /**
+     * Refines the line breaks of wrapped text (`maxWidth`) with the browser's
+     * own font metrics once mounted. The first render, on the server and on the
+     * client, uses Inter's metrics. Default true.
+     */
+    exactText?: boolean;
+};
+/** A drawing from a `Scene` of plain data (`scene(...)` from `@nxgt/material/draw`). */
+export type SceneDrawingProps = Shared & {
+    scene: Scene;
+    /** Events by node `id`. A node with an entry is interactive. */
+    handlers?: Record<string, NodeHandlers>;
+    /** A click or Enter or Space on any interactive node. */
+    onNodeClick?: NodeClick;
+    w?: never;
+    h?: never;
+    children?: never;
+};
+/** A drawing from JSX primitives (`Rect`, `Path`, `Text`...). */
+export type JsxDrawingProps = Shared & {
+    w: number;
+    h: number;
+    viewBox?: [number, number, number, number];
+    /** A paint behind everything (a rect covering the view box). */
+    background?: Paint;
+    /**
+     * Set it when a primitive is interactive and the drawing is server
+     * rendered: the root is then `role="group"` in the first markup too. (The
+     * client switches to it by itself once a primitive mounts.)
+     */
+    interactive?: boolean;
+    onNodeClick?: NodeClick;
+    children?: ReactNode;
+    scene?: never;
+    handlers?: never;
+};
+export type DrawingProps = (SceneDrawingProps | JsxDrawingProps) & DrawingName;
+export {};

package/dist/lib/components/ui/widgets/drawing/drawing.d.ts

@@ -0,0 +1,17 @@
+import { DrawingProps } from './drawing-types.js';
+/**
+ * A vector drawing. Give it a `scene` (plain data from `scene(...)` and the
+ * builders of `@nxgt/material/draw`) or `w`, `h` and primitives (`Rect`, `Path`,
+ * `Text`...) as children. A `title` names it (`role="img"`, or `"group"` when a
+ * node inside is interactive) or `decorative` hides it: one of the two, by type.
+ * Colours are theme roles (`primary-container`, `on-surface`...) that follow
+ * light and dark with no inline style, so a strict CSP is satisfied.
+ *
+ * ```tsx
+ * <Drawing w={200} h={80} title="Status">
+ *   <Rect x={0} y={0} w={200} h={80} r={16} fill="primary-container" />
+ *   <Text x={100} y={46} anchor="middle" fill="on-primary-container">Shipped</Text>
+ * </Drawing>
+ * ```
+ */
+export declare function Drawing(props: DrawingProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/drawing/index.d.ts

@@ -0,0 +1,5 @@
+export { Drawing } from './drawing.js';
+export type { DrawingName, DrawingProps, JsxDrawingProps, NodeClick, NodeHandlers, SceneDrawingProps, } from './drawing-types.js';
+export { Group, Image, Text } from './partials/primitives/content.js';
+export { Path, type PathProps } from './partials/primitives/path.js';
+export { Circle, Ellipse, Line, Polygon, Rect, } from './partials/primitives/shapes.js';

package/dist/lib/components/ui/widgets/drawing/partials/drawing-root.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { RootRole } from '../drawing-a11y.js';
+type Props = {
+    role: RootRole;
+    title?: string;
+    /** `width`, `height` and `viewBox`. */
+    attrs: Record<string, string | number>;
+    rest: Record<string, unknown>;
+    children: ReactNode;
+};
+/**
+ * The `<svg>`: named as an image or a group, or hidden. Made with
+ * `createElement`: the role is data (drawing-a11y.ts), and there is never a
+ * `<title>` (React 19 would hoist it into the document head).
+ */
+export declare function DrawingRoot({ role, title, attrs, rest, children }: Props): import('react').ReactSVGElement;
+export {};

package/dist/lib/components/ui/widgets/drawing/partials/interactive-node.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { RootRole } from '../drawing-a11y.js';
+import { NodeClick, NodeHandlers } from '../drawing-types.js';
+type Props = {
+    /** The node's scene `id`, written as `data-id`. */
+    id?: string;
+    label?: string;
+    handlers: NodeHandlers;
+    onNodeClick?: NodeClick;
+    root: RootRole;
+    /** A group with JSX children has no outline copy: it gets the CSS outline instead. */
+    outline?: boolean;
+    children: ReactNode;
+};
+/**
+ * The focusable wrapper of an interactive node: `role="button"` when it can be
+ * clicked, `role="img"` otherwise, with its label as name. Enter and Space
+ * click it. `createElement`, not JSX: the roles are set from data, and a
+ * native `<button>` cannot live in an SVG.
+ */
+export declare function InteractiveNode(props: Props): ReactNode;
+export {};

package/dist/lib/components/ui/widgets/drawing/partials/primitives/content.d.ts

@@ -0,0 +1,20 @@
+import { group, image, text } from '@nxgt/material-core/draw';
+import { ReactNode } from 'react';
+import { NodeHandlers } from '../../drawing-types.js';
+type TextOptions = Parameters<typeof text>[1];
+type GroupStyle = Parameters<typeof group>[0];
+type ImageOptions = Parameters<typeof image>[0];
+/** `<Text x y size anchor maxWidth ...>Hello</Text>`: the children are the text (`\n` breaks a line). */
+export declare function Text(props: TextOptions & NodeHandlers & {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * `<Group transform fill ...>...</Group>`: its style passes down to the
+ * children, which are JSX. An interactive group shows its focus as a CSS outline.
+ */
+export declare function Group(props: GroupStyle & NodeHandlers & {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** `<Image href x y w h fit alt ... />` */
+export declare function Image(props: ImageOptions & NodeHandlers): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/widgets/drawing/partials/primitives/path.d.ts

@@ -0,0 +1,29 @@
+import { DrawNode, PathBuilder, Style } from '@nxgt/material-core/draw';
+import { NodeHandlers } from '../../drawing-types.js';
+type Arrows = Extract<DrawNode, {
+    type: 'path';
+}>['arrow'];
+type Source = {
+    d: string;
+    build?: never;
+    node?: never;
+} | {
+    build: (p: PathBuilder) => PathBuilder | undefined;
+    d?: never;
+    node?: never;
+}
+/** A ready node, such as `shape('cookie-9', ...)` from the shapes library; the other props override its style. */
+ | {
+    node: DrawNode;
+    d?: never;
+    build?: never;
+};
+export type PathProps = Style & {
+    arrow?: Arrows;
+} & NodeHandlers & Source;
+/**
+ * `<Path d="M0 0 L10 10" />`, `<Path build={(p) => p.moveTo(0, 0).lineTo(10, 10)} />`
+ * or `<Path node={shape(...)} />`.
+ */
+export declare function Path(props: PathProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/widgets/drawing/partials/primitives/primitive.d.ts

@@ -0,0 +1,19 @@
+import { DrawNode } from '@nxgt/material-core/draw';
+import { ReactNode } from 'react';
+import { NodeHandlers } from '../../drawing-types.js';
+/** Splits a primitive's props into its events and the rest (the node's own). */
+export declare function splitEvents<P extends NodeHandlers>(props: P): [NodeHandlers, Omit<P, keyof NodeHandlers>];
+type Props = {
+    node: DrawNode;
+    events: NodeHandlers;
+    /** JSX children of a group, drawn inside it. */
+    slot?: ReactNode;
+};
+/**
+ * Draws one node: the core builder made it, `compileNode` turns it into
+ * elements (its gradients and clips become local `<defs>` under an id of this
+ * instance), `SvgTree` maps them. A node with events, or `interactive`, is
+ * focusable and makes the root a group.
+ */
+export declare function Primitive({ node, events, slot }: Props): import("react").JSX.Element;
+export {};