@neo-ui-kit/react 1.0.0 → 1.0.2

package/README.md

@@ -14,6 +14,8 @@ Install the package in your application. React and ReactDOM are peer dependencie
 npm install @neo-ui-kit/react
 ```
 
+Package: [@neo-ui-kit/react on npm](https://www.npmjs.com/package/@neo-ui-kit/react).
+
 Import the stylesheet once in the app entry point:
 
 ```ts
@@ -23,9 +25,11 @@ import "@neo-ui-kit/react/styles.css";
 To test repository changes before publishing, run `npm run package` from the repository root and install the resulting archive in a separate application:
 
 ```bash
-npm install /path/to/adui/release/neo-ui-kit-react-1.0.0.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.0.2.tgz
 ```
 
+Maintainers publish new versions from `Pro100Dimka/adui` using the `release.yml` GitHub Actions workflow, a matching `v<version>` tag, and the `npm-publication` environment. npm trusts its OIDC identity; no `NPM_TOKEN` is required. The workflow checks the project and packed consumer before publishing the tested archive. Published `1.0.0` cannot be overwritten: code and README changes in npm require a new package version. See the [repository release instructions](https://github.com/Pro100Dimka/adui#npm-пакет).
+
 ## Theme
 
 Two colours build the whole palette (a primary scale, a secondary scale and tinted neutrals):
@@ -124,7 +128,7 @@ An existing audio engine can also pass its own `AnalyserNode` as `audio`, or a c
 
 Set `pageSize` to enable pagination. `pageSizeOptions` provides footer choices (the initial size is always included), and the footer shows the visible result range. The reset button clears sorting, filters, grouping, search, hidden columns, resized widths, and the chosen page size. See the live `DataTable` example in the documentation for complete column and row definitions.
 
-Click a header to cycle ascending/descending/unsorted; Shift-click adds another sort criterion. `sorting` / `defaultSorting` / `onSortingChange` manage the ordered array of criteria. The existing single-column `sort` API remains supported. `columnOrder` and `columnPinning` have the same controlled/default/change pattern; pinning is `{ left: ["name"], right: ["status"] }`. The Columns menu exposes keyboard-accessible reordering and pinning. `renderRowDetails(row, index)` is called only for expanded, mounted rows; `expandedRows` contains stable row keys. `renderRowActions` adds an isolated actions cell (`rowActionsWidth` defaults to 96px). Enable `rowNumbers` and `densityToggle` as needed.
+Click a header to cycle ascending/descending/unsorted; Shift-click adds another sort criterion. `sorting` / `defaultSorting` / `onSortingChange` manage the ordered array of criteria. The existing single-column `sort` API remains supported. `columnOrder` and `columnPinning` have the same controlled/default/change pattern; pinning is `{ left: ["name"], right: ["status"] }`. The Columns menu exposes keyboard-accessible reordering and pinning. `renderRowDetails(row, index)` is called only for expanded, mounted rows; `expandedRows` contains stable row keys. `renderRowActions` adds an isolated actions cell (`rowActionsWidth` defaults to 120px). Enable `rowNumbers` and `densityToggle` as needed.
 
 For a remote table, supply only the current page and control the state used by your data client:
 
@@ -178,6 +182,19 @@ import { ThemeProvider, useMotion } from "@neo-ui-kit/react/core";
 
 Canvas-rendered volume knob. Drag near the edge to rotate, drag from the center to move linearly, click the outer scale to jump. Wheel and arrow keys change the value, Shift gives a fine step, PageUp/PageDown change by 10, Home/End set 0/100, Escape cancels a drag, double-click resets. `onValueChange` fires while adjusting, `onValueCommit` after the gesture. `readOnly` turns it into a gauge.
 
+## 1.0.2 release notes
+
+- Restore the complete visualizer on the original documentation route and name it `QuantumBackground`.
+- Export `QuantumBackground` and `QuantumBackgroundProps`. `QuantumFieldExperience` remains a compatible alias of the same component; existing imports keep working.
+- Preserve the original renderer, particles, post-processing, audio controls and theme integration. The separate lightweight `QuantumField` primitive retains its existing API.
+- Both legacy documentation links, `quantum-field` and `quantum-field-experience`, open the `QuantumBackground` page.
+
+## 1.0.1 release notes
+
+- Clarifies npm installation and documents GitHub Actions trusted publishing through OIDC.
+- Corrects the documented DataTable `rowActionsWidth` default to 120px.
+- Runtime code is unchanged from 1.0.0.
+
 ## 1.0.0 hardening notes
 
 Version 1.0.0 is the new NEO UI starting point. Rebuild the local archive after changing source files.
@@ -199,6 +216,17 @@ Version 1.0.0 is the new NEO UI starting point. Rebuild the local archive after
 
 Repository evidence, browser runners, before/after measurements and coverage limits are recorded in `evidence/`. Unit and renderer checks complement actual browser geometry and interaction checks; they do not certify untested physical devices or browser engines.
 
-## Quantum Field experience
+## QuantumBackground
+
+`QuantumBackground` is the complete Quantum Fields visualizer inside an iframe. A compact, transparent field sits above the kit's `FilePicker`, externally controlled `AudioPlayer`, tooltip-labelled microphone/screenshot/fullscreen actions, field selector, and sensitivity control. The selected song name appears on the file button; playback and seeking use the visualizer's single audio source. Other controls live in a closed-by-default “Тонкая настройка” section below the field. It follows the nearest `ThemeProvider` palette. This experience includes MIT-licensed upstream code and CDN-loaded Three.js modules; the upstream notice is shipped as `UPSTREAM-LICENSE.txt`. It is not mounted in overview-card previews.
+
+```tsx
+import { QuantumBackground, ThemeProvider } from "@neo-ui-kit/react";
+import "@neo-ui-kit/react/styles.css";
+
+<ThemeProvider theme="violet">
+  <QuantumBackground />
+</ThemeProvider>
+```
 
-`QuantumFieldExperience` restores the full Quantum Fields visualizer inside an iframe. A compact, transparent field sits above the kit's `FilePicker`, externally controlled `AudioPlayer`, tooltip-labelled microphone/screenshot/fullscreen actions, field selector, and sensitivity control. The selected song name appears on the file button; playback and seeking use the visualizer's single audio source. Other controls live in a closed-by-default “Тонкая настройка” section below the field. It follows the nearest `ThemeProvider` palette. This experience includes MIT-licensed upstream code and CDN-loaded Three.js modules; the upstream notice is shipped as `UPSTREAM-LICENSE.txt`. It is not mounted in overview-card previews. For a smaller self-authored field without transport controls, use `QuantumField` directly.
+`QuantumBackgroundProps` accepts div attributes and an optional `particleBudget` cap. Leave the cap unset for the original adaptive particle count. `QuantumFieldExperience` and `QuantumFieldExperienceProps` remain compatible aliases. The separate lightweight `QuantumField` primitive documented above keeps its original props and rendering; it is not an alias of the full background.

package/dist/components/artwork/DatabaseArt/styles.css

@@ -1,58 +1,58 @@
-/* Styles owned by DatabaseArt. Orbit, spark and aura animations are shared with ServerArt. */
-.ad-database-art {
-  display: block;
-  width: 100%;
-  max-width: 11rem;
-  aspect-ratio: 170 / 179;
-  height: auto;
-  position: relative;
-  overflow: visible;
-}
-/* An artwork stack (see layers.tsx): drawings laid exactly over each other. */
-:is(.ad-database-art, .ad-server-art) > .ad-art-layer {
-  position: absolute;
-  inset: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
-}
-/* The orbits are the only drawing that repaints: three thin dashes, with no filter. */
-.ad-art-orbit {
-  stroke-dasharray: 14 86;
-  stroke-linecap: round;
-  animation: ad-art-orbit 4s linear infinite;
-}
-/* The same pulses on whole layers: the compositor scales and fades them, nothing repaints.
-   Each layer scales about its own point (set inline from the drawing). */
-.ad-art-spark-layer {
-  animation: ad-art-spark 4s ease-in-out var(--ad-delay, 0s) infinite;
-  will-change: transform, opacity;
-}
-.ad-art-aura-layer {
-  animation: ad-art-aura 5s ease-in-out infinite;
-  will-change: transform, opacity;
-}
-@keyframes ad-art-orbit {
-  to {
-    stroke-dashoffset: -100;
-  }
-}
-@keyframes ad-art-spark {
-  0%,
-  100% {
-    opacity: 0.35;
-    transform: scale(0.7);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes ad-art-aura {
-  50% {
-    opacity: 0.6;
-    transform: scale(1.08);
-  }
-}
+/* Styles owned by DatabaseArt. Orbit, spark and aura animations are shared with ServerArt. */
+.ad-database-art {
+  display: block;
+  width: 100%;
+  max-width: 11rem;
+  aspect-ratio: 170 / 179;
+  height: auto;
+  position: relative;
+  overflow: visible;
+}
+/* An artwork stack (see layers.tsx): drawings laid exactly over each other. */
+:is(.ad-database-art, .ad-server-art) > .ad-art-layer {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+/* The orbits are the only drawing that repaints: three thin dashes, with no filter. */
+.ad-art-orbit {
+  stroke-dasharray: 14 86;
+  stroke-linecap: round;
+  animation: ad-art-orbit 4s linear infinite;
+}
+/* The same pulses on whole layers: the compositor scales and fades them, nothing repaints.
+   Each layer scales about its own point (set inline from the drawing). */
+.ad-art-spark-layer {
+  animation: ad-art-spark 4s ease-in-out var(--ad-delay, 0s) infinite;
+  will-change: transform, opacity;
+}
+.ad-art-aura-layer {
+  animation: ad-art-aura 5s ease-in-out infinite;
+  will-change: transform, opacity;
+}
+@keyframes ad-art-orbit {
+  to {
+    stroke-dashoffset: -100;
+  }
+}
+@keyframes ad-art-spark {
+  0%,
+  100% {
+    opacity: 0.35;
+    transform: scale(0.7);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes ad-art-aura {
+  50% {
+    opacity: 0.6;
+    transform: scale(1.08);
+  }
+}

package/dist/components/artwork/Landscape/styles.css

@@ -1,79 +1,79 @@
-/* Styles owned by Landscape: the painting fades in, the horizon glow pulses and the frame drifts slowly. */
-.ad-landscape {
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-  min-height: 7rem;
-  aspect-ratio: 1220 / 168;
-  border-radius: var(--ad-radius);
-  background: var(--ad-neutral-900);
-}
-.ad-landscape > canvas {
-  /* Painted in ruby; turned to the theme hue. */
-  filter: hue-rotate(var(--ad-hue-shift, 0deg));
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: 70% 50%;
-  opacity: 0;
-  transition: opacity 1.2s ease-out;
-  animation: ad-landscape-drift 24s ease-in-out infinite alternate;
-}
-.ad-landscape > canvas[data-ready] {
-  opacity: 0.8;
-}
-.ad-landscape[data-shade]::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  background: linear-gradient(
-    90deg,
-    rgb(from var(--ad-neutral-900) r g b / 0.94) 0%,
-    rgb(from var(--ad-neutral-900) r g b / 0.67) 32%,
-    rgb(from var(--ad-neutral-900) r g b / 0.15) 70%,
-    rgb(from var(--ad-neutral-900) r g b / 0.04)
-  );
-  pointer-events: none;
-}
-/* Breathing glow where the planet meets the ridge. */
-.ad-landscape-glow {
-  position: absolute;
-  z-index: 1;
-  left: 58%;
-  bottom: -10%;
-  width: 28%;
-  aspect-ratio: 2;
-  border-radius: 50%;
-  background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.33), transparent);
-  mix-blend-mode: screen;
-  animation: ad-landscape-glow 5s ease-in-out infinite;
-  pointer-events: none;
-}
-.ad-landscape-content {
-  position: relative;
-  z-index: 2;
-  height: 100%;
-  padding: clamp(0.75rem, 2vw, 1.5rem);
-}
-@keyframes ad-landscape-drift {
-  from {
-    transform: scale(1.02) translateX(0);
-  }
-  to {
-    transform: scale(1.08) translateX(-1.5%);
-  }
-}
-@keyframes ad-landscape-glow {
-  0%,
-  100% {
-    opacity: 0.5;
-    scale: 0.9;
-  }
-  50% {
-    opacity: 1;
-    scale: 1.1;
-  }
-}
+/* Styles owned by Landscape: the painting fades in, the horizon glow pulses and the frame drifts slowly. */
+.ad-landscape {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  min-height: 7rem;
+  aspect-ratio: 1220 / 168;
+  border-radius: var(--ad-radius);
+  background: var(--ad-neutral-900);
+}
+.ad-landscape > canvas {
+  /* Painted in ruby; turned to the theme hue. */
+  filter: hue-rotate(var(--ad-hue-shift, 0deg));
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 70% 50%;
+  opacity: 0;
+  transition: opacity 1.2s ease-out;
+  animation: ad-landscape-drift 24s ease-in-out infinite alternate;
+}
+.ad-landscape > canvas[data-ready] {
+  opacity: 0.8;
+}
+.ad-landscape[data-shade]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(
+    90deg,
+    rgb(from var(--ad-neutral-900) r g b / 0.94) 0%,
+    rgb(from var(--ad-neutral-900) r g b / 0.67) 32%,
+    rgb(from var(--ad-neutral-900) r g b / 0.15) 70%,
+    rgb(from var(--ad-neutral-900) r g b / 0.04)
+  );
+  pointer-events: none;
+}
+/* Breathing glow where the planet meets the ridge. */
+.ad-landscape-glow {
+  position: absolute;
+  z-index: 1;
+  left: 58%;
+  bottom: -10%;
+  width: 28%;
+  aspect-ratio: 2;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.33), transparent);
+  mix-blend-mode: screen;
+  animation: ad-landscape-glow 5s ease-in-out infinite;
+  pointer-events: none;
+}
+.ad-landscape-content {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  padding: clamp(0.75rem, 2vw, 1.5rem);
+}
+@keyframes ad-landscape-drift {
+  from {
+    transform: scale(1.02) translateX(0);
+  }
+  to {
+    transform: scale(1.08) translateX(-1.5%);
+  }
+}
+@keyframes ad-landscape-glow {
+  0%,
+  100% {
+    opacity: 0.5;
+    scale: 0.9;
+  }
+  50% {
+    opacity: 1;
+    scale: 1.1;
+  }
+}

