@vanira/sdk-react-native 0.0.2

package/src/ui/presets/WidgetPresetRenderer.ts

@@ -0,0 +1,1802 @@
+import { cleanLatexText } from '../utils';
+
+type OnComplete = (result: Record<string, any>) => void;
+type OnCancel = (reason?: string) => void;
+
+interface PresetContext {
+    toolCallId: string;
+    presetId: string;
+    clientFields: Record<string, any>;
+    args: Record<string, any>;
+    toolCall: any;
+}
+
+// ─── Format slot time helper ──────────────────────────────────────────────────
+function formatSlotTime(item: any): string {
+    if (!item) return '';
+    if (typeof item === 'string') {
+        if (item.includes('T') || !isNaN(Date.parse(item))) {
+            try { return new Date(item).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); } catch (_) { }
+        }
+        return item;
+    }
+    if (typeof item === 'object') {
+        const sv = item.start || item.startTime || item.time || item.slot;
+        const ev = item.end || item.endTime;
+        if (sv) {
+            let s = String(sv), e = ev ? String(ev) : '';
+            try {
+                if (s.includes('T') || !isNaN(Date.parse(s))) s = new Date(s).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+                if (e && (e.includes('T') || !isNaN(Date.parse(e)))) e = new Date(e).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+            } catch (_) { }
+            if (e) return `${s} - ${e}`;
+            return s;
+        }
+    }
+    return String(item);
+}
+
+function getDayBoundsInTimezone(y: number, month: number, day: number, timezone?: string) {
+    // Default UTC bounds
+    let startMs = Date.UTC(y, month, day, 0, 0, 0, 0);
+    let endMs = Date.UTC(y, month, day, 23, 59, 59, 999);
+
+    if (timezone) {
+        try {
+            const noonUtc = new Date(Date.UTC(y, month, day, 12, 0, 0));
+            const formatter = new Intl.DateTimeFormat('en-US', {
+                timeZone: timezone,
+                year: 'numeric', month: 'numeric', day: 'numeric',
+                hour: 'numeric', minute: 'numeric', second: 'numeric',
+                hour12: false
+            });
+            const parts = formatter.formatToParts(noonUtc);
+            const getPart = (type: string) => parts.find(p => p.type === type)?.value;
+
+            const yr = parseInt(getPart('year') || '0', 10);
+            const mo = parseInt(getPart('month') || '0', 10) - 1;
+            const dy = parseInt(getPart('day') || '0', 10);
+            const hr = parseInt(getPart('hour') || '0', 10);
+            const min = parseInt(getPart('minute') || '0', 10);
+            const sec = parseInt(getPart('second') || '0', 10);
+
+            // Handle hour 24 edge case in some environments
+            const hourNormalized = hr === 24 ? 0 : hr;
+
+            const targetUtc = Date.UTC(yr, mo, dy, hourNormalized, min, sec, 0);
+            const offsetMs = targetUtc - noonUtc.getTime();
+
+            startMs = Date.UTC(y, month, day, 0, 0, 0, 0) - offsetMs;
+            endMs = Date.UTC(y, month, day, 23, 59, 59, 999) - offsetMs;
+        } catch (e) {
+            console.warn(`[WidgetPresetRenderer] Failed to calculate day bounds for timezone ${timezone}:`, e);
+        }
+    }
+
+    return {
+        start: new Date(startMs),
+        end: new Date(endMs)
+    };
+}
+
+function toTimezoneISOString(date: Date, timeZone?: string): string {
+    if (!timeZone) {
+        const tzOffset = -date.getTimezoneOffset();
+        const diff = tzOffset >= 0 ? '+' : '-';
+        const pad = (num: number) => String(num).padStart(2, '0');
+        const pad3 = (num: number) => String(num).padStart(3, '0');
+        return date.getFullYear() +
+            '-' + pad(date.getMonth() + 1) +
+            '-' + pad(date.getDate()) +
+            'T' + pad(date.getHours()) +
+            ':' + pad(date.getMinutes()) +
+            ':' + pad(date.getSeconds()) +
+            '.' + pad3(date.getMilliseconds()) +
+            diff + pad(Math.floor(Math.abs(tzOffset) / 60)) +
+            ':' + pad(Math.abs(tzOffset) % 60);
+    }
+
+    try {
+        const formatter = new Intl.DateTimeFormat('en-US', {
+            timeZone,
+            year: 'numeric', month: 'numeric', day: 'numeric',
+            hour: 'numeric', minute: 'numeric', second: 'numeric',
+            hour12: false
+        });
+        const parts = formatter.formatToParts(date);
+        const getPart = (type: string) => parts.find(p => p.type === type)?.value || '0';
+
+        const yr = getPart('year');
+        const mo = getPart('month').padStart(2, '0');
+        const dy = getPart('day').padStart(2, '0');
+        let hr = parseInt(getPart('hour'), 10);
+        if (hr === 24) hr = 0;
+        const hrStr = String(hr).padStart(2, '0');
+        const min = getPart('minute').padStart(2, '0');
+        const sec = getPart('second').padStart(2, '0');
+        const ms = String(date.getMilliseconds()).padStart(3, '0');
+
+        const yrInt = parseInt(yr, 10);
+        const moInt = parseInt(mo, 10) - 1;
+        const dyInt = parseInt(dy, 10);
+        const targetUtc = Date.UTC(yrInt, moInt, dyInt, hr, parseInt(min, 10), parseInt(sec, 10), date.getMilliseconds());
+        const offsetMs = targetUtc - date.getTime();
+
+        const offsetMin = Math.round(offsetMs / 60000);
+        const diff = offsetMin >= 0 ? '+' : '-';
+        const absOffsetMin = Math.abs(offsetMin);
+        const offsetHrStr = String(Math.floor(absOffsetMin / 60)).padStart(2, '0');
+        const offsetMinStr = String(absOffsetMin % 60).padStart(2, '0');
+
+        return `${yr}-${mo}-${dy}T${hrStr}:${min}:${sec}.${ms}${diff}${offsetHrStr}:${offsetMinStr}`;
+    } catch (e) {
+        console.warn(`[WidgetPresetRenderer] Failed to format to timezone ISO string for ${timeZone}:`, e);
+        return date.toISOString();
+    }
+}
+
+// ─── Shared overlay CSS (injected once) ──────────────────────────────────────
+const OVERLAY_CSS = `
+.vnr-overlay {
+    position: fixed; inset: 0; z-index: 2147483647;
+    background: rgba(0,0,0,0.45);
+    backdrop-filter: blur(4px);
+    display: flex; align-items: center; justify-content: center; padding: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    box-sizing: border-box;
+}
+.vnr-modal {
+    background: #fff; border-radius: 16px;
+    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
+    width: 100%; max-width: 400px; max-height: 88vh;
+    overflow-y: auto; box-sizing: border-box;
+    padding: 20px;
+}
+.vnr-close-btn {
+    position: absolute; top: 16px; right: 16px;
+    background: none; border: none; cursor: pointer;
+    color: #d1d5db; line-height: 1; padding: 4px;
+}
+.vnr-close-btn:hover { color: #6b7280; }
+.vnr-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #111; letter-spacing: -0.02em; }
+.vnr-reason {
+    display: flex; align-items: flex-start; gap: 8px;
+    padding: 10px 12px; background: #f9fafb; border: 1px solid #f3f4f6;
+    border-radius: 10px; font-size: 13px; color: #6b7280; line-height: 1.5; margin-bottom: 14px;
+}
+.vnr-divider { border-top: 1px solid #f3f4f6; margin: 12px 0; }
+.vnr-section-label { font-size: 10px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
+/* Month nav */
+.vnr-month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+.vnr-nav-btn {
+    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
+    border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; cursor: pointer; color: #6b7280;
+}
+.vnr-nav-btn:hover:not(:disabled) { border-color: #9ca3af; background: #f9fafb; }
+.vnr-nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
+.vnr-month-label { font-size: 14px; font-weight: 600; color: #111; }
+/* Calendar grid */
+.vnr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
+.vnr-wd { text-align: center; font-size: 10px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 6px; }
+.vnr-day-btn {
+    display: block; margin: 0 auto; width: 34px; height: 34px; border-radius: 8px;
+    background: transparent; border: 1.5px solid transparent;
+    font-size: 13px; font-weight: 500; color: #111; cursor: pointer;
+}
+.vnr-day-btn:hover:not(:disabled):not(.vnr-day-sel) { background: #f3f4f6; }
+.vnr-day-past { color: #d1d5db !important; cursor: not-allowed !important; }
+.vnr-day-today { border-color: #111 !important; }
+.vnr-day-sel { background: #111 !important; color: #fff !important; border-color: transparent !important; }
+/* Slots */
+.vnr-slots-grid { display: grid; gap: 6px; }
+.vnr-slot-btn {
+    padding: 9px 6px; border-radius: 8px; border: 1px solid #e5e7eb;
+    background: #fff; color: #374151; font-size: 12px; font-weight: 500; cursor: pointer; text-align: center;
+}
+.vnr-slot-btn:hover:not(.vnr-slot-sel) { border-color: #9ca3af; }
+.vnr-slot-sel { background: #111 !important; color: #fff !important; border-color: #111 !important; }
+/* Actions */
+.vnr-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f3f4f6; }
+.vnr-cancel-btn {
+    flex: 1; padding: 10px; border-radius: 10px; background: #f3f4f6;
+    border: none; color: #6b7280; font-size: 13px; font-weight: 500; cursor: pointer;
+}
+.vnr-confirm-btn {
+    flex: 1; padding: 10px; border-radius: 10px; background: #111;
+    border: none; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+}
+.vnr-confirm-btn:disabled { background: #e5e7eb !important; color: #9ca3af !important; cursor: not-allowed; }
+/* Form */
+.vnr-field-label { display: block; font-size: 10px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
+.vnr-input {
+    width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px;
+    font-size: 13px; color: #111; background: #fff; box-sizing: border-box; outline: none;
+    font-family: inherit;
+}
+.vnr-input:focus { border-color: #111; }
+.vnr-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
+/* Spinner */
+@keyframes vnr-spin { to { transform: rotate(360deg); } }
+.vnr-spinner {
+    width: 16px; height: 16px; border-radius: 50%;
+    border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
+    animation: vnr-spin 0.7s linear infinite;
+}
+.vnr-center { text-align: center; padding: 28px 0; color: #9ca3af; font-size: 13px; }
+/* Camera */
+.vnr-video-wrap { width:100%; aspect-ratio:4/3; background:#0f172a; border-radius:12px; overflow:hidden; position:relative; }
+.vnr-video-wrap video { width:100%; height:100%; object-fit:cover; display:block; }
+.vnr-live-badge { position:absolute; top:10px; left:10px; display:flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; background:rgba(15,23,42,0.72); border:1px solid rgba(255,255,255,0.1); font-size:11px; font-weight:600; color:#f8fafc; text-transform:uppercase; letter-spacing:.04em; }
+.vnr-live-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; flex-shrink:0; }
+/* Upload dropzone */
+.vnr-dropzone { border:2px dashed #cbd5e1; border-radius:14px; padding:32px 20px; text-align:center; cursor:pointer; background:#fafafa; transition:border-color 0.2s,background 0.2s; }
+.vnr-dropzone:hover, .vnr-dropzone.drag { border-color:#374151; background:#f3f4f6; }
+`;
+
+// ─── WidgetPresetRenderer ─────────────────────────────────────────────────────
+
+export class WidgetPresetRenderer {
+    private overlay: HTMLElement | null = null;
+    private styleInjected = false;
+    private chalkboardContent = ''; // Persisted session content for chalkboard fallback
+
+    // Calendar state
+    private calViewYear = 0;
+    private calViewMonth = 0;
+    private calSelectedTs: number | null = null;
+    private calSelectedTime: any = null;
+
+    // ─── Live Vision state ────────────────────────────────────────────────────
+    private lvSessionId: string | null = null;
+    private lvStream: MediaStream | null = null;
+    private lvCaptureInterval: any = null;
+    private lvAutoStopTimeout: any = null;
+    private lvFrameSeq = 0;
+    private lvVideo: HTMLVideoElement | null = null;
+    private lvCanvas: HTMLCanvasElement | null = null;
+    private lvPip: HTMLElement | null = null;  // floating PiP indicator
+
+    constructor(_root: ShadowRoot) {
+        // root is kept in signature for API compatibility but overlay renders in document.body
+    }
+
+    public resetChalkboard() {
+        this.chalkboardContent = '';
+    }
+
+    /** Returns true if this tool call contains a known preset_id and was handled */
+    handle(
+        toolCall: any,
+        onComplete: OnComplete,
+        onCancel: OnCancel,
+        client?: any
+    ): boolean {
+        const data = toolCall.data || toolCall;
+
+        // Parse arguments — may be a JSON string or already an object
+        let args: Record<string, any> = {};
+        const rawArgs = data.arguments || data.args;
+        if (typeof rawArgs === 'string') {
+            try { args = JSON.parse(rawArgs); } catch (_) { args = {}; }
+        } else if (rawArgs && typeof rawArgs === 'object') {
+            args = rawArgs;
+        }
+
+        const clientFields = data.client_fields || {};
+
+        // preset_id could be in client_fields OR arguments — check both
+        const presetId = clientFields?.preset_id || args?.preset_id;
+
+        console.log('[VaniraPreset] tool_call data:', {
+            name: data.name,
+            client_fields: clientFields,
+            args,
+            presetId,
+        });
+
+        if (!presetId) return false;
+
+        // merge so ctx has everything
+        const mergedClientFields = { ...args, ...clientFields };
+
+        const ctx: PresetContext = {
+            toolCallId: data.tool_call_id || data.call_id || '',
+            presetId,
+            clientFields: mergedClientFields,
+            args,
+            toolCall: data,
+        };
+
+        this.injectStyles();
+
+        const isCurrentWhiteboard = !!document.querySelector('.vnr-whiteboard-modal');
+        const isIncomingWhiteboard = presetId === 'vanira_type_text' || presetId === 'vanira_erase_text';
+
+        if (isCurrentWhiteboard && isIncomingWhiteboard) {
+            console.log('[VaniraPreset] Keeping existing whiteboard modal active');
+        } else {
+            this.dismiss(); // close any existing preset first
+        }
+
+        if (presetId === 'vanira_calendar') {
+            this.renderCalendar(ctx, onComplete, onCancel);
+            return true;
+        }
+        if (presetId === 'vanira_form') {
+            this.renderForm(ctx, onComplete, onCancel);
+            return true;
+        }
+        if (presetId === 'vanira_camera') {
+            this.renderCamera(ctx, onComplete, onCancel, client);
+            return true;
+        }
+        if (presetId === 'vanira_upload') {
+            this.renderUpload(ctx, onComplete, onCancel, client);
+            return true;
+        }
+        if (presetId === 'vanira_navigate') {
+            this.renderNavigate(ctx, onComplete, onCancel);
+            return true;
+        }
+        if (presetId === 'vanira_highlight_element') {
+            this.renderHighlight(ctx, onComplete, onCancel);
+            return true;
+        }
+        if (presetId === 'vanira_type_text') {
+            this.renderTypeText(ctx, onComplete, onCancel);
+            return true;
+        }
+        if (presetId === 'vanira_erase_text') {
+            this.renderEraseText(ctx, onComplete, onCancel);
+            return true;
+        }
+
+        if (presetId === 'vanira_live_vision') {
+            this.handleOpenLiveCamera(mergedClientFields, client);
+            return true;
+        }
+        if (presetId === 'vanira_close_live_camera') {
+            this.handleCloseLiveCamera(client);
+            return true;
+        }
+
+        return false; // unknown preset — let host handle it
+    }
+
+    /** Force-dismiss the active preset (call on disconnect) */
+    dismiss() {
+        if (this.overlay) {
+            this.overlay.remove();
+            this.overlay = null;
+        }
+        // Stop any live vision session when the call ends
+        this.handleCloseLiveCamera(null);
+    }
+
+    // ─── Live Vision ──────────────────────────────────────────────────────────
+
+    private handleOpenLiveCamera(args: Record<string, any>, client: any) {
+        // Stop any existing session first (re-open = restart)
+        this.handleCloseLiveCamera(client);
+
+        const scope: string = args.scope ?? 'until_call_end';
+        const targetFps: number = Math.min(Number(args.target_fps ?? 1), Number(args.max_fps ?? 3));
+        const maxWidth: number = Number(args.max_width ?? 640);
+        const reason: string = args.reason ?? 'camera_capture';
+        const durationSec: number = Number(args.duration_sec ?? 0);
+        const facingMode: string = args.facing_mode ?? 'environment';
+        // show_preview: optional floating PiP camera badge (default false)
+        // show_preview defaults to TRUE — only hide when explicitly set to false/'false'
+        const showPreview: boolean = args.show_preview !== false && args.show_preview !== 'false';
+
+        const sessionId = `lv_${crypto.randomUUID()}`;
+        this.lvSessionId = sessionId;
+        this.lvFrameSeq = 0;
+
+        // Offscreen video + canvas — always hidden, used only for frame capture
+        const video = document.createElement('video');
+        video.autoplay = true;
+        video.playsInline = true;
+        video.muted = true;
+        video.style.display = 'none';
+        document.body.appendChild(video);
+        this.lvVideo = video;
+
+        const canvas = document.createElement('canvas');
+        canvas.style.display = 'none';
+        document.body.appendChild(canvas);
+        this.lvCanvas = canvas;
+
+        // Floating PiP badge is OPTIONAL — only shown when show_preview is true
+        if (showPreview) {
+            this.lvPip = this.createLivePip(() => this.handleCloseLiveCamera(client));
+        }
+
+        navigator.mediaDevices.getUserMedia({ video: { facingMode, width: { ideal: maxWidth * 2 } } })
+            .then((stream) => {
+                if (!this.lvSessionId) { stream.getTracks().forEach(t => t.stop()); return; }
+                this.lvStream = stream;
+                video.srcObject = stream;
+
+                // Notify server: session started
+                if (client?.sendEvent) {
+                    client.sendEvent('client_live_camera_started', {
+                        data: {
+                            session_id: sessionId,
+                            scope,
+                            ...(scope === 'timed' && durationSec > 0 ? { duration_sec: durationSec } : {}),
+                            reason,
+                            target_fps: targetFps,
+                        }
+                    });
+                }
+                console.log(`📹 [LiveVision] Session started: ${sessionId} (${scope}, ${targetFps} fps, preview=${showPreview})`);
+
+                // Begin capture loop
+                const intervalMs = Math.round(1000 / targetFps);
+                this.lvCaptureInterval = setInterval(() => {
+                    this.captureAndSendFrame(client, sessionId, maxWidth, reason);
+                }, intervalMs);
+
+                // Auto-stop for timed scope
+                if (scope === 'timed' && durationSec > 0) {
+                    this.lvAutoStopTimeout = setTimeout(() => {
+                        console.log(`⏱️ [LiveVision] Timed session expired (${durationSec}s)`);
+                        this.handleCloseLiveCamera(client);
+                    }, durationSec * 1000);
+                }
+            })
+            .catch((err) => {
+                console.warn('[LiveVision] getUserMedia failed:', err);
+                this.lvSessionId = null;
+                this.lvPip?.remove();
+                this.lvPip = null;
+                video.remove();
+                canvas.remove();
+            });
+    }
+
+    private handleCloseLiveCamera(client: any | null) {
+        if (!this.lvSessionId) return;
+
+        const sessionId = this.lvSessionId;
+        this.lvSessionId = null;
+
+        // Stop capture loop + auto-stop timer
+        if (this.lvCaptureInterval) { clearInterval(this.lvCaptureInterval); this.lvCaptureInterval = null; }
+        if (this.lvAutoStopTimeout) { clearTimeout(this.lvAutoStopTimeout); this.lvAutoStopTimeout = null; }
+
+        // Release camera tracks
+        this.lvStream?.getTracks().forEach(t => t.stop());
+        this.lvStream = null;
+        this.lvVideo?.remove();
+        this.lvVideo = null;
+        this.lvCanvas?.remove();
+        this.lvCanvas = null;
+
+        // Remove PiP badge
+        this.lvPip?.remove();
+        this.lvPip = null;
+
+        // Notify server: session stopped
+        if (client?.sendEvent) {
+            client.sendEvent('client_live_camera_stopped', {
+                data: { session_id: sessionId }
+            });
+        }
+        console.log(`📹 [LiveVision] Session stopped: ${sessionId}`);
+    }
+
+    private async captureAndSendFrame(
+        client: any,
+        sessionId: string,
+        maxWidth: number,
+        reason: string
+    ) {
+        if (!client || !this.lvVideo || !this.lvCanvas || !this.lvSessionId) return;
+        const video = this.lvVideo;
+        if (video.readyState < 2) return; // not yet playing
+
+        const canvas = this.lvCanvas;
+        const vw = video.videoWidth || maxWidth;
+        const vh = video.videoHeight || maxWidth;
+        const scale = Math.min(1, maxWidth / vw);
+        canvas.width = Math.round(vw * scale);
+        canvas.height = Math.round(vh * scale);
+        const ctx2d = canvas.getContext('2d');
+        if (!ctx2d) return;
+        ctx2d.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+        let blob: Blob;
+        try {
+            blob = await new Promise<Blob>((res, rej) =>
+                canvas.toBlob(b => b ? res(b) : rej(new Error('toBlob failed')), 'image/jpeg', 0.75)
+            );
+        } catch (e) {
+            console.warn('[LiveVision] Frame grab failed:', e);
+            return;
+        }
+
+        try {
+            // ─── RAW HTTP upload — bypass client.uploadMedia() entirely ───────
+            // client.uploadMedia() always fires client_media_update which triggers
+            // an LLM response and interrupts the call. For live vision frames we
+            // upload directly and ONLY send client_media_frame.
+            const serverUrl: string = client.serverUrl || '';
+            let uploadBase = '';
+            try { uploadBase = new URL(serverUrl).origin; } catch (_) {
+                uploadBase = serverUrl.replace(/\/webrtc.*$/, '').replace(/\/$/, '');
+            }
+            const callId: string = client.callId || '';
+            const uploadUrl = `${uploadBase}/media/upload`;
+
+            const form = new FormData();
+            form.append('file', blob, `frame_${sessionId}.jpg`);
+            form.append('call_id', callId);
+            form.append('reason', reason);
+
+            const res = await fetch(uploadUrl, { method: 'POST', body: form });
+            if (!res.ok) throw new Error(`Upload HTTP ${res.status}`);
+            const data = await res.json();
+            const media_id: string = data.media_id;
+            const url: string = data.url;
+            if (!media_id || !url) throw new Error('Upload response missing media_id/url');
+
+            // Guard: session may have closed while the upload was in flight
+            if (!this.lvSessionId || this.lvSessionId !== sessionId) return;
+
+            const seq = ++this.lvFrameSeq;
+            // Send ONLY client_media_frame — no client_media_update, no LLM trigger
+            if (client.sendEvent) {
+                client.sendEvent('client_media_frame', {
+                    data: {
+                        session_id: sessionId,
+                        frame_seq: seq,
+                        media_id,
+                        media_url: url,
+                        content_type: 'image/jpeg',
+                        reason,
+                    }
+                });
+            }
+            console.log(`📸 [LiveVision] Frame #${seq} sent (media_id: ${media_id})`);
+        } catch (e) {
+            console.warn('[LiveVision] Frame upload failed:', e);
+        }
+    }
+
+    private createLivePip(onStop: () => void): HTMLElement {
+        const pip = document.createElement('div');
+        pip.id = 'vnr-live-pip';
+        pip.style.cssText = [
+            'position:fixed', 'top:12px', 'right:12px', 'z-index:2147483647',
+            'display:flex', 'align-items:center', 'gap:8px',
+            'padding:6px 12px 6px 10px',
+            'background:rgba(15,23,42,0.92)', 'border-radius:999px',
+            "font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif",
+            'font-size:11px', 'font-weight:600', 'color:#fff',
+            'box-shadow:0 4px 16px rgba(0,0,0,0.25)',
+            'backdrop-filter:blur(8px)',
+            'cursor:default', 'user-select:none',
+        ].join(';');
+        pip.innerHTML = `
+            <span style="width:8px;height:8px;border-radius:50%;background:#ef4444;flex-shrink:0;animation:vnr-pip-pulse 1.5s ease-in-out infinite;"></span>
+            <span>Camera Live</span>
+            <button id="vnr-pip-stop" style="margin-left:4px;padding:2px 8px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.2);border-radius:999px;color:#fff;font-size:10px;font-weight:600;cursor:pointer;line-height:1.4;">Stop</button>
+        `;
+        if (!document.getElementById('vnr-pip-style')) {
+            const s = document.createElement('style');
+            s.id = 'vnr-pip-style';
+            s.textContent = `@keyframes vnr-pip-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.2);}}`;
+            document.head.appendChild(s);
+        }
+        pip.querySelector('#vnr-pip-stop')!.addEventListener('click', () => onStop());
+        document.body.appendChild(pip);
+        return pip;
+    }
+
+    // ─── Styles ──────────────────────────────────────────────────────────────
+
+    private injectStyles() {
+        if (this.styleInjected || document.getElementById('vnr-preset-styles')) return;
+        const s = document.createElement('style');
+        s.id = 'vnr-preset-styles';
+        s.textContent = OVERLAY_CSS;
+        document.head.appendChild(s);
+        this.styleInjected = true;
+    }
+
+    private createOverlay(): HTMLElement {
+        const el = document.createElement('div');
+        el.className = 'vnr-overlay';
+        // Append to document.body — NOT shadow root — so it sits above
+        // the widget's shadow stacking context at true document z-index
+        document.body.appendChild(el);
+        this.overlay = el;
+        return el;
+    }
+
+    private createModal(overlay: HTMLElement, title: string, reason: string): HTMLElement {
+        const modal = document.createElement('div');
+        modal.className = 'vnr-modal';
+        modal.style.position = 'relative';
+        modal.innerHTML = `
+            <button class="vnr-close-btn" aria-label="Close">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+            </button>
+            <h2 class="vnr-title">${title}</h2>
+            <div class="vnr-reason">
+                <svg width="14" height="14" style="flex-shrink:0;margin-top:1px" fill="none" stroke="#9ca3af" stroke-width="2" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                </svg>
+                <span>${reason}</span>
+            </div>
+        `;
+        overlay.appendChild(modal);
+        return modal;
+    }
+
+    // ─── Calendar Preset ─────────────────────────────────────────────────────
+
+    private renderCalendar(ctx: PresetContext, onComplete: OnComplete, onCancel: OnCancel) {
+        const today = new Date(); today.setHours(0, 0, 0, 0);
+        this.calViewYear = today.getFullYear();
+        this.calViewMonth = today.getMonth();
+        this.calSelectedTs = null;
+        this.calSelectedTime = null;
+
+        const title = ctx.clientFields.title || 'Select Date & Time';
+        const reason = ctx.args.reason || 'Please select a preferred time for your appointment.';
+
+        const overlay = this.createOverlay();
+        const modal = this.createModal(overlay, title, reason);
+
+        // Close button
+        modal.querySelector('.vnr-close-btn')!.addEventListener('click', () => {
+            this.dismiss(); onCancel('User closed the preset');
+        });
+
+        // Calendar container
+        const calContainer = document.createElement('div');
+        modal.appendChild(calContainer);
+
+        // Slots container (hidden until date picked)
+        const slotsSection = document.createElement('div');
+        slotsSection.style.display = 'none';
+        modal.appendChild(slotsSection);
+
+        // Actions
+        const actionsEl = document.createElement('div');
+        actionsEl.className = 'vnr-actions';
+        actionsEl.innerHTML = `
+            <button class="vnr-cancel-btn">Cancel</button>
+            <button class="vnr-confirm-btn" disabled>
+                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
+                Confirm
+            </button>
+        `;
+        modal.appendChild(actionsEl);
+
+        const confirmBtn = actionsEl.querySelector('.vnr-confirm-btn') as HTMLButtonElement;
+        actionsEl.querySelector('.vnr-cancel-btn')!.addEventListener('click', () => {
+            this.dismiss(); onCancel('User cancelled');
+        });
+        confirmBtn.addEventListener('click', () => {
+            if (!this.calSelectedTs || !this.calSelectedTime) return;
+            const dateObj = new Date(this.calSelectedTs);
+            const timeStr = formatSlotTime(this.calSelectedTime);
+            const y = dateObj.getFullYear();
+            const m = String(dateObj.getMonth() + 1).padStart(2, '0');
+            const d = String(dateObj.getDate()).padStart(2, '0');
+            const dateStr = `${y}-${m}-${d}`;
+
+            const tzStr = ctx.clientFields.timezone || '';
+            let slotData = typeof this.calSelectedTime === 'object' ? { ...this.calSelectedTime } : undefined;
+            if (slotData) {
+                for (const key of ['start', 'startTime', 'end', 'endTime']) {
+                    if (slotData[key] && typeof slotData[key] === 'string' && (slotData[key].includes('T') || !isNaN(Date.parse(slotData[key])))) {
+                        try {
+                            slotData[key] = toTimezoneISOString(new Date(slotData[key]), tzStr);
+                        } catch (_) { }
+                    }
+                }
+            }
+
+            this.dismiss();
+            onComplete({
+                date: dateStr,
+                time: timeStr,
+                timestamp: this.calSelectedTs,
+                formatted: `${dateObj.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })} at ${timeStr}`,
+                slot_data: slotData,
+            });
+        });
+
+        const renderGrid = () => {
+            const today2 = new Date(); today2.setHours(0, 0, 0, 0);
+            const firstDay = new Date(this.calViewYear, this.calViewMonth, 1).getDay();
+            const daysInMonth = new Date(this.calViewYear, this.calViewMonth + 1, 0).getDate();
+            const monthLabel = new Date(this.calViewYear, this.calViewMonth, 1)
+                .toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+            const isPrevDisabled = this.calViewYear === today2.getFullYear() && this.calViewMonth === today2.getMonth();
+
+            calContainer.innerHTML = `
+                <div class="vnr-month-nav">
+                    <button class="vnr-nav-btn" id="vnr-prev" ${isPrevDisabled ? 'disabled' : ''}>
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>
+                    </button>
+                    <span class="vnr-month-label">${monthLabel}</span>
+                    <button class="vnr-nav-btn" id="vnr-next">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
+                    </button>
+                </div>
+                <div class="vnr-cal-grid" id="vnr-grid"></div>
+            `;
+
+            calContainer.querySelector('#vnr-prev')!.addEventListener('click', () => {
+                if (this.calViewMonth === 0) { this.calViewMonth = 11; this.calViewYear--; }
+                else this.calViewMonth--;
+                renderGrid();
+            });
+            calContainer.querySelector('#vnr-next')!.addEventListener('click', () => {
+                if (this.calViewMonth === 11) { this.calViewMonth = 0; this.calViewYear++; }
+                else this.calViewMonth++;
+                renderGrid();
+            });
+
+            const grid = calContainer.querySelector('#vnr-grid')!;
+            ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].forEach(wd => {
+                const d = document.createElement('div'); d.className = 'vnr-wd'; d.textContent = wd;
+                grid.appendChild(d);
+            });
+            for (let i = 0; i < firstDay; i++) {
+                const empty = document.createElement('div'); grid.appendChild(empty);
+            }
+            for (let day = 1; day <= daysInMonth; day++) {
+                const ts = new Date(this.calViewYear, this.calViewMonth, day).getTime();
+                const isPast = ts < today2.getTime();
+                const isToday = ts === today2.getTime();
+                const isSel = this.calSelectedTs === ts;
+                const wrap = document.createElement('div'); wrap.style.textAlign = 'center';
+                const btn = document.createElement('button');
+                btn.className = 'vnr-day-btn';
+                if (isPast) btn.classList.add('vnr-day-past');
+                if (isToday && !isSel) btn.classList.add('vnr-day-today');
+                if (isSel) btn.classList.add('vnr-day-sel');
+                btn.disabled = isPast;
+                btn.textContent = String(day);
+                btn.addEventListener('click', () => {
+                    this.calSelectedTs = ts;
+                    this.calSelectedTime = null;
+                    confirmBtn.disabled = true;
+                    renderGrid();
+                    this.loadSlots(ctx, slotsSection, confirmBtn);
+                });
+                wrap.appendChild(btn); grid.appendChild(wrap);
+            }
+        };
+
+        renderGrid();
+    }
+
+    private loadSlots(ctx: PresetContext, slotsSection: HTMLElement, confirmBtn: HTMLButtonElement) {
+        const slotsApiUrl = ctx.clientFields.slots_api_url;
+
+        if (!this.calSelectedTs || !slotsApiUrl) {
+            this.renderSlots(slotsSection, ['09:00 AM', '10:30 AM', '01:00 PM', '02:30 PM', '04:00 PM'], confirmBtn);
+            return;
+        }
+
+        const dateObj = new Date(this.calSelectedTs);
+        const y = dateObj.getFullYear();
+        const m = String(dateObj.getMonth() + 1).padStart(2, '0');
+        const d = String(dateObj.getDate()).padStart(2, '0');
+        const dateStr = `${y}-${m}-${d}`;
+        const tzStr = ctx.clientFields.timezone || '';
+        const bounds = getDayBoundsInTimezone(y, dateObj.getMonth(), dateObj.getDate(), tzStr);
+        const startOfDay = bounds.start;
+        const endOfDay = bounds.end;
+
+        const rp = (val: string) => {
+            if (typeof val !== 'string') return val;
+            let replaced = val
+                .replace(/\{\{date\}\}/g, dateStr)
+                .replace(/\{\{timezone\}\}/g, tzStr)
+                .replace(/\{\{start_of_day\}\}/g, startOfDay.toISOString())
+                .replace(/\{\{end_of_day\}\}/g, endOfDay.toISOString());
+
+            Object.entries(ctx.clientFields).forEach(([k, v]) => {
+                if (v !== undefined && v !== null) {
+                    const escapedKey = k.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+                    const regex = new RegExp(`\\{\\{${escapedKey}\\}\\}`, 'g');
+                    replaced = replaced.replace(regex, String(v));
+                }
+            });
+            return replaced;
+        };
+
+        const method = (ctx.clientFields.slots_api_method || 'GET').toUpperCase();
+        let headers: Record<string, string> = { 'Content-Type': 'application/json' };
+        try { Object.entries(JSON.parse(ctx.clientFields.slots_api_headers || '{}')).forEach(([k, v]) => { headers[k] = rp(String(v)); }); } catch (_) { }
+
+        let bodyObj: Record<string, any> = {};
+        try { Object.entries(JSON.parse(ctx.clientFields.slots_api_body || '{}')).forEach(([k, v]) => { bodyObj[k] = rp(String(v)); }); } catch (_) { }
+
+        let url = rp(slotsApiUrl);
+        const fetchOpts: RequestInit = { method, headers };
+        if (method === 'GET') {
+            const qs = new URLSearchParams(Object.entries(bodyObj).map(([k, v]) => [k, String(v)])).toString();
+            if (qs) url += (url.includes('?') ? '&' : '?') + qs;
+        } else {
+            fetchOpts.body = JSON.stringify(bodyObj);
+        }
+
+        slotsSection.style.display = 'block';
+        slotsSection.innerHTML = `<div class="vnr-divider"></div><div class="vnr-center"><div class="vnr-spinner" style="margin:0 auto 8px"></div>Loading slots…</div>`;
+
+        console.log("🎯 [SDK Preset Renderer] Calling slots API with URL:", url, "fetchOpts:", fetchOpts);
+        fetch(url, fetchOpts)
+            .then(r => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
+            .then(data => {
+                let arr: any[] = [];
+                if (Array.isArray(data)) arr = data;
+                else if (data && typeof data === 'object') {
+                    for (const k of ['slots', 'free_slots', 'times', 'data', 'available_slots']) {
+                        if (Array.isArray(data[k])) { arr = data[k]; break; }
+                    }
+                }
+                this.renderSlots(slotsSection, arr, confirmBtn);
+            })
+            .catch(() => {
+                slotsSection.innerHTML = `<div class="vnr-divider"></div><div class="vnr-center" style="color:#ef4444">Failed to load slots. Please try again.</div>`;
+            });
+    }
+
+    private renderSlots(slotsSection: HTMLElement, times: any[], confirmBtn: HTMLButtonElement) {
+        const label = this.calSelectedTs
+            ? new Date(this.calSelectedTs).toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })
+            : 'Available Times';
+
+        const cols = times.some(t => formatSlotTime(t).length > 8) ? 2 : 3;
+        slotsSection.style.display = 'block';
+        slotsSection.innerHTML = `
+            <div class="vnr-divider"></div>
+            <div class="vnr-section-label">${label}</div>
+            ${times.length === 0
+                ? `<div class="vnr-center">No slots available for this date.</div>`
+                : `<div class="vnr-slots-grid" style="grid-template-columns:repeat(${cols},1fr)"></div>`
+            }
+        `;
+        if (times.length === 0) return;
+
+        const grid = slotsSection.querySelector('.vnr-slots-grid')!;
+        times.forEach((t) => {
+            const btn = document.createElement('button');
+            btn.className = 'vnr-slot-btn';
+            const isSel = this.calSelectedTime !== null && (
+                typeof t === 'object' && typeof this.calSelectedTime === 'object'
+                    ? JSON.stringify(t) === JSON.stringify(this.calSelectedTime)
+                    : t === this.calSelectedTime
+            );
+            if (isSel) btn.classList.add('vnr-slot-sel');
+            btn.textContent = formatSlotTime(t);
+            btn.addEventListener('click', () => {
+                this.calSelectedTime = t;
+                confirmBtn.disabled = false;
+                grid.querySelectorAll('.vnr-slot-btn').forEach(b => b.classList.remove('vnr-slot-sel'));
+                btn.classList.add('vnr-slot-sel');
+            });
+            grid.appendChild(btn);
+        });
+    }
+
+    // ─── Form Preset ─────────────────────────────────────────────────────────
+
+    private renderForm(ctx: PresetContext, onComplete: OnComplete, onCancel: OnCancel) {
+        const title = ctx.clientFields.title || ctx.args.title || 'Please fill out this form';
+        const reason = ctx.args.reason || 'Please provide the following information.';
+        // fields may come as an array OR a comma-separated string (e.g. "Name, Phone, Email")
+        const rawFields = ctx.clientFields.fields || ctx.args.fields;
+        const fields: string[] = Array.isArray(rawFields)
+            ? rawFields
+            : typeof rawFields === 'string'
+                ? rawFields.split(',').map((f: string) => f.trim()).filter(Boolean)
+                : [];
+
+        const overlay = this.createOverlay();
+        const modal = this.createModal(overlay, title, reason);
+        modal.querySelector('.vnr-close-btn')!.addEventListener('click', () => {
+            this.dismiss(); onCancel('User closed');
+        });
+
+        // Fields
+        const fieldsEl = document.createElement('div');
+        fieldsEl.className = 'vnr-fields';
+        fields.forEach((field: string) => {
+            const id = field.toLowerCase().replace(/[^a-z0-9]/g, '_');
+            const isEmail = id.includes('email');
+            const isPhone = id.includes('phone') || id.includes('number');
+            const type = isEmail ? 'email' : isPhone ? 'tel' : 'text';
+            const wrap = document.createElement('div');
+            wrap.innerHTML = `
+                <label class="vnr-field-label" for="vnr_${id}">${field} *</label>
+                <input class="vnr-input" type="${type}" id="vnr_${id}" name="${id}" placeholder="Enter your ${field.toLowerCase()}" required />
+            `;
+            fieldsEl.appendChild(wrap);
+        });
+        modal.appendChild(fieldsEl);
+
+        // Actions
+        const actionsEl = document.createElement('div');
+        actionsEl.className = 'vnr-actions';
+        actionsEl.style.marginTop = '16px';
+        actionsEl.innerHTML = `
+            <button class="vnr-cancel-btn">Cancel</button>
+            <button class="vnr-confirm-btn">
+                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
+                Submit
+            </button>
+        `;
+        modal.appendChild(actionsEl);
+
+        actionsEl.querySelector('.vnr-cancel-btn')!.addEventListener('click', () => {
+            this.dismiss(); onCancel('User cancelled');
+        });
+
+        const submitBtn = actionsEl.querySelector('.vnr-confirm-btn') as HTMLButtonElement;
+        submitBtn.addEventListener('click', () => {
+            const result: Record<string, string> = {};
+            let allFilled = true;
+            fields.forEach((field: string) => {
+                const id = field.toLowerCase().replace(/[^a-z0-9]/g, '_');
+                const input = modal.querySelector(`#vnr_${id}`) as HTMLInputElement;
+                if (!input?.value.trim()) { allFilled = false; input?.focus(); return; }
+                result[id] = input.value.trim();
+            });
+            if (!allFilled) return;
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = `<div class="vnr-spinner"></div>`;
+            setTimeout(() => { this.dismiss(); onComplete(result); }, 300);
+        });
+    }
+
+    // ─── Camera Preset ────────────────────────────────────────────────────────
+
+    private renderCamera(ctx: PresetContext, onComplete: OnComplete, onCancel: OnCancel, client?: any) {
+        const title = ctx.clientFields.title || 'Take a Photo';
+        const description = ctx.clientFields.description || 'Point your camera at the subject, then tap capture.';
+        const facingMode = ctx.clientFields.facing_mode || ctx.args.facing_mode || 'environment';
+        const reason = ctx.clientFields.reason || 'camera_capture';
+        const requireLivenessDefault = ctx.clientFields.liveness_check === true ||
+            ctx.clientFields.liveness_check === 'true' ||
+            ctx.args.liveness_check === true ||
+            ctx.args.liveness_check === 'true';
+
+        let stream: MediaStream | null = null;
+        let livenessInterval: any = null;
+
+        const overlay = this.createOverlay();
+
+        const modal = document.createElement('div');
+        modal.className = 'vnr-modal';
+        modal.style.cssText = 'position:relative;max-width:480px;width:100%';
+        modal.innerHTML = `
+            <button class="vnr-close-btn" aria-label="Close">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+            <h2 class="vnr-title" style="padding-right:32px">${title}</h2>
+            <p style="margin:0 0 14px;font-size:13px;color:#6b7280;line-height:1.5">${description}</p>
+            
+            <div class="vnr-liveness-toggle-wrap" style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:8px 12px">
+                <span style="font-size:12px;font-weight:600;color:#374151">Liveness Verification</span>
+                <label class="vnr-switch" style="position:relative;display:inline-block;width:34px;height:20px">
+                    <input type="checkbox" id="vnr-cam-liveness-toggle" style="opacity:0;width:0;height:0">
+                    <span class="vnr-slider" style="position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.3s;border-radius:20px"></span>
+                </label>
+            </div>
+
+            <div class="vnr-video-wrap" id="vnr-cam-wrap" style="position:relative">
+                <video id="vnr-cam-video" autoplay playsinline muted></video>
+                <div id="vnr-cam-guide" style="display:none;position:absolute;inset:0;pointer-events:none;border:3px dashed rgba(255,255,255,0.45);border-radius:50%;margin:auto;width:180px;height:240px;box-shadow:0 0 0 9999px rgba(15,23,42,0.6);transition:border-color 0.3s ease, box-shadow 0.3s ease">
+                    <div id="vnr-cam-guide-text" style="position:absolute;bottom:-45px;left:-40px;right:-40px;text-align:center;color:#fff;font-size:11px;font-weight:600;background:rgba(15,23,42,0.85);padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.1)">
+                        Align your face
+                    </div>
+                </div>
+                <div id="vnr-cam-overlay" style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0f172a">
+                    <div class="vnr-spinner" style="width:32px;height:32px;border-width:3px;border-color:rgba(255,255,255,.15);border-top-color:#fff"></div>
+                    <p style="margin:0;font-size:13px;color:#94a3b8">Opening camera…</p>
+                </div>
+            </div>
+
+            <div id="vnr-liveness-progress-container" style="display:none;margin-top:12px">
+                <div style="display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:#6b7280;margin-bottom:6px;letter-spacing:0.04em">
+                    <span>LIVENESS ANALYSIS</span>
+                    <span id="vnr-liveness-pct" style="color:#6366f1">0%</span>
+                </div>
+                <div style="width:100%;height:6px;background:#f3f4f6;border-radius:3px;overflow:hidden">
+                    <div id="vnr-liveness-bar" style="width:0%;height:100%;background:#6366f1;transition:width 0.1s linear"></div>
+                </div>
+            </div>
+
+            <canvas id="vnr-cam-canvas" style="display:none"></canvas>
+            <div id="vnr-cam-status" style="display:none"></div>
+            <div class="vnr-actions" style="margin-top:14px">
+                <button class="vnr-cancel-btn" id="vnr-cam-cancel">Cancel</button>
+                <button class="vnr-confirm-btn" id="vnr-cam-capture" disabled>
+                    <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+                    Capture & Send
+                </button>
+            </div>
+        `;
+        overlay.appendChild(modal);
+
+        const video = modal.querySelector('#vnr-cam-video') as HTMLVideoElement;
+        const canvas = modal.querySelector('#vnr-cam-canvas') as HTMLCanvasElement;
+        const camOverlay = modal.querySelector('#vnr-cam-overlay') as HTMLElement;
+        const statusEl = modal.querySelector('#vnr-cam-status') as HTMLElement;
+        const captureBtn = modal.querySelector('#vnr-cam-capture') as HTMLButtonElement;
+
+        const livenessToggle = modal.querySelector('#vnr-cam-liveness-toggle') as HTMLInputElement;
+        const livenessContainer = modal.querySelector('#vnr-liveness-progress-container') as HTMLElement;
+        const livenessProgressBar = modal.querySelector('#vnr-liveness-bar') as HTMLElement;
+        const livenessPctText = modal.querySelector('#vnr-liveness-pct') as HTMLElement;
+        const guide = modal.querySelector('#vnr-cam-guide') as HTMLElement;
+        const guideText = modal.querySelector('#vnr-cam-guide-text') as HTMLElement;
+
+        const stopStream = () => {
+            if (livenessInterval) {
+                clearInterval(livenessInterval);
+                livenessInterval = null;
+            }
+            stream?.getTracks().forEach(t => t.stop());
+            stream = null;
+            video.srcObject = null;
+        };
+
+        modal.querySelector('.vnr-close-btn')!.addEventListener('click', () => { stopStream(); this.dismiss(); onCancel('User closed'); });
+        modal.querySelector('#vnr-cam-cancel')!.addEventListener('click', () => { stopStream(); this.dismiss(); onCancel('User cancelled'); });
+
+        // Start camera
+        navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: facingMode } }, audio: false })
+            .then(s => {
+                stream = s;
+                video.srcObject = s;
+                return video.play().catch(() => { });
+            })
+            .then(() => {
+                camOverlay.style.display = 'none';
+                // Add LIVE badge
+                const badge = document.createElement('div');
+                badge.className = 'vnr-live-badge';
+                badge.innerHTML = '<span class="vnr-live-dot"></span>LIVE';
+                modal.querySelector('#vnr-cam-wrap')!.appendChild(badge);
+
+                livenessToggle.checked = requireLivenessDefault;
+                updateLivenessState();
+            })
+            .catch(() => {
+                camOverlay.innerHTML = '<p style="color:#f87171;font-size:13px;text-align:center;padding:24px">Camera access denied.<br>Please allow camera permissions.</p>';
+            });
+
+        function updateLivenessState() {
+            if (livenessInterval) {
+                clearInterval(livenessInterval);
+                livenessInterval = null;
+            }
+
+            if (livenessToggle.checked) {
+                livenessContainer.style.display = 'block';
+                guide.style.display = 'block';
+                captureBtn.disabled = true;
+                startLivenessCheck();
+            } else {
+                livenessContainer.style.display = 'none';
+                guide.style.display = 'none';
+                captureBtn.disabled = false;
+            }
+        }
+
+        livenessToggle.addEventListener('change', updateLivenessState);
+
+        function startLivenessCheck() {
+            let prevPixels: Uint8ClampedArray | null = null;
+            const baselineDiffs: number[] = [];
+            let baseline = 1.0;
+            let livenessProgress = 0;
+            let livenessState = 0; // 0: calibrating, 1: action prompt, 2: verified
+            let calibrationFrames = 0;
+            let actionDetected = false;
+
+            const offscreenCanvas = document.createElement('canvas');
+            const offscreenCtx = offscreenCanvas.getContext('2d')!;
+            offscreenCanvas.width = 80;
+            offscreenCanvas.height = 60;
+
+            livenessProgressBar.style.width = '0%';
+            livenessProgressBar.style.backgroundColor = '#6366f1';
+            livenessPctText.style.color = '#6366f1';
+            livenessPctText.innerText = '0%';
+            guide.style.borderColor = 'rgba(255,255,255,0.45)';
+            guide.style.boxShadow = '0 0 0 9999px rgba(15,23,42,0.6)';
+            guideText.innerText = "Align your face in center";
+            guideText.style.color = "#fff";
+
+            livenessInterval = setInterval(() => {
+                if (!stream || video.paused || video.ended) return;
+
+                offscreenCtx.drawImage(video, 0, 0, 80, 60);
+                const imgData = offscreenCtx.getImageData(0, 0, 80, 60);
+                const pixels = imgData.data;
+
+                if (prevPixels) {
+                    let totalDiff = 0;
+                    for (let i = 0; i < pixels.length; i += 4) {
+                        totalDiff += Math.abs(pixels[i] - prevPixels[i]);
+                        totalDiff += Math.abs(pixels[i + 1] - prevPixels[i + 1]);
+                        totalDiff += Math.abs(pixels[i + 2] - prevPixels[i + 2]);
+                    }
+                    const avgDiff = totalDiff / (pixels.length / 4 * 3);
+
+                    if (livenessState === 0) {
+                        // Calibration
+                        calibrationFrames++;
+                        baselineDiffs.push(avgDiff);
+
+                        const pct = Math.min(100, Math.round((calibrationFrames / 15) * 100));
+                        livenessProgressBar.style.width = `${pct * 0.3}%`;
+                        livenessPctText.innerText = `${Math.round(pct * 0.3)}%`;
+                        guideText.innerText = "Hold still to calibrate…";
+                        guideText.style.color = "#a5b4fc";
+
+                        if (calibrationFrames >= 15) {
+                            const sum = baselineDiffs.reduce((a, b) => a + b, 0);
+                            baseline = sum / baselineDiffs.length;
+                            if (baseline < 0.2) baseline = 0.2;
+                            livenessState = 1;
+                            calibrationFrames = 0;
+                            livenessProgressBar.style.width = '30%';
+                            livenessPctText.innerText = '30%';
+                        }
+                    } else if (livenessState === 1) {
+                        // Action verification
+                        guideText.innerText = "Now blink or turn head slightly";
+                        guideText.style.color = "#ffd2d2";
+
+                        const threshold = Math.max(3.0, baseline * 3.5);
+
+                        if (avgDiff > threshold && avgDiff < 30.0) {
+                            livenessProgress += 15;
+                            if (livenessProgress > 70) {
+                                livenessProgress = 70;
+                                actionDetected = true;
+                            }
+                            const currentPct = 30 + livenessProgress;
+                            livenessProgressBar.style.width = `${currentPct}%`;
+                            livenessPctText.innerText = `${currentPct}%`;
+                        } else if (actionDetected && avgDiff <= threshold * 1.5) {
+                            livenessState = 2;
+                            livenessProgressBar.style.width = '100%';
+                            livenessProgressBar.style.backgroundColor = '#10b981';
+                            livenessPctText.innerText = '100%';
+                            livenessPctText.style.color = '#10b981';
+                            guideText.innerText = "✓ Liveness Verified! Click Capture & Send.";
+                            guideText.style.color = '#10b981';
+                            guide.style.borderColor = '#10b981';
+                            guide.style.boxShadow = '0 0 0 9999px rgba(16,185,129,0.2)';
+                            captureBtn.disabled = false;
+
+                            if (livenessInterval) {
+                                clearInterval(livenessInterval);
+                                livenessInterval = null;
+                            }
+                        }
+                    }
+                }
+                prevPixels = pixels;
+            }, 100);
+        }
+
+        captureBtn.addEventListener('click', async () => {
+            if (!stream || video.videoWidth === 0) return;
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            const ctx2d = canvas.getContext('2d')!;
+            ctx2d.drawImage(video, 0, 0);
+            stopStream();
+
+            modal.querySelector('#vnr-cam-wrap')!.setAttribute('style', 'display:none');
+            if (modal.querySelector('.vnr-liveness-toggle-wrap')) {
+                (modal.querySelector('.vnr-liveness-toggle-wrap') as HTMLElement).style.display = 'none';
+            }
+            livenessContainer.style.display = 'none';
+            captureBtn.disabled = true;
+            statusEl.style.display = 'block';
+            statusEl.innerHTML = `<div class="vnr-center"><div class="vnr-spinner" style="margin:0 auto 8px"></div>Sending photo…</div>`;
+
+            try {
+                const blob = await new Promise<Blob | null>(res => canvas.toBlob(b => res(b), 'image/jpeg', 0.85));
+                if (!blob) throw new Error('Capture failed');
+                const file = new File([blob], `capture-${Date.now()}.jpg`, { type: 'image/jpeg' });
+
+                if (client && typeof client.uploadMedia === 'function') {
+                    const { media_id, url } = await client.uploadMedia(file, reason, 'User captured a photo via camera');
+                    statusEl.innerHTML = `<div class="vnr-center" style="color:#22c55e">✓ Photo sent!</div>`;
+                    setTimeout(() => { this.dismiss(); onComplete({ file_name: file.name, file_type: file.type, file_size: file.size, media_id, url, message: 'User captured and sent a photo.' }); }, 400);
+                } else {
+                    const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
+                    statusEl.innerHTML = `<div class="vnr-center" style="color:#22c55e">✓ Photo ready!</div>`;
+                    setTimeout(() => { this.dismiss(); onComplete({ file_name: file.name, data_url: dataUrl, message: 'User captured a photo.' }); }, 400);
+                }
+            } catch (err: any) {
+                statusEl.innerHTML = `<div class="vnr-center" style="color:#ef4444">${err?.message || 'Capture failed'}</div>`;
+            }
+        });
+    }
+
+    // ─── Upload Preset ────────────────────────────────────────────────────────
+
+    private renderUpload(ctx: PresetContext, onComplete: OnComplete, onCancel: OnCancel, client?: any) {
+        const title = ctx.clientFields.title || 'Upload a File';
+        const description = ctx.clientFields.description || 'Drop or select a file to send to your agent.';
+        const reason = ctx.clientFields.reason || 'upload';
+        const acceptTypes = ctx.clientFields.accept || 'image/*,application/pdf,text/plain,text/csv';
+
+        let selectedFile: File | null = null;
+
+        const overlay = this.createOverlay();
+
+        const modal = document.createElement('div');
+        modal.className = 'vnr-modal';
+        modal.style.cssText = 'position:relative;max-width:480px;width:100%';
+        modal.innerHTML = `
+            <button class="vnr-close-btn" aria-label="Close">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+            <h2 class="vnr-title" style="padding-right:32px">${title}</h2>
+            <p style="margin:0 0 14px;font-size:13px;color:#6b7280;line-height:1.5">${description}</p>
+            <div class="vnr-dropzone" id="vnr-drop-zone">
+                <div style="font-size:32px;margin-bottom:8px">📁</div>
+                <p style="margin:0 0 4px;font-weight:600;color:#374151;font-size:14px">Drag & drop here</p>
+                <p style="margin:0 0 14px;color:#9ca3af;font-size:12px">or click to browse</p>
+                <span style="display:inline-block;padding:7px 16px;background:#111;color:#fff;border-radius:9px;font-size:13px;font-weight:600">Choose File</span>
+                <p style="margin:12px 0 0;font-size:11px;color:#9ca3af">Images, PDF, CSV, Docs · Max 10 MB</p>
+            </div>
+            <input id="vnr-file-input" type="file" accept="${acceptTypes}" style="display:none">
+            <div id="vnr-file-preview" style="display:none;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#f9fafb"></div>
+            <div id="vnr-upload-status" style="display:none"></div>
+            <div class="vnr-actions" style="margin-top:14px">
+                <button class="vnr-cancel-btn" id="vnr-up-cancel">Cancel</button>
+                <button class="vnr-confirm-btn" id="vnr-up-submit" disabled>
+                    <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
+                    Upload & Send
+                </button>
+            </div>
+        `;
+        overlay.appendChild(modal);
+
+        const dropZone = modal.querySelector('#vnr-drop-zone') as HTMLElement;
+        const fileInput = modal.querySelector('#vnr-file-input') as HTMLInputElement;
+        const previewEl = modal.querySelector('#vnr-file-preview') as HTMLElement;
+        const statusEl = modal.querySelector('#vnr-upload-status') as HTMLElement;
+        const submitBtn = modal.querySelector('#vnr-up-submit') as HTMLButtonElement;
+
+        modal.querySelector('.vnr-close-btn')!.addEventListener('click', () => { this.dismiss(); onCancel('User closed'); });
+        modal.querySelector('#vnr-up-cancel')!.addEventListener('click', () => { this.dismiss(); onCancel('User cancelled'); });
+
+        const processFile = (f: File) => {
+            selectedFile = f;
+            dropZone.style.display = 'none';
+            const icon = f.type.startsWith('image/') ? '🖼️' : f.type.includes('pdf') ? '📄' : '📁';
+            const kb = (f.size / 1024).toFixed(1);
+            previewEl.style.display = 'block';
+            previewEl.innerHTML = `
+                <div style="display:flex;align-items:center;gap:10px">
+                    <span style="font-size:28px">${icon}</span>
+                    <div style="flex:1;min-width:0">
+                        <p style="margin:0;font-weight:600;font-size:13px;color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${f.name}</p>
+                        <p style="margin:3px 0 0;font-size:11px;color:#6b7280">${f.type || 'unknown'} · ${kb} KB</p>
+                    </div>
+                    <button id="vnr-remove-file" style="width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;color:#6b7280;flex-shrink:0">
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                    </button>
+                </div>
+            `;
+            previewEl.querySelector('#vnr-remove-file')!.addEventListener('click', () => {
+                selectedFile = null;
+                previewEl.style.display = 'none';
+                dropZone.style.display = 'block';
+                submitBtn.disabled = true;
+            });
+            submitBtn.disabled = false;
+        };
+
+        dropZone.addEventListener('click', () => fileInput.click());
+        dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag'); });
+        dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag'));
+        dropZone.addEventListener('drop', e => {
+            e.preventDefault(); dropZone.classList.remove('drag');
+            const f = (e as DragEvent).dataTransfer?.files[0];
+            if (f) processFile(f);
+        });
+        fileInput.addEventListener('change', () => {
+            const f = fileInput.files?.[0];
+            if (f) processFile(f);
+        });
+
+        submitBtn.addEventListener('click', async () => {
+            if (!selectedFile) return;
+            const file = selectedFile;
+            dropZone.style.display = 'none';
+            previewEl.style.display = 'none';
+            statusEl.style.display = 'block';
+            statusEl.innerHTML = `<div class="vnr-center"><div class="vnr-spinner" style="margin:0 auto 8px"></div>Uploading…</div>`;
+            submitBtn.disabled = true;
+
+            try {
+                if (client && typeof client.uploadMedia === 'function') {
+                    const { media_id, url } = await client.uploadMedia(file, reason, `User uploaded: ${file.name}`);
+                    statusEl.innerHTML = `<div class="vnr-center" style="color:#22c55e">✓ File sent!</div>`;
+                    setTimeout(() => { this.dismiss(); onComplete({ file_name: file.name, file_type: file.type, file_size: file.size, media_id, url, message: `User uploaded: ${file.name}` }); }, 400);
+                } else {
+                    const reader = new FileReader();
+                    reader.onload = e => {
+                        statusEl.innerHTML = `<div class="vnr-center" style="color:#22c55e">✓ File ready!</div>`;
+                        setTimeout(() => { this.dismiss(); onComplete({ file_name: file.name, file_type: file.type, file_size: file.size, data_url: (e.target as FileReader).result, message: `User uploaded: ${file.name}` }); }, 400);
+                    };
+                    reader.readAsDataURL(file);
+                }
+            } catch (err: any) {
+                statusEl.innerHTML = `<div class="vnr-center" style="color:#ef4444">${err?.message || 'Upload failed. Please try again.'}</div>`;
+                submitBtn.disabled = false;
+            }
+        });
+    }
+
+    // ─── Navigate Preset ──────────────────────────────────────────────────────
+
+    private renderNavigate(ctx: PresetContext, onComplete: OnComplete, _onCancel: OnCancel) {
+        const targetUrl = String(
+            ctx.clientFields?.target_url ||
+            ctx.args?.target_url ||
+            '/'
+        );
+
+        console.log(`🚀 [WidgetPresetRenderer] Navigating to: ${targetUrl}`);
+
+        const isExternal = targetUrl.startsWith('http://') || targetUrl.startsWith('https://');
+
+        if (isExternal) {
+            window.open(targetUrl, '_blank', 'noopener,noreferrer');
+        } else {
+            const oldUrl = window.location.href;
+            window.dispatchEvent(new CustomEvent('vanira:navigate', { detail: { url: targetUrl } }));
+
+            // Check if page/URL changed after a short delay. If not, fallback to direct location change
+            setTimeout(() => {
+                if (window.location.href === oldUrl) {
+                    window.location.href = targetUrl;
+                }
+            }, 150);
+        }
+
+        onComplete({ navigated_to: targetUrl, status: 'success' });
+    }
+
+    // ─── Highlight Element Preset ──────────────────────────────────────────────
+
+    private renderHighlight(ctx: PresetContext, onComplete: OnComplete, onCancel: OnCancel) {
+        const toolArgs = ctx.args || {};
+        const clientFields = ctx.clientFields || {};
+
+        const selector = String(toolArgs.css_selector || clientFields.css_selector || toolArgs.selector || clientFields.selector || '');
+        const color = String(toolArgs.highlight_color || clientFields.highlight_color || '#a855f7');
+        const durationMs = Number(toolArgs.duration_ms || clientFields.duration_ms || 3000);
+
+        console.log(`🔦 [WidgetPresetRenderer] renderHighlight triggered`);
+        console.log(`   → selector: "${selector}"`);
+        console.log(`   → color: "${color}"`);
+        console.log(`   → duration: ${durationMs}ms`);
+
+        if (!selector) {
+            console.warn(`⚠️ [WidgetPresetRenderer] No css_selector provided for highlight`);
+            onCancel('No css_selector provided for highlight');
+            return;
+        }
+
+        const el = document.querySelector(selector) as HTMLElement | null;
+        console.log(`🔦 [WidgetPresetRenderer] querySelector("${selector}") →`, el);
+
+        if (!el) {
+            console.warn(`⚠️ [WidgetPresetRenderer] Element not found for selector: "${selector}"`);
+            onCancel(`Element not found for selector: "${selector}"`);
+            return;
+        }
+
+        // Save original styles
+        const prevOutline = el.style.outline;
+        const prevOutlineOffset = el.style.outlineOffset;
+        const prevBoxShadow = el.style.boxShadow;
+        const prevTransition = el.style.transition;
+        const prevScrollMargin = el.style.scrollMarginTop;
+
+        // Apply glowing highlight
+        el.style.transition = 'outline 0.2s ease, box-shadow 0.2s ease';
+        el.style.outline = `3px solid ${color}`;
+        el.style.outlineOffset = '6px';
+        el.style.boxShadow = `0 0 0 8px ${color}33, 0 0 32px ${color}88`;
+        el.style.scrollMarginTop = '100px';
+
+        console.log(`✅ [WidgetPresetRenderer] Highlight applied to:`, el);
+        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+        // Remove after duration
+        setTimeout(() => {
+            el.style.outline = prevOutline;
+            el.style.outlineOffset = prevOutlineOffset;
+            el.style.boxShadow = prevBoxShadow;
+            el.style.transition = prevTransition;
+            el.style.scrollMarginTop = prevScrollMargin;
+            console.log(`🔦 [WidgetPresetRenderer] Highlight removed from: "${selector}"`);
+        }, durationMs);
+
+        onComplete({ status: 'success', message: `Element highlighted: ${selector}` });
+    }
+
+    // ─── Type Text Preset ──────────────────────────────────────────────────────
+
+    private renderTypeText(ctx: PresetContext, onComplete: OnComplete, onCancel: OnCancel) {
+        const toolArgs = ctx.args || {};
+        const clientFields = ctx.clientFields || {};
+
+        const idOrSelector = String(
+            toolArgs.element_id || clientFields.element_id ||
+            toolArgs.css_selector || clientFields.css_selector ||
+            toolArgs.selector || clientFields.selector || ''
+        ).trim();
+        let text = String(
+            toolArgs.text_to_type || clientFields.text_to_type ||
+            toolArgs.text || clientFields.text ||
+            toolArgs.value || clientFields.value ||
+            toolArgs.search_query || clientFields.search_query ||
+            toolArgs.query || clientFields.query || ''
+        );
+
+        // Clean up LaTeX formulas for better plain text readability
+        text = cleanLatexText(text);
+        const delayMs = Number(
+            toolArgs.delay_ms !== undefined ? toolArgs.delay_ms :
+                clientFields.delay_ms !== undefined ? clientFields.delay_ms :
+                    50
+        );
+
+        console.log(`✍️ [WidgetPresetRenderer] renderTypeText triggered`);
+        console.log(`   → idOrSelector: "${idOrSelector}"`);
+        console.log(`   → text_to_type: "${text}"`);
+        console.log(`   → delayMs: ${delayMs}ms`);
+
+        // Find element by selector or ID
+        let el: HTMLInputElement | HTMLTextAreaElement | HTMLElement | null = null;
+        if (idOrSelector) {
+            try {
+                el = document.querySelector(idOrSelector) as HTMLElement | null;
+            } catch (_) { }
+            if (!el) {
+                el = document.getElementById(idOrSelector);
+            }
+        }
+
+        const showFallbackPopup = () => {
+            console.log(`ℹ️ [WidgetPresetRenderer] Target element not found or selector not provided. Displaying fallback popup.`);
+
+            // Check if there is already an existing whiteboard modal in the document
+            let overlay = document.querySelector('.vnr-overlay') as HTMLElement | null;
+            let modal = document.querySelector('.vnr-whiteboard-modal') as HTMLElement | null;
+            let textarea = document.querySelector('.vnr-whiteboard-textarea') as HTMLTextAreaElement | null;
+
+            if (!overlay || !modal || !textarea) {
+                // Load chalk fonts
+                if (!document.getElementById('vnr-chalk-font')) {
+                    const link = document.createElement('link');
+                    link.id = 'vnr-chalk-font';
+                    link.rel = 'stylesheet';
+                    link.href = 'https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Caveat:wght@400;700&display=swap';
+                    document.head.appendChild(link);
+                }
+
+                // If it doesn't exist, create it
+                overlay = this.createOverlay();
+                modal = document.createElement('div');
+                modal.className = 'vnr-modal vnr-whiteboard-modal';
+
+                // Style modal as a large chalkboard
+                modal.style.position = 'relative';
+                modal.style.width = '100%';
+                modal.style.maxWidth = '750px';
+                modal.style.height = '600px';
+                modal.style.maxHeight = '85vh';
+                modal.style.display = 'flex';
+                modal.style.flexDirection = 'column';
+                modal.style.background = '#0d0e12'; // Slate black
+                modal.style.border = '12px solid #5c4033'; // Thick wooden frame
+                modal.style.borderRadius = '16px';
+                modal.style.boxShadow = '0 25px 60px rgba(0,0,0,0.65), inset 0 0 30px rgba(0,0,0,0.95)';
+                modal.style.padding = '0'; // Clean slate without padding, textarea spans the whole inner area
+                modal.style.overflow = 'hidden';
+
+                // Setup close button on the chalkboard frame/top-right
+                const closeBtn = document.createElement('button');
+                closeBtn.className = 'vnr-close-btn';
+                closeBtn.ariaLabel = 'Close';
+                closeBtn.style.cssText = 'position:absolute;top:16px;right:16px;z-index:10;background:rgba(0,0,0,0.4);border:none;cursor:pointer;color:#9ca3af;line-height:1;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.2s, color 0.2s;';
+                closeBtn.innerHTML = `
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+                        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                    </svg>
+                `;
+                closeBtn.onmouseenter = () => {
+                    closeBtn.style.background = 'rgba(0,0,0,0.6)';
+                    closeBtn.style.color = '#ffffff';
+                };
+                closeBtn.onmouseleave = () => {
+                    closeBtn.style.background = 'rgba(0,0,0,0.4)';
+                    closeBtn.style.color = '#9ca3af';
+                };
+                closeBtn.onclick = () => {
+                    this.dismiss();
+                    onCancel('User dismissed typing popup');
+                };
+                modal.appendChild(closeBtn);
+
+                const container = document.createElement('div');
+                container.style.display = 'flex';
+                container.style.flexDirection = 'column';
+                container.style.flex = '1';
+                container.style.height = '100%';
+
+                textarea = document.createElement('textarea');
+                textarea.className = 'vnr-whiteboard-textarea';
+                textarea.style.width = '100%';
+                textarea.style.height = '100%';
+                textarea.style.flex = '1';
+                textarea.style.background = '#0a0a0c'; // Blackboard black
+                textarea.style.border = 'none';
+                textarea.style.padding = '32px 48px 32px 32px'; // Right padding extra for close button clearance
+                textarea.style.fontSize = '24px'; // Slightly larger font size for premium chalk look
+                textarea.style.lineHeight = '1.6';
+                textarea.style.fontFamily = "'Architects Daughter', 'Caveat', 'Chalkboard SE', 'Chalkboard', cursive, sans-serif";
+                textarea.style.color = '#ffffff';
+                textarea.style.textShadow = '0 0 3px rgba(255, 255, 255, 0.45), 0 0 8px rgba(255, 255, 255, 0.15)'; // realistic soft chalk glow
+                textarea.style.outline = 'none';
+                textarea.style.resize = 'none';
+                textarea.style.boxSizing = 'border-box';
+                textarea.placeholder = 'Chalkboard active...';
+
+                // Initialize value from persisted chalkboardContent
+                textarea.value = this.chalkboardContent;
+
+                // Keep manual user edits synchronized with this.chalkboardContent
+                textarea.addEventListener('input', () => {
+                    this.chalkboardContent = textarea!.value;
+                });
+
+                container.appendChild(textarea);
+                modal.appendChild(container);
+                overlay.appendChild(modal);
+            }
+
+            textarea.focus();
+
+            const initialText = this.chalkboardContent || '';
+            const textToAppend = initialText ? '\n' + text : text;
+
+            if (delayMs <= 0) {
+                this.chalkboardContent = initialText + textToAppend;
+                textarea.value = this.chalkboardContent;
+                textarea.scrollTop = textarea.scrollHeight;
+                onComplete({ status: 'success' });
+            } else {
+                let currentText = initialText;
+                let index = 0;
+
+                const typeNextChar = () => {
+                    if (!this.overlay) return; // dismissed
+                    if (index < textToAppend.length) {
+                        currentText += textToAppend[index];
+                        this.chalkboardContent = currentText;
+                        textarea!.value = currentText;
+                        textarea!.scrollTop = textarea!.scrollHeight;
+                        index++;
+                        setTimeout(typeNextChar, delayMs);
+                    } else {
+                        onComplete({ status: 'success' });
+                    }
+                };
+                typeNextChar();
+            }
+        };
+
+        if (!el) {
+            showFallbackPopup();
+            return;
+        }
+
+        // Focus the input
+        el.focus();
+
+        const isInput = el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || 'value' in el;
+        if (!isInput) {
+            console.log(`ℹ️ [WidgetPresetRenderer] Target is not a form input. Setting textContent directly.`);
+            el.textContent = text;
+            onComplete({ status: 'success' });
+            return;
+        }
+
+        const inputEl = el as HTMLInputElement | HTMLTextAreaElement;
+
+        const initialVal = inputEl.value || '';
+
+        if (delayMs <= 0) {
+            inputEl.value = initialVal + text;
+            inputEl.dispatchEvent(new Event('input', { bubbles: true }));
+            inputEl.dispatchEvent(new Event('change', { bubbles: true }));
+            onComplete({ status: 'success' });
+            return;
+        }
+
+        // Simulate character-by-character typing
+        let currentText = initialVal;
+        let index = 0;
+
+        const typeNextChar = () => {
+            if (index < text.length) {
+                currentText += text[index];
+                inputEl.value = currentText;
+                inputEl.dispatchEvent(new Event('input', { bubbles: true }));
+                index++;
+                setTimeout(typeNextChar, delayMs);
+            } else {
+                inputEl.dispatchEvent(new Event('change', { bubbles: true }));
+                onComplete({ status: 'success' });
+            }
+        };
+
+        typeNextChar();
+    }
+
+    private renderEraseText(ctx: PresetContext, onComplete: OnComplete, _onCancel: OnCancel) {
+        const toolArgs = ctx.args || {};
+        const clientFields = ctx.clientFields || {};
+
+        const idOrSelector = String(
+            toolArgs.element_id || clientFields.element_id ||
+            toolArgs.css_selector || clientFields.css_selector ||
+            toolArgs.selector || clientFields.selector || ''
+        ).trim();
+
+        // Options: 'all' (default) | 'words'
+        const mode = String(
+            toolArgs.mode || clientFields.mode || 'all'
+        ).trim().toLowerCase();
+
+        // Options: num_words / words_count / count (default: 1)
+        const numWords = Number(
+            toolArgs.num_words !== undefined ? toolArgs.num_words :
+                toolArgs.words_count !== undefined ? toolArgs.words_count :
+                    toolArgs.count !== undefined ? toolArgs.count : 1
+        );
+
+        const delayMs = Number(
+            toolArgs.delay_ms !== undefined ? toolArgs.delay_ms :
+                clientFields.delay_ms !== undefined ? clientFields.delay_ms :
+                    50
+        );
+
+        console.log(`🧹 [WidgetPresetRenderer] renderEraseText triggered`);
+        console.log(`   → idOrSelector: "${idOrSelector}"`);
+        console.log(`   → mode: "${mode}"`);
+        console.log(`   → numWords: ${numWords}`);
+        console.log(`   → delayMs: ${delayMs}ms`);
+
+        // Find element by selector or ID, fallback to whiteboard
+        let el: HTMLInputElement | HTMLTextAreaElement | HTMLElement | null = null;
+        if (idOrSelector) {
+            try {
+                el = document.querySelector(idOrSelector) as HTMLElement | null;
+            } catch (_) { }
+            if (!el) {
+                el = document.getElementById(idOrSelector);
+            }
+        }
+
+        // Fallback to whiteboard if no element found
+        if (!el) {
+            el = document.querySelector('.vnr-whiteboard-textarea') as HTMLTextAreaElement | null;
+        }
+
+        if (!el) {
+            console.warn(`[WidgetPresetRenderer] Target element for erase not found.`);
+            onComplete({ status: 'error', message: 'Target element not found' });
+            return;
+        }
+
+        // If it's a generic div or span, just clear textContent
+        if (!(el instanceof HTMLInputElement) && !(el instanceof HTMLTextAreaElement)) {
+            if (mode === 'words') {
+                const text = el.textContent || '';
+                el.textContent = this.eraseLastWords(text, numWords);
+            } else {
+                el.textContent = '';
+            }
+            onComplete({ status: 'success' });
+            return;
+        }
+
+        const inputEl = el as HTMLInputElement | HTMLTextAreaElement;
+        const currentVal = inputEl.value || '';
+        let targetVal = '';
+
+        if (mode === 'words') {
+            targetVal = this.eraseLastWords(currentVal, numWords);
+        } else {
+            targetVal = '';
+        }
+
+        if (delayMs <= 0) {
+            inputEl.value = targetVal;
+            if (inputEl.classList.contains('vnr-whiteboard-textarea')) {
+                this.chalkboardContent = targetVal;
+            }
+            inputEl.dispatchEvent(new Event('input', { bubbles: true }));
+            inputEl.dispatchEvent(new Event('change', { bubbles: true }));
+            onComplete({ status: 'success' });
+            return;
+        }
+
+        // Animate deletion character-by-character (simulating backspaces)
+        const deleteNextChar = () => {
+            if (inputEl.value.length > targetVal.length) {
+                inputEl.value = inputEl.value.slice(0, -1);
+                if (inputEl.classList.contains('vnr-whiteboard-textarea')) {
+                    this.chalkboardContent = inputEl.value;
+                }
+                inputEl.dispatchEvent(new Event('input', { bubbles: true }));
+
+                // Keep scroll at bottom if it's the whiteboard
+                if (inputEl.classList.contains('vnr-whiteboard-textarea')) {
+                    inputEl.scrollTop = inputEl.scrollHeight;
+                }
+
+                // Delete slightly faster than standard typing delay
+                setTimeout(deleteNextChar, Math.max(10, delayMs / 2));
+            } else {
+                inputEl.dispatchEvent(new Event('change', { bubbles: true }));
+                onComplete({ status: 'success' });
+            }
+        };
+
+        deleteNextChar();
+    }
+
+    private eraseLastWords(text: string, count: number): string {
+        if (!text) return '';
+        const trimmed = text.trimEnd();
+        if (!trimmed) return '';
+
+        let current = trimmed;
+        for (let i = 0; i < count; i++) {
+            const lastSpace = current.lastIndexOf(' ');
+            const lastNewline = current.lastIndexOf('\n');
+            const cutIndex = Math.max(lastSpace, lastNewline);
+            if (cutIndex === -1) {
+                current = '';
+                break;
+            } else {
+                current = current.slice(0, cutIndex).trimEnd();
+            }
+        }
+        return current;
+    }
+}