mnfst 0.5.14

package/dist/manifest.appwrite.presence.js

@@ -0,0 +1,1845 @@
+/* Manifest Data Sources - Presence Utilities */
+
+// Track active presence subscriptions
+const presenceSubscriptions = new Map(); // Map<channelId, { unsubscribe, cursors, updateInterval }>
+
+// Cursor position tracking per channel
+const cursorPositions = new Map(); // Map<channelId, { x, y }>
+
+// Generate a color for a user based on their ID
+function getUserColor(userId) {
+    if (!userId) return '#666';
+
+    // Simple hash function to generate consistent color
+    let hash = 0;
+    for (let i = 0; i < userId.length; i++) {
+        hash = userId.charCodeAt(i) + ((hash << 5) - hash);
+    }
+
+    // Generate a bright, saturated color
+    const hue = Math.abs(hash) % 360;
+    return `hsl(${hue}, 70%, 50%)`;
+}
+
+// Smooth cursor interpolation using velocity (dead reckoning)
+// This allows smooth cursor rendering between updates without frequent server writes
+// Based on techniques used by Figma, Google Docs, and other collaborative tools
+function interpolateCursorPosition(lastKnown, velocity, elapsedMs) {
+    if (!lastKnown || !velocity) {
+        return lastKnown;
+    }
+
+    // Calculate predicted position based on velocity (dead reckoning)
+    // Position = LastKnown + Velocity * Time
+    const elapsedSeconds = elapsedMs / 1000;
+    const predictedX = lastKnown.x + (velocity.vx || 0) * elapsedSeconds;
+    const predictedY = lastKnown.y + (velocity.vy || 0) * elapsedSeconds;
+
+    // Apply damping to velocity (gradually slow down if no new updates)
+    // This prevents cursors from flying off screen if user stops moving
+    const dampingFactor = Math.max(0, 1 - (elapsedMs / 2000)); // Full stop after 2 seconds
+    const dampedVx = (velocity.vx || 0) * dampingFactor;
+    const dampedVy = (velocity.vy || 0) * dampingFactor;
+
+    return {
+        x: predictedX,
+        y: predictedY,
+        vx: dampedVx,
+        vy: dampedVy,
+        interpolated: true // Flag to indicate this is interpolated, not actual position
+    };
+}
+
+// Linear interpolation between two points (for rendering smooth paths)
+function lerp(start, end, t) {
+    // t should be between 0 and 1
+    return start + (end - start) * t;
+}
+
+// Smooth interpolation with easing (ease-out for natural deceleration)
+function smoothInterpolate(start, end, t) {
+    // Ease-out cubic: t * (2 - t)
+    const easedT = t * (2 - t);
+    return lerp(start, end, easedT);
+}
+
+// Get user info from auth store
+function getUserInfo() {
+    if (typeof Alpine === 'undefined') return null;
+
+    const authStore = Alpine.store('auth');
+    if (!authStore || !authStore.user) return null;
+
+    return {
+        id: authStore.user.$id,
+        name: authStore.user.name || authStore.user.email || 'Anonymous',
+        email: authStore.user.email || null,
+        color: getUserColor(authStore.user.$id)
+    };
+}
+
+// Get Appwrite services
+async function getAppwriteServices() {
+    return await window.ManifestDataAppwrite._getAppwriteDataServices();
+}
+
+// Read CSS variable value (returns number in specified unit, or fallback)
+function getCSSVariableValue(variableName, unit = 'ms', fallback = 0) {
+    if (typeof document === 'undefined') return fallback;
+
+    const value = getComputedStyle(document.documentElement)
+        .getPropertyValue(variableName)
+        .trim();
+
+    if (!value) return fallback;
+
+    // Remove unit and parse as number
+    const numValue = parseFloat(value);
+    if (isNaN(numValue)) return fallback;
+
+    // Convert to milliseconds if needed (for px values, return as-is)
+    if (unit === 'ms' && value.endsWith('px')) {
+        // For pixel values, return as-is (they're already in pixels)
+        return numValue;
+    } else if (unit === 'ms' && value.endsWith('ms')) {
+        return numValue;
+    } else if (unit === 'px' && value.endsWith('px')) {
+        return numValue;
+    }
+
+    return numValue;
+}
+
+// Get presence configuration from manifest
+async function getPresenceConfig() {
+    try {
+        const manifest = await window.ManifestDataConfig?.ensureManifest?.();
+        return manifest?.data?.presence || {};
+    } catch (error) {
+        console.warn('[Manifest Presence] Failed to load manifest config:', error);
+        return {};
+    }
+}
+
+
+/* Manifest Data Sources - Presence Element Utilities */
+
+// Generate a unique ID for an element if it doesn't have one
+function getElementId(element, containerElement) {
+    if (!element) return null;
+    if (element.id) return element.id;
+    if (element.dataset && element.dataset.presenceId) return element.dataset.presenceId;
+    // Generate a stable ID based on element's position in DOM
+    const path = [];
+    let current = element;
+    while (current && current !== containerElement && current !== document.body) {
+        const parent = current.parentElement;
+        if (parent) {
+            const index = Array.from(parent.children).indexOf(current);
+            path.unshift(`${current.tagName.toLowerCase()}:${index}`);
+        }
+        current = parent;
+    }
+    return path.join('>') || null;
+}
+
+// Helper function to find element by ID (supports id, data-presence-id, and DOM path)
+function findElementById(elementId, containerElement) {
+    if (!elementId) return null;
+    // Try by ID first
+    let targetElement = document.getElementById(elementId);
+    if (targetElement && containerElement.contains(targetElement)) return targetElement;
+    // Try by data-presence-id
+    targetElement = document.querySelector(`[data-presence-id="${elementId}"]`);
+    if (targetElement && containerElement.contains(targetElement)) return targetElement;
+    // Try to find by DOM path (generated by getElementId)
+    // IMPORTANT: getElementId counts ALL children, not filtered by tagName
+    if (elementId.includes('>')) {
+        const pathParts = elementId.split('>');
+        let current = containerElement;
+        for (const part of pathParts) {
+            if (!current) break;
+            const [tagName, indexStr] = part.split(':');
+            const index = parseInt(indexStr, 10);
+            if (isNaN(index)) break;
+            // Count ALL children (not filtered), matching getElementId behavior
+            const allChildren = Array.from(current.children);
+            if (index >= 0 && index < allChildren.length) {
+                const child = allChildren[index];
+                // Verify tagName matches (safety check)
+                if (child.tagName.toLowerCase() === tagName.toLowerCase()) {
+                    current = child;
+                } else {
+                    console.warn(`[Presence Debug] TagName mismatch at path step "${part}": expected ${tagName}, got ${child.tagName.toLowerCase()}`);
+                    current = null;
+                    break;
+                }
+            } else {
+                console.warn(`[Presence Debug] Index out of bounds at path step "${part}": index ${index}, children count ${allChildren.length}`);
+                current = null;
+                break;
+            }
+        }
+        if (current && containerElement.contains(current)) return current;
+    }
+    return null;
+}
+
+// Helper function to apply visual indicators for a user's presence state
+function applyVisualIndicators(userId, focus, selection, editing, userColor, containerElement) {
+    const color = userColor || getUserColor(userId);
+
+    // Apply focus indicator
+    if (focus && focus.elementId) {
+        console.log(`[Presence Debug] Finding focus element:`, {
+            elementId: focus.elementId,
+            focusObject: focus
+        });
+        const targetElement = findElementById(focus.elementId, containerElement);
+        console.log(`[Presence Debug] Focus element search result:`, {
+            elementId: focus.elementId,
+            found: !!targetElement,
+            element: targetElement,
+            elementTag: targetElement?.tagName,
+            elementIdAttr: targetElement?.id
+        });
+        if (targetElement) {
+            targetElement.classList.add('presence-focused');
+            targetElement.setAttribute('data-presence-focus-user', userId);
+            targetElement.setAttribute('data-presence-focus-color', color);
+            console.log(`[Presence Debug] Applied focus indicator to element:`, {
+                element: targetElement,
+                elementId: focus.elementId,
+                userId,
+                color
+            });
+        } else {
+            console.warn(`[Presence Debug] Could not find focus element with ID: ${focus.elementId}`);
+        }
+    } else {
+        console.log(`[Presence Debug] No focus to apply:`, {
+            hasFocus: !!focus,
+            hasElementId: focus?.elementId,
+            focus
+        });
+    }
+
+    // Apply selection indicator
+    if (selection && selection.elementId) {
+        const targetElement = findElementById(selection.elementId, containerElement);
+        console.log(`[Presence Debug] Finding selection element:`, {
+            elementId: selection.elementId,
+            found: !!targetElement,
+            element: targetElement
+        });
+        if (targetElement) {
+            const start = selection.start !== undefined ? selection.start : (selection.startOffset || 0);
+            const end = selection.end !== undefined ? selection.end : (selection.endOffset || start);
+            targetElement.setAttribute('data-presence-selection-user', userId);
+            targetElement.setAttribute('data-presence-selection-start', start.toString());
+            targetElement.setAttribute('data-presence-selection-end', end.toString());
+            targetElement.setAttribute('data-presence-selection-color', color);
+            // Trigger custom event for selection rendering
+            targetElement.dispatchEvent(new CustomEvent('presence:selection', {
+                detail: { userId, selection: { start, end }, color }
+            }));
+            console.log(`[Presence Debug] Applied selection indicator to element:`, targetElement);
+        } else {
+            console.warn(`[Presence Debug] Could not find selection element with ID: ${selection.elementId}`);
+        }
+    }
+
+    // Apply caret indicator
+    if (editing && editing.elementId && editing.caretPosition !== null && editing.caretPosition !== undefined) {
+        const targetElement = findElementById(editing.elementId, containerElement);
+        console.log(`[Presence Debug] Finding caret element:`, {
+            elementId: editing.elementId,
+            caretPosition: editing.caretPosition,
+            found: !!targetElement,
+            element: targetElement
+        });
+        if (targetElement) {
+            targetElement.setAttribute('data-presence-caret-user', userId);
+            targetElement.setAttribute('data-presence-caret-position', editing.caretPosition.toString());
+            targetElement.setAttribute('data-presence-caret-color', color);
+            // Trigger custom event for caret rendering
+            targetElement.dispatchEvent(new CustomEvent('presence:caret', {
+                detail: { userId, caretPosition: editing.caretPosition, color }
+            }));
+            console.log(`[Presence Debug] Applied caret indicator to element:`, targetElement);
+        } else {
+            console.warn(`[Presence Debug] Could not find caret element with ID: ${editing.elementId}`);
+        }
+    }
+}
+
+// Helper function to update element value (agnostic for input/textarea/contenteditable)
+function updateElementValue(targetElement, newValue, caretPosition) {
+    if (!targetElement) return false;
+
+    try {
+        // Check if element is editable
+        const isEditable = targetElement.tagName === 'INPUT' ||
+            targetElement.tagName === 'TEXTAREA' ||
+            targetElement.isContentEditable;
+
+        if (!isEditable) return false;
+
+        // Temporarily disable input event to prevent infinite loop
+        const wasDisabled = targetElement.hasAttribute('data-presence-syncing');
+        targetElement.setAttribute('data-presence-syncing', 'true');
+
+        // Update value based on element type
+        if (targetElement.tagName === 'INPUT' || targetElement.tagName === 'TEXTAREA') {
+            const currentValue = targetElement.value || '';
+            if (currentValue !== newValue) {
+                targetElement.value = newValue;
+                // Set caret position if provided
+                if (caretPosition !== null && caretPosition !== undefined &&
+                    targetElement.setSelectionRange) {
+                    try {
+                        targetElement.setSelectionRange(caretPosition, caretPosition);
+                    } catch (e) {
+                        // Some input types don't support setSelectionRange
+                    }
+                }
+                // Trigger input event for reactivity (but mark it as synced)
+                const inputEvent = new Event('input', { bubbles: true });
+                targetElement.dispatchEvent(inputEvent);
+            }
+        } else if (targetElement.isContentEditable) {
+            const currentValue = targetElement.textContent || '';
+            if (currentValue !== newValue) {
+                targetElement.textContent = newValue;
+                // Try to set caret position for contenteditable
+                if (caretPosition !== null && caretPosition !== undefined) {
+                    try {
+                        const range = document.createRange();
+                        const selection = window.getSelection();
+                        const textNode = targetElement.firstChild;
+                        if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+                            const pos = Math.min(caretPosition, textNode.textContent.length);
+                            range.setStart(textNode, pos);
+                            range.setEnd(textNode, pos);
+                            selection.removeAllRanges();
+                            selection.addRange(range);
+                        }
+                    } catch (e) {
+                        // Ignore caret positioning errors
+                    }
+                }
+            }
+        }
+
+        // Remove sync flag after a short delay
+        setTimeout(() => {
+            targetElement.removeAttribute('data-presence-syncing');
+        }, 50);
+
+        return true;
+    } catch (e) {
+        console.warn('[Manifest Presence] Failed to update element value:', e);
+        targetElement.removeAttribute('data-presence-syncing');
+        return false;
+    }
+}
+
+
+/* Manifest Data Sources - Presence Event Tracking */
+
+// Create event handlers for presence tracking
+function createPresenceEventHandlers(element, state, callbacks) {
+    const {
+        currentCursor,
+        currentFocus,
+        currentSelection,
+        currentEditing,
+        isLocalUserEditing,
+        lastPosition,
+        lastVelocity,
+        lastActivityTime
+    } = state;
+
+    const {
+        getElementId,
+        updateCursorPosition
+    } = callbacks;
+
+    // Throttle mousemove to prevent performance issues
+    let lastMouseMoveTime = 0;
+    const mouseMoveThrottle = 16; // ~60fps max
+
+    // Cursor position tracker with velocity calculation for smooth interpolation
+    const handleMouseMove = (e) => {
+        const now = Date.now();
+        // Throttle mousemove events to prevent forced reflows
+        if (now - lastMouseMoveTime < mouseMoveThrottle) {
+            return;
+        }
+        lastMouseMoveTime = now;
+
+        // Use requestAnimationFrame to batch DOM reads
+        requestAnimationFrame(() => {
+            const rect = element.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            const now = Date.now();
+
+            // Calculate velocity for smooth interpolation (pixels per second)
+            const dt = (now - lastPosition.time) / 1000; // Convert to seconds
+            if (dt > 0 && dt < 1) { // Only calculate if reasonable time difference
+                lastVelocity.vx = (x - lastPosition.x) / dt;
+                lastVelocity.vy = (y - lastPosition.y) / dt;
+            }
+
+            currentCursor.x = x;
+            currentCursor.y = y;
+            lastPosition.x = x;
+            lastPosition.y = y;
+            lastPosition.time = now;
+            lastActivityTime.value = now; // Update activity timestamp
+        });
+    };
+
+    const handleTouchMove = (e) => {
+        if (e.touches.length > 0) {
+            const rect = element.getBoundingClientRect();
+            const x = e.touches[0].clientX - rect.left;
+            const y = e.touches[0].clientY - rect.top;
+            const now = Date.now();
+
+            // Calculate velocity
+            const dt = (now - lastPosition.time) / 1000;
+            if (dt > 0 && dt < 1) {
+                lastVelocity.vx = (x - lastPosition.x) / dt;
+                lastVelocity.vy = (y - lastPosition.y) / dt;
+            }
+
+            currentCursor.x = x;
+            currentCursor.y = y;
+            lastPosition.x = x;
+            lastPosition.y = y;
+            lastPosition.time = now;
+            lastActivityTime.value = now;
+        }
+    };
+
+    // Focus tracking
+    const handleFocus = (e) => {
+        const target = e.target;
+        if (target && element.contains(target)) {
+            const elementId = getElementId(target, element);
+            currentFocus.value = {
+                elementId: elementId,
+                elementType: target.type || target.tagName.toLowerCase(),
+                tagName: target.tagName.toLowerCase(),
+                placeholder: target.placeholder || null,
+                name: target.name || null
+            };
+            lastActivityTime.value = Date.now(); // Update activity on focus
+            // Trigger immediate update for focus changes (important for UX)
+            updateCursorPosition(true); // Force immediate update
+        }
+    };
+
+    const handleBlur = (e) => {
+        currentFocus.value = null;
+        currentEditing.value = null;
+        currentSelection.value = null;
+        isLocalUserEditing.value = false;
+        // Trigger immediate update when focus is lost
+        updateCursorPosition(true); // Force immediate update
+    };
+
+    // Text selection tracking
+    const handleSelectionChange = () => {
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0 && !selection.isCollapsed) {
+            const range = selection.getRangeAt(0);
+            const target = range.commonAncestorContainer;
+            const targetElement = target.nodeType === Node.TEXT_NODE ? target.parentElement : target;
+
+            // Check if the selection is within our tracked element
+            if (targetElement && element.contains && element.contains(targetElement)) {
+                const elementId = getElementId(targetElement, element);
+                if (elementId) {
+                    const selectedText = selection.toString();
+                    if (selectedText && selectedText.trim().length > 0) {
+                        currentSelection.value = {
+                            elementId: elementId,
+                            start: range.startOffset,
+                            end: range.endOffset,
+                            text: selectedText.substring(0, 100) // Limit text length
+                        };
+                        lastActivityTime.value = Date.now(); // Update activity on selection
+                    } else {
+                        currentSelection.value = null;
+                    }
+                } else {
+                    currentSelection.value = null;
+                }
+            } else {
+                currentSelection.value = null;
+            }
+        } else {
+            currentSelection.value = null;
+        }
+    };
+
+    // Text editing tracking (for input/textarea/contenteditable)
+    const handleInput = (e) => {
+        const target = e.target;
+        // Skip if this is a sync event (to prevent infinite loops)
+        if (target && target.hasAttribute('data-presence-syncing')) {
+            return;
+        }
+
+        if (target && element.contains(target)) {
+            const elementId = getElementId(target, element);
+            if (elementId && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
+                const selection = window.getSelection();
+                let caretPosition = null;
+
+                if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                    caretPosition = target.selectionStart || 0;
+                } else if (selection && selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    caretPosition = range.startOffset;
+                }
+
+                currentEditing.value = {
+                    elementId: elementId,
+                    value: target.value || target.textContent || '',
+                    caretPosition: caretPosition,
+                    length: (target.value || target.textContent || '').length
+                };
+                isLocalUserEditing.value = true;
+                lastActivityTime.value = Date.now(); // Update activity on input
+            }
+        }
+    };
+
+    // Set up event listeners
+    element.addEventListener('mousemove', handleMouseMove);
+    element.addEventListener('touchmove', handleTouchMove, { passive: true });
+    element.addEventListener('focusin', handleFocus, true); // Use capture to catch all focus events
+    element.addEventListener('focusout', handleBlur, true);
+    element.addEventListener('selectionchange', handleSelectionChange);
+    element.addEventListener('input', handleInput, true);
+    element.addEventListener('keyup', handleInput, true); // Also track on keyup for caret position
+
+    // Return cleanup function
+    return () => {
+        element.removeEventListener('mousemove', handleMouseMove);
+        element.removeEventListener('touchmove', handleTouchMove);
+        element.removeEventListener('focusin', handleFocus, true);
+        element.removeEventListener('focusout', handleBlur, true);
+        element.removeEventListener('selectionchange', handleSelectionChange);
+        element.removeEventListener('input', handleInput, true);
+        element.removeEventListener('keyup', handleInput, true);
+    };
+}
+
+
+/* Manifest Data Sources - Presence Database Operations */
+
+// Helper function to check if data has changed significantly
+function hasSignificantChange(currentCursor, lastSentCursor, currentFocus, lastSentFocus, currentSelection, lastSentSelection, currentEditing, lastSentEditing, minChangeThreshold) {
+    // Check cursor position change (minimum threshold)
+    const cursorDeltaX = Math.abs(currentCursor.x - (lastSentCursor.x || 0));
+    const cursorDeltaY = Math.abs(currentCursor.y - (lastSentCursor.y || 0));
+    const cursorMoved = cursorDeltaX >= minChangeThreshold || cursorDeltaY >= minChangeThreshold;
+
+    // Check if focus changed
+    const focusChanged = JSON.stringify(currentFocus) !== JSON.stringify(lastSentFocus);
+
+    // Check if selection changed
+    const selectionChanged = JSON.stringify(currentSelection) !== JSON.stringify(lastSentSelection);
+
+    // Check if editing changed (always send editing updates - they're important)
+    const editingChanged = JSON.stringify(currentEditing) !== JSON.stringify(lastSentEditing);
+
+    // Update if cursor moved significantly OR any state changed
+    return cursorMoved || focusChanged || selectionChanged || editingChanged;
+}
+
+// Broadcast cursor position to database table
+async function updateCursorPosition(
+    services,
+    databaseId,
+    tableId,
+    channelId,
+    userInfo,
+    currentCursor,
+    currentFocus,
+    currentSelection,
+    currentEditing,
+    lastVelocity,
+    includeVelocity,
+    lastBroadcastTime,
+    lastActivityTime,
+    throttle,
+    idleThreshold,
+    minChangeThreshold,
+    lastSentCursor,
+    lastSentFocus,
+    lastSentSelection,
+    lastSentEditing,
+    forceImmediate = false
+) {
+    const now = Date.now();
+
+    // Throttle broadcasts (unless forced)
+    if (!forceImmediate && now - lastBroadcastTime.value < throttle) {
+        return;
+    }
+
+    // Idle detection: Skip updates if user has been inactive
+    const timeSinceActivity = now - lastActivityTime.value;
+    if (timeSinceActivity > idleThreshold) {
+        // User is idle - don't send updates (saves writes)
+        return;
+    }
+
+    // Change detection: Only update if something actually changed
+    if (!forceImmediate && !hasSignificantChange(
+        currentCursor,
+        lastSentCursor.value,
+        currentFocus.value,
+        lastSentFocus.value,
+        currentSelection.value,
+        lastSentSelection.value,
+        currentEditing.value,
+        lastSentEditing.value,
+        minChangeThreshold
+    ) && lastSentCursor.value.x !== null) {
+        // Nothing significant changed - skip this update (saves writes)
+        return;
+    }
+
+    lastBroadcastTime.value = now;
+
+    try {
+        // Create or update cursor position in database
+        // Use userId as the unique identifier (upsert pattern)
+        // Store focus/selection/editing as JSON strings (Appwrite doesn't have native JSON type)
+        // Include velocity for client-side interpolation (optional, requires table schema)
+        const presenceData = {
+            userId: userInfo.id,
+            channelId: channelId,
+            x: currentCursor.x,
+            y: currentCursor.y,
+            name: userInfo.name,
+            color: userInfo.color,
+            lastSeen: now,
+            focus: currentFocus.value ? JSON.stringify(currentFocus.value) : null,
+            selection: currentSelection.value ? JSON.stringify(currentSelection.value) : null,
+            editing: currentEditing.value ? JSON.stringify(currentEditing.value) : null
+        };
+
+        console.log(`[Presence Debug] Broadcasting presence update:`, {
+            userId: userInfo.id,
+            channelId,
+            hasFocus: !!currentFocus.value,
+            hasSelection: !!currentSelection.value,
+            hasEditing: !!currentEditing.value,
+            focus: currentFocus.value,
+            selection: currentSelection.value,
+            editing: currentEditing.value,
+            presenceData
+        });
+
+        // Only include velocity if enabled and table schema supports it
+        if (includeVelocity) {
+            presenceData.vx = lastVelocity.vx; // Velocity X (pixels per second) for interpolation
+            presenceData.vy = lastVelocity.vy; // Velocity Y (pixels per second) for interpolation
+        }
+
+        // Update last sent values for change detection
+        lastSentCursor.value = { x: currentCursor.x, y: currentCursor.y };
+        lastSentFocus.value = currentFocus.value ? JSON.parse(JSON.stringify(currentFocus.value)) : null;
+        lastSentSelection.value = currentSelection.value ? JSON.parse(JSON.stringify(currentSelection.value)) : null;
+        lastSentEditing.value = currentEditing.value ? JSON.parse(JSON.stringify(currentEditing.value)) : null;
+
+        // Upsert logic: try update first, then create if not found
+        try {
+            // Try to update existing row first
+            await services.tablesDB.updateRow({
+                databaseId,
+                tableId,
+                rowId: userInfo.id,
+                data: presenceData
+            });
+        } catch (updateError) {
+            // If 404, row doesn't exist yet - create it
+            // Check multiple error properties (Appwrite SDK may structure errors differently)
+            const isNotFound = updateError?.code === 404 ||
+                updateError?.response?.code === 404 ||
+                updateError?.statusCode === 404 ||
+                updateError?.message?.includes('404') ||
+                updateError?.message?.includes('not found');
+
+            if (isNotFound) {
+                try {
+                    await services.tablesDB.createRow({
+                        databaseId,
+                        tableId,
+                        rowId: userInfo.id, // Use userId as row ID
+                        data: presenceData
+                    });
+                } catch (createError) {
+                    // If 409 (conflict), row was created between update and create - try update again
+                    if (createError?.code === 409) {
+                        try {
+                            await services.tablesDB.updateRow({
+                                databaseId,
+                                tableId,
+                                rowId: userInfo.id,
+                                data: presenceData
+                            });
+                        } catch (retryError) {
+                            // Suppress 401 errors (permission issues)
+                            if (retryError?.code !== 401) {
+                                console.error('[Manifest Presence] Failed to update cursor position after conflict:', retryError);
+                            }
+                            throw retryError;
+                        }
+                    } else if (createError?.code !== 401) {
+                        // Suppress 401 errors (permission issues) - user needs to set table permissions
+                        console.error('[Manifest Presence] Failed to create cursor position:', createError);
+                        throw createError;
+                    } else {
+                        throw createError;
+                    }
+                }
+            } else if (updateError?.code === 401) {
+                // Permission issue - suppress repeated logs
+                throw updateError;
+            } else {
+                // Other error - suppress 404 errors (they're handled by creating the row)
+                const isNotFoundError = updateError?.code === 404 ||
+                    updateError?.response?.code === 404 ||
+                    updateError?.statusCode === 404 ||
+                    updateError?.message?.includes('404') ||
+                    updateError?.message?.includes('not found');
+                if (!isNotFoundError && updateError?.code !== 401) {
+                    console.error('[Manifest Presence] Failed to update cursor position:', updateError);
+                }
+                // Don't rethrow 404 errors - they're expected and handled
+                if (!isNotFoundError) {
+                    throw updateError;
+                }
+            }
+        }
+    } catch (error) {
+        // Suppress 401 and 404 errors (permission issues and expected not-found during initial creation)
+        const isNotFoundError = error?.code === 404 ||
+            error?.response?.code === 404 ||
+            error?.statusCode === 404 ||
+            error?.message?.includes('404') ||
+            error?.message?.includes('not found');
+        if (error?.code !== 401 && !isNotFoundError) {
+            console.error('[Manifest Presence] Failed to update cursor position:', error);
+        }
+    }
+}
+
+// Load initial cursor positions from database
+async function loadInitialCursors(services, databaseId, tableId, channelId, userInfo, cursors, includeVelocity, applyVisualIndicators, containerElement, onCursorUpdate) {
+    try {
+        const allCursors = await services.tablesDB.listRows({
+            databaseId,
+            tableId,
+            queries: [
+                window.Appwrite.Query.equal('channelId', channelId)
+            ]
+        });
+
+        if (allCursors && allCursors.rows) {
+            allCursors.rows.forEach(row => {
+                if (row.userId && row.userId !== userInfo.id) {
+                    // Parse JSON strings for focus/selection/editing
+                    let focus = null, selection = null, editing = null;
+                    try {
+                        focus = row.focus ? (typeof row.focus === 'string' ? JSON.parse(row.focus) : row.focus) : null;
+                        selection = row.selection ? (typeof row.selection === 'string' ? JSON.parse(row.selection) : row.selection) : null;
+                        editing = row.editing ? (typeof row.editing === 'string' ? JSON.parse(row.editing) : row.editing) : null;
+                    } catch (e) {
+                        console.warn('[Manifest Presence] Failed to parse presence data from row:', e);
+                    }
+
+                    const userColor = row.color || getUserColor(row.userId);
+                    cursors.set(row.userId, {
+                        x: row.x || 0,
+                        y: row.y || 0,
+                        vx: (includeVelocity && row.vx !== undefined) ? row.vx : 0, // Velocity X for interpolation (optional)
+                        vy: (includeVelocity && row.vy !== undefined) ? row.vy : 0, // Velocity Y for interpolation (optional)
+                        name: row.name || 'Anonymous',
+                        color: userColor,
+                        lastSeen: row.lastSeen || Date.now(),
+                        lastUpdateTime: Date.now(), // Track when we loaded this for interpolation
+                        focus: focus,
+                        selection: selection,
+                        editing: editing
+                    });
+
+                    // Apply visual indicators for initial load
+                    console.log(`[Presence Debug] Applying visual indicators for initial load:`, {
+                        userId: row.userId,
+                        focus,
+                        selection,
+                        editing
+                    });
+                    applyVisualIndicators(row.userId, focus, selection, editing, userColor, containerElement);
+                }
+            });
+
+            console.log(`[Presence Debug] Initial cursors processed, total cursors: ${cursors.size}`);
+
+            // Trigger callback after loading initial cursors
+            if (onCursorUpdate) {
+                const cursorArray = Array.from(cursors.values());
+                console.log(`[Presence Debug] Triggering onCursorUpdate with ${cursorArray.length} cursors`);
+                onCursorUpdate(cursorArray);
+            }
+        }
+    } catch (error) {
+        // Suppress 401 errors (permission issues) - user needs to set table permissions
+        if (error?.code !== 401) {
+            console.warn('[Manifest Presence] Failed to load initial cursors:', error);
+        }
+    }
+}
+
+
+/* Manifest Data Sources - Presence Realtime Subscription */
+
+// Create realtime subscription callback
+function createPresenceRealtimeCallback(
+    channelId,
+    userInfo,
+    cursors,
+    containerElement,
+    isLocalUserEditing,
+    currentEditing,
+    onUserJoin,
+    onUserLeave,
+    onCursorUpdate
+) {
+    return (response) => {
+        // Log immediately to verify callback is being called
+        console.log(`[Presence Debug] ===== CALLBACK INVOKED =====`, {
+            timestamp: new Date().toISOString(),
+            hasResponse: !!response,
+            responseType: typeof response
+        });
+        console.log(`[Presence Debug] ===== PRESENCE EVENT RECEIVED =====`);
+        console.log(`[Presence Debug] Callback executed! This means realtime is working.`);
+        console.log(`[Presence Debug] Presence event received:`, {
+            hasResponse: !!response,
+            responseType: typeof response,
+            responseKeys: response ? Object.keys(response) : [],
+            hasEvents: !!response?.events,
+            events: response?.events,
+            eventsType: typeof response?.events,
+            eventsIsArray: Array.isArray(response?.events),
+            payload: response?.payload,
+            payloadKeys: response?.payload ? Object.keys(response?.payload) : [],
+            channelId,
+            fullResponse: response
+        });
+
+        // Handle both array and single event formats (like in manifest.data.realtime.js)
+        if (!response) {
+            console.warn(`[Presence Debug] No response received`);
+            return;
+        }
+
+        // Check if events exist, handle both array and single event
+        const events = response.events ?
+            (Array.isArray(response.events) ? response.events : [response.events]) :
+            [];
+
+        if (events.length === 0) {
+            console.warn(`[Presence Debug] No events in response:`, response);
+            return;
+        }
+
+        events.forEach(event => {
+            if (typeof event !== 'string') {
+                console.warn(`[Presence Debug] Non-string event:`, event);
+                return;
+            }
+
+            const payload = response.payload || response;
+            const userId = payload.userId || payload.$id;
+
+            console.log(`[Presence Debug] Processing presence event:`, {
+                event,
+                userId,
+                localUserId: userInfo.id,
+                payloadKeys: Object.keys(payload || {})
+            });
+
+            // Ignore our own updates
+            if (!userId || userId === userInfo.id) {
+                console.log(`[Presence Debug] Ignoring own update (userId: ${userId})`);
+                return;
+            }
+
+            if (event.includes('create') || event.includes('rows.create')) {
+                handleUserJoin(event, payload, channelId, userId, cursors, containerElement, onUserJoin, onCursorUpdate);
+            } else if (event.includes('update') || event.includes('rows.update')) {
+                handleUserUpdate(event, payload, channelId, userId, cursors, containerElement, isLocalUserEditing, currentEditing, onCursorUpdate);
+            } else if (event.includes('delete') || event.includes('rows.delete')) {
+                handleUserLeave(event, userId, onUserLeave, onCursorUpdate, cursors);
+            }
+        });
+    };
+}
+
+// Handle user join event
+function handleUserJoin(event, payload, channelId, userId, cursors, containerElement, onUserJoin, onCursorUpdate) {
+    console.log(`[Presence Debug] User joined:`, { userId, name: payload.name, channelId: payload.channelId });
+    // User joined
+    if (payload.channelId === channelId) {
+        // Parse JSON strings for focus/selection/editing
+        let focus = null, selection = null, editing = null;
+        try {
+            focus = payload.focus ? (typeof payload.focus === 'string' ? JSON.parse(payload.focus) : payload.focus) : null;
+            selection = payload.selection ? (typeof payload.selection === 'string' ? JSON.parse(payload.selection) : payload.selection) : null;
+            editing = payload.editing ? (typeof payload.editing === 'string' ? JSON.parse(payload.editing) : payload.editing) : null;
+        } catch (e) {
+            console.warn('[Manifest Presence] Failed to parse presence data:', e);
+        }
+
+        const userColor = payload.color || getUserColor(userId);
+        cursors.set(userId, {
+            x: payload.x || 0,
+            y: payload.y || 0,
+            vx: payload.vx || 0, // Velocity X for interpolation
+            vy: payload.vy || 0, // Velocity Y for interpolation
+            name: payload.name || 'Anonymous',
+            color: userColor,
+            lastSeen: payload.lastSeen || Date.now(),
+            lastUpdateTime: Date.now(), // Track when we received this update for interpolation
+            focus: focus,
+            selection: selection,
+            editing: editing
+        });
+
+        // Apply visual indicators when user joins
+        console.log(`[Presence Debug] User joined, applying visual indicators:`, {
+            userId,
+            focus,
+            selection,
+            editing,
+            userColor
+        });
+        applyVisualIndicators(userId, focus, selection, editing, userColor, containerElement);
+
+        if (onUserJoin) {
+            onUserJoin({ userId, name: payload.name, color: userColor });
+        }
+
+        if (onCursorUpdate) {
+            onCursorUpdate(Array.from(cursors.values()));
+        }
+    } else {
+        console.log(`[Presence Debug] User joined but channelId mismatch:`, {
+            payloadChannelId: payload.channelId,
+            expectedChannelId: channelId
+        });
+    }
+}
+
+// Handle user update event
+function handleUserUpdate(event, payload, channelId, userId, cursors, containerElement, isLocalUserEditing, currentEditing, onCursorUpdate) {
+    // Presence updated (cursor, focus, selection, editing)
+    console.log(`[Presence Debug] Presence update event:`, {
+        userId,
+        payloadChannelId: payload.channelId,
+        expectedChannelId: channelId,
+        matches: payload.channelId === channelId
+    });
+
+    if (payload.channelId === channelId) {
+        const existing = cursors.get(userId) || {};
+
+        // Parse JSON strings for focus/selection/editing
+        let focus = existing.focus, selection = existing.selection, editing = existing.editing;
+        if (payload.focus !== undefined) {
+            console.log(`[Presence Debug] Processing focus update for ${userId}:`, {
+                focusPayload: payload.focus,
+                existingFocus: existing.focus
+            });
+            try {
+                focus = payload.focus ? (typeof payload.focus === 'string' ? JSON.parse(payload.focus) : payload.focus) : null;
+
+                // Add CSS class to element for customizable styling
+                if (focus && focus.elementId) {
+                    const targetElement = findElementById(focus.elementId, containerElement);
+                    if (targetElement) {
+                        targetElement.classList.add('presence-focused');
+                        targetElement.setAttribute('data-presence-focus-user', userId);
+                        targetElement.setAttribute('data-presence-focus-color', existing.color || getUserColor(userId));
+                    }
+                }
+                // Remove focus class from elements that are no longer focused by this user
+                if (!focus || !focus.elementId) {
+                    document.querySelectorAll(`[data-presence-focus-user="${userId}"]`).forEach(el => {
+                        el.classList.remove('presence-focused');
+                        el.removeAttribute('data-presence-focus-user');
+                        el.removeAttribute('data-presence-focus-color');
+                    });
+                }
+            } catch (e) {
+                console.warn('[Manifest Presence] Failed to parse focus:', e);
+            }
+        }
+        if (payload.selection !== undefined) {
+            try {
+                selection = payload.selection ? (typeof payload.selection === 'string' ? JSON.parse(payload.selection) : payload.selection) : null;
+
+                // Update selection indicator
+                if (selection && selection.elementId) {
+                    const targetElement = findElementById(selection.elementId, containerElement);
+                    if (targetElement) {
+                        // Store selection data for rendering
+                        const start = selection.start !== undefined ? selection.start : (selection.startOffset || 0);
+                        const end = selection.end !== undefined ? selection.end : (selection.endOffset || start);
+                        targetElement.setAttribute('data-presence-selection-user', userId);
+                        targetElement.setAttribute('data-presence-selection-start', start.toString());
+                        targetElement.setAttribute('data-presence-selection-end', end.toString());
+                        targetElement.setAttribute('data-presence-selection-color', existing.color || getUserColor(userId));
+                        // Trigger custom event for selection rendering
+                        targetElement.dispatchEvent(new CustomEvent('presence:selection', {
+                            detail: { userId, selection: { start, end }, color: existing.color || getUserColor(userId) }
+                        }));
+                    }
+                } else {
+                    // Remove selection indicators
+                    document.querySelectorAll(`[data-presence-selection-user="${userId}"]`).forEach(el => {
+                        el.removeAttribute('data-presence-selection-user');
+                        el.removeAttribute('data-presence-selection-start');
+                        el.removeAttribute('data-presence-selection-end');
+                        el.removeAttribute('data-presence-selection-color');
+                        // Remove visual indicator
+                        const indicator = el.querySelector('.presence-selection');
+                        if (indicator) indicator.remove();
+                    });
+                }
+            } catch (e) {
+                console.warn('[Manifest Presence] Failed to parse selection:', e);
+            }
+        }
+        if (payload.editing !== undefined) {
+            try {
+                editing = payload.editing ? (typeof payload.editing === 'string' ? JSON.parse(payload.editing) : payload.editing) : null;
+
+                // Real-time text syncing: Update element if local user is not editing it
+                if (editing && editing.elementId && editing.value !== undefined) {
+                    // Check if local user is currently editing this element
+                    const isLocalEditingThis = isLocalUserEditing.value &&
+                        currentEditing.value &&
+                        currentEditing.value.elementId === editing.elementId;
+
+                    if (!isLocalEditingThis) {
+                        // Local user is not editing this element - safe to sync
+                        const targetElement = findElementById(editing.elementId, containerElement);
+                        if (targetElement) {
+                            // Check if element is currently being synced (to prevent conflicts)
+                            if (!targetElement.hasAttribute('data-presence-syncing')) {
+                                updateElementValue(targetElement, editing.value, editing.caretPosition);
+                            }
+
+                            // Add caret position indicator
+                            if (editing.caretPosition !== null && editing.caretPosition !== undefined) {
+                                targetElement.setAttribute('data-presence-caret-user', userId);
+                                targetElement.setAttribute('data-presence-caret-position', editing.caretPosition);
+                                targetElement.setAttribute('data-presence-caret-color', existing.color || getUserColor(userId));
+                                // Trigger custom event for caret rendering
+                                targetElement.dispatchEvent(new CustomEvent('presence:caret', {
+                                    detail: { userId, caretPosition: editing.caretPosition, color: existing.color || getUserColor(userId) }
+                                }));
+                            }
+                        } else {
+                            console.warn('[Manifest Presence] Element not found for syncing:', editing.elementId);
+                        }
+                    }
+                } else if (!editing || !editing.elementId) {
+                    // Remove caret indicators when editing stops
+                    document.querySelectorAll(`[data-presence-caret-user="${userId}"]`).forEach(el => {
+                        el.removeAttribute('data-presence-caret-user');
+                        el.removeAttribute('data-presence-caret-position');
+                        el.removeAttribute('data-presence-caret-color');
+                        // Remove visual indicator
+                        const indicator = el.querySelector('.presence-caret');
+                        if (indicator) indicator.remove();
+                    });
+                }
+            } catch (e) {
+                console.warn('[Manifest Presence] Failed to parse editing:', e);
+            }
+        }
+
+        cursors.set(userId, {
+            ...existing,
+            x: payload.x !== undefined ? payload.x : existing.x || 0,
+            y: payload.y !== undefined ? payload.y : existing.y || 0,
+            vx: payload.vx !== undefined ? payload.vx : (existing.vx || 0), // Velocity X
+            vy: payload.vy !== undefined ? payload.vy : (existing.vy || 0), // Velocity Y
+            name: payload.name || existing.name || 'Anonymous',
+            color: payload.color || existing.color || getUserColor(userId),
+            lastSeen: payload.lastSeen || Date.now(),
+            lastUpdateTime: Date.now(), // Track when we received this update for interpolation
+            focus: focus,
+            selection: selection,
+            editing: editing
+        });
+
+        console.log(`[Presence Debug] Updated cursor for ${userId} after update event:`, {
+            userId,
+            focus,
+            selection,
+            editing,
+            cursor: cursors.get(userId)
+        });
+
+        // Apply visual indicators for update events
+        applyVisualIndicators(userId, focus, selection, editing, existing.color || getUserColor(userId), containerElement);
+
+        if (onCursorUpdate) {
+            onCursorUpdate(Array.from(cursors.values()));
+        }
+    } else {
+        console.log(`[Presence Debug] Update event but channelId mismatch:`, {
+            payloadChannelId: payload.channelId,
+            expectedChannelId: channelId
+        });
+    }
+}
+
+// Handle user leave event
+function handleUserLeave(event, userId, onUserLeave, onCursorUpdate, cursors) {
+    // User left - clean up all indicators
+    document.querySelectorAll(`[data-presence-focus-user="${userId}"]`).forEach(el => {
+        el.classList.remove('presence-focused');
+        el.removeAttribute('data-presence-focus-user');
+        el.removeAttribute('data-presence-focus-color');
+    });
+    document.querySelectorAll(`[data-presence-caret-user="${userId}"]`).forEach(el => {
+        el.removeAttribute('data-presence-caret-user');
+        el.removeAttribute('data-presence-caret-position');
+        el.removeAttribute('data-presence-caret-color');
+    });
+    document.querySelectorAll(`[data-presence-selection-user="${userId}"]`).forEach(el => {
+        el.removeAttribute('data-presence-selection-user');
+        el.removeAttribute('data-presence-selection-start');
+        el.removeAttribute('data-presence-selection-end');
+        el.removeAttribute('data-presence-selection-color');
+    });
+
+    if (cursors.has(userId)) {
+        cursors.delete(userId);
+
+        if (onUserLeave) {
+            onUserLeave({ userId });
+        }
+
+        if (onCursorUpdate) {
+            onCursorUpdate(Array.from(cursors.values()));
+        }
+    }
+}
+
+// Setup realtime subscription
+async function setupPresenceRealtimeSubscription(
+    services,
+    presenceChannel,
+    channelId,
+    userInfo,
+    cursors,
+    containerElement,
+    isLocalUserEditing,
+    currentEditing,
+    onUserJoin,
+    onUserLeave,
+    onCursorUpdate
+) {
+    // Initialize unsubscribe as a no-op function in case subscription fails
+    let unsubscribe = () => {
+        console.warn('[Manifest Presence] Unsubscribe called but subscription was not successful');
+    };
+
+    console.log(`[Presence Debug] Subscribing to presence channel: ${presenceChannel} for channelId: ${channelId}`);
+
+    try {
+        console.log(`[Presence Debug] About to subscribe to realtime channel: ${presenceChannel}`);
+
+        // Verify we're using the same realtime service instance
+        console.log(`[Presence Debug] Realtime service:`, {
+            type: typeof services.realtime,
+            isRealtime: services.realtime instanceof window.Appwrite?.Realtime,
+            subscribeType: typeof services.realtime?.subscribe,
+            serviceObject: services.realtime
+        });
+
+        // Call subscribe with inline callback
+        // Note: subscribe() returns a Promise that resolves when subscription is active
+        console.log(`[Presence Debug] About to call services.realtime.subscribe with channel: ${presenceChannel}`);
+        const subscribeResult = services.realtime.subscribe(presenceChannel, (response) => {
+            // Log immediately to verify callback is being called
+            console.log(`[Presence Debug] ===== CALLBACK INVOKED =====`, {
+                timestamp: new Date().toISOString(),
+                hasResponse: !!response,
+                responseType: typeof response,
+                channel: presenceChannel
+            });
+            console.log(`[Presence Debug] ===== PRESENCE EVENT RECEIVED =====`);
+            console.log(`[Presence Debug] Callback executed! This means realtime is working.`);
+            console.log(`[Presence Debug] Presence event received:`, {
+                hasResponse: !!response,
+                responseType: typeof response,
+                responseKeys: response ? Object.keys(response) : [],
+                hasEvents: !!response?.events,
+                events: response?.events,
+                eventsType: typeof response?.events,
+                eventsIsArray: Array.isArray(response?.events),
+                payload: response?.payload,
+                payloadKeys: response?.payload ? Object.keys(response?.payload) : [],
+                channelId,
+                fullResponse: response
+            });
+
+            // Handle both array and single event formats (like in manifest.data.realtime.js)
+            if (!response) {
+                console.warn(`[Presence Debug] No response received`);
+                return;
+            }
+
+            // Check if events exist, handle both array and single event
+            const events = response.events ?
+                (Array.isArray(response.events) ? response.events : [response.events]) :
+                [];
+
+            if (events.length === 0) {
+                console.warn(`[Presence Debug] No events in response:`, response);
+                return;
+            }
+
+            events.forEach(event => {
+                if (typeof event !== 'string') {
+                    console.warn(`[Presence Debug] Non-string event:`, event);
+                    return;
+                }
+
+                const payload = response.payload || response;
+                const userId = payload.userId || payload.$id;
+
+                console.log(`[Presence Debug] Processing presence event:`, {
+                    event,
+                    userId,
+                    localUserId: userInfo.id,
+                    payloadKeys: Object.keys(payload || {})
+                });
+
+                // Ignore our own updates
+                if (!userId || userId === userInfo.id) {
+                    console.log(`[Presence Debug] Ignoring own update (userId: ${userId})`);
+                    return;
+                }
+
+                if (event.includes('create') || event.includes('rows.create')) {
+                    handleUserJoin(event, payload, channelId, userId, cursors, containerElement, onUserJoin, onCursorUpdate);
+                } else if (event.includes('update') || event.includes('rows.update')) {
+                    handleUserUpdate(event, payload, channelId, userId, cursors, containerElement, isLocalUserEditing, currentEditing, onCursorUpdate);
+                } else if (event.includes('delete') || event.includes('rows.delete')) {
+                    handleUserLeave(event, userId, onUserLeave, onCursorUpdate, cursors);
+                }
+            });
+        });
+
+        console.log(`[Presence Debug] Subscribe call completed, result type:`, typeof subscribeResult);
+        console.log(`[Presence Debug] Subscribe result:`, subscribeResult);
+
+        // Handle Promise resolution asynchronously (don't await - callback is already registered)
+        // Match the pattern from working subscribeToTable which doesn't await
+        if (subscribeResult && typeof subscribeResult.then === 'function') {
+            // Callback is already registered synchronously, Promise is just for unsubscribe function
+            subscribeResult.then((resolvedUnsubscribe) => {
+                console.log(`[Presence Debug] Subscription Promise resolved, unsubscribe type:`, typeof resolvedUnsubscribe);
+                console.log(`[Presence Debug] Resolved unsubscribe object:`, {
+                    type: typeof resolvedUnsubscribe,
+                    isFunction: typeof resolvedUnsubscribe === 'function',
+                    hasClose: resolvedUnsubscribe && typeof resolvedUnsubscribe.close === 'function',
+                    keys: resolvedUnsubscribe && typeof resolvedUnsubscribe === 'object' ? Object.keys(resolvedUnsubscribe) : [],
+                    fullObject: resolvedUnsubscribe
+                });
+                if (typeof resolvedUnsubscribe === 'function') {
+                    unsubscribe = resolvedUnsubscribe;
+                } else if (resolvedUnsubscribe && typeof resolvedUnsubscribe.close === 'function') {
+                    unsubscribe = () => resolvedUnsubscribe.close();
+                }
+            }).catch((error) => {
+                console.error(`[Presence Debug] Subscription Promise rejected:`, error);
+            });
+            // Set temporary unsubscribe that will be replaced when Promise resolves
+            unsubscribe = () => {
+                if (subscribeResult && typeof subscribeResult.then === 'function') {
+                    subscribeResult.then((resolved) => {
+                        if (resolved && typeof resolved.close === 'function') {
+                            resolved.close();
+                        } else if (typeof resolved === 'function') {
+                            resolved();
+                        }
+                    });
+                }
+            };
+        } else if (typeof subscribeResult === 'function') {
+            unsubscribe = subscribeResult;
+        } else if (subscribeResult && typeof subscribeResult.close === 'function') {
+            unsubscribe = () => subscribeResult.close();
+        }
+
+        console.log(`[Presence Debug] Successfully subscribed to presence channel: ${presenceChannel}`);
+        console.log(`[Presence Debug] Callback function registered. If events are not received, check:`);
+        console.log(`[Presence Debug] 1. Appwrite table permissions (read permission required for realtime)`);
+        console.log(`[Presence Debug] 2. Channel format: ${presenceChannel}`);
+        console.log(`[Presence Debug] 3. Whether other users are actually updating presence data`);
+        console.log(`[Presence Debug] 4. Network tab → WS filter → look for WebSocket frames with presence channel`);
+        console.log(`[Presence Debug] 5. Appwrite Console → Database → presence table → ensure realtime is enabled`);
+
+        // Test: Log a message after a delay to verify subscription is still active
+        setTimeout(() => {
+            console.log(`[Presence Debug] Subscription test: 5 seconds have passed. If you see "===== PRESENCE EVENT RECEIVED =====" above, realtime is working.`);
+        }, 5000);
+
+        return unsubscribe;
+    } catch (error) {
+        console.error('[Manifest Presence] Failed to subscribe to presence:', error);
+        return unsubscribe; // Return no-op function
+    }
+}
+
+
+/* Manifest Data Sources - Presence Visual Rendering */
+
+// Render caret position indicator (optional visual rendering)
+function renderCaret(element, caretPosition, color) {
+    if (!element) return;
+
+    // Remove existing caret for this element
+    const existing = element.querySelector('.presence-caret');
+    if (existing) existing.remove();
+
+    if (caretPosition === null || caretPosition === undefined) return;
+
+    // Create caret indicator
+    const caret = document.createElement('div');
+    caret.className = 'presence-caret';
+    if (color) {
+        caret.style.setProperty('--presence-caret-color', color);
+    }
+
+    // Calculate caret position
+    if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+        // For input/textarea, measure text width
+        const text = element.value.substring(0, caretPosition);
+        const measure = document.createElement('span');
+        measure.style.position = 'absolute';
+        measure.style.visibility = 'hidden';
+        measure.style.whiteSpace = 'pre';
+        measure.style.font = window.getComputedStyle(element).font;
+        measure.textContent = text;
+        document.body.appendChild(measure);
+
+        const textWidth = measure.offsetWidth;
+        document.body.removeChild(measure);
+
+        const rect = element.getBoundingClientRect();
+        const paddingLeft = parseInt(window.getComputedStyle(element).paddingLeft) || 0;
+        const borderLeft = parseInt(window.getComputedStyle(element).borderLeftWidth) || 0;
+
+        caret.style.left = (textWidth + paddingLeft + borderLeft) + 'px';
+        caret.style.top = (paddingLeft || 2) + 'px';
+    } else if (element.isContentEditable) {
+        // For contenteditable, use Range API
+        try {
+            const range = document.createRange();
+            const textNode = element.firstChild;
+            if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+                const pos = Math.min(caretPosition, textNode.textContent.length);
+                range.setStart(textNode, pos);
+                range.setEnd(textNode, pos);
+                const rect = range.getBoundingClientRect();
+                const parentRect = element.getBoundingClientRect();
+                caret.style.left = (rect.left - parentRect.left) + 'px';
+                caret.style.top = (rect.top - parentRect.top) + 'px';
+            }
+        } catch (e) {
+            console.warn('[Manifest Presence] Failed to position caret:', e);
+            return;
+        }
+    }
+
+    element.style.position = 'relative';
+    element.appendChild(caret);
+}
+
+// Render text selection highlight (optional visual rendering)
+function renderSelection(element, start, end, color) {
+    if (!element) return;
+
+    // Remove existing selection for this element
+    const existing = element.querySelector('.presence-selection');
+    if (existing) existing.remove();
+
+    if (start === null || end === null || start === end) return;
+
+    const selection = document.createElement('div');
+    selection.className = 'presence-selection';
+    if (color) {
+        selection.style.setProperty('--presence-selection-color', color);
+    }
+
+    // Calculate selection bounds
+    if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+        const text = element.value;
+        const startText = text.substring(0, start);
+        const selectedText = text.substring(start, end);
+
+        // Measure start position
+        const measureStart = document.createElement('span');
+        measureStart.style.position = 'absolute';
+        measureStart.style.visibility = 'hidden';
+        measureStart.style.whiteSpace = 'pre';
+        measureStart.style.font = window.getComputedStyle(element).font;
+        measureStart.textContent = startText;
+        document.body.appendChild(measureStart);
+
+        // Measure selection width
+        const measureSelected = document.createElement('span');
+        measureSelected.style.position = 'absolute';
+        measureSelected.style.visibility = 'hidden';
+        measureSelected.style.whiteSpace = 'pre';
+        measureSelected.style.font = window.getComputedStyle(element).font;
+        measureSelected.textContent = selectedText;
+        document.body.appendChild(measureSelected);
+
+        const startWidth = measureStart.offsetWidth;
+        const selectedWidth = measureSelected.offsetWidth;
+        document.body.removeChild(measureStart);
+        document.body.removeChild(measureSelected);
+
+        const rect = element.getBoundingClientRect();
+        const paddingLeft = parseInt(window.getComputedStyle(element).paddingLeft) || 0;
+        const borderLeft = parseInt(window.getComputedStyle(element).borderLeftWidth) || 0;
+        const lineHeight = parseInt(window.getComputedStyle(element).lineHeight) || 20;
+
+        selection.style.left = (startWidth + paddingLeft + borderLeft) + 'px';
+        selection.style.top = (paddingLeft || 2) + 'px';
+        selection.style.width = selectedWidth + 'px';
+        selection.style.height = lineHeight + 'px';
+    } else if (element.isContentEditable) {
+        // For contenteditable, use Range API
+        try {
+            const textNode = element.firstChild;
+            if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+                const range = document.createRange();
+                const textLength = textNode.textContent.length;
+                const safeStart = Math.min(start, textLength);
+                const safeEnd = Math.min(end, textLength);
+                range.setStart(textNode, safeStart);
+                range.setEnd(textNode, safeEnd);
+                const rect = range.getBoundingClientRect();
+                const parentRect = element.getBoundingClientRect();
+                selection.style.left = (rect.left - parentRect.left) + 'px';
+                selection.style.top = (rect.top - parentRect.top) + 'px';
+                selection.style.width = rect.width + 'px';
+                selection.style.height = rect.height + 'px';
+            }
+        } catch (e) {
+            console.warn('[Manifest Presence] Failed to position selection:', e);
+            return;
+        }
+    }
+
+    element.style.position = 'relative';
+    element.appendChild(selection);
+}
+
+// Initialize optional visual rendering (caret/selection indicators)
+function initializeVisualRendering() {
+    // Listen for presence events
+    document.addEventListener('presence:caret', (e) => {
+        const { userId, caretPosition, color } = e.detail;
+        const element = e.target;
+        if (element && caretPosition !== null && caretPosition !== undefined) {
+            renderCaret(element, caretPosition, color);
+        }
+    });
+
+    document.addEventListener('presence:selection', (e) => {
+        const { userId, selection, color } = e.detail;
+        const element = e.target;
+        if (element && selection && selection.start !== undefined && selection.end !== undefined) {
+            renderSelection(element, selection.start, selection.end, color);
+        }
+    });
+
+    // Update caret/selection when attributes change
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'attributes') {
+                const element = mutation.target;
+                const caretUser = element.getAttribute('data-presence-caret-user');
+                const caretPos = element.getAttribute('data-presence-caret-position');
+                const caretColor = element.getAttribute('data-presence-caret-color');
+
+                if (caretUser && caretPos !== null) {
+                    renderCaret(element, parseInt(caretPos), caretColor || null);
+                }
+
+                const selUser = element.getAttribute('data-presence-selection-user');
+                const selStart = element.getAttribute('data-presence-selection-start');
+                const selEnd = element.getAttribute('data-presence-selection-end');
+                const selColor = element.getAttribute('data-presence-selection-color');
+
+                if (selUser && selStart !== null && selEnd !== null) {
+                    renderSelection(element, parseInt(selStart), parseInt(selEnd), selColor || null);
+                }
+            }
+        });
+    });
+
+    // Observe all editable elements
+    function initObserver() {
+        const editableElements = document.querySelectorAll('input, textarea, [contenteditable="true"]');
+        editableElements.forEach(el => {
+            observer.observe(el, {
+                attributes: true,
+                attributeFilter: [
+                    'data-presence-caret-user', 'data-presence-caret-position', 'data-presence-caret-color',
+                    'data-presence-selection-user', 'data-presence-selection-start', 'data-presence-selection-end', 'data-presence-selection-color'
+                ]
+            });
+        });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initObserver);
+    } else {
+        initObserver();
+    }
+}
+
+
+/* Manifest Data Sources - Presence Main Subscription */
+
+// Subscribe to presence channel for cursor tracking
+// Uses a database table to store cursor positions (Appwrite Realtime is read-only)
+async function subscribeToPresence(channelId, options = {}) {
+    // Get configuration from manifest (if available)
+    const manifestConfig = await getPresenceConfig();
+
+    // Read CSS variables for timing/threshold values (with fallbacks)
+    const cssThrottle = getCSSVariableValue('--presence-throttle', 300);
+    const cssCleanupInterval = getCSSVariableValue('--presence-cleanup-interval', 30000);
+    const cssMinChangeThreshold = getCSSVariableValue('--presence-min-change-threshold', 5);
+    const cssIdleThreshold = getCSSVariableValue('--presence-idle-threshold', 5000);
+
+    // Merge defaults: options > manifest > CSS variables > hardcoded defaults
+    const finalOptions = {
+        element: options.element ?? document.body,
+        databaseId: options.databaseId ?? manifestConfig.appwriteDatabaseId ?? null,
+        tableId: options.tableId ?? manifestConfig.appwriteTableId ?? 'presence',
+        onCursorUpdate: options.onCursorUpdate ?? null,
+        onUserJoin: options.onUserJoin ?? null,
+        onUserLeave: options.onUserLeave ?? null,
+        throttle: options.throttle ?? manifestConfig.throttle ?? cssThrottle,
+        cleanupInterval: options.cleanupInterval ?? manifestConfig.cleanupInterval ?? cssCleanupInterval,
+        minChangeThreshold: options.minChangeThreshold ?? manifestConfig.minChangeThreshold ?? cssMinChangeThreshold,
+        idleThreshold: options.idleThreshold ?? manifestConfig.idleThreshold ?? cssIdleThreshold,
+        enableVisualRendering: options.enableVisualRendering ?? manifestConfig.enableVisualRendering ?? true,
+        includeVelocity: options.includeVelocity ?? manifestConfig.includeVelocity ?? false
+    };
+
+    const {
+        element,
+        databaseId,
+        tableId,
+        onCursorUpdate,
+        onUserJoin,
+        onUserLeave,
+        throttle,
+        cleanupInterval,
+        minChangeThreshold,
+        idleThreshold,
+        enableVisualRendering,
+        includeVelocity
+    } = finalOptions;
+
+    // Unsubscribe from existing subscription if any
+    if (presenceSubscriptions.has(channelId)) {
+        const existing = presenceSubscriptions.get(channelId);
+        if (existing.unsubscribe) {
+            existing.unsubscribe();
+        }
+        if (existing.updateInterval) {
+            clearInterval(existing.updateInterval);
+        }
+        if (existing.cleanupInterval) {
+            clearInterval(existing.cleanupInterval);
+        }
+        if (existing.cursorTracker && existing.cursorTracker.cleanup) {
+            existing.cursorTracker.cleanup();
+        }
+        presenceSubscriptions.delete(channelId);
+    }
+
+    const services = await getAppwriteServices();
+    if (!services?.tablesDB || !services?.realtime) {
+        console.warn('[Manifest Presence] Appwrite services not available');
+        return null;
+    }
+
+    if (!databaseId) {
+        console.error('[Manifest Presence] databaseId is required');
+        return null;
+    }
+
+    const userInfo = getUserInfo();
+    if (!userInfo) {
+        console.warn('[Manifest Presence] User not authenticated');
+        return null;
+    }
+
+    // Track cursors for other users
+    const cursors = new Map(); // Map<userId, { x, y, name, color, lastSeen }>
+
+    // Current presence state for this user (wrapped in objects for reference passing)
+    const currentCursor = { x: 0, y: 0 };
+    const currentFocus = { value: null }; // { elementId, elementType, tagName }
+    const currentSelection = { value: null }; // { start, end, text }
+    const currentEditing = { value: null }; // { elementId, value, caretPosition }
+    const isLocalUserEditing = { value: false }; // Track if local user is actively editing
+    const lastBroadcastTime = { value: 0 };
+
+    // Optimization: Track last sent position and state for change detection
+    const lastSentCursor = { value: { x: null, y: null } };
+    const lastSentFocus = { value: null };
+    const lastSentSelection = { value: null };
+    const lastSentEditing = { value: null };
+    const lastActivityTime = { value: Date.now() }; // Track user activity for idle detection
+    const lastVelocity = { vx: 0, vy: 0 }; // Velocity for smooth interpolation (future use)
+    const lastPosition = { x: 0, y: 0, time: Date.now() }; // For velocity calculation
+
+    // Create updateCursorPosition wrapper that uses the state objects
+    const updateCursorPositionWrapper = (forceImmediate = false) => {
+        return updateCursorPosition(
+            services,
+            databaseId,
+            tableId,
+            channelId,
+            userInfo,
+            currentCursor,
+            currentFocus,
+            currentSelection,
+            currentEditing,
+            lastVelocity,
+            includeVelocity,
+            lastBroadcastTime,
+            lastActivityTime,
+            throttle,
+            idleThreshold,
+            minChangeThreshold,
+            lastSentCursor,
+            lastSentFocus,
+            lastSentSelection,
+            lastSentEditing,
+            forceImmediate
+        );
+    };
+
+    // Create event handlers
+    const eventHandlersState = {
+        currentCursor,
+        currentFocus,
+        currentSelection,
+        currentEditing,
+        isLocalUserEditing,
+        lastPosition,
+        lastVelocity,
+        lastActivityTime
+    };
+
+    const eventHandlersCallbacks = {
+        getElementId: (el) => getElementId(el, element),
+        updateCursorPosition: updateCursorPositionWrapper
+    };
+
+    const cleanupEventHandlers = createPresenceEventHandlers(element, eventHandlersState, eventHandlersCallbacks);
+
+    // Update cursor position periodically
+    const updateInterval = setInterval(updateCursorPositionWrapper, throttle);
+
+    // Subscribe to real-time updates from the presence table
+    const presenceChannel = `databases.${databaseId}.tables.${tableId}.rows`;
+
+    // Setup realtime subscription
+    const unsubscribe = await setupPresenceRealtimeSubscription(
+        services,
+        presenceChannel,
+        channelId,
+        userInfo,
+        cursors,
+        element,
+        isLocalUserEditing,
+        currentEditing,
+        onUserJoin,
+        onUserLeave,
+        onCursorUpdate
+    );
+
+    // Load initial cursor positions from database
+    await loadInitialCursors(
+        services,
+        databaseId,
+        tableId,
+        channelId,
+        userInfo,
+        cursors,
+        includeVelocity,
+        applyVisualIndicators,
+        element,
+        onCursorUpdate
+    );
+
+    // Ensure initial cursors trigger callback even if load failed
+    if (onCursorUpdate && cursors.size > 0) {
+        console.log(`[Presence Debug] Triggering onCursorUpdate after load (fallback) with ${cursors.size} cursors`);
+        onCursorUpdate(Array.from(cursors.values()));
+    }
+
+    // Clean up stale cursors (users who haven't updated in a while)
+    const cleanupIntervalId = setInterval(() => {
+        const now = Date.now();
+        let hasChanges = false;
+
+        cursors.forEach((cursor, userId) => {
+            if (now - cursor.lastSeen > cleanupInterval) {
+                cursors.delete(userId);
+                hasChanges = true;
+
+                if (onUserLeave) {
+                    onUserLeave({ userId });
+                }
+            }
+        });
+
+        if (hasChanges && onCursorUpdate) {
+            onCursorUpdate(Array.from(cursors.values()));
+        }
+    }, cleanupInterval);
+
+    // Cleanup function
+    const cleanup = () => {
+        cleanupEventHandlers();
+        clearInterval(updateInterval);
+        clearInterval(cleanupIntervalId);
+
+        // Remove our presence from database on cleanup
+        try {
+            services.tablesDB.deleteRow({
+                databaseId,
+                tableId,
+                rowId: userInfo.id
+            });
+        } catch (error) {
+            console.warn('[Manifest Presence] Failed to remove presence on cleanup:', error);
+        }
+    };
+
+    // Store subscription info
+    presenceSubscriptions.set(channelId, {
+        unsubscribe,
+        cursorTracker: { cleanup },
+        cursors,
+        element,
+        userInfo,
+        updateInterval,
+        cleanupInterval: cleanupIntervalId
+    });
+
+    return {
+        unsubscribe: () => {
+            cleanup();
+            // Only call unsubscribe if it's actually a function
+            if (typeof unsubscribe === 'function') {
+                try {
+                    unsubscribe();
+                } catch (error) {
+                    console.warn('[Manifest Presence] Error during unsubscribe:', error);
+                }
+            }
+            presenceSubscriptions.delete(channelId);
+        },
+        cursors, // Expose cursors map for rendering
+        userInfo
+    };
+}
+
+// Unsubscribe from presence channel
+function unsubscribeFromPresence(channelId) {
+    if (presenceSubscriptions.has(channelId)) {
+        const subscription = presenceSubscriptions.get(channelId);
+        if (subscription.unsubscribe) {
+            subscription.unsubscribe();
+        }
+        if (subscription.cursorTracker && subscription.cursorTracker.cleanup) {
+            subscription.cursorTracker.cleanup();
+        }
+        presenceSubscriptions.delete(channelId);
+    }
+}
+
+// Unsubscribe from all presence channels
+function unsubscribeAllPresence() {
+    presenceSubscriptions.forEach((subscription, channelId) => {
+        if (subscription.unsubscribe) {
+            subscription.unsubscribe();
+        }
+        if (subscription.cursorTracker && subscription.cursorTracker.cleanup) {
+            subscription.cursorTracker.cleanup();
+        }
+    });
+    presenceSubscriptions.clear();
+}
+
+// Initialize visual rendering on plugin load (if DOM is ready)
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            initializeVisualRendering();
+        });
+    } else {
+        initializeVisualRendering();
+    }
+}
+
+// Export functions
+window.ManifestDataPresence = {
+    subscribeToPresence,
+    unsubscribeFromPresence,
+    unsubscribeAllPresence,
+    getUserColor,
+    getUserInfo,
+    interpolateCursorPosition, // Export for UI rendering
+    lerp, // Export for UI rendering
+    smoothInterpolate, // Export for UI rendering
+    renderCaret, // Export for manual caret rendering
+    renderSelection, // Export for manual selection rendering
+    initializeVisualRendering, // Export for manual initialization
+    presenceSubscriptions // Expose for debugging
+};