@catalystsoftware/ui 1.0.12 → 1.0.15

package/dist/components/catalyst-ui/interactive/drawing-2.tsx

@@ -0,0 +1,1147 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { Button, Input, } from "~/components/catalyst-ui";
+import { cn, } from "~/components/catalyst-ui";
+import { Pen, Square, Circle, Type, Image, Minus, Download, Trash2, Undo, Redo, Palette, Settings, Move, RotateCw, ZoomIn, ZoomOut, Save, FileImage, FileText, File, Brush, Eraser, MousePointer, } from "lucide-react";
+
+export interface DrawingShape {
+  id: string;
+  type: "rectangle" | "circle" | "line" | "text" | "image" | "freehand";
+  x: number;
+  y: number;
+  width?: number;
+  height?: number;
+  endX?: number;
+  endY?: number;
+  text?: string;
+  fontSize?: number;
+  color: string;
+  fillColor?: string;
+  strokeWidth: number;
+  points?: { x: number; y: number }[];
+  src?: string;
+  rotation?: number;
+}
+
+export interface DrawingProps {
+  width?: number;
+  height?: number;
+  backgroundColor?: string;
+  shapes?: DrawingShape[];
+  onShapesChange?: (shapes: DrawingShape[]) => void;
+  onExport?: (format: "svg" | "png" | "pdf") => void;
+  readOnly?: boolean;
+  showToolbar?: boolean;
+  showGrid?: boolean;
+  gridSize?: number;
+  className?: string;
+  variant?: "default" | "bordered" | "filled";
+  tool?: "select" | "rectangle" | "circle" | "line" | "text" | "freehand" | "eraser";
+  strokeColor?: string;
+  fillColor?: string;
+  strokeWidth?: number;
+  fontSize?: number;
+}
+
+export interface DrawingSurfaceProps {
+  children: React.ReactNode;
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+export interface DrawingToolbarProps {
+  activeTool: string;
+  onToolChange: (tool: string) => void;
+  strokeColor: string;
+  fillColor: string;
+  strokeWidth: number;
+  fontSize: number;
+  onStrokeColorChange: (color: string) => void;
+  onFillColorChange: (color: string) => void;
+  onStrokeWidthChange: (width: number) => void;
+  onFontSizeChange: (size: number) => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onClear: () => void;
+  onExport: (format: "svg" | "png" | "pdf") => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  className?: string;
+}
+
+export function DrawingSurface({ 
+  children, 
+  width = 800, 
+  height = 600,
+  className 
+}: DrawingSurfaceProps) {
+  return (
+    <div 
+      className={cn(
+        "drawing-surface relative border border-border rounded-lg overflow-hidden bg-background",
+        className
+      )}
+      style={{ width, height }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DrawingToolbar({
+  activeTool,
+  onToolChange,
+  strokeColor,
+  fillColor,
+  strokeWidth,
+  fontSize,
+  onStrokeColorChange,
+  onFillColorChange,
+  onStrokeWidthChange,
+  onFontSizeChange,
+  onUndo,
+  onRedo,
+  onClear,
+  onExport,
+  canUndo,
+  canRedo,
+  className
+}: DrawingToolbarProps) {
+  const tools = [
+    { id: "select", icon: MousePointer, label: "Select" },
+    { id: "rectangle", icon: Square, label: "Rectangle" },
+    { id: "circle", icon: Circle, label: "Circle" },
+    { id: "line", icon: Minus, label: "Line" },
+    { id: "text", icon: Type, label: "Text" },
+    { id: "freehand", icon: Pen, label: "Freehand" },
+    { id: "eraser", icon: Eraser, label: "Eraser" },
+  ];
+
+  return (
+    <div className={cn("drawing-toolbar flex flex-wrap items-center gap-2 p-4 bg-muted/30 border-b", className)}>
+      <div className="flex items-center gap-1 border-r pr-4 mr-2">
+        {tools.map((tool) => (
+          <Button
+            key={tool.id}
+            variant={activeTool === tool.id ? "default" : "ghost"}
+            size="sm"
+            onClick={() => onToolChange(tool.id)}
+            title={tool.label}
+          >
+            <tool.icon className="w-4 h-4" />
+          </Button>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-2 border-r pr-4 mr-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onUndo}
+          disabled={!canUndo}
+          title="Undo"
+        >
+          <Undo className="w-4 h-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onRedo}
+          disabled={!canRedo}
+          title="Redo"
+        >
+          <Redo className="w-4 h-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onClear}
+          title="Clear All"
+        >
+          <Trash2 className="w-4 h-4" />
+        </Button>
+      </div>
+
+      <div className="flex items-center gap-2 border-r pr-4 mr-2">
+        <div className="flex items-center gap-1">
+          <label className="text-xs">Stroke:</label>
+          <input
+            type="color"
+            value={strokeColor}
+            onChange={(e) => onStrokeColorChange(e.target.value)}
+            className="w-8 h-8 rounded border cursor-pointer"
+            title="Stroke Color"
+          />
+        </div>
+        <div className="flex items-center gap-1">
+          <label className="text-xs">Fill:</label>
+          <input
+            type="color"
+            value={fillColor}
+            onChange={(e) => onFillColorChange(e.target.value)}
+            className="w-8 h-8 rounded border cursor-pointer"
+            title="Fill Color"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 border-r pr-4 mr-2">
+        <div className="flex items-center gap-1">
+          <label className="text-xs">Width:</label>
+          <Input
+            type="number"
+            value={strokeWidth}
+            onChange={(e) => onStrokeWidthChange(Number(e.target.value))}
+            min={1}
+            max={20}
+            className="w-16 h-8 text-xs"
+          />
+        </div>
+        <div className="flex items-center gap-1">
+          <label className="text-xs">Font:</label>
+          <Input
+            type="number"
+            value={fontSize}
+            onChange={(e) => onFontSizeChange(Number(e.target.value))}
+            min={8}
+            max={72}
+            className="w-16 h-8 text-xs"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => onExport("svg")}
+          title="Export as SVG"
+        >
+          <FileText className="w-4 h-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => onExport("png")}
+          title="Export as PNG"
+        >
+          <FileImage className="w-4 h-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => onExport("pdf")}
+          title="Export as PDF"
+        >
+          <File className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function DrawingV2({
+  width = 800,
+  height = 600,
+  backgroundColor = "#ffffff",
+  shapes = [],
+  onShapesChange,
+  onExport,
+  readOnly = false,
+  showToolbar = true,
+  showGrid = false,
+  gridSize = 20,
+  className,
+  variant = "default",
+  tool: controlledTool,
+  strokeColor: controlledStrokeColor,
+  fillColor: controlledFillColor,
+  strokeWidth: controlledStrokeWidth,
+  fontSize: controlledFontSize,
+  ...props
+}: DrawingProps) {
+  const [internalShapes, setInternalShapes] = useState<DrawingShape[]>(shapes);
+  const [selectedShapeId, setSelectedShapeId] = useState<string | null>(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [currentShape, setCurrentShape] = useState<DrawingShape | null>(null);
+  const [activeTool, setActiveTool] = useState(controlledTool || "select");
+  const [strokeColor, setStrokeColor] = useState(controlledStrokeColor || "#000000");
+  const [fillColor, setFillColor] = useState(controlledFillColor || "transparent");
+  const [strokeWidth, setStrokeWidth] = useState(controlledStrokeWidth || 2);
+  const [fontSize, setFontSize] = useState(controlledFontSize || 16);
+  const [history, setHistory] = useState<DrawingShape[][]>([shapes]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+  const [textInput, setTextInput] = useState("");
+  const [textPosition, setTextPosition] = useState<{ x: number; y: number } | null>(null);
+
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  const currentShapes = onShapesChange ? shapes : internalShapes;
+  const currentStrokeColor = controlledStrokeColor || strokeColor;
+  const currentFillColor = controlledFillColor || fillColor;
+  const currentStrokeWidth = controlledStrokeWidth || strokeWidth;
+  const currentFontSize = controlledFontSize || fontSize;
+  const currentTool = controlledTool || activeTool;
+
+  const addToHistory = useCallback((newShapes: DrawingShape[]) => {
+    const newHistory = history.slice(0, historyIndex + 1);
+    newHistory.push([...newShapes]);
+    setHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+  }, [history, historyIndex]);
+
+  const updateShapes = useCallback((newShapes: DrawingShape[]) => {
+    if (onShapesChange) {
+      onShapesChange(newShapes);
+    } else {
+      setInternalShapes(newShapes);
+    }
+    addToHistory(newShapes);
+  }, [onShapesChange, addToHistory]);
+
+  const generateId = () => Math.random().toString(36).substr(2, 9);
+
+  const getMousePos = (e: React.MouseEvent) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect) return { x: 0, y: 0 };
+    
+    return {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (readOnly) return;
+
+    const pos = getMousePos(e);
+    
+    if (currentTool === "text") {
+      setTextPosition(pos);
+      return;
+    }
+
+    setIsDrawing(true);
+    const newShape: DrawingShape = {
+      id: generateId(),
+      type: currentTool as any,
+      x: pos.x,
+      y: pos.y,
+      color: currentStrokeColor,
+      fillColor: currentFillColor === "transparent" ? undefined : currentFillColor,
+      strokeWidth: currentStrokeWidth,
+      points: currentTool === "freehand" ? [pos] : undefined,
+    };
+
+    setCurrentShape(newShape);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!isDrawing || !currentShape || readOnly) return;
+
+    const pos = getMousePos(e);
+    
+    if (currentTool === "freehand") {
+      setCurrentShape(prev => ({
+        ...prev!,
+        points: [...(prev!.points || []), pos]
+      }));
+    } else if (currentTool === "rectangle" || currentTool === "circle") {
+      setCurrentShape(prev => ({
+        ...prev!,
+        width: pos.x - prev!.x,
+        height: pos.y - prev!.y
+      }));
+    } else if (currentTool === "line") {
+      setCurrentShape(prev => ({
+        ...prev!,
+        endX: pos.x,
+        endY: pos.y
+      }));
+    }
+  };
+
+  const handleMouseUp = () => {
+    if (!isDrawing || !currentShape || readOnly) return;
+
+    setIsDrawing(false);
+    
+    const newShapes = [...currentShapes, currentShape];
+    updateShapes(newShapes);
+    setCurrentShape(null);
+  };
+
+  const handleTextSubmit = () => {
+    if (!textInput.trim() || !textPosition) return;
+
+    const textShape: DrawingShape = {
+      id: generateId(),
+      type: "text",
+      x: textPosition.x,
+      y: textPosition.y,
+      text: textInput,
+      color: currentStrokeColor,
+      strokeWidth: 1,
+      fontSize: currentFontSize,
+    };
+
+    const newShapes = [...currentShapes, textShape];
+    updateShapes(newShapes);
+    setTextInput("");
+    setTextPosition(null);
+  };
+
+  const handleUndo = () => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      setHistoryIndex(newIndex);
+      const shapesToRestore = history[newIndex];
+      if (onShapesChange) {
+        onShapesChange(shapesToRestore);
+      } else {
+        setInternalShapes(shapesToRestore);
+      }
+    }
+  };
+
+  const handleRedo = () => {
+    if (historyIndex < history.length - 1) {
+      const newIndex = historyIndex + 1;
+      setHistoryIndex(newIndex);
+      const shapesToRestore = history[newIndex];
+      if (onShapesChange) {
+        onShapesChange(shapesToRestore);
+      } else {
+        setInternalShapes(shapesToRestore);
+      }
+    }
+  };
+
+  const handleClear = () => {
+    updateShapes([]);
+  };
+
+  const handleExport = (format: "svg" | "png" | "pdf") => {
+    if (onExport) {
+      onExport(format);
+    } else {
+      if (format === "svg" && svgRef.current) {
+        const svgData = new XMLSerializer().serializeToString(svgRef.current);
+        const blob = new Blob([svgData], { type: "image/svg+xml" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "drawing.svg";
+        link.click();
+        URL.revokeObjectURL(url);
+      }
+    }
+  };
+
+  const renderShape = (shape: DrawingShape, isPreview = false) => {
+    const key = isPreview ? "preview" : shape.id;
+    const opacity = isPreview ? 0.7 : 1;
+
+    switch (shape.type) {
+      case "rectangle":
+        return (
+          <rect
+            key={key}
+            x={shape.x}
+            y={shape.y}
+            width={shape.width || 0}
+            height={shape.height || 0}
+            fill={shape.fillColor || "transparent"}
+            stroke={shape.color}
+            strokeWidth={shape.strokeWidth}
+            opacity={opacity}
+          />
+        );
+
+      case "circle":
+        const radius = Math.min(Math.abs(shape.width || 0), Math.abs(shape.height || 0)) / 2;
+        return (
+          <circle
+            key={key}
+            cx={shape.x + (shape.width || 0) / 2}
+            cy={shape.y + (shape.height || 0) / 2}
+            r={Math.abs(radius)}
+            fill={shape.fillColor || "transparent"}
+            stroke={shape.color}
+            strokeWidth={shape.strokeWidth}
+            opacity={opacity}
+          />
+        );
+
+      case "line":
+        return (
+          <line
+            key={key}
+            x1={shape.x}
+            y1={shape.y}
+            x2={shape.endX || shape.x}
+            y2={shape.endY || shape.y}
+            stroke={shape.color}
+            strokeWidth={shape.strokeWidth}
+            opacity={opacity}
+          />
+        );
+
+      case "text":
+        return (
+          <text
+            key={key}
+            x={shape.x}
+            y={shape.y}
+            fill={shape.color}
+            fontSize={shape.fontSize || 16}
+            opacity={opacity}
+          >
+            {shape.text}
+          </text>
+        );
+
+      case "freehand":
+        if (!shape.points || shape.points.length < 2) return null;
+        const pathData = shape.points.reduce((acc, point, index) => {
+          return acc + (index === 0 ? `M ${point.x} ${point.y}` : ` L ${point.x} ${point.y}`);
+        }, "");
+        
+        return (
+          <path
+            key={key}
+            d={pathData}
+            fill="none"
+            stroke={shape.color}
+            strokeWidth={shape.strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            opacity={opacity}
+          />
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const variantClasses = {
+    default: "border border-border",
+    bordered: "border-2 border-border",
+    filled: "bg-muted border border-border",
+  };
+
+  const gridPattern = showGrid && (
+    <defs>
+      <pattern
+        id="grid"
+        width={gridSize}
+        height={gridSize}
+        patternUnits="userSpaceOnUse"
+      >
+        <path
+          d={`M ${gridSize} 0 L 0 0 0 ${gridSize}`}
+          fill="none"
+          stroke="#e0e0e0"
+          strokeWidth="1"
+        />
+      </pattern>
+    </defs>
+  );
+
+  return (
+    <div className={cn("drawing-component", className)} {...props}>
+      {showToolbar && (
+        <DrawingToolbar
+          activeTool={currentTool}
+          onToolChange={setActiveTool}
+          strokeColor={currentStrokeColor}
+          fillColor={currentFillColor}
+          strokeWidth={currentStrokeWidth}
+          fontSize={currentFontSize}
+          onStrokeColorChange={setStrokeColor}
+          onFillColorChange={setFillColor}
+          onStrokeWidthChange={setStrokeWidth}
+          onFontSizeChange={setFontSize}
+          onUndo={handleUndo}
+          onRedo={handleRedo}
+          onClear={handleClear}
+          onExport={handleExport}
+          canUndo={historyIndex > 0}
+          canRedo={historyIndex < history.length - 1}
+        />
+      )}
+
+      <DrawingSurface width={width} height={height} className={variantClasses[variant]}>
+        <div
+          ref={canvasRef}
+          className="absolute inset-0 cursor-crosshair"
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          style={{ backgroundColor }}
+        >
+          <svg
+            ref={svgRef}
+            width={width}
+            height={height}
+            className="absolute inset-0"
+          >
+            {gridPattern}
+            {showGrid && (
+              <rect width={width} height={height} fill="url(#grid)" />
+            )}
+            
+            {currentShapes.map(shape => renderShape(shape))}
+            {currentShape && renderShape(currentShape, true)}
+          </svg>
+
+          {textPosition && (
+            <div
+              className="absolute z-10"
+              style={{ left: textPosition.x, top: textPosition.y - 30 }}
+            >
+              <div className="flex items-center gap-2 bg-background border rounded-md p-2 shadow-lg">
+                <Input
+                  value={textInput}
+                  onChange={(e) => setTextInput(e.target.value)}
+                  placeholder="Enter text..."
+                  className="w-32"
+                  autoFocus
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleTextSubmit();
+                    if (e.key === "Escape") setTextPosition(null);
+                  }}
+                />
+                <Button size="sm" onClick={handleTextSubmit}>
+                  Add
+                </Button>
+                <Button size="sm" variant="ghost" onClick={() => setTextPosition(null)}>
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </DrawingSurface>
+    </div>
+  );
+}
+
+export function DrawingV2Demo() {
+  const [shapes1, setShapes1] = useState<DrawingShape[]>([]);
+  const [shapes2, setShapes2] = useState<DrawingShape[]>([
+    {
+      id: "1",
+      type: "rectangle",
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 60,
+      color: "#3b82f6",
+      fillColor: "#3b82f640",
+      strokeWidth: 2,
+    },
+    {
+      id: "2",
+      type: "circle",
+      x: 200,
+      y: 50,
+      width: 80,
+      height: 80,
+      color: "#ef4444",
+      fillColor: "#ef444440",
+      strokeWidth: 2,
+    },
+    {
+      id: "3",
+      type: "text",
+      x: 50,
+      y: 150,
+      text: "Sample Text",
+      color: "#22c55e",
+      strokeWidth: 1,
+      fontSize: 18,
+    },
+  ]);
+  const [readOnlyShapes] = useState<DrawingShape[]>([
+    {
+      id: "readonly1",
+      type: "rectangle",
+      x: 100,
+      y: 100,
+      width: 150,
+      height: 80,
+      color: "#8b5cf6",
+      fillColor: "#8b5cf640",
+      strokeWidth: 3,
+    },
+    {
+      id: "readonly2",
+      type: "line",
+      x: 50,
+      y: 50,
+      endX: 200,
+      endY: 200,
+      color: "#f59e0b",
+      strokeWidth: 4,
+    },
+  ]);
+
+  const [exportedContent, setExportedContent] = useState<string>("");
+
+  const handleExport = (format: "svg" | "png" | "pdf") => {
+    setExportedContent(`Exported as ${format.toUpperCase()} format with ${shapes2.length} shapes`);
+    setTimeout(() => setExportedContent(""), 3000);
+  };
+
+  return (
+    <div className="space-y-8 p-8">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">DrawingV2 Component Demo</h2>
+        <p className="text-muted-foreground mb-8">
+          Interactive vector graphics drawing component with shapes, text, and export functionality
+        </p>
+      </div>
+
+      <div className="space-y-8">
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Basic DrawingV2 Canvas</h3>
+          <p className="text-sm text-muted-foreground mb-4">
+            Select tools from the toolbar and draw on the canvas. Try different shapes, colors, and text.
+          </p>
+          <DrawingV2
+            width={800}
+            height={400}
+            shapes={shapes1}
+            onShapesChange={setShapes1}
+            showGrid
+            gridSize={20}
+            backgroundColor="#fafafa"
+          />
+          <div className="mt-2 text-sm text-muted-foreground">
+            Shapes drawn: {shapes1.length}
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Pre-populated Canvas with Export</h3>
+          <p className="text-sm text-muted-foreground mb-4">
+            Canvas with pre-existing shapes. Try adding more shapes and exporting.
+          </p>
+          <DrawingV2
+            width={600}
+            height={300}
+            shapes={shapes2}
+            onShapesChange={setShapes2}
+            onExport={handleExport}
+            variant="bordered"
+            backgroundColor="#ffffff"
+          />
+          {exportedContent && (
+            <div className="mt-2 p-2 bg-green-100 text-green-800 rounded text-sm">
+              {exportedContent}
+            </div>
+          )}
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Read-Only Canvas</h3>
+          <p className="text-sm text-muted-foreground mb-4">
+            This canvas is read-only and displays existing shapes without editing capabilities.
+          </p>
+          <DrawingV2
+            width={400}
+            height={250}
+            shapes={readOnlyShapes}
+            readOnly
+            showToolbar={false}
+            variant="filled"
+            backgroundColor="#f9fafb"
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Different Variants</h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div>
+              <h4 className="font-medium mb-2">Default</h4>
+              <DrawingV2
+                width={250}
+                height={180}
+                variant="default"
+                showToolbar={false}
+                shapes={[
+                  {
+                    id: "demo1",
+                    type: "circle",
+                    x: 75,
+                    y: 65,
+                    width: 100,
+                    height: 100,
+                    color: "#3b82f6",
+                    fillColor: "#3b82f620",
+                    strokeWidth: 2,
+                  }
+                ]}
+                readOnly
+              />
+            </div>
+            <div>
+              <h4 className="font-medium mb-2">Bordered</h4>
+              <DrawingV2
+                width={250}
+                height={180}
+                variant="bordered"
+                showToolbar={false}
+                shapes={[
+                  {
+                    id: "demo2",
+                    type: "rectangle",
+                    x: 75,
+                    y: 65,
+                    width: 100,
+                    height: 50,
+                    color: "#ef4444",
+                    fillColor: "#ef444420",
+                    strokeWidth: 2,
+                  }
+                ]}
+                readOnly
+              />
+            </div>
+            <div>
+              <h4 className="font-medium mb-2">Filled</h4>
+              <DrawingV2
+                width={250}
+                height={180}
+                variant="filled"
+                showToolbar={false}
+                shapes={[
+                  {
+                    id: "demo3",
+                    type: "line",
+                    x: 50,
+                    y: 50,
+                    endX: 200,
+                    endY: 130,
+                    color: "#22c55e",
+                    strokeWidth: 4,
+                  }
+                ]}
+                readOnly
+              />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Shape Examples</h3>
+          <DrawingV2
+            width={700}
+            height={300}
+            showToolbar={false}
+            shapes={[
+              {
+                id: "example1",
+                type: "rectangle",
+                x: 50,
+                y: 50,
+                width: 80,
+                height: 50,
+                color: "#3b82f6",
+                fillColor: "#3b82f620",
+                strokeWidth: 2,
+              },
+              {
+                id: "example2",
+                type: "circle",
+                x: 160,
+                y: 50,
+                width: 70,
+                height: 70,
+                color: "#ef4444",
+                fillColor: "#ef444420",
+                strokeWidth: 2,
+              },
+              {
+                id: "example3",
+                type: "line",
+                x: 270,
+                y: 60,
+                endX: 350,
+                endY: 90,
+                color: "#22c55e",
+                strokeWidth: 3,
+              },
+              {
+                id: "example4",
+                type: "text",
+                x: 380,
+                y: 80,
+                text: "Sample Text",
+                color: "#8b5cf6",
+                strokeWidth: 1,
+                fontSize: 16,
+              },
+              {
+                id: "example5",
+                type: "freehand",
+                x: 0,
+                y: 0,
+                color: "#f59e0b",
+                strokeWidth: 3,
+                points: [
+                  { x: 50, y: 150 },
+                  { x: 70, y: 130 },
+                  { x: 90, y: 140 },
+                  { x: 110, y: 120 },
+                  { x: 130, y: 135 },
+                ],
+              },
+              {
+                id: "example6",
+                type: "rectangle",
+                x: 200,
+                y: 150,
+                width: 100,
+                height: 60,
+                color: "#ec4899",
+                strokeWidth: 1,
+              },
+              {
+                id: "example7",
+                type: "circle",
+                x: 350,
+                y: 140,
+                width: 80,
+                height: 80,
+                color: "#06b6d4",
+                fillColor: "#06b6d440",
+                strokeWidth: 2,
+              },
+              {
+                id: "example8",
+                type: "text",
+                x: 480,
+                y: 180,
+                text: "DrawingV2 Demo",
+                color: "#dc2626",
+                strokeWidth: 1,
+                fontSize: 20,
+              },
+            ]}
+            readOnly
+            backgroundColor="#fefefe"
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">DrawingV2 Tools Guide</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
+            <div className="p-3 border rounded-lg">
+              <div className="flex items-center gap-2 mb-2">
+                <MousePointer className="w-4 h-4" />
+                <span className="font-medium">Select Tool</span>
+              </div>
+              <p className="text-muted-foreground">Click to select and move existing shapes</p>
+            </div>
+            <div className="p-3 border rounded-lg">
+              <div className="flex items-center gap-2 mb-2">
+                <Square className="w-4 h-4" />
+                <span className="font-medium">Rectangle</span>
+              </div>
+              <p className="text-muted-foreground">Click and drag to draw rectangles</p>
+            </div>
+            <div className="p-3 border rounded-lg">
+              <div className="flex items-center gap-2 mb-2">
+                <Circle className="w-4 h-4" />
+                <span className="font-medium">Circle</span>
+              </div>
+              <p className="text-muted-foreground">Click and drag to draw circles</p>
+            </div>
+            <div className="p-3 border rounded-lg">
+              <div className="flex items-center gap-2 mb-2">
+                <Minus className="w-4 h-4" />
+                <span className="font-medium">Line</span>
+              </div>
+              <p className="text-muted-foreground">Click and drag to draw straight lines</p>
+            </div>
+            <div className="p-3 border rounded-lg">
+              <div className="flex items-center gap-2 mb-2">
+                <Type className="w-4 h-4" />
+                <span className="font-medium">Text</span>
+              </div>
+              <p className="text-muted-foreground">Click to add text at any position</p>
+            </div>
+            <div className="p-3 border rounded-lg">
+              <div className="flex items-center gap-2 mb-2">
+                <Pen className="w-4 h-4" />
+                <span className="font-medium">Freehand</span>
+              </div>
+              <p className="text-muted-foreground">Draw freely with mouse or touch</p>
+            </div>
+            <div className="p-3 border rounded-lg">
+              <div className="flex items-center gap-2 mb-2">
+                <Eraser className="w-4 h-4" />
+                <span className="font-medium">Eraser</span>
+              </div>
+              <p className="text-muted-foreground">Remove shapes by clicking on them</p>
+            </div>
+            <div className="p-3 border rounded-lg">
+              <div className="flex items-center gap-2 mb-2">
+                <Palette className="w-4 h-4" />
+                <span className="font-medium">Colors</span>
+              </div>
+              <p className="text-muted-foreground">Adjust stroke and fill colors</p>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Advanced Features</h3>
+          <div className="space-y-4">
+            <div>
+              <h4 className="font-medium mb-2">With Grid</h4>
+              <DrawingV2
+                width={500}
+                height={200}
+                showGrid
+                gridSize={25}
+                backgroundColor="#ffffff"
+                variant="bordered"
+              />
+            </div>
+            
+            <div>
+              <h4 className="font-medium mb-2">Custom Colors and Stroke Width</h4>
+              <DrawingV2
+                width={500}
+                height={200}
+                strokeColor="#9333ea"
+                fillColor="#9333ea20"
+                strokeWidth={4}
+                fontSize={24}
+                backgroundColor="#faf5ff"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Export Functionality</h3>
+          <p className="text-sm text-muted-foreground mb-4">
+            The drawing component supports exporting to SVG, PNG, and PDF formats. 
+            Use the toolbar buttons to export your drawings.
+          </p>
+          <div className="flex items-center gap-2 p-3 bg-muted/50 rounded-lg text-sm">
+            <FileText className="w-4 h-4" />
+            <span>SVG - Vector format, scalable and editable</span>
+          </div>
+          <div className="flex items-center gap-2 p-3 bg-muted/50 rounded-lg text-sm mt-2">
+            <FileImage className="w-4 h-4" />
+            <span>PNG - Raster format, perfect for images</span>
+          </div>
+          <div className="flex items-center gap-2 p-3 bg-muted/50 rounded-lg text-sm mt-2">
+            <File className="w-4 h-4" />
+            <span>PDF - Document format, great for printing</span>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Usage Examples</h3>
+          <div className="space-y-4 text-sm">
+            <div className="p-4 bg-muted/30 rounded-lg">
+              <h4 className="font-medium mb-2">Basic DrawingV2 Canvas</h4>
+              <pre className="text-xs overflow-x-auto bg-background p-2 rounded">
+{`<DrawingV2
+  width={800}
+  height={600}
+  shapes={shapes}
+  onShapesChange={setShapes}
+  showGrid
+  backgroundColor="#ffffff"
+/>`}
+              </pre>
+            </div>
+            
+            <div className="p-4 bg-muted/30 rounded-lg">
+              <h4 className="font-medium mb-2">Read-Only Display</h4>
+              <pre className="text-xs overflow-x-auto bg-background p-2 rounded">
+{`<DrawingV2
+  width={600}
+  height={400}
+  shapes={existingShapes}
+  readOnly
+  showToolbar={false}
+  variant="bordered"
+/>`}
+              </pre>
+            </div>
+
+            <div className="p-4 bg-muted/30 rounded-lg">
+              <h4 className="font-medium mb-2">Custom Styling</h4>
+              <pre className="text-xs overflow-x-auto bg-background p-2 rounded">
+{`<DrawingV2
+  width={700}
+  height={500}
+  strokeColor="#3b82f6"
+  fillColor="#3b82f620"
+  strokeWidth={3}
+  fontSize={18}
+  onExport={handleExport}
+/>`}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-8 p-4 bg-muted rounded-lg">
+        <h4 className="font-semibold mb-2">DrawingV2 Statistics:</h4>
+        <div className="space-y-1 text-sm">
+          <div>Basic Canvas Shapes: <code className="bg-background px-2 py-1 rounded">{shapes1.length}</code></div>
+          <div>Pre-populated Canvas Shapes: <code className="bg-background px-2 py-1 rounded">{shapes2.length}</code></div>
+          <div>Read-only Canvas Shapes: <code className="bg-background px-2 py-1 rounded">{readOnlyShapes.length}</code></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * // Basic editable canvas
+<DrawingV2
+  width={800}
+  height={600}
+  shapes={shapes}
+  onShapesChange={setShapes}
+  showGrid
+  backgroundColor="#ffffff"
+/>
+
+// Read-only display
+<DrawingV2
+  shapes={existingShapes}
+  readOnly
+  showToolbar={false}
+  variant="bordered"
+/>
+
+// Custom styling
+<DrawingV2
+  strokeColor="#3b82f6"
+  fillColor="#3b82f620"
+  strokeWidth={3}
+  fontSize={18}
+  onExport={handleCustomExport}
+/>
+
+// Pre-configured tool
+<DrawingV2
+  tool="rectangle"
+  strokeColor="#ef4444"
+  fillColor="transparent"
+/>
+ */