@spaced-out/ui-design-system 0.6.2 → 0.6.6

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.6.6](https://github.com/spaced-out/ui-design-system/compare/v0.6.6-beta.2...v0.6.6) (2026-03-24)
+
+### [0.6.6-beta.2](https://github.com/spaced-out/ui-design-system/compare/v0.6.6-beta.1...v0.6.6-beta.2) (2026-03-23)
+
+### [0.6.6-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.6.6-beta.0...v0.6.6-beta.1) (2026-03-23)
+
+### [0.6.6-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.6.4...v0.6.6-beta.0) (2026-03-23)
+
+
+### Bug Fixes
+
+* add ref for microphone animations ([#470](https://github.com/spaced-out/ui-design-system/issues/470)) ([6aedae2](https://github.com/spaced-out/ui-design-system/commit/6aedae264108a9344ca8d5669a832d80f80a783e))
+
+### [0.6.5](https://github.com/spaced-out/ui-design-system/compare/v0.6.4...v0.6.5) (2026-03-23)
+
+### Performance
+
+* Optimize Voice-Orb and Microphone animations by skipping react lifecycle and updating DOM directly (https://github.com/Spaced-Out/ui-design-system/pull/469)
+
+### [0.6.4](https://github.com/spaced-out/ui-design-system/compare/v0.6.3...v0.6.4) (2026-03-18)
+
+### [0.6.3](https://github.com/spaced-out/ui-design-system/compare/v0.6.2...v0.6.3) (2026-03-18)
+
+
+### Bug Fixes
+
+* disable state link icon color issue ([#467](https://github.com/spaced-out/ui-design-system/issues/467)) ([43cc16f](https://github.com/spaced-out/ui-design-system/commit/43cc16f958f99a3c653e36bfd896b23903da3d9d))
+
 ### [0.6.2](https://github.com/spaced-out/ui-design-system/compare/v0.6.2-beta.0...v0.6.2) (2026-03-10)
 
 

package/lib/components/Icon/Icon.module.css

@@ -65,3 +65,7 @@
 .favorite {
   color: colorTextFavorite;
 }
+
+.inherit {
+  color: inherit;
+}

package/lib/components/Link/Link.js

@@ -118,9 +118,7 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       name: iconLeftName,
       size: iconLeftSize,
       type: iconLeftType,
-      className: (0, _classify.default)(_IconModule.default[color], {
-        [_typographyModule.default.disabled]: disabled
-      }),
+      className: _IconModule.default.inherit,
       testId: (0, _qa.generateTestId)({
         base: testId,
         slot: 'icon-left'
@@ -142,7 +140,7 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       name: iconRightName,
       size: iconRightSize,
       type: iconRightType,
-      className: _IconModule.default[color],
+      className: _IconModule.default.inherit,
       testId: (0, _qa.generateTestId)({
         base: testId,
         slot: 'icon-right'

package/lib/components/VoiceOrb/Microphone/Microphone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Microphone.d.ts","sourceRoot":"","sources":["../../../../src/components/VoiceOrb/Microphone/Microphone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAEnE,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkDzC,CAAC;AAEF,OAAO,EAAC,UAAU,EAAC,CAAC"}
+{"version":3,"file":"Microphone.d.ts","sourceRoot":"","sources":["../../../../src/components/VoiceOrb/Microphone/Microphone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAEnE,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyDzC,CAAC;AAEF,OAAO,EAAC,UAAU,EAAC,CAAC"}

package/lib/components/VoiceOrb/Microphone/Microphone.js

@@ -20,40 +20,43 @@ const Microphone = _ref => {
     classNames,
     testId
   } = _ref;
-  const {
-    barIntensities
-  } = (0, _useAudioAnalyzer.useAudioAnalyzer)({
+  const barsRef = React.useRef(null);
+  const onAnalyze = React.useCallback(intensities => {
+    const container = barsRef.current;
+    if (!container || container.children.length !== _constants.BAR_COUNT) {
+      return;
+    }
+    const bars = container.children;
+    for (let i = 0; i < intensities.length; i++) {
+      const multiplier = 1 + intensities[i] * (_constants.MAX_MULTIPLIERS[i] - 1);
+      const height = _constants.BASE_HEIGHT * multiplier;
+      bars[i].style.height = `${height}px`;
+    }
+  }, []);
+  (0, _useAudioAnalyzer.useAudioAnalyzer)({
     isListening: enableMicrophone,
     audioStream: null,
-    barCount: _constants.BAR_COUNT
+    barCount: _constants.BAR_COUNT,
+    onAnalyze
   });
   const barKeys = React.useMemo(() => Array.from({
     length: _constants.BAR_COUNT
   }, () => (0, _constants.uuid)()), [_constants.BAR_COUNT]);
-  // Calculate dynamic styles for each bar based on audio intensity
-  const barStyles = barIntensities.map((intensity, index) => {
-    // Height from BASE_HEIGHT (no audio) to BASE_HEIGHT * MAX_MULTIPLIERS[index] (max audio)
-    const multiplier = 1 + intensity * (_constants.MAX_MULTIPLIERS[index] - 1);
-    const height = _constants.BASE_HEIGHT * multiplier;
-    return {
-      height: `${height}px`
-    };
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     "data-testid": (0, _qa.generateTestId)({
       base: testId,
       slot: 'container'
     }),
     className: (0, _classify.default)(_MicrophoneModule.default.barsContainer, classNames?.barsContainer),
-    children: enableMicrophone ? barStyles.map((style, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: barsRef,
+    children: enableMicrophone ? barKeys.map(barKey => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "data-testid": (0, _qa.generateTestId)({
         base: testId,
         slot: 'bar',
-        index
+        index: barKey
       }),
-      className: (0, _classify.default)(_MicrophoneModule.default.bar, classNames?.bar),
-      style: style
-    }, barKeys[index])) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      className: (0, _classify.default)(_MicrophoneModule.default.bar, classNames?.bar)
+    }, barKey)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MicIcon.MicIcon, {})
     })
   });

package/lib/components/VoiceOrb/VoiceOrb/VoiceOrb.d.ts

@@ -8,8 +8,8 @@ export interface VoiceOrbProps {
     classNames?: ClassNames;
     /** Enable listening to microphone audio input for bar animation */
     enableMicrophone?: boolean;
-    /** Volume value from Retell (0-1) to animate agent speaking */
-    volume?: number;
+    /** Custom event name to listen for agent volume updates. Default `'agent_volume_update'`. */
+    volumeTickEvent?: string;
     testId?: string;
 }
 export declare const VoiceOrb: React.ForwardRefExoticComponent<VoiceOrbProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/VoiceOrb/VoiceOrb/VoiceOrb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceOrb.d.ts","sourceRoot":"","sources":["../../../../src/components/VoiceOrb/VoiceOrb/VoiceOrb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,WAAW,aAAa;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,sFAyBpB,CAAC"}
+{"version":3,"file":"VoiceOrb.d.ts","sourceRoot":"","sources":["../../../../src/components/VoiceOrb/VoiceOrb/VoiceOrb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,MAAM,WAAW,aAAa;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6FAA6F;IAC7F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,sFAmDpB,CAAC"}

package/lib/components/VoiceOrb/VoiceOrb/VoiceOrb.js

@@ -16,12 +16,27 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const VoiceOrb = exports.VoiceOrb = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
-    volume = 0,
     enableMicrophone = false,
+    volumeTickEvent = 'agent_volume_update',
     testId
   } = _ref;
-  // Calculate CSS custom property values for volume-based box-shadow animation
-  const orbShadowVars = (0, _constants.calculateOrbShadowVars)(volume);
+  const orbRef = React.useRef(null);
+  React.useEffect(() => {
+    const handleAgentVolumeUpdate = event => {
+      const el = orbRef.current;
+      if (!el) {
+        return;
+      }
+      const vars = (0, _constants.calculateOrbShadowVars)(event.detail.volume);
+      for (const [key, value] of Object.entries(vars)) {
+        el.style.setProperty(key, value);
+      }
+    };
+    window.addEventListener(volumeTickEvent, handleAgentVolumeUpdate);
+    return () => {
+      window.removeEventListener(volumeTickEvent, handleAgentVolumeUpdate);
+    };
+  }, [volumeTickEvent]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
     "data-testid": (0, _qa.generateTestId)({
@@ -32,8 +47,8 @@ const VoiceOrb = exports.VoiceOrb = /*#__PURE__*/React.forwardRef((_ref, ref) =>
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_VoiceOrbModule.default.orbContainer, classNames?.orbContainer),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: orbRef,
         className: (0, _classify.default)(_VoiceOrbModule.default.orb, classNames?.orb),
-        style: orbShadowVars,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Microphone.Microphone, {
           enableMicrophone: enableMicrophone
         })

package/lib/components/VoiceOrb/constants.d.ts

@@ -13,6 +13,6 @@ export declare const MIN_OPACITY_2 = 0.2;
 export declare const MAX_OPACITY_2 = 0.6;
 export declare const MIN_OPACITY_3 = 0.15;
 export declare const MAX_OPACITY_3 = 0.4;
-export declare function calculateOrbShadowVars(volume: number): React.CSSProperties;
+export declare function calculateOrbShadowVars(volume: number): Record<string, string>;
 export declare function uuid(): string;
 //# sourceMappingURL=constants.d.ts.map

package/lib/components/VoiceOrb/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceOrb/constants.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,SAAS,IAAI,CAAC;AAG3B,eAAO,MAAM,WAAW,IAAI,CAAC;AAG7B,eAAO,MAAM,eAAe,2BAA4B,CAAC;AAKzD,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,OAAO,CAAC;AAClC,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,GA2B9C,KAAK,CAAC,aAAa,CACzB;AAGD,wBAAgB,IAAI,WAQnB"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/VoiceOrb/constants.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,SAAS,IAAI,CAAC;AAG3B,eAAO,MAAM,WAAW,IAAI,CAAC;AAG7B,eAAO,MAAM,eAAe,2BAA4B,CAAC;AAKzD,eAAO,MAAM,eAAe,IAAI,CAAC;AACjC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,MAAM,CAAC;AACjC,eAAO,MAAM,aAAa,OAAO,CAAC;AAClC,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA4B7E;AAGD,wBAAgB,IAAI,WAQnB"}

package/lib/components/VoiceOrb/constants.js

@@ -47,9 +47,9 @@ function calculateOrbShadowVars(volume) {
     '--shadow-blur-1': `${blur1}px`,
     '--shadow-blur-2': `${blur2}px`,
     '--shadow-blur-3': `${blur3}px`,
-    '--shadow-opacity-1': opacity1,
-    '--shadow-opacity-2': opacity2,
-    '--shadow-opacity-3': opacity3
+    '--shadow-opacity-1': String(opacity1),
+    '--shadow-opacity-2': String(opacity2),
+    '--shadow-opacity-3': String(opacity3)
   };
 }
 

package/lib/hooks/useAudioAnalyzer/useAudioAnalyzer.d.ts

@@ -9,12 +9,12 @@ export interface AudioAnalyzerOptions {
     smoothingTimeConstant?: number;
     /** FFT size for frequency analysis */
     fftSize?: number;
+    /** Called on every rAF tick with computed intensities -- can use for imperative DOM updates */
+    onAnalyze?: (intensities: number[]) => void;
     /** Minimum ms between state updates (throttle). Default 50 (~20fps). */
     updateIntervalMs?: number;
 }
 export interface AudioAnalyzerResult {
-    /** Array of intensity values (0-1) for each bar */
-    barIntensities: number[];
     /** Whether the audio stream is active */
     isActive: boolean;
     /** Any error that occurred */

package/lib/hooks/useAudioAnalyzer/useAudioAnalyzer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAudioAnalyzer.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAudioAnalyzer/useAudioAnalyzer.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAcD,eAAO,MAAM,gBAAgB;cAClB,oBAAoB,GAC5B,mBAAmB;;CA+KrB,CAAC"}
+{"version":3,"file":"useAudioAnalyzer.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAudioAnalyzer/useAudioAnalyzer.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+FAA+F;IAC/F,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,yCAAyC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAcD,eAAO,MAAM,gBAAgB;cAClB,oBAAoB,GAC5B,mBAAmB;;CAsLrB,CAAC"}

package/lib/hooks/useAudioAnalyzer/useAudioAnalyzer.js

@@ -23,11 +23,13 @@ const useAudioAnalyzer = options => {
     barCount = DEFAULT_BAR_COUNT,
     smoothingTimeConstant = DEFAULT_SMOOTHING,
     fftSize = DEFAULT_FFT_SIZE,
-    updateIntervalMs = DEFAULT_UPDATE_INTERVAL_MS
+    updateIntervalMs = DEFAULT_UPDATE_INTERVAL_MS,
+    onAnalyze
   } = options;
-  const [barIntensities, setBarIntensities] = (0, _react.useState)(() => Array(barCount).fill(0));
   const [isActive, setIsActive] = (0, _react.useState)(false);
   const [error, setError] = (0, _react.useState)(null);
+  const onAnalyzeRef = (0, _react.useRef)(onAnalyze);
+  onAnalyzeRef.current = onAnalyze;
   const audioContextRef = (0, _react.useRef)(null);
   const analyzerRef = (0, _react.useRef)(null);
   const sourceRef = (0, _react.useRef)(null);
@@ -84,7 +86,7 @@ const useAudioAnalyzer = options => {
       const now = Date.now();
       if (now - lastUpdateTimeRef.current >= updateIntervalMs) {
         lastUpdateTimeRef.current = now;
-        setBarIntensities(intensities);
+        onAnalyzeRef.current?.(intensities);
       }
       animationFrameRef.current = requestAnimationFrame(analyze);
     };
@@ -115,7 +117,7 @@ const useAudioAnalyzer = options => {
       audioContextRef.current = null;
     }
     setIsActive(false);
-    setBarIntensities(Array(barCount).fill(0));
+    onAnalyzeRef.current?.(Array(barCount).fill(0));
   }, [barCount]);
   (0, _react.useEffect)(() => {
     if (!isListening) {
@@ -162,7 +164,6 @@ const useAudioAnalyzer = options => {
     return cleanup;
   }, [isListening, externalStream, fftSize, smoothingTimeConstant, analyzeAudio, cleanup]);
   return {
-    barIntensities,
     isActive,
     error
   };

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
   "type": "module",
   "main": "index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.6.2",
+  "version": "0.6.6",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"