@xsynaptic/sonic-ui 0.19.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @xsynaptic/sonic-ui
 
+## 0.21.0
+
+### Minor Changes
+
+- - Breaking: the number box is plain: its digits alone in the text colour, with no glass, edge or corner. Wrap it in `.sonic-screen` for the box (`--sonic-screen-size` set to the number's size and `--sonic-screen-inset-ratio: 0` gives the old one). `--sonic-number-radius-ratio` and `--sonic-number-inset-ratio` are removed, `--sonic-radius` and the glass tokens no longer reach it, and `number.css` needs only the core, cap and value material sheets.
+  - With no skin a meter no longer draws a near-black bar: its bed is clear and its unlit segments are a faint tint of the text colour, like the LED. Skins are unchanged.
+  - A screen now shrinks in a flex row; give one that holds a text readout a `min-inline-size`.
+  - A button sets `user-select: none`, as every other control does, so a text legend no longer selects under a long press on touch.
+  - A held XY puck stays solid, as a held envelope handle does; the hold shows as the glow, or as the bracket on a skin with no relief. It no longer turns hollow.
+  - `--sonic-focus-radius` rounds the focus outline and glow of the plain boxes (number box, waveform, wave strip), which have no corner of their own. Unset, they stay square.
+- - With no skin, every unlit part follows the text colour at 30%, as the LED and the meter did: a dial's ring, a slider's groove, the ring, the pad's lines, the wave strip. Glass, a disabled envelope handle and a disabled puck stay solid. Skins are unchanged.
+  - Tokens: `--sonic-touch-action` reaches the dial and the number box, so one set on a wrapper for a slider now reaches dials inside it. `--sonic-radius` reaches every readout; `--sonic-readout-radius-ratio` is new and wins when set. `--sonic-focus-radius` also rounds the focus of a slider and a switch position.
+  - Focus: a visible `--sonic-focus-outline` is drawn on the cap of a button, a segmented option and a dial, where the cap covered it.
+  - Waveform: a repeating key scrubs, as on the wave strip: `input` on each repeat and one `change` on keyup.
+  - Split: `disabled` freezes the members against gestures; a written `value` still lands.
+  - XY pad: `double-press="reset"` (default `none`), `:state(revealed)`, `dragging` and `revealed` getters, and `sonic-reveal`. A form reset during a drag is dropped.
+  - Toggle: a press that slides a few pixels is still a press. A coloured lit toggle takes system colours in forced colours.
+  - Button and switch: a key prevented in a capture listener no longer holds a momentary button, a bat press let go off the switch is cancelled, and an LED in a disabled latched button or option dims where it stayed lit.
+  - Screen: its text can be selected (a screen that is itself a button sets its own `user-select`), and its `--sonic-glass-depth` no longer flattens the well of a button inside it.
+  - The keycap sheen follows `--sonic-light-tilt`.
+
+## 0.20.0
+
+### Minor Changes
+
+- - Breaking: the wave strip, waveform, spectrum, envelope and XY pad draw no glass. Each is plain, in the text colour around it, with no fill, edge or corner. For the encased look wrap one in `<div class="sonic-screen">`, whose padding is the inset.
+  - Breaking: `.sonic-screen` is sized like a `div`. It fills a block, hugs in a flex row and is never shorter than `--sonic-screen-size`; `--sonic-screen-aspect-ratio` is removed, so a text readout sets its own width. A control with `fill` needs the screen given a height.
+  - Removed tokens: `--sonic-wavestrip-inset-ratio`, `--sonic-waveform-inset-ratio`, `--sonic-spectrum-inset-ratio`, `--sonic-xy-inset-ratio`, and the `-radius-ratio` of the wave strip, waveform, spectrum, envelope and XY pad. `--sonic-radius` no longer reaches those five, and `--sonic-glass` with its depth, texture, edge, text and font reaches only the screen, the number box and the readouts. The four relief skins drop their wave strip inset.
+  - New token: `--sonic-wavestrip-marker-edge` colours the ring round a marker, which is clear when unset. A held puck and the gap in its focus ring are clear too, and the pad's lines stop at the puck. A held or disabled envelope handle is filled in its ring's colour.
+  - A plain control takes its colour from `color`, where it took `--sonic-glass-text`, and its canvas repaints when `color` changes. It ignores `--sonic-ink`, as before.
+  - With no token set: the XY pad and the spectrum lose their default insets (0.04 and 0.06), a wave strip's regions stop at the wave's height, and a screen's well takes the full depth where the waveform's took 0.6.
+  - `spectrum.css` needs only `material/core.css`; the envelope, waveform, wave strip and XY pad sheets no longer need `pane` or `well`. Importing sheets one by one, the glass comes back with `screen.css` and `material/glass.css`, `pane.css` and `well.css`.
+
+### Patch Changes
+
+- - Development warnings name a control's own sheet and `material/core.css` when missing, and no longer any other material sheet; the README table lists what each sheet needs.
+
 ## 0.19.0
 
 ### Minor Changes

package/README.md

@@ -2,9 +2,7 @@
 
 Native custom elements for audio interfaces. Each control renders in the light DOM, skinned with `--sonic-*` tokens (CSS custom properties). No framework, no runtime dependencies.
 
-Early and unstable: any 0.x release may break the API.
-
-This README holds what the package's own files do not say. For the rest, read the package:
+Early and unstable: any 0.x release may break the API, and the changelog is where a control's behaviour is described. This README holds setup and the contracts every control shares. For the rest, read the package:
 
 - Properties and methods: `dist/dev/elements/<control>.d.ts`. Every attribute has a property of the same name in camel case.
 - Tokens and their defaults: `dist/styles/<control>.css` and `dist/styles/material/`, where each token is read as `var(--sonic-…, default)`.
@@ -23,6 +21,7 @@ import '@xsynaptic/sonic-ui/define';
 ```css
 @layer base, sonic, components;
 
+@import 'reset.css' layer(base);
 @import '@xsynaptic/sonic-ui/controls.css';
 @import '@xsynaptic/sonic-ui/skins/slate.css';
 ```
@@ -33,116 +32,32 @@ import '@xsynaptic/sonic-ui/define';
 </body>
 ```
 
-- Every sheet sits in the `sonic` layer, so declare it below the layer your own rules live in.
-- A rule outside any layer beats every layered one, so an unlayered reset (`* { margin: 0; padding: 0 }`, a zeroed `border`, a bare `button`) strips padding, borders, type sizes and colours from the controls. Import a reset you do not own into a layer declared before `sonic`:
-
-  ```css
-  @layer base, sonic, components;
-
-  @import 'reset.css' layer(base);
-  ```
+- Every sheet sits in the `sonic` layer. A rule outside any layer beats every layered one, so an unlayered reset strips padding, borders and type from the controls: import a reset into a layer declared before `sonic`, and keep your own rules in one declared after.
+- A skin sheet does nothing until its class, `sonic-skin-<name>`, is on an ancestor. The skins are `slate`, `amber`, `ivory`, `lime` and `flat`. With no skin a control is bare, drawn in the text colour around it.
+- `./define` registers every control and `./define/<control>` registers one. `.` exports the classes and registers nothing.
+- Under a bundler that sets the `development` condition, as Vite's dev server does, the controls warn in the console about a missing sheet, a reset, a box property on a host and a child they do not use. Read the console before debugging.
 
-- A skin sheet does nothing until its class, `sonic-skin-<name>`, is on an ancestor of the controls. The skins are `slate`, `amber`, `ivory`, `lime` and `flat`; a wrapper with another skin's class reskins what is inside it. With no skin a control is bare: no cap and no well, drawn in the text colour around it.
-- `./define` registers every control. `./define/<control>` registers one, and `.` exports the classes and registers nothing.
-- Under a bundler that sets the `development` condition, as Vite's dev server does, the controls warn in the console about a missing sheet, a padding lost to an unlayered rule, a box property set on a host, a child they do not use and a binding that found nothing. Read the console before debugging.
+## Contracts
 
-## What every control shares
-
-- The host is `display: contents` and the control is an element inside it. A width, margin or transform on the host does nothing: size a control with its token (`--sonic-dial-size`, `--sonic-slider-length`), which can be set on the host or any ancestor, and place it with its parent's layout.
-- Name every control with `aria-label` or `aria-labelledby` on the host, or with a `<label>` for a form-associated one; the control moves the name onto its focusable part.
+- The host is `display: contents` and the control is an element inside it. A width, margin or transform on the host does nothing: size a control with its token (`--sonic-dial-size`, `--sonic-slider-length`), set on the host or any ancestor, and place it with its parent's layout.
+- The split is the one host with a box: `<sonic-split>` is inline until given a display, and laying it out is yours.
+- Register the classes under their stock tag names (`sonic-dial`, `sonic-split`). The sheets and the split key on them, so a split under another tag finds no members.
+- Name every control with `aria-label` or `aria-labelledby` on the host, or with a `<label>` for a form-associated one.
 - A boolean attribute is on when present, whatever its value, so `pressed="false"` latches a button. From a framework pass `undefined`, never `false`.
-- A control uses only the children it documents below, and adds one child of its own. Under a hydrating framework, register the definitions once hydration is done (in React, from an effect), so the added child is no mismatch.
-- Events bubble and carry no detail: read the property when one fires. A control knows nothing about playback, so wire `input` and `change` to your own state and write `value` back.
-- Buttons, value controls, the segmented control, the switch, the toggle and the XY pad are form-associated: give one a `name` and it submits, resets and restores with its form.
-- States a control sets itself are custom states on the host, selected with `:state()`: `dragging`, `cancelling`, `editing`, `revealed`, `springing`, `modulated`, `pressed`, `held`, `ladder`, `empty` and `pending`.
-
-## Value controls
-
-The dial, the slider, the number box and both wave controls hold one number, from `min` (0) to `max` (100) in steps of `step` (1).
-
-- `input` fires as the value moves and `change` once when a gesture ends, however it ends.
-- A drag owns the value: a write to `value` during one is dropped, so a seek bar fed by `timeupdate` needs no guard of its own.
-- A double press, or Enter, opens typed entry. `double-press="reset"` makes it go back to `default` instead. Cmd-click on Apple platforms, Ctrl-click elsewhere, and Delete reset whichever is chosen, once `default` is set.
-- `formatValue` and `parseValue` are properties holding functions. What the first writes, the second has to read, or typed entry opens on text it cannot take; `formatEntry` covers the case where it cannot.
-- The readout bubble is opt-in, with `readout`. Assistive technology hears the value without it; `formatSpokenValue` words it.
-- `taper="log"` gives even octaves on a range above zero, and `midpoint` bends a range that starts at zero. On a tapered control the arrow keys move by travel; `key-step` makes them move by value.
-- `positions` is a property holding the numbers a stepped control stops at, spaced evenly whatever their values; their labels come from `formatValue`.
-- `modulationValue` is a property only, meant to be written every frame. It moves the light and fires nothing.
-- To take a key from a control, call `preventDefault()` in a capture listener.
-
-## Press controls
-
-A button's children are its legend, an icon or a label, always an element. They are copied into the cap, so the copy has none of your listeners and any id in it is prefixed; keep them static. A child with `data-sonic-when="pressed"` or `"released"` shows only in that state.
-
-```html
-<sonic-button aria-label="Loop" latching>
-	<span class="sonic-led"></span>
-	<svg aria-hidden="true">…</svg>
-</sonic-button>
-```
-
-- A plain button fires `click`. `latching` makes it stay pressed, with `pressed` and a `change` event; `momentary` makes it pressed for as long as it is held, and acts on the press, not the release.
-- `soft-disabled` stops presses but keeps the tab stop, for a button that would otherwise lose focus when it disables itself. `busy` leaves it pressable.
-- The segmented control, the switch and the toggle take one child per position, each with `data-sonic-value`, and hold the chosen one in `value`. They fire `change` only. A switch or a toggle with no children is on or off, held in `checked`.
-- On a position child, `data-sonic-disabled` locks it, `data-sonic-momentary` makes an end position spring back, and on a toggle `data-sonic-lit` lights the well there (`ok`, `warning` or `danger` for the colour). A lock stops the user, not your code: a `value` written to a disabled position is chosen.
-
-```html
-<sonic-segmented aria-label="Filter" value="lp">
-	<span data-sonic-value="lp">LP</span>
-	<span data-sonic-value="bp">BP</span>
-	<span data-sonic-value="hp">HP</span>
-</sonic-segmented>
-```
-
-## Parts that are only a class
-
-The LED, the panel, the ring and the screen have no behaviour, so they are classes on your own elements and need no registration.
-
-- `<span class="sonic-led">` is unlit until it carries `data-sonic-lit`, whose value picks the colour: empty, `idle`, `ok`, `warning` or `danger`. Inside a latching button or a toggle's cap it lights with the control.
-- `class="sonic-ring"` draws a lit arc around its one child, from `--sonic-ring-from` to `--sonic-ring-to`, each 0 to 1. Give it your own `role="progressbar"`.
-- `class="sonic-screen"` is a pane of glass for your own text or canvas, and `class="sonic-panel"` groups controls under a `sonic-panel-title`.
-
-## Displays
-
-A display takes its signal as data and never opens an `AudioContext`.
-
-- `<sonic-meter>`: write `level`, a linear peak amplitude, as often as you have one; the meter converts to decibels and applies its `ballistics`. Write `value` instead to show a number in the meter's own units exactly as given. `segments` turns the bar into a ladder. It fires nothing and has no role: read `peak`, call `resetPeak()`, and announce numbers yourself.
-- `<sonic-spectrum>`: set `analyser` to an `AnalyserNode`, or call `push(decibels)` with a `Float32Array` holding one level per bin and set `sample-rate`.
-
-## Controls that drive other controls
-
-- `<sonic-split>` wraps value controls and keeps their values adding up to `total`. `mode` chooses who gives way (`proportional`, `equal` or `cascade`), and `data-sonic-locked` on a member holds it still. The others move a microtask after the one the user moved, so its `input` arrives first.
-- `<sonic-envelope>` has no value and no events. Each of its attributes (`delay`, `attack`, `hold`, `decay`, `sustain`, `release`, and `attack-curve`, `decay-curve`, `release-curve`) names the id of a dial, a slider or a number box; dragging a handle turns that control, which fires its own `input`. Stages share the width equally, whatever their times.
-- `<sonic-xy>` holds `x` and `y`, each with its own `x-min`, `x-max`, `x-step` and so on, and submits them as `name.x` and `name.y`.
-- `envelopeCurve` and `crossfadeGains` are exported so your DSP computes what the control draws.
-
-## Wave controls
-
-`<sonic-wavestrip>` is the overview of a track, scrubbed to seek; `<sonic-waveform>` is the close-up that scrolls under a fixed playhead. Both are value controls in seconds that take their data as properties (`peaks`, `markers`); the types list the rest. `peaks` is `{ pairsPerSecond, samples }`, and the full scale follows the array unless `fullScale` is set.
-
-A wave control shows and reads a clock (`1:23`, typed or drawn) and speaks a duration in the language around it, the nearest `lang`. Setting `formatValue`, `parseValue` or `formatSpokenValue` replaces that part; `formatClock` and `parseClock` are the same pair, exported so your own time text matches.
-
-Their events bubble and carry no detail, so read the property when one fires: `revealed` on `sonic-reveal`, `currentMarker` on `sonic-marker`, and the strip's `hoverValue` on `sonic-hover`, which `clientXOf(value)` turns into a viewport x.
-
-The strip draws one part per marker inside `.sonic-wavestrip-markers`, in `start` order: a `.sonic-wavestrip-marker` dot, or a `.sonic-wavestrip-region` when the marker has an `end`. Marker labels are hidden from assistive technology; fold `currentMarker` into `formatSpokenValue` to have one spoken.
-
-The waveform parks the current marker's label in its corner and fades it after the next marker crosses the playhead, never before: `--sonic-waveform-label-fade-start` (0) and `--sonic-waveform-label-fade-end` (1) run from that crossing, 0, to the next label reaching the park, 1.
-
-The waveform calls `requestPeaks(fromSeconds, toSeconds)` as its window moves, often every frame, so return at once for a span already loaded or on its way. Return a promise, or several, and the waveform repaints as each settles; an `async` function is the wrong shape, since it hands back a new settled promise each call. `pending` is yours to keep: list the spans being fetched, and clear each as it lands.
-
-With `zoomable`, a ctrl or cmd wheel, a pinch and the `+` and `-` keys set the waveform's `zoom` and fire `sonic-zoom`; a write to `zoom` fires nothing.
-
-With `fill` a control takes its container's height and its ratios follow. `--sonic-wavestrip-marker-size`, `--sonic-wavestrip-groove-size` and `--sonic-waveform-label-font-size` hold an absolute length instead.
+- A control uses only the children it documents and adds one child of its own. Children it draws are copied, so a copy has none of your listeners; keep them static. Under a hydrating framework, register the definitions once hydration is done (in React, from an effect).
+- Events bubble and carry no detail: read the property when one fires. A control knows nothing about playback, so wire its events to your own state and write the property back.
+- A value control fires `input` as its value moves and `change` once when a gesture ends. A drag owns the value: a write to `value` during one is dropped.
+- `formatValue` and `parseValue` are properties holding functions. Once `parseValue` is set it has to read what `formatValue` writes, or typed entry opens on text it cannot take.
+- A display takes its signal as data, and nothing in the library fetches, decodes or opens an `AudioContext`.
+- States a control sets itself are custom states on the host, selected with `:state()`.
+- The LED, the panel, the ring and the screen have no behaviour, so they are classes on your own elements (`sonic-led`, `sonic-panel`, `sonic-ring`, `sonic-screen`). A control draws no glass of its own: wrap one in a screen for the encased look.
 
 ## Skinning
 
-A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to start one. Tokens, hook classes (`.sonic-dial`, `.sonic-wavestrip-marker`), `data-sonic-*` attributes and states are the public surface. Anything starting `--_sonic-` is private and changes without notice.
+A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to start one. Tokens, hook classes (`.sonic-dial`), `data-sonic-*` attributes and states are the public surface. Anything starting `--_sonic-` is private and changes without notice.
 
 - Set tokens, not rules on hook classes. If a look needs a hook-class rule, a token is missing.
-- Most geometry tokens end in `-ratio` and are a unitless share of the control's size, so one size token scales the whole control.
-- A length token takes any CSS length except a percentage. For a fluid size use container units.
-- `--sonic-relief` runs from 0, flat, to 1, and scales every bevel and shadow at once. `--sonic-light-tilt` turns the one light they all follow.
-- `--sonic-target-size` widens the region that takes a press past the control's box. It is unset by default.
+- A token ending in `-ratio` is a unitless share of the control's size, so one size token scales the whole control. A length token takes any CSS length except a percentage.
 
 ## Loading less
 
@@ -159,22 +74,22 @@ A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to st
 | --------------- | ----------------------------------------------- |
 | `button.css`    | core, cap, well, keycap                         |
 | `dial.css`      | core, cap, glass, readout, value, arc, scale    |
-| `envelope.css`  | core, glass, pane, well, readout, bracket       |
+| `envelope.css`  | core, glass, readout, bracket                   |
 | `led.css`       | core, lens                                      |
 | `meter.css`     | core, lens, groove                              |
-| `number.css`    | core, cap, glass, pane, well, value             |
+| `number.css`    | core, cap, value                                |
 | `panel.css`     | core                                            |
 | `ring.css`      | core, arc                                       |
 | `screen.css`    | core, glass, pane, well                         |
 | `segmented.css` | core, cap, well, keycap                         |
 | `slider.css`    | core, cap, glass, readout, value, groove, scale |
-| `spectrum.css`  | core, glass, pane, well                         |
+| `spectrum.css`  | core                                            |
 | `switch.css`    | core, cap                                       |
 | `toggle.css`    | core, cap, well, keycap                         |
-| `waveform.css`  | core, cap, glass, pane, well, readout, value    |
-| `wavestrip.css` | core, cap, glass, pane, well, readout, value    |
-| `xy.css`        | core, cap, glass, pane, well, readout, bracket  |
+| `waveform.css`  | core, cap, glass, readout, value                |
+| `wavestrip.css` | core, cap, glass, readout, value                |
+| `xy.css`        | core, cap, glass, readout, bracket              |
 
-An LED inside a control also needs `led.css`, and a button inside a ring needs `button.css`.
+An LED inside a control also needs `led.css`, and a button inside a ring needs `button.css`. Only a missing `core.css` or control sheet is warned about, so check a control that draws wrong against this table.
 
 Targets current Chrome and Edge, Safari 26 and Firefox 147. No control mirrors for right-to-left. MIT licensed.

package/dist/default/elements/button.js

@@ -167,7 +167,8 @@ var SonicButton = class extends SonicFormElement {
 			holding.hold(event.pointerId);
 		}, { signal });
 		button.addEventListener("keydown", (event) => {
-			if (event.repeat || !holdKeys.has(event.key) || !this.#isMomentary()) return;
+			if (event.repeat || event.defaultPrevented) return;
+			if (!holdKeys.has(event.key) || !this.#isMomentary()) return;
 			holding.hold(event.key);
 		}, { signal });
 	}

package/dist/default/elements/field-gesture.js

@@ -53,6 +53,9 @@ function bindFieldGesture(target, options, signal) {
 				})
 			};
 		},
+		lift: ({ hold }, event) => {
+			options.lift?.(hold, event);
+		},
 		move: (held, event) => {
 			const { axes } = held.hold;
 			const step = stepFieldDrag({

package/dist/default/elements/sonic-element.js

@@ -58,7 +58,7 @@ var SonicElement = class extends HTMLElement {
 		}
 		if (!this.isDisabled() && !this.#focused()) target.focus(options);
 	}
-	checkStyles(control, sheet, { box, material }) {}
+	checkStyles(control, sheet, box) {}
 	focusTarget() {}
 	forwardNaming(target, isNamed) {
 		const labels = isNamed ? this.namingLabels() : [];

package/dist/default/elements/split.js

@@ -64,6 +64,7 @@ var SonicSplit = class extends SonicElement {
 	#waiting = /* @__PURE__ */ new Set();
 	attributeChangedCallback(name) {
 		if ((name === "mode" || name === "total") && this.#signal) this.#bind();
+		if (name === "disabled" && this.#signal) this.#limit();
 	}
 	connectedCallback() {
 		this.upgradeProperties("mode", "total");
@@ -152,11 +153,12 @@ var SonicSplit = class extends SonicElement {
 		})[index] ?? target;
 	}
 	#limit() {
+		const isFrozen = this.isDisabled();
 		const values = this.#members.map(({ seen }) => seen);
 		for (const [index, member] of this.#members.entries()) {
 			const model = this.#model(values, member);
 			const value = values[index] ?? member.seen;
-			member.link.model.setLimit(isLocked(member) ? [value, value] : gridLimits(member.link.model.mapping(), splitLimits(model, index, this.#total)));
+			member.link.model.setLimit(isFrozen || isLocked(member) ? [value, value] : gridLimits(member.link.model.mapping(), splitLimits(model, index, this.#total)));
 		}
 	}
 	#model(values, mover) {

package/dist/default/elements/switch.js

@@ -1,5 +1,5 @@
 import { requireChild, template } from "../lib/render.js";
-import { bindDrag } from "../lib/pointer-drag.js";
+import { bindDrag, capturePointer } from "../lib/pointer-drag.js";
 import { soleStep } from "../lib/positions.js";
 import { isUnder } from "./radio-group.js";
 import { SonicPositionGroupElement } from "./position-group.js";
@@ -28,7 +28,7 @@ var SonicSwitch = class extends SonicPositionGroupElement {
 		if (this.#isOnBat(event)) return true;
 		const target = this.pressTarget(index);
 		if (this.isOptionDisabled(target) || !this.isMomentary(target)) return false;
-		this.group.setPointerCapture(event.pointerId);
+		capturePointer(this.group, event.pointerId);
 		this.hold(target, event.pointerId);
 		return true;
 	}
@@ -68,8 +68,10 @@ var SonicSwitch = class extends SonicPositionGroupElement {
 				};
 			},
 			lift: (press, event) => {
-				if (!press.hasMoved && !this.isDisabled()) this.#pressBat(event);
 				this.#isClickSwallowed = true;
+				if (press.hasMoved || this.isDisabled()) return;
+				if (!isUnder(this.group, event.clientX, event.clientY)) return;
+				this.#pressBat(event);
 			},
 			move: (press, event) => {
 				if (this.isDisabled()) return;

package/dist/default/elements/toggle.js

@@ -19,6 +19,7 @@ const renderPosition = template(`
 		</button>
 	`, HTMLButtonElement);
 const renderBare = template(`<button class="sonic-toggle-position" role="switch" type="button"></button>`, HTMLButtonElement);
+const pressSlop = 2;
 var SonicToggle = class extends SonicPositionGroupElement {
 	bare = renderBare();
 	defaultOrientation = "horizontal";
@@ -60,17 +61,19 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		bindDrag(this.group, {
 			grab: (event) => this.#grab(event),
 			lift: (drag, event) => {
-				if (drag.hasMoved || drag.isHolding || this.isDisabled()) return;
+				if (!drag.isPress || drag.isHolding || this.isDisabled()) return;
 				if (!isUnder(this.group, event.clientX, event.clientY)) return;
 				this.#press(drag.position);
 			},
 			move: (drag, event) => {
 				if (drag.isHolding || this.isDisabled()) return;
 				const pointer = this.along(event);
-				if (!drag.hasMoved && Math.abs(pointer - drag.start) < drag.thresholdPx) return;
+				const moved = Math.abs(pointer - drag.start);
+				if (!drag.hasMoved && moved < drag.thresholdPx) return;
 				drag.hasMoved = true;
 				this.toggleState("dragging", true);
-				this.#slideTo(positionAt(drag.travel, pointer), event.pointerId);
+				if (moved >= pressSlop * drag.thresholdPx) drag.isPress = false;
+				if (this.#slideTo(positionAt(drag.travel, pointer), event.pointerId)) drag.isPress = false;
 			},
 			release: (drag) => {
 				delete drag.marked.dataset.sonicPressed;
@@ -95,6 +98,7 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		return {
 			hasMoved: false,
 			isHolding: this.#holdFrom(position, event.pointerId),
+			isPress: true,
 			marked,
 			position,
 			start: this.along(event),
@@ -124,12 +128,13 @@ var SonicToggle = class extends SonicPositionGroupElement {
 		const crossed = Math.round(at);
 		this.#draggedTo = at;
 		this.#placeCap(at);
-		if (this.isChecked(crossed)) return;
+		if (this.isChecked(crossed)) return false;
 		this.releaseHold();
-		if (this.isOptionDisabled(crossed) || this.isChecked(crossed)) return;
+		if (this.isOptionDisabled(crossed) || this.isChecked(crossed)) return false;
 		if (this.isMomentary(crossed)) this.hold(crossed, pointerId);
 		else this.select(crossed);
 		this.refocusAt(crossed);
+		return true;
 	}
 	#travel(event, isOnCap) {
 		const [first, last] = enabledEnds(this.positions());

package/dist/default/elements/value-entry.js

@@ -1,17 +1,13 @@
+import { createDoublePress } from "../lib/double-press.js";
+
 //#region src/elements/value-entry.ts
-const doublePressMs = 500;
-const doublePressPx = 4;
-function isDoublePress(previous, next) {
-	if (!previous) return false;
-	return next.time - previous.time < doublePressMs && Math.hypot(next.x - previous.x, next.y - previous.y) < doublePressPx;
-}
 var ValueEntry = class {
 	get isOpen() {
 		return this.#isOpen;
 	}
+	#doublePress = createDoublePress();
 	#input;
 	#isOpen = false;
-	#lastPress;
 	#openedText = "";
 	#options;
 	constructor(input, options) {
@@ -44,7 +40,7 @@ var ValueEntry = class {
 		if (isCommitting && this.#input.value !== this.#openedText) this.#options.commit(this.#input.value);
 	}
 	forgetPress() {
-		this.#lastPress = void 0;
+		this.#doublePress.forget();
 	}
 	open() {
 		const input = this.#input;
@@ -57,16 +53,7 @@ var ValueEntry = class {
 		input.select();
 	}
 	press(event) {
-		const press = {
-			time: event.timeStamp,
-			x: event.clientX,
-			y: event.clientY
-		};
-		const previous = this.#lastPress;
-		this.#lastPress = press;
-		if (!isDoublePress(previous, press)) return false;
-		this.#lastPress = void 0;
-		return true;
+		return this.#doublePress.press(event);
 	}
 };
 

package/dist/default/elements/waveform.js

@@ -287,6 +287,14 @@ var SonicWaveform = class extends SonicWaveElement {
 		}]));
 		this.surface()?.rebuild();
 	}
+	scrubChanged() {
+		const isScrubbing = this.scrubState().from !== void 0;
+		this.#grabbed = isScrubbing ? this.#grabbed ?? this.#lastDrawn() : void 0;
+		super.scrubChanged();
+	}
+	scrubsKeyRepeat() {
+		return true;
+	}
 	#duePending() {
 		const due = dueRegions(this.#pending, this.#pendingListedMs, [performance.now(), this.pendingDelay]);
 		if (due.length < this.#pending.length) this.surface()?.requestFrame();
@@ -294,10 +302,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	#grab() {
 		if (this.#zoomGesture?.isPinching() === true) return void 0;
-		const drawn = this.#drawn ?? {
-			seconds: this.value,
-			startSeconds: this.value
-		};
+		const drawn = this.#lastDrawn();
 		this.#grabbed = drawn;
 		const mapping = this.mapping();
 		const [low, high] = mapping.bounds;
@@ -317,6 +322,12 @@ var SonicWaveform = class extends SonicWaveElement {
 			seconds: this.value === from ? grabbed.seconds : this.value
 		};
 	}
+	#lastDrawn() {
+		return this.#drawn ?? {
+			seconds: this.value,
+			startSeconds: this.value
+		};
+	}
 	#readKindColours() {
 		const kinds = [...new Set(this.markers.map(({ kind }) => kind).filter((kind) => isKind(kind)))];
 		const probes = kinds.map((kind) => {

package/dist/default/elements/xy.js

@@ -4,6 +4,7 @@ import { SonicFormElement } from "./form-element.js";
 import { requireChild, template } from "../lib/render.js";
 import { Readout } from "./readout.js";
 import { ReadoutClaim } from "./readout-claim.js";
+import { createDoublePress } from "../lib/double-press.js";
 import { focusByPointer } from "../lib/focus-by-pointer.js";
 import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
 import { resetKeys } from "../lib/value-mapping.js";
@@ -66,6 +67,15 @@ var SonicXy = class extends SonicFormElement {
 		"y-step",
 		"y-taper"
 	];
+	get doublePress() {
+		return this.getAttribute("double-press") === "reset" ? "reset" : "none";
+	}
+	set doublePress(gesture) {
+		this.reflect("double-press", gesture);
+	}
+	get dragging() {
+		return this.hasState("dragging");
+	}
 	get formatValue() {
 		return this.#formatValue;
 	}
@@ -82,6 +92,9 @@ var SonicXy = class extends SonicFormElement {
 	set readout(isEnabled) {
 		this.reflect("readout", isEnabled);
 	}
+	get revealed() {
+		return this.hasState("revealed");
+	}
 	get x() {
 		return this.#models.x.value;
 	}
@@ -194,10 +207,12 @@ var SonicXy = class extends SonicFormElement {
 		this.#renderReadout();
 	});
 	#currentAxis = "x";
+	#doublePress = createDoublePress();
 	#xy = renderXy();
 	#field = requireChild(this.#xy, ".sonic-xy-field", HTMLDivElement);
 	#formatValue;
 	#gesture;
+	#isRevealed = false;
 	#models = {
 		x: createValueModel(() => this.#spec("x")),
 		y: createValueModel(() => this.#spec("y"))
@@ -214,10 +229,11 @@ var SonicXy = class extends SonicFormElement {
 		this.#respec(name);
 	}
 	connectedCallback() {
-		this.upgradeProperties("readout", "xDefault", "xLabel", "xMax", "xMidpoint", "xMin", "xOrigin", "xStep", "xTaper", "yDefault", "yLabel", "yMax", "yMidpoint", "yMin", "yOrigin", "yStep", "yTaper", "formatValue", "x", "y");
+		this.upgradeProperties("doublePress", "readout", "xDefault", "xLabel", "xMax", "xMidpoint", "xMin", "xOrigin", "xStep", "xTaper", "yDefault", "yLabel", "yMax", "yMidpoint", "yMin", "yOrigin", "yStep", "yTaper", "formatValue", "x", "y");
 		super.connectedCallback();
 	}
 	formResetCallback() {
+		if (this.#gesture?.current()) return;
 		this.#respec(...axes);
 	}
 	connect(signal) {
@@ -259,23 +275,26 @@ var SonicXy = class extends SonicFormElement {
 			const move = keyMoves.get(event.key);
 			if (!move && !(resetKeys.has(event.key) && this.#hasDefault())) return;
 			event.preventDefault();
-			if (move) this.#keyTo(...move);
-			else this.#reset();
 			this.#claim.reveal("keys");
 			this.#renderReadout();
+			if (move) this.#keyTo(...move);
+			else this.#reset();
 		}, { signal });
 		xy.addEventListener("focusout", (event) => {
 			if (event.relatedTarget instanceof Node && xy.contains(event.relatedTarget)) return;
 			if (this.#claim.conceal("keys")) this.#renderReadout();
 		}, { signal });
 		signal.addEventListener("abort", () => {
-			this.#claim.conceal("keys");
+			if (this.#claim.conceal("keys")) this.#renderReadout();
 		}, { once: true });
 	}
 	#bindPointer(xy, signal) {
 		xy.addEventListener("mousedown", (event) => {
 			event.preventDefault();
 		}, { signal });
+		xy.addEventListener("pointercancel", () => {
+			this.#doublePress.forget();
+		}, { signal });
 		this.#gesture = bindFieldGesture(xy, {
 			claim: this.#claim,
 			grab: (event) => {
@@ -290,6 +309,10 @@ var SonicXy = class extends SonicFormElement {
 			input: (_hold, next) => {
 				if (!this.#input(next)) this.#renderReadout();
 			},
+			lift: (_hold, event) => {
+				if (!this.#doublePress.press(event) || this.doublePress !== "reset") return;
+				this.#reset();
+			},
 			release: (_hold, moved) => {
 				if (moved.length > 0) this.dispatchEvent(new Event("change", { bubbles: true }));
 			},
@@ -393,11 +416,16 @@ var SonicXy = class extends SonicFormElement {
 		this.writeFormValue(fields, state);
 	}
 	#renderReadout() {
+		const { isRevealed } = this.#claim;
 		this.#readout.show({
 			anchor: this.#puck,
-			isOpen: this.#claim.isRevealed && this.readout,
+			isOpen: isRevealed && this.readout,
 			text: this.#valueText("x")
 		});
+		if (isRevealed === this.#isRevealed) return;
+		this.#isRevealed = isRevealed;
+		this.toggleState("revealed", isRevealed);
+		this.dispatchEvent(new Event("sonic-reveal", { bubbles: true }));
 	}
 	#reset() {
 		this.#commit({

package/dist/default/lib/canvas-surface.js

@@ -89,7 +89,11 @@ var CanvasSurface = class {
 	#armTransitions() {
 		const { canvas, colours, numbers = {} } = this.#options;
 		const { style } = canvas;
-		const watched = [...Object.values(colours), ...Object.values(numbers)];
+		const watched = [
+			"color",
+			...Object.values(colours),
+			...Object.values(numbers)
+		];
 		style.setProperty("transition-property", watched.join(", "));
 		style.setProperty("transition-duration", "0.001ms");
 		style.setProperty("transition-timing-function", "step-start");

package/dist/default/lib/double-press.js

@@ -0,0 +1,30 @@
+//#region src/lib/double-press.ts
+const doublePressMs = 500;
+const doublePressPx = 4;
+function isDoublePress(previous, next) {
+	if (!previous) return false;
+	return next.time - previous.time < doublePressMs && Math.hypot(next.x - previous.x, next.y - previous.y) < doublePressPx;
+}
+function createDoublePress() {
+	let last;
+	return {
+		forget() {
+			last = void 0;
+		},
+		press(event) {
+			const press = {
+				time: event.timeStamp,
+				x: event.clientX,
+				y: event.clientY
+			};
+			const previous = last;
+			last = press;
+			if (!isDoublePress(previous, press)) return false;
+			last = void 0;
+			return true;
+		}
+	};
+}
+
+//#endregion
+export { createDoublePress };