diff --git a/apps/playground/components/audio-components-demo/index.tsx b/apps/playground/components/audio-components-demo/index.tsx
index 6ef5bd90..a8fd0ff4 100644
--- a/apps/playground/components/audio-components-demo/index.tsx
+++ b/apps/playground/components/audio-components-demo/index.tsx
@@ -5,6 +5,8 @@ import {
   InlineStatusChipLive,
 } from '@/components/audio-components-demo/variants';
 import { Demo2 } from '@/components/audio-components-demo/demo-2';
+import { Card } from '@elevenlabs/ui/components/card';
+import { PlayerDemoWrapper } from './player-demo';
 
 export function AudioComponentsDemo() {
   return (
@@ -17,6 +19,11 @@ export function AudioComponentsDemo() {
 
         {/* Middle row - Live and Transcribing */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="col-span-3">
+            <Card className="shadow-lg border p-2 m-0">
+              <PlayerDemoWrapper />
+            </Card>
+          </div>
           <div className="col-span-1">
             <InlineStatusChipLive />
           </div>
diff --git a/apps/playground/components/audio-components-demo/player-demo.tsx b/apps/playground/components/audio-components-demo/player-demo.tsx
new file mode 100644
index 00000000..b1ba3df7
--- /dev/null
+++ b/apps/playground/components/audio-components-demo/player-demo.tsx
@@ -0,0 +1,116 @@
+import {
+  PlayerButton,
+  PlayerDuration,
+  PlayerProgress,
+  PlayerProvider,
+  PlayerTime,
+  usePlayer,
+} from '@/registry/audio-components/ui/player';
+import { cn } from '@elevenlabs/ui/lib/utils';
+
+export const PlayerDemoWrapper = () => {
+  return (
+    <PlayerProvider>
+      <PlayerDemo />
+    </PlayerProvider>
+  );
+};
+
+const PlayerDemo = () => {
+  return (
+    <div className="flex gap-2">
+      <ul className="w-80 flex flex-col gap-2">
+        {songs.map(song => (
+          <SongListItem key={song.id} song={song} />
+        ))}
+      </ul>
+      <Player />
+    </div>
+  );
+};
+
+const Player = () => {
+  const player = usePlayer();
+
+  return (
+    <div className="bg-foreground/5 p-2 rounded-xl flex-1 flex gap-2">
+      <PlayerButton
+        variant="ghost"
+        className="h-full w-16 hover:!bg-foreground/5"
+      />
+      <div className="flex flex-col justify-center w-full gap-1.5 pr-4">
+        <p>{player.activeItem ? player.activeItem?.data.name : '-------'}</p>
+        <div className="flex items-center gap-4">
+          <PlayerTime />
+          <PlayerProgress className="flex-1" />
+          <PlayerDuration />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+type Song = {
+  id: string;
+  name: string;
+  url: string;
+};
+
+const songs = [
+  {
+    id: '1',
+    name: 'Rise up rap',
+    url: '/audio/rap.mp3',
+  },
+  {
+    id: '2',
+    name: 'Midnight swing',
+    url: '/audio/jazz.mp3',
+  },
+];
+
+const SongListItem = ({ song }: { song: Song }) => {
+  const player = usePlayer();
+
+  return (
+    <li
+      onClick={() => {
+        if (player.isPlaying && player.isItemActive(song.id)) {
+          player.pause();
+        } else {
+          player.play({
+            id: song.id,
+            src: song.url,
+            data: song,
+          });
+        }
+      }}
+      className={cn(
+        'group flex items-center justify-between rounded-xl p-2 hover:bg-foreground/5 cursor-pointer',
+        player.isItemActive(song.id) && 'bg-foreground/5',
+      )}
+      tabIndex={0}
+    >
+      <p className="pl-3">{song.name}</p>
+      <div
+        className={cn(
+          'opacity-0 group-hover:opacity-100',
+          player.isItemActive(song.id) && 'opacity-100',
+        )}
+      >
+        <PlayerButton
+          variant="ghost"
+          className="hover:!bg-foreground/5 w-9"
+          item={{
+            id: song.id,
+            src: song.url,
+            data: song,
+          }}
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        />
+      </div>
+    </li>
+  );
+};
diff --git a/apps/playground/public/audio/jazz.mp3 b/apps/playground/public/audio/jazz.mp3
new file mode 100644
index 00000000..64e9a764
Binary files /dev/null and b/apps/playground/public/audio/jazz.mp3 differ
diff --git a/apps/playground/public/audio/rap.mp3 b/apps/playground/public/audio/rap.mp3
new file mode 100644
index 00000000..6133e5fb
Binary files /dev/null and b/apps/playground/public/audio/rap.mp3 differ
diff --git a/apps/playground/registry/audio-components/ui/player.tsx b/apps/playground/registry/audio-components/ui/player.tsx
new file mode 100644
index 00000000..38d97057
--- /dev/null
+++ b/apps/playground/registry/audio-components/ui/player.tsx
@@ -0,0 +1,443 @@
+import { Button } from '@elevenlabs/ui/components/button';
+import { PauseIcon, PlayIcon } from 'lucide-react';
+import {
+  ComponentProps,
+  createContext,
+  HTMLProps,
+  ReactNode,
+  RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cn } from '../lib/utils';
+
+enum ReadyState {
+  HAVE_NOTHING = 0,
+  HAVE_METADATA = 1,
+  HAVE_CURRENT_DATA = 2,
+  HAVE_FUTURE_DATA = 3,
+  HAVE_ENOUGH_DATA = 4,
+}
+
+enum NetworkState {
+  NETWORK_EMPTY = 0,
+  NETWORK_IDLE = 1,
+  NETWORK_LOADING = 2,
+  NETWORK_NO_SOURCE = 3,
+}
+
+function formatTime(seconds: number) {
+  const hrs = Math.floor(seconds / 3600);
+  const mins = Math.floor((seconds % 3600) / 60);
+  const secs = Math.floor(seconds % 60);
+
+  const formattedMins = mins < 10 ? `0${mins}` : mins;
+  const formattedSecs = secs < 10 ? `0${secs}` : secs;
+
+  return hrs > 0
+    ? `${hrs}:${formattedMins}:${formattedSecs}`
+    : `${mins}:${formattedSecs}`;
+}
+
+export interface PlayerProviderProps {}
+
+interface PlayerItem {
+  id: string | number;
+  src: string;
+  data?: any;
+}
+
+interface PlayerApi {
+  ref: RefObject<HTMLAudioElement | null>;
+  activeItem: PlayerItem | null;
+  duration: number | undefined;
+  error: MediaError | null;
+  isPlaying: boolean;
+  isBuffering: boolean;
+  isItemActive: (id: string | number | null) => boolean;
+  setActiveItem: (item: PlayerItem | null) => Promise<void>;
+  play: (item?: PlayerItem | null) => Promise<void>;
+  pause: () => void;
+  seek: (time: number) => void;
+}
+
+const PlayerContext = createContext<PlayerApi | null>(null);
+
+export const usePlayer = () => {
+  const api = useContext(PlayerContext);
+  if (!api) {
+    throw new Error('usePlayer cannot be called outside of PlayerProvider');
+  }
+  return api;
+};
+
+const PlayerTimeContext = createContext<number | null>(null);
+
+export const usePlayerTime = () => {
+  const time = useContext(PlayerTimeContext);
+  if (time === null) {
+    throw new Error('usePlayerTime cannot be called outside of PlayerProvider');
+  }
+  return time;
+};
+
+export const PlayerProvider = ({ children }: { children: ReactNode }) => {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const itemRef = useRef<PlayerItem | null>(null);
+  const [readyState, setReadyState] = useState<number>(0);
+  const [networkState, setNetworkState] = useState<number>(0);
+  const [time, setTime] = useState<number>(0);
+  const [duration, setDuration] = useState<number | undefined>(undefined);
+  const [error, setError] = useState<MediaError | null>(null);
+  const [activeItem, _setActiveItem] = useState<PlayerItem | null>(null);
+  const [paused, setPaused] = useState(true);
+
+  const setActiveItem = useCallback(async (item: PlayerItem | null) => {
+    if (!audioRef.current) return;
+
+    if (item?.id === itemRef.current?.id) {
+      return;
+    } else {
+      itemRef.current = item;
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+      if (item === null) {
+        audioRef.current.removeAttribute('src');
+      } else {
+        audioRef.current.src = item.src;
+      }
+      await audioRef.current.load();
+    }
+  }, []);
+
+  const play = useCallback(
+    async (item?: PlayerItem | null) => {
+      if (!audioRef.current) return;
+
+      if (item === undefined) {
+        return audioRef.current.play();
+      } else if (item?.id === activeItem?.id) {
+        return audioRef.current.play();
+      } else {
+        itemRef.current = item;
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+        if (item === null) {
+          audioRef.current.removeAttribute('src');
+        } else {
+          audioRef.current.src = item.src;
+        }
+        await audioRef.current.load();
+        return audioRef.current.play();
+      }
+    },
+    [activeItem],
+  );
+
+  const pause = useCallback(() => {
+    if (!audioRef.current) return;
+    audioRef.current.pause();
+  }, []);
+
+  const seek = useCallback((time: number) => {
+    if (!audioRef.current) return;
+    audioRef.current.currentTime = time;
+  }, []);
+
+  const isItemActive = useCallback(
+    (id: string | number | null) => {
+      return activeItem?.id === id;
+    },
+    [activeItem],
+  );
+
+  useAnimationFrame(() => {
+    if (audioRef.current) {
+      _setActiveItem(itemRef.current);
+      setReadyState(audioRef.current.readyState);
+      setNetworkState(audioRef.current.networkState);
+      setTime(audioRef.current.currentTime);
+      setDuration(audioRef.current.duration);
+      setPaused(audioRef.current.paused);
+      setError(audioRef.current.error);
+    }
+  });
+
+  const isPlaying = !paused;
+  const isBuffering =
+    readyState < ReadyState.HAVE_FUTURE_DATA &&
+    networkState === NetworkState.NETWORK_LOADING;
+
+  const api = useMemo(
+    () => ({
+      ref: audioRef,
+      duration,
+      error,
+      isPlaying,
+      isBuffering,
+      activeItem,
+      isItemActive,
+      setActiveItem,
+      play,
+      pause,
+      seek,
+    }),
+    [
+      audioRef,
+      duration,
+      error,
+      isPlaying,
+      isBuffering,
+      activeItem,
+      isItemActive,
+      setActiveItem,
+      play,
+      pause,
+      seek,
+    ],
+  );
+
+  return (
+    <PlayerContext.Provider value={api}>
+      <PlayerTimeContext.Provider value={time}>
+        <audio ref={audioRef} className="hidden" />
+        {children}
+      </PlayerTimeContext.Provider>
+    </PlayerContext.Provider>
+  );
+};
+
+export interface PlayerProgressProps
+  extends Omit<
+    ComponentProps<typeof SliderPrimitive.Root>,
+    'min' | 'max' | 'value'
+  > {}
+
+export const PlayerProgress = ({ ...otherProps }: PlayerProgressProps) => {
+  const player = usePlayer();
+  const time = usePlayerTime();
+  const wasPlayingRef = useRef(false);
+
+  return (
+    <SliderPrimitive.Root
+      {...otherProps}
+      value={[time]}
+      onValueChange={vals => {
+        player.seek(vals[0]);
+        otherProps.onValueChange?.(vals);
+      }}
+      min={0}
+      max={player.duration ?? 0}
+      step={otherProps.step || 0.25}
+      onPointerDown={e => {
+        wasPlayingRef.current = player.isPlaying;
+        player.pause();
+        otherProps.onPointerDown?.(e);
+      }}
+      onPointerUp={e => {
+        if (wasPlayingRef.current) {
+          player.play();
+        }
+        otherProps.onPointerUp?.(e);
+      }}
+      className={cn(
+        'relative group/player flex h-4 touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        otherProps.className,
+      )}
+      onKeyDown={e => {
+        if (e.key === ' ') {
+          e.preventDefault();
+          if (!player.isPlaying) {
+            player.play();
+          } else {
+            player.pause();
+          }
+        }
+        otherProps.onKeyDown?.(e);
+      }}
+      disabled={
+        player.duration === undefined ||
+        !Number.isFinite(player.duration) ||
+        Number.isNaN(player.duration)
+      }
+    >
+      <SliderPrimitive.Track className="bg-foreground/10 relative grow overflow-hidden rounded-full h-[4px] w-full">
+        <SliderPrimitive.Range className="bg-primary absolute h-full" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb
+        className="relative h-0 w-0 flex items-center justify-center opacity-0 group-hover/player:opacity-100 focus-visible:outline-none focus-visible:opacity-100 disabled:pointer-events-none disabled:opacity-50"
+        data-slot="slider-thumb"
+      >
+        <div className="absolute size-3 rounded-full bg-foreground" />
+      </SliderPrimitive.Thumb>
+    </SliderPrimitive.Root>
+  );
+};
+
+interface PlayerTimeProps extends HTMLProps<HTMLSpanElement> {}
+
+export const PlayerTime = ({ className, ...otherProps }: PlayerTimeProps) => {
+  const time = usePlayerTime();
+  return (
+    <span
+      {...otherProps}
+      className={cn('tabular-nums text-sm text-foreground/50', className)}
+    >
+      {formatTime(time)}
+    </span>
+  );
+};
+
+interface PlayerDurationProps extends HTMLProps<HTMLSpanElement> {}
+
+export const PlayerDuration = ({
+  className,
+  ...otherProps
+}: PlayerDurationProps) => {
+  const player = usePlayer();
+  return (
+    <span
+      {...otherProps}
+      className={cn('tabular-nums text-sm text-foreground/50', className)}
+    >
+      {player.duration != null && !Number.isNaN(player.duration)
+        ? formatTime(player.duration)
+        : '--:--'}
+    </span>
+  );
+};
+
+interface SpinnerProps {
+  className?: string;
+}
+
+function Spinner({ className }: SpinnerProps) {
+  return (
+    <div
+      className={cn(
+        'animate-spin rounded-full border-2 border-foreground/20 border-t-foreground size-3.5',
+        className,
+      )}
+      role="status"
+      aria-label="Loading"
+    >
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}
+
+interface PlayButtonProps extends React.ComponentProps<typeof Button> {
+  playing: boolean;
+  onPlayingChange: (playing: boolean) => void;
+  loading?: boolean;
+}
+
+const PlayButton = ({
+  playing,
+  onPlayingChange,
+  className,
+  onClick,
+  loading,
+  ...otherProps
+}: PlayButtonProps) => {
+  return (
+    <Button
+      {...otherProps}
+      onClick={e => {
+        onPlayingChange(!playing);
+        onClick?.(e);
+      }}
+      className={cn('relative', className)}
+      aria-label={playing ? 'Pause' : 'Play'}
+    >
+      {playing ? (
+        <PauseIcon className={cn('size-4', loading && 'opacity-0')} />
+      ) : (
+        <PlayIcon className={cn('size-4', loading && 'opacity-0')} />
+      )}
+      {loading && (
+        <div className="absolute inset-0 rounded-[inherit] flex items-center justify-center backdrop-blur-xs">
+          <Spinner />
+        </div>
+      )}
+    </Button>
+  );
+};
+
+export interface PlayerButtonProps extends React.ComponentProps<typeof Button> {
+  item?: PlayerItem;
+}
+
+export const PlayerButton = ({ item, ...otherProps }: PlayerButtonProps) => {
+  const player = usePlayer();
+
+  if (item) {
+    return (
+      <PlayButton
+        {...otherProps}
+        playing={player.isItemActive(item.id) && player.isPlaying}
+        onPlayingChange={shouldPlay => {
+          if (shouldPlay) {
+            player.play(item);
+          } else {
+            player.pause();
+          }
+        }}
+        loading={
+          player.isItemActive(item.id) && player.isBuffering && player.isPlaying
+        }
+      />
+    );
+  } else {
+    return (
+      <PlayButton
+        {...otherProps}
+        playing={player.isPlaying}
+        onPlayingChange={shouldPlay => {
+          if (shouldPlay) {
+            player.play();
+          } else {
+            player.pause();
+          }
+        }}
+        loading={player.isBuffering && player.isPlaying}
+      />
+    );
+  }
+};
+
+type Callback = (delta: number) => void;
+
+function useAnimationFrame(callback: Callback) {
+  const requestRef = useRef<number | null>(null);
+  const previousTimeRef = useRef<number | null>(null);
+  const callbackRef = useRef<Callback>(callback);
+
+  // Keep callback ref always up to date
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const animate = (time: number) => {
+      if (previousTimeRef.current != null) {
+        const delta = time - previousTimeRef.current;
+        callbackRef.current(delta);
+      }
+      previousTimeRef.current = time;
+      requestRef.current = requestAnimationFrame(animate);
+    };
+
+    requestRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+      previousTimeRef.current = null;
+    };
+  }, []);
+}
diff --git a/package.json b/package.json
index 41114fff..f312a838 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "check-types": "turbo run check-types"
   },
   "dependencies": {
+    "@radix-ui/react-slider": "^1.3.6",
     "tsx": "^4.1.4"
   },
   "devDependencies": {
diff --git a/packages/types/generated/types/index.ts b/packages/types/generated/types/index.ts
index 7b06a0f9..5ec654ea 100644
--- a/packages/types/generated/types/index.ts
+++ b/packages/types/generated/types/index.ts
@@ -16,7 +16,6 @@ export * from './ConversationInitiationPayload';
 export * from './ConversationMetadataData';
 export * from './ConversationMetadataPayload';
 export * from './FeedbackScore';
-export * from './index';
 export * from './InterruptionData';
 export * from './InterruptionPayload';
 export * from './McpConnectionStatusData';
@@ -38,7 +37,8 @@ export * from './UserActivityPayload';
 export * from './UserAudioPayload';
 export * from './UserFeedbackPayload';
 export * from './UserMessagePayload';
-export * from './UserTranscriptionData';
 export * from './UserTranscriptPayload';
+export * from './UserTranscriptionData';
 export * from './VadScoreData';
 export * from './VadScorePayload';
+export * from './index';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb6609c9..6ee92cc9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@radix-ui/react-slider':
+        specifier: ^1.3.6
+        version: 1.3.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)
       tsx:
         specifier: ^4.1.4
         version: 4.20.5
@@ -308,7 +311,7 @@ importers:
     devDependencies:
       '@asyncapi/cli':
         specifier: ^2.17.0
-        version: 2.17.0(@babel/core@7.28.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(@types/babel__core@7.20.5)(@types/node@22.15.3)(csstype@3.1.3)(encoding@0.1.13)(immer@9.0.21)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(ts-node@10.9.2(@types/node@22.15.3)(typescript@5.9.2))
+        version: 2.17.0(@babel/core@7.12.9)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(@types/babel__core@7.20.5)(@types/node@22.15.3)(csstype@3.1.3)(encoding@0.1.13)(immer@9.0.21)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)(ts-node@10.9.2(@types/node@22.15.3)(typescript@5.9.2))
       '@asyncapi/modelina':
         specifier: ^4.4.3
         version: 4.4.3(encoding@0.1.13)
@@ -12287,7 +12290,7 @@ snapshots:
       js-yaml: 4.1.0
       lodash: 4.17.21
 
-  '@asyncapi/cli@2.17.0(@babel/core@7.28.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(@types/babel__core@7.20.5)(@types/node@22.15.3)(csstype@3.1.3)(encoding@0.1.13)(immer@9.0.21)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(ts-node@10.9.2(@types/node@22.15.3)(typescript@5.9.2))':
+  '@asyncapi/cli@2.17.0(@babel/core@7.12.9)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(@types/babel__core@7.20.5)(@types/node@22.15.3)(csstype@3.1.3)(encoding@0.1.13)(immer@9.0.21)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)(ts-node@10.9.2(@types/node@22.15.3)(typescript@5.9.2))':
     dependencies:
       '@asyncapi/avro-schema-parser': 3.0.24(encoding@0.1.13)
       '@asyncapi/bundler': 0.6.4
@@ -12300,7 +12303,7 @@ snapshots:
       '@asyncapi/parser': 3.4.0(encoding@0.1.13)
       '@asyncapi/protobuf-schema-parser': 3.6.0(encoding@0.1.13)
       '@asyncapi/raml-dt-schema-parser': 4.0.24(encoding@0.1.13)
-      '@asyncapi/studio': 0.23.1(@babel/core@7.28.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(csstype@3.1.3)(encoding@0.1.13)(immer@9.0.21)(ts-node@10.9.2(@types/node@22.15.3)(typescript@5.9.2))
+      '@asyncapi/studio': 0.23.1(@babel/core@7.12.9)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(csstype@3.1.3)(encoding@0.1.13)(immer@9.0.21)(ts-node@10.9.2(@types/node@22.15.3)(typescript@5.9.2))
       '@changesets/changelog-git': 0.2.1
       '@clack/prompts': 0.7.0
       '@oclif/core': 4.5.2
@@ -12314,7 +12317,7 @@ snapshots:
       https-proxy-agent: 7.0.6
       inquirer: 8.2.7(@types/node@22.15.3)
       js-yaml: 4.1.0
-      next: 14.2.32(@babel/core@7.28.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      next: 14.2.32(@babel/core@7.12.9)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)
       node-fetch: 2.7.0(encoding@0.1.13)
       oclif: 4.22.16(@types/node@22.15.3)
       open: 8.4.2
@@ -12690,7 +12693,7 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
-  '@asyncapi/studio@0.23.1(@babel/core@7.28.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(csstype@3.1.3)(encoding@0.1.13)(immer@9.0.21)(ts-node@10.9.2(@types/node@22.15.3)(typescript@5.9.2))':
+  '@asyncapi/studio@0.23.1(@babel/core@7.12.9)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(csstype@3.1.3)(encoding@0.1.13)(immer@9.0.21)(ts-node@10.9.2(@types/node@22.15.3)(typescript@5.9.2))':
     dependencies:
       '@asyncapi/avro-schema-parser': 3.0.24(encoding@0.1.13)
       '@asyncapi/converter': 1.5.0(encoding@0.1.13)
@@ -12719,7 +12722,7 @@ snapshots:
       js-yaml: 4.1.0
       monaco-editor: 0.34.1
       monaco-yaml: 4.0.2(monaco-editor@0.34.1)
-      next: 14.2.3(@babel/core@7.28.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      next: 14.2.3(@babel/core@7.12.9)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       postcss: 8.4.31
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -16658,6 +16661,18 @@ snapshots:
       '@types/react': 19.1.12
       '@types/react-dom': 19.1.9(@types/react@19.1.12)
 
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+      react-dom: 19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
   '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
@@ -16670,6 +16685,12 @@ snapshots:
       '@types/react': 19.1.12
       '@types/react-dom': 19.1.9(@types/react@19.1.12)
 
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+    optionalDependencies:
+      '@types/react': 19.1.12
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.12)(react@19.1.1)':
     dependencies:
       react: 19.1.1
@@ -16690,6 +16711,12 @@ snapshots:
       '@types/react': 19.1.12
       '@types/react-dom': 19.1.9(@types/react@19.1.12)
 
+  '@radix-ui/react-context@1.1.2(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+    optionalDependencies:
+      '@types/react': 19.1.12
+
   '@radix-ui/react-context@1.1.2(@types/react@19.1.12)(react@19.1.1)':
     dependencies:
       react: 19.1.1
@@ -16718,6 +16745,12 @@ snapshots:
       '@types/react': 19.1.12
       '@types/react-dom': 19.1.9(@types/react@19.1.12)
 
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+    optionalDependencies:
+      '@types/react': 19.1.12
+
   '@radix-ui/react-direction@1.1.1(@types/react@19.1.12)(react@19.1.1)':
     dependencies:
       react: 19.1.1
@@ -16894,6 +16927,15 @@ snapshots:
       '@types/react': 19.1.12
       '@types/react-dom': 19.1.9(@types/react@19.1.12)
 
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+      react-dom: 19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
   '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
@@ -16975,6 +17017,25 @@ snapshots:
       '@types/react': 19.1.12
       '@types/react-dom': 19.1.9(@types/react@19.1.12)
 
+  '@radix-ui/react-slider@1.3.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+      react-dom: 19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
   '@radix-ui/react-slider@1.3.6(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@radix-ui/number': 1.1.1
@@ -16994,6 +17055,13 @@ snapshots:
       '@types/react': 19.1.12
       '@types/react-dom': 19.1.9(@types/react@19.1.12)
 
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+    optionalDependencies:
+      '@types/react': 19.1.12
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.1.12)(react@19.1.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
@@ -17084,6 +17152,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.12
 
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+    optionalDependencies:
+      '@types/react': 19.1.12
+
   '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.12)(react@19.1.1)':
     dependencies:
       '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.12)(react@19.1.1)
@@ -17092,6 +17168,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.12
 
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+    optionalDependencies:
+      '@types/react': 19.1.12
+
   '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.12)(react@19.1.1)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
@@ -17113,12 +17196,24 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.12
 
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+    optionalDependencies:
+      '@types/react': 19.1.12
+
   '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.12)(react@19.1.1)':
     dependencies:
       react: 19.1.1
     optionalDependencies:
       '@types/react': 19.1.12
 
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+    optionalDependencies:
+      '@types/react': 19.1.12
+
   '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.12)(react@19.1.1)':
     dependencies:
       react: 19.1.1
@@ -17132,6 +17227,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.12
 
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.0.0-rc-cc1ec60d0d-20240607)
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+    optionalDependencies:
+      '@types/react': 19.1.12
+
   '@radix-ui/react-use-size@1.1.1(@types/react@19.1.12)(react@19.1.1)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.12)(react@19.1.1)
@@ -23973,7 +24075,7 @@ snapshots:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
 
-  next@14.2.3(@babel/core@7.28.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next@14.2.3(@babel/core@7.12.9)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@next/env': 14.2.3
       '@swc/helpers': 0.5.5
@@ -23983,7 +24085,7 @@ snapshots:
       postcss: 8.4.31
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(@babel/core@7.28.3)(react@18.2.0)
+      styled-jsx: 5.1.1(@babel/core@7.12.9)(react@18.2.0)
     optionalDependencies:
       '@next/swc-darwin-arm64': 14.2.3
       '@next/swc-darwin-x64': 14.2.3
@@ -24000,7 +24102,7 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  next@14.2.32(@babel/core@7.28.3)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+  next@14.2.32(@babel/core@7.12.9)(@opentelemetry/api@1.9.0)(@playwright/test@1.55.0)(react-dom@19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607))(react@19.0.0-rc-cc1ec60d0d-20240607):
     dependencies:
       '@next/env': 14.2.32
       '@swc/helpers': 0.5.5
@@ -24008,9 +24110,9 @@ snapshots:
       caniuse-lite: 1.0.30001739
       graceful-fs: 4.2.11
       postcss: 8.4.31
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
-      styled-jsx: 5.1.1(@babel/core@7.28.3)(react@19.1.1)
+      react: 19.0.0-rc-cc1ec60d0d-20240607
+      react-dom: 19.0.0-rc-cc1ec60d0d-20240607(react@19.0.0-rc-cc1ec60d0d-20240607)
+      styled-jsx: 5.1.1(@babel/core@7.12.9)(react@19.0.0-rc-cc1ec60d0d-20240607)
     optionalDependencies:
       '@next/swc-darwin-arm64': 14.2.32
       '@next/swc-darwin-x64': 14.2.32
@@ -26471,19 +26573,19 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.4
 
-  styled-jsx@5.1.1(@babel/core@7.28.3)(react@18.2.0):
+  styled-jsx@5.1.1(@babel/core@7.12.9)(react@18.2.0):
     dependencies:
       client-only: 0.0.1
       react: 18.2.0
     optionalDependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.12.9
 
-  styled-jsx@5.1.1(@babel/core@7.28.3)(react@19.1.1):
+  styled-jsx@5.1.1(@babel/core@7.12.9)(react@19.0.0-rc-cc1ec60d0d-20240607):
     dependencies:
       client-only: 0.0.1
-      react: 19.1.1
+      react: 19.0.0-rc-cc1ec60d0d-20240607
     optionalDependencies:
-      '@babel/core': 7.28.3
+      '@babel/core': 7.12.9
 
   styled-jsx@5.1.6(@babel/core@7.28.3)(babel-plugin-macros@3.1.0)(react@19.1.1):
     dependencies: