@agent-native/core 0.101.13 → 0.102.0

package/corpus/templates/slides/app/components/editor/SlideEditor.tsx

@@ -24,6 +24,7 @@ import {
   useRef,
   useEffect,
   type MouseEvent as ReactMouseEvent,
+  type ReactNode,
 } from "react";
 import { createPortal } from "react-dom";
 
@@ -475,111 +476,175 @@ function SameSlidePresenceIndicator({ users }: { users: CollabUser[] }) {
 }
 
 /** Selection outline rendered over a selected image */
-function ImageSelectionOutline({ rect }: { rect: DOMRect }) {
-  const pad = 2;
+function SelectionOverlayPortal({
+  viewportRect,
+  zIndex,
+  children,
+}: {
+  viewportRect: DOMRect | null;
+  zIndex: number;
+  children: ReactNode;
+}) {
+  if (!viewportRect) return null;
+
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const top = Math.max(0, Math.min(viewportHeight, viewportRect.top));
+  const right = Math.max(
+    0,
+    Math.min(viewportWidth, viewportWidth - viewportRect.right),
+  );
+  const bottom = Math.max(
+    0,
+    Math.min(viewportHeight, viewportHeight - viewportRect.bottom),
+  );
+  const left = Math.max(0, Math.min(viewportWidth, viewportRect.left));
+
   return createPortal(
     <div
       style={{
         position: "fixed",
-        top: rect.top - pad,
-        left: rect.left - pad,
-        width: rect.width + pad * 2,
-        height: rect.height + pad * 2,
+        inset: 0,
+        overflow: "hidden",
         pointerEvents: "none",
-        zIndex: 50,
-        border: "2px solid #609FF8",
-        borderRadius: 2,
+        zIndex,
+        // Selection rects use viewport coordinates, so keep the portal for
+        // accurate zoom/scroll tracking while clipping it to the canvas
+        // viewport. This prevents outlines from painting over either sidebar.
+        clipPath: `inset(${top}px ${right}px ${bottom}px ${left}px)`,
       }}
-    />,
+    >
+      {children}
+    </div>,
     document.body,
   );
 }
 
-function ElementSelectionOutline({ rect }: { rect: DOMRect }) {
+function ImageSelectionOutline({
+  rect,
+  viewportRect,
+}: {
+  rect: DOMRect;
+  viewportRect: DOMRect | null;
+}) {
+  const pad = 2;
+  return (
+    <SelectionOverlayPortal viewportRect={viewportRect} zIndex={50}>
+      <div
+        style={{
+          position: "absolute",
+          top: rect.top - pad,
+          left: rect.left - pad,
+          width: rect.width + pad * 2,
+          height: rect.height + pad * 2,
+          pointerEvents: "none",
+          border: "2px solid #609FF8",
+          borderRadius: 2,
+        }}
+      />
+    </SelectionOverlayPortal>
+  );
+}
+
+function ElementSelectionOutline({
+  rect,
+  viewportRect,
+}: {
+  rect: DOMRect;
+  viewportRect: DOMRect | null;
+}) {
   const pad = 2;
   const handle = 7;
   const handleClass =
     "absolute size-[7px] rounded-sm border border-background bg-[#609FF8] shadow-sm";
-  return createPortal(
-    <div
-      style={{
-        position: "fixed",
-        top: rect.top - pad,
-        left: rect.left - pad,
-        width: rect.width + pad * 2,
-        height: rect.height + pad * 2,
-        pointerEvents: "none",
-        zIndex: 51,
-        border: "1.5px solid #609FF8",
-        borderRadius: 3,
-        boxShadow: "0 0 0 1px rgba(96, 159, 248, 0.2)",
-      }}
-    >
-      <span
-        className={handleClass}
-        style={{ left: -handle / 2, top: -handle / 2 }}
-      />
-      <span
-        className={handleClass}
-        style={{ right: -handle / 2, top: -handle / 2 }}
-      />
-      <span
-        className={handleClass}
-        style={{ left: -handle / 2, bottom: -handle / 2 }}
-      />
-      <span
-        className={handleClass}
-        style={{ right: -handle / 2, bottom: -handle / 2 }}
-      />
-    </div>,
-    document.body,
+  return (
+    <SelectionOverlayPortal viewportRect={viewportRect} zIndex={51}>
+      <div
+        style={{
+          position: "absolute",
+          top: rect.top - pad,
+          left: rect.left - pad,
+          width: rect.width + pad * 2,
+          height: rect.height + pad * 2,
+          pointerEvents: "none",
+          border: "1.5px solid #609FF8",
+          borderRadius: 3,
+          boxShadow: "0 0 0 1px rgba(96, 159, 248, 0.2)",
+        }}
+      >
+        <span
+          className={handleClass}
+          style={{ left: -handle / 2, top: -handle / 2 }}
+        />
+        <span
+          className={handleClass}
+          style={{ right: -handle / 2, top: -handle / 2 }}
+        />
+        <span
+          className={handleClass}
+          style={{ left: -handle / 2, bottom: -handle / 2 }}
+        />
+        <span
+          className={handleClass}
+          style={{ right: -handle / 2, bottom: -handle / 2 }}
+        />
+      </div>
+    </SelectionOverlayPortal>
   );
 }
 
 /** Outline rendered around a multi-select element */
-function MultiSelectOutline({ rect }: { rect: DOMRect }) {
+function MultiSelectOutline({
+  rect,
+  viewportRect,
+}: {
+  rect: DOMRect;
+  viewportRect: DOMRect | null;
+}) {
   const pad = 1;
-  return createPortal(
-    <div
-      style={{
-        position: "fixed",
-        top: rect.top - pad,
-        left: rect.left - pad,
-        width: rect.width + pad * 2,
-        height: rect.height + pad * 2,
-        pointerEvents: "none",
-        zIndex: 49,
-        border: "2px solid #609FF8",
-        borderRadius: 2,
-        boxShadow: "0 0 0 1px rgba(96, 159, 248, 0.25)",
-      }}
-    />,
-    document.body,
+  return (
+    <SelectionOverlayPortal viewportRect={viewportRect} zIndex={49}>
+      <div
+        style={{
+          position: "absolute",
+          top: rect.top - pad,
+          left: rect.left - pad,
+          width: rect.width + pad * 2,
+          height: rect.height + pad * 2,
+          pointerEvents: "none",
+          border: "2px solid #609FF8",
+          borderRadius: 2,
+          boxShadow: "0 0 0 1px rgba(96, 159, 248, 0.25)",
+        }}
+      />
+    </SelectionOverlayPortal>
   );
 }
 
 /** Translucent rectangle drawn while marquee-dragging */
 function MarqueeRect({
   rect,
+  viewportRect,
 }: {
   rect: { x: number; y: number; w: number; h: number };
+  viewportRect: DOMRect | null;
 }) {
-  return createPortal(
-    <div
-      style={{
-        position: "fixed",
-        top: rect.y,
-        left: rect.x,
-        width: rect.w,
-        height: rect.h,
-        pointerEvents: "none",
-        zIndex: 48,
-        background: "rgba(96, 159, 248, 0.12)",
-        border: "1px solid #609FF8",
-        borderRadius: 1,
-      }}
-    />,
-    document.body,
+  return (
+    <SelectionOverlayPortal viewportRect={viewportRect} zIndex={48}>
+      <div
+        style={{
+          position: "absolute",
+          top: rect.y,
+          left: rect.x,
+          width: rect.w,
+          height: rect.h,
+          pointerEvents: "none",
+          background: "rgba(96, 159, 248, 0.12)",
+          border: "1px solid #609FF8",
+          borderRadius: 1,
+        }}
+      />
+    </SelectionOverlayPortal>
   );
 }
 
@@ -690,6 +755,8 @@ export default function SlideEditor({
   } | null>(null);
   const [selectedImg, setSelectedImg] = useState<HTMLImageElement | null>(null);
   const [selectionRect, setSelectionRect] = useState<DOMRect | null>(null);
+  const [selectionViewportRect, setSelectionViewportRect] =
+    useState<DOMRect | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   // Wraps the rendered slide; used as the positioning container for the
@@ -784,6 +851,34 @@ export default function SlideEditor({
     max: MAX_CANVAS_ZOOM,
   });
 
+  // Selection outlines are portaled to the document so their viewport
+  // coordinates stay aligned with the zoomed/scrolling slide. Keep a live
+  // viewport rect so that portal can clip itself to the central canvas when
+  // either sidebar or the style inspector changes the available width.
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+
+    const updateViewportRect = () => {
+      setSelectionViewportRect(scrollContainer.getBoundingClientRect());
+    };
+
+    updateViewportRect();
+    const observer =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(updateViewportRect);
+    observer?.observe(scrollContainer);
+    window.addEventListener("resize", updateViewportRect);
+    window.addEventListener("scroll", updateViewportRect, true);
+
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", updateViewportRect);
+      window.removeEventListener("scroll", updateViewportRect, true);
+    };
+  }, []);
+
   useEffect(() => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer) return;
@@ -1959,7 +2054,7 @@ export default function SlideEditor({
         </div>
 
         {selectedStyleSnapshot && !readOnly && (
-          <div className="hidden h-full w-[17rem] shrink-0 border-l border-border/70 bg-background/95 lg:block">
+          <div className="relative z-[70] hidden h-full w-[17rem] shrink-0 border-l border-border/70 bg-background/95 lg:block">
             <SlideStyleInspector
               snapshot={selectedStyleSnapshot}
               designSystem={designSystem}
@@ -1981,19 +2076,31 @@ export default function SlideEditor({
         slideCount={slideCount}
       />
 
-      {selectionRect && <ImageSelectionOutline rect={selectionRect} />}
+      {selectionRect && (
+        <ImageSelectionOutline
+          rect={selectionRect}
+          viewportRect={selectionViewportRect}
+        />
+      )}
       {selectedElementRect && (
-        <ElementSelectionOutline rect={selectedElementRect} />
+        <ElementSelectionOutline
+          rect={selectedElementRect}
+          viewportRect={selectionViewportRect}
+        />
       )}
 
       {/* Multi-select outlines */}
       {Array.from(multiSelectionRects.entries()).map(([id, v]) => (
-        <MultiSelectOutline key={id} rect={v.rect} />
+        <MultiSelectOutline
+          key={id}
+          rect={v.rect}
+          viewportRect={selectionViewportRect}
+        />
       ))}
 
       {/* Active marquee rectangle */}
       {marquee && (marquee.w > 1 || marquee.h > 1) && (
-        <MarqueeRect rect={marquee} />
+        <MarqueeRect rect={marquee} viewportRect={selectionViewportRect} />
       )}
 
       {/* Floating "N selected" chip */}

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -875,7 +875,7 @@ export default function DeckEditor() {
               className="md:hidden fixed inset-0 bg-black/50 z-30"
               onClick={() => setSidebarOpen(false)}
             />
-            <div className="absolute z-40 h-full min-h-0 md:relative">
+            <div className="absolute z-[70] h-full min-h-0 md:relative">
               <DndContext
                 sensors={sensors}
                 collisionDetection={closestCenter}

package/corpus/templates/tasks/.agents/commands/visual-plan.md

@@ -0,0 +1,9 @@
+---
+description: Create an interactive Agent-Native visual plan for the current task.
+argument-hint: [optional request or scope]
+---
+
+Use the visual-plan skill for this task. Treat any arguments as the user's
+requested plan scope or focus:
+
+$ARGUMENTS

package/corpus/templates/tasks/.agents/commands/visual-recap.md

@@ -0,0 +1,8 @@
+---
+description: Create an interactive Agent-Native visual recap for a PR, branch, commit, or diff.
+argument-hint: [PR, branch, commit, diff, or scope]
+---
+
+Use the visual-recap skill. Treat any arguments as the recap target or focus:
+
+$ARGUMENTS