[V0_FILE]typescriptreact:file="lib/ascii-data.ts" isMerged="true" export interface AsciiChar { char: string tags: string[] category: string } export const asciiCharacters: AsciiChar[] = [ // Shapes & Symbols { char: "█", tags: ["block", "full", "solid", "square"], category: "shapes" }, { char: "▓", tags: ["block", "dark", "shade"], category: "shapes" }, { char: "▒", tags: ["block", "medium", "shade"], category: "shapes" }, { char: "░", tags: ["block", "light", "shade"], category: "shapes" }, { char: "▀", tags: ["block", "top", "half"], category: "shapes" }, { char: "▄", tags: ["block", "bottom", "half"], category: "shapes" }, { char: "▌", tags: ["block", "left", "half"], category: "shapes" }, { char: "▐", tags: ["block", "right", "half"], category: "shapes" }, { char: "■", tags: ["square", "solid", "small"], category: "shapes" }, { char: "□", tags: ["square", "empty", "outline"], category: "shapes" }, { char: "●", tags: ["circle", "solid", "dot"], category: "shapes" }, { char: "○", tags: ["circle", "empty", "outline"], category: "shapes" }, { char: "◆", tags: ["diamond", "solid"], category: "shapes" }, { char: "◇", tags: ["diamond", "empty", "outline"], category: "shapes" }, { char: "▲", tags: ["triangle", "up", "arrow"], category: "shapes" }, { char: "▼", tags: ["triangle", "down", "arrow"], category: "shapes" }, { char: "◀", tags: ["triangle", "left", "arrow"], category: "shapes" }, { char: "▶", tags: ["triangle", "right", "arrow"], category: "shapes" }, // Arrows { char: "→", tags: ["arrow", "right", "direction"], category: "arrows" }, { char: "←", tags: ["arrow", "left", "direction"], category: "arrows" }, { char: "↑", tags: ["arrow", "up", "direction"], category: "arrows" }, { char: "↓", tags: ["arrow", "down", "direction"], category: "arrows" }, { char: "↗", tags: ["arrow", "diagonal", "up-right"], category: "arrows" }, { char: "↘", tags: ["arrow", "diagonal", "down-right"], category: "arrows" }, { char: "↙", tags: ["arrow", "diagonal", "down-left"], category: "arrows" }, { char: "↖", tags: ["arrow", "diagonal", "up-left"], category: "arrows" }, { char: "⇒", tags: ["arrow", "double", "right"], category: "arrows" }, { char: "⇐", tags: ["arrow", "double", "left"], category: "arrows" }, // Lines & Borders { char: "─", tags: ["line", "horizontal", "border"], category: "lines" }, { char: "│", tags: ["line", "vertical", "border"], category: "lines" }, { char: "┌", tags: ["corner", "top-left", "border"], category: "lines" }, { char: "┐", tags: ["corner", "top-right", "border"], category: "lines" }, { char: "└", tags: ["corner", "bottom-left", "border"], category: "lines" }, { char: "┘", tags: ["corner", "bottom-right", "border"], category: "lines" }, { char: "├", tags: ["junction", "left", "border"], category: "lines" }, { char: "┤", tags: ["junction", "right", "border"], category: "lines" }, { char: "┬", tags: ["junction", "top", "border"], category: "lines" }, { char: "┴", tags: ["junction", "bottom", "border"], category: "lines" }, { char: "┼", tags: ["cross", "junction", "border"], category: "lines" }, { char: "═", tags: ["line", "double", "horizontal"], category: "lines" }, { char: "║", tags: ["line", "double", "vertical"], category: "lines" }, // Special Characters { char: "★", tags: ["star", "solid", "favorite"], category: "special" }, { char: "☆", tags: ["star", "empty", "outline"], category: "special" }, { char: "♥", tags: ["heart", "love", "solid"], category: "special" }, { char: "♡", tags: ["heart", "love", "empty"], category: "special" }, { char: "♪", tags: ["music", "note", "sound"], category: "special" }, { char: "♫", tags: ["music", "notes", "sound"], category: "special" }, { char: "☀", tags: ["sun", "weather", "bright"], category: "special" }, { char: "☁", tags: ["cloud", "weather"], category: "special" }, { char: "☂", tags: ["umbrella", "rain", "weather"], category: "special" }, { char: "☃", tags: ["snowman", "winter", "cold"], category: "special" }, { char: "✓", tags: ["check", "tick", "yes", "done"], category: "special" }, { char: "✗", tags: ["cross", "x", "no", "wrong"], category: "special" }, { char: "✦", tags: ["sparkle", "star", "shine"], category: "special" }, { char: "✧", tags: ["sparkle", "star", "shine"], category: "special" }, // Letters & Numbers { char: "A", tags: ["letter", "alphabet", "uppercase"], category: "text" }, { char: "B", tags: ["letter", "alphabet", "uppercase"], category: "text" }, { char: "C", tags: ["letter", "alphabet", "uppercase"], category: "text" }, { char: "X", tags: ["letter", "alphabet", "uppercase", "cross"], category: "text" }, { char: "O", tags: ["letter", "alphabet", "uppercase", "circle"], category: "text" }, { char: "0", tags: ["number", "zero"], category: "text" }, { char: "1", tags: ["number", "one"], category: "text" }, { char: "2", tags: ["number", "two"], category: "text" }, // Punctuation & Symbols { char: ".", tags: ["dot", "period", "point"], category: "punctuation" }, { char: ",", tags: ["comma", "separator"], category: "punctuation" }, { char: ":", tags: ["colon", "separator"], category: "punctuation" }, { char: ";", tags: ["semicolon", "separator"], category: "punctuation" }, { char: "!", tags: ["exclamation", "emphasis"], category: "punctuation" }, { char: "?", tags: ["question", "query"], category: "punctuation" }, { char: "#", tags: ["hash", "number", "tag"], category: "punctuation" }, { char: "@", tags: ["at", "email"], category: "punctuation" }, { char: "*", tags: ["asterisk", "star", "multiply"], category: "punctuation" }, { char: "+", tags: ["plus", "add", "cross"], category: "punctuation" }, { char: "-", tags: ["minus", "dash", "hyphen"], category: "punctuation" }, { char: "=", tags: ["equals", "line"], category: "punctuation" }, { char: "/", tags: ["slash", "divide", "forward"], category: "punctuation" }, { char: "\\", tags: ["backslash", "escape"], category: "punctuation" }, { char: "|", tags: ["pipe", "bar", "vertical"], category: "punctuation" }, { char: "~", tags: ["tilde", "wave"], category: "punctuation" }, { char: "^", tags: ["caret", "up", "power"], category: "punctuation" }, { char: "_", tags: ["underscore", "line", "bottom"], category: "punctuation" }, ] export const defaultBrushes = ["█", "●", "★", "♥", "→"] [V0_FILE]typescriptreact:file="lib/fuzzy-search.ts" isMerged="true" export function fuzzySearch(query: string, text: string): boolean { const queryLower = query.toLowerCase() const textLower = text.toLowerCase() let queryIndex = 0 let textIndex = 0 while (queryIndex < queryLower.length && textIndex < textLower.length) { if (queryLower[queryIndex] === textLower[textIndex]) { queryIndex++ } textIndex++ } return queryIndex === queryLower.length } export function searchAsciiCharacters( characters: Array<{ char: string; tags: string[] }>, query: string, ): Array<{ char: string; tags: string[] }> { if (!query.trim()) return characters return characters.filter(({ char, tags }) => { // Check if any tag matches the fuzzy search return tags.some((tag) => fuzzySearch(query, tag)) || fuzzySearch(query, char) }) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "Brushcii", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/canvas.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef } from "react" import type { Cell, ToolMode, ColorToken } from "@/app/page" import type { BrushSize } from "@/app/page" interface CanvasProps { grid: Cell[][] canvasSize: { width: number; height: number } onCellClick: (row: number, col: number, shouldAddToHistory?: boolean) => void brushSize: BrushSize toolMode: ToolMode selectedBrush: string selectedColorToken: ColorToken onDrawShape: ( startRow: number, startCol: number, endRow: number, endCol: number, shape: "rectangle" | "circle", ) => void zoom: number onStrokeStart: () => void onStrokeEnd: () => void onMoveCanvas: (offsetX: number, offsetY: number) => void } export function Canvas({ grid, canvasSize, onCellClick, brushSize, toolMode, selectedBrush, selectedColorToken, onDrawShape, zoom, onStrokeStart, onStrokeEnd, onMoveCanvas, }: CanvasProps) { const [isDrawing, setIsDrawing] = useState(false) const [hoveredCell, setHoveredCell] = useState<{ row: number; col: number } | null>(null) const lastDrawnCell = useRef<{ row: number; col: number } | null>(null) const [shapeStart, setShapeStart] = useState<{ row: number; col: number } | null>(null) const [shapePreview, setShapePreview] = useState<{ row: number; col: number }[]>([]) const [moveStart, setMoveStart] = useState<{ row: number; col: number } | null>(null) const [moveOffset, setMoveOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 }) const calculateShapePreview = ( startRow: number, startCol: number, endRow: number, endCol: number, shape: "rectangle" | "circle", ) => { const cells: { row: number; col: number }[] = [] if (shape === "rectangle") { const minRow = Math.min(startRow, endRow) const maxRow = Math.max(startRow, endRow) const minCol = Math.min(startCol, endCol) const maxCol = Math.max(startCol, endCol) for (let row = minRow; row <= maxRow; row++) { for (let col = minCol; col <= maxCol; col++) { if (row === minRow || row === maxRow || col === minCol || col === maxCol) { if (row < canvasSize.height && col < canvasSize.width) { cells.push({ row, col }) } } } } } else if (shape === "circle") { const centerRow = (startRow + endRow) / 2 const centerCol = (startCol + endCol) / 2 const radiusRow = Math.abs(endRow - startRow) / 2 const radiusCol = Math.abs(endCol - startCol) / 2 for (let row = 0; row < canvasSize.height; row++) { for (let col = 0; col < canvasSize.width; col++) { const normalizedRow = (row - centerRow) / (radiusRow || 1) const normalizedCol = (col - centerCol) / (radiusCol || 1) const distance = normalizedRow * normalizedRow + normalizedCol * normalizedCol if (distance >= 0.8 && distance <= 1.2) { cells.push({ row, col }) } } } } return cells } const handleMouseDown = (row: number, col: number) => { setIsDrawing(true) if (toolMode === "move") { setMoveStart({ row, col }) setMoveOffset({ x: 0, y: 0 }) } else if (toolMode === "rectangle" || toolMode === "circle") { setShapeStart({ row, col }) setShapePreview([]) } else { onStrokeStart() onCellClick(row, col, false) lastDrawnCell.current = { row, col } } } const handleMouseEnter = (row: number, col: number) => { setHoveredCell({ row, col }) if (isDrawing && moveStart && toolMode === "move") { const offsetX = col - moveStart.col const offsetY = row - moveStart.row setMoveOffset({ x: offsetX, y: offsetY }) } else if (isDrawing && shapeStart && (toolMode === "rectangle" || toolMode === "circle")) { const preview = calculateShapePreview(shapeStart.row, shapeStart.col, row, col, toolMode) setShapePreview(preview) } else if (isDrawing && (lastDrawnCell.current?.row !== row || lastDrawnCell.current?.col !== col)) { onCellClick(row, col, false) lastDrawnCell.current = { row, col } } } const handleMouseUp = (row: number, col: number) => { if (isDrawing && moveStart && toolMode === "move") { const offsetX = col - moveStart.col const offsetY = row - moveStart.row if (offsetX !== 0 || offsetY !== 0) { onMoveCanvas(offsetX, offsetY) } setMoveStart(null) setMoveOffset({ x: 0, y: 0 }) } else if (isDrawing && shapeStart && (toolMode === "rectangle" || toolMode === "circle")) { onDrawShape(shapeStart.row, shapeStart.col, row, col, toolMode) setShapeStart(null) setShapePreview([]) } else if (isDrawing) { onStrokeEnd() } setIsDrawing(false) lastDrawnCell.current = null } const isInBrushArea = (row: number, col: number) => { if (!hoveredCell || toolMode === "rectangle" || toolMode === "circle" || toolMode === "move") return false return ( row >= hoveredCell.row && row < hoveredCell.row + brushSize && col >= hoveredCell.col && col < hoveredCell.col + brushSize ) } const isInShapePreview = (row: number, col: number) => { return shapePreview.some((cell) => cell.row === row && cell.col === col) } const getCellWithMoveOffset = (row: number, col: number) => { if (toolMode === "move" && moveStart && (moveOffset.x !== 0 || moveOffset.y !== 0)) { const sourceRow = row - moveOffset.y const sourceCol = col - moveOffset.x if (sourceRow >= 0 && sourceRow < canvasSize.height && sourceCol >= 0 && sourceCol < canvasSize.width) { return grid[sourceRow][sourceCol] } return { char: "", colorToken: "foreground" as ColorToken } } return grid[row][col] } const baseFontSize = Math.max(16, Math.min(28, 512 / Math.max(canvasSize.width, canvasSize.height))) * zoom const charWidth = baseFontSize * 0.6 const charHeight = baseFontSize const getColorClass = (token: ColorToken) => { return token === "foreground" ? "text-foreground" : "text-muted-foreground" } return (

{ setHoveredCell(null) if (isDrawing && !shapeStart && !moveStart) { onStrokeEnd() } setIsDrawing(false) setShapeStart(null) setShapePreview([]) setMoveStart(null) setMoveOffset({ x: 0, y: 0 }) }} onMouseUp={(e) => { const target = e.target as HTMLElement if (target.dataset.row && target.dataset.col) { handleMouseUp(Number.parseInt(target.dataset.row), Number.parseInt(target.dataset.col)) } }} >

