@nxgt/material 3.7.5 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @nxgt/material
 
+## 3.8.0
+
+### Minor Changes
+
+- [#1377](https://github.com/softistx/nxgt-material/pull/1377) [`298d942`](https://github.com/softistx/nxgt-material/commit/298d9426760889742c1875fec8db46cd5c30a1fc) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Background` draws the new `moon` preset (45 ids in `AVAILABLE_BACKGROUND_PRESETS`): a thin crescent in a tertiary halo among nine sparse stars, silver in dark and a faint multiplied crescent in light, halved in a container under 640 px wide, fading with `intensity`, with stars that twinkle when `animated` (and never under `prefers-reduced-motion`). Its stylesheet is `@nxgt/material/backgrounds/moon.css`, also in `backgrounds.css`. `Background` takes a `moon` prop (`position`, `phase`, `halo`) and reads the theme's. React only. The Blue moon theme now draws it, whole inside an ActivityLayout's content column.
+
+- [#1374](https://github.com/softistx/nxgt-material/pull/1374) [`48760f4`](https://github.com/softistx/nxgt-material/commit/48760f4db88df316f35fb628767d5a4d5c36b2bf) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Theme stylesheets and zones. `@nxgt/material/themes/<name>.css` ships the 14 presets (`lavande`, `ocean`, `foret`, `ambre`, `ardoise`, `corail`, `menthe`, `prune`, `sable`, `slate`, `pink`, `bleumono`, `bluemoon`, `teal`), each under `[data-nxgt-theme="<name>"]` on `<html>` or on any element (a zone), with light and dark (`.dark`, `[data-theme="dark"]` on the zone or an ancestor). Import it after `styles.css`. An app that adds nothing keeps the Lavande tokens on `:root` (the page colours themselves change with the plain neutrals, see the migration note). For zones to work, `styles.css` now maps its colours and radius with `@theme inline` (a utility reads `var(--primary)` where it is used; the `--color-*` a page uses are still emitted), and the tone, field-box, toast and sidebar tokens that are derived from the theme's colours are re-declared on `[data-nxgt-theme]` too. A zone paints its own text (`color: var(--foreground)`), and a zone with a forced mode (`data-theme`) also its own background. See the migration note for the behaviour changes.
+
+- [#1373](https://github.com/softistx/nxgt-material/pull/1373) [`224d117`](https://github.com/softistx/nxgt-material/commit/224d1174fa254ced227113ecef1f6994fa2ba657) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The theme name in `useTheme()`. It gains `themeName` and `setThemeName(name)`: the name is stored under its own key, `nxgt-theme` (JSON, apart from the mode's `theme`), set as `data-nxgt-theme` on `<html>` (Lavande, the default, takes the attribute off), shared by every reader and followed across tabs. On the server and while hydrating it reads `lavande`, so there is no hydration mismatch. `@nxgt/material/hooks` also exports `ThemeName` (augmentable through `NxgtThemes`, like `AppTones`), `DEFAULT_THEME`, `resolveThemeName` and `applyThemeName`. An app that never calls `setThemeName` gets no `data-nxgt-theme` from this. The theming guide's boot-script section now uses `themeBootScript`, re-exported by `@nxgt/material/themes`.
+
+- [#1378](https://github.com/softistx/nxgt-material/pull/1378) [`eb7dc52`](https://github.com/softistx/nxgt-material/commit/eb7dc52f0f15a104a921bf268cfc7325fce48673) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ThemePicker`, in its own entry `@nxgt/material/theme-picker` (it reaches the toggle, the icons and the i18n bundles, which would swell `/themes`), with its own opt-in stylesheet, `@import "@nxgt/material/theme-picker.css"` after `styles.css` (about 3.3 KB gzipped, not part of `styles.css`): a radiogroup of theme tiles, each drawn in its own theme (three swatches and a mini background, from CSS, no inline style) beside the light / dark / system control. Arrow keys move the choice; the selected tile has the tint, start bar and primary-text look. Props: `themes` (default the provider's registry), `value` and `onValueChange` (controlled, else stored through the provider), `showMode`, `showBackground`, `layout` (`'grid'` or `'list'`). Names come from each theme's `label` in the current language; the new keys are `material.theme-picker.label` and `material.theme-picker.mode` (en and fr).
+
+- [#1376](https://github.com/softistx/nxgt-material/pull/1376) [`770083b`](https://github.com/softistx/nxgt-material/commit/770083b0b68481bc7d8b08b67004a04811117b45) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `@nxgt/material/themes`: `NxgtThemeProvider` (at the root: the registry, the persisted theme name and `<html data-nxgt-theme>`, no element of its own), `NxgtTheme` (a zone in another theme, with `mode` and `asChild`), `useThemeContext`, `defineTheme`, the 14 presets and `ThemeName`. A `Background` from `@nxgt/material/backgrounds` with no props takes its `preset`, `tone`, `intensity`, `seed`, `motif`, `grain` and `animated` from the nearest theme; an explicit prop still wins. `ActivityLayout` draws the theme's background by default, in the backdrop layer with the frosted chrome (loaded on demand, so `@nxgt/material/components` does not grow); `backdrop` stays as the exception, a node overriding it for one screen. Under Lavande, or with no provider, the page differs only by its background (the migration note's fourth change) and the markup by one attribute, `data-slot="activity-content-header"` on the content header card (see the migration note for the `backdrop={false}` change). `NxgtThemes` lists all 14 preset names.
+
+- [#1375](https://github.com/softistx/nxgt-material/pull/1375) [`6fb5eb0`](https://github.com/softistx/nxgt-material/commit/6fb5eb04e8663658a70d1bf40cbdda1689212886) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Generate an app's themes at build time. `nxgtMaterial({ themes: { entries, outDir?, types?, boot?, onWarning? } })` loads the app's `defineTheme()` modules with Vite's module runner, writes `<name>.css` and `nxgt-themes.d.ts` (the `AppTones` and `NxgtThemes` augmentation) when their bytes change, watches them in dev, and injects the theme boot script first in `<head>` for the CSP pass to hash. A new `nxgt-theme` command (`build`, `check`, `inspect`) does the same for non-Vite builds and CI: `check` exits 1 when a generated file is stale or a contrast pair fails; `.ts` entries run on Node 22.18 or newer, with no loader. It ships as a `bin` in both packages (`@nxgt/material-core/theme/cli`, Node only). Both warn when a tone is declared in one theme and missing from another. `@nxgt/material/vite` re-exports `NxgtMaterialThemesOptions`. The browser `/theme` entry does not grow.
+
+- [#1380](https://github.com/softistx/nxgt-material/pull/1380) [`a9bd60d`](https://github.com/softistx/nxgt-material/commit/a9bd60df207145e4500f59cf203c568156c22c03) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Migration note for the themes release (four behaviour changes, no API removed):
+  
+  - **A wrapper that overrides `--color-*` no longer recolours utilities.** `styles.css` now maps colours with `@theme inline`, so `bg-primary` reads `var(--primary)` where it is used, not a `--color-primary` computed once on `:root`. Setting `--color-primary` (or another `--color-*`) on a wrapper therefore leaves `bg-primary`, `text-primary-text` and the components below it unchanged. Set the token instead (`--primary` on the wrapper), or better, use a theme: `defineTheme()` and `@nxgt/material/themes/<name>.css` on `<html>` or on a `<NxgtTheme>` zone (see the theming guide, "From token overrides to a theme"). `--color-*` is still emitted, for app CSS that reads `var(--color-primary)`.
+  - **`ActivityLayout` `backdrop={false}` now draws a plain page.** It used to draw the built-in gradient. Leave `backdrop` out to keep the gradient (or the theme's background); pass a node to override it for one screen.
+  - **`class="dark"`, `data-theme="dark"` or a token such as `--primary:` on a sub-element (not `<html>`) now recolours the utilities below it.** Utilities used to read a colour computed once on `:root`; they now read the token where they sit. Search your app for those three on a non-root selector or element: a nested dark card or a scoped brand colour that used to change nothing now shows.
+  
+  **The default page background is now white in light and a shared night in dark.** Lavande, like every preset, no longer tints the page at its colour: `--background` is `oklch(1 0 0)` in light (was `oklch(0.973 0.008 293.9)`, a lavender) and `oklch(0.15 0.026 273)` in dark (was `oklch(0.192 0.016 290.5)`), the same night for all themes; the dark card, muted, border and input layers are lifted from it by the same steps and keep a light tint of the theme. Set `neutrals: 'tinted'` on a theme to keep the tinted page (`defineTheme({ ..., neutrals: 'tinted' })`); an app that pins `--background` itself is unaffected.
+  
+  An app that adds no theme and keeps no such override renders as before, apart from the page background (the fourth change) and one added attribute, `data-slot="activity-content-header"`, on `ActivityLayout`'s content header card.
+
+- [#1392](https://github.com/softistx/nxgt-material/pull/1392) [`defd05a`](https://github.com/softistx/nxgt-material/commit/defd05a2489f16c841b2a2478fd4af2bb868c7e9) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Themes: plain neutrals by default. `defineTheme` takes `neutrals: 'plain' | 'tinted'` (default `'plain'`, merged through `extends`) and `generatePalette(seeds, neutrals?)` follows it. Plain: the page is pure white in light and one shared night, `oklch(0.15 0.026 273)`, in dark for every theme; the dark card, muted, border and input layers are lifted from the night (+0.040, +0.078, +0.109, +0.148) and keep a light tint of the theme, the light layers stay tinted, and the AA guarantee holds on the new surfaces (property tests run both settings). Tinted: the page tinted at the neutral hue, as before. All 14 presets, Lavande included, use the default, so `lib/components/theme-tokens.css` and `lib/themes/*.css` change; set `neutrals: 'tinted'` to keep a tinted page.
+
+- [#1385](https://github.com/softistx/nxgt-material/pull/1385) [`fc63253`](https://github.com/softistx/nxgt-material/commit/fc632534c8f559e349ee89f279c591d0636d9bc3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Themes: the first-visit mode, one writer for `<html data-nxgt-theme>`, and a stricter `defineTheme`.
+  
+  - A theme's `colorScheme` is now the mode of a first visit (nothing stored). `themeBootScript` takes `schemes` (a theme name to its mode; the presets' are built in, so `bluemoon` opens dark) and keeps `defaultMode` as the app's own override; `nxgtMaterial({ themes })` fills `schemes` from your themes. `useTheme()` resolves an empty stored mode the same way, through `NxgtThemeProvider` (its new `defaultMode` prop, else the active theme's `colorScheme`) or `useTheme({ defaultMode })`, so the page, `useTheme().theme`, `CodeBlock` and `ThemeToggle` agree. Choosing `system` stores `"system"` when a first visit would not be `system`.
+  - `useTheme().themeName` reads the nearest provider or zone first, so under `<NxgtThemeProvider defaultTheme="ocean">` with nothing stored it is `ocean`.
+  - `NxgtThemeProvider` is the only writer of `<html data-nxgt-theme>` while mounted: `setThemeName` of a name it does not know is ignored (with a warning in development), a key cleared in another tab resolves to its default, and it leaves the boot script's attribute alone while hydrating.
+  - `defineTheme` throws a `ThemeDefinitionError` (`name`) naming an unknown top-level key, such as `seeds` for `colors`.
+  - `NxgtTheme` `mode` is `'dark'` only (a light zone in a dark page was never supported), and a `data-theme` you pass is kept when `mode` is left out.
+  - `@nxgt/material/themes` also exports `themeBootScript`, `THEME_BOOT_SCRIPT` and `ThemeDefinitionError`, so an app imports everything from material. `@nxgt/material-core/theme/boot` exports `DEFAULT_THEME_NAME` and `THEME_NAME_PATTERN`.
+  - A `.dark` or `[data-theme="dark"]` element below a theme zone now takes that theme's dark tokens (each theme's dark block gains `[data-nxgt-theme="x"] :is(.dark, [data-theme="dark"])`), not Lavande's; the nearest nested zone wins. Regenerate your own theme files (`nxgt-theme build`).
+  - The media player's glass drawer and lightbox keep their muted text colour.
+  - `@nxgt/material-core/backgrounds/activity` exports `observeBackgroundActivity` alone, so `@nxgt/material/components` no longer reaches the background engine at import.
+
+### Patch Changes
+
+- [#1391](https://github.com/softistx/nxgt-material/pull/1391) [`cca157b`](https://github.com/softistx/nxgt-material/commit/cca157b684bf9732ceca7a826c061f8810fbd1c5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - An `ActivityLayout` `backdrop` node that is a `Background` now keeps its discrete shapes whole, as the theme's background does: a shape that would be cut at the content column's edge or drawn under the app bar band is hidden instead.
+
+- [#1394](https://github.com/softistx/nxgt-material/pull/1394) [`0138a76`](https://github.com/softistx/nxgt-material/commit/0138a76f5c3635cc0be14d2d3d9b09c57db285ba) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `setThemeName` now applies the new theme's mode to `<html>`. `NxgtThemeProvider` puts the resolved mode (`.dark` and `color-scheme`) on `<html>` once past hydration, so `setThemeName('bluemoon')` with no stored mode turns the page dark, and back to `ocean` light, without a `ThemeToggle` mounted (`ThemeToggle` applies it itself only when there is no provider). Without a provider, `useTheme()` also falls back to the stored library preset's `colorScheme`, as the boot script does; an app's own theme still needs the provider or `defaultMode`.
+
+- [#1393](https://github.com/softistx/nxgt-material/pull/1393) [`044ac25`](https://github.com/softistx/nxgt-material/commit/044ac25d4724d624a5094cc8ee0896b38edef9e7) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActivityLayout` with `scroll="container"` and a backdrop: scrolling the content region no longer shifts the breadcrumb's band, which sits outside the region, so a shape is no longer hidden under a ghost band lower on the page.
+- Updated dependencies [[`298d942`](https://github.com/softistx/nxgt-material/commit/298d9426760889742c1875fec8db46cd5c30a1fc), [`6fb5eb0`](https://github.com/softistx/nxgt-material/commit/6fb5eb04e8663658a70d1bf40cbdda1689212886), [`a9bd60d`](https://github.com/softistx/nxgt-material/commit/a9bd60df207145e4500f59cf203c568156c22c03), [`defd05a`](https://github.com/softistx/nxgt-material/commit/defd05a2489f16c841b2a2478fd4af2bb868c7e9), [`fc63253`](https://github.com/softistx/nxgt-material/commit/fc632534c8f559e349ee89f279c591d0636d9bc3)]:
+  - @nxgt/material-core@0.28.0
+
 ## 3.7.5
 
 ### Patch Changes

package/README.md

@@ -91,7 +91,7 @@ and [maps](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/maps.md) gu
 
 The tarball is the built `dist/`, plus the Tailwind source stylesheet
 (`lib/styles.css` and the component stylesheets it imports,
-`lib/components/**/*.css`), `lib/map/map.css`, `lib/backgrounds/backgrounds.css`, `lib/galleries/galleries.css`, `lib/backgrounds/css/*.css`, `docs/` and, from the release
+`lib/components/**/*.css`), `lib/map/map.css`, `lib/backgrounds/backgrounds.css`, `lib/galleries/galleries.css`, `lib/backgrounds/css/*.css`, `lib/themes/*.css`, `lib/theme-picker/*.css`, `docs/` and, from the release
 after 2.6.1, `CHANGELOG.md`. There is no `postinstall` build.
 
 ## Setup
@@ -163,7 +163,9 @@ into a tarball. A missing sheet renders nothing, with no error and no fallback.
 | `@nxgt/material/draw` | Vector drawing: a scene of plain data or JSX primitives drawn as accessible, themeable SVG that is safe under a strict CSP and identical on the server and in the browser. `Drawing` (`DrawingProps`, `NodeHandlers`; `scene` or `w`/`h` with children; a `title` or `decorative`, enforced by the type), the primitives `Rect`, `Ellipse`, `Circle`, `Line`, `Polygon`, `Path` (takes `node`), `Text`, `Group` and `Image`, and the builders of `@nxgt/material-core/draw` re-exported by name (`scene`, `rect`, `ellipse`, `circle`, `line`, `polygon`, `path`, `text`, `group`, `image`, `linear`, `radial`, `pattern`, `hatch`, `tone`, `toSVG`, `compileScene`, `ROLES`, `DRAW_PALETTE`, and the types `Scene`, `DrawNode`, `Paint`, `Role`, `ToneRef`), plus Material 3 Expressive's shapes (`shape`, `morph`, `SHAPE_NAMES`, `toCubics`) and the layout helpers (`bbox`, `stack`, `grid`, `align`, `distribute`) re-exported by name. Colours are theme roles (`primary-container`, `on-surface`...) mapped to classes in `styles.css`, so import it. Interactive nodes are focusable `button`s with a focus ring; wrapped text is re-measured by the browser once mounted. **Its own entry, client-only** (render `Drawing` from a `'use client'` file; the builders and `toSVG` run anywhere), not in the barrel above ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md)) |
 | `@nxgt/material/draw/sketch` | The sketchy, hand-drawn style for a drawing: `Sketch` (`seed`, `roughness`, `bowing`, `fill`: `hachure`, `cross-hatch`, `solid` or `none`, `hachureAngle`, `hachureGap`, `strokeWidth`) wraps a `Drawing`, or primitives inside one, and draws shapes as double wobbling strokes with hatched fills; `sketch(sceneOrNode, options)` does it to plain data for `toSVG`. Seeded, so the server and the client draw the same lines; ids, labels, focus rings and events keep working. **Its own entry, client-only** (render `Sketch` from a `'use client'` file), not in the barrel above ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md#sketch)) |
 | `@nxgt/material/map` | Leaflet maps, markers, a location field — **its own entry, not in the barrel, and browser-only** ([maps guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/maps.md)) |
-| `@nxgt/material/backgrounds` | Background presets: `Background` (a superset of the `/components` one: `preset`, `animated`, `grain`, `seed`, `fill` and `motif`), `AVAILABLE_BACKGROUND_PRESETS` and `AvailableBackgroundPreset` (the 44 ids `Background` draws), `MOTIF_SHAPES_ALL` (the 22 motif shapes), the types and tables (`BACKGROUND_PRESETS`, `BACKGROUND_TONES`, ...) re-exported from `@nxgt/material-core/backgrounds`; its own entry, with an opt-in stylesheet ([backgrounds guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/backgrounds.md)) |
+| `@nxgt/material/themes` | `NxgtThemeProvider` (the registry, the persisted theme name, `<html data-nxgt-theme>`, `defaultMode`; renders no element; `useTheme({ defaultMode })` takes the first-visit mode too), `NxgtTheme` (a zone in another theme, `mode`, `asChild`), `useThemeContext`, `defineTheme`, `ThemeDefinitionError`, `themeBootScript` and `THEME_BOOT_SCRIPT` (with `ThemeBootOptions`), the 14 presets and `THEME_PRESETS`, `ThemeName` and `NxgtThemes` (augmentable), with the `NxgtThemeProps`, `NxgtThemeProviderProps`, `ThemeContextValue`, `Theme`, `ThemeDefinition` and `ThemeBackground` types ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md#the-provider-and-zones)). `Background` and `ActivityLayout` take their background from the nearest theme |
+| `@nxgt/material/theme-picker` | `ThemePicker`, the theme and mode chooser (swatches and a mini background per theme; `themes`, `value`, `onValueChange`, `showMode`, `showBackground`, `layout`) and `ThemePickerProps`; its own entry so `/themes` stays small ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md#let-users-choose)) |
+| `@nxgt/material/backgrounds` | Background presets: `Background` (a superset of the `/components` one: `preset`, `animated`, `grain`, `seed`, `fill` and `motif`), `AVAILABLE_BACKGROUND_PRESETS` and `AvailableBackgroundPreset` (the 45 ids `Background` draws), `MoonOptions` (the `moon` prop), `MOTIF_SHAPES_ALL` (the 22 motif shapes), the types and tables (`BACKGROUND_PRESETS`, `BACKGROUND_TONES`, ...) re-exported from `@nxgt/material-core/backgrounds`; its own entry, with an opt-in stylesheet ([backgrounds guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/backgrounds.md)) |
 | `@nxgt/material/editor` | The rich text editor: `DocumentEditor` and `DocumentEditorFormField` (with an `outline`, a block handle, focus mode, find and replace, `onUpload`, `onAssist` and `comments`), `CompactEditor` and `CompactEditorFormField`, `RichChatComposer`, `EditorRoot` and the parts (`EditorToolbar`, `EditorContent`, `EditorFooter`, `EditorAssistantPanel`, ...), `useEditor`, the kits (`documentKit`, `compactKit`, `chatKit`, `formNodesKit`), `withFeatures` / `withoutFeatures` and `defineFeature`, and the converters `toHtml`, `toJson`, `toMarkdown`, `fromMarkdown` and `looksLikeMarkdown` — **its own entry, and not in the barrel above**. **Client-only**: import it from a `'use client'` file; `/editor/viewer` is the server-safe one. The `.nxgt-prose` page styles ship in `styles.css` with the component CSS ([DocumentEditor](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#documenteditor)) |
 | `@nxgt/material/editor/viewer` | `RichTextViewer`: shows a saved document (HTML, JSON or Markdown) read-only, **server-safe**, with no editor instance and no `'use client'` ([RichTextViewer](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#richtextviewer)) |
 | `@nxgt/material/code-editor` | `CodeEditor`, `CodeEditorFormField` and `CodeDiff` on Monaco, their theme presets (`theme`: `'app'`, `'moonlight'`, `'soft'`, `CODE_THEMES`), `defineCodeTheme` for your own, the `CodeMarker` and `CodeMarkerSeverity` types of the `markers` prop, `CodeEditorHandle` (its `ref`), `CodeFile` (its `files`), and `configureMonaco` to bundle Monaco instead of loading it from the CDN. **Client-only**: import it from a `'use client'` file. They are no longer exported from the barrels (removed in 3.0; [guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/code-editor.md)) |
@@ -172,7 +174,7 @@ into a tarball. A missing sheet renders nothing, with no error and no fallback.
 | `@nxgt/material/media-hls` | `hlsStreaming()` (options `HlsStreamingOptions`, module type `HlsModule`), the HLS adapter for `MediaPlayer`'s `streaming` prop: `hls.js` (an optional peer) loaded lazily wherever the browser has MSE, native HLS otherwise (or with `preferNative`), its levels as the quality menu; its own entry ([streaming guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/media-streaming.md)) |
 | `@nxgt/material/draw/animate` | Animation for `/draw`: `drawOn(scene)` traces strokes and `appear(scene)` fades nodes in, one after the next (`staggerSteps`; they add class names that `styles.css` animates, so a server renders them and there is no inline style); `useDrawingControls(ref)` replays, pauses, plays and finishes them (Web Animations); `morphScenes(a, b, t)`, `useSceneMorph(from, to, active)` and `MorphDrawing` (`from`, `to`, `active`) spring one scene into another. All stop under reduced motion and show the last frame; its own entry, client-only for the hooks ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md#animate), [reference](https://cdn.jsdelivr.net/npm/@nxgt/material-core@0/docs/draw.md#animation-nxgtmaterial-coredrawanimate)) |
 | `@nxgt/material/draw/png` | `drawingToPng(sceneOrSvg, { scale?, background?, colorsFrom? })` and `downloadDrawingPng(source, fileName)` — a drawing (a scene, or a live `<svg>` such as `svgRef.current` of a `<Drawing ref={svgRef}>`) as a PNG `Blob` in the browser, with the page's theme colours resolved, `data:` images inlined and CORS errors named; its own entry, DOM only when called ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md#png), [reference](https://cdn.jsdelivr.net/npm/@nxgt/material-core@0/docs/draw.md#png-nxgtmaterial-coredrawpng)) |
-| `@nxgt/material/vite` | build-time helpers for consumers: `nxgtMaterial()` (a strict CSP by hash or nonce, self-hosted fonts, a styles check, serves the pdf.js worker on the Vite 5–7 dev server, PDFs on a bundled server with `nxgtMaterial({ pdf: { bundle: true } })`: [Vite plugin guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/vite-plugin.md)), `pdfkitStandardFonts()` ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md)), `cspAssetsInlineLimit`, a `build.assetsInlineLimit` that never inlines a font ([CSP guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/csp.md#katex-fonts)) |
+| `@nxgt/material/vite` | build-time helpers for consumers: `nxgtMaterial()` (a strict CSP by hash or nonce, self-hosted fonts, a styles check, serves the pdf.js worker on the Vite 5–7 dev server, generates your app themes' stylesheets with `nxgtMaterial({ themes })` and the `nxgt-theme` bin: [Themes guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/themes.md), PDFs on a bundled server with `nxgtMaterial({ pdf: { bundle: true } })`: [Vite plugin guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/vite-plugin.md)), `pdfkitStandardFonts()` ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md)), `cspAssetsInlineLimit`, a `build.assetsInlineLimit` that never inlines a font ([CSP guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/csp.md#katex-fonts)) |
 | `@nxgt/material/next` | `withNxgtPrint(nextConfig)`: the `next.config.ts` a Next.js route handler that imports `/print` needs, `output: 'standalone'` included. Node only, no dependency on `next` ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md#nextjs-serverexternalpackages-and-output-standalone)) |
 | `@nxgt/material/hooks` | `useTheme`, `useIsClient`, `useIsMobile`, `useLocalizedDate`, `useCspNonce`, `useFocusOnMount`, `useSubmitOnce`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/helpers.md#nxgtmaterialhooks)) |
 | `@nxgt/material/dnd` | `@dnd-kit` primitives ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/helpers.md#nxgtmaterialdnd)) |
@@ -184,6 +186,35 @@ into a tarball. A missing sheet renders nothing, with no error and no fallback.
 | `@nxgt/material/map.css` | leaflet's stylesheet, for the apps that use `./map`. Not part of `styles.css` |
 | `@nxgt/material/galleries.css` | the Gallery's shaped tiles (`shape`, `preset="shaped"`): `clip-path: shape()` for twelve shapes, about 9 KB gzipped. Opt-in, not part of `styles.css`; without it a shaped tile keeps a rounded corner |
 | `@nxgt/material/backgrounds.css` | every background preset's CSS, for the apps that use `./backgrounds`; `@nxgt/material/backgrounds/<preset>.css` loads one (the illustrated scenes share `backgrounds/illustrated.css`). Not part of `styles.css` |
+| `@nxgt/material/theme-picker.css` | the tiles of `ThemePicker` (the mini backgrounds included), for the apps that use `@nxgt/material/theme-picker`. Import it after `styles.css`. Not part of `styles.css` |
+| `@nxgt/material/themes/<name>.css` | one shipped theme (`lavande`, `ocean`, `foret`, `ambre`, `ardoise`, `corail`, `menthe`, `prune`, `sable`, `slate`, `pink`, `bleumono`, `bluemoon`, `teal`) under `[data-nxgt-theme="<name>"]`, on `<html>` or on a zone. Import it after `styles.css`. Not part of `styles.css`: the default Lavande stays in `:root` ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md#themes)) |
+
+### Themes
+
+Fourteen ready-made themes ship as stylesheets, and your own come from
+`defineTheme()` ([Themes for your app](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/themes.md)). Import one after `styles.css`, name it on `<html>`
+and let users choose:
+
+```css
+@import "@nxgt/material/styles.css";
+@import "@nxgt/material/themes/ocean.css";
+@import "@nxgt/material/theme-picker.css"; /* only with ThemePicker */
+```
+
+```tsx
+import { NxgtTheme, NxgtThemeProvider } from '@nxgt/material/themes';
+import { ThemePicker } from '@nxgt/material/theme-picker';
+
+<NxgtThemeProvider defaultTheme="ocean">
+  <ThemePicker />
+  <NxgtTheme theme="prune" mode="dark">a dark Prune zone</NxgtTheme>
+</NxgtThemeProvider>
+```
+
+The theme name is stored beside the mode (`useTheme().setThemeName`), and
+`Background` and `ActivityLayout` draw the theme's background. A wrapper that
+overrides `--color-*` no longer recolours utilities: use a theme or set
+`--primary` ([migration](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md#from-token-overrides-to-a-theme)).
 
 ## Usage
 
@@ -352,7 +383,8 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | --- | --- |
 | [Forms](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/forms.md) | wiring fields to React Hook Form and Zod, composite values (contacts, opening hours), config-driven `Field`, server errors, what each field emits |
 | [i18n](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/i18n.md) | adding your strings next to the package's, switching language, translated Zod messages, SSR without a text mismatch |
-| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md) | laying out an app with `ActivityLayout` (route changes cross-fade by default, `routeTransition={false}` opts out), its `items` (rendered as links; `linkComponent` to pass your own), the brand (`logo`, `name`, and `context` for the phone sheet's tenant line), the header's title, a route's `handle.title` as the page's `h1` in the app bar (`AppShellHandle`, `PageTitle`; it labels `<main>`, and `usePageTitleFocus()` focuses it after a navigation), and `AccountMenu`, the active entry and breadcrumbs (needs a data router; `breadcrumbRoot` replaces the home icon with a text link), the `<main>` landmark, the `h1` title, document scrolling, and a background preset behind the shell (`backdrop`) |
+| [App shell](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md) | laying out an app with `ActivityLayout` (route changes cross-fade by default, `routeTransition={false}` opts out; it draws the theme's background, `backdrop` is the exception and `backdrop={false}` a plain page), its `items` (rendered as links; `linkComponent` to pass your own), the brand (`logo`, `name`, and `context` for the phone sheet's tenant line), the header's title, a route's `handle.title` as the page's `h1` in the app bar (`AppShellHandle`, `PageTitle`; it labels `<main>`, and `usePageTitleFocus()` focuses it after a navigation), and `AccountMenu`, the active entry and breadcrumbs (needs a data router; `breadcrumbRoot` replaces the home icon with a text link), the `<main>` landmark, the `h1` title, document scrolling, and a background preset behind the shell (`backdrop`) |
+| [Themes for your app](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/themes.md) | defining app themes, generating their stylesheets and types with the Vite plugin's `themes` option or the `nxgt-theme` command, the CI check |
 | [Theming](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md) | changing colours, radius or fonts, motion and corner tokens, dark mode, tones (the `data-tone` channel, app tones and the calm zone `data-density="calm"`), touch targets, using the compiled CSS without Tailwind |
 | [Printing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md) | producing PDFs with `@nxgt/material/print` and getting the file in one call (download, new tab, preview, server `Response`) — its own entry since 2.0.0, with optional peers, a bundling trap on SSR servers, and the `next.config.ts` a Next.js route handler (and `output: 'standalone'`) needs |
 | [Maps](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/maps.md) | using `@nxgt/material/map` — browser-only, optional leaflet peers, `map.css` |
@@ -394,6 +426,7 @@ Not components: what the stylesheet gives any element.
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
 | — | [`animate-*` classes](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/animations.md) | Tailwind 4 animations and their modifiers, pure CSS: `animate-fade-in-up animate-duration-500 animate-delay-200`, with the Material 3 springs by default. Entrances and exits, attention seekers, loops and ambient motion, stagger (`animate-stagger-100`), text reveals, scroll-driven animation (`animate-on-view`) and appear/disappear (`animate-appear-*`); under reduced motion a short fade, or no motion for loops and scroll. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/foundations-themes-themepicker.webp" width="120" alt="ThemePicker"> | [`ThemePicker`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/foundations.md#themepicker) (from `@nxgt/material/theme-picker`) | A radiogroup of theme tiles, each previewing its own theme (three swatches and a mini background, drawn by CSS) beside the light / dark / system control; `grid` or `list` layout, controlled or stored. | — |
 
 ### Primitives
 
@@ -568,7 +601,7 @@ Not components: what the stylesheet gives any element.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb`, `AppBreadcrumbItem`, `AppBreadcrumbSeparator` | App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page; entries are real links, and `linkComponent` swaps the link; `backdrop` puts a `/backgrounds` preset behind it in place of the gradient. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb`, `AppBreadcrumbItem`, `AppBreadcrumbSeparator` | App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page; entries are real links, and `linkComponent` swaps the link; it draws the theme's background (Lavande's is the gradient), `backdrop` puts a `/backgrounds` preset behind it for one screen, and `backdrop={false}` draws a plain page. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-accountmenu.webp" width="120" alt="AccountMenu"> | [`AccountMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#accountmenu) | The app bar's avatar menu: named after the account, the name and e-mail, the app's links, then an optional Theme choice (`themeChoice`) and a destructive Sign out with a busy state. | `AccountMenu` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-authcard.webp" width="120" alt="AuthCard"> | [`AuthCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#authcard) | The frame of a signed-out page: one `main`, a centred card whose title is the `h1` (focusable on an end state), a status or alert notice, a brand and toolbar row, safe-area padding. | `AuthCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-sidebar.webp" width="120" alt="Sidebar"> | [`Sidebar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#sidebar), `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenuItem`, `SidebarMenuLabel` | Collapsible navigation sidebar with icons, tooltips and active items. | `Sidebar` (same parts) |
@@ -585,7 +618,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-steps.webp" width="120" alt="Steps"> | [`Steps`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#steps), `StepsItem` | Numbered editorial steps that stay visible on every breakpoint. | `Steps`, `StepsItem` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions. | `Hero` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its children; 44 presets on `/backgrounds`. | `Background` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its children; 45 presets on `/backgrounds`. | `Background` |
 | — | [`NavigationRail`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#navigationrail) | Placeholder: renders an empty rail container and takes no props yet. | `NavigationRail` |
 
 ### Overlays & menus

package/bin/nxgt-theme.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+// pnpm and bun link only a project's direct dependencies' bins, so the
+// command ships here too; it is core's.
+import { run } from '@nxgt/material-core/theme/cli';
+
+await run();

package/dist/{async-slice-o_fpqeGX.js → async-slice-DDjaJY_F.js}

@@ -1,5 +1,5 @@
-import { a as e, i as t, t as n } from "./stored-language-Bb7yX5uE.js";
-import { r } from "./translator-or2y0JJB.js";
+import { i as e, r as t, t as n } from "./stored-language-BeIKw3-K.js";
+import { r } from "./translator-DCYO4Ij3.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

package/dist/background--Bf_EbFR.js

@@ -0,0 +1,159 @@
+import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
+import { t } from "./is-production-GLw59WU8.js";
+import { a as n, t as r } from "./theme-context-BagPvRcz.js";
+import { t as i } from "./compose-refs-DZ0iIVF-.js";
+import { t as a } from "./use-background-activity-KxQgelFF.js";
+import { createElement as o, memo as s, useId as c, useMemo as l, useRef as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { SCENE_LAYER as m, buildBackgroundScene as h, presetLayers as g, resolveBackgroundPreset as _, svgIdPrefix as v } from "@nxgt/material-core/backgrounds";
+//#region lib/backgrounds/background/available.ts
+var y = [
+	"gradient",
+	"grain",
+	"mesh",
+	"aurora",
+	"spotlight",
+	"bokeh",
+	"rays",
+	"halo",
+	"plasma",
+	"glass",
+	"ripples",
+	"blobs",
+	"paper",
+	"linen",
+	"concrete",
+	"marble"
+], b = [
+	"isometric",
+	"blueprint",
+	"dots",
+	"stripes",
+	"low-poly",
+	"topography",
+	"waves",
+	"hexagons",
+	"circuit",
+	"graph-paper",
+	"checker",
+	"diagonal-checker",
+	"chevrons"
+], x = [
+	"shapes",
+	"confetti-grid",
+	"constellation",
+	"halftone",
+	"truchet",
+	"floating",
+	"scatter-icons",
+	"school",
+	"night-sky",
+	"bubbles",
+	"leaves",
+	"science",
+	"music",
+	"travel",
+	"sport",
+	"moon"
+], S = [
+	...y,
+	...b,
+	...x
+], C = /^(aria|data)-/, w = (e) => e === "class" ? "className" : C.test(e) ? e : e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), T = s(function e({ node: t }) {
+	let n = Object.fromEntries(Object.entries(t.attrs).map(([e, t]) => [w(e), t]));
+	return o(t.tag, n, ...(t.children ?? []).map((t, n) => /* @__PURE__ */ f(e, { node: t }, n)));
+}), E = s(function({ preset: e, scene: t, grain: n }) {
+	return /* @__PURE__ */ p(d, { children: [g(e).map((e) => e === m ? t && /* @__PURE__ */ f("div", {
+		"data-scene": "",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ f(T, { node: t })
+	}, e) : /* @__PURE__ */ f("div", {
+		"data-layer": e,
+		"aria-hidden": "true"
+	}, e)), n && /* @__PURE__ */ f("div", {
+		"data-overlay": "grain",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ f(T, { node: n })
+	})] });
+}), D = /* @__PURE__ */ e({ Background: () => P }), O = (e) => console.warn(e), k = Object.keys({
+	shapes: 1,
+	density: 1,
+	size: 1,
+	rotate: 1,
+	shapeFill: 1,
+	opacitySpread: 1
+}).filter((e) => e !== "shapes");
+function A(e) {
+	return k.map((t) => e?.[t]);
+}
+function j(e, t, n, r, i, a) {
+	if (e === "grain") return null;
+	let o = JSON.parse(i), s = {
+		...Object.fromEntries(k.map((e, t) => [e, o[t] ?? void 0])),
+		shapes: r === void 0 ? void 0 : r.split(",").filter(Boolean)
+	}, [c, l, u, d] = JSON.parse(a);
+	return h(e, {
+		idPrefix: t,
+		seed: n,
+		motif: s,
+		moon: {
+			...c == null || l == null ? {} : { position: {
+				x: c,
+				y: l
+			} },
+			...u == null ? {} : { phase: u },
+			...d == null ? {} : { halo: d }
+		}
+	});
+}
+function M(e) {
+	return [
+		e?.position?.x,
+		e?.position?.y,
+		e?.phase,
+		e?.halo
+	].map((e) => e ?? null);
+}
+function N(e, t) {
+	return h("grain", {
+		idPrefix: `${e}-grain`,
+		seed: t
+	});
+}
+function P({ children: e, ref: o, preset: s, tone: d, intensity: m, animated: h, grain: g, seed: y, motif: b, moon: x, fill: C = "viewport", ...w }) {
+	let T = n()?.background || r, D = s ?? T.preset, k = d ?? T.tone ?? r.tone, P = m ?? T.intensity ?? r.intensity, F = h ?? T.animated ?? !1, I = g ?? T.grain ?? !1, L = y ?? T.seed ?? 0, R = b ?? T.motif, z = x ?? T.moon, B = u(null), V = l(() => i(B, o), [o]), H = a(B, F), U = v(c()), W = _(D, S, t() ? void 0 : O), G = I || W === "grain", K = R?.shapes ? [...new Set(R.shapes)].sort().join(",") : void 0, q = JSON.stringify(A(R)), J = JSON.stringify(M(z)), Y = l(() => j(W, U, L, K, q, J), [
+		W,
+		U,
+		L,
+		K,
+		q,
+		J
+	]), X = l(() => G ? N(U, L) : null, [
+		G,
+		U,
+		L
+	]);
+	return /* @__PURE__ */ p("div", {
+		"data-slot": "background",
+		...w,
+		ref: V,
+		"data-background": W === "grain" ? "gradient" : W,
+		"data-preset": W,
+		"data-tone": k,
+		"data-intensity": P,
+		"data-fill": C === "container" ? C : void 0,
+		"data-animated": F ? "" : void 0,
+		"data-grain": G ? "" : void 0,
+		"data-paused": F && H ? "" : void 0,
+		children: [/* @__PURE__ */ f(E, {
+			preset: W,
+			scene: Y,
+			grain: X
+		}), /* @__PURE__ */ f("div", {
+			"data-slot": "background-content",
+			children: e
+		})]
+	});
+}
+//#endregion
+export { D as n, S as r, P as t };

package/dist/backgrounds/backgrounds.css

@@ -49,6 +49,8 @@
 @import "./css-react/music.css";
 @import "./css-react/travel.css";
 @import "./css-react/sport.css";
+/* the moon (React only) */
+@import "./css-react/moon.css";
 /* motifs */
 @import "./css/motifs.css";
 @import "./css/shapes.css";

package/dist/backgrounds/css-react/moon.css

@@ -0,0 +1,97 @@
+/* The `moon` preset: a thin crescent in a wide halo among a few stars. The
+ * scene drawn by core's `buildBackgroundScene` carries the geometry (the
+ * halo's gradient stops are `s3`, the crescent `k2`, the stars `k1` and
+ * `k2`); this file gives it a faint wash, the strength each intensity sets,
+ * and a silver moon in dark. Motion (opt-in, `animated`): the stars twinkle,
+ * 8 s a leg; the delay of each (`l1..l4`) is a class, so the markup holds no
+ * inline style. React only: nothing in the shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="moon"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background:
+			radial-gradient(
+				ellipse 70% 60% at 82% 14%,
+				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
+				transparent 72%
+			),
+			radial-gradient(
+				ellipse 60% 55% at 12% 92%,
+				color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+				transparent 70%
+			);
+	}
+
+	[data-background="moon"] > [data-scene] {
+		overflow: hidden;
+		container: nxgt-moon / inline-size;
+	}
+
+	/* The scene is written for 0.8 at the default strength: subtle 0.47,
+	 * vivid the full 1. The root class makes it (0,4,0), above the motif rule (0,3,0). */
+	[data-background="moon"] > [data-scene] > .mn :is(.mo, .mh) {
+		opacity: calc(var(--nxgt-bg-op) / 0.9);
+	}
+
+	/* The scene has no viewBox (lengths are pixels, positions shares of the
+	 * container): the moon and the stars draw past their own origin. */
+	[data-background="moon"] > [data-scene] .pt {
+		overflow: visible;
+	}
+
+	/* A narrow container: half the size, so the moon stays whole in the top right corner. */
+	@container nxgt-moon (max-width: 640px) {
+		[data-background="moon"] > [data-scene] .mg .md {
+			transform: scale(0.5);
+		}
+	}
+
+	/* In light the scene is multiplied into the page and the crescent is
+	 * lighter still: a faint watermark. */
+	[data-background="moon"] > [data-scene] {
+		mix-blend-mode: multiply;
+	}
+	[data-background="moon"] > [data-scene] .md {
+		opacity: 0.55;
+	}
+
+	/* In dark it adds nothing but light, and the moon is silver, lighter than the lifted tone. */
+	:is(.dark, [data-theme="dark"]) [data-background="moon"] > [data-scene],
+	[data-background="moon"]:is(.dark, [data-theme="dark"]) > [data-scene] {
+		mix-blend-mode: normal;
+	}
+	:is(.dark, [data-theme="dark"]) [data-background="moon"] > [data-scene] .md,
+	[data-background="moon"]:is(.dark, [data-theme="dark"]) > [data-scene] .md {
+		color: color-mix(in oklab, var(--nxgt-bg-c2) 30%, white);
+		opacity: 0.78;
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-moon-twinkle {
+		to {
+			opacity: 0.3;
+		}
+	}
+
+	@layer components {
+		[data-background="moon"][data-animated] > [data-scene] .tw {
+			animation: nxgt-bg-moon-twinkle 8s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="moon"][data-animated] > [data-scene] .l1 {
+			animation-delay: 0s;
+		}
+		[data-background="moon"][data-animated] > [data-scene] .l2 {
+			animation-delay: -2s;
+		}
+		[data-background="moon"][data-animated] > [data-scene] .l3 {
+			animation-delay: -4s;
+		}
+		[data-background="moon"][data-animated] > [data-scene] .l4 {
+			animation-delay: -6s;
+		}
+	}
+}

package/dist/backgrounds.js

@@ -1,139 +1,3 @@
-import { t as e } from "./is-production-GLw59WU8.js";
-import { t } from "./compose-refs-DZ0iIVF-.js";
-import { t as n } from "./use-background-activity-B8jLHNop.js";
-import { createElement as r, memo as i, useId as a, useMemo as o, useRef as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { BACKGROUND_INTENSITIES as d, BACKGROUND_PRESETS as f, BACKGROUND_TONES as p, MOTIF_SHAPES as m, MOTIF_SHAPES_ALL as h, SCENE_LAYER as g, SHIPPED_BACKGROUND_PRESETS as _, buildBackgroundScene as v, presetLayers as y, resolveBackgroundPreset as b, svgIdPrefix as x } from "@nxgt/material-core/backgrounds";
-//#region lib/backgrounds/background/available.ts
-var S = [
-	"gradient",
-	"grain",
-	"mesh",
-	"aurora",
-	"spotlight",
-	"bokeh",
-	"rays",
-	"halo",
-	"plasma",
-	"glass",
-	"ripples",
-	"blobs",
-	"paper",
-	"linen",
-	"concrete",
-	"marble"
-], C = [
-	"isometric",
-	"blueprint",
-	"dots",
-	"stripes",
-	"low-poly",
-	"topography",
-	"waves",
-	"hexagons",
-	"circuit",
-	"graph-paper",
-	"checker",
-	"diagonal-checker",
-	"chevrons"
-], w = [
-	"shapes",
-	"confetti-grid",
-	"constellation",
-	"halftone",
-	"truchet",
-	"floating",
-	"scatter-icons",
-	"school",
-	"night-sky",
-	"bubbles",
-	"leaves",
-	"science",
-	"music",
-	"travel",
-	"sport"
-], T = [
-	...S,
-	...C,
-	...w
-], E = /^(aria|data)-/, D = (e) => e === "class" ? "className" : E.test(e) ? e : e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), O = i(function e({ node: t }) {
-	let n = Object.fromEntries(Object.entries(t.attrs).map(([e, t]) => [D(e), t]));
-	return r(t.tag, n, ...(t.children ?? []).map((t, n) => /* @__PURE__ */ l(e, { node: t }, n)));
-}), k = i(function({ preset: e, scene: t, grain: n }) {
-	return /* @__PURE__ */ u(c, { children: [y(e).map((e) => e === g ? t && /* @__PURE__ */ l("div", {
-		"data-scene": "",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ l(O, { node: t })
-	}, e) : /* @__PURE__ */ l("div", {
-		"data-layer": e,
-		"aria-hidden": "true"
-	}, e)), n && /* @__PURE__ */ l("div", {
-		"data-overlay": "grain",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ l(O, { node: n })
-	})] });
-}), A = (e) => console.warn(e), j = Object.keys({
-	shapes: 1,
-	density: 1,
-	size: 1,
-	rotate: 1,
-	shapeFill: 1,
-	opacitySpread: 1
-}).filter((e) => e !== "shapes");
-function M(e) {
-	return j.map((t) => e?.[t]);
-}
-function N(e, t, n, r, i) {
-	if (e === "grain") return null;
-	let a = JSON.parse(i);
-	return v(e, {
-		idPrefix: t,
-		seed: n,
-		motif: {
-			...Object.fromEntries(j.map((e, t) => [e, a[t] ?? void 0])),
-			shapes: r === void 0 ? void 0 : r.split(",").filter(Boolean)
-		}
-	});
-}
-function P(e, t) {
-	return v("grain", {
-		idPrefix: `${e}-grain`,
-		seed: t
-	});
-}
-function F({ children: r, ref: i, preset: c = "gradient", tone: d = "primary", intensity: f = "default", animated: p = !1, grain: m = !1, seed: h = 0, motif: g, fill: _ = "viewport", ...v }) {
-	let y = s(null), S = o(() => t(y, i), [i]), C = n(y, p), w = x(a()), E = b(c, T, e() ? void 0 : A), D = m || E === "grain", O = g?.shapes ? [...new Set(g.shapes)].sort().join(",") : void 0, j = JSON.stringify(M(g)), F = o(() => N(E, w, h, O, j), [
-		E,
-		w,
-		h,
-		O,
-		j
-	]), I = o(() => D ? P(w, h) : null, [
-		D,
-		w,
-		h
-	]);
-	return /* @__PURE__ */ u("div", {
-		"data-slot": "background",
-		...v,
-		ref: S,
-		"data-background": E === "grain" ? "gradient" : E,
-		"data-preset": E,
-		"data-tone": d,
-		"data-intensity": f,
-		"data-fill": _ === "container" ? _ : void 0,
-		"data-animated": p ? "" : void 0,
-		"data-grain": D ? "" : void 0,
-		"data-paused": p && C ? "" : void 0,
-		children: [/* @__PURE__ */ l(k, {
-			preset: E,
-			scene: F,
-			grain: I
-		}), /* @__PURE__ */ l("div", {
-			"data-slot": "background-content",
-			children: r
-		})]
-	});
-}
-//#endregion
-export { T as AVAILABLE_BACKGROUND_PRESETS, d as BACKGROUND_INTENSITIES, f as BACKGROUND_PRESETS, p as BACKGROUND_TONES, F as Background, m as MOTIF_SHAPES, h as MOTIF_SHAPES_ALL, _ as SHIPPED_BACKGROUND_PRESETS };
+import { r as e, t } from "./background--Bf_EbFR.js";
+import { BACKGROUND_INTENSITIES as n, BACKGROUND_PRESETS as r, BACKGROUND_TONES as i, MOTIF_SHAPES as a, MOTIF_SHAPES_ALL as o, SHIPPED_BACKGROUND_PRESETS as s } from "@nxgt/material-core/backgrounds";
+export { e as AVAILABLE_BACKGROUND_PRESETS, n as BACKGROUND_INTENSITIES, r as BACKGROUND_PRESETS, i as BACKGROUND_TONES, t as Background, a as MOTIF_SHAPES, o as MOTIF_SHAPES_ALL, s as SHIPPED_BACKGROUND_PRESETS };