@neo-ui-kit/react 1.3.8 → 1.3.10

package/dist/components/controls/InputBase/styles.css

@@ -37,21 +37,21 @@
 }
 
 /* Control box. */
-.ad-input-base {
+.ad.ad-input-base {
   --ad-input-accent: var(--ad-pink);
   --ad-input-icon: calc(var(--ad-size-font) * 1.45);
   position: relative;
   display: flex;
   align-items: center;
-  gap: calc(var(--ad-size-gap) * 0.75);
+  gap: var(--ad-size-gap);
   min-width: 0;
   width: 100%;
   min-height: var(--ad-size-h);
-  padding-inline: var(--ad-size-pad-x);
-  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.18);
-  border-radius: var(--ad-size-radius);
-  background: var(--ad-surface-input);
-  box-shadow: var(--ad-shadow-input);
+  padding-inline: calc(var(--ad-size-pad-x) * 1.5);
+  border: 0.0625rem solid var(--ad-input-accent);
+  border-radius: var(--ad-radius-pill);
+  background: transparent;
+  box-shadow: 0 0 0.65rem rgb(from var(--ad-input-accent) r g b / 0.22);
   font-size: var(--ad-size-font);
   color: var(--ad-text);
   cursor: text;
@@ -61,36 +61,22 @@
     background 0.18s;
 }
 .ad-input-base:hover:not([data-disabled]) {
-  border-color: rgb(from var(--ad-secondary) r g b / 0.42);
+  border-color: var(--ad-input-accent);
+  box-shadow: 0 0 0.9rem rgb(from var(--ad-input-accent) r g b / 0.35);
 }
 .ad-input-base:focus-within {
   border-color: var(--ad-input-accent);
   box-shadow:
     0 0 0 0.1875rem rgb(from var(--ad-primary) r g b / 0.14),
-    0 0 1rem rgb(from var(--ad-primary) r g b / 0.15),
-    inset 0 0.0625rem 0.125rem rgb(from var(--ad-neutral-200) r g b / 0.13);
+    0 0 1rem rgb(from var(--ad-input-accent) r g b / 0.35);
 }
-/* Fluent-style accent line that grows from the centre on focus. */
-.ad-input-base::after {
-  content: "";
+/* Use the same neon contour as the rest of the kit. */
+.ad-input-base > .ad-input-border {
   position: absolute;
-  inset: auto 0.5rem -0.0625rem;
-  height: 0.125rem;
-  border-radius: 999rem;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    var(--ad-input-accent),
-    transparent
-  );
-  box-shadow: 0 0 0.5rem var(--ad-red);
-  transform: scaleX(0);
-  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
+  inset: -0.0625rem;
+  border-radius: inherit;
   pointer-events: none;
 }
-.ad-input-base:focus-within::after {
-  transform: scaleX(1);
-}
 .ad-input-base[data-invalid] {
   --ad-input-accent: var(--ad-secondary);
   border-color: rgb(from var(--ad-primary) r g b / 0.61);
@@ -102,28 +88,24 @@
 .ad-input-base[data-readonly] {
   border-style: dashed;
   border-color: rgb(from var(--ad-secondary) r g b / 0.4);
-  background: var(--ad-neutral-900);
   box-shadow: none;
 }
 
 /* Variants. */
 .ad-input-base[data-ad-variant="filled"] {
-  border-color: transparent;
-  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.4);
-  border-end-start-radius: 0.25rem;
-  border-end-end-radius: 0.25rem;
-  background: linear-gradient(180deg, var(--ad-neutral-800), var(--ad-neutral-850));
-  box-shadow: inset 0 0.0625rem 0 #ffffff10;
+  border-color: rgb(from var(--ad-neutral-200) r g b / 0.2);
+  background:
+    radial-gradient(ellipse at 100% 100%, rgb(from var(--ad-primary) r g b / 0.4), transparent 55%),
+    linear-gradient(180deg, var(--ad-neutral-800), var(--ad-neutral-850));
+  box-shadow: inset 0 0.0625rem 0 rgb(from var(--ad-text) r g b / 0.1);
 }
 .ad-input-base[data-ad-variant="filled"]:hover:not([data-disabled]) {
-  background: linear-gradient(180deg, var(--ad-primary-800), var(--ad-neutral-800));
-  border-color: transparent;
-  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.66);
+  border-color: rgb(from var(--ad-input-accent) r g b / 0.66);
 }
 .ad-input-base[data-ad-variant="underlined"] {
   padding-inline: 0.125rem;
   border-color: transparent;
-  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.42);
+  border-bottom-color: var(--ad-input-accent);
   border-radius: 0;
   background: transparent;
   box-shadow: none;
@@ -131,17 +113,17 @@
 .ad-input-base[data-ad-variant="underlined"]:hover:not([data-disabled]) {
   border-color: transparent;
   border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.77);
+  box-shadow: none;
 }