{grid.map((row, rowIndex) => row.map((_, colIndex) => { const showShapePreview = isInShapePreview(rowIndex, colIndex) const showBrushPreview = isInBrushArea(rowIndex, colIndex) const cell = getCellWithMoveOffset(rowIndex, colIndex) return (

handleMouseDown(rowIndex, colIndex)} onMouseEnter={() => handleMouseEnter(rowIndex, colIndex)} > {showShapePreview ? selectedBrush : cell.char}

) }), )}

) } [V0_FILE]typescriptreact:file="components/toolbar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { ChevronUp, Eraser, Square, Circle, Move, Sun, Moon } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Input } from "@/components/ui/input" import { asciiCharacters } from "@/lib/ascii-data" import { searchAsciiCharacters } from "@/lib/fuzzy-search" import { useState, useMemo } from "react" import { useTheme } from "next-themes" import type { BrushSize, ToolMode, ColorToken } from "@/app/page" interface ToolbarProps { selectedBrush: string selectedColorToken: ColorToken brushSize: BrushSize recentBrushes: string[] usageCount: Record toolMode: ToolMode onBrushSelect: (char: string) => void onColorTokenChange: (token: ColorToken) => void onBrushSizeChange: (size: BrushSize) => void onToolModeChange: (mode: ToolMode) => void } const brushSizes: { size: BrushSize; label: string; shortLabel: string }[] = [ { size: 1, label: "Fine (1×1)", shortLabel: "XS" }, { size: 2, label: "Small (2×2)", shortLabel: "SM" }, { size: 3, label: "Medium (3×3)", shortLabel: "MD" }, { size: 4, label: "Large (4×4)", shortLabel: "LG" }, ] export function Toolbar({ selectedBrush, selectedColorToken, brushSize, recentBrushes, usageCount, toolMode, onBrushSelect, onColorTokenChange, onBrushSizeChange, onToolModeChange, }: ToolbarProps) { const [searchQuery, setSearchQuery] = useState("") const [isOpen, setIsOpen] = useState(false) const { theme, setTheme } = useTheme() const sortedByUsage = useMemo(() => { return [...asciiCharacters].sort((a, b) => { const countA = usageCount[a.char] || 0 const countB = usageCount[b.char] || 0 return countB - countA }) }, [usageCount]) const filteredCharacters = useMemo(() => { return searchAsciiCharacters(sortedByUsage, searchQuery) }, [sortedByUsage, searchQuery]) const groupedCharacters = useMemo(() => { const groups: Record = {} filteredCharacters.forEach((char) => { if (!groups[char.category]) { groups[char.category] = [] } groups[char.category].push(char) }) return groups }, [filteredCharacters]) const currentSizeLabel = brushSizes.find((s) => s.size === brushSize)?.shortLabel || "XS" return (

