@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

package/src/Chat/ChatComposerTokenElement.spec.md

@@ -1,164 +0,0 @@
----
-schema_version: 3
-template_version: 7
-kind: component
-id: component:ChatComposerTokenElement
-authority: current
-archive_reason: null
-superseded_by: null
-approved_by: cixzhang
-approved_at: 2026-10-31
-owners: [cixzhang]
-review_triggers: [public-api, behavior, accessibility, theming, testing]
-verified_by:
-  [
-    packages/core/src/Chat/ChatComposerTokenElement.test.tsx,
-    apps/storybook/stories/ChatComposerTokenElement.stories.tsx,
-    apps/storybook/rtl-audit/verified-not-applicable.json,
-  ]
-modules: []
-families: []
-design_specs: []
-architecture:
-  [
-    architecture:public-component-api,
-    architecture:component-test-sufficiency,
-    architecture:knowledge-contracts,
-  ]
-contributing: []
-system_specs: [spec:AST-002, spec:AST-029]
----
-
-# ChatComposerTokenElement component contract
-
-## Contract at a glance
-
-| Area                    | Contract                                                                                                                                                                                                                                                                                  |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Public contract         | `ChatComposerTokenElement` with a required `token`: structured, which is `value` plus Badge props, of which only `label`, `variant`, and `icon` render and the rest are accepted and ignored; or custom `{value, render}`, `ref`, `xstyle`, `className`, `style`, and neutral span props. |
-| Behavior                | A structured token renders Badge content; a custom token renders caller content. Both retain the serialized value marker and stay non-editable when placed inside a contenteditable composer.                                                                                             |
-| End-user impact         | Token labels and caller content remain visible without becoming editable text.                                                                                                                                                                                                            |
-| Builder impact          | None.                                                                                                                                                                                                                                                                                     |
-| Compatibility/readiness | Records shipped behavior; no public change. Evidence still pending for AR1 and parts of FR1, FR2, and FR4 (read from source; see the verification map).                                                                                                                                   |
-| Review checks           | Reject a token wrapper that loses its serialized value, becomes editable, drops accepted span props, or changes the structured/custom rendering split.                                                                                                                                    |
-| Governing rules         | `architecture:public-component-api/INV1, INV5–INV6, INV8–INV9, INV12`; `architecture:component-test-sufficiency/INV1–INV8, INV10–INV11`; `spec:AST-029/FR3–FR5, FR7`.                                                                                                                     |
-
-This table is a review projection; the body below is authoritative.
-
-## Intent
-
-ChatComposerTokenElement renders one already-defined `ChatComposerToken` outside the
-editor insertion machinery. It supplies the same serialization marker used by
-ChatComposerInput while leaving structured Badge presentation or custom content to
-their existing owners.
-
-## Compatibility and migration
-
-- Released default preserved: `yes`
-- Compatibility class: records shipped behavior; no public change
-- Controlled/uncontrolled behavior: not applicable
-- Migration decision: none
-
-Consumer migration instructions belong in consumer docs and release notes.
-
-## Ownership boundary
-
-**Owns**
-
-- The span carrying `data-astryx-token` and the token's serialized value.
-- Keeping that wrapper non-editable when composed inside a contenteditable region.
-- Choosing the existing structured Badge or custom-render branch.
-- Forwarding the wrapper ref and accepted neutral span props.
-
-**Does not own / non-goals**
-
-- Token value grammar or product semantics.
-- Badge colors, iconography, or sizing.
-- Accessibility semantics and interaction behavior inside caller custom content.
-- Token insertion, deletion, expansion, or composer selection management.
-
-## Public concepts
-
-| Concept          | Closed values or states                          | Meaning                                                               | Default        | Owner                                | Stability |
-| ---------------- | ------------------------------------------------ | --------------------------------------------------------------------- | -------------- | ------------------------------------ | --------- |
-| token form       | structured Badge config; custom render function  | Selects caller content without changing serialization.                | none; required | `component:ChatComposerTokenElement` | stable    |
-| serialized value | non-empty or empty string supplied by caller     | Value stored in `data-astryx-token-value` for composer serialization. | none; required | caller value through this component  | stable    |
-| wrapper surface  | ref; DOM/data/ARIA props; className/style/xstyle | Extends the serialization span without replacing owned markers.       | omitted        | `architecture:public-component-api`  | stable    |
-
-## Behavioral and layout contract
-
-| ID  | Invariant                                                                                                                                                                  | Basis                                               |
-| --- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
-| FR1 | The root MUST expose `data-astryx-token` and the exact supplied `token.value`, and MUST remain `contentEditable={false}`.                                                  | Current source, docs, and tests                     |
-| FR2 | Structured tokens MUST delegate label, variant, and icon rendering to Badge without changing the token value.                                                              | shipped implementation and public token type        |
-| FR3 | Custom tokens MUST render the caller function result without adding component-owned semantics or interaction.                                                              | shipped implementation and public token type        |
-| FR4 | Accepted ref, DOM/data/ARIA, className, style, and xstyle inputs MUST reach and compose on the root span while component-owned serialization attributes retain precedence. | `architecture:public-component-api/INV5–INV6, INV8` |
-
-### Allowed variation
-
-- Structured Badge labels, variants, and icons remain caller supplied.
-- Custom rendered content and its semantics remain caller owned.
-- The wrapper may be used inside or outside a contenteditable surface.
-
-### Representative states
-
-| State            | Required invariant                                                        | Allowed variation               |
-| ---------------- | ------------------------------------------------------------------------- | ------------------------------- |
-| structured token | Visible Badge content and exact serialized value.                         | Badge label, variant, and icon. |
-| custom token     | Caller output and exact serialized value.                                 | Any caller-owned React node.    |
-| extended wrapper | Neutral DOM props and ref reach the span without replacing owned markers. | Supported BaseProps values.     |
-
-## Accessibility contract
-
-- **AR1 — No owned semantics.** The wrapper owns no interactive role or
-  accessible name beyond accepted caller props.
-- **AR2 — Visible content.** Structured Badge text remains visible content;
-  custom content semantics remain caller owned.
-- **AR3 — Atomic token.** `contentEditable={false}` keeps the token atomically
-  non-editable when nested in an editor.
-
-## Design relationships
-
-| Anatomy or state   | Design requirement        | Representation authority | Hierarchy role | Component contract |
-| ------------------ | ------------------------- | ------------------------ | -------------- | ------------------ |
-| token wrapper      | Inline alignment only     | Current source           | supporting     | FR1, FR4           |
-| structured content | Badge presentation        | `component:Badge`        | supporting     | FR2                |
-| custom content     | caller-owned presentation | caller                   | supporting     | FR3                |
-
-The wrapper does not paint a component-owned visual surface or introduce a public theme
-target. Badge theming remains owned by Badge, and custom content remains caller owned.
-
-## Family and system relationships
-
-- `component:ChatComposerInput` owns insertion, serialization traversal, deletion, and selection behavior.
-- `architecture:public-component-api` owns the public props type, ref, and BaseProps composition.
-- `architecture:component-test-sufficiency` owns direct evidence for the established public serialization seam.
-- `spec:AST-029` owns the audit evidence inventory this record's verification map follows.
-
-## Verification map
-
-| Contract         | Verification                                                  | Representative states                        | Mutation or failure expectation                                                                 | Audit section                             |
-| ---------------- | ------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------- |
-| FR1–FR3, AR2–AR3 | `ChatComposerTokenElement.test.tsx`; direct Storybook stories | structured and custom tokens                 | A marker/value disappears, the wrapper becomes editable, or the wrong rendering branch appears. | `audit:ChatComposerTokenElement/behavior` |
-| FR4              | focused ref and DOM-passthrough test; public typecheck        | ref, ARIA/data props, styling seams          | An accepted input is dropped or an owned serialization marker is replaced.                      | `audit:ChatComposerTokenElement/api`      |
-| rendered states  | direct Storybook stories                                      | Badge and custom content in supported themes | An unreachable story fails the story checks.                                                    | `audit:ChatComposerTokenElement/rendered` |
-
-Read from source, with no focused test yet:
-
-- AR1: the wrapper adding no role or accessible name of its own.
-- FR1: `contentEditable` staying `false` when a caller passes it.
-- FR2: `variant` and `icon` reaching the Badge.
-- FR4: `className`, `style`, and `xstyle` composing on the span.
-
-## Decision log
-
-No component-local decision is recorded.
-
-## Open questions
-
-None.
-
-## Content boundary
-
-This file does not duplicate consumer examples, current audit scores, Badge policy, or
-ChatComposerInput selection mechanics.