-.ad-input-base:is(
-    [data-ad-variant="filled"],
-    [data-ad-variant="underlined"]
-  ):focus-within {
+.ad-input-base[data-ad-variant="underlined"]:focus-within {
   border-color: transparent;
   border-bottom-color: var(--ad-input-accent);
   box-shadow: none;
 }
-.ad-input-base[data-ad-variant="underlined"]::after {
-  inset-inline: 0;
+.ad-input-base[data-ad-variant="underlined"] > .ad-input-border {
+  inset: auto -0.0625rem -0.0625rem;
+  height: 0.0625rem;
+  border-radius: 0;
 }
 
 /* Content. */
@@ -173,7 +155,7 @@
 }
 .ad-input-base input::placeholder,
 .ad-input-base textarea::placeholder {
-  color: var(--ad-neutral-500);
+  color: var(--ad-neutral-200);
   opacity: 1;
 }
 .ad-input-base textarea {
@@ -205,7 +187,7 @@
   align-items: center;
   gap: 0.125rem;
   flex: none;
-  color: var(--ad-muted);
+  color: var(--ad-text);
 }
 .ad-input-base[data-multiline] .ad-input-adornment {
   min-height: calc(var(--ad-size-h) - 0.125rem - var(--ad-size-pad-x) * 1.5);

package/dist/components/media/MelodyRoll/melody-glow.d.ts

@@ -0,0 +1,5 @@
+export function createMelodyGlow(root: any, initialState: any, onReady: any): {
+    update(next: any): void;
+    ready(data: any): void;
+    dispose: () => void;
+} | null;

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

@@ -1,14 +1,18 @@
 /* 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. */
+@property --ad-roll-beat {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
 .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;
+  overflow: visible;
   isolation: isolate;
   /* Room for the hairline edge that the glass layer below draws. */
   padding: 0.0625rem;
@@ -16,10 +20,66 @@
   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;
 }
+.ad-melody-roll-content {
+  display: grid;
+  grid-template-columns: var(--ad-roll-keys) minmax(0, 1fr);
+  width: calc(100% + 0.125rem);
+  height: calc(100% + 0.125rem);
+  margin: -0.0625rem;
+  padding: 0.0625rem;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: inherit;
+}
+.ad-melody-glow {
+  position: absolute;
+  pointer-events: none;
+  z-index: -1;
+}
+.ad-melody-voice-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 3;
+  pointer-events: none;
+}
+.ad-melody-note-canvas, .ad-melody-key-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.ad-melody-key-canvas { z-index: -1; }
+.ad-melody-roll[data-ad-foreground] .ad-melody-roll-seconds { visibility: hidden; }
+.ad-melody-roll-keys { isolation: isolate; }
+.ad-melody-roll[data-ad-foreground] .ad-melody-note:not([data-render-probe]) {
+  visibility: hidden;
+  transition: none;
+  animation: none;
+}
+.ad-melody-roll[data-ad-foreground] .ad-melody-roll-keys:not([data-render-probe]) > .ad-piano-key {
+  background: transparent;
+  box-shadow: none;
+  color: transparent;
+  border-color: transparent;
+  filter: none;
+  translate: none;
+  transition: none;
+  animation: none;
+}
+.ad-melody-roll[data-ad-glow] {
+  box-shadow: none;
+  transition: none;
+}
+.ad-melody-roll[data-ad-glow] :is(.ad-melody-roll-light, .ad-melody-playhead-light, .ad-melody-voice, svg.ad-melody-trail) {
+  visibility: hidden;
+}
 /* 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 {
+.ad-melody-roll-light {
   content: "";
   position: absolute;
   inset: 0;
@@ -36,10 +96,9 @@
   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 {
+.ad-melody-roll-light {
   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;
 }
@@ -155,14 +214,13 @@
     0 0 1rem var(--ad-primary);
 }
 /* The playhead flares on the beat: a wider glow, drawn once, faded in. */
-.ad-melody-playhead::after {
+.ad-melody-playhead-light {
   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. */

package/dist/core.js

@@ -11,7 +11,7 @@ import {
   useSmoothWheel,
   useTabShape,
   useTick
-} from "./chunks/chunk-YVRQTI7B.js";
+} from "./chunks/chunk-OCH27SNY.js";
 import {
   LocaleProvider,
   addMessages,

package/dist/editor.js

@@ -1,6 +1,6 @@
 import {
   PianoRoll
-} from "./chunks/chunk-VK6GHRLV.js";
+} from "./chunks/chunk-RM7YNNMZ.js";
 import "./chunks/chunk-BJSFN52W.js";
 import "./chunks/chunk-FCOU3ODR.js";
 export {

package/dist/forms.js

@@ -4,8 +4,8 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-FRALT7ER.js";
-import "./chunks/chunk-YVRQTI7B.js";
+} from "./chunks/chunk-L6VCC7AS.js";
+import "./chunks/chunk-OCH27SNY.js";
 import "./chunks/chunk-BJSFN52W.js";
 import "./chunks/chunk-FCOU3ODR.js";
 export {