@dorsk/tsumikit 0.73.2 → 0.75.0

package/dist/components/molecules/Toggle.svelte

@@ -10,6 +10,7 @@
 	// <button> + scoped styles rather than specializing the Button atom.
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { playSound } from '../../sound';
 
 	let {
 		pressed = false,
@@ -20,6 +21,8 @@
 		shrink = true,
 		type = 'button',
 		disabled = false,
+		sound = true,
+		onclick,
 		class: klass = '',
 		children,
 		...rest
@@ -32,8 +35,17 @@
 		grow?: boolean;
 		// `shrink={false}` keeps the chip at its intrinsic width (flex: none).
 		shrink?: boolean;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		children?: Snippet;
 	} = $props();
+
+	function click(e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
+		const next = !pressed;
+		onclick?.(e);
+		if (e.defaultPrevented) return;
+		playSound(next ? 'toggle-on' : 'toggle-off', sound);
+	}
 </script>
 
 <button
@@ -41,6 +53,7 @@
 	{...rest}
 	{type}
 	{disabled}
+	onclick={click}
 	class="toggle {klass}"
 	class:pill
 	class:struck
@@ -60,34 +73,38 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: 4px;
+		gap: var(--sp-1);
 		box-sizing: border-box;
-		height: var(--toggle-size, var(--box-xs));
-		padding: 0 var(--sp-2);
+		height: var(--toggle-size, var(--control-sm));
+		padding: 0 var(--control-px-sm);
 		border-radius: var(--r-sm);
-		font-size: var(--fs-xs);
+		font-size: var(--control-fs-sm);
 		font-weight: var(--fw-medium);
-		line-height: 1;
+		line-height: var(--lh-none);
+		--icon-size: var(--control-icon-sm);
 		background: var(--bg-elevated-2);
 		color: var(--text-muted);
 		border: 1px solid var(--border);
 		white-space: nowrap;
 		user-select: none;
 		transition:
-			background 0.12s var(--ease),
-			border-color 0.12s var(--ease),
-			color 0.12s var(--ease);
+			background var(--dur-fast) var(--ease),
+			border-color var(--dur-fast) var(--ease),
+			color var(--dur-fast) var(--ease),
+			scale var(--dur-fast) var(--ease-out);
 	}
 	.toggle:disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
 	.toggle.pill {
 		border-radius: var(--r-pill);
 	}
 	.toggle.md {
-		height: var(--toggle-size, var(--control-height-compact));
-		font-size: var(--fs-sm);
+		height: var(--toggle-size, var(--control-md));
+		padding: 0 var(--control-px-md);
+		font-size: var(--control-fs-md);
+		--icon-size: var(--control-icon-md);
 	}
 	.toggle.grow {
 		flex: 1 1 0;
@@ -96,8 +113,14 @@
 	.toggle.no-shrink {
 		flex: none;
 	}
-	.toggle:hover:not(:disabled) {
-		border-color: var(--border-strong);
+	@media (hover: hover) and (pointer: fine) {
+		.toggle:hover:not(:disabled) {
+			border-color: var(--border-strong);
+		}
+	}
+	.toggle:active:not(:disabled) {
+		scale: var(--press-scale);
+		transition-duration: var(--dur-press);
 	}
 	.toggle.on {
 		--tc: var(--toggle-accent, var(--accent));

package/dist/components/molecules/Toggle.svelte.d.ts

@@ -8,6 +8,8 @@ type $$ComponentProps = HTMLButtonAttributes & {
     size?: ControlSize;
     grow?: boolean;
     shrink?: boolean;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     children?: Snippet;
 };
 declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/molecules/Tooltip.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" module>
+	let lastClosed = -Infinity;
+</script>
+
 <script lang="ts">
 	// Lightweight tooltip. Shows on hover (after a short delay) and on keyboard
 	// focus of the trigger; hides on blur / mouseleave / Escape (anywhere). The trigger is
@@ -15,7 +19,7 @@
 	// by `closeDelay` and cancelled when the pointer (or focus) enters the panel,
 	// so users can move in to select/copy text or click a button. Note the
 	// role="tooltip" caveat: `aria-describedby` flattens the panel to its text.
-	import type { Snippet } from 'svelte';
+	import { flushSync, type Snippet } from 'svelte';
 	import { place } from '../../floating';
 
 	let {
@@ -53,6 +57,8 @@
 		style?: string;
 	} = $props();
 
+	// A tooltip closed moments ago makes the next one open at once, unanimated.
+	const WARM_MS = 300;
 	const id = `tip-${Math.random().toString(36).slice(2, 8)}`;
 	let wrapEl = $state<HTMLElement | null>(null);
 	let tipEl = $state<HTMLElement | null>(null);
@@ -68,23 +74,32 @@
 		if (e.key === 'Escape') hideNow();
 	}
 
+	let instant = $state(false);
 	function show() {
 		clearTimeout(hideTimer); // pointer came back within the grace period
 		clearTimeout(showTimer);
-		showTimer = setTimeout(() => {
+		const warm = performance.now() - lastClosed < WARM_MS;
+		const reveal = () => {
 			if (!tipEl || tipEl.matches(':popover-open')) return; // re-entry guard
+			instant = warm;
+			flushSync();
 			tipEl.showPopover(); // top layer — displayed before we measure it
 			reposition();
 			addEventListener('scroll', reposition, true);
 			addEventListener('resize', reposition);
 			document.addEventListener('keydown', onEscape);
-		}, delay);
+		};
+		if (warm) reveal();
+		else showTimer = setTimeout(reveal, delay);
 	}
 	function hideNow() {
 		clearTimeout(showTimer);
 		clearTimeout(hideTimer);
 		try {
-			if (tipEl?.matches(':popover-open')) tipEl.hidePopover();
+			if (tipEl?.matches(':popover-open')) {
+				tipEl.hidePopover();
+				lastClosed = performance.now();
+			}
 		} catch {}
 		removeEventListener('scroll', reposition, true);
 		removeEventListener('resize', reposition);
@@ -164,6 +179,7 @@
 	popover="manual"
 	class="tip"
 	class:rich={!!content}
+	data-instant={instant ? '' : undefined}
 	style:width
 	style:max-width={maxWidth}
 	use:panel
@@ -194,9 +210,16 @@
 		border-radius: var(--r-sm);
 		box-shadow: var(--shadow-md);
 		font-size: var(--fs-xs);
-		line-height: 1.4;
+		line-height: var(--lh-snug);
 		white-space: normal;
 		pointer-events: none; /* non-interactive: never steals hover/clicks */
+		transform-origin: var(--tsu-origin, bottom center);
+		opacity: 0;
+		scale: var(--tip-scale);
+		transition:
+			opacity var(--dur-exit-fast) var(--ease-out),
+			display var(--dur-exit-fast) allow-discrete,
+			overlay var(--dur-exit-fast) allow-discrete;
 	}
 	/* Rich panel: interactive + selectable so the user can move the pointer in
 	   to copy an id or click a button (the close grace period allows the trip). */
@@ -207,14 +230,22 @@
 		padding: var(--sp-2);
 		border-radius: var(--r-md);
 	}
-	/* Fade/scale in when shown (skipped under reduced-motion via the global rule). */
 	.tip:popover-open {
-		animation: tip-in 0.12s var(--ease);
+		opacity: 1;
+		scale: 1;
+		transition:
+			opacity var(--dur-fast) var(--ease-out),
+			scale var(--dur-fast) var(--ease-out),
+			display var(--dur-fast) allow-discrete,
+			overlay var(--dur-fast) allow-discrete;
 	}
-	@keyframes tip-in {
-		from {
+	@starting-style {
+		.tip:popover-open {
 			opacity: 0;
-			transform: scale(0.96);
+			scale: var(--tip-scale);
 		}
 	}
+	.tip[data-instant] {
+		transition-duration: var(--dur-instant);
+	}
 </style>

package/dist/components/molecules/Tooltip.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type $$ComponentProps = {
     /** Plain-text bubble. Ignored when `content` is provided. */
     text?: string;

package/dist/components/molecules/VolumeSlider.svelte

@@ -8,6 +8,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { IconName } from '../atoms/Icon.svelte';
 	import IconButton from './IconButton.svelte';
+	import { playSound } from '../../sound';
 
 	type Own = {
 		/** Level 0–1. */
@@ -22,6 +23,8 @@
 		label?: string;
 		muteLabel?: string;
 		unmuteLabel?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		oninput?: (value: number) => void;
 		onchange?: (value: number) => void;
 		onmutechange?: (muted: boolean) => void;
@@ -40,6 +43,7 @@
 		label = 'Volume',
 		muteLabel = 'Mute',
 		unmuteLabel = 'Unmute',
+		sound = true,
 		oninput,
 		onchange,
 		onmutechange,
@@ -59,6 +63,7 @@
 		muted ? 'volume-mute' : level === 0 ? 'volume' : level < 0.5 ? 'volume-low' : 'volume-high'
 	);
 	const valueText = $derived(muted ? 'Muted' : `${pct}%`);
+	const discrete = $derived(1 / step <= 20);
 
 	function setMuted(m: boolean) {
 		if (m === muted) return;
@@ -75,7 +80,8 @@
 	}
 
 	function commit(v: number) {
-		onchange?.(apply(v));
+		const next = apply(v);
+		onchange?.(next);
 	}
 
 	function fracAt(el: HTMLElement, e: PointerEvent) {
@@ -117,6 +123,7 @@
 
 	function onpointermove(e: PointerEvent) {
 		if (pointerId !== e.pointerId) return;
+		if (discrete) playSound('tick', sound);
 		apply(fracAt(e.currentTarget as HTMLElement, e));
 	}
 
@@ -167,6 +174,7 @@
 		}
 		if (next === null) return;
 		e.preventDefault();
+		playSound('tick', sound);
 		commit(next);
 	}
 
@@ -176,6 +184,7 @@
 			const d = e.deltaY || e.deltaX;
 			if (!d) return;
 			e.preventDefault();
+			playSound('tick', sound);
 			commit(level + (d < 0 ? step : -step));
 		};
 		el.addEventListener('wheel', onwheel, { passive: false });
@@ -199,6 +208,7 @@
 		box="sm"
 		size={size === 'sm' ? 16 : 18}
 		{disabled}
+		{sound}
 		onclick={() => setMuted(!muted)}
 		data-part="mute"
 	/>
@@ -237,6 +247,7 @@
 		--vol-thumb: 10px;
 		--vol-length: 5rem;
 		--vol-accent: var(--slider-accent, var(--accent));
+		--vol-halo: 0 0 0 4px color-mix(in srgb, var(--vol-accent) 20%, transparent);
 		display: inline-flex;
 		align-items: center;
 		gap: var(--sp-1);
@@ -281,8 +292,8 @@
 		}
 	}
 	.vol-slab[aria-disabled='true'] {
-		cursor: default;
-		opacity: 0.45;
+		cursor: not-allowed;
+		opacity: var(--disabled-opacity);
 	}
 	.vol-slab:focus-visible {
 		outline: var(--focus-ring);
@@ -340,28 +351,37 @@
 		top: 0;
 		width: var(--vol-thumb);
 		height: var(--vol-thumb);
-		border-radius: 50%;
+		border-radius: var(--r-pill);
 		background: var(--vol-accent);
 		border: 2px solid var(--bg);
 		box-shadow: var(--shadow-sm);
-		transform: translate(-50%, -50%) scale(0.6);
+		transform: translate(-50%, -50%);
+		scale: 0.6;
 		opacity: 0;
 		transition:
-			opacity 120ms var(--ease),
-			transform 120ms var(--ease);
+			opacity var(--dur-fast) var(--ease),
+			scale var(--dur-press) var(--ease-out),
+			box-shadow var(--dur-fast) var(--ease);
 	}
-	.vol-slab:hover .vol-thumb,
 	.vol-slab:focus-visible .vol-thumb,
 	.vol--dragging .vol-thumb {
 		opacity: 1;
-		transform: translate(-50%, -50%) scale(1);
+		scale: 1;
 	}
-	.vol--muted .vol-fill {
-		background: var(--text-faint);
+	.vol--dragging .vol-thumb {
+		scale: 1.15;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.vol-thumb {
-			transition: none;
+	@media (hover: hover) and (pointer: fine) {
+		.vol-slab:not([aria-disabled='true']):hover .vol-thumb {
+			opacity: 1;
+			scale: 1;
+			box-shadow: var(--shadow-sm), var(--vol-halo);
 		}
+		.vol--dragging .vol-thumb {
+			scale: 1.15;
+		}
+	}
+	.vol--muted .vol-fill {
+		background: var(--text-faint);
 	}
 </style>

package/dist/components/molecules/VolumeSlider.svelte.d.ts

@@ -18,6 +18,8 @@ type Own = {
     label?: string;
     muteLabel?: string;
     unmuteLabel?: string;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     oninput?: (value: number) => void;
     onchange?: (value: number) => void;
     onmutechange?: (muted: boolean) => void;

package/dist/components/molecules/WorkingDir.svelte

@@ -122,6 +122,7 @@
 		min-width: 0;
 		min-height: max-content;
 		overflow: hidden;
+		--focus-ring-offset: var(--focus-ring-offset-inset);
 	}
 	.rail.full {
 		flex: none;

package/dist/components/organisms/ConversationFeed.svelte

@@ -143,6 +143,10 @@
 		flex-direction: column;
 		gap: var(--sp-3);
 		padding: var(--sp-3);
+		scroll-padding-block: var(--sp-2);
+	}
+	.feed > * {
+		flex-shrink: 0;
 	}
 	.feed-items {
 		display: flex;

package/dist/components/organisms/DataTable.svelte

@@ -254,8 +254,13 @@
 						{:else if col.sortable}
 							<button type="button" class="dt-sort" onclick={() => toggleSort(col)}>
 								<span>{col.label}</span>
-								<span class="dt-arrow" aria-hidden="true" class:active={sortKey === col.key}>
-									{sortKey === col.key ? (sortDir === 'asc' ? '↑' : '↓') : '↕'}
+								<span
+									class="dt-arrow"
+									aria-hidden="true"
+									class:active={sortKey === col.key}
+									class:desc={sortKey === col.key && sortDir === 'desc'}
+								>
+									{sortKey === col.key ? '↑' : '↕'}
 								</span>
 							</button>
 						{:else}
@@ -425,31 +430,47 @@
 		color: inherit;
 		cursor: pointer;
 	}
-	.dt-sort:hover {
-		color: var(--text);
-	}
 	.dt-arrow {
+		display: inline-block;
 		opacity: 0.4;
 		font-size: 0.9em;
+		transition:
+			rotate var(--dur-base) var(--ease-out),
+			opacity var(--dur-fast) var(--ease);
 	}
 	.dt-arrow.active {
 		opacity: 1;
 		color: var(--accent);
 	}
+	.dt-arrow.desc {
+		rotate: 180deg;
+	}
 	tbody tr:last-child td {
 		border-bottom: none;
 	}
 	tr.clickable {
 		cursor: pointer;
-		transition: background 0.12s var(--ease);
+		transition: background var(--dur-fast) var(--ease);
 	}
-	tr.clickable:hover,
 	tr.clickable:focus-visible {
 		background: var(--bg-elevated-2);
-	}
-	tr.clickable:focus-visible {
 		outline: var(--focus-ring);
-		outline-offset: -2px;
+		outline-offset: var(--focus-ring-offset-inset);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.dt-sort:hover {
+			color: var(--text);
+		}
+		tr.clickable:hover {
+			background: var(--bg-elevated-2);
+			transition-duration: var(--dur-instant);
+		}
+		tr:hover .dt-actions {
+			opacity: 1;
+		}
+		.dt-more-btn:hover {
+			background: var(--bg-elevated-2);
+		}
 	}
 	td.truncate {
 		white-space: nowrap;
@@ -487,7 +508,7 @@
 	}
 	.dt-actions {
 		opacity: 0;
-		transition: opacity 0.12s var(--ease);
+		transition: opacity var(--dur-fast) var(--ease);
 	}
 	.dt-actions-inner {
 		display: inline-flex;
@@ -495,7 +516,6 @@
 		gap: var(--sp-1);
 		white-space: nowrap;
 	}
-	tr:hover .dt-actions,
 	tr:focus-within .dt-actions {
 		opacity: 1;
 	}
@@ -503,6 +523,10 @@
 		.dt-actions {
 			opacity: 1;
 		}
+		/* The last row's checkbox slab would otherwise add a scroll range. */
+		tbody tr:last-child td :global(.checkbox::before) {
+			inset-block-end: 0;
+		}
 		/* Sort slab: inline-end stays at 0 so it never reaches the next header
 		   cell, and the inline-start reach stays inside the cell's own padding. */
 		.dt-sort {
@@ -664,9 +688,8 @@
 		font: inherit;
 		color: var(--accent);
 		cursor: pointer;
-		border-radius: var(--r-md, 6px);
+		border-radius: var(--r-md);
 	}
-	.dt-more-btn:hover,
 	.dt-more-btn:focus-visible {
 		background: var(--bg-elevated-2);
 	}

package/dist/floating.js

@@ -56,7 +56,33 @@ export function placeAt(t, floating, placement = 'bottom-start', gap = 6) {
     left = clamp(left, gap, vw - f.width - gap);
     floating.style.top = `${Math.round(top)}px`;
     floating.style.left = `${Math.round(left)}px`;
+    const resolved = side === 'top' || side === 'bottom'
+        ? top + f.height / 2 < t.top + t.height / 2
+            ? 'top'
+            : 'bottom'
+        : left + f.width / 2 < t.left + t.width / 2
+            ? 'left'
+            : 'right';
+    const cx = Math.round(clamp(t.left + t.width / 2 - left, 0, f.width));
+    const cy = Math.round(clamp(t.top + t.height / 2 - top, 0, f.height));
+    floating.dataset.side = resolved;
+    floating.style.setProperty('--tsu-origin', ORIGIN[resolved](cx, cy));
+    floating.style.setProperty('--tsu-shift', SHIFT[resolved]);
 }
+// Enter motion grows out of the trigger: the origin sits on the trigger-facing
+// edge, level with the trigger centre, and the panel starts shifted towards it.
+const ORIGIN = {
+    top: (cx) => `${cx}px 100%`,
+    bottom: (cx) => `${cx}px 0`,
+    left: (_cx, cy) => `100% ${cy}px`,
+    right: (_cx, cy) => `0 ${cy}px`,
+};
+const SHIFT = {
+    top: '0 var(--shift-sm)',
+    bottom: '0 calc(-1 * var(--shift-sm))',
+    left: 'var(--shift-sm) 0',
+    right: 'calc(-1 * var(--shift-sm)) 0',
+};
 /** Angles (degrees) of `count` petals spread evenly from `from` to `to`. */
 export function fanAngles(count, from, to) {
     if (count <= 1)

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export type { SelectOption } from './components/atoms/Select.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
 export { default as Skeleton } from './components/atoms/Skeleton.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
+export type { SpinnerVariant } from './components/atoms/Spinner.svelte';
 export { default as Spinner } from './components/atoms/Spinner.svelte';
 export { default as Swatch } from './components/atoms/Swatch.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';
@@ -89,6 +90,7 @@ export { default as SeekSlider } from './components/molecules/SeekSlider.svelte'
 export { default as SegmentedControl, type SegmentOption, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as SortableList, SORTABLE_LIST_MESSAGES, type SortableListMessages, type SortableListMove, type SortableListRowContext, } from './components/molecules/SortableList.svelte';
+export { default as SoundSettings } from './components/molecules/SoundSettings.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as StatusBar } from './components/molecules/StatusBar.svelte';
 export { default as SwipeRow, type SwipeAction } from './components/molecules/SwipeRow.svelte';
@@ -114,7 +116,9 @@ export * as filterQuery from './query';
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, singleQuery, suggest, suggestSingle, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
 export { type OptionSection, sectionOptions } from './select-options';
 export type { ControlSize } from './size';
+export { playSound, type SoundMuted, type SoundName } from './sound';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
+export { sound } from './stores/sound.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';
 export { type Toast, type ToastAction, type ToastOptions, type ToastTone, type ToastToneInput, toasts, } from './stores/toast.svelte';
 export { AUTO_THEME, chooseTheme, DEFAULT_THEME_PREFERENCE, pickerValue, preferenceFrom, resolveTheme, type SlotOf, type ThemeChoice, type ThemePreference, type ThemeSlot, } from './theme-mode';

package/dist/index.js

@@ -2,7 +2,7 @@
 //
 // Styles are NOT auto-imported (so consumers control bundling). Import once at
 // your app root:
-//   import '@dorsk/tsumikit/styles/app.css';
+//   import './styles/app.css';
 // then use the components below.
 export { artworkGradient, artworkHue, initials } from './artwork';
 export { autoresize } from './autoresize';
@@ -97,6 +97,7 @@ export { default as SeekSlider } from './components/molecules/SeekSlider.svelte'
 export { default as SegmentedControl, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as SortableList, SORTABLE_LIST_MESSAGES, } from './components/molecules/SortableList.svelte';
+export { default as SoundSettings } from './components/molecules/SoundSettings.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as StatusBar } from './components/molecules/StatusBar.svelte';
 export { default as SwipeRow } from './components/molecules/SwipeRow.svelte';
@@ -123,8 +124,10 @@ export { describeMediaTime, formatMediaTime, isLiveDuration } from './media-time
 export * as filterQuery from './query';
 export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, singleQuery, suggest, suggestSingle, toSql, walk, } from './query';
 export { sectionOptions } from './select-options';
+export { playSound } from './sound';
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----
+export { sound } from './stores/sound.svelte';
 export { THEMES, theme } from './stores/theme.svelte';
 export { toasts, } from './stores/toast.svelte';
 export { AUTO_THEME, chooseTheme, DEFAULT_THEME_PREFERENCE, pickerValue, preferenceFrom, resolveTheme, } from './theme-mode';

package/dist/sound-synth.d.ts

@@ -0,0 +1,3 @@
+import type { SoundName } from './stores/sound.svelte';
+export declare function unlock(): void;
+export declare function play(name: SoundName, volume: number): void;