img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..014f5aa
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+ return
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+ return
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+ return
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+ return
+}
+
+function DialogOverlay({
+ className,
+ ...props
+}: DialogPrimitive.Backdrop.Props) {
+ return (
+
+ )
+}
+
+function DialogContent({
+ className,
+ children,
+ showCloseButton = true,
+ ...props
+}: DialogPrimitive.Popup.Props & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+
+ {children}
+ {showCloseButton && (
+
+ }
+ >
+
+ Close
+
+ )}
+
+
+ )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogFooter({
+ className,
+ showCloseButton = false,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+ {children}
+ {showCloseButton && (
+ }>
+ Close
+
+ )}
+
+ )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+ return (
+
+ )
+}
+
+function DialogDescription({
+ className,
+ ...props
+}: DialogPrimitive.Description.Props) {
+ return (
+
+ )
+}
+
+export {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogOverlay,
+ DialogPortal,
+ DialogTitle,
+ DialogTrigger,
+}
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
new file mode 100644
index 0000000..986f346
--- /dev/null
+++ b/src/components/ui/progress.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+ className,
+ children,
+ value,
+ ...props
+}: ProgressPrimitive.Root.Props) {
+ return (
+
+ {children}
+
+
+
+
+ )
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+ return (
+
+ )
+}
+
+function ProgressIndicator({
+ className,
+ ...props
+}: ProgressPrimitive.Indicator.Props) {
+ return (
+
+ )
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+ return (
+
+ )
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+ return (
+
+ )
+}
+
+export {
+ Progress,
+ ProgressTrack,
+ ProgressIndicator,
+ ProgressLabel,
+ ProgressValue,
+}
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..84c1e9f
--- /dev/null
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+ className,
+ children,
+ ...props
+}: ScrollAreaPrimitive.Root.Props) {
+ return (
+
+
+ {children}
+
+
+
+
+ )
+}
+
+function ScrollBar({
+ className,
+ orientation = "vertical",
+ ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+ return (
+
+
+
+ )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..6e1369e
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ ...props
+}: SeparatorPrimitive.Props) {
+ return (
+
+ )
+}
+
+export { Separator }
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..69e8a82
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+ delay = 0,
+ ...props
+}: TooltipPrimitive.Provider.Props) {
+ return (
+
+ )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+ return
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+ return
+}
+
+function TooltipContent({
+ className,
+ side = "top",
+ sideOffset = 4,
+ align = "center",
+ alignOffset = 0,
+ children,
+ ...props
+}: TooltipPrimitive.Popup.Props &
+ Pick<
+ TooltipPrimitive.Positioner.Props,
+ "align" | "alignOffset" | "side" | "sideOffset"
+ >) {
+ return (
+
+
+
+ {children}
+
+
+
+
+ )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/components/workbench/Scratchpad.tsx b/src/components/workbench/Scratchpad.tsx
new file mode 100644
index 0000000..ddfdcb5
--- /dev/null
+++ b/src/components/workbench/Scratchpad.tsx
@@ -0,0 +1,366 @@
+'use client';
+
+import {
+ useState,
+ useRef,
+ useCallback,
+ useEffect,
+ type PointerEvent as ReactPointerEvent,
+} from 'react';
+import { Pencil, Type, Eraser, Trash2, Minus, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+type Tool = 'pen' | 'text' | 'eraser';
+
+interface TextBox {
+ id: string;
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+ text: string;
+}
+
+const COLORS = ['#ffffff', '#ef4444', '#22c55e', '#3b82f6', '#eab308', '#a855f7'];
+const SIZES = [2, 4, 6];
+
+export function Scratchpad() {
+ const canvasRef = useRef
(null);
+ const containerRef = useRef(null);
+ const [tool, setTool] = useState('pen');
+ const [color, setColor] = useState('#ffffff');
+ const [strokeSize, setStrokeSize] = useState(2);
+ const [isDrawing, setIsDrawing] = useState(false);
+ const [textBoxes, setTextBoxes] = useState([]);
+ const [dragging, setDragging] = useState<{ id: string; offsetX: number; offsetY: number } | null>(null);
+ const [resizing, setResizing] = useState<{ id: string; startW: number; startH: number; startX: number; startY: number } | null>(null);
+ const lastPoint = useRef<{ x: number; y: number } | null>(null);
+
+ // Setup canvas resolution
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ const container = containerRef.current;
+ if (!canvas || !container) return;
+
+ const resize = () => {
+ const rect = container.getBoundingClientRect();
+ const dpr = window.devicePixelRatio || 1;
+ // Save current drawing
+ const imageData = canvas.getContext('2d')?.getImageData(0, 0, canvas.width, canvas.height);
+
+ canvas.width = rect.width * dpr;
+ canvas.height = rect.height * dpr;
+ canvas.style.width = `${rect.width}px`;
+ canvas.style.height = `${rect.height}px`;
+
+ const ctx = canvas.getContext('2d');
+ if (ctx) {
+ ctx.scale(dpr, dpr);
+ // Restore drawing if dimensions haven't changed too much
+ if (imageData) {
+ const tempCanvas = document.createElement('canvas');
+ tempCanvas.width = imageData.width;
+ tempCanvas.height = imageData.height;
+ tempCanvas.getContext('2d')?.putImageData(imageData, 0, 0);
+ ctx.drawImage(tempCanvas, 0, 0, imageData.width / dpr, imageData.height / dpr);
+ }
+ }
+ };
+
+ resize();
+ const observer = new ResizeObserver(resize);
+ observer.observe(container);
+ return () => observer.disconnect();
+ }, []);
+
+ const getPos = useCallback((e: ReactPointerEvent | globalThis.PointerEvent) => {
+ const canvas = canvasRef.current;
+ if (!canvas) return { x: 0, y: 0 };
+ const rect = canvas.getBoundingClientRect();
+ return {
+ x: e.clientX - rect.left,
+ y: e.clientY - rect.top,
+ };
+ }, []);
+
+ const drawLine = useCallback(
+ (from: { x: number; y: number }, to: { x: number; y: number }) => {
+ const ctx = canvasRef.current?.getContext('2d');
+ if (!ctx) return;
+ ctx.beginPath();
+ ctx.moveTo(from.x, from.y);
+ ctx.lineTo(to.x, to.y);
+ ctx.strokeStyle = tool === 'eraser' ? '#0a0a0a' : color;
+ ctx.lineWidth = tool === 'eraser' ? strokeSize * 6 : strokeSize;
+ ctx.lineCap = 'round';
+ ctx.lineJoin = 'round';
+ ctx.stroke();
+ },
+ [color, strokeSize, tool]
+ );
+
+ const handlePointerDown = useCallback(
+ (e: ReactPointerEvent) => {
+ if (tool === 'text') {
+ // Place a new text box at click position
+ const pos = getPos(e);
+ const newBox: TextBox = {
+ id: crypto.randomUUID(),
+ x: pos.x,
+ y: pos.y,
+ width: 160,
+ height: 60,
+ text: '',
+ };
+ setTextBoxes((prev) => [...prev, newBox]);
+ setTool('pen'); // Switch back to pen after placing
+ return;
+ }
+
+ setIsDrawing(true);
+ lastPoint.current = getPos(e);
+ (e.target as HTMLElement).setPointerCapture(e.pointerId);
+ },
+ [tool, getPos]
+ );
+
+ const handlePointerMove = useCallback(
+ (e: ReactPointerEvent) => {
+ if (!isDrawing || !lastPoint.current) return;
+ const pos = getPos(e);
+ drawLine(lastPoint.current, pos);
+ lastPoint.current = pos;
+ },
+ [isDrawing, getPos, drawLine]
+ );
+
+ const handlePointerUp = useCallback(() => {
+ setIsDrawing(false);
+ lastPoint.current = null;
+ }, []);
+
+ const clearCanvas = useCallback(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+ const dpr = window.devicePixelRatio || 1;
+ ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+ setTextBoxes([]);
+ }, []);
+
+ const deleteTextBox = useCallback((id: string) => {
+ setTextBoxes((prev) => prev.filter((b) => b.id !== id));
+ }, []);
+
+ // Global pointer move/up for dragging text boxes
+ useEffect(() => {
+ if (!dragging && !resizing) return;
+
+ // Prevent text selection while dragging/resizing
+ const preventSelect = (e: Event) => e.preventDefault();
+ document.addEventListener('selectstart', preventSelect);
+
+ const handleMove = (e: globalThis.PointerEvent) => {
+ if (dragging) {
+ setTextBoxes((prev) =>
+ prev.map((b) =>
+ b.id === dragging.id
+ ? { ...b, x: e.clientX - (containerRef.current?.getBoundingClientRect().left ?? 0) - dragging.offsetX, y: e.clientY - (containerRef.current?.getBoundingClientRect().top ?? 0) - dragging.offsetY }
+ : b
+ )
+ );
+ }
+ if (resizing) {
+ const dx = e.clientX - resizing.startX;
+ const dy = e.clientY - resizing.startY;
+ setTextBoxes((prev) =>
+ prev.map((b) =>
+ b.id === resizing.id
+ ? { ...b, width: Math.max(80, resizing.startW + dx), height: Math.max(30, resizing.startH + dy) }
+ : b
+ )
+ );
+ }
+ };
+
+ const handleUp = () => {
+ setDragging(null);
+ setResizing(null);
+ };
+
+ window.addEventListener('pointermove', handleMove);
+ window.addEventListener('pointerup', handleUp);
+ return () => {
+ document.removeEventListener('selectstart', preventSelect);
+ window.removeEventListener('pointermove', handleMove);
+ window.removeEventListener('pointerup', handleUp);
+ };
+ }, [dragging, resizing]);
+
+ return (
+
+ {/* Toolbar */}
+
+
+
+
+
+
+
+ {/* Colors */}
+ {COLORS.map((c) => (
+
+
+ {/* Canvas area */}
+
+
+
+ {/* Text boxes */}
+ {textBoxes.map((box) => (
+
+ {/* Drag handle */}
+
{
+ e.stopPropagation();
+ setDragging({ id: box.id, offsetX: e.nativeEvent.offsetX, offsetY: e.nativeEvent.offsetY + 20 });
+ }}
+ >
+
+
+
+
+