{recentBrushes.map((brush) => ( ))}

setSearchQuery(e.target.value)} className="h-9" />

{Object.entries(groupedCharacters).map(([category, chars]) => (

{category}

{chars.map(({ char }) => ( ))}

))}

{brushSizes.map(({ size, label }) => ( ))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useCallback, useEffect, useRef } from "react" import { Canvas } from "@/components/canvas" import { Toolbar } from "@/components/toolbar" import { Header } from "@/components/header" import { defaultBrushes } from "@/lib/ascii-data" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog" export type BrushSize = 1 | 2 | 3 | 4 export type ToolMode = "brush" | "eraser" | "rectangle" | "circle" | "move" export type ColorToken = "foreground" | "muted-foreground" export interface Cell { char: string colorToken: ColorToken } export default function Home() { const [canvasSize, setCanvasSize] = useState({ width: 16, height: 16 }) const [grid, setGrid] = useState( Array(16) .fill(null) .map(() => Array(16) .fill(null) .map(() => ({ char: "", colorToken: "foreground" as ColorToken })), ), ) const [history, setHistory] = useState([ Array(16) .fill(null) .map(() => Array(16) .fill(null) .map(() => ({ char: "", colorToken: "foreground" as ColorToken })), ), ]) const [historyIndex, setHistoryIndex] = useState(0) const [selectedBrush, setSelectedBrush] = useState("█") const [selectedColorToken, setSelectedColorToken] = useState("foreground") const [brushSize, setBrushSize] = useState(1) const [toolMode, setToolMode] = useState("brush") const [recentBrushes, setRecentBrushes] = useState(defaultBrushes) const [usageCount, setUsageCount] = useState>({}) const [showClearDialog, setShowClearDialog] = useState(false) const [zoom, setZoom] = useState(1.0) const strokeStartGrid = useRef(null) const isStrokeActive = useRef(false) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Undo/Redo shortcuts if ((e.metaKey || e.ctrlKey) && e.key === "z" && !e.shiftKey) { e.preventDefault() handleUndo() } else if ((e.metaKey || e.ctrlKey) && (e.key === "y" || (e.key === "z" && e.shiftKey))) { e.preventDefault() handleRedo() } else if ((e.metaKey || e.ctrlKey) && (e.key === "=" || e.key === "+")) { e.preventDefault() handleZoomIn() } else if ((e.metaKey || e.ctrlKey) && (e.key === "-" || e.key === "_")) { e.preventDefault() handleZoomOut() } else if ((e.metaKey || e.ctrlKey) && e.key === "0") { e.preventDefault() handleZoomReset() } // Brush shortcut (B) else if (e.key === "b" || e.key === "B") { if (document.activeElement?.tagName !== "INPUT") { e.preventDefault() setToolMode("brush") } } // Eraser shortcut (E) else if (e.key === "e" || e.key === "E") { if (document.activeElement?.tagName !== "INPUT") { e.preventDefault() setToolMode("eraser") } } else if (e.key === "m" || e.key === "M") { if (document.activeElement?.tagName !== "INPUT") { e.preventDefault() setToolMode("move") } } // Clear canvas shortcut (DEL) else if (e.key === "Delete" || e.key === "Backspace") { if (document.activeElement?.tagName !== "INPUT") { e.preventDefault() setShowClearDialog(true) } } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [historyIndex, history]) const handleUndo = useCallback(() => { if (historyIndex > 0) { const newIndex = historyIndex - 1 setHistoryIndex(newIndex) setGrid(history[newIndex]) } }, [historyIndex, history]) const handleRedo = useCallback(() => { if (historyIndex < history.length - 1) { const newIndex = historyIndex + 1 setHistoryIndex(newIndex) setGrid(history[newIndex]) } }, [historyIndex, history]) const updateGrid = useCallback( (row: number, col: number, shouldAddToHistory = false) => { setGrid((prev) => { const newGrid = prev.map((r) => [...r]) // Apply brush size for (let i = 0; i < brushSize; i++) { for (let j = 0; j < brushSize; j++) { const targetRow = row + i const targetCol = col + j if (targetRow < canvasSize.height && targetCol < canvasSize.width) { if (toolMode === "eraser") { newGrid[targetRow][targetCol] = { char: "", colorToken: "foreground", } } else { newGrid[targetRow][targetCol] = { char: selectedBrush, colorToken: selectedColorToken, } } } } } if (shouldAddToHistory) { setHistory((prevHistory) => { const newHistory = prevHistory.slice(0, historyIndex + 1) newHistory.push(newGrid) // Limit history to 50 states if (newHistory.length > 50) { newHistory.shift() setHistoryIndex((prev) => prev) } else { setHistoryIndex((prev) => prev + 1) } return newHistory }) } return newGrid }) // Update usage count only in brush mode if (toolMode === "brush") { setUsageCount((prev) => ({ ...prev, [selectedBrush]: (prev[selectedBrush] || 0) + 1, })) // Update recent brushes setRecentBrushes((prev) => { const filtered = prev.filter((b) => b !== selectedBrush) return [selectedBrush, ...filtered].slice(0, 5) }) } }, [selectedBrush, selectedColorToken, brushSize, canvasSize, historyIndex, toolMode], ) const drawShape = useCallback( (startRow: number, startCol: number, endRow: number, endCol: number, shape: "rectangle" | "circle") => { setGrid((prev) => { const newGrid = prev.map((r) => [...r]) if (shape === "rectangle") { // Draw rectangle outline const minRow = Math.min(startRow, endRow) const maxRow = Math.max(startRow, endRow) const minCol = Math.min(startCol, endCol) const maxCol = Math.max(startCol, endCol) for (let row = minRow; row <= maxRow; row++) { for (let col = minCol; col <= maxCol; col++) { // Only draw on the border if (row === minRow || row === maxRow || col === minCol || col === maxCol) { if (row < canvasSize.height && col < canvasSize.width) { newGrid[row][col] = { char: selectedBrush, colorToken: selectedColorToken, } } } } } } else if (shape === "circle") { // Draw circle outline using midpoint circle algorithm const centerRow = (startRow + endRow) / 2 const centerCol = (startCol + endCol) / 2 const radiusRow = Math.abs(endRow - startRow) / 2 const radiusCol = Math.abs(endCol - startCol) / 2 // Draw ellipse by checking distance for (let row = 0; row < canvasSize.height; row++) { for (let col = 0; col < canvasSize.width; col++) { const normalizedRow = (row - centerRow) / (radiusRow || 1) const normalizedCol = (col - centerCol) / (radiusCol || 1) const distance = normalizedRow * normalizedRow + normalizedCol * normalizedCol // Check if point is on the circle perimeter (with some tolerance) if (distance >= 0.8 && distance <= 1.2) { newGrid[row][col] = { char: selectedBrush, colorToken: selectedColorToken, } } } } } setHistory((prevHistory) => { const newHistory = prevHistory.slice(0, historyIndex + 1) newHistory.push(newGrid) if (newHistory.length > 50) { newHistory.shift() setHistoryIndex((prev) => prev) } else { setHistoryIndex((prev) => prev + 1) } return newHistory }) return newGrid }) // Update usage count setUsageCount((prev) => ({ ...prev, [selectedBrush]: (prev[selectedBrush] || 0) + 1, })) setRecentBrushes((prev) => { const filtered = prev.filter((b) => b !== selectedBrush) return [selectedBrush, ...filtered].slice(0, 5) }) }, [selectedBrush, selectedColorToken, canvasSize, historyIndex], ) const handleBrushSelect = useCallback((char: string) => { setSelectedBrush(char) setToolMode("brush") }, []) const handleColorTokenChange = useCallback((token: ColorToken) => { setSelectedColorToken(token) }, []) const handleToolModeChange = useCallback((mode: ToolMode) => { setToolMode(mode) }, []) const handleCanvasSizeChange = useCallback((width: number, height: number) => { setCanvasSize({ width, height }) const newGrid = Array(height) .fill(null) .map(() => Array(width) .fill(null) .map(() => ({ char: "", colorToken: "foreground" as ColorToken })), ) setGrid(newGrid) setHistory([newGrid]) setHistoryIndex(0) }, []) const handleClear = useCallback(() => { const newGrid = Array(canvasSize.height) .fill(null) .map(() => Array(canvasSize.width) .fill(null) .map(() => ({ char: "", colorToken: "foreground" as ColorToken })), ) setGrid(newGrid) setHistory((prev) => { const newHistory = prev.slice(0, historyIndex + 1) newHistory.push(newGrid) return newHistory }) setHistoryIndex((prev) => prev + 1) setShowClearDialog(false) }, [canvasSize, historyIndex]) const handleZoomIn = useCallback(() => { setZoom((prev) => Math.min(prev + 0.25, 3.0)) }, []) const handleZoomOut = useCallback(() => { setZoom((prev) => Math.max(prev - 0.25, 0.25)) }, []) const handleZoomReset = useCallback(() => { setZoom(1.0) }, []) const handleStrokeStart = useCallback(() => { strokeStartGrid.current = grid.map((r) => [...r]) isStrokeActive.current = true }, [grid]) const handleStrokeEnd = useCallback(() => { if (isStrokeActive.current && strokeStartGrid.current) { // Add the final state to history setHistory((prevHistory) => { const newHistory = prevHistory.slice(0, historyIndex + 1) newHistory.push(grid) if (newHistory.length > 50) { newHistory.shift() setHistoryIndex((prev) => prev) } else { setHistoryIndex((prev) => prev + 1) } return newHistory }) } strokeStartGrid.current = null isStrokeActive.current = false }, [grid, historyIndex]) const moveCanvas = useCallback( (offsetX: number, offsetY: number) => { setGrid((prev) => { const newGrid = Array(canvasSize.height) .fill(null) .map(() => Array(canvasSize.width) .fill(null) .map(() => ({ char: "", colorToken: "foreground" as ColorToken })), ) // Copy cells to new positions, discarding those that fall outside bounds for (let row = 0; row < canvasSize.height; row++) { for (let col = 0; col < canvasSize.width; col++) { const cell = prev[row][col] if (cell.char) { const newRow = row + offsetY const newCol = col + offsetX // Only copy if new position is within bounds if (newRow >= 0 && newRow < canvasSize.height && newCol >= 0 && newCol < canvasSize.width) { newGrid[newRow][newCol] = cell } } } } // Add to history setHistory((prevHistory) => { const newHistory = prevHistory.slice(0, historyIndex + 1) newHistory.push(newGrid) if (newHistory.length > 50) { newHistory.shift() setHistoryIndex((prev) => prev) } else { setHistoryIndex((prev) => prev + 1) } return newHistory }) return newGrid }) }, [canvasSize, historyIndex], ) const handleFindReplace = useCallback( (findChar: string, replaceChar: string) => { setGrid((prev) => { const newGrid = prev.map((row) => row.map((cell) => { if (cell.char === findChar) { return { ...cell, char: replaceChar } } return cell }), ) // Add to history setHistory((prevHistory) => { const newHistory = prevHistory.slice(0, historyIndex + 1) newHistory.push(newGrid) if (newHistory.length > 50) { newHistory.shift() setHistoryIndex((prev) => prev) } else { setHistoryIndex((prev) => prev + 1) } return newHistory }) return newGrid }) }, [historyIndex], ) return (

