Technical Specification: SQL Query Minifier

1. Overview

A high-performance, single-file browser utility designed to strip SQL queries of extraneous whitespace, comments, and line breaks. The application provides a clean, professional interface for developers to optimize SQL strings for embedding in codebases.

2. Core Features

• Live Minification: Instant processing as the user types.
• Comment Stripping: Automatically removes -- and /* ... */ style comments.
• Whitespace Reduction: Converts multiple spaces/tabs/newlines into a single space where safe.
• Keyword Casing Option: Toggle to force SQL keywords to UPPERCASE or lowercase for consistency.
• One-Click Copy: Instant clipboard integration.
• Download Result: Save the minified query as a .sql file.
• Efficiency Metrics: Shows original size, minified size, and percentage of compression.

3. UI/UX Layout

• Header: Simple, descriptive H1 title with a sub-heading explaining the tool's purpose.
• Main Content Area: A dual-pane layout (stacked on mobile) containing a large input textarea and a read-only output textarea.
• Toolbar: A sticky control bar located between or below inputs containing the 'Minify', 'Copy', 'Download', and 'Clear' buttons.
• Status Bar: Displays character counts and savings percentage.
• Aesthetic: Clean, "SaaS-style" light-mode design. Use soft shadows (shadow-sm or shadow-md), rounded corners (rounded-lg), and generous whitespace. No dark mode.

4. Color Palette

• Background: #F8FAFC (Slate 50)
• Surface/Card: #FFFFFF (Pure White)
• Primary Action (Buttons): #4F46E5 (Indigo 600) with hover state #4338CA.
• Text: #1E293B (Slate 800) for body, #64748B (Slate 500) for helper text.
• Border: #E2E8F0 (Slate 200).
• Success/Highlight: #10B981 (Emerald 500) for success feedback.

5. Development Directives (Strict Rules)

• Single File: All HTML, Tailwind CSS (via CDN), and Vanilla JS must exist within one file. No external build processes.
• No Persistence: Do not use localStorage, sessionStorage, or cookies. Application state must be reset on refresh.
• Performance: Use requestAnimationFrame for UI updates to ensure smooth typing interactions.
• Sanitization: Ensure the output is safely escaped for display. Do not allow execution of user-inputted SQL.
• Accessibility: Ensure buttons have appropriate aria-labels and the interface is navigable via keyboard.
• Responsiveness: Use Flexbox/Grid to switch from side-by-side view on desktops to stacked view on mobile devices.