@sampleapp.ai/sdk 1.0.34 → 1.0.35

package/dist/components/sandbox/guardian/code-focus-section.js

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useGuardianContext } from "./context/guardian-context";
 // Helper function to find a node in the file tree by path
 function getTargetNode(fileTree, targetPath) {
@@ -13,15 +13,159 @@ function getTargetNode(fileTree, targetPath) {
     }
     return current;
 }
+class CodeFocusSectionCoordinator {
+    constructor() {
+        this.sections = new Map();
+        this.lastActiveSectionId = null;
+        this.scrollContainers = new Set();
+        this.scrollHandler = null;
+        if (typeof window !== "undefined") {
+            this.scrollHandler = this.handleScroll.bind(this);
+        }
+    }
+    handleScroll() {
+        this.updateActiveSection();
+    }
+    /**
+     * Calculate how "centered" an element is relative to its scroll container.
+     * Returns a score from 0 to 1, where 1 means the element's top is at the ideal reading position.
+     */
+    calculateScore(element) {
+        // Find the scroll container by walking up the DOM
+        const scrollContainer = this.findScrollContainer(element);
+        if (!scrollContainer)
+            return 0;
+        const containerRect = scrollContainer.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        // Calculate position relative to the scroll container
+        const relativeTop = elementRect.top - containerRect.top;
+        const relativeBottom = elementRect.bottom - containerRect.top;
+        const containerHeight = containerRect.height;
+        // Check if element is visible in the container
+        if (relativeBottom < 0 || relativeTop > containerHeight) {
+            return 0; // Not visible
+        }
+        // Target point: 20-30% from top of container for natural reading flow
+        // This is where the user's eyes naturally focus when reading
+        const targetPoint = containerHeight * 0.25;
+        // Calculate how close the element's top is to the target point
+        const distanceFromTarget = Math.abs(relativeTop - targetPoint);
+        const maxDistance = containerHeight;
+        // Base score from distance (closer to target = higher score)
+        const distanceScore = Math.max(0, 1 - distanceFromTarget / maxDistance);
+        // Bonus for elements that are in the "reading zone" (top 50% of container)
+        const inReadingZone = relativeTop >= 0 && relativeTop < containerHeight * 0.5;
+        const readingZoneBonus = inReadingZone ? 0.3 : 0;
+        // Visibility factor - how much of the element is visible
+        const visibleTop = Math.max(0, relativeTop);
+        const visibleBottom = Math.min(containerHeight, relativeBottom);
+        const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+        const elementHeight = elementRect.height;
+        const visibilityRatio = elementHeight > 0 ? visibleHeight / elementHeight : 0;
+        const visibilityFactor = visibilityRatio * 0.2;
+        return distanceScore * 0.5 + readingZoneBonus + visibilityFactor;
+    }
+    findScrollContainer(element) {
+        let current = element.parentElement;
+        while (current) {
+            const style = window.getComputedStyle(current);
+            const overflowY = style.overflowY;
+            if ((overflowY === "auto" || overflowY === "scroll") &&
+                current.scrollHeight > current.clientHeight) {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
+    updateActiveSection() {
+        if (this.sections.size === 0)
+            return;
+        // Find the section with the highest score
+        let bestSection = null;
+        let bestScore = -1;
+        let bestId = null;
+        for (const [id, entry] of this.sections) {
+            const score = this.calculateScore(entry.element);
+            if (score > bestScore) {
+                bestScore = score;
+                bestSection = entry;
+                bestId = id;
+            }
+        }
+        // Only trigger if we have a valid section with a reasonable score
+        // and it's different from the last one
+        if (bestSection && bestId && bestScore > 0.1 && bestId !== this.lastActiveSectionId) {
+            this.lastActiveSectionId = bestId;
+            bestSection.focusCallback();
+        }
+    }
+    register(id, element, focusCallback) {
+        const entry = { element, focusCallback, id };
+        this.sections.set(id, entry);
+        element.setAttribute("data-code-focus-id", id);
+        // Find and attach to the scroll container
+        const scrollContainer = this.findScrollContainer(element);
+        if (scrollContainer && this.scrollHandler) {
+            if (!this.scrollContainers.has(scrollContainer)) {
+                scrollContainer.addEventListener("scroll", this.scrollHandler, { passive: true });
+                this.scrollContainers.add(scrollContainer);
+            }
+        }
+        // Trigger initial update
+        this.updateActiveSection();
+        // Return cleanup function
+        return () => {
+            this.sections.delete(id);
+            if (this.lastActiveSectionId === id) {
+                this.lastActiveSectionId = null;
+            }
+            // Clean up scroll listeners if no more sections
+            if (this.sections.size === 0) {
+                for (const container of this.scrollContainers) {
+                    if (this.scrollHandler) {
+                        container.removeEventListener("scroll", this.scrollHandler);
+                    }
+                }
+                this.scrollContainers.clear();
+            }
+        };
+    }
+    // Force focus a specific section (for click handling)
+    forceFocus(id) {
+        const section = this.sections.get(id);
+        if (section) {
+            this.lastActiveSectionId = id;
+            section.focusCallback();
+        }
+    }
+}
+// Singleton instance - created lazily to avoid SSR issues
+let coordinatorInstance = null;
+function getCoordinator() {
+    if (!coordinatorInstance && typeof window !== "undefined") {
+        coordinatorInstance = new CodeFocusSectionCoordinator();
+    }
+    return coordinatorInstance;
+}
+// Counter for generating unique IDs
+let sectionIdCounter = 0;
 /**
  * Component that focuses on a specific file and line range in the code editor
  * when it comes into view while scrolling, or when the user clicks "View Code".
+ *
+ * Uses a global coordinator pattern (similar to Stripe docs) to ensure:
+ * - Only ONE section is active at a time
+ * - The section closest to the viewport center is selected
+ * - Smooth transitions without flickering during fast scrolling
+ * - Natural reading flow with slight bias towards top of viewport
  */
-export default function CodeFocusSection({ filePath, lineRange, title, description, children, threshold = 0, themeColor, }) {
+export default function CodeFocusSection({ filePath, lineRange, title, description, children, themeColor, }) {
     const sectionRef = useRef(null);
+    const sectionIdRef = useRef(`code-focus-${++sectionIdCounter}`);
     const { generatedCode, fileTree, setActiveFilePath, setActiveFileName, setActiveLineNumber, setActiveLineRange, updateCode, setLanguage, filesEdited, activeFilePath, activeLineRange, } = useGuardianContext();
-    // Moves the editor's focus to this file/lines
-    const focusCode = () => {
+    // Memoize the focus code function to prevent unnecessary recreations
+    const focusCode = useCallback(() => {
         // Get the file code from generatedCode or fileTree
         // Always search by file_path property first, as that's the source of truth
         let code = "";
@@ -94,41 +238,35 @@ export default function CodeFocusSection({ filePath, lineRange, title, descripti
                 setActiveLineNumber(undefined);
             }
         }
-    };
-    useEffect(() => {
-        const element = sectionRef.current;
-        if (!element)
-            return;
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                // Trigger when the element enters the middle of the viewport
-                if (entry.isIntersecting) {
-                    focusCode();
-                }
-            });
-        }, {
-            threshold,
-            rootMargin: "-40% 0px -40% 0px", // Trigger when element enters the middle 20% of viewport
-        });
-        observer.observe(element);
-        return () => {
-            observer.disconnect();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         filePath,
         lineRange,
         generatedCode,
         fileTree,
+        filesEdited,
         setActiveFilePath,
         setActiveFileName,
         setActiveLineNumber,
         setActiveLineRange,
         updateCode,
         setLanguage,
-        filesEdited,
-        threshold,
     ]);
+    // Register with the global coordinator
+    useEffect(() => {
+        const element = sectionRef.current;
+        if (!element || typeof window === "undefined")
+            return;
+        const coordinator = getCoordinator();
+        const cleanup = coordinator.register(sectionIdRef.current, element, focusCode);
+        return cleanup;
+    }, [focusCode]);
+    // Handle click to force focus
+    const handleClick = useCallback(() => {
+        if (typeof window !== "undefined") {
+            const coordinator = getCoordinator();
+            coordinator.forceFocus(sectionIdRef.current);
+        }
+    }, []);
     // Get the resolved file path for comparison
     // This ensures we compare against the actual file_path from the code structure
     const resolvedFilePathForComparison = useMemo(() => {
@@ -154,7 +292,7 @@ export default function CodeFocusSection({ filePath, lineRange, title, descripti
         }
         return filePath;
     }, [filePath, generatedCode, fileTree]);
-    return (React.createElement("div", { ref: sectionRef, className: `relative transition-colors py-6 cursor-pointer`, onClick: focusCode },
+    return (React.createElement("div", { ref: sectionRef, className: `relative transition-colors py-6 cursor-pointer`, onClick: handleClick },
         React.createElement("div", { className: "pointer-events-none absolute inset-x-[-2rem] top-0 border-t border-border" }),
         React.createElement("div", { className: "pointer-events-none absolute inset-x-[-2rem] bottom-0 border-b border-border" }),
         (activeFilePath === resolvedFilePathForComparison ||

package/dist/components/sandbox/guardian/right-view/simplified-editor.js

@@ -207,27 +207,27 @@ export default function SimplifiedEditor({ themeColor }) {
                     colorDecorators: true,
                 })), { domReadOnly: isGenerating, readOnly: isGenerating }) })),
         React.createElement("style", null, `
-        :global(.search-highlight-line) {
+        .search-highlight-line {
           background-color: ${highlightBackground} !important;
         }
-        :global(.search-highlight-glyph) {
+        .search-highlight-glyph {
           background-color: ${glyphBackground};
         }
-        :global(.muted-code-text) {
+        .muted-code-text {
           opacity: 0.5;
           filter: grayscale(0.4);
         }
         /* Remove blue focus outline from Monaco Editor */
-        :global(.monaco-editor .inputarea.ime-input) {
+        .monaco-editor .inputarea.ime-input {
           outline: none !important;
         }
-        :global(.monaco-editor) {
+        .monaco-editor {
           outline: none !important;
         }
-        :global(.monaco-editor .monaco-editor-background) {
+        .monaco-editor .monaco-editor-background {
           outline: none !important;
         }
-        :global(.monaco-editor .view-overlays) {
+        .monaco-editor .view-overlays {
           outline: none !important;
         }
       `)));

package/dist/components/sandbox/guardian/types/ide-types.js

@@ -144,7 +144,6 @@ export function filePathToCodeLanguage(filePath) {
             return CodeLanguage.ELIXIR;
         case "lua":
             return CodeLanguage.LUA;
-        case "m":
         case "mm":
             return CodeLanguage.OBJECTIVEC;
         case "md":