docs: Remove optional UI components phase and renumber subsequent phases.

Author: alphainfinitus

plans/phases.md

@@ -785,148 +785,7 @@ export function useSpeechInputWithCursor(
 
 ---
 
-## Phase 4: Optional UI Components
-
-**Goal:** Provide composable, unstyled (headless) UI components for common use cases.
-
-### 4.1 SpeechButton Component
-
-Following headless UI best practices (like Radix UI, Headless UI):
-
-```tsx
-// src/components/SpeechButton.tsx
-
-import { forwardRef, type ReactNode, type ButtonHTMLAttributes } from 'react';
-import { useSpeechInput, type UseSpeechInputOptions } from '../hooks/useSpeechInput';
-
-export interface SpeechButtonRenderProps {
-  isListening: boolean;
-  isSupported: boolean;
-  permissionState: 'prompt' | 'granted' | 'denied' | 'unsupported';
-  transcript: string;
-  error: { type: string; message: string } | null;
-}
-
-export interface SpeechButtonProps 
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-    UseSpeechInputOptions {
-  asChild?: boolean; // Radix-style composition
-}
-
-export const SpeechButton = forwardRef<HTMLButtonElement, SpeechButtonProps>(
-  function SpeechButton(
-    { asChild, onClick, ...props },
-    ref
-  ) {
-    const { isListening, toggle } = useSpeechInput(props);
-    const Comp = asChild ? Slot : 'button';
-
-    return (
-      <Comp
-        ref={ref}
-        onClick={(e) => {
-          onClick?.(e);
-          toggle();
-        }}
-        aria-pressed={isListening}
-        {...props}
-      />
-    );
-  }
-);
-```
-
-### 4.2 SpeechInput Component
-
-Controlled input with speech integration:
-
-```tsx
-// src/components/SpeechInput.tsx
-
-import { 
-  forwardRef, 
-  useState, 
-  useRef, 
-  useImperativeHandle,
-  type InputHTMLAttributes,
-  type ReactNode 
-} from 'react';
-import { useSpeechInputWithCursor } from '../hooks/useSpeechInputWithCursor';
-import type { UseSpeechInputOptions } from '../types';
-
-export interface SpeechInputRenderProps {
-  isListening: boolean;
-  isSupported: boolean;
-  permissionState: 'prompt' | 'granted' | 'denied' | 'unsupported';
-  error: { type: string; message: string } | null;
-  toggle: () => Promise<void>;
-}
-
-export interface SpeechInputProps 
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>,
-    UseSpeechInputOptions {
-  /** Controlled value */
-  value: string;
-  /** Change handler */
-  onChange: (value: string) => void;
-  /** Render prop for mic button */
-  renderButton?: (props: SpeechInputRenderProps) => ReactNode;
-  /** Container className */
-  containerClassName?: string;
-}
-
-export const SpeechInput = forwardRef<HTMLInputElement, SpeechInputProps>(
-  function SpeechInput(
-    { 
-      value, 
-      onChange, 
-      renderButton, 
-      containerClassName,
-      ...props 
-    },
-    ref
-  ) {
-    const inputRef = useRef<HTMLInputElement>(null);
-    
-    useImperativeHandle(ref, () => inputRef.current!, []);
-
-    const speech = useSpeechInputWithCursor({
-      inputRef,
-      value,
-      onChange,
-      ...props,
-    });
-
-    return (
-      <div className={containerClassName}>
-        <input
-          ref={inputRef}
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          {...props}
-        />
-        {renderButton?.({
-          isListening: speech.isListening,
-          isSupported: speech.isSupported,
-          permissionState: speech.permissionState,
-          error: speech.error,
-          toggle: speech.toggle,
-        })}
-      </div>
-    );
-  }
-);
-```
-
-### Deliverables
-- [ ] `src/components/SpeechButton.tsx` — Headless speech toggle button
-- [ ] `src/components/SpeechInput.tsx` — Input with speech integration
-- [ ] Storybook stories for components
-- [ ] Accessibility tests (a11y)
-
----
-
-## Phase 5: Documentation & Examples
+## Phase 4: Documentation & Examples
 
 **Goal:** Create comprehensive documentation and example applications.
 

plans/plan.md

@@ -33,8 +33,6 @@ react-web-speech/
 │   ├── index.ts              # Main exports
 │   ├── hooks/
 │   │   └── useSpeechInput.ts # Primary hook
-│   ├── components/
-│   │   └── SpeechButton.tsx  # Optional composable UI
 │   ├── core/
 │   │   ├── recognition.ts    # Web Speech API wrapper
 │   │   ├── permissions.ts    # Mic permission handling
@@ -308,12 +306,7 @@ export default defineConfig({
 3. Error handling with typed errors
 4. Configurable options (lang, continuous, etc.)
 
-### Phase 4: Optional Components (Week 3)
-1. `SpeechButton` composable component
-2. Example/demo app
-3. Storybook documentation
-
-### Phase 5: Polish & Release (Week 4)
+### Phase 4: Polish & Release (Week 3-4)
 1. Comprehensive tests
 2. Documentation and README
 3. npm publish and GitHub release