Technical Specification: React useReducer State Machine Generator

1. Overview

A zero-dependency, single-file browser tool that allows developers to define state machine logic (states, actions, payloads) and generates clean, reusable React useReducer boilerplate.

2. Shared Constraints Compliance

• NO STORAGE: The app must not use localStorage, sessionStorage, or cookies. State must be held in an in-memory JS object.
• NO POPUPS: All alerts/prompts must be custom <div> modals with absolute positioning.
• LIGHT MODE ONLY: The design must use a white background with high-contrast text and a professional, crisp color palette (slate/indigo/gray).
• SINGLE FILE: All CSS, JS, and HTML must be embedded in one file. Use CDNs for Tailwind CSS and an icon library (e.g., Phosphor Icons).

3. UI/UX Architecture

• Header: Simple, descriptive title with a brief subtitle explaining the utility.
• Main Layout: Two-pane side-by-side design:
  • Left Pane (Configuration): Input fields to add "State Names" and "Action Types". Each action should include a field for defining the payload shape (e.g., string, number, object).
  • Right Pane (Output): A read-only code editor view (or syntax-highlighted pre block).
• Interaction Elements:
  • Smooth transitions on inputs and button clicks.
  • A prominent "Copy to Clipboard" button in the output pane.
  • Language toggle (JS/TS) that updates the output dynamically.

4. Feature List

• Dynamic Inputs: Add/Remove rows for states and actions dynamically.
• TypeScript/JavaScript Switch: Toggles between vanilla JS and strict TS interfaces.
• Action Creator Toggle: Option to generate action creator functions alongside the reducer.
• Live Preview: Code updates in real-time as inputs are modified.
• Copy to Clipboard: One-click functionality with a subtle visual success state (e.g., button text changes to "Copied!").

5. Visual Palette

• Background: #FFFFFF (pure white).
• Surface/Card: #F8FAFC (slate-50) with a subtle border #E2E8F0 (slate-200) and soft drop shadow.
• Primary Accent: #4F46E5 (indigo-600) for primary buttons and focus states.
• Text: #1E293B (slate-800) for headings, #64748B (slate-500) for body text.
• Code Block Background: #1E293B (slate-800) for contrast (standard developer preference for code viewing, even in light-mode UI).

6. Implementation Notes

• Use requestAnimationFrame for smooth UI updates during input changes.
• Use a standard input and select structure for data entry to ensure high accessibility.
• All generated code must be sanitized and formatted using standard indentation (2 spaces).
• No frameworks (React/Vue/Angular) used for the tool itself; pure DOM manipulation required.