@lofcz/orb-ui 0.7.1 → 0.9.0

package/README.md

@@ -274,7 +274,7 @@ For an app-owned voice stack (Gemini Live, custom Web Audio), keep session contr
 ```tsx
 import { Orb } from '@lofcz/orb-ui'
 
-<Orb
+;<Orb
   signal={{ state: 'listening', inputVolume: 0.4, outputVolume: 0 }}
   interactive={false}
   renderTheme={({ rootProps, state, activity, inputVolume, outputVolume }) => (
@@ -292,22 +292,24 @@ import { Orb } from '@lofcz/orb-ui'
 
 ## Props
 
-| Prop          | Type                                                   | Default   | Description                                             |
-| ------------- | ------------------------------------------------------ | --------- | ------------------------------------------------------- |
-| `theme`       | `'debug' \| 'circle' \| 'bars' \| 'cloud' \| 'radial'` | `'debug'` | Visual theme                                            |
-| `signal`      | `OrbSignal`                                            | —         | Rich controlled signal with state/input/output volume   |
-| `state`       | `OrbState`                                             | `'idle'`  | Conversation state (controlled mode)                    |
-| `volume`      | `number`                                               | `0`       | Audio volume, 0–1. Overrides signal/adapter volume.     |
-| `adapter`     | `OrbAdapter`                                           | —         | Provider adapter (manages signal updates automatically) |
-| `size`        | `number`                                               | `200`     | Size in pixels                                          |
-| `className`   | `string`                                               | —         | Optional class name for the rendered theme              |
-| `style`       | `OrbStyle`                                             | —         | Inline styles, including radial control surround color  |
-| `disabled`    | `boolean`                                              | `false`   | Disables clickable themes and debug start/stop controls |
-| `interactive` | `boolean`                                              | `true`    | Allows the theme control to start and stop a session    |
-| `aria-label`  | `string`                                               | generated | Accessible label for clickable visual themes            |
-| `onStart`     | `() => void`                                           | —         | Custom start handler (overrides adapter.start())        |
-| `onStop`      | `() => void`                                           | —         | Custom stop handler (overrides adapter.stop())          |
-| `renderTheme` | `OrbThemeRenderer`                                     | —         | Custom artwork; Orb still owns state and volume         |
+| Prop          | Type                                                              | Default   | Description                                             |
+| ------------- | ----------------------------------------------------------------- | --------- | ------------------------------------------------------- |
+| `theme`       | `'debug' \| 'circle' \| 'bars' \| 'cloud' \| 'radial' \| 'ocean'` | `'debug'` | Visual theme                                            |
+| `scheme`      | `'light' \| 'dark'`                                               | `'light'` | Preset selector for palette-aware themes (`ocean`)      |
+| `palette`     | `OrbPalette`                                                      | —         | Hex color overrides for palette-aware themes (`ocean`)  |
+| `signal`      | `OrbSignal`                                                       | —         | Rich controlled signal with state/input/output volume   |
+| `state`       | `OrbState`                                                        | `'idle'`  | Conversation state (controlled mode)                    |
+| `volume`      | `number`                                                          | `0`       | Audio volume, 0–1. Overrides signal/adapter volume.     |
+| `adapter`     | `OrbAdapter`                                                      | —         | Provider adapter (manages signal updates automatically) |
+| `size`        | `number`                                                          | `200`     | Size in pixels                                          |
+| `className`   | `string`                                                          | —         | Optional class name for the rendered theme              |
+| `style`       | `OrbStyle`                                                        | —         | Inline styles, including radial control surround color  |
+| `disabled`    | `boolean`                                                         | `false`   | Disables clickable themes and debug start/stop controls |
+| `interactive` | `boolean`                                                         | `true`    | Allows the theme control to start and stop a session    |
+| `aria-label`  | `string`                                                          | generated | Accessible label for clickable visual themes            |
+| `onStart`     | `() => void`                                                      | —         | Custom start handler (overrides adapter.start())        |
+| `onStop`      | `() => void`                                                      | —         | Custom stop handler (overrides adapter.stop())          |
+| `renderTheme` | `OrbThemeRenderer`                                                | —         | Custom artwork; Orb still owns state and volume         |
 
 ## States
 
@@ -315,14 +317,14 @@ import { Orb } from '@lofcz/orb-ui'
 
 ## Supported Providers
 
-| Provider                                                                  | Adapter                                                               |
-| ------------------------------------------------------------------------- | --------------------------------------------------------------------- |
-| [Vapi](https://vapi.ai)                                                   | `createVapiAdapter` from `@lofcz/orb-ui/adapters`                            |
-| [ElevenLabs](https://elevenlabs.io/conversational-ai)                     | `createElevenLabsAdapter` from `@lofcz/orb-ui/adapters`                      |
-| [LiveKit](https://livekit.io)                                             | `createLiveKitAdapter` from `@lofcz/orb-ui/adapters`                         |
-| [Pipecat](https://pipecat.ai)                                             | `createPipecatAdapter` from `@lofcz/orb-ui/adapters`                         |
-| [OpenAI Realtime](https://developers.openai.com/api/docs/guides/realtime) | `createOpenAIRealtimeAdapter` from `@lofcz/orb-ui/adapters`                  |
-| [Gemini Live](https://ai.google.dev/gemini-api/docs/live-api)             | `createGeminiLiveAdapter` from `@lofcz/orb-ui/adapters`                      |
+| Provider                                                                  | Adapter                                                                   |
+| ------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| [Vapi](https://vapi.ai)                                                   | `createVapiAdapter` from `@lofcz/orb-ui/adapters`                         |
+| [ElevenLabs](https://elevenlabs.io/conversational-ai)                     | `createElevenLabsAdapter` from `@lofcz/orb-ui/adapters`                   |
+| [LiveKit](https://livekit.io)                                             | `createLiveKitAdapter` from `@lofcz/orb-ui/adapters`                      |
+| [Pipecat](https://pipecat.ai)                                             | `createPipecatAdapter` from `@lofcz/orb-ui/adapters`                      |
+| [OpenAI Realtime](https://developers.openai.com/api/docs/guides/realtime) | `createOpenAIRealtimeAdapter` from `@lofcz/orb-ui/adapters`               |
+| [Gemini Live](https://ai.google.dev/gemini-api/docs/live-api)             | `createGeminiLiveAdapter` from `@lofcz/orb-ui/adapters`                   |
 | Custom / Gemini Live (app-owned session)                                  | Controlled mode — pass `signal` or `state` + `volume`, plus `renderTheme` |
 
 ## Development

package/dist/components/Orb/Orb.d.ts

@@ -1,2 +1,2 @@
 import { OrbProps } from './Orb.types.js';
-export declare function Orb({ signal: signalProp, state: stateProp, volume: volumeProp, adapter, theme, size, className, style, disabled, interactive: interactiveProp, onStart, onStop, renderTheme, ...htmlProps }: OrbProps): string | number | boolean | Iterable<import('react').ReactNode> | import("react").JSX.Element | null | undefined;
+export declare function Orb({ signal: signalProp, state: stateProp, volume: volumeProp, adapter, theme, size, scheme, palette, className, style, disabled, interactive: interactiveProp, onStart, onStop, renderTheme, ...htmlProps }: OrbProps): string | number | boolean | Iterable<import('react').ReactNode> | import("react").JSX.Element | null | undefined;

package/dist/components/Orb/Orb.types.d.ts

@@ -4,7 +4,27 @@ export type OrbStyle = CSSProperties & {
     '--orb-ui-radial-control-surround'?: string;
 };
 export type OrbState = 'idle' | 'connecting' | 'listening' | 'thinking' | 'speaking' | 'error';
-export type OrbTheme = 'debug' | 'circle' | 'bars' | 'cloud' | 'radial';
+export type OrbTheme = 'debug' | 'circle' | 'bars' | 'cloud' | 'radial' | 'ocean';
+/** Light or dark surroundings; themes with both presets pick their colors from it. */
+export type OrbScheme = 'light' | 'dark';
+/**
+ * Hex colors a palette-aware theme reads. Every field is optional; whatever is
+ * left out comes from the theme's preset for the active scheme.
+ */
+export interface OrbPalette {
+    /** The darkest water, at the bottom of the orb. */
+    deep?: string;
+    /** Sunlit water just below the surface. */
+    shallow?: string;
+    /** Foam on the waterline and the glass rim. */
+    foam?: string;
+    /** The light source: sun by day, moon by night. Also drives the halo. */
+    glow?: string;
+    /** The air at the top of the orb. */
+    sky?: string;
+    /** The air just above the waterline. */
+    horizon?: string;
+}
 export interface OrbSignal {
     state: OrbState;
     volume?: number;
@@ -62,6 +82,16 @@ export interface OrbProps extends OrbHtmlAttributes {
     theme?: OrbTheme;
     /** Size in pixels. Defaults to 200. */
     size?: number;
+    /**
+     * Light or dark surroundings. Palette-aware themes (`ocean`) switch presets
+     * on it; other themes ignore it. Defaults to 'light'.
+     */
+    scheme?: OrbScheme;
+    /**
+     * Color overrides for palette-aware themes (`ocean`). Merged over the preset
+     * selected by `scheme`; other themes ignore it.
+     */
+    palette?: OrbPalette;
     /** Optional class name for the rendered orb container/control. */
     className?: string;
     /** Optional inline styles for the rendered orb container/control. */

package/dist/components/Orb/index.d.ts

@@ -1,2 +1,2 @@
 export { Orb } from './Orb.js';
-export type { OrbAdapter, OrbProps, OrbSignal, OrbSignalListener, OrbState, OrbStyle, OrbTheme, OrbThemeRenderer, OrbThemeRendererControlProps, OrbThemeRendererProps, OrbThemeRendererRootProps, } from './Orb.types.js';
+export type { OrbAdapter, OrbPalette, OrbProps, OrbScheme, OrbSignal, OrbSignalListener, OrbState, OrbStyle, OrbTheme, OrbThemeRenderer, OrbThemeRendererControlProps, OrbThemeRendererProps, OrbThemeRendererRootProps, } from './Orb.types.js';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { Orb } from './components/Orb/index.js';
-export type { OrbAdapter, OrbProps, OrbSignal, OrbSignalListener, OrbState, OrbStyle, OrbTheme, OrbThemeRenderer, OrbThemeRendererControlProps, OrbThemeRendererProps, OrbThemeRendererRootProps, } from './components/Orb/index.js';
+export type { OrbAdapter, OrbPalette, OrbProps, OrbScheme, OrbSignal, OrbSignalListener, OrbState, OrbStyle, OrbTheme, OrbThemeRenderer, OrbThemeRendererControlProps, OrbThemeRendererProps, OrbThemeRendererRootProps, } from './components/Orb/index.js';
 export { Orb as VoiceOrb } from './components/Orb/index.js';
 export type { OrbProps as VoiceOrbProps } from './components/Orb/index.js';

package/dist/orb-ui.cjs

@@ -200,4 +200,104 @@ void main() {
 @media (prefers-reduced-motion: reduce) {
   [data-radial-spinner] { animation: none !important; }
 }
-`,se=.66,ce=.2;function X(e,t=0,n=1){return Math.min(n,Math.max(t,e))}function Z(e,t,n,r){return e+(t-e)*(1-Math.exp(-n*r))}function Q(e,t,n){let r=e.createShader(t);if(r){if(e.shaderSource(r,n),e.compileShader(r),!e.getShaderParameter(r,e.COMPILE_STATUS)){e.deleteShader(r);return}return r}}function le(e,t){let n=e.getContext(`webgl`,{alpha:!0,antialias:!0,premultipliedAlpha:!0});if(!n)return;let r=Q(n,n.VERTEX_SHADER,ie),i=Q(n,n.FRAGMENT_SHADER,ae);if(!r||!i){r&&n.deleteShader(r),i&&n.deleteShader(i);return}let a=n.createProgram(),o=n.createBuffer();if(!a||!o){a&&n.deleteProgram(a),o&&n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i);return}if(n.attachShader(a,r),n.attachShader(a,i),n.linkProgram(a),!n.getProgramParameter(a,n.LINK_STATUS)){n.deleteProgram(a),n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i);return}let s=n.getAttribLocation(a,`a_position`),c=n.getUniformLocation(a,`u_resolution`),l=n.getUniformLocation(a,`u_time`),u=n.getUniformLocation(a,`u_rotation`),d=n.getUniformLocation(a,`u_listen`),f=n.getUniformLocation(a,`u_speak`);if(s<0||!c||!l||!u||!d||!f){n.deleteProgram(a),n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i);return}let p=Math.min(window.devicePixelRatio||1,2),m=Math.max(1,Math.round(t*p));return e.width=m,e.height=m,n.viewport(0,0,m,m),n.useProgram(a),n.bindBuffer(n.ARRAY_BUFFER,o),n.bufferData(n.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),n.STATIC_DRAW),n.enableVertexAttribArray(s),n.vertexAttribPointer(s,2,n.FLOAT,!1,0,0),n.uniform2f(c,m,m),{draw(e,t,r,i){n.uniform1f(l,e),n.uniform1f(u,t),n.uniform1f(d,r),n.uniform1f(f,i),n.drawArrays(n.TRIANGLES,0,6)},destroy(){n.deleteProgram(a),n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i)}}}function ue(e){return e!==`idle`&&e!==`connecting`&&e!==`error`}function de({active:e}){return(0,t.jsx)(`svg`,{"aria-hidden":`true`,fill:`none`,viewBox:`0 0 24 24`,style:{display:`block`,width:`50%`,height:`50%`,transform:`rotate(${e?132:-8}deg)`,transformOrigin:`center`,transition:`transform 180ms ease`},children:(0,t.jsx)(`path`,{d:`M6.7 3.8 9.1 7a1.6 1.6 0 0 1-.2 2.1l-1.4 1.3a13.1 13.1 0 0 0 6.1 6.1l1.3-1.4a1.6 1.6 0 0 1 2.1-.2l3.2 2.4a1.6 1.6 0 0 1 .5 1.9l-.7 1.7c-.3.8-1.1 1.3-2 1.2C9.7 21.2 2.8 14.3 1.9 6c-.1-.9.4-1.7 1.2-2l1.7-.7a1.6 1.6 0 0 1 1.9.5Z`,fill:`currentColor`})})}function fe({state:n,volume:r,size:i,className:a,style:o,disabled:s=!1,interactive:c=!1,onClick:l,...u}){let d=(0,e.useRef)(null),f=(0,e.useRef)(n),p=(0,e.useRef)(r),m=(0,e.useRef)(!1);re(()=>{f.current=n,p.current=r},[n,r]);let h=i*se,g=h*ce;(0,e.useEffect)(()=>{let e=`orb-radial-keyframes`;if(!document.getElementById(e)){let t=document.createElement(`style`);t.id=e,t.textContent=oe,document.head.appendChild(t)}},[]),(0,e.useEffect)(()=>{let e=d.current;if(!e)return;let t=window.matchMedia(`(prefers-reduced-motion: reduce)`),n=()=>{m.current=t.matches};n(),t.addEventListener(`change`,n);let r=le(e,h),i=0,a=performance.now(),o=0,s=.36,c=.62,l=.15,u=0,g=0,_=0,v=0,y=+(f.current===`speaking`),b=X(p.current),x=f.current===`listening`?b:0,S=f.current===`speaking`?b:0,C=e=>{let t=Math.min((e-a)/1e3,.05);a=e;let n=f.current,d=m.current,h=X(p.current);b=d?0:Z(b,h,h>b?15:7,t);let w=n===`listening`?b:0,T=n===`speaking`?b:0;x=d?0:Z(x,w,w>x?17:7,t),S=d?0:Z(S,T,T>S?12:5,t);let E=.36,D=.62,O=.15;if(n===`connecting`?(E=.42,D=.68,O=.13):n===`listening`?(E=.54+x*.26,D=.78+x*.18,O=.18+x*.04):n===`thinking`?(E=.46,D=.72,O=.16):n===`speaking`&&(E=1.05+S*1.15),!d){s=Z(s,E,3.6,t),c=Z(c,D,3.6,t),l=Z(l,O,3.6,t),y=Z(y,+(n===`speaking`),n===`speaking`?3.8:3,t),o+=t*s,_+=t*c;let e=1.2+S*1.35+Math.sin(o*1.73)*.34+Math.sin(o*.61+.8)*.18;v+=t*Math.max(.65,e);let r=Math.sin(_)*l+Math.sin(_*.47+1.1)*.032,i=Math.sin(v*1.08),a=Math.sin(v*2.47+.9),d=Math.sin(v*.43-.5),f=r+(i*(.13+S*.17)+a*(.035+S*.035)+d*.055-r)*y,p=4.2+y*3,m=p*p,h=2*p;g+=((f-u)*m-g*h)*t,u+=g*t}r?.draw(o,u,x,S),i=requestAnimationFrame(C)};return i=requestAnimationFrame(C),()=>{cancelAnimationFrame(i),t.removeEventListener(`change`,n),r?.destroy()}},[h]);let _=ue(n),v=n===`connecting`,y=h+(c?g*.5:0),b={"--orb-ui-radial-control-surround":`#fff`,width:i,height:i,display:`flex`,alignItems:`center`,justifyContent:`center`,position:`relative`,...o},x=(0,t.jsxs)(`span`,{style:{position:`relative`,display:`block`,width:h,height:y,lineHeight:0},children:[(0,t.jsx)(`canvas`,{ref:d,"aria-hidden":`true`,"data-radial-surface":``,style:{position:`absolute`,left:0,top:0,display:`block`,width:h,height:h,borderRadius:`50%`,background:`conic-gradient(from 12deg, #06358d 0deg, #0b65b5 72deg, #c7f1ef 92deg, #45c2c8 172deg, #06358d 196deg, #0b65b5 254deg, #c7f1ef 278deg, #45c2c8 360deg)`}}),c?(0,t.jsx)(`button`,{...u,type:`button`,"data-radial-control":``,disabled:s,onClick:s?void 0:l,style:{appearance:`none`,WebkitAppearance:`none`,position:`absolute`,left:`50%`,top:h-g*.52,width:g,height:g,display:`flex`,alignItems:`center`,justifyContent:`center`,boxSizing:`border-box`,padding:0,margin:0,border:0,borderRadius:`50%`,background:v?`#9da1aa`:_?`#ef4146`:`#080808`,color:`#fff`,boxShadow:`0 0 0 ${Math.max(3,g*.085)}px var(--orb-ui-radial-control-surround), 0 2px 5px rgba(0, 0, 0, 0.18)`,cursor:s?`not-allowed`:`pointer`,opacity:s?.52:1,transform:`translateX(-50%)`,transition:`background 160ms ease, opacity 160ms ease, transform 160ms ease`,font:`inherit`},children:v?(0,t.jsx)(`span`,{"aria-hidden":`true`,"data-radial-spinner":``,style:{width:`42%`,height:`42%`,boxSizing:`border-box`,border:`${Math.max(1.5,g*.055)}px solid rgba(255, 255, 255, 0.38)`,borderTopColor:`#fff`,borderRightColor:`#fff`,borderRadius:`50%`,animation:`orb-radial-spinner 760ms linear infinite`}}):(0,t.jsx)(de,{active:_})}):null]});return c?(0,t.jsx)(`div`,{className:a,style:b,children:x}):(0,t.jsx)(`div`,{...u,className:a,style:b,children:x})}function $({signal:i,state:a,volume:s,adapter:c,theme:l=`debug`,size:u=200,className:d,style:f,disabled:p=!1,interactive:m=!0,onStart:h,onStop:g,renderTheme:_,...v}){let[y,x]=(0,e.useState)({state:`idle`});(0,e.useEffect)(()=>{if(x({state:`idle`}),c)return c.subscribe(x)},[c]);let S=i??y,C=n(a,i,y),w=r(s,C,S),T=S.inputVolume??0,D=S.outputVolume??0,O=(0,e.useMemo)(()=>({...S,state:C,inputVolume:T,outputVolume:D}),[S,T,D,C]),k=C!==`idle`&&C!==`error`,A=(0,e.useCallback)(()=>{if(!p)return h?h():c?.start?.()},[c,p,h]),j=(0,e.useCallback)(()=>{if(!p)return g?g():c?.stop?.()},[c,p,g]),M=(0,e.useCallback)(()=>k?j():A(),[k,A,j]),N=k?!!(c?.stop||g):!!(c?.start||h),P=m&&N,F=P&&!p?M:void 0,I=v[`aria-label`]??(P?`${k?`Stop`:`Start`} voice session`:void 0),L={...v,"aria-label":I};if(_){let e={...v,type:`button`,disabled:p||!P,onClick:F,"data-orb-ui-state":C,"aria-label":I};return _({state:C,signal:O,inputVolume:T,outputVolume:D,activity:w,size:u,isActive:k,interactive:P,disabled:p,start:A,stop:j,toggle:M,rootProps:{className:d,style:{width:u,height:u,...f},"data-orb-ui-theme":`custom`,"data-orb-ui-state":C},controlProps:e})}let R={state:C,volume:w,size:u,className:d,style:f,disabled:p,...L},z={...R,interactive:P};switch(l){case`circle`:return(0,t.jsx)(b,{...z,onClick:F});case`bars`:return(0,t.jsx)(E,{...z,onClick:F});case`cloud`:return(0,t.jsx)(ne,{...z,onClick:F});case`radial`:return(0,t.jsx)(fe,{...z,onClick:F});default:return(0,t.jsx)(o,{...R,disabled:p||!m,onStart:p||!m?void 0:A,onStop:p||!m?void 0:j})}}exports.Orb=$,exports.VoiceOrb=$;
+`,se=.66,ce=.2;function le(e,t=0,n=1){return Math.min(n,Math.max(t,e))}function X(e,t,n,r){return e+(t-e)*(1-Math.exp(-n*r))}function ue(e,t,n){let r=e.createShader(t);if(r){if(e.shaderSource(r,n),e.compileShader(r),!e.getShaderParameter(r,e.COMPILE_STATUS)){e.deleteShader(r);return}return r}}function de(e,t){let n=e.getContext(`webgl`,{alpha:!0,antialias:!0,premultipliedAlpha:!0});if(!n)return;let r=ue(n,n.VERTEX_SHADER,ie),i=ue(n,n.FRAGMENT_SHADER,ae);if(!r||!i){r&&n.deleteShader(r),i&&n.deleteShader(i);return}let a=n.createProgram(),o=n.createBuffer();if(!a||!o){a&&n.deleteProgram(a),o&&n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i);return}if(n.attachShader(a,r),n.attachShader(a,i),n.linkProgram(a),!n.getProgramParameter(a,n.LINK_STATUS)){n.deleteProgram(a),n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i);return}let s=n.getAttribLocation(a,`a_position`),c=n.getUniformLocation(a,`u_resolution`),l=n.getUniformLocation(a,`u_time`),u=n.getUniformLocation(a,`u_rotation`),d=n.getUniformLocation(a,`u_listen`),f=n.getUniformLocation(a,`u_speak`);if(s<0||!c||!l||!u||!d||!f){n.deleteProgram(a),n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i);return}let p=Math.min(window.devicePixelRatio||1,2),m=Math.max(1,Math.round(t*p));return e.width=m,e.height=m,n.viewport(0,0,m,m),n.useProgram(a),n.bindBuffer(n.ARRAY_BUFFER,o),n.bufferData(n.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),n.STATIC_DRAW),n.enableVertexAttribArray(s),n.vertexAttribPointer(s,2,n.FLOAT,!1,0,0),n.uniform2f(c,m,m),{draw(e,t,r,i){n.uniform1f(l,e),n.uniform1f(u,t),n.uniform1f(d,r),n.uniform1f(f,i),n.drawArrays(n.TRIANGLES,0,6)},destroy(){n.deleteProgram(a),n.deleteBuffer(o),n.deleteShader(r),n.deleteShader(i)}}}function fe(e){return e!==`idle`&&e!==`connecting`&&e!==`error`}function pe({active:e}){return(0,t.jsx)(`svg`,{"aria-hidden":`true`,fill:`none`,viewBox:`0 0 24 24`,style:{display:`block`,width:`50%`,height:`50%`,transform:`rotate(${e?132:-8}deg)`,transformOrigin:`center`,transition:`transform 180ms ease`},children:(0,t.jsx)(`path`,{d:`M6.7 3.8 9.1 7a1.6 1.6 0 0 1-.2 2.1l-1.4 1.3a13.1 13.1 0 0 0 6.1 6.1l1.3-1.4a1.6 1.6 0 0 1 2.1-.2l3.2 2.4a1.6 1.6 0 0 1 .5 1.9l-.7 1.7c-.3.8-1.1 1.3-2 1.2C9.7 21.2 2.8 14.3 1.9 6c-.1-.9.4-1.7 1.2-2l1.7-.7a1.6 1.6 0 0 1 1.9.5Z`,fill:`currentColor`})})}function me({state:n,volume:r,size:i,className:a,style:o,disabled:s=!1,interactive:c=!1,onClick:l,...u}){let d=(0,e.useRef)(null),f=(0,e.useRef)(n),p=(0,e.useRef)(r),m=(0,e.useRef)(!1);re(()=>{f.current=n,p.current=r},[n,r]);let h=i*se,g=h*ce;(0,e.useEffect)(()=>{let e=`orb-radial-keyframes`;if(!document.getElementById(e)){let t=document.createElement(`style`);t.id=e,t.textContent=oe,document.head.appendChild(t)}},[]),(0,e.useEffect)(()=>{let e=d.current;if(!e)return;let t=window.matchMedia(`(prefers-reduced-motion: reduce)`),n=()=>{m.current=t.matches};n(),t.addEventListener(`change`,n);let r=de(e,h),i=0,a=performance.now(),o=0,s=.36,c=.62,l=.15,u=0,g=0,_=0,v=0,y=+(f.current===`speaking`),b=le(p.current),x=f.current===`listening`?b:0,S=f.current===`speaking`?b:0,C=e=>{let t=Math.min((e-a)/1e3,.05);a=e;let n=f.current,d=m.current,h=le(p.current);b=d?0:X(b,h,h>b?15:7,t);let w=n===`listening`?b:0,T=n===`speaking`?b:0;x=d?0:X(x,w,w>x?17:7,t),S=d?0:X(S,T,T>S?12:5,t);let E=.36,D=.62,O=.15;if(n===`connecting`?(E=.42,D=.68,O=.13):n===`listening`?(E=.54+x*.26,D=.78+x*.18,O=.18+x*.04):n===`thinking`?(E=.46,D=.72,O=.16):n===`speaking`&&(E=1.05+S*1.15),!d){s=X(s,E,3.6,t),c=X(c,D,3.6,t),l=X(l,O,3.6,t),y=X(y,+(n===`speaking`),n===`speaking`?3.8:3,t),o+=t*s,_+=t*c;let e=1.2+S*1.35+Math.sin(o*1.73)*.34+Math.sin(o*.61+.8)*.18;v+=t*Math.max(.65,e);let r=Math.sin(_)*l+Math.sin(_*.47+1.1)*.032,i=Math.sin(v*1.08),a=Math.sin(v*2.47+.9),d=Math.sin(v*.43-.5),f=r+(i*(.13+S*.17)+a*(.035+S*.035)+d*.055-r)*y,p=4.2+y*3,m=p*p,h=2*p;g+=((f-u)*m-g*h)*t,u+=g*t}r?.draw(o,u,x,S),i=requestAnimationFrame(C)};return i=requestAnimationFrame(C),()=>{cancelAnimationFrame(i),t.removeEventListener(`change`,n),r?.destroy()}},[h]);let _=fe(n),v=n===`connecting`,y=h+(c?g*.5:0),b={"--orb-ui-radial-control-surround":`#fff`,width:i,height:i,display:`flex`,alignItems:`center`,justifyContent:`center`,position:`relative`,...o},x=(0,t.jsxs)(`span`,{style:{position:`relative`,display:`block`,width:h,height:y,lineHeight:0},children:[(0,t.jsx)(`canvas`,{ref:d,"aria-hidden":`true`,"data-radial-surface":``,style:{position:`absolute`,left:0,top:0,display:`block`,width:h,height:h,borderRadius:`50%`,background:`conic-gradient(from 12deg, #06358d 0deg, #0b65b5 72deg, #c7f1ef 92deg, #45c2c8 172deg, #06358d 196deg, #0b65b5 254deg, #c7f1ef 278deg, #45c2c8 360deg)`}}),c?(0,t.jsx)(`button`,{...u,type:`button`,"data-radial-control":``,disabled:s,onClick:s?void 0:l,style:{appearance:`none`,WebkitAppearance:`none`,position:`absolute`,left:`50%`,top:h-g*.52,width:g,height:g,display:`flex`,alignItems:`center`,justifyContent:`center`,boxSizing:`border-box`,padding:0,margin:0,border:0,borderRadius:`50%`,background:v?`#9da1aa`:_?`#ef4146`:`#080808`,color:`#fff`,boxShadow:`0 0 0 ${Math.max(3,g*.085)}px var(--orb-ui-radial-control-surround), 0 2px 5px rgba(0, 0, 0, 0.18)`,cursor:s?`not-allowed`:`pointer`,opacity:s?.52:1,transform:`translateX(-50%)`,transition:`background 160ms ease, opacity 160ms ease, transform 160ms ease`,font:`inherit`},children:v?(0,t.jsx)(`span`,{"aria-hidden":`true`,"data-radial-spinner":``,style:{width:`42%`,height:`42%`,boxSizing:`border-box`,border:`${Math.max(1.5,g*.055)}px solid rgba(255, 255, 255, 0.38)`,borderTopColor:`#fff`,borderRightColor:`#fff`,borderRadius:`50%`,animation:`orb-radial-spinner 760ms linear infinite`}}):(0,t.jsx)(pe,{active:_})}):null]});return c?(0,t.jsx)(`div`,{className:a,style:b,children:x}):(0,t.jsx)(`div`,{...u,className:a,style:b,children:x})}var he=typeof window<`u`?e.useLayoutEffect:e.useEffect,ge={light:{deep:`#0b4068`,shallow:`#43adca`,foam:`#f6fcfe`,glow:`#ffe4b3`,sky:`#d9ebf4`,horizon:`#a6d6e5`},dark:{deep:`#05182b`,shallow:`#1f7a9c`,foam:`#d6f0f8`,glow:`#b4dcff`,sky:`#0b1a2b`,horizon:`#1c4661`}},_e=`
+attribute vec2 a_position;
+
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`,ve=`
+precision highp float;
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_level;
+uniform float u_swell;
+uniform float u_ripple;
+uniform float u_glow;
+uniform float u_tilt;
+uniform float u_listen;
+uniform float u_speak;
+uniform vec3 u_deep;
+uniform vec3 u_shallow;
+uniform vec3 u_foam;
+uniform vec3 u_light;
+uniform vec3 u_sky;
+uniform vec3 u_horizon;
+
+float swellHeight(float x, float t, float swell) {
+  return swell * (
+    sin(x * 2.1 + t * 0.9) +
+    0.55 * sin(x * 3.7 - t * 0.63 + 1.3) +
+    0.3 * sin(x * 6.3 + t * 1.21 + 2.1)
+  );
+}
+
+float rippleHeight(float x, float t, float ripple) {
+  return ripple * 0.028 * sin(x * 12.0 - t * 5.2) * sin(x * 7.5 + t * 3.7);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  vec2 p = (uv - 0.5) * 2.0;
+  float radius = length(p);
+  float edge = 1.0 - smoothstep(0.985, 1.0, radius);
+
+  if (edge <= 0.0) discard;
+
+  float z = sqrt(max(0.0, 1.0 - radius * radius));
+  vec3 normal = vec3(p, z);
+
+  // The water sits behind a curved glass front: coordinates bend toward the
+  // centre near the rim, so the sea reads as inside a sphere, not painted on.
+  vec2 q = p * (1.0 - 0.22 * (1.0 - z));
+  float c = cos(u_tilt);
+  float s = sin(u_tilt);
+  q = vec2(q.x * c - q.y * s, q.x * s + q.y * c);
+
+  float t = u_time;
+  float front = swellHeight(q.x, t, u_swell) + rippleHeight(q.x, t, u_ripple);
+  float waterline = u_level + front;
+  float d = q.y - waterline;
+  float depth = max(0.0, -d);
+
+  // A second, slower swell further back gives the water a body to look into.
+  float back = swellHeight(q.x * 0.8 + 1.7, t * 0.72, u_swell * 0.8);
+  float backline = u_level - 0.16 + back;
+  float backBand = 1.0 - smoothstep(0.0, 0.06, abs(q.y - backline));
+
+  vec3 water = mix(u_shallow, u_deep, smoothstep(0.0, 1.05, depth));
+  float caustic = sin(q.x * 6.0 + front * 4.0 + t * 0.8) * sin(q.y * 5.0 - t * 0.6 + q.x * 1.5);
+  caustic = pow(max(caustic, 0.0), 3.0) * exp(-depth * 1.6) * (0.28 + u_glow * 0.45);
+  water = mix(water, u_shallow * 1.25, caustic);
+  float shaft = pow(max(sin(q.x * 3.0 + t * 0.27), 0.0), 5.0) * exp(-depth * 2.2);
+  water = mix(water, u_light, shaft * 0.08 * (0.4 + u_glow));
+  water = mix(water, mix(u_shallow, u_foam, 0.3), backBand * 0.14 * step(0.0, -d));
+  water = mix(water, u_deep, exp(-depth * 24.0) * 0.18);
+
+  vec3 air = mix(u_horizon, u_sky, smoothstep(0.0, 0.85, d));
+  float sun = exp(-length(q - vec2(-0.36, 0.58)) * 3.1);
+  air = mix(air, u_light, sun * (0.22 + u_glow * 0.36));
+  air = mix(air, u_light, exp(-max(d, 0.0) * 6.0) * 0.1 * u_glow);
+
+  vec3 color = d < 0.0 ? water : air;
+
+  float foamWidth = 30.0 - u_speak * 10.0;
+  float foam = exp(-abs(d) * foamWidth) * (0.6 + u_speak * 0.35 + u_listen * 0.2);
+  float crest = smoothstep(0.35, 1.0, front / max(u_swell * 1.85, 0.001));
+  foam += crest * exp(-abs(d) * 16.0) * (0.22 + u_speak * 0.3);
+  color = mix(color, u_foam, clamp(foam, 0.0, 0.92));
+
+  // Glass: a Fresnel rim, one soft specular, and a little weight at the bottom.
+  float fresnel = pow(1.0 - z, 2.8);
+  color = mix(color, mix(u_foam, u_light, 0.5), fresnel * 0.32);
+  vec3 lightDir = normalize(vec3(-0.48, 0.7, 0.54));
+  float spec = pow(max(dot(normal, lightDir), 0.0), 48.0);
+  color = mix(color, vec3(1.0), spec * 0.4);
+  color *= 1.0 - 0.18 * smoothstep(0.1, 1.0, -p.y) * (1.0 - z * 0.6);
+
+  // The drawing buffer uses premultiplied alpha. Premultiply the antialiased
+  // perimeter so translucent edge pixels cannot become a bright outline.
+  gl_FragColor = vec4(color * edge, edge);
+}
+`,ye=.72;function Z(e,t=0,n=1){return Math.min(n,Math.max(t,e))}function Q(e,t,n,r){return e+(t-e)*(1-Math.exp(-n*r))}function be(e,t){let n=/^#?([0-9a-f]{6})$/i.exec(e.trim());if(!n)return t;let r=parseInt(n[1],16);return[(r>>16&255)/255,(r>>8&255)/255,(r&255)/255]}function $([e,t,n],r){return`rgba(${Math.round(e*255)}, ${Math.round(t*255)}, ${Math.round(n*255)}, ${r})`}function xe(e,t){let n=ge[e],r=e=>{let r=be(n[e],[0,0,0]),i=t?.[e];return i?be(i,r):r};return{deep:r(`deep`),shallow:r(`shallow`),foam:r(`foam`),glow:r(`glow`),sky:r(`sky`),horizon:r(`horizon`)}}function Se(e,t,n){let r=e.createShader(t);if(r){if(e.shaderSource(r,n),e.compileShader(r),!e.getShaderParameter(r,e.COMPILE_STATUS)){e.deleteShader(r);return}return r}}function Ce(e,t,n){let r=e.getContext(`webgl`,{alpha:!0,antialias:!0,premultipliedAlpha:!0});if(!r)return;let i=Se(r,r.VERTEX_SHADER,_e),a=Se(r,r.FRAGMENT_SHADER,ve);if(!i||!a){i&&r.deleteShader(i),a&&r.deleteShader(a);return}let o=r.createProgram(),s=r.createBuffer();if(!o||!s){o&&r.deleteProgram(o),s&&r.deleteBuffer(s),r.deleteShader(i),r.deleteShader(a);return}if(r.attachShader(o,i),r.attachShader(o,a),r.linkProgram(o),!r.getProgramParameter(o,r.LINK_STATUS)){r.deleteProgram(o),r.deleteBuffer(s),r.deleteShader(i),r.deleteShader(a);return}let c=()=>{r.deleteProgram(o),r.deleteBuffer(s),r.deleteShader(i),r.deleteShader(a)},l=r.getAttribLocation(o,`a_position`),u=e=>r.getUniformLocation(o,e),d={resolution:u(`u_resolution`),time:u(`u_time`),level:u(`u_level`),swell:u(`u_swell`),ripple:u(`u_ripple`),glow:u(`u_glow`),tilt:u(`u_tilt`),listen:u(`u_listen`),speak:u(`u_speak`),deep:u(`u_deep`),shallow:u(`u_shallow`),foam:u(`u_foam`),light:u(`u_light`),sky:u(`u_sky`),horizon:u(`u_horizon`)};if(l<0||Object.values(d).some(e=>!e)){c();return}let f=Math.min(window.devicePixelRatio||1,2),p=Math.max(1,Math.round(t*f));return e.width=p,e.height=p,r.viewport(0,0,p,p),r.useProgram(o),r.bindBuffer(r.ARRAY_BUFFER,s),r.bufferData(r.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),r.STATIC_DRAW),r.enableVertexAttribArray(l),r.vertexAttribPointer(l,2,r.FLOAT,!1,0,0),r.uniform2f(d.resolution,p,p),r.uniform3fv(d.deep,n.deep),r.uniform3fv(d.shallow,n.shallow),r.uniform3fv(d.foam,n.foam),r.uniform3fv(d.light,n.glow),r.uniform3fv(d.sky,n.sky),r.uniform3fv(d.horizon,n.horizon),{draw(e){r.uniform1f(d.time,e.time),r.uniform1f(d.level,e.level),r.uniform1f(d.swell,e.swell),r.uniform1f(d.ripple,e.ripple),r.uniform1f(d.glow,e.glow),r.uniform1f(d.tilt,e.tilt),r.uniform1f(d.listen,e.listen),r.uniform1f(d.speak,e.speak),r.drawArrays(r.TRIANGLES,0,6)},destroy:c}}function we(e,t,n,r){switch(e){case`connecting`:return{swell:.03,speed:.32,glow:.3+.2*Math.sin(r*2.6),tiltAmplitude:.02,levelOffset:0,corona:.4+.2*Math.sin(r*2.6),reach:.38,ringEvery:0,ringStrength:0,ringInward:!1,orbit:0,sweep:1,pulse:.5};case`listening`:return{swell:.045+t*.05,speed:.5+t*.5,glow:.42+t*.5,tiltAmplitude:.03,levelOffset:t*.05,corona:.5+t*.5,reach:.4+t*.45,ringEvery:.75-t*.45,ringStrength:.45+t*.55,ringInward:!0,orbit:0,sweep:0,pulse:.3};case`thinking`:return{swell:.05,speed:.7,glow:.6+.25*Math.sin(r*3.1),tiltAmplitude:.06,levelOffset:.01,corona:.65+.25*Math.sin(r*3.1),reach:.55,ringEvery:0,ringStrength:0,ringInward:!0,orbit:1,sweep:0,pulse:1};case`speaking`:return{swell:.065+n*.12,speed:.9+n*1.1,glow:.6+n*.4,tiltAmplitude:.035,levelOffset:.02+n*.05,corona:.75+n*.25,reach:.6+n*.6,ringEvery:.36-n*.18,ringStrength:.55+n*.45,ringInward:!1,orbit:0,sweep:0,pulse:.2};case`error`:return{swell:.02,speed:.2,glow:.06,tiltAmplitude:.01,levelOffset:-.04,corona:.08,reach:.15,ringEvery:0,ringStrength:0,ringInward:!1,orbit:0,sweep:0,pulse:0};default:return{swell:.036,speed:.36,glow:.28,tiltAmplitude:.028,levelOffset:0,corona:.3,reach:.24,ringEvery:5,ringStrength:.25,ringInward:!1,orbit:0,sweep:0,pulse:.35}}}var Te=.1,Ee=7.5,De=1.6,Oe=2.6,ke=1.25,Ae=1.9,je=6;function Me(){return Array.from({length:je},(e,t)=>({angle:t/je*Math.PI*2,speed:(.9+t%3*.35)*(t%2==0?1:-1),radius:1.14+t%3*.11,size:.03+t%2*.014,wobble:.7+t*.37}))}function Ne(e,t,n,r){let i=e.getContext(`2d`);if(!i)return;let a=Math.min(window.devicePixelRatio||1,2),o=t*Oe;e.width=Math.max(1,Math.round(o*a)),e.height=e.width,i.scale(a,a);let s=o/2,c=t/2,l=r===`dark`?n.glow:n.shallow,u=r===`dark`?n.foam:n.deep,d=r===`dark`?n.shallow:n.deep,f=r===`dark`?1:.75,p=(e,t,n)=>{i.beginPath(),i.arc(e,t,n,0,Math.PI*2)};return{draw(e){i.clearRect(0,0,o,o),i.globalCompositeOperation=r===`dark`?`lighter`:`source-over`;let t=c*(1+e.reach+e.pulse*.04+Math.sin(e.breath)*.02),n=Z(e.corona*(r===`dark`?.85:.7)),a=i.createRadialGradient(s,s,c*.9,s,s,t);a.addColorStop(0,$(l,n)),a.addColorStop(.3,$(l,n*.5)),a.addColorStop(.65,$(l,n*.15)),a.addColorStop(1,$(l,0)),i.fillStyle=a,p(s,s,t),i.fill();let m=Z(e.speak+e.listen*.6);if(m>.01){let e=c*(1.02+m*.5),t=i.createRadialGradient(s,s,c*.95,s,s,e);t.addColorStop(0,$(u,.55*m*f)),t.addColorStop(1,$(u,0)),i.fillStyle=t,p(s,s,e),i.fill()}let h=Z((.3+e.glow*.4+e.speak*.5+e.listen*.4)*f),g=c*(1.08+e.speak*.1),_=i.createRadialGradient(s,s,c*.97,s,s,g);_.addColorStop(0,$(u,h)),_.addColorStop(1,$(u,0)),i.fillStyle=_,p(s,s,c*1.15),i.fill();for(let t of e.rings){let n=Z((e.time-t.born)/Ae),r=1-(1-n)**2.2,a=t.inward?1-r:r,o=c*(1+ke*a),d=Z((t.inward?(1-a)**.6*(1-n**4):(1-n)**1.3)*t.strength);if(d<.005)continue;let m=c*(.03+t.strength*.05)*(1-a*.45);i.lineWidth=m*3.5,i.strokeStyle=$(l,d*.35),p(s,s,o),i.stroke(),i.lineWidth=m,i.strokeStyle=$(u,d*f),p(s,s,o),i.stroke()}if(e.orbit>.01){for(let t of[1.14,1.25,1.36])i.lineWidth=c*.008,i.strokeStyle=$(l,.22*e.orbit*f),p(s,s,c*t),i.stroke();for(let t of e.orbiters){let n=Math.sin(e.time*t.wobble)*.05,r=c*(t.radius+n),a=1.1+e.orbit*1.1,o=t.speed>0?1:-1;for(let n=0;n<18;n+=1){let d=n/18*a,m=t.angle-o*d,h=s+Math.cos(m)*r,g=s+Math.sin(m)*r,_=(1-n/18)**2*e.orbit;i.fillStyle=$(n===0?u:l,Z(_*(n===0?1:.7)*f)),p(h,g,c*t.size*(1-n/18*.7)),i.fill()}let d=c*t.size*5,m=s+Math.cos(t.angle)*r,h=s+Math.sin(t.angle)*r,g=i.createRadialGradient(m,h,0,m,h,d);g.addColorStop(0,$(l,.8*e.orbit)),g.addColorStop(1,$(l,0)),i.fillStyle=g,p(m,h,d),i.fill()}}if(e.sweep>.01){let t=[{orbitRadius:c*1.12,start:e.time*2.4,span:Math.PI*.6,width:.045},{orbitRadius:c*1.26,start:Math.PI-e.time*1.5,span:Math.PI*.35,width:.02}];for(let{orbitRadius:n,start:r,span:a,width:o}of t){let t=i.createConicGradient(r,s,s);t.addColorStop(0,$(u,0)),t.addColorStop(a/(Math.PI*2),$(u,.95*e.sweep*f)),t.addColorStop(a/(Math.PI*2)+.001,$(u,0)),t.addColorStop(1,$(u,0)),i.lineWidth=c*o,i.strokeStyle=t,i.beginPath(),i.arc(s,s,n,r,r+a),i.stroke(),i.lineWidth=c*.01,i.strokeStyle=$(d,.3*e.sweep*f),p(s,s,n),i.stroke()}}}}}function Pe({state:n,volume:r,size:i,scheme:a=`light`,palette:o,className:s,style:c,disabled:l=!1,interactive:u=!1,onClick:d,...f}){let p=(0,e.useRef)(null),m=(0,e.useRef)(null),h=(0,e.useRef)(null),g=(0,e.useRef)(n),_=(0,e.useRef)(r),v=(0,e.useRef)(!1);he(()=>{g.current=n,_.current=r},[n,r]);let y=i*ye,b=xe(a,o),x=JSON.stringify(b);(0,e.useEffect)(()=>{let e=p.current,t=m.current,n=h.current;if(!e||!t||!n)return;let r=JSON.parse(x),i=window.matchMedia(`(prefers-reduced-motion: reduce)`),o=()=>{v.current=i.matches};o(),i.addEventListener(`change`,o);let s=Ce(e,y,r);s||(e.style.background=`linear-gradient(180deg, ${$(r.sky,1)} 0%, ${$(r.horizon,1)} 44%, ${$(r.shallow,1)} 48%, ${$(r.deep,1)} 100%)`);let c=Ne(t,y,r,a),l=0,u=performance.now(),d=0,f=0,b=0,S=0,C=Z(_.current),w=0,T=0,E=.036,D=.36,O=.26,k=.028,A=0,j=.3,M=.24,N=0,P=0,F=.3,I=0,L=0,R=[],z=Me(),B=e=>{let t=Math.min((e-u)/1e3,.05);u=e;let r=g.current,i=v.current,a=Z(_.current);C=i?0:Q(C,a,a>C?14:6,t);let o=r===`listening`?C:0,p=r===`speaking`?C:0;w=Q(w,o,o>w?16:6,t),T=Q(T,p,p>T?11:4.5,t),f+=t;let m=we(r,w,T,f);if(E=Q(E,m.swell,2.4,t),D=Q(D,m.speed,2.4,t),O=Q(O,m.glow,3.2,t),k=Q(k,m.tiltAmplitude,1.8,t),A=Q(A,m.levelOffset,3,t),j=Q(j,m.corona,m.corona>j?6:2.5,t),M=Q(M,m.reach,m.reach>M?7:2.5,t),N=Q(N,m.orbit,3,t),P=Q(P,m.sweep,3,t),F=Q(F,m.pulse,2.5,t),!i){d+=t*D,b+=t*Math.PI*2/Ee,S+=t*.31,I+=t*Math.PI*2/De;for(let e of z)e.angle+=t*e.speed*(.6+N*.9);for(L+=t,m.ringEvery>0&&(r!==`speaking`||T>.04)&&(r!==`listening`||w>.03)&&L>=m.ringEvery&&(L=0,R.push({born:f,strength:m.ringStrength,inward:m.ringInward}));R.length>0&&f-R[0].born>Ae;)R.shift()}let h=Te+A+Math.sin(b)*.022,y=Math.sin(S)*k+Math.sin(S*2.3+.7)*.006;s?.draw({time:d,level:h,swell:i?.012:E,ripple:i?0:w,glow:O,tilt:i?0:y,listen:w,speak:T});let x=(.5+.5*Math.sin(I))*F,V=1+T*.09+w*.04+x*.022+Math.sin(b)*.006;n.style.transform=i?`none`:`scale(${V})`,c?.draw({time:f,corona:i?j*.6:j,reach:M,glow:O,speak:T,listen:w,orbit:i?0:N,sweep:i?0:P,pulse:x,breath:b,rings:i?[]:R,orbiters:z}),l=requestAnimationFrame(B)};return l=requestAnimationFrame(B),()=>{cancelAnimationFrame(l),i.removeEventListener(`change`,o),s?.destroy()}},[y,x,a]);let S={width:i,height:i,display:`flex`,alignItems:`center`,justifyContent:`center`,position:`relative`,...c},C=y*Oe,w=(0,t.jsxs)(`span`,{ref:h,style:{position:`relative`,display:`block`,width:y,height:y,borderRadius:`50%`,lineHeight:0,cursor:u?l?`not-allowed`:`pointer`:`default`,transformOrigin:`center`,willChange:`transform`},children:[(0,t.jsx)(`canvas`,{ref:m,"aria-hidden":`true`,"data-ocean-aura":``,style:{position:`absolute`,left:(y-C)/2,top:(y-C)/2,display:`block`,width:C,height:C,pointerEvents:`none`}}),(0,t.jsx)(`canvas`,{ref:p,"aria-hidden":`true`,"data-ocean-surface":``,style:{position:`absolute`,inset:0,display:`block`,width:y,height:y,borderRadius:`50%`,boxShadow:`0 ${y*.06}px ${y*.22}px ${$(b.deep,a===`dark`?.55:.28)}`}})]});return u?(0,t.jsx)(`button`,{...f,type:`button`,className:s,disabled:l,onClick:l?void 0:d,style:{appearance:`none`,WebkitAppearance:`none`,border:0,padding:0,margin:0,background:`transparent`,color:`inherit`,font:`inherit`,cursor:l?`not-allowed`:`pointer`,...S},children:w}):(0,t.jsx)(`div`,{...f,className:s,style:S,children:w})}function Fe({signal:i,state:a,volume:s,adapter:c,theme:l=`debug`,size:u=200,scheme:d,palette:f,className:p,style:m,disabled:h=!1,interactive:g=!0,onStart:_,onStop:v,renderTheme:y,...x}){let[S,C]=(0,e.useState)({state:`idle`});(0,e.useEffect)(()=>{if(C({state:`idle`}),c)return c.subscribe(C)},[c]);let w=i??S,T=n(a,i,S),D=r(s,T,w),O=w.inputVolume??0,k=w.outputVolume??0,A=(0,e.useMemo)(()=>({...w,state:T,inputVolume:O,outputVolume:k}),[w,O,k,T]),j=T!==`idle`&&T!==`error`,M=(0,e.useCallback)(()=>{if(!h)return _?_():c?.start?.()},[c,h,_]),N=(0,e.useCallback)(()=>{if(!h)return v?v():c?.stop?.()},[c,h,v]),P=(0,e.useCallback)(()=>j?N():M(),[j,M,N]),F=j?!!(c?.stop||v):!!(c?.start||_),I=g&&F,L=I&&!h?P:void 0,R=x[`aria-label`]??(I?`${j?`Stop`:`Start`} voice session`:void 0),z={...x,"aria-label":R};if(y){let e={...x,type:`button`,disabled:h||!I,onClick:L,"data-orb-ui-state":T,"aria-label":R};return y({state:T,signal:A,inputVolume:O,outputVolume:k,activity:D,size:u,isActive:j,interactive:I,disabled:h,start:M,stop:N,toggle:P,rootProps:{className:p,style:{width:u,height:u,...m},"data-orb-ui-theme":`custom`,"data-orb-ui-state":T},controlProps:e})}let B={state:T,volume:D,size:u,className:p,style:m,disabled:h,...z},V={...B,interactive:I};switch(l){case`circle`:return(0,t.jsx)(b,{...V,onClick:L});case`bars`:return(0,t.jsx)(E,{...V,onClick:L});case`cloud`:return(0,t.jsx)(ne,{...V,onClick:L});case`radial`:return(0,t.jsx)(me,{...V,onClick:L});case`ocean`:return(0,t.jsx)(Pe,{...V,scheme:d,palette:f,onClick:L});default:return(0,t.jsx)(o,{...B,disabled:h||!g,onStart:h||!g?void 0:M,onStop:h||!g?void 0:N})}}exports.Orb=Fe,exports.VoiceOrb=Fe;

package/dist/orb-ui.js

@@ -482,17 +482,17 @@ function K(e, t, n, r) {
 function ie(e) {
 	return 1 - (1 - e) ** 3;
 }
-function q(e, t, n) {
+function ae(e, t, n) {
 	return e + (t - e) * n;
 }
-function J(e, t, n) {
+function oe(e, t, n) {
 	let r = G((e - t) / (n - t));
 	return r * r * (3 - 2 * r);
 }
-function Y(e) {
+function q(e) {
 	return e === "listening" || e === "speaking" || e === "thinking";
 }
-function X(e, t, n) {
+function se(e, t, n) {
 	let r = e.createShader(t);
 	if (r) {
 		if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
@@ -502,14 +502,14 @@ function X(e, t, n) {
 		return r;
 	}
 }
-function ae(e, t) {
+function ce(e, t) {
 	let n = e.getContext("webgl", {
 		alpha: !0,
 		antialias: !0,
 		premultipliedAlpha: !0
 	});
 	if (!n) return;
-	let r = X(n, n.VERTEX_SHADER, P), i = X(n, n.FRAGMENT_SHADER, F);
+	let r = se(n, n.VERTEX_SHADER, P), i = se(n, n.FRAGMENT_SHADER, F);
 	if (!r || !i) {
 		r && n.deleteShader(r), i && n.deleteShader(i);
 		return;
@@ -551,13 +551,13 @@ function ae(e, t) {
 		}
 	};
 }
-function oe(e) {
+function le(e) {
 	if (e <= H) return z;
-	if (e <= 480) return q(z, V, ie((e - H) / U));
+	if (e <= 480) return ae(z, V, ie((e - H) / U));
 	let t = e - H - U;
 	return t >= W ? 1 : 1 + .17799999999999994 * (1 - G(t / W)) ** 2;
 }
-function se({ state: e, volume: n, size: r, className: a, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
+function ue({ state: e, volume: n, size: r, className: a, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
 	let p = i(null), m = i(null), h = i(null), g = i(e), _ = i(n), v = i(u), y = i(!1);
 	N(() => {
 		g.current = e, _.current = n, v.current = u;
@@ -574,20 +574,20 @@ function se({ state: e, volume: n, size: r, className: a, style: c, disabled: l
 			y.current = r.matches;
 		};
 		i(), r.addEventListener("change", i);
-		let a = ae(e, b);
+		let a = ce(e, b);
 		a || (e.style.background = "linear-gradient(180deg, #626afb 2%, #8f9dfb 32%, #dde6fd 52%, #c9d3fb 84%)");
-		let o = 0, s = performance.now(), c = g.current, l = Y(c) ? s : void 0, u = G(_.current), d = 1, f = +!!Y(c), x = 1, S = +(c === "connecting"), C = 0, w = (r) => {
+		let o = 0, s = performance.now(), c = g.current, l = q(c) ? s : void 0, u = G(_.current), d = 1, f = +!!q(c), x = 1, S = +(c === "connecting"), C = 0, w = (r) => {
 			let i = Math.min((r - s) / 1e3, .05);
 			s = r;
 			let p = g.current, m = y.current;
-			p !== c && (Y(p) && !Y(c) && (l = r), (p === "idle" || p === "error") && (l = void 0), c = p);
+			p !== c && (q(p) && !q(c) && (l = r), (p === "idle" || p === "error") && (l = void 0), c = p);
 			let h = G(_.current);
 			u = m ? 0 : K(u, h, h > u ? 11 : 6, i);
 			let b = 1;
 			p === "listening" && (b = 1 - u * L), p === "speaking" && (b = 1 + u * R);
 			let T = Math.abs(b - 1) > Math.abs(d - 1) ? 12 : 6;
 			d = m ? 1 : K(d, b, T, i);
-			let E = Y(p), D = p === "idle" && v.current, O = E || D ? 1 : 0;
+			let E = q(p), D = p === "idle" && v.current, O = E || D ? 1 : 0;
 			f = m ? O : K(f, O, 14, i);
 			let k = E || D ? 1 : .92;
 			x = m ? k : K(x, k, 12, i);
@@ -595,8 +595,8 @@ function se({ state: e, volume: n, size: r, className: a, style: c, disabled: l
 			D && (A = z);
 			let j = +!D, M = D ? f : 0;
 			if (E && l !== void 0 && !m) {
-				let e = r - l, t = oe(e), n = G((e - H - U) / W);
-				A = t * q(1, d, n), j = J(e, ee, te), M = f * (1 - J(e, ne, re)), e >= 1830 && (l = void 0);
+				let e = r - l, t = le(e), n = G((e - H - U) / W);
+				A = t * ae(1, d, n), j = oe(e, ee, te), M = f * (1 - oe(e, ne, re)), e >= 1830 && (l = void 0);
 			}
 			let N = +(p === "connecting");
 			S = m ? N : K(S, N, 18, i), e.style.opacity = String(f * j), e.style.transform = `scale(${A})`, t.style.opacity = String(M), t.style.transform = `scale(${A})`, n.style.opacity = String(S), n.style.transform = `rotate(${m ? 45 : r * .34}deg)`;
@@ -710,14 +710,14 @@ function se({ state: e, volume: n, size: r, className: a, style: c, disabled: l
 }
 //#endregion
 //#region src/themes/radial/RadialTheme.tsx
-var ce = typeof window < "u" ? n : t, le = "\nattribute vec2 a_position;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", ue = "\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_rotation;\nuniform float u_listen;\nuniform float u_speak;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 p = (uv - 0.5) * 2.0;\n  float radius = length(p);\n  float edge = 1.0 - smoothstep(0.993, 1.0, radius);\n\n  if (edge <= 0.0) discard;\n\n  float angle = atan(p.y, p.x);\n  float warpStrength = 0.026 + u_speak * 0.105;\n  float angularWarp =\n    sin(angle * 3.0 - u_time * 0.54 + radius * 2.1) +\n    0.48 * sin(angle * 5.0 + u_time * 0.31 - radius * 3.7) +\n    0.22 * sin(angle * 8.0 - u_time * 0.19 + radius * 5.2);\n  float phase =\n    angle - 1.78 - u_rotation + angularWarp * warpStrength * (0.2 + radius * 0.8);\n\n  // Two opposing dark lobes and two opposing aqua lobes form the main pinwheel.\n  float lobeField = cos(phase * 2.0);\n  float darkMix = smoothstep(-0.04, 0.38, lobeField);\n\n  vec3 deepBlue = vec3(0.004, 0.105, 0.37);\n  vec3 cobalt = vec3(0.015, 0.34, 0.76);\n  vec3 aqua = vec3(0.24, 0.76, 0.79);\n  vec3 paleAqua = vec3(0.77, 0.96, 0.95);\n\n  float radialLight = 0.5 + 0.5 * sin(radius * 3.0 - u_time * 0.16);\n  vec3 darkColor = mix(cobalt, deepBlue, 0.42 + 0.38 * radius);\n  float darkRay = pow(max(lobeField, 0.0), 11.0);\n  darkColor = mix(darkColor, aqua, darkRay * (0.18 + radialLight * 0.16));\n\n  vec3 lightColor = mix(paleAqua, aqua, 0.5 + 0.2 * sin(radius * 3.4 + phase * 2.0));\n  float lightRay = pow(max(-lobeField, 0.0), 5.0);\n  lightColor = mix(lightColor, vec3(0.04, 0.42, 0.64), lightRay * 0.28);\n\n  vec3 color = mix(lightColor, darkColor, darkMix);\n\n  // Soft secondary streaks make each of the four lobes feel layered rather than flat.\n  float secondaryRay = 0.5 + 0.5 * sin(phase * 6.0 + radius * 1.8 - u_time * 0.42);\n  float rayStrength = (0.055 + u_speak * 0.045) * (0.25 + radius * 0.75);\n  color = mix(color, vec3(0.26, 0.76, 0.8), secondaryRay * rayStrength);\n\n  // The outer membrane keeps a circular perimeter while independent traveling waves\n  // continuously reshape its inner boundary.\n  float rimWave =\n    0.063 * sin(angle * 3.0 + u_time * 1.34) +\n    0.036 * sin(angle * 5.0 - u_time * 0.91 + 1.4) +\n    0.021 * sin(angle * 7.0 + u_time * 0.63 - 0.8) +\n    0.012 * sin(angle * 11.0 - u_time * 1.72 + sin(angle * 2.0 + u_time * 0.58));\n  rimWave *= 1.0 + u_listen * 0.38;\n  float rimInner = 0.82 + rimWave - u_listen * 0.2;\n  float rim = smoothstep(rimInner - 0.02, rimInner + 0.015, radius);\n  float rimStrength = rim * (0.3 + u_listen * 0.3);\n  vec3 membrane = mix(\n    vec3(0.47, 0.84, 0.84),\n    vec3(0.76, 0.93, 0.92),\n    smoothstep(0.78, 1.0, radius)\n  );\n  color = mix(color, membrane, clamp(rimStrength, 0.0, 0.72));\n\n  // Only one transition direction becomes a bright seam, producing two opposing ribbons.\n  float seamDirection = max(0.0, -sin(phase * 2.0));\n  float seamExponent = mix(30.0, 3.2, smoothstep(0.05, 1.0, radius));\n  float seam = pow(seamDirection, seamExponent) * (0.78 + radius * 0.25);\n  color = mix(color, vec3(0.985, 0.995, 0.995), clamp(seam, 0.0, 0.96));\n\n  // The drawing buffer uses premultiplied alpha. Premultiply the antialiased\n  // perimeter so translucent edge pixels cannot become a bright outline.\n  gl_FragColor = vec4(color * edge, edge);\n}\n", de = "\n@keyframes orb-radial-spinner {\n  to { transform: rotate(360deg); }\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-radial-spinner] { animation: none !important; }\n}\n", fe = .66, pe = .2;
-function Z(e, t = 0, n = 1) {
+var de = typeof window < "u" ? n : t, fe = "\nattribute vec2 a_position;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", pe = "\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_rotation;\nuniform float u_listen;\nuniform float u_speak;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 p = (uv - 0.5) * 2.0;\n  float radius = length(p);\n  float edge = 1.0 - smoothstep(0.993, 1.0, radius);\n\n  if (edge <= 0.0) discard;\n\n  float angle = atan(p.y, p.x);\n  float warpStrength = 0.026 + u_speak * 0.105;\n  float angularWarp =\n    sin(angle * 3.0 - u_time * 0.54 + radius * 2.1) +\n    0.48 * sin(angle * 5.0 + u_time * 0.31 - radius * 3.7) +\n    0.22 * sin(angle * 8.0 - u_time * 0.19 + radius * 5.2);\n  float phase =\n    angle - 1.78 - u_rotation + angularWarp * warpStrength * (0.2 + radius * 0.8);\n\n  // Two opposing dark lobes and two opposing aqua lobes form the main pinwheel.\n  float lobeField = cos(phase * 2.0);\n  float darkMix = smoothstep(-0.04, 0.38, lobeField);\n\n  vec3 deepBlue = vec3(0.004, 0.105, 0.37);\n  vec3 cobalt = vec3(0.015, 0.34, 0.76);\n  vec3 aqua = vec3(0.24, 0.76, 0.79);\n  vec3 paleAqua = vec3(0.77, 0.96, 0.95);\n\n  float radialLight = 0.5 + 0.5 * sin(radius * 3.0 - u_time * 0.16);\n  vec3 darkColor = mix(cobalt, deepBlue, 0.42 + 0.38 * radius);\n  float darkRay = pow(max(lobeField, 0.0), 11.0);\n  darkColor = mix(darkColor, aqua, darkRay * (0.18 + radialLight * 0.16));\n\n  vec3 lightColor = mix(paleAqua, aqua, 0.5 + 0.2 * sin(radius * 3.4 + phase * 2.0));\n  float lightRay = pow(max(-lobeField, 0.0), 5.0);\n  lightColor = mix(lightColor, vec3(0.04, 0.42, 0.64), lightRay * 0.28);\n\n  vec3 color = mix(lightColor, darkColor, darkMix);\n\n  // Soft secondary streaks make each of the four lobes feel layered rather than flat.\n  float secondaryRay = 0.5 + 0.5 * sin(phase * 6.0 + radius * 1.8 - u_time * 0.42);\n  float rayStrength = (0.055 + u_speak * 0.045) * (0.25 + radius * 0.75);\n  color = mix(color, vec3(0.26, 0.76, 0.8), secondaryRay * rayStrength);\n\n  // The outer membrane keeps a circular perimeter while independent traveling waves\n  // continuously reshape its inner boundary.\n  float rimWave =\n    0.063 * sin(angle * 3.0 + u_time * 1.34) +\n    0.036 * sin(angle * 5.0 - u_time * 0.91 + 1.4) +\n    0.021 * sin(angle * 7.0 + u_time * 0.63 - 0.8) +\n    0.012 * sin(angle * 11.0 - u_time * 1.72 + sin(angle * 2.0 + u_time * 0.58));\n  rimWave *= 1.0 + u_listen * 0.38;\n  float rimInner = 0.82 + rimWave - u_listen * 0.2;\n  float rim = smoothstep(rimInner - 0.02, rimInner + 0.015, radius);\n  float rimStrength = rim * (0.3 + u_listen * 0.3);\n  vec3 membrane = mix(\n    vec3(0.47, 0.84, 0.84),\n    vec3(0.76, 0.93, 0.92),\n    smoothstep(0.78, 1.0, radius)\n  );\n  color = mix(color, membrane, clamp(rimStrength, 0.0, 0.72));\n\n  // Only one transition direction becomes a bright seam, producing two opposing ribbons.\n  float seamDirection = max(0.0, -sin(phase * 2.0));\n  float seamExponent = mix(30.0, 3.2, smoothstep(0.05, 1.0, radius));\n  float seam = pow(seamDirection, seamExponent) * (0.78 + radius * 0.25);\n  color = mix(color, vec3(0.985, 0.995, 0.995), clamp(seam, 0.0, 0.96));\n\n  // The drawing buffer uses premultiplied alpha. Premultiply the antialiased\n  // perimeter so translucent edge pixels cannot become a bright outline.\n  gl_FragColor = vec4(color * edge, edge);\n}\n", me = "\n@keyframes orb-radial-spinner {\n  to { transform: rotate(360deg); }\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-radial-spinner] { animation: none !important; }\n}\n", he = .66, ge = .2;
+function _e(e, t = 0, n = 1) {
 	return Math.min(n, Math.max(t, e));
 }
-function Q(e, t, n, r) {
+function J(e, t, n, r) {
 	return e + (t - e) * (1 - Math.exp(-n * r));
 }
-function $(e, t, n) {
+function ve(e, t, n) {
 	let r = e.createShader(t);
 	if (r) {
 		if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
@@ -727,14 +727,14 @@ function $(e, t, n) {
 		return r;
 	}
 }
-function me(e, t) {
+function ye(e, t) {
 	let n = e.getContext("webgl", {
 		alpha: !0,
 		antialias: !0,
 		premultipliedAlpha: !0
 	});
 	if (!n) return;
-	let r = $(n, n.VERTEX_SHADER, le), i = $(n, n.FRAGMENT_SHADER, ue);
+	let r = ve(n, n.VERTEX_SHADER, fe), i = ve(n, n.FRAGMENT_SHADER, pe);
 	if (!r || !i) {
 		r && n.deleteShader(r), i && n.deleteShader(i);
 		return;
@@ -776,10 +776,10 @@ function me(e, t) {
 		}
 	};
 }
-function he(e) {
+function be(e) {
 	return e !== "idle" && e !== "connecting" && e !== "error";
 }
-function ge({ active: e }) {
+function xe({ active: e }) {
 	return /* @__PURE__ */ o("svg", {
 		"aria-hidden": "true",
 		fill: "none",
@@ -798,17 +798,17 @@ function ge({ active: e }) {
 		})
 	});
 }
-function _e({ state: e, volume: n, size: r, className: a, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
+function Se({ state: e, volume: n, size: r, className: a, style: c, disabled: l = !1, interactive: u = !1, onClick: d, ...f }) {
 	let p = i(null), m = i(e), h = i(n), g = i(!1);
-	ce(() => {
+	de(() => {
 		m.current = e, h.current = n;
 	}, [e, n]);
-	let _ = r * fe, v = _ * pe;
+	let _ = r * he, v = _ * ge;
 	t(() => {
 		let e = "orb-radial-keyframes";
 		if (!document.getElementById(e)) {
 			let t = document.createElement("style");
-			t.id = e, t.textContent = de, document.head.appendChild(t);
+			t.id = e, t.textContent = me, document.head.appendChild(t);
 		}
 	}, []), t(() => {
 		let e = p.current;
@@ -817,16 +817,16 @@ function _e({ state: e, volume: n, size: r, className: a, style: c, disabled: l
 			g.current = t.matches;
 		};
 		n(), t.addEventListener("change", n);
-		let r = me(e, _), i = 0, a = performance.now(), o = 0, s = .36, c = .62, l = .15, u = 0, d = 0, f = 0, v = 0, y = +(m.current === "speaking"), b = Z(h.current), x = m.current === "listening" ? b : 0, S = m.current === "speaking" ? b : 0, C = (e) => {
+		let r = ye(e, _), i = 0, a = performance.now(), o = 0, s = .36, c = .62, l = .15, u = 0, d = 0, f = 0, v = 0, y = +(m.current === "speaking"), b = _e(h.current), x = m.current === "listening" ? b : 0, S = m.current === "speaking" ? b : 0, C = (e) => {
 			let t = Math.min((e - a) / 1e3, .05);
 			a = e;
-			let n = m.current, p = g.current, _ = Z(h.current);
-			b = p ? 0 : Q(b, _, _ > b ? 15 : 7, t);
+			let n = m.current, p = g.current, _ = _e(h.current);
+			b = p ? 0 : J(b, _, _ > b ? 15 : 7, t);
 			let w = n === "listening" ? b : 0, T = n === "speaking" ? b : 0;
-			x = p ? 0 : Q(x, w, w > x ? 17 : 7, t), S = p ? 0 : Q(S, T, T > S ? 12 : 5, t);
+			x = p ? 0 : J(x, w, w > x ? 17 : 7, t), S = p ? 0 : J(S, T, T > S ? 12 : 5, t);
 			let E = .36, D = .62, O = .15;
 			if (n === "connecting" ? (E = .42, D = .68, O = .13) : n === "listening" ? (E = .54 + x * .26, D = .78 + x * .18, O = .18 + x * .04) : n === "thinking" ? (E = .46, D = .72, O = .16) : n === "speaking" && (E = 1.05 + S * 1.15), !p) {
-				s = Q(s, E, 3.6, t), c = Q(c, D, 3.6, t), l = Q(l, O, 3.6, t), y = Q(y, +(n === "speaking"), n === "speaking" ? 3.8 : 3, t), o += t * s, f += t * c;
+				s = J(s, E, 3.6, t), c = J(c, D, 3.6, t), l = J(l, O, 3.6, t), y = J(y, +(n === "speaking"), n === "speaking" ? 3.8 : 3, t), o += t * s, f += t * c;
 				let e = 1.2 + S * 1.35 + Math.sin(o * 1.73) * .34 + Math.sin(o * .61 + .8) * .18;
 				v += t * Math.max(.65, e);
 				let r = Math.sin(f) * l + Math.sin(f * .47 + 1.1) * .032, i = Math.sin(v * 1.08), a = Math.sin(v * 2.47 + .9), p = Math.sin(v * .43 - .5), m = r + (i * (.13 + S * .17) + a * (.035 + S * .035) + p * .055 - r) * y, h = 4.2 + y * 3, g = h * h, _ = 2 * h;
@@ -838,7 +838,7 @@ function _e({ state: e, volume: n, size: r, className: a, style: c, disabled: l
 			cancelAnimationFrame(i), t.removeEventListener("change", n), r?.destroy();
 		};
 	}, [_]);
-	let y = he(e), b = e === "connecting", x = _ + (u ? v * .5 : 0), S = {
+	let y = be(e), b = e === "connecting", x = _ + (u ? v * .5 : 0), S = {
 		"--orb-ui-radial-control-surround": "#fff",
 		width: r,
 		height: r,
@@ -913,7 +913,7 @@ function _e({ state: e, volume: n, size: r, className: a, style: c, disabled: l
 					borderRadius: "50%",
 					animation: "orb-radial-spinner 760ms linear infinite"
 				}
-			}) : /* @__PURE__ */ o(ge, { active: y })
+			}) : /* @__PURE__ */ o(xe, { active: y })
 		}) : null]
 	});
 	return u ? /* @__PURE__ */ o("div", {
@@ -928,113 +928,557 @@ function _e({ state: e, volume: n, size: r, className: a, style: c, disabled: l
 	});
 }
 //#endregion
+//#region src/themes/ocean/OceanTheme.tsx
+var Ce = typeof window < "u" ? n : t, we = {
+	light: {
+		deep: "#0b4068",
+		shallow: "#43adca",
+		foam: "#f6fcfe",
+		glow: "#ffe4b3",
+		sky: "#d9ebf4",
+		horizon: "#a6d6e5"
+	},
+	dark: {
+		deep: "#05182b",
+		shallow: "#1f7a9c",
+		foam: "#d6f0f8",
+		glow: "#b4dcff",
+		sky: "#0b1a2b",
+		horizon: "#1c4661"
+	}
+}, Te = "\nattribute vec2 a_position;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", Ee = "\nprecision highp float;\n\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_level;\nuniform float u_swell;\nuniform float u_ripple;\nuniform float u_glow;\nuniform float u_tilt;\nuniform float u_listen;\nuniform float u_speak;\nuniform vec3 u_deep;\nuniform vec3 u_shallow;\nuniform vec3 u_foam;\nuniform vec3 u_light;\nuniform vec3 u_sky;\nuniform vec3 u_horizon;\n\nfloat swellHeight(float x, float t, float swell) {\n  return swell * (\n    sin(x * 2.1 + t * 0.9) +\n    0.55 * sin(x * 3.7 - t * 0.63 + 1.3) +\n    0.3 * sin(x * 6.3 + t * 1.21 + 2.1)\n  );\n}\n\nfloat rippleHeight(float x, float t, float ripple) {\n  return ripple * 0.028 * sin(x * 12.0 - t * 5.2) * sin(x * 7.5 + t * 3.7);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 p = (uv - 0.5) * 2.0;\n  float radius = length(p);\n  float edge = 1.0 - smoothstep(0.985, 1.0, radius);\n\n  if (edge <= 0.0) discard;\n\n  float z = sqrt(max(0.0, 1.0 - radius * radius));\n  vec3 normal = vec3(p, z);\n\n  // The water sits behind a curved glass front: coordinates bend toward the\n  // centre near the rim, so the sea reads as inside a sphere, not painted on.\n  vec2 q = p * (1.0 - 0.22 * (1.0 - z));\n  float c = cos(u_tilt);\n  float s = sin(u_tilt);\n  q = vec2(q.x * c - q.y * s, q.x * s + q.y * c);\n\n  float t = u_time;\n  float front = swellHeight(q.x, t, u_swell) + rippleHeight(q.x, t, u_ripple);\n  float waterline = u_level + front;\n  float d = q.y - waterline;\n  float depth = max(0.0, -d);\n\n  // A second, slower swell further back gives the water a body to look into.\n  float back = swellHeight(q.x * 0.8 + 1.7, t * 0.72, u_swell * 0.8);\n  float backline = u_level - 0.16 + back;\n  float backBand = 1.0 - smoothstep(0.0, 0.06, abs(q.y - backline));\n\n  vec3 water = mix(u_shallow, u_deep, smoothstep(0.0, 1.05, depth));\n  float caustic = sin(q.x * 6.0 + front * 4.0 + t * 0.8) * sin(q.y * 5.0 - t * 0.6 + q.x * 1.5);\n  caustic = pow(max(caustic, 0.0), 3.0) * exp(-depth * 1.6) * (0.28 + u_glow * 0.45);\n  water = mix(water, u_shallow * 1.25, caustic);\n  float shaft = pow(max(sin(q.x * 3.0 + t * 0.27), 0.0), 5.0) * exp(-depth * 2.2);\n  water = mix(water, u_light, shaft * 0.08 * (0.4 + u_glow));\n  water = mix(water, mix(u_shallow, u_foam, 0.3), backBand * 0.14 * step(0.0, -d));\n  water = mix(water, u_deep, exp(-depth * 24.0) * 0.18);\n\n  vec3 air = mix(u_horizon, u_sky, smoothstep(0.0, 0.85, d));\n  float sun = exp(-length(q - vec2(-0.36, 0.58)) * 3.1);\n  air = mix(air, u_light, sun * (0.22 + u_glow * 0.36));\n  air = mix(air, u_light, exp(-max(d, 0.0) * 6.0) * 0.1 * u_glow);\n\n  vec3 color = d < 0.0 ? water : air;\n\n  float foamWidth = 30.0 - u_speak * 10.0;\n  float foam = exp(-abs(d) * foamWidth) * (0.6 + u_speak * 0.35 + u_listen * 0.2);\n  float crest = smoothstep(0.35, 1.0, front / max(u_swell * 1.85, 0.001));\n  foam += crest * exp(-abs(d) * 16.0) * (0.22 + u_speak * 0.3);\n  color = mix(color, u_foam, clamp(foam, 0.0, 0.92));\n\n  // Glass: a Fresnel rim, one soft specular, and a little weight at the bottom.\n  float fresnel = pow(1.0 - z, 2.8);\n  color = mix(color, mix(u_foam, u_light, 0.5), fresnel * 0.32);\n  vec3 lightDir = normalize(vec3(-0.48, 0.7, 0.54));\n  float spec = pow(max(dot(normal, lightDir), 0.0), 48.0);\n  color = mix(color, vec3(1.0), spec * 0.4);\n  color *= 1.0 - 0.18 * smoothstep(0.1, 1.0, -p.y) * (1.0 - z * 0.6);\n\n  // The drawing buffer uses premultiplied alpha. Premultiply the antialiased\n  // perimeter so translucent edge pixels cannot become a bright outline.\n  gl_FragColor = vec4(color * edge, edge);\n}\n", De = .72;
+function Y(e, t = 0, n = 1) {
+	return Math.min(n, Math.max(t, e));
+}
+function X(e, t, n, r) {
+	return e + (t - e) * (1 - Math.exp(-n * r));
+}
+function Oe(e, t) {
+	let n = /^#?([0-9a-f]{6})$/i.exec(e.trim());
+	if (!n) return t;
+	let r = parseInt(n[1], 16);
+	return [
+		(r >> 16 & 255) / 255,
+		(r >> 8 & 255) / 255,
+		(r & 255) / 255
+	];
+}
+function Z([e, t, n], r) {
+	return `rgba(${Math.round(e * 255)}, ${Math.round(t * 255)}, ${Math.round(n * 255)}, ${r})`;
+}
+function ke(e, t) {
+	let n = we[e], r = (e) => {
+		let r = Oe(n[e], [
+			0,
+			0,
+			0
+		]), i = t?.[e];
+		return i ? Oe(i, r) : r;
+	};
+	return {
+		deep: r("deep"),
+		shallow: r("shallow"),
+		foam: r("foam"),
+		glow: r("glow"),
+		sky: r("sky"),
+		horizon: r("horizon")
+	};
+}
+function Ae(e, t, n) {
+	let r = e.createShader(t);
+	if (r) {
+		if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
+			e.deleteShader(r);
+			return;
+		}
+		return r;
+	}
+}
+function je(e, t, n) {
+	let r = e.getContext("webgl", {
+		alpha: !0,
+		antialias: !0,
+		premultipliedAlpha: !0
+	});
+	if (!r) return;
+	let i = Ae(r, r.VERTEX_SHADER, Te), a = Ae(r, r.FRAGMENT_SHADER, Ee);
+	if (!i || !a) {
+		i && r.deleteShader(i), a && r.deleteShader(a);
+		return;
+	}
+	let o = r.createProgram(), s = r.createBuffer();
+	if (!o || !s) {
+		o && r.deleteProgram(o), s && r.deleteBuffer(s), r.deleteShader(i), r.deleteShader(a);
+		return;
+	}
+	if (r.attachShader(o, i), r.attachShader(o, a), r.linkProgram(o), !r.getProgramParameter(o, r.LINK_STATUS)) {
+		r.deleteProgram(o), r.deleteBuffer(s), r.deleteShader(i), r.deleteShader(a);
+		return;
+	}
+	let c = () => {
+		r.deleteProgram(o), r.deleteBuffer(s), r.deleteShader(i), r.deleteShader(a);
+	}, l = r.getAttribLocation(o, "a_position"), u = (e) => r.getUniformLocation(o, e), d = {
+		resolution: u("u_resolution"),
+		time: u("u_time"),
+		level: u("u_level"),
+		swell: u("u_swell"),
+		ripple: u("u_ripple"),
+		glow: u("u_glow"),
+		tilt: u("u_tilt"),
+		listen: u("u_listen"),
+		speak: u("u_speak"),
+		deep: u("u_deep"),
+		shallow: u("u_shallow"),
+		foam: u("u_foam"),
+		light: u("u_light"),
+		sky: u("u_sky"),
+		horizon: u("u_horizon")
+	};
+	if (l < 0 || Object.values(d).some((e) => !e)) {
+		c();
+		return;
+	}
+	let f = Math.min(window.devicePixelRatio || 1, 2), p = Math.max(1, Math.round(t * f));
+	return e.width = p, e.height = p, r.viewport(0, 0, p, p), r.useProgram(o), r.bindBuffer(r.ARRAY_BUFFER, s), r.bufferData(r.ARRAY_BUFFER, new Float32Array([
+		-1,
+		-1,
+		1,
+		-1,
+		-1,
+		1,
+		-1,
+		1,
+		1,
+		-1,
+		1,
+		1
+	]), r.STATIC_DRAW), r.enableVertexAttribArray(l), r.vertexAttribPointer(l, 2, r.FLOAT, !1, 0, 0), r.uniform2f(d.resolution, p, p), r.uniform3fv(d.deep, n.deep), r.uniform3fv(d.shallow, n.shallow), r.uniform3fv(d.foam, n.foam), r.uniform3fv(d.light, n.glow), r.uniform3fv(d.sky, n.sky), r.uniform3fv(d.horizon, n.horizon), {
+		draw(e) {
+			r.uniform1f(d.time, e.time), r.uniform1f(d.level, e.level), r.uniform1f(d.swell, e.swell), r.uniform1f(d.ripple, e.ripple), r.uniform1f(d.glow, e.glow), r.uniform1f(d.tilt, e.tilt), r.uniform1f(d.listen, e.listen), r.uniform1f(d.speak, e.speak), r.drawArrays(r.TRIANGLES, 0, 6);
+		},
+		destroy: c
+	};
+}
+function Me(e, t, n, r) {
+	switch (e) {
+		case "connecting": return {
+			swell: .03,
+			speed: .32,
+			glow: .3 + .2 * Math.sin(r * 2.6),
+			tiltAmplitude: .02,
+			levelOffset: 0,
+			corona: .4 + .2 * Math.sin(r * 2.6),
+			reach: .38,
+			ringEvery: 0,
+			ringStrength: 0,
+			ringInward: !1,
+			orbit: 0,
+			sweep: 1,
+			pulse: .5
+		};
+		case "listening": return {
+			swell: .045 + t * .05,
+			speed: .5 + t * .5,
+			glow: .42 + t * .5,
+			tiltAmplitude: .03,
+			levelOffset: t * .05,
+			corona: .5 + t * .5,
+			reach: .4 + t * .45,
+			ringEvery: .75 - t * .45,
+			ringStrength: .45 + t * .55,
+			ringInward: !0,
+			orbit: 0,
+			sweep: 0,
+			pulse: .3
+		};
+		case "thinking": return {
+			swell: .05,
+			speed: .7,
+			glow: .6 + .25 * Math.sin(r * 3.1),
+			tiltAmplitude: .06,
+			levelOffset: .01,
+			corona: .65 + .25 * Math.sin(r * 3.1),
+			reach: .55,
+			ringEvery: 0,
+			ringStrength: 0,
+			ringInward: !0,
+			orbit: 1,
+			sweep: 0,
+			pulse: 1
+		};
+		case "speaking": return {
+			swell: .065 + n * .12,
+			speed: .9 + n * 1.1,
+			glow: .6 + n * .4,
+			tiltAmplitude: .035,
+			levelOffset: .02 + n * .05,
+			corona: .75 + n * .25,
+			reach: .6 + n * .6,
+			ringEvery: .36 - n * .18,
+			ringStrength: .55 + n * .45,
+			ringInward: !1,
+			orbit: 0,
+			sweep: 0,
+			pulse: .2
+		};
+		case "error": return {
+			swell: .02,
+			speed: .2,
+			glow: .06,
+			tiltAmplitude: .01,
+			levelOffset: -.04,
+			corona: .08,
+			reach: .15,
+			ringEvery: 0,
+			ringStrength: 0,
+			ringInward: !1,
+			orbit: 0,
+			sweep: 0,
+			pulse: 0
+		};
+		default: return {
+			swell: .036,
+			speed: .36,
+			glow: .28,
+			tiltAmplitude: .028,
+			levelOffset: 0,
+			corona: .3,
+			reach: .24,
+			ringEvery: 5,
+			ringStrength: .25,
+			ringInward: !1,
+			orbit: 0,
+			sweep: 0,
+			pulse: .35
+		};
+	}
+}
+var Ne = .1, Pe = 7.5, Fe = 1.6, Q = 2.6, Ie = 1.25, Le = 1.9, Re = 6;
+function ze() {
+	return Array.from({ length: Re }, (e, t) => ({
+		angle: t / Re * Math.PI * 2,
+		speed: (.9 + t % 3 * .35) * (t % 2 == 0 ? 1 : -1),
+		radius: 1.14 + t % 3 * .11,
+		size: .03 + t % 2 * .014,
+		wobble: .7 + t * .37
+	}));
+}
+function Be(e, t, n, r) {
+	let i = e.getContext("2d");
+	if (!i) return;
+	let a = Math.min(window.devicePixelRatio || 1, 2), o = t * Q;
+	e.width = Math.max(1, Math.round(o * a)), e.height = e.width, i.scale(a, a);
+	let s = o / 2, c = t / 2, l = r === "dark" ? n.glow : n.shallow, u = r === "dark" ? n.foam : n.deep, d = r === "dark" ? n.shallow : n.deep, f = r === "dark" ? 1 : .75, p = (e, t, n) => {
+		i.beginPath(), i.arc(e, t, n, 0, Math.PI * 2);
+	};
+	return { draw(e) {
+		i.clearRect(0, 0, o, o), i.globalCompositeOperation = r === "dark" ? "lighter" : "source-over";
+		let t = c * (1 + e.reach + e.pulse * .04 + Math.sin(e.breath) * .02), n = Y(e.corona * (r === "dark" ? .85 : .7)), a = i.createRadialGradient(s, s, c * .9, s, s, t);
+		a.addColorStop(0, Z(l, n)), a.addColorStop(.3, Z(l, n * .5)), a.addColorStop(.65, Z(l, n * .15)), a.addColorStop(1, Z(l, 0)), i.fillStyle = a, p(s, s, t), i.fill();
+		let m = Y(e.speak + e.listen * .6);
+		if (m > .01) {
+			let e = c * (1.02 + m * .5), t = i.createRadialGradient(s, s, c * .95, s, s, e);
+			t.addColorStop(0, Z(u, .55 * m * f)), t.addColorStop(1, Z(u, 0)), i.fillStyle = t, p(s, s, e), i.fill();
+		}
+		let h = Y((.3 + e.glow * .4 + e.speak * .5 + e.listen * .4) * f), g = c * (1.08 + e.speak * .1), _ = i.createRadialGradient(s, s, c * .97, s, s, g);
+		_.addColorStop(0, Z(u, h)), _.addColorStop(1, Z(u, 0)), i.fillStyle = _, p(s, s, c * 1.15), i.fill();
+		for (let t of e.rings) {
+			let n = Y((e.time - t.born) / Le), r = 1 - (1 - n) ** 2.2, a = t.inward ? 1 - r : r, o = c * (1 + Ie * a), d = Y((t.inward ? (1 - a) ** .6 * (1 - n ** 4) : (1 - n) ** 1.3) * t.strength);
+			if (d < .005) continue;
+			let m = c * (.03 + t.strength * .05) * (1 - a * .45);
+			i.lineWidth = m * 3.5, i.strokeStyle = Z(l, d * .35), p(s, s, o), i.stroke(), i.lineWidth = m, i.strokeStyle = Z(u, d * f), p(s, s, o), i.stroke();
+		}
+		if (e.orbit > .01) {
+			for (let t of [
+				1.14,
+				1.25,
+				1.36
+			]) i.lineWidth = c * .008, i.strokeStyle = Z(l, .22 * e.orbit * f), p(s, s, c * t), i.stroke();
+			for (let t of e.orbiters) {
+				let n = Math.sin(e.time * t.wobble) * .05, r = c * (t.radius + n), a = 1.1 + e.orbit * 1.1, o = t.speed > 0 ? 1 : -1;
+				for (let n = 0; n < 18; n += 1) {
+					let d = n / 18 * a, m = t.angle - o * d, h = s + Math.cos(m) * r, g = s + Math.sin(m) * r, _ = (1 - n / 18) ** 2 * e.orbit;
+					i.fillStyle = Z(n === 0 ? u : l, Y(_ * (n === 0 ? 1 : .7) * f)), p(h, g, c * t.size * (1 - n / 18 * .7)), i.fill();
+				}
+				let d = c * t.size * 5, m = s + Math.cos(t.angle) * r, h = s + Math.sin(t.angle) * r, g = i.createRadialGradient(m, h, 0, m, h, d);
+				g.addColorStop(0, Z(l, .8 * e.orbit)), g.addColorStop(1, Z(l, 0)), i.fillStyle = g, p(m, h, d), i.fill();
+			}
+		}
+		if (e.sweep > .01) {
+			let t = [{
+				orbitRadius: c * 1.12,
+				start: e.time * 2.4,
+				span: Math.PI * .6,
+				width: .045
+			}, {
+				orbitRadius: c * 1.26,
+				start: Math.PI - e.time * 1.5,
+				span: Math.PI * .35,
+				width: .02
+			}];
+			for (let { orbitRadius: n, start: r, span: a, width: o } of t) {
+				let t = i.createConicGradient(r, s, s);
+				t.addColorStop(0, Z(u, 0)), t.addColorStop(a / (Math.PI * 2), Z(u, .95 * e.sweep * f)), t.addColorStop(a / (Math.PI * 2) + .001, Z(u, 0)), t.addColorStop(1, Z(u, 0)), i.lineWidth = c * o, i.strokeStyle = t, i.beginPath(), i.arc(s, s, n, r, r + a), i.stroke(), i.lineWidth = c * .01, i.strokeStyle = Z(d, .3 * e.sweep * f), p(s, s, n), i.stroke();
+			}
+		}
+	} };
+}
+function Ve({ state: e, volume: n, size: r, scheme: a = "light", palette: c, className: l, style: u, disabled: d = !1, interactive: f = !1, onClick: p, ...m }) {
+	let h = i(null), g = i(null), _ = i(null), v = i(e), y = i(n), b = i(!1);
+	Ce(() => {
+		v.current = e, y.current = n;
+	}, [e, n]);
+	let x = r * De, S = ke(a, c), C = JSON.stringify(S);
+	t(() => {
+		let e = h.current, t = g.current, n = _.current;
+		if (!e || !t || !n) return;
+		let r = JSON.parse(C), i = window.matchMedia("(prefers-reduced-motion: reduce)"), o = () => {
+			b.current = i.matches;
+		};
+		o(), i.addEventListener("change", o);
+		let s = je(e, x, r);
+		s || (e.style.background = `linear-gradient(180deg, ${Z(r.sky, 1)} 0%, ${Z(r.horizon, 1)} 44%, ${Z(r.shallow, 1)} 48%, ${Z(r.deep, 1)} 100%)`);
+		let c = Be(t, x, r, a), l = 0, u = performance.now(), d = 0, f = 0, p = 0, m = 0, S = Y(y.current), w = 0, T = 0, E = .036, D = .36, O = .26, k = .028, A = 0, j = .3, M = .24, N = 0, P = 0, F = .3, I = 0, L = 0, R = [], z = ze(), B = (e) => {
+			let t = Math.min((e - u) / 1e3, .05);
+			u = e;
+			let r = v.current, i = b.current, a = Y(y.current);
+			S = i ? 0 : X(S, a, a > S ? 14 : 6, t);
+			let o = r === "listening" ? S : 0, h = r === "speaking" ? S : 0;
+			w = X(w, o, o > w ? 16 : 6, t), T = X(T, h, h > T ? 11 : 4.5, t), f += t;
+			let g = Me(r, w, T, f);
+			if (E = X(E, g.swell, 2.4, t), D = X(D, g.speed, 2.4, t), O = X(O, g.glow, 3.2, t), k = X(k, g.tiltAmplitude, 1.8, t), A = X(A, g.levelOffset, 3, t), j = X(j, g.corona, g.corona > j ? 6 : 2.5, t), M = X(M, g.reach, g.reach > M ? 7 : 2.5, t), N = X(N, g.orbit, 3, t), P = X(P, g.sweep, 3, t), F = X(F, g.pulse, 2.5, t), !i) {
+				d += t * D, p += t * Math.PI * 2 / Pe, m += t * .31, I += t * Math.PI * 2 / Fe;
+				for (let e of z) e.angle += t * e.speed * (.6 + N * .9);
+				for (L += t, g.ringEvery > 0 && (r !== "speaking" || T > .04) && (r !== "listening" || w > .03) && L >= g.ringEvery && (L = 0, R.push({
+					born: f,
+					strength: g.ringStrength,
+					inward: g.ringInward
+				})); R.length > 0 && f - R[0].born > Le;) R.shift();
+			}
+			let _ = Ne + A + Math.sin(p) * .022, x = Math.sin(m) * k + Math.sin(m * 2.3 + .7) * .006;
+			s?.draw({
+				time: d,
+				level: _,
+				swell: i ? .012 : E,
+				ripple: i ? 0 : w,
+				glow: O,
+				tilt: i ? 0 : x,
+				listen: w,
+				speak: T
+			});
+			let C = (.5 + .5 * Math.sin(I)) * F, V = 1 + T * .09 + w * .04 + C * .022 + Math.sin(p) * .006;
+			n.style.transform = i ? "none" : `scale(${V})`, c?.draw({
+				time: f,
+				corona: i ? j * .6 : j,
+				reach: M,
+				glow: O,
+				speak: T,
+				listen: w,
+				orbit: i ? 0 : N,
+				sweep: i ? 0 : P,
+				pulse: C,
+				breath: p,
+				rings: i ? [] : R,
+				orbiters: z
+			}), l = requestAnimationFrame(B);
+		};
+		return l = requestAnimationFrame(B), () => {
+			cancelAnimationFrame(l), i.removeEventListener("change", o), s?.destroy();
+		};
+	}, [
+		x,
+		C,
+		a
+	]);
+	let w = {
+		width: r,
+		height: r,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		position: "relative",
+		...u
+	}, T = x * Q, E = /* @__PURE__ */ s("span", {
+		ref: _,
+		style: {
+			position: "relative",
+			display: "block",
+			width: x,
+			height: x,
+			borderRadius: "50%",
+			lineHeight: 0,
+			cursor: f ? d ? "not-allowed" : "pointer" : "default",
+			transformOrigin: "center",
+			willChange: "transform"
+		},
+		children: [/* @__PURE__ */ o("canvas", {
+			ref: g,
+			"aria-hidden": "true",
+			"data-ocean-aura": "",
+			style: {
+				position: "absolute",
+				left: (x - T) / 2,
+				top: (x - T) / 2,
+				display: "block",
+				width: T,
+				height: T,
+				pointerEvents: "none"
+			}
+		}), /* @__PURE__ */ o("canvas", {
+			ref: h,
+			"aria-hidden": "true",
+			"data-ocean-surface": "",
+			style: {
+				position: "absolute",
+				inset: 0,
+				display: "block",
+				width: x,
+				height: x,
+				borderRadius: "50%",
+				boxShadow: `0 ${x * .06}px ${x * .22}px ${Z(S.deep, a === "dark" ? .55 : .28)}`
+			}
+		})]
+	});
+	return f ? /* @__PURE__ */ o("button", {
+		...m,
+		type: "button",
+		className: l,
+		disabled: d,
+		onClick: d ? void 0 : p,
+		style: {
+			appearance: "none",
+			WebkitAppearance: "none",
+			border: 0,
+			padding: 0,
+			margin: 0,
+			background: "transparent",
+			color: "inherit",
+			font: "inherit",
+			cursor: d ? "not-allowed" : "pointer",
+			...w
+		},
+		children: E
+	}) : /* @__PURE__ */ o("div", {
+		...m,
+		className: l,
+		style: w,
+		children: E
+	});
+}
+//#endregion
 //#region src/components/Orb/Orb.tsx
-function ve({ signal: n, state: i, volume: s, adapter: u, theme: d = "debug", size: p = 200, className: m, style: h, disabled: g = !1, interactive: _ = !0, onStart: v, onStop: y, renderTheme: b, ...x }) {
-	let [S, C] = a({ state: "idle" });
+function $({ signal: n, state: i, volume: s, adapter: u, theme: d = "debug", size: p = 200, scheme: m, palette: h, className: g, style: _, disabled: v = !1, interactive: y = !0, onStart: b, onStop: x, renderTheme: S, ...C }) {
+	let [w, T] = a({ state: "idle" });
 	t(() => {
-		if (C({ state: "idle" }), u) return u.subscribe(C);
+		if (T({ state: "idle" }), u) return u.subscribe(T);
 	}, [u]);
-	let w = n ?? S, T = c(i, n, S), D = l(s, T, w), O = w.inputVolume ?? 0, k = w.outputVolume ?? 0, A = r(() => ({
-		...w,
-		state: T,
-		inputVolume: O,
-		outputVolume: k
+	let D = n ?? w, O = c(i, n, w), k = l(s, O, D), A = D.inputVolume ?? 0, j = D.outputVolume ?? 0, N = r(() => ({
+		...D,
+		state: O,
+		inputVolume: A,
+		outputVolume: j
 	}), [
-		w,
-		O,
-		k,
-		T
-	]), j = T !== "idle" && T !== "error", N = e(() => {
-		if (!g) return v ? v() : u?.start?.();
+		D,
+		A,
+		j,
+		O
+	]), P = O !== "idle" && O !== "error", F = e(() => {
+		if (!v) return b ? b() : u?.start?.();
 	}, [
 		u,
-		g,
-		v
-	]), P = e(() => {
-		if (!g) return y ? y() : u?.stop?.();
+		v,
+		b
+	]), I = e(() => {
+		if (!v) return x ? x() : u?.stop?.();
 	}, [
 		u,
-		g,
-		y
-	]), F = e(() => j ? P() : N(), [
-		j,
-		N,
-		P
-	]), I = j ? !!(u?.stop || y) : !!(u?.start || v), L = _ && I, R = L && !g ? F : void 0, z = x["aria-label"] ?? (L ? `${j ? "Stop" : "Start"} voice session` : void 0), B = {
-		...x,
-		"aria-label": z
+		v,
+		x
+	]), L = e(() => P ? I() : F(), [
+		P,
+		F,
+		I
+	]), R = P ? !!(u?.stop || x) : !!(u?.start || b), z = y && R, B = z && !v ? L : void 0, V = C["aria-label"] ?? (z ? `${P ? "Stop" : "Start"} voice session` : void 0), H = {
+		...C,
+		"aria-label": V
 	};
-	if (b) {
+	if (S) {
 		let e = {
-			...x,
+			...C,
 			type: "button",
-			disabled: g || !L,
-			onClick: R,
-			"data-orb-ui-state": T,
-			"aria-label": z
+			disabled: v || !z,
+			onClick: B,
+			"data-orb-ui-state": O,
+			"aria-label": V
 		};
-		return b({
-			state: T,
-			signal: A,
-			inputVolume: O,
-			outputVolume: k,
-			activity: D,
+		return S({
+			state: O,
+			signal: N,
+			inputVolume: A,
+			outputVolume: j,
+			activity: k,
 			size: p,
-			isActive: j,
-			interactive: L,
-			disabled: g,
-			start: N,
-			stop: P,
-			toggle: F,
+			isActive: P,
+			interactive: z,
+			disabled: v,
+			start: F,
+			stop: I,
+			toggle: L,
 			rootProps: {
-				className: m,
+				className: g,
 				style: {
 					width: p,
 					height: p,
-					...h
+					..._
 				},
 				"data-orb-ui-theme": "custom",
-				"data-orb-ui-state": T
+				"data-orb-ui-state": O
 			},
 			controlProps: e
 		});
 	}
-	let V = {
-		state: T,
-		volume: D,
+	let U = {
+		state: O,
+		volume: k,
 		size: p,
-		className: m,
-		style: h,
-		disabled: g,
-		...B
-	}, H = {
-		...V,
-		interactive: L
+		className: g,
+		style: _,
+		disabled: v,
+		...H
+	}, W = {
+		...U,
+		interactive: z
 	};
 	switch (d) {
 		case "circle": return /* @__PURE__ */ o(E, {
-			...H,
-			onClick: R
+			...W,
+			onClick: B
 		});
 		case "bars": return /* @__PURE__ */ o(M, {
-			...H,
-			onClick: R
+			...W,
+			onClick: B
+		});
+		case "cloud": return /* @__PURE__ */ o(ue, {
+			...W,
+			onClick: B
 		});
-		case "cloud": return /* @__PURE__ */ o(se, {
-			...H,
-			onClick: R
+		case "radial": return /* @__PURE__ */ o(Se, {
+			...W,
+			onClick: B
 		});
-		case "radial": return /* @__PURE__ */ o(_e, {
-			...H,
-			onClick: R
+		case "ocean": return /* @__PURE__ */ o(Ve, {
+			...W,
+			scheme: m,
+			palette: h,
+			onClick: B
 		});
 		default: return /* @__PURE__ */ o(f, {
-			...V,
-			disabled: g || !_,
-			onStart: g || !_ ? void 0 : N,
-			onStop: g || !_ ? void 0 : P
+			...U,
+			disabled: v || !y,
+			onStart: v || !y ? void 0 : F,
+			onStop: v || !y ? void 0 : I
 		});
 	}
 }
 //#endregion
-export { ve as Orb, ve as VoiceOrb };
+export { $ as Orb, $ as VoiceOrb };

package/dist/themes/index.d.ts

@@ -3,3 +3,4 @@ export { CircleTheme } from './circle/index.js';
 export { BarsTheme } from './bars/index.js';
 export { CloudTheme } from './cloud/index.js';
 export { RadialTheme } from './radial/index.js';
+export { OceanTheme } from './ocean/index.js';

package/dist/themes/ocean/OceanTheme.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties } from 'react';
+import { OrbHtmlAttributes, OrbPalette, OrbScheme, OrbState } from '../../components/Orb/Orb.types.js';
+interface OceanThemeProps extends OrbHtmlAttributes {
+    state: OrbState;
+    volume: number;
+    size: number;
+    scheme?: OrbScheme;
+    palette?: OrbPalette;
+    className?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+    interactive?: boolean;
+    onClick?: () => void;
+}
+type Rgb = [number, number, number];
+interface ResolvedOceanPalette {
+    deep: Rgb;
+    shallow: Rgb;
+    foam: Rgb;
+    glow: Rgb;
+    sky: Rgb;
+    horizon: Rgb;
+}
+export declare const OCEAN_PALETTES: Record<OrbScheme, Required<OrbPalette>>;
+export declare function resolveOceanPalette(scheme: OrbScheme, palette: OrbPalette | undefined): ResolvedOceanPalette;
+export declare function OceanTheme({ state, volume, size, scheme, palette, className, style, disabled, interactive, onClick, ...controlProps }: OceanThemeProps): import("react").JSX.Element;
+export {};

package/dist/themes/ocean/index.d.ts

@@ -0,0 +1 @@
+export { OceanTheme } from './OceanTheme.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lofcz/orb-ui",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "React voice agent UI components with audio-reactive adapters for Vapi, ElevenLabs, LiveKit, Pipecat, OpenAI Realtime, Gemini Live, and custom voice AI apps.",
   "type": "module",
   "main": "./dist/orb-ui.cjs",