@adea-ai/audio 0.69.2 → 0.69.4

package/dist/sound.js

@@ -1,10 +1,10 @@
 import { soundController } from "./controller.js";
 import { musicForScene } from "./scene-music.js";
-import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, template } from "solid-js/web";
+import { createComponent, memo } from "solid-js/web";
 import { Music, Music2 } from "lucide-solid";
 import { createContext, createEffect, createMemo, createSignal, on, onCleanup, onMount, useContext } from "solid-js";
+import { Button } from "@adea-ai/ui/components/ui/button";
 //#region src/sound.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<button type=button>`);
 var SoundContext = createContext(null);
 function SoundProvider(props) {
 	const [musicMuted, setMusicMuted] = createSignal(false);
@@ -60,32 +60,29 @@ function useSceneMusic(sceneId) {
 	}));
 }
 function MusicButton(props) {
-	return (() => {
-		var _el$ = _tmpl$();
-		_el$.$$click = () => props.onToggle();
-		insert(_el$, (() => {
-			var _c$ = memo(() => !!props.muted);
-			return () => _c$() ? createComponent(Music, {
+	return createComponent(Button, {
+		type: "button",
+		get ["aria-label"]() {
+			return props.muted ? "Unmute music" : "Mute music";
+		},
+		get ["aria-pressed"]() {
+			return props.muted;
+		},
+		onClick: () => props.onToggle(),
+		get variant() {
+			return props.muted ? "outline" : "default";
+		},
+		size: "icon-lg",
+		get children() {
+			return memo(() => !!props.muted)() ? createComponent(Music, {
 				"class": "size-5",
 				"aria-hidden": "true"
 			}) : createComponent(Music2, {
 				"class": "size-5",
 				"aria-hidden": "true"
 			});
-		})());
-		effect((_p$) => {
-			var _v$ = props.muted ? "Unmute music" : "Mute music", _v$2 = props.muted, _v$3 = `inline-flex size-9 items-center justify-center rounded-lg border border-input bg-background transition-colors ${props.muted ? "text-muted-foreground hover:text-foreground" : "bg-primary text-primary-foreground"}`;
-			_v$ !== _p$.e && setAttribute(_el$, "aria-label", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$, "aria-pressed", _p$.t = _v$2);
-			_v$3 !== _p$.a && className(_el$, _p$.a = _v$3);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		});
-		return _el$;
-	})();
+		}
+	});
 }
 function MusicToggle() {
 	const { musicMuted, toggleMusicMute } = useSound();
@@ -94,6 +91,5 @@ function MusicToggle() {
 		onToggle: toggleMusicMute
 	});
 }
-delegateEvents(["click"]);
 //#endregion
 export { MusicToggle, SoundProvider, useSceneMusic, useSound };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/audio",
-  "version": "0.69.2",
+  "version": "0.69.4",
   "description": "Optional, lazy music controller and Solid bindings for Adea. Audio is non-blocking so scene loading never waits on sound assets.",
   "keywords": [
     "audio",

package/src/sound.tsx

@@ -13,6 +13,7 @@ import {
 import { soundController, type MusicOptions } from './controller'
 import { musicForScene } from './scene-music'
 import type { MusicId } from './config'
+import { Button } from '@adea-ai/ui/components/ui/button'
 
 export type SoundContextValue = {
   controller: typeof soundController
@@ -87,19 +88,20 @@ export function useSceneMusic(sceneId: string | null | undefined): void {
 
 function MusicButton(props: { muted: boolean; onToggle: () => void }) {
   return (
-    <button
+    <Button
       type="button"
       aria-label={props.muted ? 'Unmute music' : 'Mute music'}
       aria-pressed={props.muted}
       onClick={() => props.onToggle()}
-      class={`inline-flex size-9 items-center justify-center rounded-lg border border-input bg-background transition-colors ${props.muted ? 'text-muted-foreground hover:text-foreground' : 'bg-primary text-primary-foreground'}`}
+      variant={props.muted ? 'outline' : 'default'}
+      size="icon-lg"
     >
       {props.muted ? (
         <Music class="size-5" aria-hidden="true" />
       ) : (
         <Music2 class="size-5" aria-hidden="true" />
       )}
-    </button>
+    </Button>
   )
 }