@classic-homes/theme-svelte 0.1.4 → 0.1.6

package/dist/lib/components/Signature.svelte

@@ -0,0 +1,1070 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { cn } from '../utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+  import type {
+    SignatureData,
+    SignatureStroke,
+    SignaturePoint,
+    SignatureMetadata,
+    SignatureFont,
+    SignatureValidationResult,
+  } from '../types/components.js';
+
+  // Default cursive fonts from Google Fonts
+  const defaultFonts: SignatureFont[] = [
+    { family: 'Dancing Script', label: 'Dancing Script', googleFont: true },
+    { family: 'Pacifico', label: 'Pacifico', googleFont: true },
+    { family: 'Satisfy', label: 'Satisfy', googleFont: true },
+    { family: 'Allura', label: 'Allura', googleFont: true },
+    { family: 'Great Vibes', label: 'Great Vibes', googleFont: true },
+  ];
+
+  // Styling variants
+  const signatureVariants = tv({
+    slots: {
+      container: 'space-y-3',
+      header: 'flex items-center justify-between gap-2',
+      labelText: 'text-sm font-medium leading-none',
+      modeToggle: 'inline-flex items-center rounded-lg bg-muted p-1',
+      modeButton:
+        'inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+      modeButtonActive: 'bg-background text-foreground shadow-sm',
+      modeButtonInactive: 'text-muted-foreground hover:text-foreground',
+      canvasContainer: 'relative w-full overflow-hidden rounded-lg border bg-background',
+      canvas: 'block w-full cursor-crosshair touch-none',
+      toolbar: 'flex flex-wrap items-center gap-2',
+      toolButton:
+        'inline-flex h-9 w-9 items-center justify-center rounded-md border border-input bg-background text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      toolGroup: 'flex items-center gap-1.5',
+      toolLabel: 'text-xs text-muted-foreground',
+      colorPicker:
+        'h-8 w-8 cursor-pointer rounded-md border border-input p-0.5 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      thicknessSlider:
+        'h-2 w-20 cursor-pointer appearance-none rounded-full bg-muted accent-primary',
+      typeInput: 'w-full',
+      fontPicker: 'flex flex-wrap gap-2',
+      fontButton: 'rounded-lg border-2 px-3 py-2 text-lg transition-colors hover:border-primary/50',
+      fontButtonSelected: 'border-primary bg-primary/5',
+      fontButtonUnselected: 'border-input',
+      consent: 'flex items-start gap-2',
+      consentCheckbox:
+        'mt-0.5 h-4 w-4 shrink-0 rounded border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      consentLabel: 'text-sm leading-tight text-muted-foreground',
+      errorText: 'text-sm text-destructive',
+      hintText: 'text-sm text-muted-foreground',
+    },
+    variants: {
+      disabled: {
+        true: {
+          canvas: 'cursor-not-allowed opacity-50',
+          canvasContainer: 'opacity-50',
+        },
+      },
+      hasError: {
+        true: {
+          canvasContainer: 'border-destructive focus-within:ring-destructive',
+        },
+      },
+    },
+  });
+
+  type SignatureVariants = VariantProps<typeof signatureVariants>;
+
+  interface Props {
+    /** Signature data containing image output and metadata */
+    value?: SignatureData | null;
+    /** Callback when signature changes */
+    onValueChange?: (data: SignatureData | null) => void;
+    /** Callback when signature is completed (meets validation) */
+    onComplete?: (data: SignatureData) => void;
+    /** Callback when consent state changes */
+    onConsentChange?: (consented: boolean) => void;
+
+    /** Input mode: draw with stylus/mouse or type with fonts */
+    mode?: 'draw' | 'type';
+    /** Whether to show mode toggle */
+    showModeToggle?: boolean;
+    /** Default typed name for type mode */
+    typedName?: string;
+
+    /** Stroke color (default: currentColor) */
+    strokeColor?: string;
+    /** Stroke width in pixels */
+    strokeWidth?: number;
+    /** Minimum stroke width for pressure */
+    minStrokeWidth?: number;
+    /** Maximum stroke width for pressure */
+    maxStrokeWidth?: number;
+    /** Whether to show stroke customization */
+    showStrokeCustomization?: boolean;
+
+    /** Available fonts for typed signatures */
+    fonts?: SignatureFont[];
+    /** Selected font family */
+    selectedFont?: string;
+
+    /** Preferred output format */
+    outputFormat?: 'png' | 'svg' | 'dataUrl';
+    /** PNG/image quality (0-1) */
+    imageQuality?: number;
+    /** Background color */
+    backgroundColor?: 'transparent' | 'white';
+
+    /** Minimum stroke points required (draw mode) */
+    minStrokePoints?: number;
+    /** Minimum stroke length in pixels (draw mode) */
+    minStrokeLength?: number;
+    /** Minimum characters for typed signature */
+    minTypedLength?: number;
+    /** Custom validation function */
+    validate?: (data: SignatureData) => SignatureValidationResult;
+
+    /** Whether to show consent checkbox */
+    showConsent?: boolean;
+    /** Consent checkbox text */
+    consentText?: string;
+    /** Whether consent is required */
+    requireConsent?: boolean;
+    /** Current consent state */
+    consented?: boolean;
+
+    /** Input ID */
+    id?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Whether disabled */
+    disabled?: boolean;
+    /** Whether required */
+    required?: boolean;
+    /** Error message */
+    error?: string;
+    /** Hint text */
+    hint?: string;
+    /** Label text */
+    label?: string;
+
+    /** Canvas height (CSS value) */
+    height?: string;
+
+    /** Additional class */
+    class?: string;
+  }
+
+  let {
+    value = $bindable(null),
+    onValueChange,
+    onComplete,
+    onConsentChange,
+
+    mode: initialMode = 'draw',
+    showModeToggle = true,
+    typedName: initialTypedName = '',
+
+    strokeColor: initialStrokeColor = '#000000',
+    strokeWidth: initialStrokeWidth = 2,
+    minStrokeWidth = 1,
+    maxStrokeWidth = 5,
+    showStrokeCustomization = true,
+
+    fonts = defaultFonts,
+    selectedFont: initialSelectedFont,
+
+    outputFormat = 'dataUrl',
+    imageQuality = 0.92,
+    backgroundColor = 'white',
+
+    minStrokePoints = 10,
+    minStrokeLength = 50,
+    minTypedLength = 2,
+    validate: customValidate,
+
+    showConsent = true,
+    consentText = 'I agree to use this as my legal signature and consent to electronic signing.',
+    requireConsent = true,
+    consented: initialConsented = $bindable(false),
+
+    id,
+    name,
+    disabled = false,
+    required = false,
+    error,
+    hint,
+    label,
+
+    height = '200px',
+
+    class: className,
+  }: Props = $props();
+
+  // Mode state (untrack to intentionally capture initial value only)
+  let mode = $state<'draw' | 'type'>(untrack(() => initialMode));
+
+  // Canvas references
+  let canvasContainer: HTMLDivElement;
+  let canvas: HTMLCanvasElement;
+  let ctx: CanvasRenderingContext2D | null = null;
+
+  // Drawing state
+  let isDrawing = $state(false);
+  let currentStroke = $state<SignatureStroke | null>(null);
+  let strokes = $state<SignatureStroke[]>([]);
+  let devicePixelRatio = $state(1);
+
+  // Draw customization state (untrack to intentionally capture initial values only)
+  let strokeColor = $state(untrack(() => initialStrokeColor));
+  let strokeWidth = $state(untrack(() => initialStrokeWidth));
+
+  // Type mode state (untrack to intentionally capture initial values only)
+  let typedName = $state(untrack(() => initialTypedName));
+  let selectedFont = $state(
+    untrack(() => initialSelectedFont || fonts[0]?.family || 'Dancing Script')
+  );
+  let fontsLoaded = $state<Set<string>>(new Set());
+
+  // Consent state (untrack to intentionally capture initial value only)
+  let consented = $state(untrack(() => initialConsented));
+
+  // Validation state
+  let validationResult = $state<SignatureValidationResult>({ valid: false });
+
+  // Track if onComplete has been fired for current signature to prevent duplicates
+  let completeFired = $state(false);
+
+  // Get styles
+  const styles = $derived(signatureVariants({ disabled, hasError: !!error }));
+
+  // Derived: has signature
+  const hasSignature = $derived(mode === 'draw' ? strokes.length > 0 : typedName.trim().length > 0);
+
+  // Derived: is valid
+  const isValid = $derived(validationResult.valid && (!requireConsent || consented));
+
+  // Generate unique ID
+  function generateId(): string {
+    return `sig_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+  }
+
+  // Calculate stroke length
+  function calculateStrokeLength(strokesData: SignatureStroke[]): number {
+    let total = 0;
+    for (const stroke of strokesData) {
+      for (let i = 1; i < stroke.points.length; i++) {
+        const dx = stroke.points[i].x - stroke.points[i - 1].x;
+        const dy = stroke.points[i].y - stroke.points[i - 1].y;
+        total += Math.sqrt(dx * dx + dy * dy);
+      }
+    }
+    return total;
+  }
+
+  // Count stroke points
+  function countStrokePoints(strokesData: SignatureStroke[]): number {
+    return strokesData.reduce((sum, s) => sum + s.points.length, 0);
+  }
+
+  // Run validation
+  function runValidation(): void {
+    if (mode === 'draw') {
+      if (strokes.length === 0) {
+        validationResult = { valid: false, error: 'Please draw your signature' };
+        return;
+      }
+      const points = countStrokePoints(strokes);
+      const length = calculateStrokeLength(strokes);
+      if (minStrokePoints && points < minStrokePoints) {
+        validationResult = {
+          valid: false,
+          error: 'Signature too simple. Please draw a more complete signature.',
+        };
+        return;
+      }
+      if (minStrokeLength && length < minStrokeLength) {
+        validationResult = {
+          valid: false,
+          error: 'Signature too short. Please draw a more complete signature.',
+        };
+        return;
+      }
+    } else {
+      const trimmed = typedName.trim();
+      if (!trimmed) {
+        validationResult = { valid: false, error: 'Please enter your name' };
+        return;
+      }
+      if (minTypedLength && trimmed.length < minTypedLength) {
+        validationResult = {
+          valid: false,
+          error: `Name must be at least ${minTypedLength} characters`,
+        };
+        return;
+      }
+    }
+    validationResult = { valid: true };
+  }
+
+  // Generate hash for tamper detection
+  async function calculateHash(data: string): Promise<string> {
+    const encoder = new TextEncoder();
+    const dataBuffer = encoder.encode(data);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+  }
+
+  // Export as PNG data URL
+  function exportAsPNG(): string {
+    if (!canvas || !ctx) return '';
+    const exportCanvas = document.createElement('canvas');
+    exportCanvas.width = canvas.width;
+    exportCanvas.height = canvas.height;
+    const exportCtx = exportCanvas.getContext('2d')!;
+    if (backgroundColor === 'white') {
+      exportCtx.fillStyle = 'white';
+      exportCtx.fillRect(0, 0, exportCanvas.width, exportCanvas.height);
+    }
+    exportCtx.drawImage(canvas, 0, 0);
+    return exportCanvas.toDataURL('image/png', imageQuality);
+  }
+
+  // Export as PNG Blob
+  async function exportAsPNGBlob(): Promise<Blob | undefined> {
+    if (!canvas || !ctx) return undefined;
+    return new Promise((resolve) => {
+      const exportCanvas = document.createElement('canvas');
+      exportCanvas.width = canvas.width;
+      exportCanvas.height = canvas.height;
+      const exportCtx = exportCanvas.getContext('2d')!;
+      if (backgroundColor === 'white') {
+        exportCtx.fillStyle = 'white';
+        exportCtx.fillRect(0, 0, exportCanvas.width, exportCanvas.height);
+      }
+      exportCtx.drawImage(canvas, 0, 0);
+      exportCanvas.toBlob((blob) => resolve(blob || undefined), 'image/png', imageQuality);
+    });
+  }
+
+  // Escape XML special characters
+  function escapeXML(str: string): string {
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&apos;');
+  }
+
+  // Export as SVG
+  function exportAsSVG(): string {
+    if (!canvas) return '';
+    const width = canvas.width / devicePixelRatio;
+    const height = canvas.height / devicePixelRatio;
+
+    let paths = '';
+
+    if (mode === 'draw') {
+      for (const stroke of strokes) {
+        if (stroke.points.length < 2) continue;
+        let d = `M ${stroke.points[0].x} ${stroke.points[0].y}`;
+        for (let i = 1; i < stroke.points.length; i++) {
+          const prev = stroke.points[i - 1];
+          const curr = stroke.points[i];
+          const midX = (prev.x + curr.x) / 2;
+          const midY = (prev.y + curr.y) / 2;
+          d += ` Q ${prev.x} ${prev.y} ${midX} ${midY}`;
+        }
+        const lastPoint = stroke.points[stroke.points.length - 1];
+        d += ` L ${lastPoint.x} ${lastPoint.y}`;
+        paths += `<path d="${d}" stroke="${stroke.color}" stroke-width="${stroke.width}" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`;
+      }
+    } else {
+      const fontSize = calculateFontSize(typedName, width * 0.9);
+      paths = `<text x="${width / 2}" y="${height / 2}" font-family="${selectedFont}" font-size="${fontSize}" fill="${strokeColor}" text-anchor="middle" dominant-baseline="middle">${escapeXML(typedName)}</text>`;
+    }
+
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+  ${backgroundColor === 'white' ? `<rect width="${width}" height="${height}" fill="white"/>` : ''}
+  ${paths}
+</svg>`;
+  }
+
+  // Generate signature data
+  async function generateSignatureData(): Promise<SignatureData> {
+    const dataUrl = exportAsPNG();
+    const svg = exportAsSVG();
+    const png = outputFormat === 'png' ? await exportAsPNGBlob() : undefined;
+
+    const metadata: SignatureMetadata = {
+      timestamp: new Date().toISOString(),
+      userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : '',
+      dimensions: {
+        width: canvas ? canvas.width / devicePixelRatio : 0,
+        height: canvas ? canvas.height / devicePixelRatio : 0,
+      },
+      consented,
+      consentText: showConsent ? consentText : undefined,
+    };
+
+    // Calculate hash of signature data
+    const hashInput = mode === 'draw' ? JSON.stringify(strokes) : typedName;
+    metadata.hash = await calculateHash(hashInput + metadata.timestamp);
+
+    return {
+      id: generateId(),
+      mode,
+      dataUrl,
+      png,
+      svg,
+      typedName: mode === 'type' ? typedName : undefined,
+      font: mode === 'type' ? selectedFont : undefined,
+      strokes: mode === 'draw' ? [...strokes] : undefined,
+      metadata,
+    };
+  }
+
+  // Calculate font size to fit canvas
+  function calculateFontSize(text: string, maxWidth: number): number {
+    if (!ctx) return 48;
+    let fontSize = 72;
+    ctx.font = `${fontSize}px "${selectedFont}"`;
+    let textWidth = ctx.measureText(text).width;
+    while (textWidth > maxWidth && fontSize > 16) {
+      fontSize -= 2;
+      ctx.font = `${fontSize}px "${selectedFont}"`;
+      textWidth = ctx.measureText(text).width;
+    }
+    return fontSize;
+  }
+
+  // Load Google Font
+  async function loadFont(font: SignatureFont): Promise<void> {
+    if (fontsLoaded.has(font.family)) return;
+    if (!font.googleFont) {
+      fontsLoaded = new Set([...fontsLoaded, font.family]);
+      return;
+    }
+
+    const link = document.createElement('link');
+    link.href = `https://fonts.googleapis.com/css2?family=${font.family.replace(/\s+/g, '+')}&display=swap`;
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+
+    // Wait for font to load
+    await document.fonts.load(`48px "${font.family}"`);
+    fontsLoaded = new Set([...fontsLoaded, font.family]);
+  }
+
+  // Render typed signature on canvas
+  function renderTypedSignature(): void {
+    if (!ctx || !canvas) return;
+
+    const width = canvas.width / devicePixelRatio;
+    const height = canvas.height / devicePixelRatio;
+
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (!typedName.trim()) return;
+
+    // Calculate font size
+    const fontSize = calculateFontSize(typedName, width * 0.9);
+
+    // Render text
+    ctx.font = `${fontSize}px "${selectedFont}"`;
+    ctx.fillStyle = strokeColor;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(typedName, width / 2, height / 2);
+  }
+
+  // Initialize canvas
+  function initializeCanvas(): void {
+    if (!canvas) return;
+
+    devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+    const rect = canvas.getBoundingClientRect();
+
+    canvas.width = rect.width * devicePixelRatio;
+    canvas.height = rect.height * devicePixelRatio;
+
+    ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.scale(devicePixelRatio, devicePixelRatio);
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = strokeWidth;
+
+    // Redraw existing content
+    if (mode === 'draw') {
+      redrawStrokes();
+    } else {
+      renderTypedSignature();
+    }
+  }
+
+  // Redraw all strokes
+  function redrawStrokes(): void {
+    if (!ctx || !canvas) return;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (const stroke of strokes) {
+      if (stroke.points.length < 2) continue;
+
+      ctx.strokeStyle = stroke.color;
+      ctx.lineWidth = stroke.width;
+      ctx.beginPath();
+      ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
+
+      for (let i = 1; i < stroke.points.length; i++) {
+        const prev = stroke.points[i - 1];
+        const curr = stroke.points[i];
+        const midX = (prev.x + curr.x) / 2;
+        const midY = (prev.y + curr.y) / 2;
+        ctx.quadraticCurveTo(prev.x, prev.y, midX, midY);
+      }
+
+      const lastPoint = stroke.points[stroke.points.length - 1];
+      ctx.lineTo(lastPoint.x, lastPoint.y);
+      ctx.stroke();
+    }
+  }
+
+  // Get canvas point from pointer event
+  function getCanvasPoint(e: PointerEvent): SignaturePoint {
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+      pressure: e.pressure || 0.5,
+      time: Date.now(),
+    };
+  }
+
+  // Calculate dynamic stroke width based on pressure
+  function calculateDynamicWidth(pressure: number): number {
+    return minStrokeWidth + pressure * (maxStrokeWidth - minStrokeWidth);
+  }
+
+  // Scroll lock state
+  let scrollLocked = false;
+  let previousBodyOverflow = '';
+  let previousBodyPosition = '';
+  let previousBodyTop = '';
+  let previousBodyWidth = '';
+  let scrollY = 0;
+
+  // Lock scroll to prevent page scrolling while drawing on mobile
+  function lockScroll(): void {
+    if (typeof document === 'undefined' || scrollLocked) return;
+
+    scrollLocked = true;
+    scrollY = window.scrollY;
+
+    // Save current body styles
+    previousBodyOverflow = document.body.style.overflow;
+    previousBodyPosition = document.body.style.position;
+    previousBodyTop = document.body.style.top;
+    previousBodyWidth = document.body.style.width;
+
+    // Lock the body
+    document.body.style.overflow = 'hidden';
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.width = '100%';
+
+    // Prevent touchmove on document
+    document.addEventListener('touchmove', preventTouchMove, { passive: false });
+  }
+
+  // Unlock scroll when done drawing
+  function unlockScroll(): void {
+    if (typeof document === 'undefined' || !scrollLocked) return;
+
+    scrollLocked = false;
+
+    // Restore body styles
+    document.body.style.overflow = previousBodyOverflow;
+    document.body.style.position = previousBodyPosition;
+    document.body.style.top = previousBodyTop;
+    document.body.style.width = previousBodyWidth;
+
+    // Restore scroll position
+    window.scrollTo(0, scrollY);
+
+    // Remove touchmove listener
+    document.removeEventListener('touchmove', preventTouchMove);
+  }
+
+  // Prevent touch move events while drawing
+  function preventTouchMove(e: TouchEvent): void {
+    if (scrollLocked) {
+      e.preventDefault();
+    }
+  }
+
+  // Start drawing
+  function handlePointerDown(e: PointerEvent): void {
+    if (disabled || mode !== 'draw') return;
+
+    e.preventDefault();
+    canvas.setPointerCapture(e.pointerId);
+
+    // Lock scroll on touch devices
+    if (e.pointerType === 'touch') {
+      lockScroll();
+    }
+
+    isDrawing = true;
+    const point = getCanvasPoint(e);
+
+    currentStroke = {
+      points: [point],
+      color: strokeColor,
+      width: strokeWidth,
+      startTime: Date.now(),
+      endTime: 0,
+    };
+
+    if (ctx) {
+      ctx.strokeStyle = strokeColor;
+      ctx.lineWidth = strokeWidth;
+      ctx.beginPath();
+      ctx.moveTo(point.x, point.y);
+    }
+  }
+
+  // Continue drawing
+  function handlePointerMove(e: PointerEvent): void {
+    if (!isDrawing || !currentStroke || !ctx || disabled) return;
+
+    e.preventDefault();
+    const point = getCanvasPoint(e);
+    currentStroke.points.push(point);
+
+    // Draw smooth curve
+    if (currentStroke.points.length > 1) {
+      const prev = currentStroke.points[currentStroke.points.length - 2];
+      const midX = (prev.x + point.x) / 2;
+      const midY = (prev.y + point.y) / 2;
+      ctx.quadraticCurveTo(prev.x, prev.y, midX, midY);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(midX, midY);
+    }
+  }
+
+  // End drawing
+  function handlePointerUp(e: PointerEvent): void {
+    if (!isDrawing || !currentStroke || disabled) return;
+
+    canvas.releasePointerCapture(e.pointerId);
+    isDrawing = false;
+    currentStroke.endTime = Date.now();
+
+    // Unlock scroll when done drawing
+    unlockScroll();
+
+    // Only add stroke if it has enough points
+    if (currentStroke.points.length > 1) {
+      strokes = [...strokes, currentStroke];
+    }
+    currentStroke = null;
+
+    runValidation();
+    updateValue();
+  }
+
+  // Handle pointer leave
+  function handlePointerLeave(e: PointerEvent): void {
+    if (isDrawing) {
+      handlePointerUp(e);
+    }
+  }
+
+  // Clear signature
+  function clearSignature(): void {
+    strokes = [];
+    typedName = '';
+    completeFired = false;
+    if (ctx && canvas) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+    runValidation();
+    updateValue();
+    announceToScreenReader('Signature cleared');
+  }
+
+  // Undo last stroke
+  function undoStroke(): void {
+    if (strokes.length === 0) return;
+    strokes = strokes.slice(0, -1);
+    redrawStrokes();
+    runValidation();
+    updateValue();
+    announceToScreenReader('Stroke undone');
+  }
+
+  // Update value
+  async function updateValue(): Promise<void> {
+    if (!hasSignature) {
+      value = null;
+      onValueChange?.(null);
+      completeFired = false;
+      return;
+    }
+
+    const data = await generateSignatureData();
+    value = data;
+    onValueChange?.(data);
+
+    // Only fire onComplete once per valid signature
+    if (isValid && hasSignature && !completeFired) {
+      completeFired = true;
+      onComplete?.(data);
+    }
+  }
+
+  // Handle consent change
+  function handleConsentChange(e: Event): void {
+    const target = e.target as HTMLInputElement;
+    consented = target.checked;
+    onConsentChange?.(consented);
+    updateValue();
+  }
+
+  // Handle mode change
+  function setMode(newMode: 'draw' | 'type'): void {
+    if (mode === newMode) return;
+    mode = newMode;
+    clearSignature();
+    announceToScreenReader(`Signature mode changed to ${newMode}`);
+  }
+
+  // Handle typed name change
+  function handleTypedNameChange(e: Event): void {
+    const target = e.target as HTMLInputElement;
+    typedName = target.value;
+    runValidation();
+  }
+
+  // Handle font selection
+  function selectFont(font: SignatureFont): void {
+    selectedFont = font.family;
+    loadFont(font).then(() => {
+      renderTypedSignature();
+      updateValue();
+    });
+  }
+
+  // Screen reader announcements
+  function announceToScreenReader(message: string): void {
+    if (typeof document === 'undefined') return;
+    const announcement = document.createElement('div');
+    announcement.setAttribute('role', 'status');
+    announcement.setAttribute('aria-live', 'polite');
+    announcement.setAttribute('aria-atomic', 'true');
+    announcement.className = 'sr-only';
+    announcement.textContent = message;
+    document.body.appendChild(announcement);
+    setTimeout(() => announcement.remove(), 1000);
+  }
+
+  // Handle keyboard shortcuts
+  function handleKeyDown(e: KeyboardEvent): void {
+    if (disabled) return;
+
+    if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+      e.preventDefault();
+      if (mode === 'draw') {
+        undoStroke();
+      }
+    }
+
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      if (document.activeElement === canvas) {
+        e.preventDefault();
+        clearSignature();
+      }
+    }
+  }
+
+  // Effects
+  $effect(() => {
+    // Load all fonts on mount
+    fonts.forEach((font) => loadFont(font));
+  });
+
+  $effect(() => {
+    // Initialize canvas after mount
+    if (canvas) {
+      initializeCanvas();
+    }
+  });
+
+  $effect(() => {
+    // Handle resize
+    if (!canvasContainer || typeof window === 'undefined') return;
+
+    const observer = new ResizeObserver(() => {
+      initializeCanvas();
+    });
+
+    observer.observe(canvasContainer);
+
+    return () => observer.disconnect();
+  });
+
+  $effect(() => {
+    // Cleanup scroll lock on unmount
+    return () => {
+      unlockScroll();
+    };
+  });
+
+  $effect(() => {
+    // Re-render typed signature when font or name changes
+    if (mode === 'type' && fontsLoaded.has(selectedFont)) {
+      renderTypedSignature();
+      updateValue();
+    }
+  });
+
+  $effect(() => {
+    // Update stroke styles when changed
+    if (ctx) {
+      ctx.strokeStyle = strokeColor;
+      ctx.lineWidth = strokeWidth;
+    }
+  });
+
+  // Computed IDs
+  const inputId = $derived(id || `signature-${Math.random().toString(36).substring(2, 9)}`);
+  const errorId = $derived(`${inputId}-error`);
+  const hintId = $derived(`${inputId}-hint`);
+  const ariaDescribedBy = $derived(
+    [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+  );
+</script>
+
+<div
+  class={cn(styles.container(), className)}
+  role="group"
+  aria-labelledby={label ? `${inputId}-label` : undefined}
+>
+  <!-- Header with label and mode toggle -->
+  <div class={styles.header()}>
+    {#if label}
+      <span id="{inputId}-label" class={styles.labelText()}>
+        {label}
+        {#if required}
+          <span class="text-destructive" aria-hidden="true">*</span>
+          <span class="sr-only">(required)</span>
+        {/if}
+      </span>
+    {/if}
+
+    {#if showModeToggle}
+      <div class={styles.modeToggle()} role="radiogroup" aria-label="Signature input method">
+        <button
+          type="button"
+          role="radio"
+          aria-checked={mode === 'draw'}
+          class={cn(
+            styles.modeButton(),
+            mode === 'draw' ? styles.modeButtonActive() : styles.modeButtonInactive()
+          )}
+          onclick={() => setMode('draw')}
+          {disabled}
+        >
+          Draw
+        </button>
+        <button
+          type="button"
+          role="radio"
+          aria-checked={mode === 'type'}
+          class={cn(
+            styles.modeButton(),
+            mode === 'type' ? styles.modeButtonActive() : styles.modeButtonInactive()
+          )}
+          onclick={() => setMode('type')}
+          {disabled}
+        >
+          Type
+        </button>
+      </div>
+    {/if}
+  </div>
+
+  <!-- Canvas container -->
+  <div bind:this={canvasContainer} class={styles.canvasContainer()} style="height: {height};">
+    <canvas
+      bind:this={canvas}
+      class={styles.canvas()}
+      style="height: 100%;"
+      tabindex={disabled ? -1 : 0}
+      aria-label={mode === 'draw'
+        ? 'Signature drawing area. Use mouse or touch to draw.'
+        : 'Signature preview area.'}
+      aria-describedby={ariaDescribedBy}
+      onpointerdown={handlePointerDown}
+      onpointermove={handlePointerMove}
+      onpointerup={handlePointerUp}
+      onpointerleave={handlePointerLeave}
+      onkeydown={handleKeyDown}
+    ></canvas>
+  </div>
+
+  <!-- Draw mode toolbar -->
+  {#if mode === 'draw'}
+    <div class={styles.toolbar()}>
+      <button
+        type="button"
+        class={styles.toolButton()}
+        onclick={undoStroke}
+        disabled={disabled || strokes.length === 0}
+        aria-label="Undo last stroke"
+        title="Undo (Ctrl+Z)"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M3 10h10a5 5 0 0 1 5 5v2M3 10l4-4M3 10l4 4" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class={styles.toolButton()}
+        onclick={clearSignature}
+        disabled={disabled || strokes.length === 0}
+        aria-label="Clear signature"
+        title="Clear"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path
+            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+          />
+        </svg>
+      </button>
+
+      {#if showStrokeCustomization}
+        <div class={styles.toolGroup()}>
+          <label class={styles.toolLabel()} for="{inputId}-color">Color</label>
+          <input
+            id="{inputId}-color"
+            type="color"
+            bind:value={strokeColor}
+            class={styles.colorPicker()}
+            {disabled}
+          />
+        </div>
+
+        <div class={styles.toolGroup()}>
+          <label class={styles.toolLabel()} for="{inputId}-thickness">Thickness</label>
+          <input
+            id="{inputId}-thickness"
+            type="range"
+            min={minStrokeWidth}
+            max={maxStrokeWidth}
+            step="0.5"
+            bind:value={strokeWidth}
+            class={styles.thicknessSlider()}
+            {disabled}
+          />
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  <!-- Type mode controls -->
+  {#if mode === 'type'}
+    <div class="space-y-3">
+      <input
+        id={inputId}
+        type="text"
+        value={typedName}
+        oninput={handleTypedNameChange}
+        placeholder="Enter your full name"
+        class={cn(
+          'flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          error && 'border-destructive focus-visible:ring-destructive'
+        )}
+        {disabled}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={error ? 'true' : undefined}
+      />
+
+      <div class={styles.fontPicker()} role="listbox" aria-label="Select signature font">
+        {#each fonts as font}
+          <button
+            type="button"
+            role="option"
+            aria-selected={selectedFont === font.family}
+            class={cn(
+              styles.fontButton(),
+              selectedFont === font.family
+                ? styles.fontButtonSelected()
+                : styles.fontButtonUnselected()
+            )}
+            style="font-family: '{font.family}', cursive;"
+            onclick={() => selectFont(font)}
+            {disabled}
+          >
+            {typedName || 'Preview'}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <!-- Consent checkbox -->
+  {#if showConsent}
+    <div class={styles.consent()}>
+      <input
+        id="{inputId}-consent"
+        type="checkbox"
+        checked={consented}
+        onchange={handleConsentChange}
+        class={styles.consentCheckbox()}
+        {disabled}
+        aria-describedby={!consented && requireConsent ? `${inputId}-consent-required` : undefined}
+      />
+      <label for="{inputId}-consent" class={styles.consentLabel()}>
+        {consentText}
+      </label>
+    </div>
+    {#if !consented && requireConsent && hasSignature}
+      <p id="{inputId}-consent-required" class={styles.errorText()} role="alert">
+        You must agree to the terms to submit your signature
+      </p>
+    {/if}
+  {/if}
+
+  <!-- Validation error (from signature) -->
+  {#if hasSignature && !validationResult.valid && validationResult.error}
+    <p class={styles.errorText()} role="alert">
+      {validationResult.error}
+    </p>
+  {/if}
+
+  <!-- External error -->
+  {#if error}
+    <p id={errorId} class={styles.errorText()} role="alert">
+      {error}
+    </p>
+  {/if}
+
+  <!-- Hint -->
+  {#if hint && !error}
+    <p id={hintId} class={styles.hintText()}>
+      {hint}
+    </p>
+  {/if}
+
+  <!-- Hidden input for form submission -->
+  {#if name && value}
+    <input type="hidden" {name} value={value.dataUrl} />
+  {/if}
+</div>