@neo-ui-kit/react 1.3.8 → 1.3.10

package/README.md

@@ -4,6 +4,19 @@ Migration: replace `@ad-voice/ui` with `@neo-ui-kit/react` in dependencies and i
 
 NEO UI — React + TypeScript UI kit: glass/ruby surfaces, animated neon borders, fields, tabs, dialogs, audio controls and a melody editor.
 
+## 1.3.10
+
+- MelodyRoll renders notes, lyrics, key effects and voice effects in a shared worker while keeping native keyboard input and focus.
+- Bounded sprite caches and stable DOM reduce playback work; CSS/SVG fallback remains available.
+- CPU ×8 measurements are near 60 FPS; ×16 page updates measured 49.5–59.8 FPS while worker rendering stayed near 60. Stable 60 FPS for the complete scene is not yet established. See the [performance report](https://github.com/Pro100Dimka/adui/blob/main/evidence/performance-report.md).
+
+## 1.3.9
+
+- Rounded field variants share the existing neon outline; outlined and underlined fields have transparent backgrounds, and filled fields have no animated border.
+- Faster DataTable sorting, cached playground runtime builds and shared editor sources.
+- The shared motion clock defaults to 60 FPS; NeonWaves stars render in the existing worker where supported, with hidden effects paused.
+- MelodyRoll indexes note blocks and limits style invalidation while retaining its effects. Stable 60 FPS under CPU ×8/×16 throttling is **not achieved**; the latest full diagnostic measured about 35.4/6.3 FPS. See the [performance report](https://github.com/Pro100Dimka/adui/blob/main/evidence/performance-report.md) for scenarios and limitations.
+
 ## Install
 
 Live docs: https://pro100dimka.github.io/adui/#/components/overview
@@ -25,7 +38,7 @@ 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.3.8.tgz
+npm install /path/to/adui/release/neo-ui-kit-react-1.3.10.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-пакет).
@@ -68,6 +81,10 @@ export function SettingsCard() {
 
 Fields that declare `value` / `defaultValue` support controlled and uncontrolled values; checkboxes and switches use `checked` / `defaultChecked`. Dialog supports `open` / `defaultOpen` and `onOpenChange`; Popover requires controlled `open`. See each component's API for its supported state and event names; a change callback reports a user action, while the owner applies the new controlled value.
 
+`InputBase` provides the shared field appearance: `variant="outlined"` has a rounded, glowing outline and a transparent background; `filled` has a glass-like fill with a soft accent highlight and a static thin border; `underlined` has only a glowing bottom line and no background. Outlined and underlined use the shared `AnimatedBorder`, including its motion and offscreen controls; filled has no animated border. Colours follow the active theme. Outlined and underlined fields remain transparent on hover, focus and when read-only. TextField, Select, Autocomplete, NumberField, TextArea, TagInput and PeoplePicker share the same radius at each size, including fields with wrapped chips. Existing adornments and floating labels are supported.
+
+Rounded field variants use `--ad-radius-pill`, so floating labels and taller chip rows keep the capsule shape instead of retaining a radius calculated from the shorter base height.
+
 The package ships ESM only. Import styles once and wrap the UI in `ThemeProvider`; no playground CSS or router is required. `@neo-ui-kit/react/core`, `/forms`, `/editor`, and `/router` share the same provider contexts with the root entry.
 
 The library code is licensed under [MIT](./LICENSE). Bundled third-party materials retain their respective licenses and notices: `dist/fonts/melodix/OFL-PlayfairDisplay.txt` for the font and `dist/components/artwork/QuantumField/UPSTREAM-LICENSE.txt` for Quantum Fields.
@@ -164,6 +181,10 @@ For an unpaginated large dataset use `virtualize maxHeight={480}`. The table mou
 
 ## Responsiveness
 
+The shared animation clock defaults to 60 fps, including border and wave workers. At full rate it follows browser animation frames without an extra timer; `setMotionFrameRate(30)` remains available when an application explicitly prefers less decorative work. Hidden/offscreen work still pauses. The rate is a scheduling target, not a minimum guaranteed on every device or screen.
+
+NeonWaves draws stars in its existing wave worker, preserving their positions, sizes and easing. Browsers without worker canvas support share nine CSS twinkle phases instead; the entire decoration pauses offscreen. QuantumField's WebGL renderer targets 60 fps; its CPU canvas fallback retains the 24/30 fps quality limits to protect the UI thread. The separate QuantumBackground visualizer keeps its own adaptive-quality controls. CPU ×8/×16 measurements and remaining limits are recorded in [the performance report](../../evidence/performance-report.md).
+
 The package pauses decorative work outside the viewport and in hidden tabs. Its shared motion clock stops when no visible work remains; consumers do not need a separate animation scheduler. Playback updates are isolated from transport and volume controls. Audio analysis and loader image processing yield between short CPU work slices, and unmounting cancels stale results. Processed loader images are capped at 2048px on the longest side; turning background removal off restores the original upload.
 
 Router updates are immediate by default. Opt into native snapshot transitions with `transition` only when their temporary interruption of pointer interaction suits your screen; normal CSS entrances do not require it.
@@ -172,6 +193,10 @@ Animated border geometry is initialized and resized in small batches on the shar
 
 Keep `rows`, `columns`, `options`, and `initialValues` immutable: replace them when their contents change. Stable references allow expensive derived results to be reused across selection, navigation, and other local UI changes. Do not memoize every prop automatically.
 
+MelodyRoll also expects an immutable `notes` array: keep its reference stable during playback and replace it after editing notes. It caches pitch bounds and time bounds for blocks of 128 notes, skipping blocks outside the visible window. Input order and overlapping notes are preserved; heavily interleaved unsorted data can still require a full scan. The moving strip uses nearby time coordinates instead of ever-growing song offsets. Beat, voice level and accuracy updates are scoped to the elements that use them, avoiding restyling the whole keyboard and note strip. These changes preserve the existing glow, transitions, lyrics, seeking and wheel zoom; CPU ×8/×16 stress results are in the performance report.
+
+Version 1.3.10 renders notes, lyrics, key effects, beat glow, voice marker and the three-layer voice trail through a shared OffscreenCanvas worker. Two adjacent note windows bound the data sent to it; unchanged note batches are not resent on each tick. Native keyboard buttons retain pointer input, keyboard activation and focus. CSS supplies colours, shadows, timing and text geometry; readable webfont sources are loaded into the worker before handoff. Note sprites are cached (512 base sprites; filtered sprites limited to 8 × 1024² physical pixels), and structural DOM stays unchanged during playback. CSS/SVG remains active until readiness and returns on failure, unavailable APIs/CSP, or unsupported styles/font sources. Hidden/paused scenes stop drawing; the last unmount terminates the worker. Canvas and CSS antialiasing differ slightly. In repeated 30-second runs, page updates reached about 59.9–60 FPS at CPU ×8 and 49.5–59.5 FPS at ×16; the worker drawing loop stayed near 60 FPS. Stable 60 FPS for the complete scene is **not yet established**. See the [performance report](https://github.com/Pro100Dimka/adui/blob/main/evidence/performance-report.md) for measurements and limits.
+
 For large tables, use `pageSize` or opt into `virtualize` to bound mounted rows. Virtualization bounds rendering, not the cost of client-side sorting/filtering: use the manual server contracts for datasets that are too large to process locally. Open Select/Autocomplete lists are not virtualized: filter very large datasets before supplying options. `PeoplePicker.onSearch(query, signal)` receives an optional `AbortSignal`; forward it to your data client to cancel superseded requests. Expensive custom renderers, validators, and aggregates still need their own work budget.
 
 ## Entry points

package/dist/chunks/{chunk-FRALT7ER.js → chunk-L6VCC7AS.js}

@@ -1,7 +1,8 @@
 import {
   themes,
+  useBorder,
   usePauseOffscreen
-} from "./chunk-YVRQTI7B.js";
+} from "./chunk-OCH27SNY.js";
 import {
   assignRef,
   clamp,
@@ -351,6 +352,28 @@ var Popover = (p) => {
   );
 };
 
+// src/components/effects/AnimatedBorder/AnimatedBorder.tsx
+import { createElement as createElement3, useRef as useRef3 } from "react";
+function AnimatedBorder({
+  as = "div",
+  shell = false,
+  round = false,
+  children,
+  ...props
+}) {
+  const ref = useRef3(null);
+  useBorder(ref, true, shell, round);
+  usePauseOffscreen(ref);
+  return createElement3(
+    as,
+    {
+      ...mark("AnimatedBorder", props),
+      ref
+    },
+    children
+  );
+}
+
 // src/components/controls/InputBase/InputBase.tsx
 import { forwardRef } from "react";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -383,6 +406,7 @@ var InputBase = /* @__PURE__ */ forwardRef(function InputBase2({
       "data-filled": filled || void 0,
       onClick,
       children: [
+        variant !== "filled" && !disabled && !readOnly && /* @__PURE__ */ jsx5(AnimatedBorder, { className: "ad-input-border" }),
         startAdornment && /* @__PURE__ */ jsx5("span", { className: "ad-input-adornment", "data-position": "start", children: startAdornment }),
         /* @__PURE__ */ jsxs2("span", { className: "ad-input-base-content", children: [
           label && /* @__PURE__ */ jsx5("span", { className: "ad-input-label", id: labelId, children: label }),
@@ -418,7 +442,7 @@ var hsvToHex = ({ h, s, v }) => {
 };
 
 // src/components/controls/ColorPicker/ColorPicker.tsx
-import { useEffect, useRef as useRef3, useState } from "react";
+import { useEffect, useRef as useRef4, useState } from "react";
 
 // src/components/controls/internal.tsx
 import { Fragment, useId as useId2, useLayoutEffect as useLayoutEffect2 } from "react";
@@ -664,7 +688,7 @@ function ColorPicker({ value: controlled, defaultValue = "#ff244c", onValueChang
   useEffect(() => {
     if (p.disabled) setOpen(false);
   }, [p.disabled]);
-  const box = useRef3(null);
+  const box = useRef4(null);
   const ids = useFieldIds(p.label, p.description, void 0, p);
   const hex = normalizeHex(value) ?? "#ff244c";
   if (inline)
@@ -690,7 +714,7 @@ function ColorPicker({ value: controlled, defaultValue = "#ff244c", onValueChang
 }
 
 // src/components/controls/shared.tsx
-import { useEffect as useEffect2, useRef as useRef4 } from "react";
+import { useEffect as useEffect2, useRef as useRef5 } from "react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function buttonView(p, name = "Button") {
   const {
@@ -764,7 +788,7 @@ function BooleanControl({
     p.defaultChecked ?? false,
     p.onValueChange
   );
-  const input = useRef4(null);
+  const input = useRef5(null);
   useEffect2(() => {
     if (input.current) input.current.indeterminate = !!p.indeterminate;
   }, [p.indeterminate]);
@@ -797,11 +821,11 @@ var Button = /* @__PURE__ */ forwardRef2(function Button2(p, ref) {
 });
 
 // src/components/controls/FilePicker/FilePicker.tsx
-import { useEffect as useEffect3, useRef as useRef5, useState as useState2 } from "react";
+import { useEffect as useEffect3, useRef as useRef6, useState as useState2 } from "react";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var FilePicker = (p) => {
   const tr = useTr();
-  const input = useRef5(null), [names, setNames] = useState2(""), [preview, setPreview] = useState2(), [over, setOver] = useState2(false);
+  const input = useRef6(null), [names, setNames] = useState2(""), [preview, setPreview] = useState2(), [over, setOver] = useState2(false);
   useEffect3(() => () => {
     if (preview) URL.revokeObjectURL(preview);
   }, [preview]);
@@ -949,7 +973,7 @@ var Tab = /* @__PURE__ */ forwardRef3(function Tab2({
 });
 
 // src/components/controls/Tabs/Tabs.tsx
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState3 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState3 } from "react";
 import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function Tabs(p) {
   const tr = useTr();
@@ -963,7 +987,7 @@ function Tabs(p) {
     p.defaultValue ?? items.find((item) => !item.disabled)?.value ?? "",
     p.onValueChange
   );
-  const buttons = useRef6([]);
+  const buttons = useRef7([]);
   const selected = items.findIndex((item) => item.value === value && !item.disabled);
   const firstEnabled = items.findIndex((item) => !item.disabled);
   const fallback = items[firstEnabled]?.value;
@@ -972,7 +996,7 @@ function Tabs(p) {
   }, [p.value, selected, fallback, setValue]);
   const [place2, setPlace] = useState3();
   const [moving, setMoving] = useState3(false);
-  const first = useRef6(true);
+  const first = useRef7(true);
   useLayoutEffect3(() => {
     const tab = buttons.current[selected];
     if (!tab) return setPlace(void 0);
@@ -1401,7 +1425,7 @@ function Chip({ label, icon, avatar, onRemove, removeLabel, onClick, selected, d
 import { useState as useState4 } from "react";
 
 // src/components/controls/ChipField.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function ChipField({
   className,
@@ -1425,7 +1449,7 @@ function ChipField({
   inputProps
 }) {
   const ids = useFieldIds(label, description || error, inputProps?.id, inputProps);
-  const input = useRef7(null);
+  const input = useRef8(null);
   const floating = labelPlacement === "floating" && !!label;
   const hasChips = Array.isArray(chips) ? chips.length > 0 : !!chips;
   return /* @__PURE__ */ jsx19(FieldFrame, { ids, className: `ad-chip-field ${className}`, label: floating ? void 0 : label, required, description, error, children: /* @__PURE__ */ jsx19(
@@ -1552,7 +1576,7 @@ function TagInput({
 }
 
 // src/components/controls/PeoplePicker/PeoplePicker.tsx
-import { useEffect as useEffect4, useId as useId3, useRef as useRef8, useState as useState5 } from "react";
+import { useEffect as useEffect4, useId as useId3, useRef as useRef9, useState as useState5 } from "react";
 import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var searchDelay = 220;
 function PeoplePicker({
@@ -1574,9 +1598,9 @@ function PeoplePicker({
   const [found, setFound] = useState5(null);
   const [loading, setLoading] = useState5(false);
   const [searchError, setSearchError] = useState5();
-  const box = useRef8(null);
+  const box = useRef9(null);
   const listId = `${useId3()}-people`;
-  const search = useRef8(onSearch);
+  const search = useRef9(onSearch);
   search.current = onSearch;
   const remote = !!onSearch;
   const needle = query.trim().toLowerCase();
@@ -1741,7 +1765,7 @@ function PeoplePicker({
 }
 
 // src/components/controls/DatePicker/DatePicker.tsx
-import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef9, useState as useState6 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef10, useState as useState6 } from "react";
 import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var iso = (date) => `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 var calendarDate = (year, month, day) => {
@@ -1771,7 +1795,7 @@ function DatePicker({ value: controlled, defaultValue = "", onValueChange, min,
   }, [p.disabled]);
   const [text, setText] = useState6(null);
   const [month, setMonth] = useState6(() => selected ?? /* @__PURE__ */ new Date());
-  const box = useRef9(null);
+  const box = useRef10(null);
   const ids = useFieldIds(p.label, p.description || p.error, void 0, p);
   const format = useMemo3(() => new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }), [locale]);
   const weekdays = useMemo3(
@@ -1881,7 +1905,7 @@ function DatePicker({ value: controlled, defaultValue = "", onValueChange, min,
 }
 
 // src/components/controls/Autocomplete/Autocomplete.tsx
-import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef10, useState as useState7 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef11, useState as useState7 } from "react";
 import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultOptions = ["WASAPI Shared", "WASAPI Exclusive", "ASIO"];
 var Autocomplete = ({
@@ -1915,8 +1939,8 @@ var Autocomplete = ({
   );
   const [open, setOpen] = useState7(false);
   const [active, setActive] = useState7(0);
-  const inputNode = useRef10(null);
-  const box = useRef10(null);
+  const inputNode = useRef11(null);
+  const box = useRef11(null);
   const ids = useFieldIds(label, description || error, input.id, input);
   const locked = !!(input.disabled || input.readOnly);
   useEffect6(() => {
@@ -2155,7 +2179,7 @@ var NumberField = ({
 };
 
 // src/components/controls/Select/Select.tsx
-import { forwardRef as forwardRef6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef11, useState as useState8 } from "react";
+import { forwardRef as forwardRef6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef12, useState as useState8 } from "react";
 import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var defaultKey = (value) => typeof value === "object" && value !== null ? JSON.stringify(value) : String(value);
 var textOf = (option) => option.text ?? (typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : "");
@@ -2183,8 +2207,8 @@ var Select = /* @__PURE__ */ forwardRef6(function Select2(p, ref) {
       setQuery("");
     }
   }, [p.disabled]);
-  const anchor = useRef11(null);
-  const box = useRef11(null);
+  const anchor = useRef12(null);
+  const box = useRef12(null);
   const keyedOptions = useMemo5(() => options.map((option) => ({ option, key: keyOf(option.value) })), [options, keyOf]);
   const selectedKey = value === void 0 ? void 0 : keyOf(value);
   const selected = keyedOptions.find(({ key }) => key === selectedKey)?.option;
@@ -2354,10 +2378,10 @@ var Select = /* @__PURE__ */ forwardRef6(function Select2(p, ref) {
 });
 
 // src/components/effects/ImageShine/ImageShine.tsx
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 function ImageShine({ src, glow = true, label, style, ...p }) {
-  const pauseRef = useRef12(null);
+  const pauseRef = useRef13(null);
   usePauseOffscreen(pauseRef);
   return /* @__PURE__ */ jsxs18(
     "span",
@@ -2482,7 +2506,7 @@ import {
   useEffect as useEffect8,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo6,
-  useRef as useRef13,
+  useRef as useRef14,
   useState as useState9
 } from "react";
 
@@ -2562,17 +2586,17 @@ function paintCanvas(key, width, height, painting) {
 import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 var RotaryKnob = (p) => {
   const tr = useTr();
-  const rootRef = useRef13(null);
-  const baseRef = useRef13(null);
-  const feedbackRef = useRef13(null);
-  const rotorRef = useRef13(null);
-  const controlRef = useRef13(null);
-  const readoutRef = useRef13(null);
-  const controllerRef = useRef13(null);
-  const onChangeRef = useRef13(p.onValueChange);
-  const onCommitRef = useRef13(p.onValueCommit);
-  const disabledRef = useRef13(!!p.disabled);
-  const readOnlyRef = useRef13(!!p.readOnly);
+  const rootRef = useRef14(null);
+  const baseRef = useRef14(null);
+  const feedbackRef = useRef14(null);
+  const rotorRef = useRef14(null);
+  const controlRef = useRef14(null);
+  const readoutRef = useRef14(null);
+  const controllerRef = useRef14(null);
+  const onChangeRef = useRef14(p.onValueChange);
+  const onCommitRef = useRef14(p.onValueCommit);
+  const disabledRef = useRef14(!!p.disabled);
+  const readOnlyRef = useRef14(!!p.readOnly);
   const numberFormat = useMemo6(
     () => new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 1 }),
     []
@@ -2581,14 +2605,14 @@ var RotaryKnob = (p) => {
   const span = (p.max ?? 100) - min || 1;
   const toPosition = (value) => clamp((value - min) / span * 100);
   const toValue = (position) => Math.round((min + position / 100 * span) * 1e6) / 1e6;
-  const controlledPosition = useRef13(void 0);
+  const controlledPosition = useRef14(void 0);
   controlledPosition.current = p.value === void 0 ? void 0 : toPosition(p.value);
   const displayScale = p.displayScale ?? 1;
   const format = (value) => `${numberFormat.format(value * displayScale)}${p.suffix ?? "%"}`;
-  const scale = useRef13({ toValue, format });
+  const scale = useRef14({ toValue, format });
   scale.current = { toValue, format };
-  const stepRef = useRef13(1);
-  const fineStepRef = useRef13(0.1);
+  const stepRef = useRef14(1);
+  const fineStepRef = useRef14(0.1);
   onChangeRef.current = p.onValueChange;
   onCommitRef.current = p.onValueCommit;
   disabledRef.current = !!p.disabled;
@@ -2596,8 +2620,8 @@ var RotaryKnob = (p) => {
   stepRef.current = Math.max(1e-3, (p.step ?? span / 100) / span * 100);
   fineStepRef.current = Math.max(1e-3, (p.fineStep ?? span / 1e3) / span * 100);
   const initial = toPosition(p.value ?? p.defaultValue ?? min + span * 0.67);
-  const initialRef = useRef13(initial);
-  const resetRef = useRef13(void 0);
+  const initialRef = useRef14(initial);
+  const resetRef = useRef14(void 0);
   resetRef.current = p.resetValue === void 0 ? void 0 : toPosition(p.resetValue);
   const diameter = p.diameter ?? { xs: 84, sm: 124, md: 220, lg: 320 }[normalizeSize(p.size) ?? "md"];
   useLayoutEffect4(() => {
@@ -3277,7 +3301,7 @@ var RotaryKnob = (p) => {
       controllerRef.current?.setValue(toPosition(p.value), false);
   }, [p.value, min, span]);
   const [draft, setDraft] = useState9(null);
-  const cancelled = useRef13(false);
+  const cancelled = useRef14(false);
   const editable = !p.disabled && !p.readOnly;
   const applyDraft = () => {
     if (cancelled.current) return;
@@ -3396,7 +3420,7 @@ import {
   useContext,
   useEffect as useEffect9,
   useMemo as useMemo7,
-  useRef as useRef14,
+  useRef as useRef15,
   useState as useState10
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
@@ -3416,8 +3440,8 @@ var setPath = (value, path, next) => {
   return root;
 };
 function useForm(options) {
-  const [values, setValues] = useState10(options.initialValues), [errors, setErrors] = useState10({}), [touched, setTouchedState] = useState10({}), [submitting, setSubmitting] = useState10(false), latest = useRef14(values), touchedRef = useRef14(touched), validationId = useRef14(0), submittingRef = useRef14(false), settings = useRef14(options), initialKey = useMemo7(() => JSON.stringify(options.initialValues), [options.initialValues]);
-  const previousInitialKey = useRef14(initialKey);
+  const [values, setValues] = useState10(options.initialValues), [errors, setErrors] = useState10({}), [touched, setTouchedState] = useState10({}), [submitting, setSubmitting] = useState10(false), latest = useRef15(values), touchedRef = useRef15(touched), validationId = useRef15(0), submittingRef = useRef15(false), settings = useRef15(options), initialKey = useMemo7(() => JSON.stringify(options.initialValues), [options.initialValues]);
+  const previousInitialKey = useRef15(initialKey);
   settings.current = options;
   useEffect9(() => {
     if (previousInitialKey.current === initialKey) return;
@@ -3623,6 +3647,7 @@ export {
   Avatar,
   Popover,
   variantMaterial,
+  AnimatedBorder,
   InputBase,
   normalizeHex,
   hexToHsv,

package/dist/chunks/{chunk-YVRQTI7B.js → chunk-OCH27SNY.js}

@@ -12,7 +12,7 @@ import {
 // src/core/border-worker.js
 function renderBorders() {
   const scenes = /* @__PURE__ */ new Map();
-  let frame = null, fps = 30, last2 = -Infinity;
+  let frame = null, fps = 60, last2 = -Infinity;
   const release = (scene) => {
     for (const layer of scene.layers) {
       layer.mask.close();
@@ -91,7 +91,7 @@ var worker = null;
 var workerUrl = null;
 var serial = 0;
 var unavailable = false;
-var frameRate = 30;
+var frameRate = 60;
 var clients = /* @__PURE__ */ new Map();
 var visibilityChanged = () => {
   for (const client of clients.values()) client.visibility();
@@ -466,7 +466,7 @@ function createNeonGeometry() {
 var neonGeometry = createNeonGeometry();
 function renderNeon(createGeometry) {
   const geometry = createGeometry(), scenes = /* @__PURE__ */ new Map();
-  let frame = null, fps = 30, last2 = -Infinity;
+  let frame = null, fps = 60, last2 = -Infinity;
   function draw(scene) {
     const { ctx, width, height, padX, padY, sx, sy, options, time, gradient } = scene;
     ctx.clearRect(-padX, -padY, width + padX * 2, height + padY * 2);
@@ -551,6 +551,27 @@ function renderNeon(createGeometry) {
       );
       ctx.restore();
     }
+    const phases = scene.twinkle ??= new Float32Array(9);
+    for (let phase = 0; phase < (options.dots?.length ? 9 : 0); phase++) {
+      const cycle = (time + phase * 0.45) % 4;
+      const x = cycle < 2 ? cycle / 2 : (4 - cycle) / 2;
+      let low = 0, high = 1;
+      for (let step = 0; step < 20; step++) {
+        const t2 = (low + high) / 2;
+        const at = 3 * (1 - t2) ** 2 * t2 * 0.42 + 3 * (1 - t2) * t2 * t2 * 0.58 + t2 ** 3;
+        if (at < x) low = t2;
+        else high = t2;
+      }
+      const t = (low + high) / 2;
+      phases[phase] = 1 - (3 * t * t - 2 * t ** 3);
+    }
+    ctx.fillStyle = scene.starColor;
+    for (const [i, dot] of (options.dots ?? []).entries()) {
+      ctx.globalAlpha = 0.05 + (dot.o - 0.05) * phases[i % 9];
+      ctx.beginPath();
+      ctx.arc(dot.x * sx, dot.y * sy, Math.max(1, dot.r * 3) / 2, 0, Math.PI * 2);
+      ctx.fill();
+    }
     ctx.globalAlpha = 1;
   }
   function schedule2() {
@@ -624,7 +645,7 @@ var thread = null;
 var url = null;
 var serial2 = 0;
 var unavailable2 = false;
-var frameRate2 = 30;
+var frameRate2 = 60;
 var clients2 = /* @__PURE__ */ new Map();
 var visibilityChanged2 = () => {
   for (const client of clients2.values()) client.visibility();
@@ -687,6 +708,7 @@ function createNeonRenderer(root, svg, initial) {
   };
   const hideOriginal = () => {
     if (!renderer.ready) return;
+    root.setAttribute("data-ad-neon-rendered", "");
     svg.style.visibility = "hidden";
     const node = root.querySelector(".ad-neon-waves-comets");
     if (node !== comets) {
@@ -750,6 +772,7 @@ function createNeonRenderer(root, svg, initial) {
     intersection.disconnect();
     tokens.disconnect();
     svg.style.visibility = originalVisibility;
+    root.removeAttribute("data-ad-neon-rendered");
     if (comets) comets.style.visibility = cometVisibility;
     canvas.remove();
     clients2.delete(id);
@@ -795,6 +818,7 @@ function createNeonRenderer(root, svg, initial) {
         stops,
         shadows,
         color: style?.backgroundColor,
+        starColor: getComputedStyle(root.querySelector(".ad-neon-waves-star") ?? root).backgroundColor,
         options: { ...options, comets: comet ? options.comets : 0 }
       };
       const key = JSON.stringify(config);
@@ -841,8 +865,7 @@ var measurements = /* @__PURE__ */ new Set();
 var raf = null;
 var timer = null;
 var last = 0;
-var weakDevice = typeof navigator !== "undefined" && ((navigator.hardwareConcurrency || 8) <= 4 || (navigator.deviceMemory || 8) <= 4);
-var FRAME = 1e3 / (weakDevice ? 20 : 30);
+var FRAME = 1e3 / 60;
 setBorderFrameRate(1e3 / FRAME);
 setNeonFrameRate(1e3 / FRAME);
 U.setMotionFrameRate = (fps) => {
@@ -946,7 +969,8 @@ function tick(now) {
     last = now;
   }
   if (hasVisibleWork() && !document.hidden) {
-    timer = setTimeout(() => {
+    if (FRAME <= 1e3 / 60) schedule();
+    else timer = setTimeout(() => {
       timer = null;
       schedule();
     }, Math.max(0, FRAME - (performance.now() - now) - 4));

package/dist/chunks/{chunk-VK6GHRLV.js → chunk-RM7YNNMZ.js}

@@ -49,6 +49,7 @@ var PianoKeyboard = /* @__PURE__ */ memo(function PianoKeyboard2({
   const key = (midi, top, size, black) => {
     const props = {
       className: "ad-piano-key",
+      "data-midi": midi,
       "data-black": black || void 0,
       "data-active": midi === activeMidi || void 0,
       "data-hit": midi === activeMidi && hit || void 0,

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

@@ -1,4 +1,4 @@
-/* Styles owned by NeonWaves: the strands move by script; the stars twinkle on their own and the comets are moved by script. */
+/* Worker canvas draws the decoration; these elements also provide the main-thread fallback. */
 .ad-neon-waves {
   position: relative;
   display: block;
@@ -22,11 +22,24 @@
   border-radius: 50%;
   background: var(--ad-pink);
   translate: -50% -50%;
+}
+.ad-neon-waves-stars,
+.ad-neon-waves-stars-floor {
+  position: absolute;
+  inset: 0;
+}
+.ad-neon-waves-stars {
   animation: ad-neon-twinkle 4s ease-in-out infinite;
 }
+.ad-neon-waves[data-ad-neon-rendered] :is(.ad-neon-waves-stars, .ad-neon-waves-stars-floor) {
+  display: none;
+}
 @keyframes ad-neon-twinkle {
+  0%, 100% {
+    opacity: 1;
+  }
   50% {
-    opacity: 0.05;
+    opacity: 0;
   }
 }
 /* A comet is a short bright dash with a glow. Its glow is drawn once on its own layer; the