@nxgt/material 3.20.0 → 3.22.0

package/lib/backgrounds/css-react/icons.css

@@ -4,7 +4,10 @@
  * its constellation threads and its motion. A scene holds no `style`: an icon
  * carries a tone class (`k1..k3`, colours in scene.css) and the root carries
  * `ic-so0..ic-so10` and `ic-so85` (a duotone icon's second layer, in tenths, or 0.85) and, for
- * `duotone: 'tones'`, `ic-tones`.
+ * `duotone: 'tones'`, `ic-tones`. The rules are keyed on `icons` and `shapes`
+ * (the `shapes` preset with `motif.icons` draws the same icons). The
+ * tint (`ic-c-one`, `ic-c-palette`) is icons-tint.css; `ic-c-classic` is the
+ * tones below at full strength.
  *
  * The sprites read `--fa-primary-color`, `--fa-secondary-color` and
  * `--fa-secondary-opacity`; custom properties inherit into the `<use>` copy.
@@ -17,6 +20,7 @@
 @import "../css/motifs.css";
 
 @import "./icons-quiet.css";
+@import "./icons-tint.css";
 
 @layer components {
 	[data-background="icons"] > [data-layer="wash"] {
@@ -35,95 +39,158 @@
 			);
 	}
 
-	[data-background="icons"] > [data-scene] {
+	:is([data-background="icons"], [data-background="shapes"]) > [data-scene] {
 		overflow: hidden;
 	}
 
 	/* Primary layer: the icon's tone. Second layer: the same tone, faded. */
-	[data-background="icons"] > [data-scene] .ic.k1 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic.k1 {
 		--fa-primary-color: var(--nxgt-bg-c1);
 		--fa-secondary-color: var(--nxgt-bg-c1);
 	}
-	[data-background="icons"] > [data-scene] .ic.k2 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic.k2 {
 		--fa-primary-color: var(--nxgt-bg-c2);
 		--fa-secondary-color: var(--nxgt-bg-c2);
 	}
-	[data-background="icons"] > [data-scene] .ic.k3 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic.k3 {
 		--fa-primary-color: var(--nxgt-bg-c3);
 		--fa-secondary-color: var(--nxgt-bg-c3);
 	}
 
 	/* Two tones: the second layer takes the next tone. */
-	[data-background="icons"] > [data-scene] > .ic-tones .ic.k1 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-tones
+		.ic.k1 {
 		--fa-secondary-color: var(--nxgt-bg-c2);
 	}
-	[data-background="icons"] > [data-scene] > .ic-tones .ic.k2 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-tones
+		.ic.k2 {
 		--fa-secondary-color: var(--nxgt-bg-c3);
 	}
-	[data-background="icons"] > [data-scene] > .ic-tones .ic.k3 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-tones
+		.ic.k3 {
 		--fa-secondary-color: var(--nxgt-bg-c1);
 	}
 
 	/* The second layer's opacity, in tenths (`secondaryOpacity`). */
-	[data-background="icons"] > [data-scene] > .ic-so0 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so0
+		.ic {
 		--fa-secondary-opacity: 0;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so1 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so1
+		.ic {
 		--fa-secondary-opacity: 0.1;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so2 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so2
+		.ic {
 		--fa-secondary-opacity: 0.2;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so3 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so3
+		.ic {
 		--fa-secondary-opacity: 0.3;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so4 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so4
+		.ic {
 		--fa-secondary-opacity: 0.4;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so5 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so5
+		.ic {
 		--fa-secondary-opacity: 0.5;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so6 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so6
+		.ic {
 		--fa-secondary-opacity: 0.6;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so7 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so7
+		.ic {
 		--fa-secondary-opacity: 0.7;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so8 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so8
+		.ic {
 		--fa-secondary-opacity: 0.8;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so9 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so9
+		.ic {
 		--fa-secondary-opacity: 0.9;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so10 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so10
+		.ic {
 		--fa-secondary-opacity: 1;
 	}
 	/* 0.85: the default of two tones, or a `secondaryOpacity` of 0.85. */
-	[data-background="icons"] > [data-scene] > .ic-so85 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so85
+		.ic {
 		--fa-secondary-opacity: 0.85;
 	}
 
 	/* The constellation's threads and dots. */
-	[data-background="icons"] > [data-scene] .ic-ln {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-ln {
 		stroke: var(--nxgt-bg-c1);
 		stroke-width: 0.7;
 		stroke-linecap: round;
 		opacity: 0.4;
 	}
-	[data-background="icons"] > [data-scene] .ic-dt {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-dt {
 		fill: var(--nxgt-bg-c1);
 		opacity: 0.5;
 	}
-	[data-background="icons"] > [data-scene] .ic-ln.k2 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-ln.k2 {
 		stroke: var(--nxgt-bg-c2);
 	}
-	[data-background="icons"] > [data-scene] .ic-ln.k3 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-ln.k3 {
 		stroke: var(--nxgt-bg-c3);
 	}
-	[data-background="icons"] > [data-scene] .ic-dt.k2 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-dt.k2 {
 		fill: var(--nxgt-bg-c2);
 	}
-	[data-background="icons"] > [data-scene] .ic-dt.k3 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-dt.k3 {
 		fill: var(--nxgt-bg-c3);
 	}
 }
@@ -151,26 +218,26 @@
 	}
 
 	@layer components {
-		[data-background="icons"][data-animated] > [data-scene] .ia {
+		[data-background][data-animated] > [data-scene] .ia {
 			animation: nxgt-bg-ic-1 18s ease-in-out infinite alternate
 				var(--nxgt-bg-play, running);
 		}
-		[data-background="icons"][data-animated] > [data-scene] .iv2 {
+		[data-background][data-animated] > [data-scene] .iv2 {
 			animation-name: nxgt-bg-ic-2;
 		}
-		[data-background="icons"][data-animated] > [data-scene] .iv3 {
+		[data-background][data-animated] > [data-scene] .iv3 {
 			animation-name: nxgt-bg-ic-3;
 		}
-		[data-background="icons"][data-animated] > [data-scene] .iv4 {
+		[data-background][data-animated] > [data-scene] .iv4 {
 			animation-name: nxgt-bg-ic-4;
 		}
-		[data-background="icons"][data-animated] > [data-scene] .id2 {
+		[data-background][data-animated] > [data-scene] .id2 {
 			animation-delay: -4s;
 		}
-		[data-background="icons"][data-animated] > [data-scene] .id3 {
+		[data-background][data-animated] > [data-scene] .id3 {
 			animation-delay: -9s;
 		}
-		[data-background="icons"][data-animated] > [data-scene] .id4 {
+		[data-background][data-animated] > [data-scene] .id4 {
 			animation-delay: -13s;
 		}
 	}

package/lib/components/background-shared.css

@@ -0,0 +1,5 @@
+/* What the Background in `/components` always needs: the base, the gradient
+ * preset and the motion rules. Imported once by components/components.css. */
+@import "../backgrounds/css/base.css";
+@import "../backgrounds/css/gradient.css";
+@import "../backgrounds/css/motion.css";

package/lib/components/components.css

@@ -56,6 +56,7 @@
 @import "./ui/layout/app-shell/route-transition.css";
 @import "./ui/layout/app-shell/activity-backdrop.css";
 @import "./ui/layout/app-shell/activity-backdrop-shapes.css";
+@import "./ui/layout/auth-card/auth-card-backdrop.css";
 /* DataTable cards and tiles: the item shell (hairline, tint, start bar, columns by the list's width). */
 @import "./ui/collections/data-table/data-table-items.css";
 @import "./ui/collections/data-table/data-table-items-compact.css";
@@ -192,12 +193,8 @@
 /* Gallery: the View Transition from a tile to its lightbox. */
 @import "./ui/media/galleries/gallery-transitions.css";
 @import "./print-only.css";
-@import "./ui/fields/attributes/attribute-form/attribute-form.css";
-@import "./ui/fields/attributes/attribute-values-form/attribute-values-form.css";
-/* Background (from /components): the gradient preset's CSS, plain and shared
- * (lib/backgrounds/css). The other presets are opt-in: backgrounds.css. */
-@import "../backgrounds/css/base.css";
-@import "../backgrounds/css/gradient.css";
-@import "../backgrounds/css/motion.css";
+@import "./ui/fields/attributes/attributes.css";
+/* Background: the gradient preset's CSS, shared (lib/backgrounds/css); the other presets are opt-in: backgrounds.css. */
+@import "./background-shared.css";
 @import "./ui/widgets/drawing/drawing.css"; /* @nxgt/material/draw: role colours, focus ring */
 @import "./ui/widgets/drawing/drawing-animate.css";

package/lib/components/ui/display/chip/chip-parts.css

@@ -1,5 +1,5 @@
 /* Chip: focus, the dismiss button (drawn
- * small, a 24x24 target through ::after, its own ring), disabled, the dashed
+ * small in a 24x24 box, 44x44 on a coarse pointer, its own ring), disabled, the dashed
  * "add" chip and the tones. */
 @layer components {
 	/* Focus: the chip's ring (2px primary-text, 2px away); the ✕ its own. */
@@ -8,54 +8,41 @@
 		outline-color: var(--primary-text);
 		outline-width: 2px;
 	}
+	/* The ✕ is drawn small (--chip-x), but its own box is the target (#1584):
+	 * axe's `target-size` reads the bounding box, never a pseudo-element. The
+	 * box is 24x24 (44x44 on a coarse pointer, #1067, #1102); the padding with
+	 * `background-clip: content-box` keeps the hover disc and the focus ring at
+	 * the drawn size, and the negative margin takes the extra back, so the chip
+	 * and the glyph are unchanged. */
 	.nxgt-chip > [data-slot="chip-dismiss"] {
+		--chip-hit: 24px;
+		--chip-pad: calc((var(--chip-hit) - var(--chip-x)) / 2);
 		position: relative;
 		display: inline-grid;
 		place-items: center;
 		flex: none;
-		width: var(--chip-x);
-		height: var(--chip-x);
-		padding: 0;
+		box-sizing: border-box;
+		width: var(--chip-hit);
+		height: var(--chip-hit);
+		margin: calc(-1 * var(--chip-pad));
+		padding: var(--chip-pad);
 		border: 0;
 		border-radius: 9999px;
 		background: transparent;
+		background-clip: content-box;
 		color: color-mix(in oklab, var(--foreground) 62%, transparent);
 		cursor: pointer;
 		/* Width 0 at rest: forced colours would paint a transparent outline. */
 		outline: 0 solid transparent;
-		outline-offset: 1px;
+		outline-offset: calc(1px - var(--chip-pad));
 		transition:
 			background-color 120ms ease-out,
 			color 120ms ease-out,
 			outline-color 120ms ease-out;
 	}
-	.nxgt-chip > [data-slot="chip-dismiss"]::after {
-		content: "";
-		position: absolute;
-		inset: calc((var(--chip-x) - 24px) / 2);
-		border-radius: 9999px;
-	}
-	/* Touch (#1067, #1102): on a coarse pointer the ✕ is a real 44x44 box,
-	 * not a pseudo-element, which a tap-target check and axe do not measure.
-	 * The negative margin takes the extra back, so the chip is unchanged, and
-	 * the padding with `background-clip: content-box` keeps the hover disc
-	 * and the focus ring at the drawn size (the outline is pulled in by the
-	 * padding). */
 	@media (pointer: coarse) {
 		.nxgt-chip > [data-slot="chip-dismiss"] {
-			--chip-pad: calc((44px - var(--chip-x)) / 2);
-			box-sizing: border-box;
-			width: 44px;
-			height: 44px;
-			margin: calc(-1 * var(--chip-pad));
-			padding: var(--chip-pad);
-			background-clip: content-box;
-			outline-offset: calc(1px - var(--chip-pad));
-		}
-		/* The box is the target now: the 24px pseudo-element would reach
-		 * past it. */
-		.nxgt-chip > [data-slot="chip-dismiss"]::after {
-			inset: 0;
+			--chip-hit: 44px;
 		}
 	}
 	.nxgt-chip > [data-slot="chip-dismiss"] > svg {

package/lib/components/ui/fields/attributes/attributes.css

@@ -0,0 +1,3 @@
+/* The attribute forms' styles, imported once by components/components.css. */
+@import "./attribute-form/attribute-form.css";
+@import "./attribute-values-form/attribute-values-form.css";

package/lib/components/ui/layout/app-shell/activity-backdrop-shapes.css

@@ -18,7 +18,7 @@
 		visibility: hidden;
 	}
 
-	/* A shape over the page's text or controls fades out and comes back once
+	/* A shape over the page's text, controls or surfaces (cards, tables, lists) fades out and comes back once
 	 * clear (watch-content.ts): it is hidden, never moved. A compound body (the
 	 * moon, the planet, the eclipse: `.pt.mg`) is hidden whole, with its halo
 	 * (`.pt.mh`). The scene stays invisible until the first check, so nothing

package/lib/components/ui/layout/auth-card/auth-card-backdrop.css

@@ -0,0 +1,30 @@
+/* An AuthCard's backdrop (auth-card-backdrop.tsx) keeps its shapes the way
+ * ActivityLayout's does (activity-backdrop-shapes.css): whole inside its layer
+ * and clear of the card and the brand row. Plain CSS in `@layer components`. */
+@layer components {
+	[data-slot="auth-card-backdrop"] > [data-background] {
+		width: 100%;
+		height: 100%;
+	}
+	/* The scene stays hidden until the first pass; a shape that crosses the
+	 * layer's edge is hidden, never cut. */
+	[data-slot="auth-card-backdrop"] [data-background]:not([data-checked]) .mo,
+	[data-slot="auth-card-backdrop"] [data-background] .mo > [data-outside] {
+		visibility: hidden;
+	}
+	/* A shape over the card or the brand row fades out (watch-content.ts). */
+	[data-slot="auth-card-backdrop"] [data-background] .mo > *,
+	[data-slot="auth-card-backdrop"] [data-background] .pt {
+		transition: opacity 150ms ease;
+	}
+	[data-slot="auth-card-backdrop"] [data-background] .mo > [data-hidden],
+	[data-slot="auth-card-backdrop"] [data-background] .pt[data-hidden] {
+		opacity: 0 !important;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		[data-slot="auth-card-backdrop"] [data-background] .mo > *,
+		[data-slot="auth-card-backdrop"] [data-background] .pt {
+			transition: none;
+		}
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.20.0",
+	"version": "3.22.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -12,7 +12,8 @@
 	},
 	"type": "module",
 	"bin": {
-		"nxgt-theme": "./bin/nxgt-theme.js"
+		"nxgt-theme": "./bin/nxgt-theme.js",
+		"nxgt-backdrop-sprite": "./bin/nxgt-backdrop-sprite.js"
 	},
 	"files": [
 		"bin",
@@ -324,6 +325,10 @@
 			"style": "./lib/backgrounds/css-react/icons-quiet.css",
 			"default": "./lib/backgrounds/css-react/icons-quiet.css"
 		},
+		"./backgrounds/icons-tint.css": {
+			"style": "./lib/backgrounds/css-react/icons-tint.css",
+			"default": "./lib/backgrounds/css-react/icons-tint.css"
+		},
 		"./backgrounds/illustrated.css": {
 			"style": "./lib/backgrounds/css-react/illustrated.css",
 			"default": "./lib/backgrounds/css-react/illustrated.css"
@@ -357,7 +362,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.33.0",
+		"@nxgt/material-core": "^0.34.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",

package/dist/background-Ce7M5V42.js

@@ -1,250 +0,0 @@
-import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
-import { t } from "./is-production-GLw59WU8.js";
-import { n, r } from "./icon-sprites-FxHyqyhg.js";
-import { a as i, t as a } from "./theme-context-Cofk6vgs.js";
-import { t as o } from "./compose-refs-DZ0iIVF-.js";
-import { t as s } from "./use-background-activity-KxQgelFF.js";
-import { t as c } from "./scene-svg-DJKa5vsg.js";
-import { n as l, r as u, t as d } from "./scene-options-CCy3V7XS.js";
-import { Suspense as f, lazy as p, memo as m, useId as ee, useMemo as h, useRef as g } from "react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import { IconRefError as b, resolveIconStyles as x, resolveIcons as S } from "@nxgt/material-core/icons";
-import { SCENE_LAYER as C, buildBackgroundScene as w, presetLayers as T, resolveBackgroundPreset as E, svgIdPrefix as D } from "@nxgt/material-core/backgrounds";
-//#region lib/backgrounds/background/available.ts
-var O = [
-	"gradient",
-	"grain",
-	"mesh",
-	"aurora",
-	"spotlight",
-	"bokeh",
-	"rays",
-	"halo",
-	"plasma",
-	"glass",
-	"ripples",
-	"blobs",
-	"paper",
-	"linen",
-	"concrete",
-	"marble"
-], k = [
-	"isometric",
-	"blueprint",
-	"dots",
-	"stripes",
-	"low-poly",
-	"topography",
-	"waves",
-	"hexagons",
-	"circuit",
-	"graph-paper",
-	"checker",
-	"diagonal-checker",
-	"chevrons"
-], A = [
-	"shapes",
-	"confetti-grid",
-	"constellation",
-	"halftone",
-	"truchet",
-	"floating",
-	"scatter-icons",
-	"school",
-	"night-sky",
-	"bubbles",
-	"leaves",
-	"science",
-	"music",
-	"travel",
-	"sport",
-	"moon",
-	"icons"
-], j = [
-	"eclipse",
-	"meteor-shower",
-	"ringed-planet",
-	"northern-lights"
-], M = (e) => j.includes(e), N = [
-	...O,
-	...k,
-	...A,
-	...j
-], P = p(() => import("./icons-scene-BpIauJ5d.js"));
-function F(e) {
-	return /* @__PURE__ */ v("div", {
-		"data-scene": "",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ v(f, {
-			fallback: null,
-			children: /* @__PURE__ */ v(P, { ...e })
-		})
-	});
-}
-//#endregion
-//#region lib/backgrounds/background/partials/background-layers.tsx
-var I = p(() => import("./celestial-scene-DaOsRFF3.js")), L = m(function({ preset: e, scene: t, grain: n, sky: r, icons: i, ...a }) {
-	return /* @__PURE__ */ y(_, { children: [
-		T(e).map((n) => n === C ? i ? /* @__PURE__ */ v(F, { ...i }, n) : M(e) ? /* @__PURE__ */ v("div", {
-			"data-scene": "",
-			"data-celestial": "",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ v(f, {
-				fallback: null,
-				children: /* @__PURE__ */ v(I, {
-					name: e,
-					as: "preset",
-					...a
-				})
-			})
-		}, n) : t && /* @__PURE__ */ v("div", {
-			"data-scene": "",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ v(c, { node: t })
-		}, n) : /* @__PURE__ */ v("div", {
-			"data-layer": n,
-			"aria-hidden": "true"
-		}, n)),
-		r && /* @__PURE__ */ v("div", {
-			"data-layer": "sky-scene",
-			"data-scene": "",
-			"data-celestial": "",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ v(f, {
-				fallback: null,
-				children: /* @__PURE__ */ v(I, {
-					name: r,
-					as: "sky",
-					base: e,
-					...a
-				})
-			})
-		}),
-		n && /* @__PURE__ */ v("div", {
-			"data-overlay": "grain",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ v(c, { node: n })
-		})
-	] });
-});
-//#endregion
-//#region lib/backgrounds/background/partials/icons-check.ts
-function R(e, t) {
-	try {
-		return e !== void 0 && S(e), x(t), null;
-	} catch (e) {
-		if (e instanceof b) return e.message;
-		throw e;
-	}
-}
-//#endregion
-//#region lib/backgrounds/background/partials/icons-keys.ts
-var z = Object.keys({
-	layout: 1,
-	sizeRange: 1,
-	rotation: 1,
-	duotone: 1,
-	secondaryOpacity: 1,
-	calm: 1,
-	quiet: 1
-});
-function B(e) {
-	return JSON.stringify(Object.fromEntries(z.flatMap((t) => e?.[t] === void 0 ? [] : [[t, e[t]]])));
-}
-//#endregion
-//#region lib/backgrounds/background/partials/use-icons-scene.ts
-function V(e, { icons: i, iconStyle: a, iconMotif: o, seed: s, animated: c }) {
-	let l = r(), u = n(), d = JSON.stringify(i ?? null), f = JSON.stringify(a ?? null), p = B(o), m = h(() => {
-		if (e !== "icons") return null;
-		let n = R(JSON.parse(d) ?? void 0, JSON.parse(f) ?? void 0);
-		return n && !t() && console.warn(`Background: icons cannot be drawn (${n}); drawing "scatter-icons" instead.`), n;
-	}, [
-		e,
-		d,
-		f
-	]) ? "scatter-icons" : e;
-	return {
-		preset: m,
-		iconsScene: h(() => m === "icons" ? {
-			seed: s,
-			iconsKey: d,
-			styleKey: f,
-			motifKey: p,
-			spriteBase: l,
-			edition: u,
-			animated: c
-		} : void 0, [
-			m,
-			s,
-			d,
-			f,
-			p,
-			l,
-			u,
-			c
-		])
-	};
-}
-//#endregion
-//#region lib/backgrounds/background/background.tsx
-var H = /* @__PURE__ */ e({ Background: () => K }), U = (e) => console.warn(e);
-function W(e, t, n, r, i, a) {
-	return e === "grain" ? null : w(e, u(t, n, r, i, a));
-}
-function G(e, t) {
-	return w("grain", {
-		idPrefix: `${e}-grain`,
-		seed: t
-	});
-}
-function K({ children: e, ref: n, preset: r, tone: c, intensity: u, animated: f, grain: p, seed: m, motif: _, moon: b, sky: x, icons: S, iconStyle: C, iconMotif: w, fill: T = "viewport", ...O }) {
-	let k = i()?.background || a, A = r ?? k.preset, j = c ?? k.tone ?? a.tone, M = u ?? k.intensity ?? a.intensity, P = f ?? k.animated ?? !1, F = p ?? k.grain ?? !1, I = m ?? k.seed ?? 0, R = _ ?? k.motif, z = b ?? k.moon, B = x ?? k.sky, H = g(null), K = h(() => o(H, n), [n]), q = s(H, P), J = D(ee()), { preset: Y, iconsScene: te } = V(E(A, N, t() ? void 0 : U), {
-		icons: S ?? k.icons,
-		iconStyle: C ?? k.iconStyle,
-		iconMotif: w ?? k.iconMotif,
-		seed: I,
-		animated: P
-	}), X = F || Y === "grain", Z = R?.shapes ? [...new Set(R.shapes)].sort().join(",") : void 0, Q = JSON.stringify(l(R)), $ = JSON.stringify(d(z)), ne = h(() => W(Y, J, I, Z, Q, $), [
-		Y,
-		J,
-		I,
-		Z,
-		Q,
-		$
-	]), re = h(() => X ? G(J, I) : null, [
-		X,
-		J,
-		I
-	]);
-	return /* @__PURE__ */ y("div", {
-		"data-slot": "background",
-		...O,
-		ref: K,
-		"data-background": Y === "grain" ? "gradient" : Y,
-		"data-preset": Y,
-		"data-tone": j,
-		"data-intensity": M,
-		"data-fill": T === "container" ? T : void 0,
-		"data-animated": P ? "" : void 0,
-		"data-grain": X ? "" : void 0,
-		"data-sky": B,
-		"data-paused": P && q ? "" : void 0,
-		children: [/* @__PURE__ */ v(L, {
-			preset: Y,
-			scene: ne,
-			grain: re,
-			sky: B,
-			idPrefix: J,
-			seed: I,
-			shapesKey: Z,
-			scalarsKey: Q,
-			moonKey: $,
-			icons: te
-		}), /* @__PURE__ */ v("div", {
-			"data-slot": "background-content",
-			children: e
-		})]
-	});
-}
-//#endregion
-export { H as n, N as r, K as t };