package/src/Chat/ChatComposerTokenElement.test.tsx

@@ -1,85 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file ChatComposerTokenElement.test.tsx
- * @input Public Chat token element and props contract
- * @output Verifies serialization markers, rendering modes, and DOM passthrough
- * @position Public contract tests for @astryxdesign/core/Chat
- */
-
-import {render, screen} from '@testing-library/react';
-import {describe, expect, expectTypeOf, it} from 'vitest';
-import {
-  ChatComposerTokenElement,
-  type ChatComposerTokenElementProps,
-} from '@astryxdesign/core/Chat';
-
-describe('ChatComposerTokenElement', () => {
-  it('renders a structured token with its serialized value', () => {
-    render(
-      <ChatComposerTokenElement
-        token={{value: '@ada', label: 'Ada', variant: 'blue'}}
-        data-testid="token"
-      />,
-    );
-
-    const token = screen.getByTestId('token');
-    expect(token).toHaveAttribute('data-astryx-token', '');
-    expect(token).toHaveAttribute('data-astryx-token-value', '@ada');
-    expect(token).toHaveAttribute('contenteditable', 'false');
-    expect(token).toHaveTextContent('Ada');
-  });
-
-  it('renders caller-owned custom token content', () => {
-    render(
-      <ChatComposerTokenElement
-        token={{
-          value: '#design',
-          render: () => <strong>Design</strong>,
-        }}
-      />,
-    );
-
-    expect(screen.getByText('Design').tagName).toBe('STRONG');
-  });
-
-  it('forwards the span ref and neutral DOM props', () => {
-    const ref = {current: null as HTMLSpanElement | null};
-    render(
-      <ChatComposerTokenElement
-        ref={ref}
-        token={{value: '@ada', label: 'Ada'}}
-        aria-label="Mention Ada"
-      />,
-    );
-
-    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
-    expect(ref.current).toHaveAttribute('aria-label', 'Mention Ada');
-  });
-
-  it('keeps component-owned serialization markers authoritative', () => {
-    const conflictingMarkers = {
-      'data-astryx-token': 'consumer-value',
-      'data-astryx-token-value': 'wrong-value',
-    };
-
-    render(
-      <ChatComposerTokenElement
-        {...conflictingMarkers}
-        token={{value: '@ada', label: 'Ada'}}
-        data-testid="token"
-      />,
-    );
-
-    const token = screen.getByTestId('token');
-    expect(token).toHaveAttribute('data-astryx-token', '');
-    expect(token).toHaveAttribute('data-astryx-token-value', '@ada');
-  });
-
-  it('publishes the span props contract', () => {
-    expectTypeOf<ChatComposerTokenElementProps>().toMatchTypeOf<{
-      token: {value: string};
-      ref?: React.Ref<HTMLSpanElement>;
-    }>();
-  });
-});

