feat: add comment wrapping to ASCII art tool

Add comment style selector (shadcn Select) to wrap generated ASCII art
with language-appropriate comment syntax (// # -- ; /* */ <!-- --> """).
Refactor preview controls to use shadcn ToggleGroup, Tooltip, and Badge.
Alignment is disabled when a comment style is active.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

components/ascii/ASCIIConverter.tsx

@@ -19,6 +19,7 @@ export function ASCIIConverter() {
   const [asciiArt, setAsciiArt] = React.useState('');
   const [fonts, setFonts] = React.useState<ASCIIFont[]>([]);
   const [isLoading, setIsLoading] = React.useState(false);
+  const commentedTextRef = React.useRef('');
 
   // Load fonts and check URL params on mount
   React.useEffect(() => {
@@ -71,7 +72,7 @@ export function ASCIIConverter() {
     if (!asciiArt) return;
 
     try {
-      await navigator.clipboard.writeText(asciiArt);
+      await navigator.clipboard.writeText(commentedTextRef.current || asciiArt);
       toast.success('Copied to clipboard!');
     } catch (error) {
       console.error('Failed to copy:', error);
@@ -83,7 +84,7 @@ export function ASCIIConverter() {
   const handleDownload = () => {
     if (!asciiArt) return;
 
-    const blob = new Blob([asciiArt], { type: 'text/plain' });
+    const blob = new Blob([commentedTextRef.current || asciiArt], { type: 'text/plain' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
@@ -137,6 +138,7 @@ export function ASCIIConverter() {
           onCopy={handleCopy}
           onDownload={handleDownload}
           onShare={handleShare}
+          onCommentedTextChange={React.useCallback((t: string) => { commentedTextRef.current = t; }, [])}
         />
       </div>