package/dist/components/artwork/Planet/styles.css

@@ -1,52 +1,52 @@
-/* Styles owned by Planet: the planet fades in and its rim breathes with light. */
-.ad-planet {
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-  min-height: 6rem;
-  aspect-ratio: 515 / 114;
-  border-radius: var(--ad-radius);
-  background:
-    radial-gradient(ellipse 60% 120% at 100% 100%, rgb(from var(--ad-primary) r g b / 0.08), transparent 70%),
-    var(--ad-neutral-900);
-}
-.ad-planet > canvas {
-  /* Painted in ruby; turned to the theme hue (a static filter, applied once). */
-  filter: hue-rotate(var(--ad-hue-shift, 0deg));
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: 100% 100%;
-  opacity: 0;
-  transition: opacity 1.2s ease-out;
-}
-/* The rim breathes: a light over the planet's edge swells and settles (opacity only; the painted
-   canvas is never re-filtered and nothing is blended). */
-.ad-planet::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  background: radial-gradient(ellipse 70% 120% at 100% 100%, transparent 38%, rgb(from var(--ad-secondary) r g b / 0.16) 52%, transparent 66%);
-  opacity: 0;
-  animation: ad-planet-rim 6s ease-in-out infinite;
-  pointer-events: none;
-  /* A layer of its own: the painted canvas under it is never redrawn by the breath. */
-  will-change: opacity;
-}
-.ad-planet > canvas[data-ready] {
-  opacity: 1;
-}
-.ad-planet-content {
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  padding: clamp(0.75rem, 2vw, 1.5rem);
-}
-@keyframes ad-planet-rim {
-  50% {
-    opacity: 1;
-  }
-}
+/* Styles owned by Planet: the planet fades in and its rim breathes with light. */
+.ad-planet {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  min-height: 6rem;
+  aspect-ratio: 515 / 114;
+  border-radius: var(--ad-radius);
+  background:
+    radial-gradient(ellipse 60% 120% at 100% 100%, rgb(from var(--ad-primary) r g b / 0.08), transparent 70%),
+    var(--ad-neutral-900);
+}
+.ad-planet > canvas {
+  /* Painted in ruby; turned to the theme hue (a static filter, applied once). */
+  filter: hue-rotate(var(--ad-hue-shift, 0deg));
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 100% 100%;
+  opacity: 0;
+  transition: opacity 1.2s ease-out;
+}
+/* The rim breathes: a light over the planet's edge swells and settles (opacity only; the painted
+   canvas is never re-filtered and nothing is blended). */
+.ad-planet::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: radial-gradient(ellipse 70% 120% at 100% 100%, transparent 38%, rgb(from var(--ad-secondary) r g b / 0.16) 52%, transparent 66%);
+  opacity: 0;
+  animation: ad-planet-rim 6s ease-in-out infinite;
+  pointer-events: none;
+  /* A layer of its own: the painted canvas under it is never redrawn by the breath. */
+  will-change: opacity;
+}
+.ad-planet > canvas[data-ready] {
+  opacity: 1;
+}
+.ad-planet-content {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  padding: clamp(0.75rem, 2vw, 1.5rem);
+}
+@keyframes ad-planet-rim {
+  50% {
+    opacity: 1;
+  }
+}

