@longline/aqua-ui 1.0.330 → 1.0.334

package/controls/Histogram/Histogram.js

@@ -30,30 +30,30 @@ import { HistogramNoData } from './HistogramNoData';
 import { HistogramBar } from './HistogramBar';
 import { HistogramTick } from './HistogramTick';
 import { DefaultHistogramAppearance } from './HistogramAppearance';
-var HistogramBase = function (p) {
+var HistogramBase = function (props) {
     // Abort if there are no bins.
-    if (p.bins.length === 0)
-        return React.createElement(HistogramNoData, null, p.nodata);
+    if (props.bins.length === 0)
+        return React.createElement(HistogramNoData, null, props.nodata);
     // Find tallest bar. This is used to calculate the percentage height
     // of each bar.
-    var maxHeight = Math.max.apply(Math, p.bins.map(function (b) { return b.count; }));
+    var maxHeight = Math.max.apply(Math, props.bins.map(function (b) { return b.count; }));
     // Abort if bins are all empty.
     if (maxHeight === 0)
-        return React.createElement(HistogramNoData, null, p.nodata);
-    return (React.createElement("div", { "data-testid": "Histogram", className: p.className },
+        return React.createElement(HistogramNoData, null, props.nodata);
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "Histogram", className: props.className },
         React.createElement(ChartArea, null,
             React.createElement(Indent, null,
-                React.createElement(BarArea, null, p.bins.map(function (bin, idx) {
-                    return React.createElement(HistogramBar, { key: idx, values: p.values, value: bin.count, label: bin.name, height: 100 * bin.count / maxHeight, onClick: p.onClick ? function () { return p.onClick(idx); } : null, loading: p.loading, appearance: p.appearance });
+                React.createElement(BarArea, null, props.bins.map(function (bin, idx) {
+                    return React.createElement(HistogramBar, { key: idx, values: props.values, value: bin.count, label: bin.name, height: 100 * bin.count / maxHeight, onClick: props.onClick ? function () { return props.onClick(idx); } : null, loading: props.loading, appearance: props.appearance });
                 })))),
-        p.tickStyle !== 'none' && React.createElement(AxisArea, null,
+        props.tickStyle !== 'none' && React.createElement(AxisArea, null,
             React.createElement(Indent, null,
-                p.bins.map(function (bin, idx) {
-                    return React.createElement(HistogramTick, { key: idx, showValue: p.tickStyle === 'value', left: 100 * idx / p.bins.length, value: bin.binStart });
+                props.bins.map(function (bin, idx) {
+                    return React.createElement(HistogramTick, { key: idx, showValue: props.tickStyle === 'value', left: 100 * idx / props.bins.length, value: bin.binStart });
                 }),
-                p.bins.length > 0 &&
-                    React.createElement(HistogramTick, { left: 100, showValue: p.tickStyle === 'value', value: p.bins[p.bins.length - 1].binEnd }))),
-        p.unit && React.createElement(UnitArea, null, p.unit)));
+                props.bins.length > 0 &&
+                    React.createElement(HistogramTick, { left: 100, showValue: props.tickStyle === 'value', value: props.bins[props.bins.length - 1].binEnd }))),
+        props.unit && React.createElement(UnitArea, null, props.unit)));
 };
 var ChartArea = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var AxisArea = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));