setShowClearDialog(true)} onUndo={handleUndo} onRedo={handleRedo} canUndo={historyIndex > 0} canRedo={historyIndex < history.length - 1} zoom={zoom} onZoomIn={handleZoomIn} onZoomOut={handleZoomOut} onZoomReset={handleZoomReset} onFindReplace={handleFindReplace} />

Clear canvas? This will clear all your artwork from the canvas. This action cannot be undone. Cancel Clear

) } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Copy, Download, Settings, Undo, Redo, ZoomIn, ZoomOut, Eye, Search, ArrowRight, Check, HelpCircle, } from "lucide-react" import { useToast } from "@/hooks/use-toast" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { useState, useRef, useEffect, useMemo } from "react" import type { Cell } from "@/app/page" import { asciiCharacters } from "@/lib/ascii-data" import { searchAsciiCharacters } from "@/lib/fuzzy-search" interface HeaderProps { grid: Cell[][] canvasSize: { width: number; height: number } onCanvasSizeChange: (width: number, height: number) => void onClear: () => void onUndo: () => void onRedo: () => void canUndo: boolean canRedo: boolean zoom: number onZoomIn: () => void onZoomOut: () => void onZoomReset: () => void onFindReplace: (findChar: string, replaceChar: string) => void } type ExportFormat = "plain" | "markdown" | "html" export function Header({ grid, canvasSize, onCanvasSizeChange, onClear, onUndo, onRedo, canUndo, canRedo, zoom, onZoomIn, onZoomOut, onZoomReset, onFindReplace, }: HeaderProps) { const { toast } = useToast() const [width, setWidth] = useState(canvasSize.width.toString()) const [height, setHeight] = useState(canvasSize.height.toString()) const [previewOpen, setPreviewOpen] = useState(false) const [exportFormat, setExportFormat] = useState("html") const [includeColorStyling, setIncludeColorStyling] = useState(false) const [settingsOpen, setSettingsOpen] = useState(false) const [findReplaceOpen, setFindReplaceOpen] = useState(false) const [findChar, setFindChar] = useState("") const [replaceChar, setReplaceChar] = useState("") const [findPopoverOpen, setFindPopoverOpen] = useState(false) const [replacePopoverOpen, setReplacePopoverOpen] = useState(false) const [replaceSearchQuery, setReplaceSearchQuery] = useState("") const [isDraggingZoom, setIsDraggingZoom] = useState(false) const dragStartX = useRef(0) const dragStartY = useRef(0) const dragStartZoom = useRef(1) const usedCharacters = useMemo(() => { const chars = new Set() grid.forEach((row) => { row.forEach((cell) => { if (cell.char) { chars.add(cell.char) } }) }) return Array.from(chars) }, [grid]) const filteredReplaceCharacters = useMemo(() => { return searchAsciiCharacters(asciiCharacters, replaceSearchQuery) }, [replaceSearchQuery]) const groupedReplaceCharacters = useMemo(() => { const groups: Record = {} filteredReplaceCharacters.forEach((char) => { if (!groups[char.category]) { groups[char.category] = [] } groups[char.category].push(char) }) return groups }, [filteredReplaceCharacters]) const handleFindReplaceSubmit = () => { if (findChar && replaceChar) { onFindReplace(findChar, replaceChar) toast({ title: "Replaced!", description: `All instances of "${findChar}" replaced with "${replaceChar}"`, }) setFindChar("") setReplaceChar("") setFindReplaceOpen(false) } } const handleZoomDragStart = (e: React.MouseEvent) => { setIsDraggingZoom(true) dragStartX.current = e.clientX dragStartY.current = e.clientY dragStartZoom.current = zoom e.preventDefault() } useEffect(() => { if (!isDraggingZoom) return const handleMouseMove = (e: MouseEvent) => { const deltaX = e.clientX - dragStartX.current const deltaY = dragStartY.current - e.clientY const delta = deltaX + deltaY const zoomDelta = delta * 0.005 const newZoom = Math.max(0.25, Math.min(3.0, dragStartZoom.current + zoomDelta)) const steps = Math.round((newZoom - dragStartZoom.current) / 0.25) if (steps > 0) { for (let i = 0; i < steps; i++) onZoomIn() } else if (steps < 0) { for (let i = 0; i < Math.abs(steps); i++) onZoomOut() } } const handleMouseUp = () => { setIsDraggingZoom(false) } document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) return () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) } }, [isDraggingZoom, onZoomIn, onZoomOut, zoom]) const generateAsciiArt = () => { if (!includeColorStyling) { // Plain ASCII without color classes return grid .map((row) => { const line = row.map((cell) => cell.char || " ").join("") return line.padEnd(canvasSize.width, " ") }) .join("\n") } // ASCII with color classes (for HTML/styled output) return grid .map((row) => { return row .map((cell) => { if (!cell.char) return " " const colorClass = cell.colorToken === "foreground" ? "text-foreground" : "text-muted-foreground" return `${cell.char}` }) .join("") }) .join("\n") } const generateAsciiArtWithFormatting = () => { const art = generateAsciiArt() if (exportFormat === "markdown") { return "```\n" + art + "\n```" } if (exportFormat === "html") { return "

\n" + art + "\n

" } return art } const handleCopy = () => { const art = generateAsciiArtWithFormatting() navigator.clipboard.writeText(art) let description = "ASCII art copied" if (exportFormat === "markdown") description += " with markdown code block" else if (exportFormat === "html") description += " with HTML

 tag"
    if (includeColorStyling) description += " (with color styling)"

    toast({
      title: "Copied!",
      description,
    })
  }

  const handleCopyFromPreview = () => {
    const art = generateAsciiArtWithFormatting()
    navigator.clipboard.writeText(art)

    let description = "ASCII art copied"
    if (exportFormat === "markdown") description += " with markdown code block"
    else if (exportFormat === "html") description += " with HTML  tag"
    if (includeColorStyling) description += " (with color styling)"

    toast({
      title: "Copied!",
      description,
    })
    setPreviewOpen(false)
  }

  const handleDownload = () => {
    const art = generateAsciiArtWithFormatting()
    const blob = new Blob([art], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = "ascii-art.txt"
    a.click()
    URL.revokeObjectURL(url)

    let description = "ASCII art saved"
    if (exportFormat === "markdown") description += " with markdown code block"
    else if (exportFormat === "html") description += " with HTML  tag"
    if (includeColorStyling) description += " (with color styling)"

    toast({
      title: "Downloaded!",
      description,
    })
  }

  const handleSizeChange = () => {
    const w = Number.parseInt(width)
    const h = Number.parseInt(height)
    if (w > 0 && w <= 64 && h > 0 && h <= 64) {
      onCanvasSizeChange(w, h)
      toast({
        title: "Canvas resized",
        description: `New size: ${w}×${h}`,
      })
    }
  }

  const presetSizes = [
    { label: "12×12", width: 12, height: 12 },
    { label: "16×16", width: 16, height: 16 },
    { label: "24×24", width: 24, height: 24 },
    { label: "32×16", width: 32, height: 16 },
  ]

  const getPreviewDescription = () => {
    let desc = "Copy the ASCII art below. "
    if (exportFormat === "markdown") {
      desc +=
        "It includes code block formatting (```) for easy pasting into markdown-aware apps like Discord, Slack, GitHub, etc."
    } else if (exportFormat === "html") {
      desc += "It includes HTML  tag formatting for easy pasting into HTML documents or editors."
    } else {
      desc += "It's in clean format without any wrapping - paste into any monospace text editor."
    }
    if (includeColorStyling) {
      desc += " Color styling is included using shadcn classes."
    }
    return desc
  }

  return (
    
      
        
          Brushcii
        

        
          
          

          

          
            
              
            
            
              
                Find and Replace
                
                  
                    
                      
                    
                    
                      
                        Characters in canvas:
                        
                          {usedCharacters.map((char) => (
                            
                          ))}
                        
                      
                    
                  

                  

                  
                    
                      
                    
                    
                      
                         setReplaceSearchQuery(e.target.value)}
                          className="h-9"
                        />
                        
                          {Object.entries(groupedReplaceCharacters).map(([category, chars]) => (
                            
                              
                                {category}
                              
                              
                                {chars.map(({ char }) => (
                                  
                                ))}
                              
                            
                          ))}
                        
                      
                    
                  

                  
                
              
            
          

          

          
          
          

          

          
            
              
            
            
              
                
                  Canvas Size
                  
                    {presetSizes.map((preset) => (
                      
                    ))}
                  
                  
                    
                      
                        Width
                      
                       setWidth(e.target.value)}
                        className="h-8"
                      />
                    
                    
                      
                        Height
                      
                       setHeight(e.target.value)}
                        className="h-8"
                      />
                    
                  
                  
                
                
                  
                
                
                  Export Format
                   setExportFormat(value as ExportFormat)}>
                    
                      
                      
                        ASCII Only
                      
                    
                    
                      
                      
                        Markdown Code Block
                      
                    
                    
                      
                      
                        {"HTML  Tag"}
                      
                    
                  
                  Choose how to format your exported ASCII art
                
                {exportFormat === "html" && (
                  
                    
                       setIncludeColorStyling(checked as boolean)}
                      />
                      
                        Include shadcn color styling
                      
                    
                    
                      Wraps characters with text-foreground and text-muted-foreground classes
                    
                  
                )}
              
            
          

          
            
              
            
            
              
                ASCII Art Preview
                {getPreviewDescription()}
              
              
                                  {includeColorStyling ? (
                    
                  ) : (
                    generateAsciiArt()
                  )}
                
                
              
            
          

          
          
        
      
    
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.988 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.65 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.07 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.18 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  /* Increased lightness for better contrast (0.269 -> 0.30) */
  --secondary: oklch(0.3 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  /* Increased lightness for better contrast (0.269 -> 0.30) */
  --muted: oklch(0.3 0 0);
  --muted-foreground: oklch(0.6 0 0);
  /* Increased lightness for better contrast (0.269 -> 0.30) */
  --accent: oklch(0.3 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  /* Increased lightness for more visible borders (0.269 -> 0.35) */
  --border: oklch(0.3 0 0);
  /* Increased lightness to match border (0.269 -> 0.35) */
  --input: oklch(0.35 0 0);
  /* Increased lightness for more visible focus rings (0.439 -> 0.50) */
  --ring: oklch(0.5 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --radius: 0.625rem;
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  /* Increased lightness to match other muted elements (0.269 -> 0.30) */
  --sidebar-accent: oklch(0.3 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  /* Increased lightness to match border (0.269 -> 0.35) */
  --sidebar-border: oklch(0.35 0 0);
  /* Increased lightness to match ring (0.439 -> 0.50) */
  --sidebar-ring: oklch(0.5 0 0);
}

@theme inline {
  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import "./globals.css"
import { Toaster } from "@/components/ui/toaster"
import { ThemeProvider } from "next-themes"

export const metadata: Metadata = {
  title: "Brushcii - ASCII Art Painter",
  description: "Create beautiful ASCII art with an intuitive painting interface",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    
      
        
          {children}
          
        
      
    
  )
}

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This