package/src/Chat/ChatDictationButton.spec.md

@@ -1,205 +0,0 @@
----
-schema_version: 3
-template_version: 7
-kind: component
-id: component:ChatDictationButton
-authority: current
-archive_reason: null
-superseded_by: null
-approved_by: cixzhang
-approved_at: 2026-10-31
-owners: [cixzhang]
-review_triggers: [public-api, behavior, accessibility, theming, testing]
-verified_by:
-  [
-    packages/core/src/Chat/ChatDictationButton.test.tsx,
-    apps/storybook/stories/ChatDictation.stories.tsx,
-    apps/storybook/rtl-audit/verified-not-applicable.json,
-  ]
-modules: []
-families: []
-design_specs: [design:reduced-motion]
-architecture:
-  [
-    architecture:public-component-api,
-    architecture:component-style-authoring,
-    architecture:theme-tokens,
-    architecture:component-test-sufficiency,
-    architecture:knowledge-contracts,
-  ]
-contributing: []
-system_specs: [spec:AST-029, spec:AST-027]
----
-
-# ChatDictationButton component contract
-
-## Contract at a glance
-
-| Area                    | Contract                                                                                                                                                                                                                                                          |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Public contract         | `ChatDictationButton` with a required `dictation` state (`isSupported`, `isListening`, `volume`, `bands`, `toggle`), `size` (`sm`, `md`; default `md`), `isHiddenWhenUnsupported` (default true), `label`, `ref`, `xstyle`, `className`, `style`, and span props. |
-| Behavior                | An icon-only microphone Button that toggles dictation. While listening it shows five volume-reactive bars instead of the microphone; unsupported dictation renders nothing, or a disabled Button when kept visible.                                               |
-| End-user impact         | Voice input is one labelled button that says whether it starts or stops dictation; browsers without speech recognition see no action that cannot run.                                                                                                             |
-| Builder impact          | None.                                                                                                                                                                                                                                                             |
-| Compatibility/readiness | Records shipped behavior; no public change. Two implementation gaps, listed under Current-state impact.                                                                                                                                                           |
-| Review checks           | Reject an enabled unsupported action, a missing or stale start/stop name, bars exposed to assistive technology, or clipping color that a theme cannot retint.                                                                                                     |
-| Governing rules         | `architecture:public-component-api`; `architecture:theme-tokens` INV3; `architecture:component-style-authoring` INV7; `design:reduced-motion`.                                                                                                                    |
-
-This table is a review projection; the body below is authoritative.
-
-## Intent
-
-ChatDictationButton is the visible control for a speech-recognition state
-owner. It turns that owner's support and listening state into one icon-only
-Button and a five-bar volume display. Consumer usage lives in
-`ChatDictationButton.doc.mjs`.
-
-## Compatibility and migration
-
-- Released default preserved: `yes`
-- Compatibility class: records shipped behavior; no public change
-- Controlled/uncontrolled behavior: listening state is owned by the supplied
-  `dictation` value
-- Migration decision: none
-
-Consumer migration instructions belong in consumer docs and release notes.
-
-## Current-state impact
-
-- **The volume bars are extra elements.** The listening display is a container
-  and five bar `span` elements that no theme target paints.
-  `architecture:component-style-authoring` INV7 renders one element per
-  semantic role or themable part.
-
-- **The bars set a z-index without isolation.** The bar container carries
-  `z-index: 1` and the wrapper does not isolate it, so the bars take part in
-  the page's stacking order. `spec:AST-027` FR1 keeps z-index local and lists
-  this case as a containment gap.
-
-## Ownership boundary
-
-**Owns**
-
-- The start and stop name, and the caller's `label` override (FR1, FR2).
-- Hiding or disabling the control when speech recognition is unsupported
-  (FR3).
-- The five-bar display of the supplied bands and its clipping color (FR2, FR4).
-- The wrapper span's ref, props, and styling (FR5).
-
-**Does not own / non-goals**
-
-- Speech recognition support detection, lifecycle, transcripts, errors, and
-  microphone permission — owned by the `dictation` state owner.
-- Activation, focus, disabled semantics, and icon-only presentation — owned by
-  `component:Button`.
-- Placement in ChatComposer — the caller's composition.
-- A public color, threshold, or bar-shape option.
-
-## Public concepts
-
-| Concept   | Closed values or states                                  | Meaning                                                    | Availability by variant/orientation/state | Default                 | Owner                           | Stability | Invalid-value behavior           |
-| --------- | -------------------------------------------------------- | ---------------------------------------------------------- | ----------------------------------------- | ----------------------- | ------------------------------- | --------- | -------------------------------- |
-| Support   | supported; unsupported and hidden; unsupported and shown | Whether the control renders and whether it can operate.    | Every control.                            | hidden when unsupported | `component:ChatDictationButton` | Stable    | TypeScript rejects other values. |
-| Listening | idle; listening                                          | Selects the start or stop name and the microphone or bars. | Supported controls.                       | idle                    | `dictation` owner               | Stable    | Not applicable.                  |
-| Size      | `sm`, `md`                                               | Sizes the Button and bars together.                        | Every control.                            | `md`                    | `component:ChatDictationButton` | Stable    | TypeScript rejects other values. |
-
-## Behavioral and layout contract
-
-| ID  | Invariant                                                                                                                                                                                          | Basis                                   |
-| --- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
-| FR1 | When supported and idle, the control is an enabled, icon-only ghost Button with the microphone icon, named by `label` or the translated start label, that calls `dictation.toggle` when activated. | Current source and tests                |
-| FR2 | While listening, the Button is named by `label` or the translated stop label and shows no icon, and five bars, hidden from assistive technology, scale with the supplied `bands`.                  | Current source and tests                |
-| FR3 | When dictation is unsupported, the control renders nothing; with `isHiddenWhenUnsupported={false}` it renders a disabled Button.                                                                   | Current source and tests                |
-| FR4 | The bars use `--color-accent`, blending toward `--color-error` as `volume` passes the clipping threshold, so a theme retints both ends (`architecture:theme-tokens` INV3).                         | Current source and tests                |
-| FR5 | `ref`, DOM, data, and ARIA props, `className`, `style`, and `xstyle` reach the wrapper span, which carries the `chat-dictation-button` target; `size` sizes the Button and the bars together.      | Current source and tests                |
-| FR6 | Under reduced motion the bars change scale and color at once, with no transition.                                                                                                                  | `design:reduced-motion`; current source |
-
-### Allowed variation
-
-- **AV1 — Label.** Callers may replace the translated start and stop name.
-- **AV2 — Bars.** Bar heights and clipping strength follow the supplied
-  `bands` and `volume`.
-- **AV3 — Theme colors.** Themes may change the accent and error colors.
-
-### Representative states
-
-| State                     | Required invariant                             | Allowed variation |
-| ------------------------- | ---------------------------------------------- | ----------------- |
-| Supported, idle           | Enabled microphone Button with the start name. | Label, size.      |
-| Listening                 | Stop name; five hidden bars.                   | Bar heights.      |
-| Clipping                  | Bars blend from accent toward error.           | Theme colors.     |
-| Unsupported, default      | Nothing renders.                               | —                 |
-| Unsupported, kept visible | A disabled Button.                             | Label.            |
-
-### Transformation and precedence order
-
-- **ORD1 — Name.** The caller's `label`, then the translated start or stop
-  label for the listening state.
-- **ORD2 — Support.** Unsupported and hidden renders nothing before any other
-  state applies.
-
-### Performance and resources
-
-- No resource rule.
-
-## Accessibility contract
-
-- **AR1 — Name.** The control always has a name that says whether it starts or
-  stops dictation, unless the caller overrides it (FR1, FR2).
-- **AR2 — Decorative bars.** The bars are hidden from assistive technology
-  (FR2).
-- **AR3 — Unavailable action.** A visible unsupported control is disabled
-  (FR3); Button owns how disabled is conveyed.
-
-## Design relationships
-
-| Anatomy or state | Design requirement                                 | Representation authority | Hierarchy role | Component contract |
-| ---------------- | -------------------------------------------------- | ------------------------ | -------------- | ------------------ |
-| Button           | Icon-only microphone action.                       | `component:Button`       | Prominent      | FR1, FR3           |
-| Volume bars      | Five bars that show live input level and clipping. | Current source           | Supporting     | FR2, FR4, FR6      |
-
-No anatomy-theming map is recorded yet; the block is optional during
-migration, so the map is deferred.
-
-## Family and system relationships
-
-- `component:Button` owns activation, focus, disabled semantics, and icon-only
-  presentation.
-- `architecture:theme-tokens` owns the accent and error roles the bars use.
-- `design:reduced-motion` owns the reduced-motion rule FR6 follows.
-- The glyph and centered bars are direction-neutral; the RTL audit records
-  this as not applicable.
-
-## Verification map
-
-| Contract | Verification                                                                                          | Representative states         | Mutation or failure expectation                                         | Audit section                             |
-| -------- | ----------------------------------------------------------------------------------------------------- | ----------------------------- | ----------------------------------------------------------------------- | ----------------------------------------- |
-| FR1, AR1 | `ChatDictationButton.test.tsx` "labels and toggles the idle button"                                   | Idle                          | A missing name, or activation that does not toggle, fails.              | `audit:ChatDictationButton/behavior`      |
-| FR2, AR2 | `ChatDictationButton.test.tsx` "shows five hidden visualizer bars and the stop label while listening" | Listening                     | A wrong bar count, exposed bars, or a start name while listening fails. | `audit:ChatDictationButton/behavior`      |
-| FR3, AR3 | `ChatDictationButton.test.tsx` unsupported tests                                                      | Unsupported, hidden and shown | A rendered or enabled unsupported control fails.                        | `audit:ChatDictationButton/accessibility` |
-| FR4      | `ChatDictationButton.test.tsx` "uses theme-owned colors for clipping feedback"                        | Clipping                      | A raw color in place of the theme roles fails.                          | `audit:ChatDictationButton/theming`       |
-| FR5      | `ChatDictationButton.test.tsx` "forwards the root ref and accepted span props"                        | Ref and span props            | A dropped ref or prop fails.                                            | `audit:ChatDictationButton/api`           |
-| RTL N/A  | `apps/storybook/rtl-audit/verified-not-applicable.json`                                               | —                             | —                                                                       | `audit:ChatDictationButton/rtl`           |
-
-Read from source, with no focused test yet:
-
-- FR1: the ghost variant and the microphone icon.
-- FR2: no icon while listening, the bars scaling with `bands`, and the
-  caller's `label` while listening.
-- FR4: the plain accent below the clipping threshold.
-- FR5: ARIA props reaching the wrapper, `className`, `style`, and `xstyle` composing on the wrapper, the
-  `chat-dictation-button` target, and `sm` sizing.
-- FR6: the reduced-motion transition removal.
-
-## Decision log
-
-No component-local decision is recorded.
-
-## Open questions
-
-None.
-
-## Content boundary
-
-This file does not duplicate consumer prop tables, speech-recognition
-behavior, or Button's rules. It links to their owners.