package/dist/components/artwork/QuantumField/QuantumFieldExperience.d.ts

@@ -13,10 +13,14 @@ export declare const quantumFieldExperienceControls: readonly {
     label: string;
     controls: readonly Control[];
 }[];
-export type QuantumFieldExperienceProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+export type QuantumBackgroundProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
     /** Maximum number of visible particles across both field layers. Adaptive quality may draw fewer. */
     particleBudget?: number;
 };
 /** Full MIT-licensed renderer; the host kit owns the controls and theme. */
-export declare function QuantumFieldExperience({ className, particleBudget, ...props }: QuantumFieldExperienceProps): import("react").JSX.Element;
+export declare function QuantumBackground({ className, particleBudget, ...props }: QuantumBackgroundProps): import("react").JSX.Element;
+/** @deprecated Use QuantumBackground. The original import remains compatible. */
+export declare const QuantumFieldExperience: typeof QuantumBackground;
+/** @deprecated Use QuantumBackgroundProps. */
+export type QuantumFieldExperienceProps = QuantumBackgroundProps;
 export {};

package/dist/components/artwork/QuantumField/UPSTREAM-LICENSE.txt

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Quantum Fields Contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Quantum Fields Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/artwork/ServerArt/styles.css

@@ -1,43 +1,43 @@
-/* Styles owned by ServerArt. The layer stack, spark and aura pulses come from DatabaseArt. */
-.ad-server-art {
-  display: block;
-  width: 100%;
-  max-width: 11rem;
-  aspect-ratio: 180 / 170;
-  height: auto;
-  position: relative;
-  overflow: visible;
-}
-.ad-server-led,
-.ad-server-glow {
-  stroke: var(--ad-red);
-  animation: ad-server-led 3.4s ease-in-out infinite;
-}
-/* A status dot is a layer of its own: its glow is drawn once and the layer only fades. */
-.ad-server-dot {
-  fill: var(--ad-pink);
-  filter: drop-shadow(0 0 0.2rem var(--ad-red));
-  animation: ad-server-led 3.4s ease-in-out infinite;
-  will-change: opacity;
-}
-.ad-server-orbit {
-  stroke: color-mix(in srgb, var(--ad-pink) 72%, #fff);
-  stroke-width: 1px;
-  stroke-dasharray: 7 93;
-  stroke-linecap: round;
-  animation: ad-art-orbit 6.4s linear infinite;
-}
-.ad-server-cloud {
-  animation: ad-server-cloud 3s ease-in-out infinite;
-  will-change: transform;
-}
-@keyframes ad-server-led {
-  50% {
-    opacity: 0.35;
-  }
-}
-@keyframes ad-server-cloud {
-  50% {
-    transform: translateY(-0.2rem);
-  }
-}
+/* Styles owned by ServerArt. The layer stack, spark and aura pulses come from DatabaseArt. */
+.ad-server-art {
+  display: block;
+  width: 100%;
+  max-width: 11rem;
+  aspect-ratio: 180 / 170;
+  height: auto;
+  position: relative;
+  overflow: visible;
+}
+.ad-server-led,
+.ad-server-glow {
+  stroke: var(--ad-red);
+  animation: ad-server-led 3.4s ease-in-out infinite;
+}
+/* A status dot is a layer of its own: its glow is drawn once and the layer only fades. */
+.ad-server-dot {
+  fill: var(--ad-pink);
+  filter: drop-shadow(0 0 0.2rem var(--ad-red));
+  animation: ad-server-led 3.4s ease-in-out infinite;
+  will-change: opacity;
+}
+.ad-server-orbit {
+  stroke: color-mix(in srgb, var(--ad-pink) 72%, #fff);
+  stroke-width: 1px;
+  stroke-dasharray: 7 93;
+  stroke-linecap: round;
+  animation: ad-art-orbit 6.4s linear infinite;
+}
+.ad-server-cloud {
+  animation: ad-server-cloud 3s ease-in-out infinite;
+  will-change: transform;
+}
+@keyframes ad-server-led {
+  50% {
+    opacity: 0.35;
+  }
+}
+@keyframes ad-server-cloud {
+  50% {
+    transform: translateY(-0.2rem);
+  }
+}