@neo-ui-kit/react 0.0.0-stage → 1.0.1

package/dist/components/media/MelodyRoll/styles.css

@@ -0,0 +1,196 @@
+/* Styles owned by MelodyRoll: a dark glass lane with a semitone and seconds grid; notes glide in,
+   flash green when sung right; the playhead and lane breathe with the music. */
+.ad-melody-roll {
+  --ad-roll-keys: clamp(2.75rem, 8%, 4.5rem);
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--ad-roll-keys) minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  min-height: 8rem;
+  overflow: hidden;
+  isolation: isolate;
+  /* Room for the hairline edge that the glass layer below draws. */
+  padding: 0.0625rem;
+  border-radius: var(--ad-radius-lg, 1rem);
+  box-shadow: 0 0 calc(var(--ad-roll-beat) * 1.6rem) rgb(from var(--ad-primary) r g b / 0.25);
+  transition: box-shadow 0.12s;
+}
+/* The glass: its own still layer, so the frosted backdrop is never redrawn by the beat or by the
+   notes moving over it. */
+.ad-melody-roll::before,
+.ad-melody-roll::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.18);
+  border-radius: inherit;
+  pointer-events: none;
+}
+.ad-melody-roll::before {
+  background:
+    radial-gradient(80% 120% at 25% 50%, rgb(from var(--ad-primary) r g b / 0.05), transparent 70%),
+    linear-gradient(180deg, rgb(from var(--ad-neutral-950) r g b / 0.72), rgb(from var(--ad-neutral-900) r g b / 0.6));
+  box-shadow: inset 0 0.0625rem 0 #ffffff12;
+  backdrop-filter: blur(0.5rem);
+}
+/* The beat: a brighter edge and a warmer light over the glass, faded in with the music. */
+.ad-melody-roll::after {
+  border-color: rgb(from var(--ad-primary) r g b / 0.35);
+  background: radial-gradient(80% 120% at 25% 50%, rgb(from var(--ad-primary) r g b / 0.12), transparent 70%);
+  opacity: var(--ad-roll-beat);
+  transition: opacity 0.12s;
+  will-change: opacity;
+}
+.ad-melody-roll-keys.ad-piano-keyboard {
+  min-height: 0;
+  z-index: 2;
+}
+.ad-melody-roll-lane {
+  position: relative;
+  container-type: size;
+  overflow: hidden;
+  border-left: 0.0625rem solid #ffffff22;
+  /* One line per semitone; the second lines scroll with the song on a layer of their own. */
+  background: linear-gradient(#ffffff0d 0.0625rem, transparent 0.0625rem) 0 0 / 100% calc(100% / var(--ad-roll-rows));
+}
+/* One line per second, a second wider than the lane, slid back by the song's fraction of a second. */
+.ad-melody-roll-seconds {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: calc(100cqw + var(--ad-roll-second));
+  background: linear-gradient(90deg, #ffffff0a 0.0625rem, transparent 0.0625rem) 0 0 / var(--ad-roll-second) 100%;
+  transform: translateX(var(--ad-roll-shift));
+  will-change: transform;
+  pointer-events: none;
+}
+.ad-melody-roll-strip {
+  position: absolute;
+  inset: 0;
+  will-change: transform;
+}
+/* A note: a glossy capsule in the theme colours. */
+.ad-melody-note {
+  position: absolute;
+  /* Three quarters of a semitone row, centred in it. */
+  height: calc(100% / var(--ad-roll-rows) * 0.76);
+  translate: 0 15.8%;
+  border-radius: 999px;
+  background-image: linear-gradient(90deg, var(--ad-primary), var(--ad-secondary));
+  box-shadow: inset 0 0.0625rem 0 #ffffff55;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  transition:
+    filter 0.2s,
+    opacity 0.3s;
+}
+.ad-melody-note > span {
+  padding-inline: 0.4em;
+  color: #fff;
+  font: 600 clamp(0.5rem, 1.6cqh, 0.75rem) / 1 var(--ad-font-family-sans);
+  white-space: nowrap;
+  text-shadow: 0 0 0.3em #0008;
+}
+/* Under the playhead: brighter, lifted. */
+.ad-melody-note[data-now] {
+  filter: brightness(1.3) drop-shadow(0 0 0.4rem var(--ad-primary));
+}
+.ad-melody-note[data-past]:not([data-hit]) {
+  opacity: 0.45;
+}
+/* Sung right: green with a burst of light. */
+.ad-melody-note[data-hit] {
+  background-image: linear-gradient(90deg, #55ff9a, #16d875);
+  filter: drop-shadow(0 0 0.45rem #32ff8ff0) drop-shadow(0 0 1.1rem #32ff8f99);
+  animation: ad-melody-hit 0.62s ease-out;
+}
+@keyframes ad-melody-hit {
+  28% {
+    filter: brightness(1.9) drop-shadow(0 0 1.2rem #32ff8f);
+    scale: 1 1.6;
+  }
+}
+.ad-melody-trail {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+.ad-melody-trail > path {
+  fill: none;
+  stroke: color-mix(in oklch, var(--ad-secondary-100), #3dff91 calc(var(--ad-roll-accuracy) * 100%));
+  stroke-width: 0.15rem;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.75;
+}
+/* The trail's glow without a filter: two wider, faint copies of the line under it, so the
+   growing trail is never re-blurred. */
+.ad-melody-trail > path[data-halo] {
+  stroke: currentColor;
+}
+.ad-melody-trail > path[data-halo="wide"] {
+  stroke-width: calc(0.15rem + 0.5rem);
+  opacity: 0.1;
+}
+.ad-melody-trail > path[data-halo="near"] {
+  stroke-width: calc(0.15rem + 0.25rem);
+  opacity: 0.22;
+}
+.ad-melody-playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0.125rem;
+  translate: -50% 0;
+  background: #fff;
+  box-shadow:
+    0 0 0.6rem #fff,
+    0 0 1rem var(--ad-primary);
+}
+/* The playhead flares on the beat: a wider glow, drawn once, faded in. */
+.ad-melody-playhead::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow:
+    0 0 1.6rem #fff,
+    0 0 2.6rem var(--ad-primary);
+  opacity: var(--ad-roll-beat);
+  will-change: opacity;
+}
+/* The singer's voice: grows with loudness, greens with accuracy. */
+.ad-melody-voice {
+  --ad-voice: calc(0.95rem + var(--ad-roll-level) * 0.7rem);
+  position: absolute;
+  z-index: 3;
+  width: var(--ad-voice);
+  height: var(--ad-voice);
+  translate: -50% -50%;
+  border: 0.125rem solid #fff;
+  border-radius: 50%;
+  background: color-mix(in oklch, #fff, #2ee886 calc(var(--ad-roll-accuracy) * 100%));
+  box-shadow:
+    0 0 0 0.2rem #ffffff22,
+    0 0 calc(0.5rem + var(--ad-roll-accuracy) * 1rem) rgb(46 232 134 / calc(0.2 + var(--ad-roll-accuracy) * 0.7));
+  transition:
+    top 0.08s linear,
+    width 0.08s,
+    height 0.08s,
+    background 0.08s;
+}
+.ad-melody-voice[data-hit] {
+  background: #4dffa0;
+  animation: ad-melody-voice-hit 0.42s ease-out;
+}
+@keyframes ad-melody-voice-hit {
+  45% {
+    scale: 1.35;
+  }
+}

package/dist/components/media/PianoKeyboard/PianoKeyboard.d.ts

@@ -0,0 +1,24 @@
+import { type CommonProps } from "../../../core/base";
+/** Whether a MIDI note is a black key. */
+export declare const isBlackKey: (midi: number) => boolean;
+/** Scientific pitch name of a MIDI note: 60 is "C4". */
+export declare const noteName: (midi: number) => string;
+export interface PianoKeyboardProps extends CommonProps {
+    /** Lowest and highest MIDI notes shown, bottom to top. */
+    minMidi?: number;
+    maxMidi?: number;
+    /** The note being sung or played now; its key lights up. */
+    activeMidi?: number;
+    /** The active note is the right one: the key turns green and pulses. */
+    hit?: boolean;
+    /** Which keys carry their name. */
+    labels?: "all" | "octaves" | "none";
+    /** Pressing a key, e.g. to hear its pitch. Without it the keyboard is a picture. */
+    onKeyPress?: (midi: number) => void;
+    label?: string;
+}
+/**
+ * A vertical piano keyboard that fills its box: the sung note's key glows, a correct one turns
+ * green and pulses, a pressed key dips like a real one.
+ */
+export declare const PianoKeyboard: import("react").NamedExoticComponent<PianoKeyboardProps>;

package/dist/components/media/PianoKeyboard/styles.css

@@ -0,0 +1,83 @@
+/* Styles owned by PianoKeyboard: ivory and ebony keys; the sung key glows, a correct one pulses green. */
+.ad-piano-keyboard {
+  position: relative;
+  container-type: size;
+  width: 100%;
+  height: 100%;
+  min-height: 6rem;
+  overflow: hidden;
+  border-radius: 0 0.5rem 0.5rem 0;
+  background: var(--ad-neutral-950);
+  box-shadow: 0.35rem 0 1rem #0007;
+  user-select: none;
+}
+.ad-piano-key {
+  position: absolute;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  margin: 0;
+  padding: 0 0.3rem 0 0;
+  border: 0;
+  border-bottom: 0.0625rem solid #00000022;
+  border-radius: 0 0.3rem 0.3rem 0;
+  background: linear-gradient(90deg, #d8d4de, #f7f5fa 35%, #fff 70%, #e4e0e8);
+  box-shadow: inset -0.2rem 0 0.35rem #0000001a, inset 0 -0.0625rem 0 #ffffffb0;
+  color: var(--ad-primary);
+  font: 700 clamp(0.4rem, calc(100cqh / var(--ad-keys) * 0.55), 0.8rem) / 1 var(--ad-font-family-sans);
+  letter-spacing: 0.02em;
+  cursor: default;
+  transition:
+    background 0.18s,
+    box-shadow 0.18s,
+    color 0.18s,
+    translate 0.12s;
+}
+.ad-piano-key[data-black] {
+  z-index: 1;
+  width: 64%;
+  border: 0.0625rem solid #000;
+  background: linear-gradient(90deg, #030305, #16161c 55%, #2c2c35 88%, #18181e);
+  box-shadow: 0.15rem 0.2rem 0.35rem #000a, inset -0.0625rem 0 #ffffff1a;
+  color: var(--ad-neutral-200);
+}
+button.ad-piano-key {
+  cursor: pointer;
+}
+button.ad-piano-key:hover {
+  filter: brightness(1.08);
+}
+.ad-piano-key[data-pressed] {
+  translate: -0.12rem 0;
+  box-shadow: inset 0.25rem 0 0.5rem #0004;
+}
+/* The note being sung now. */
+.ad-piano-key[data-active] {
+  color: #fff;
+  background: linear-gradient(90deg, var(--ad-primary-800), var(--ad-primary) 55%, var(--ad-secondary-100));
+  box-shadow:
+    inset 0 0 0.5rem #ffffff70,
+    0 0 0.5rem var(--ad-primary),
+    0 0 1.1rem rgb(from var(--ad-primary) r g b / 0.7);
+}
+/* …and it is the right note. */
+.ad-piano-key[data-hit] {
+  color: #052a17;
+  background: linear-gradient(90deg, #12b85f, #6dffab 62%, #eafff3);
+  box-shadow:
+    inset 0 0 0.5rem #ffffffb8,
+    0 0 0.55rem #3dff91,
+    0 0 1.2rem #24e878b8;
+  animation: ad-piano-key-hit 0.9s ease-in-out infinite;
+}
+@keyframes ad-piano-key-hit {
+  50% {
+    filter: brightness(1.25);
+  }
+}
+.ad-piano-key > span {
+  pointer-events: none;
+  white-space: nowrap;
+}

package/dist/components/media/RotaryKnob/RotaryKnob.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { type RotaryKnobProps } from "../shared";
+export declare const RotaryKnob: (p: RotaryKnobProps) => React.JSX.Element;

package/dist/components/media/RotaryKnob/styles.css

@@ -0,0 +1,319 @@
+/* Styles owned by RotaryKnob. */
+/* Exact CSS geometry from premium-knob-interactive-neon(2).html, scoped to Neo UI. */
+.ad-rotary-knob.knob {
+  --size: 13.75rem;
+  --angle: 45.9deg;
+  --rotation: 0deg;
+  position: relative;
+  width: min(var(--size), 100%);
+  max-width: 100%;
+  aspect-ratio: 1;
+  flex: none;
+  isolation: isolate;
+  -webkit-tap-highlight-color: transparent;
+  /* Leans towards the pointer in 3D; settles back when it leaves or is grabbed. */
+  transform: perspective(60rem) rotateX(var(--tilt-x, 0deg))
+    rotateY(var(--tilt-y, 0deg));
+  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ad-rotary-knob.knob::before {
+  content: "";
+  position: absolute;
+  inset: 3.8%;
+  border-radius: 50%;
+  pointer-events: none;
+  background: radial-gradient(
+    circle at 50% 50%,
+    transparent 58%,
+    rgb(from var(--ad-primary) r g b / 0.055) 68%,
+    transparent 78%
+  );
+  box-shadow:
+    0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.18),
+    0 0 3.25rem rgb(from var(--ad-primary) r g b / 0.12),
+    0 0 5.375rem rgb(from var(--ad-primary) r g b / 0.06);
+  z-index: -1;
+  animation: ad-knob-breathe 5s ease-in-out infinite;
+}
+/* At rest the halo breathes slowly; grabbing the knob wakes it fully. */
+@keyframes ad-knob-breathe {
+  50% {
+    opacity: 0.6;
+  }
+}
+.ad-rotary-knob.is-dragging.knob::before {
+  animation: none;
+}
+.ad-rotary-knob.knob::after {
+  content: "";
+  position: absolute;
+  inset: 8.6%;
+  border-radius: 50%;
+  pointer-events: none;
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.16);
+  box-shadow:
+    inset 0 0 0.9375rem rgb(from var(--ad-primary) r g b / 0.12),
+    0 0 0.75rem rgb(from var(--ad-primary) r g b / 0.1);
+}
+.ad-rotary-knob .knob__surface {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0 0.4375rem rgb(from var(--ad-primary) r g b / 0.18))
+    drop-shadow(0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.1));
+}
+.ad-rotary-knob .knob__control {
+  position: absolute;
+  inset: 5.5%;
+  border-radius: 50%;
+  cursor: grab;
+  outline: none;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.ad-rotary-knob .knob__control:active,
+.ad-rotary-knob.is-dragging .knob__control {
+  cursor: grabbing;
+}
+.ad-rotary-knob.is-dragging .knob__surface,
+.ad-rotary-knob:hover .knob__surface {
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0 0.625rem rgb(from var(--ad-primary) r g b / 0.28))
+    drop-shadow(0 0 1.75rem rgb(from var(--ad-primary) r g b / 0.16));
+}
+.ad-rotary-knob .knob__surface {
+  transition:
+    filter 0.4s ease,
+    scale 0.3s cubic-bezier(0.34, 1.56, 0.5, 1);
+}
+/* Depth: the knob stands off the panel and casts a soft shadow; the cap stands off the bezel. */
+.ad-rotary-knob .knob__base {
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0.9rem 1.1rem #000c)
+    drop-shadow(0 0 0.4375rem rgb(from var(--ad-primary) r g b / 0.18))
+    drop-shadow(0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.1));
+}
+.ad-rotary-knob .knob__rotor-frame {
+  overflow: clip;
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0.35rem 0.45rem #000b);
+}
+.ad-rotary-knob .knob__rotor {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transform: rotate(var(--rotation));
+  transform-origin: center;
+  will-change: transform;
+}
+/* Grabbed, the cap sinks a touch into the panel. */
+.ad-rotary-knob.is-dragging .knob__rotor,
+.ad-rotary-knob.is-dragging .knob__sheen {
+  scale: 0.975;
+}
+/* Fixed studio lights on the cap: the brushed metal turns, its highlights stay put. */
+.ad-rotary-knob .knob__sheen {
+  position: absolute;
+  inset: 18.7%;
+  border-radius: 50%;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 34% 26%, #ffffff2e, transparent 42%),
+    conic-gradient(
+      from 0deg,
+      transparent 0deg,
+      #ffffff14 30deg,
+      transparent 70deg,
+      transparent 150deg,
+      rgb(from var(--ad-secondary) r g b / 0.07) 200deg,
+      transparent 240deg,
+      transparent 300deg,
+      #ffffff10 330deg,
+      transparent 360deg
+    );
+  box-shadow:
+    inset 0 0.0625rem 0.0625rem #ffffff2a,
+    inset 0 -0.25rem 0.75rem #0009;
+  mix-blend-mode: screen;
+  transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.5, 1);
+}
+/* The value sits in the scale's dead zone at the bottom, like a hardware display;
+   click it to type a number. */
+.ad-rotary-knob .knob__value,
+.ad-rotary-knob .knob__input {
+  position: absolute;
+  left: 50%;
+  bottom: 2.5%;
+  translate: -50% 0;
+  min-width: 3.4em;
+  padding: 0.12em 0.45em;
+  border-radius: 0.4em;
+  color: var(--ad-neutral-200);
+  font: 600 max(0.625rem, calc(var(--size) * 0.068)) / 1.2
+    var(--ad-font-family-mono, monospace);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  text-shadow:
+    0 0 0.3125rem var(--ad-neutral-200),
+    0 0 0.875rem var(--ad-primary);
+  background: linear-gradient(rgb(from var(--ad-neutral-900) r g b / 0.9), rgb(from var(--ad-neutral-850) r g b / 0.9));
+  box-shadow:
+    inset 0 0 0 0.0625rem rgb(from var(--ad-primary) r g b / 0.24),
+    inset 0 0.0625rem 0 #ffffff14,
+    0 0.25rem 0.75rem #0009;
+  transition:
+    box-shadow 0.25s,
+    color 0.25s;
+}
+.ad-rotary-knob .knob__value[data-editable] {
+  cursor: text;
+}
+.ad-rotary-knob .knob__value[data-editable]:hover {
+  box-shadow:
+    inset 0 0 0 0.0625rem rgb(from var(--ad-secondary) r g b / 0.67),
+    inset 0 0.0625rem 0 #ffffff1f,
+    0 0 0.9rem rgb(from var(--ad-primary) r g b / 0.33);
+}
+.ad-rotary-knob .knob__value[data-editing] {
+  visibility: hidden;
+}
+.ad-rotary-knob .knob__input {
+  width: 3.4em;
+  border: 0;
+  outline: none;
+  box-shadow:
+    inset 0 0 0 0.0625rem var(--ad-secondary),
+    0 0 1rem rgb(from var(--ad-primary) r g b / 0.47);
+  caret-color: #fff;
+}
+.ad-rotary-knob[data-ad-size="xs"] .knob__value,
+.ad-rotary-knob[data-ad-size="xs"] .knob__input {
+  bottom: -0.4em;
+}
+.ad-rotary-knob .knob__control:focus-visible::after {
+  content: "";
+  position: absolute;
+  inset: -2%;
+  border: 0.125rem solid var(--ad-secondary);
+  border-radius: inherit;
+  box-shadow: 0 0 0.75rem rgb(from var(--ad-primary) r g b / 0.27);
+  pointer-events: none;
+  filter: drop-shadow(0 0 0.4375rem rgb(from var(--ad-primary) r g b / 0.18))
+    drop-shadow(0 0 1.25rem rgb(from var(--ad-primary) r g b / 0.1));
+}
+.ad-rotary-knob .knob__indicator {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  pointer-events: none;
+}
+.ad-rotary-knob .knob__slot {
+  position: absolute;
+  left: 48.4%;
+  top: 16.65%;
+  width: 3.2%;
+  height: 11.25%;
+  /* Orbit the small marker around the control's centre; rotating its full-size
+     invisible wrapper would enlarge the container's scrollable bounds. */
+  transform: rotate(var(--angle));
+  transform-origin: 50% calc(100% * (50 - 16.65) / 11.25);
+  will-change: transform;
+  border-radius: 62.4375rem;
+  background: linear-gradient(
+    90deg,
+    var(--ad-neutral-950) 0%,
+    var(--ad-primary-900) 25%,
+    var(--ad-primary-800) 66%,
+    var(--ad-primary-900) 100%
+  );
+  box-shadow:
+    0 0 0 0.0625rem var(--ad-primary-900),
+    0 0.0625rem 0.0625rem 0.0625rem rgb(from var(--ad-secondary) r g b / 0.5),
+    inset 0.0625rem 0.1875rem 0.3125rem #000,
+    0 0 0.625rem 0.1875rem rgb(from var(--ad-primary) r g b / 0.38),
+    0 0 1.5rem 0.375rem rgb(from var(--ad-primary) r g b / 0.16);
+}
+.ad-rotary-knob .knob__slot::before {
+  content: "";
+  position: absolute;
+  inset: 9% 20%;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    var(--ad-primary) 0%,
+    var(--ad-secondary) 17%,
+    var(--ad-neutral-200) 47%,
+    #fff 62%,
+    var(--ad-secondary) 85%,
+    var(--ad-primary) 100%
+  );
+  box-shadow:
+    0 0 0.125rem 0.0625rem var(--ad-neutral-200),
+    0 0 0.3125rem 0.125rem var(--ad-primary),
+    0 0 0.875rem 0.25rem rgb(from var(--ad-primary) r g b / 0.82),
+    0 0 1.875rem 0.5rem rgb(from var(--ad-primary) r g b / 0.38),
+    0 0 3.375rem 0.75rem rgb(from var(--ad-primary) r g b / 0.16);
+}
+.ad-rotary-knob .knob__slot::after {
+  content: "";
+  position: absolute;
+  inset: -7% -40%;
+  border-radius: 50%;
+  background: radial-gradient(ellipse, rgb(from var(--ad-primary) r g b / 0.08) 20%, transparent 72%);
+}
+.ad-rotary-knob[data-disabled="true"] {
+  opacity: 0.45;
+  filter: saturate(0.55);
+  pointer-events: none;
+}
+.ad-rotary-knob[data-readonly="true"] .knob__control {
+  cursor: default;
+}
+.ad-sr-only {
+  position: absolute !important;
+  width: 0.0625rem !important;
+  height: 0.0625rem !important;
+  padding: 0 !important;
+  margin: -0.0625rem !important;
+  overflow: hidden !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ad-rotary-knob .knob__indicator,
+  .ad-rotary-knob .knob__rotor {
+    will-change: auto;
+  }
+}
+/* Hover and grab brighten the glow but keep the depth shadows. */
+.ad-rotary-knob:is(:hover, .is-dragging) .knob__base {
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0.9rem 1.1rem #000c)
+    drop-shadow(0 0 0.625rem rgb(from var(--ad-primary) r g b / 0.28))
+    drop-shadow(0 0 1.75rem rgb(from var(--ad-primary) r g b / 0.16));
+}
+.ad-rotary-knob:is(:hover, .is-dragging) .knob__rotor {
+  filter: hue-rotate(var(--ad-hue-shift, 0deg))
+    drop-shadow(0 0.35rem 0.45rem #000b);
+}
+
+/* A printed label under the knob; the knob keeps room for it below. */
+.ad-rotary-knob.knob[data-labelled] {
+  margin-block-end: 1.6em;
+}
+.ad-rotary-knob .knob__label {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  translate: -50% 0.4em;
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-caption);
+  white-space: nowrap;
+  pointer-events: none;
+}

package/dist/components/media/Sparkline/Sparkline.d.ts

@@ -0,0 +1,2 @@
+import { type SparklineProps } from "../shared";
+export declare const Sparkline: (p: SparklineProps) => import("react").JSX.Element;

package/dist/components/media/Sparkline/styles.css

@@ -0,0 +1,70 @@
+/* Styles owned by Sparkline. */
+.ad-sparkline {
+  display: block;
+  width: 100%;
+  max-width: 20rem;
+  aspect-ratio: 24 / 7;
+  height: auto;
+  position: relative;
+  overflow: visible;
+}
+/* The drawings lie over each other; the beacon is isolated in a separate SVG. */
+.ad-sparkline > svg {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.ad-sparkline-area {
+  animation: ad-spark-fade 1.2s 0.4s ease-out both;
+}
+.ad-sparkline-line {
+  fill: none;
+  stroke: var(--ad-spark);
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+  stroke-dasharray: 1;
+  filter: drop-shadow(0 0 0.25rem var(--ad-spark));
+  animation: ad-spark-draw 1.4s cubic-bezier(0.6, 0, 0.2, 1) both;
+}
+.ad-sparkline-dot {
+  fill: #fff;
+  vector-effect: non-scaling-stroke;
+  filter: drop-shadow(0 0 0.3rem var(--ad-spark));
+}
+.ad-sparkline-ping {
+  fill: none;
+  stroke: var(--ad-spark);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: ad-spark-ping 1.8s 1.4s ease-out infinite;
+}
+@keyframes ad-spark-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes ad-spark-fade {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes ad-spark-ping {
+  from {
+    scale: 1;
+    opacity: 0.9;
+  }
+  to {
+    scale: 4;
+    opacity: 0;
+  }
+}

package/dist/components/media/WaveDecoration/WaveDecoration.d.ts

@@ -0,0 +1,2 @@
+import { type CommonProps } from "../../../core/base";
+export declare const WaveDecoration: (p: CommonProps) => import("react").JSX.Element;

package/dist/components/media/WaveDecoration/styles.css

@@ -0,0 +1,2 @@
+/* Styles owned by WaveDecoration. */
+/* Animated path data needs no full-width transform layer. */