package/src/Chat/ChatDictationButton.test.tsx

@@ -1,108 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {createRef} from 'react';
-import {describe, it, expect, vi} from 'vitest';
-import {fireEvent, render, screen} from '@testing-library/react';
-import {colorVars} from '../theme/tokens.stylex';
-import {ChatDictationButton} from './ChatDictationButton';
-import type {ChatDictationButtonProps} from './ChatDictationButton';
-import type {UseSpeechRecognitionReturn} from './useSpeechRecognition';
-
-function makeDictation(
-  overrides: Partial<UseSpeechRecognitionReturn> = {},
-): UseSpeechRecognitionReturn {
-  return {
-    isSupported: true,
-    isListening: false,
-    isSpeaking: false,
-    volume: 0,
-    bands: [0, 0, 0, 0, 0],
-    rawBands: [0, 0, 0, 0, 0],
-    interimTranscript: '',
-    start: vi.fn(),
-    stop: vi.fn(),
-    abort: vi.fn(),
-    toggle: vi.fn(),
-    ...overrides,
-  };
-}
-
-describe('ChatDictationButton', () => {
-  it('labels and toggles the idle button', () => {
-    const dictation = makeDictation();
-    render(<ChatDictationButton dictation={dictation} />);
-
-    fireEvent.click(screen.getByRole('button', {name: 'Start dictation'}));
-    expect(dictation.toggle).toHaveBeenCalledTimes(1);
-  });
-
-  it('shows five hidden visualizer bars and the stop label while listening', () => {
-    const dictation = makeDictation({
-      isListening: true,
-      bands: [0.02, 0.04, 0.08, 0.12, 0.18],
-    });
-    const {container} = render(<ChatDictationButton dictation={dictation} />);
-
-    expect(screen.getByRole('button', {name: 'Stop dictation'})).toBeEnabled();
-    const visualizer = container.querySelector('[aria-hidden="true"]');
-    expect(visualizer).not.toBeNull();
-    expect(visualizer?.children).toHaveLength(5);
-  });
-
-  it('uses theme-owned colors for clipping feedback', () => {
-    const dictation = makeDictation({
-      isListening: true,
-      volume: 0.3,
-      bands: [0.2, 0.2, 0.2, 0.2, 0.2],
-    });
-    const {container} = render(<ChatDictationButton dictation={dictation} />);
-
-    const barStyle = container
-      .querySelector('[aria-hidden="true"] > span')
-      ?.getAttribute('style');
-    expect(barStyle).toContain('color-mix(in srgb');
-    expect(barStyle).toContain(colorVars['--color-accent']);
-    expect(barStyle).toContain(colorVars['--color-error']);
-    expect(barStyle).not.toContain('hsl(');
-  });
-
-  it('hides unsupported dictation by default', () => {
-    const {container} = render(
-      <ChatDictationButton dictation={makeDictation({isSupported: false})} />,
-    );
-
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it('disables an unsupported button when explicitly kept visible', () => {
-    render(
-      <ChatDictationButton
-        dictation={makeDictation({isSupported: false})}
-        isHiddenWhenUnsupported={false}
-      />,
-    );
-
-    expect(
-      screen.getByRole('button', {name: 'Start dictation'}),
-    ).toBeDisabled();
-  });
-
-  it('forwards the root ref and accepted span props', () => {
-    const ref = createRef<HTMLSpanElement>();
-    const props = {
-      dictation: makeDictation(),
-      'data-testid': 'dictation',
-      'data-custom': 'x',
-      id: 'dictate-1',
-      label: 'Use voice input',
-      ref,
-    } satisfies ChatDictationButtonProps;
-
-    render(<ChatDictationButton {...props} />);
-
-    expect(ref.current).toBe(screen.getByTestId('dictation'));
-    expect(ref.current).toHaveAttribute('data-custom', 'x');
-    expect(ref.current).toHaveAttribute('id', 'dictate-1');
-    expect(screen.getByRole('button', {name: 'Use voice input'})).toBeEnabled();
-  });
-});