package/controls/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Size } from '../../Types';
-interface IIconProps {
+import { ITestable, Size } from '../../Types';
+interface IIconProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

package/controls/Icon/Icon.js

@@ -36,7 +36,7 @@ var IconBase = function (props) {
         if (props.onClick)
             props.onClick(e);
     };
-    return (React.createElement("svg", { "data-testid": "Icon", className: props.className, onClick: handleClick, focusable: "false", role: "img" },
+    return (React.createElement("svg", { "data-testid": props['data-testid'] || "Icon", className: props.className, onClick: handleClick, focusable: "false", role: "img" },
         props.title && React.createElement("title", null, props.title),
         React.createElement("use", { xlinkHref: props.url })));
 };

package/controls/Key/Key.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IKeyProps {
+import { ITestable } from '../../Types';
+interface IKeyProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

package/controls/Key/Key.js

@@ -48,7 +48,7 @@ var KeyBase = function (props) {
         }
         return { symbol: sym, wide: isWide };
     }, [props.value, isMac]), symbol = _a.symbol, wide = _a.wide;
-    return (React.createElement("span", { "data-testid": "Key", className: props.className, style: {
+    return (React.createElement("span", { "data-testid": props['data-testid'] || "Key", className: props.className, style: {
             maxWidth: wide ? 'auto' : '16px',
             minWidth: wide ? '36px' : 'auto'
         }, "aria-label": props.value },

package/controls/LinearChart/LinearChart.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface ILinearChartProps {
+import { ITestable } from '../../Types';
+interface ILinearChartProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

package/controls/LinearChart/LinearChart.js

@@ -29,7 +29,7 @@ import styled from 'styled-components';
 import { Ghost } from '../Ghost';
 var LinearChartBase = function (props) {
     var percentage = Math.round(Math.max(0, Math.min(100, props.value))) + "%";
-    return (React.createElement("div", { "data-testid": "LinearChart", className: props.className, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(props.value) },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "LinearChart", className: props.className, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(props.value) },
         props.label && React.createElement(Label, null,
             props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: '2px', right: 0, bottom: '2px' } }),
             !props.ghost && props.label),

package/controls/ListButton/ListButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Placement } from '@popperjs/core';
-interface IListButtonProps {
+import { ITestable } from '../../Types';
+interface IListButtonProps extends ITestable {
     /** @ignore */
     children?: React.ReactNode;
     /** Toggle control that opens/closes the list. Receives an `onClick` handler. */

package/controls/ListButton/ListButton.js

@@ -59,7 +59,7 @@ var ListButtonBase = function (props) {
             update();
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-testid": "ListButton", ref: buttonRef, style: { display: 'inline-block' } }, React.cloneElement(props.toggle, { onClick: toggleOpen })),
+        React.createElement("div", { "data-testid": props['data-testid'] || "ListButton", ref: buttonRef, style: { display: 'inline-block' } }, React.cloneElement(props.toggle, { onClick: toggleOpen })),
         createPortal(React.createElement(Pane, __assign({ "$open": open, "$width": props.width, style: styles.popper }, attributes.popper, { ref: paneRef }), open && React.createElement(List, { maxItems: 6, contract: true }, props.children)), document.body)));
 };
 var Pane = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"], ["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"

package/controls/ListView/ListView.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { IColumnProps } from './Column';
 import { IListViewProps } from './IListViewProps';
-interface IProps extends IListViewProps {
+import { ITestable } from '../../Types';
+interface IProps extends IListViewProps, ITestable {
     /**
      * Column specifications. These are a set of `Column` children,
      * each of which set a column name, width, sort key and sort direction, and

package/controls/ListView/ListView.js

@@ -120,7 +120,7 @@ var ListViewBase = function (props) {
     if (props.ghost) {
         return React.createElement(Ghost, __assign({}, otherProps, { columns: columns }));
     }
-    return (React.createElement(Table, __assign({ "data-testid": "ListView" }, otherProps, { data: data, columns: columns, sort: sort, reverse: reverse, onSortClick: handleSort, columnsMode: columnsMode, onOpenColumns: handleColumns, onCheck: props.onCheck ? handleCheck : null, onChangeColumns: handleChangeColumns, onCloseColumns: function () { return setColumnsMode(false); }, onResetColumns: handleResetColumns })));
+    return (React.createElement(Table, __assign({ "data-testid": props['data-testid'] || "ListView" }, otherProps, { data: data, columns: columns, sort: sort, reverse: reverse, onSortClick: handleSort, columnsMode: columnsMode, onOpenColumns: handleColumns, onCheck: props.onCheck ? handleCheck : null, onChangeColumns: handleChangeColumns, onCloseColumns: function () { return setColumnsMode(false); }, onResetColumns: handleResetColumns })));
 };
 /**
  * A data table with sorting, column management, virtualization, and row selection.

package/controls/Mouse/Mouse.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IMouseProps {
+import { ITestable } from '../../Types';
+interface IMouseProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

package/controls/Mouse/Mouse.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var MouseBase = function (props) {
-    return (React.createElement("svg", { "data-testid": "Mouse", className: props.className, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" // Hide from assistive tech (for non-interactive icons)
+    return (React.createElement("svg", { "data-testid": props['data-testid'] || "Mouse", className: props.className, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" // Hide from assistive tech (for non-interactive icons)
         , focusable: "false" },
         React.createElement("path", { d: "M14 1.75623C8.69307 1.75623 4.375 6.07429 4.375 11.3812V18.3812C4.375 23.6882 8.69307 28.0062 14 28.0062C19.3069 28.0062 23.625 23.6882 23.625 18.3812V11.3812C23.625 6.07429 19.3069 1.75623 14 1.75623ZM21.875 11.3812V12.2562H16.625V10.5062C16.625 9.36653 15.8911 8.40403 14.875 8.04199V3.55756C18.806 3.99506 21.875 7.33546 21.875 11.3812ZM14 9.63123C14.4834 9.63123 14.875 10.0239 14.875 10.5062V13.1312C14.875 13.6136 14.4834 14.0062 14 14.0062C13.5166 14.0062 13.125 13.6136 13.125 13.1312V10.5062C13.125 10.0239 13.5166 9.63123 14 9.63123ZM6.125 11.3812C6.125 7.33546 9.19403 3.99389 13.125 3.55779V8.04223C12.1089 8.40427 11.375 9.36677 11.375 10.5065V12.2565H6.125V11.3812ZM14 26.2562C9.65767 26.2562 6.125 22.7236 6.125 18.3812V14.0062H11.5358C11.8978 15.0223 12.8603 15.7562 14 15.7562C15.1397 15.7562 16.1022 15.0223 16.4642 14.0062H21.875V18.3812C21.875 22.7236 18.3423 26.2562 14 26.2562Z", fill: props.color }),
         props.left && React.createElement("path", { className: "left", d: "M13.125 3.55798C9.19403 3.99408 6.125 7.33565 6.125 11.3814V12.2567H11.375V10.5067C11.375 9.36696 12.1089 8.40446 13.125 8.04242V3.55798Z" }),

package/controls/PrimaryButton/PrimaryButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IIconProps } from '../Icon';
-interface IPrimaryButtonProps {
+import { ITestable } from '../../Types';
+interface IPrimaryButtonProps extends ITestable {
     /** @ignore */
     className?: string;
     /** Button content. Can be JSX. */

package/controls/PrimaryButton/PrimaryButton.js

@@ -40,7 +40,7 @@ var PrimaryButtonBase = function (props) {
         // An IIconProps was provided. Use it as the props for the icon.
         return React.createElement(Icon, __assign({ color: theme.colors.neutral[100] }, props.icon));
     };
-    return (React.createElement("button", { "data-testid": "PrimaryButton", className: props.className, type: "button", onClick: props.onClick, title: props.title, "aria-disabled": props.disabled, disabled: props.disabled },
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "PrimaryButton", className: props.className, type: "button", onClick: props.onClick, title: props.title, "aria-disabled": props.disabled, disabled: props.disabled },
         icon(),
         props.children));
 };

package/controls/Progress/Progress.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IProgressProps {
+import { ITestable } from '../../Types';
+interface IProgressProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

package/controls/Progress/Progress.js

@@ -34,7 +34,7 @@ var getClampedValue = function (value) {
     return Math.round(Math.min(100, Math.max(0, value)));
 };
 var ProgressBase = function (props) {
-    return React.createElement("div", { "data-testid": "Progress", className: props.className, role: "progressbar", "aria-valuenow": getClampedValue(props.value), "aria-valuemin": 0, "aria-valuemax": 100 },
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Progress", className: props.className, role: "progressbar", "aria-valuenow": getClampedValue(props.value), "aria-valuemin": 0, "aria-valuemax": 100 },
         React.createElement(FillOuter, null,
             React.createElement(FillInner, { style: { transform: "scaleX(".concat(getClampedValue(props.value) / 100, ")") } })),
         props.numbered && React.createElement(Value, null, "".concat(getClampedValue(props.value), "%")));

package/controls/SecondaryButton/SecondaryButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IIconProps } from '../Icon';
-interface ISecondaryButtonProps {
+import { ITestable } from '../../Types';
+interface ISecondaryButtonProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

package/controls/SecondaryButton/SecondaryButton.js

@@ -29,7 +29,7 @@ import styled, { css, useTheme } from 'styled-components';
 import { Icon } from '../Icon';
 var SecondaryButtonBase = function (props) {
     var theme = useTheme();
-    return (React.createElement("button", { "data-testid": "SecondaryButton", type: "button", className: props.className, disabled: props.disabled, onClick: props.onClick, title: props.title, "aria-label": props.title },
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "SecondaryButton", type: "button", className: props.className, disabled: props.disabled, onClick: props.onClick, title: props.title, "aria-label": props.title },
         React.createElement(Icon, __assign({ color: theme.colors.neutral[100] }, (typeof props.icon === 'string' ? { url: props.icon } : props.icon)))));
 };
 // 

package/controls/TabBar/Tab.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface ITabProps {
+import { ITestable } from '../../Types';
+interface ITabProps extends ITestable {
     /** @ignore */
     className?: string;
     /** @ignore */

package/controls/TabBar/Tab.js

@@ -32,7 +32,7 @@ var TabBase = React.forwardRef(function (props, ref) {
         if (props.onClick)
             props.onClick();
     };
-    return (React.createElement("div", { "data-testid": "TabBar.Tab", className: props.className, role: "tab", "aria-selected": props.active, ref: ref, onClick: handleClick },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "TabBar.Tab", className: props.className, role: "tab", "aria-selected": props.active, ref: ref, onClick: handleClick },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: '5px', top: '9px', right: '5px', bottom: '9px', zIndex: 100 } }),
         React.createElement(Content, null,
             props.children,

package/controls/TabBar/TabBar.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Tab } from './Tab';
-interface ITabBarProps {
+import { ITestable } from '../../Types';
+interface ITabBarProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

package/controls/TabBar/TabBar.js

@@ -190,7 +190,7 @@ var TabBarBase = function (props) {
         setActive(idx);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, idx);
     };
-    return (React.createElement("div", { "data-testid": "TabBar", className: props.className, ref: barRef, "aria-orientation": "horizontal" },
+    return (React.createElement("div", { "data-testid": props['data-testid'] || "TabBar", className: props.className, ref: barRef, "aria-orientation": "horizontal" },
         React.createElement(Slider, { ref: sliderRef, onMouseDown: handleMouseDown },
             React.Children.map(props.children, function (child, idx) {
                 return React.cloneElement(child, {

package/controls/TertiaryButton/TertiaryButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IIconProps } from '../Icon';
-interface ITertiaryButtonProps {
+import { ITestable } from '../../Types';
+interface ITertiaryButtonProps extends ITestable {
     /** @ignore */
     className?: string;
     /** Button content. Can be JSX. */

package/controls/TertiaryButton/TertiaryButton.js

@@ -39,7 +39,7 @@ var TertiaryButtonBase = React.forwardRef(function (props, ref) {
         // An IIconProps was provided. Use it as the props for the icon.
         return React.createElement(Icon, __assign({ color: props.primary ? theme.colors.neutral[100] : theme.colors.primary[3] }, props.icon));
     };
-    return (React.createElement("button", { "data-testid": "TertiaryButton", ref: ref, className: props.className, type: "button", disabled: props.disabled, onClick: props.onClick },
+    return (React.createElement("button", { "data-testid": props['data-testid'] || "TertiaryButton", ref: ref, className: props.className, type: "button", disabled: props.disabled, onClick: props.onClick },
         icon(),
         props.children));
 });

package/controls/ToggleButton/ToggleButton.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IToggleButtonProps {
+import { ITestable } from '../../Types';
+interface IToggleButtonProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

package/controls/ToggleButton/ToggleButton.js

@@ -28,7 +28,7 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from '../Icon';
 var ToggleButtonBase = React.forwardRef(function (props, ref) {
-    return React.createElement("button", { "data-testid": "ToggleButton", className: props.className, ref: ref, type: "button", onClick: props.onClick, title: props.title, disabled: props.disabled, "aria-pressed": props.active, "aria-expanded": props.open, "aria-disabled": props.disabled },
+    return React.createElement("button", { "data-testid": props['data-testid'] || "ToggleButton", className: props.className, ref: ref, type: "button", onClick: props.onClick, title: props.title, disabled: props.disabled, "aria-pressed": props.active, "aria-expanded": props.open, "aria-disabled": props.disabled },
         React.createElement(Icon, { url: props.url }));
 });
 var ToggleButtonStyled = styled(ToggleButtonBase).attrs(function (p) {

package/controls/View/View.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IViewProps {
+import { ITestable } from '../../Types';
+interface IViewProps extends ITestable {
     /** @ignore */
     className?: string;
     /**

package/controls/View/View.js

@@ -31,7 +31,7 @@ import { ScrollingContent } from './ScrollingContent';
 import { EllipsizedContent } from './EllipsizedContent';
 import { Ghost } from '../Ghost';
 var ViewBase = function (props) {
-    return React.createElement("div", { "data-testid": "View", className: props.className },
+    return React.createElement("div", { "data-testid": props['data-testid'] || "View", className: props.className },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
         React.createElement(Label, null, props.badge ? (React.createElement(BadgeWrapper, null,
             props.label,

package/hooks/useSpeechAIRecorder/index.d.ts

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

package/hooks/useSpeechAIRecorder/index.js

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

package/hooks/useSpeechAIRecorder/stories/SpeechAIAudioInput.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IProps {
+    url: string;
+}
+declare const SpeechAIAudioInput: (props: IProps) => React.JSX.Element;
+export { SpeechAIAudioInput };

package/hooks/{useAssemblyAIRecorder/stories/AssemblyAudioInput.js → useSpeechAIRecorder/stories/SpeechAIAudioInput.js}

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { useAssemblyAIRecorder } from '../useAssemblyAIRecorder';
-var AssemblyAudioInput = function (props) {
+import { useSpeechAIRecorder } from '../useSpeechAIRecorder';
+var SpeechAIAudioInput = function (props) {
     var _a = useState('initial'), transcript = _a[0], setTranscript = _a[1];
-    var _b = useAssemblyAIRecorder(props.url, setTranscript), recordingStatus = _b.recordingStatus, toggleRecording = _b.toggleRecording;
+    var _b = useSpeechAIRecorder(props.url, setTranscript), recordingStatus = _b.recordingStatus, toggleRecording = _b.toggleRecording;
     var getLabel = function (recordingStatus) {
         switch (recordingStatus) {
             case 'connecting': return "Connecting";
@@ -14,4 +14,4 @@ var AssemblyAudioInput = function (props) {
         React.createElement("button", { onClick: toggleRecording }, getLabel(recordingStatus)),
         React.createElement("p", { style: { border: 'solid 1px blue', minHeight: '200px', color: 'white' } }, transcript)));
 };
-export { AssemblyAudioInput };
+export { SpeechAIAudioInput };

package/hooks/useSpeechAIRecorder/useSpeechAIRecorder.d.ts

@@ -0,0 +1,29 @@
+type TranscriptCallback = (text: string) => void;
+type TRecordingStatus = 'idle' | 'connecting' | 'recording';
+/**
+ * useSpeechAIRecorder
+ *
+ * A custom React hook for real-time audio transcription. The current
+ * implementation streams audio over a WebSocket to AssemblyAI's v3 streaming
+ * endpoint, having first obtained a temporary token from the supplied
+ * back-end URL. Switching providers would mean rewriting this hook's
+ * networking — the public interface is provider-agnostic.
+ *
+ * When recording is toggled on, it takes a few moments to establish a
+ * WebSocket connection. During this time, the recording status will be
+ * `'connecting'`.
+ *
+ * @param url - Back-end URL for obtaining a temporary streaming token.
+ * @param onTranscript - Callback that receives updated transcript text.
+ * @returns An object containing:
+ *   - recordingStatus: 'idle' | 'connecting' | 'recording'
+ *   - toggleRecording: function to start or stop recording
+ *
+ * The `SpeechManager` singleton tracks the active recorder; when a new
+ * recording is started, the previous one is stopped.
+ */
+declare const useSpeechAIRecorder: (url: string, onTranscript: TranscriptCallback, authToken?: string) => {
+    recordingStatus: TRecordingStatus;
+    toggleRecording: () => Promise<void>;
+};
+export { useSpeechAIRecorder, TRecordingStatus };

package/hooks/{useAssemblyAIRecorder/useAssemblyAIRecorder.js → useSpeechAIRecorder/useSpeechAIRecorder.js}

@@ -46,26 +46,28 @@ import { SpeechManager } from './SpeechManager';
 // 
 var moduleScript = /* js */ "\nconst MAX_16BIT_INT = 32767\nclass AudioProcessor extends AudioWorkletProcessor {\n  constructor() {\n    super();\n\n    // Input is browser sample rate (typically 48000 Hz in Firefox)\n    // This variable is globally available inside the AudioWorkletProcessor\n    // scope.\n    this.inputSampleRate = sampleRate;\n    console.log('Detected input sample rate:', sampleRate);\n    this.targetSampleRate = 16000;\n    this.ratio = this.inputSampleRate / this.targetSampleRate;\n\n    // Buffer of input samples for resampling\n    this.buffer = [];\n\n    // Number of samples per output chunk\n    this.chunkSize = 1600; // ~100ms at 16kHz\n  }\n\n  /**\n   * Resample the input buffer to the target sample rate using linear interpolation.\n   */\n  resample(inputBuffer) {\n    const outputLength = Math.floor(inputBuffer.length / this.ratio);\n    const output = new Float32Array(outputLength);\n\n    for (let i = 0; i < outputLength; i++) {\n      const idx = i * this.ratio;\n      const idxInt = Math.floor(idx);\n      const idxFrac = idx - idxInt;\n\n      const sample1 = inputBuffer[idxInt] || 0;\n      const sample2 = inputBuffer[idxInt + 1] || 0;\n      output[i] = sample1 + (sample2 - sample1) * idxFrac;\n    }\n\n    return output;\n  }\n\n  /**\n   * Converts Float32 PCM [-1, 1] to 16-bit signed PCM\n   */\n  floatTo16BitPCM(float32Array) {\n    const int16Array = new Int16Array(float32Array.length);\n    for (let i = 0; i < float32Array.length; i++) {\n      let s = Math.max(-1, Math.min(1, float32Array[i]));\n      int16Array[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;\n    }\n    return int16Array;\n  }\n\n  /**\n   * Called automatically by browser on each audio frame (128 samples per channel).\n   */\n  process(inputs, outputs, parameters) {\n    try {\n      const input = inputs[0];\n      if (!input || input.length === 0) return true;\n\n      // Read from mono channel\n      const channelData = input[0];\n      this.buffer.push(...channelData);\n\n      // Only process if we have enough input to produce a full output chunk\n      const neededInputSamples = this.chunkSize * this.ratio;\n      if (this.buffer.length >= neededInputSamples) {\n        const inputForChunk = this.buffer.slice(0, neededInputSamples);\n        const resampled = this.resample(inputForChunk);\n        const pcm = this.floatTo16BitPCM(resampled);\n\n        this.port.postMessage({ audio_data: pcm }); // Send Int16Array to main thread\n\n        // Remove consumed input samples\n        this.buffer = this.buffer.slice(neededInputSamples);\n      }\n\n      return true; // Keep processor alive\n    } catch (error) {\n      console.error(error)\n      return false\n    }\n  }\n}\n\nregisterProcessor('audio-processor', AudioProcessor);\n";
 /**
- * useAssemblyAIRecorder
+ * useSpeechAIRecorder
  *
- * A custom React hook for real-time audio transcription using AssemblyAI's
- * streaming API.
+ * A custom React hook for real-time audio transcription. The current
+ * implementation streams audio over a WebSocket to AssemblyAI's v3 streaming
+ * endpoint, having first obtained a temporary token from the supplied
+ * back-end URL. Switching providers would mean rewriting this hook's
+ * networking — the public interface is provider-agnostic.
  *
- * When recording is toggled on, it takes a few moments to establish a web
- * socket connection. During this time, the recording status will be
+ * When recording is toggled on, it takes a few moments to establish a
+ * WebSocket connection. During this time, the recording status will be
  * `'connecting'`.
  *
- * @param url - Back-end URL for obtaining temporary token
+ * @param url - Back-end URL for obtaining a temporary streaming token.
  * @param onTranscript - Callback that receives updated transcript text.
  * @returns An object containing:
  *   - recordingStatus: 'idle' | 'connecting' | 'recording'
  *   - toggleRecording: function to start or stop recording
  *
- * The `SpeechManager` singleton is use to keep track of which
- * AssemblyAIRecorder is currently recording; when a new recording is started,
- * the current one is stopped.
+ * The `SpeechManager` singleton tracks the active recorder; when a new
+ * recording is started, the previous one is stopped.
  */
-var useAssemblyAIRecorder = function (url, onTranscript, authToken) {
+var useSpeechAIRecorder = function (url, onTranscript, authToken) {
     // State to track the current recording status
     var _a = useState('idle'), recordingStatus = _a[0], setRecordingStatus = _a[1];
     // WebSocket connection to AssemblyAI
@@ -294,4 +296,4 @@ var useAssemblyAIRecorder = function (url, onTranscript, authToken) {
         toggleRecording: toggleRecording,
     };
 };
-export { useAssemblyAIRecorder };
+export { useSpeechAIRecorder };

package/hooks/useTextAIStream/index.d.ts

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

package/hooks/useTextAIStream/index.js

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

package/hooks/{useOpenAIStream/stories/OpenAIStreamInput.d.ts → useTextAIStream/stories/TextAIStreamInput.d.ts}

@@ -5,7 +5,7 @@ interface IProps {
      */
     url: string;
     /**
-     * Prompt to send to OpenAI.
+     * Prompt to send.
      */
     prompt: string;
     /**
@@ -19,5 +19,5 @@ interface IProps {
      */
     top_p?: number;
 }
-declare const OpenAIStreamInput: (props: IProps) => React.JSX.Element;
-export { OpenAIStreamInput };
+declare const TextAIStreamInput: (props: IProps) => React.JSX.Element;
+export { TextAIStreamInput };

package/hooks/{useOpenAIStream/stories/OpenAIStreamInput.js → useTextAIStream/stories/TextAIStreamInput.js}

@@ -35,16 +35,16 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React, { useState } from 'react';
-import { useOpenAIStream } from '../useOpenAIStream';
-var OpenAIStreamInput = function (props) {
-    var streamOpenAI = useOpenAIStream(props.url).stream;
+import { useTextAIStream } from '../useTextAIStream';
+var TextAIStreamInput = function (props) {
+    var stream = useTextAIStream(props.url).stream;
     var _a = useState(""), result = _a[0], setResult = _a[1];
     var handleClick = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     setResult("");
-                    return [4 /*yield*/, streamOpenAI(props.prompt, function (chunk) { return __awaiter(void 0, void 0, void 0, function () {
+                    return [4 /*yield*/, stream(props.prompt, function (chunk) { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 setResult(function (prev) { return prev + chunk; });
                                 return [2 /*return*/];
@@ -60,7 +60,7 @@ var OpenAIStreamInput = function (props) {
         React.createElement("div", null,
             "Prompt: ",
             props.prompt),
-        React.createElement("button", { onClick: handleClick }, "Call OpenAI"),
+        React.createElement("button", { onClick: handleClick }, "Stream"),
         React.createElement("p", { style: { border: 'solid 1px blue', minHeight: '200px', color: 'white' } }, result)));
 };
-export { OpenAIStreamInput };
+export { TextAIStreamInput };

package/hooks/useTextAIStream/useTextAIStream.d.ts

@@ -0,0 +1,26 @@
+interface ITextAIStreamOptions {
+    temperature: number;
+    top_p: number;
+}
+/**
+ * Hook to stream text from a backend AI endpoint.
+ *
+ * The backend is expected to relay/translate its provider's output into
+ * OpenAI chat-completions Server-Sent Events:
+ *
+ *   data: {"choices":[{"delta":{"content":"..."}}]}\n\n
+ *   ...
+ *   data: [DONE]\n\n
+ *
+ * This is the de-facto streaming format and is provider-agnostic in practice
+ * (many vendors expose OpenAI-compatible endpoints). Backends that wrap other
+ * providers (e.g. Anthropic) should translate their native SSE into this
+ * shape so the hook stays unchanged.
+ *
+ * @returns `stream`: a function that takes a prompt and streaming callback.
+ */
+declare const useTextAIStream: (url: string, authToken?: string) => {
+    stream: (prompt: string, onText: (text: string) => Promise<void>, options?: ITextAIStreamOptions) => Promise<void>;
+    cancel: () => void;
+};
+export { useTextAIStream, ITextAIStreamOptions };

package/hooks/{useOpenAIStream/useOpenAIStream.js → useTextAIStream/useTextAIStream.js}

@@ -45,11 +45,23 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { useCallback, useRef } from 'react';
 /**
- * Hook to stream OpenAI responses via a backend endpoint that acts as a proxy.
+ * Hook to stream text from a backend AI endpoint.
+ *
+ * The backend is expected to relay/translate its provider's output into
+ * OpenAI chat-completions Server-Sent Events:
+ *
+ *   data: {"choices":[{"delta":{"content":"..."}}]}\n\n
+ *   ...
+ *   data: [DONE]\n\n
+ *
+ * This is the de-facto streaming format and is provider-agnostic in practice
+ * (many vendors expose OpenAI-compatible endpoints). Backends that wrap other
+ * providers (e.g. Anthropic) should translate their native SSE into this
+ * shape so the hook stays unchanged.
  *
  * @returns `stream`: a function that takes a prompt and streaming callback.
  */
-var useOpenAIStream = function (url, authToken) {
+var useTextAIStream = function (url, authToken) {
     var abortRef = useRef(null);
     /**
      * Streams a prompt to a backend AI endpoint and handles streamed chunks.
@@ -92,7 +104,7 @@ var useOpenAIStream = function (url, authToken) {
                     case 1:
                         response = _f.sent();
                         if (!response.ok) {
-                            console.error("OpenAI stream request failed: ".concat(response.statusText));
+                            console.error("Text AI stream request failed: ".concat(response.statusText));
                             return [2 /*return*/];
                         }
                         if (!response.body) {
@@ -159,4 +171,4 @@ var useOpenAIStream = function (url, authToken) {
     }, []);
     return { stream: stream, cancel: cancel };
 };
-export { useOpenAIStream };
+export { useTextAIStream };

package/inputs/DateInput/DateInput.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IDateInputProps {
+import { ITestable } from '../../Types';
+interface IDateInputProps extends ITestable {
     /** @ignore */
     className?: string;
     /**
@@ -64,10 +65,6 @@ interface IDateInputProps {
      * Listeners are notified when the Input receives focus.
      */
     onFocus?: () => void;
-    /**
-     * Test ID for Playwright/testing. Forwarded to the root DOM element.
-     */
-    'data-testid'?: string;
 }
 declare const DateInput: {
     ({ direction, noTabIndex, disabled, transparent, fluid, error, clearable, nofuture, ...props }: IDateInputProps): React.JSX.Element;

package/inputs/Dropdown/Dropdown.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface IDropdownProps {
+import { ITestable } from '../../Types';
+interface IDropdownProps extends ITestable {
     /** @ignore */
     className?: string;
     /** @ignore */
@@ -112,10 +113,6 @@ interface IDropdownProps {
      * is closed.
      */
     onClose?: () => void;
-    /**
-     * Test ID for Playwright/testing. Forwarded to the root DOM element.
-     */
-    'data-testid'?: string;
 }
 /**
  * A `Dropdown` is a replacement for `<select>` (select). It opens upwards or