@agent-native/core 0.83.0 → 0.84.0

package/corpus/templates/design/app/components/design/bridge/hit-test.bridge.ts

@@ -6,10 +6,14 @@
  * Protocol (parent → iframe via postMessage):
  *   { type: 'agent-native:hit-test', correlationId: string, x: number, y: number }
  *   where x/y are in this iframe's viewport coordinate space.
+ *   When preview is true, the iframe also renders its local insertion guide.
+ *   { type: 'agent-native:hit-test-preview-clear' } hides that guide.
  *
  * Reply (iframe → window.parent):
  *   { type: 'agent-native:hit-test-result', correlationId: string,
- *     anchorNodeId: string, placement: 'before'|'after'|'inside' }
+ *     anchorNodeId: string, placement: 'before'|'after'|'inside',
+ *     axis: 'x'|'y',
+ *     anchorRect: { left: number, top: number, width: number, height: number } }
  *
  * Reads DOM only — no mutations, no event interception. The container-drop and
  * placement logic is intentionally kept in sync with the corresponding helpers
@@ -22,6 +26,25 @@
  *   • Wrap everything in a self-executing IIFE.
  */
 (function () {
+  var insertionGuide: HTMLDivElement | null = null;
+
+  function ensureInsertionGuide(): HTMLDivElement {
+    if (insertionGuide && document.body.contains(insertionGuide)) {
+      return insertionGuide;
+    }
+    insertionGuide = document.createElement("div");
+    insertionGuide.setAttribute("data-agent-native-hit-test-preview", "");
+    insertionGuide.setAttribute("data-agent-native-edit-overlay", "drop-guide");
+    insertionGuide.style.cssText =
+      "position:fixed;pointer-events:none;z-index:99995;display:none;box-sizing:border-box;";
+    document.body.appendChild(insertionGuide);
+    return insertionGuide;
+  }
+
+  function hideInsertionGuide(): void {
+    if (insertionGuide) insertionGuide.style.display = "none";
+  }
+
   // keep in sync with editor-chrome.bridge.ts container/leaf/text tag lists
   var BRIDGE_CONTAINER_TAGS = [
     "div",
@@ -153,6 +176,17 @@
     return "y";
   }
 
+  function isAutoLayoutElement(el: Element | null): boolean {
+    if (!el) return false;
+    var cs = window.getComputedStyle(el);
+    return (
+      cs.display === "flex" ||
+      cs.display === "inline-flex" ||
+      cs.display === "grid" ||
+      cs.display === "inline-grid"
+    );
+  }
+
   // keep in sync with editor-chrome.bridge.ts edgePlacementForRect
   function edgePlacementForRect(
     rect: DOMRect,
@@ -202,61 +236,111 @@
   function resolveHitTarget(
     clientX: number,
     clientY: number,
-  ): { anchor: Element; placement: string } | null {
+  ): { anchor: Element; placement: string; axis: string } | null {
     var hit = elementFromEditorPoint(clientX, clientY);
     if (!hit || hit === document.documentElement) return null;
 
-    if (isContainerDropTarget(hit)) {
-      var containerRect = hit.getBoundingClientRect();
-      var edgeAxis = hit.parentElement
-        ? parentFlowAxis(hit.parentElement)
-        : parentFlowAxis(hit);
-      var edgePlacement = edgePlacementForRect(
-        containerRect,
-        edgeAxis,
-        clientX,
-        clientY,
-      );
-      if (!edgePlacement) {
-        return { anchor: hit, placement: "inside" };
+    var cursor: Element | null = hit;
+    while (cursor && cursor !== document.body) {
+      if (isLayerInteractionBlocked(cursor)) return null;
+      var parent: Element | null = cursor.parentElement;
+      if (parent && isAutoLayoutElement(parent)) {
+        var parentAxis = parentFlowAxis(parent);
+        var childRect = cursor.getBoundingClientRect();
+        var childCenter =
+          parentAxis === "x"
+            ? childRect.left + childRect.width / 2
+            : childRect.top + childRect.height / 2;
+        var childPointer = parentAxis === "x" ? clientX : clientY;
+        return {
+          anchor: cursor,
+          placement: childPointer < childCenter ? "before" : "after",
+          axis: parentAxis,
+        };
       }
-      return { anchor: hit, placement: edgePlacement };
+      if (isAutoLayoutElement(cursor) && isContainerDropTarget(cursor)) {
+        var containerRect = cursor.getBoundingClientRect();
+        var edgeAxis = parent ? parentFlowAxis(parent) : parentFlowAxis(cursor);
+        var edgePlacement = edgePlacementForRect(
+          containerRect,
+          edgeAxis,
+          clientX,
+          clientY,
+        );
+        if (edgePlacement && parent && isAutoLayoutElement(parent)) {
+          return { anchor: cursor, placement: edgePlacement, axis: edgeAxis };
+        }
+        return {
+          anchor: cursor,
+          placement: "inside",
+          axis: parentFlowAxis(cursor),
+        };
+      }
+      cursor = parent;
     }
 
-    // Non-container: use sibling before/after placement.
-    var hitParent = hit.parentElement;
-    if (hitParent) {
-      var hitAxis = parentFlowAxis(hitParent);
-      var hitRect = hit.getBoundingClientRect();
-      var hitCenter =
-        hitAxis === "x"
-          ? hitRect.left + hitRect.width / 2
-          : hitRect.top + hitRect.height / 2;
-      var hitPointer = hitAxis === "x" ? clientX : clientY;
-      return {
-        anchor: hit,
-        placement: hitPointer < hitCenter ? "before" : "after",
-      };
-    }
+    return null;
+  }
 
-    // Fallback: body-level, treat as inside.
-    if (hit === document.body || !hit.parentElement) {
-      return { anchor: document.body, placement: "inside" };
+  function showInsertionGuideFor(
+    target: { anchor: Element; placement: string; axis: string } | null,
+  ): void {
+    if (!target || !target.anchor) {
+      hideInsertionGuide();
+      return;
+    }
+    var guide = ensureInsertionGuide();
+    var rect = target.anchor.getBoundingClientRect();
+    guide.style.display = "block";
+    guide.style.background = "var(--design-editor-accent-color)";
+    guide.style.border = "0";
+    guide.style.borderRadius = "999px";
+    guide.style.boxShadow = "0 0 0 1px var(--design-editor-accent-color)";
+    if (target.placement === "inside") {
+      guide.style.left = rect.left + "px";
+      guide.style.top = rect.top + "px";
+      guide.style.width = rect.width + "px";
+      guide.style.height = rect.height + "px";
+      guide.style.background =
+        "color-mix(in srgb, var(--design-editor-accent-color) 14%, transparent)";
+      guide.style.border = "2px solid var(--design-editor-accent-color)";
+      guide.style.borderRadius = "2px";
+      guide.style.boxShadow = "none";
+      return;
+    }
+    if (target.axis === "x") {
+      var x = target.placement === "before" ? rect.left : rect.right;
+      guide.style.left = x + "px";
+      guide.style.top = rect.top + "px";
+      guide.style.width = "2px";
+      guide.style.height = rect.height + "px";
+    } else {
+      var y = target.placement === "before" ? rect.top : rect.bottom;
+      guide.style.left = rect.left + "px";
+      guide.style.top = y + "px";
+      guide.style.width = rect.width + "px";
+      guide.style.height = "2px";
     }
-
-    return null;
   }
 
   window.addEventListener("message", function (e: MessageEvent) {
     if (e.source !== window.parent) return;
-    if (!e.data || e.data.type !== "agent-native:hit-test") return;
+    if (!e.data) return;
+    if (e.data.type === "agent-native:hit-test-preview-clear") {
+      hideInsertionGuide();
+      return;
+    }
+    if (e.data.type !== "agent-native:hit-test") return;
     var correlationId: string = e.data.correlationId;
     var x: number = Number(e.data.x);
     var y: number = Number(e.data.y);
     if (!correlationId) return;
     var result = resolveHitTarget(x, y);
+    if (e.data.preview) showInsertionGuideFor(result);
     var anchorNodeId: string = result ? getNodeId(result.anchor) : "";
     var placement: string = result ? result.placement : "inside";
+    var axis: string = result ? result.axis : "y";
+    var anchorRect = result ? result.anchor.getBoundingClientRect() : null;
     try {
       (window.parent as Window).postMessage(
         {
@@ -264,6 +348,15 @@
           correlationId: correlationId,
           anchorNodeId: anchorNodeId,
           placement: placement,
+          axis: axis,
+          anchorRect: anchorRect
+            ? {
+                left: anchorRect.left,
+                top: anchorRect.top,
+                width: anchorRect.width,
+                height: anchorRect.height,
+              }
+            : undefined,
         },
         "*",
       );

package/corpus/templates/design/app/components/design/canvas-primitive-style.ts

@@ -8,17 +8,18 @@
  * jump and the B6 ellipse border-radius jump.
  *
  * Design decisions:
- * - Fill: `hsl(var(--primary) / 0.12)` — the calm, theme-adaptive tint already
- *   used by the draft preview.  NOT the saturated blue previously hard-coded in
- *   appendCanvasPrimitiveToHtml (`rgba(37,99,235,0.16)`).
- * - Stroke: `hsl(var(--primary) / 0.7)` — same CSS-var approach, adapts to
- *   light/dark mode automatically.
+ * - Fill: `hsl(var(--primary, 213 91% 67%) / 0.24)` — theme-adaptive when the
+ *   document defines `--primary`, but still visibly blue inside standalone
+ *   iframe documents such as the overview board.
+ * - Stroke: `hsl(var(--primary, 213 91% 67%) / 0.95)` — same CSS-var approach
+ *   with a fallback so committed shapes do not become invisible.
  * - Stroke width: 1px for div-based shapes.
  * - Ellipse: borderRadius "50%" in both paths — no more "oval on commit" jump.
  * - Rect: borderRadius "2px" (small, matches the previous committed value; the
  *   preview used Tailwind `rounded-sm` which resolves to 2px).
  * - Frame: dashed border, slightly lighter fill (matches preview semantics).
- * - Text: inherits current color; dashed outline as placeholder affordance.
+ * - Text: inherits current color. Selection/edit chrome owns outlines so text
+ *   does not carry a persistent border that double-stacks with focused states.
  *
  * CSS custom properties (`hsl(var(--primary) / …)`) work in the committed HTML
  * because the iframe inherits the design-editor stylesheet that defines
@@ -57,11 +58,11 @@ export interface CanvasPrimitiveVisual {
 // Canonical tokens
 // ---------------------------------------------------------------------------
 
-/** Default fill tint — calm, theme-adaptive, not saturated. */
-const DEFAULT_FILL = "hsl(var(--primary) / 0.12)";
+/** Default fill — a soft Figma-like neutral gray. */
+const DEFAULT_FILL = "rgb(218 218 218)";
 
-/** Default stroke — uses the same hue at higher opacity for clarity. */
-const DEFAULT_STROKE = "hsl(var(--primary) / 0.7)";
+/** Default stroke — slightly darker so new rectangles stay visible. */
+const DEFAULT_STROKE = "rgb(168 168 168)";
 
 /** Stroke width in pixels for div-based shapes. */
 const DEFAULT_STROKE_WIDTH_PX = 1;
@@ -69,6 +70,9 @@ const DEFAULT_STROKE_WIDTH_PX = 1;
 /** Border shorthand shared by rect + ellipse. */
 const DEFAULT_BORDER = `${DEFAULT_STROKE_WIDTH_PX}px solid ${DEFAULT_STROKE}`;
 
+/** Text nodes rely on editor chrome for outlines; the element itself is bare. */
+const TEXT_BORDER = "0 solid transparent";
+
 /** Frame gets a dashed border to signal it is a layout container. */
 const FRAME_BORDER = `${DEFAULT_STROKE_WIDTH_PX}px dashed ${DEFAULT_STROKE}`;
 
@@ -114,7 +118,7 @@ export function canvasPrimitiveVisual(
     case "text":
       return {
         background: "transparent",
-        border: `${DEFAULT_STROKE_WIDTH_PX}px dashed hsl(var(--primary) / 0.6)`,
+        border: TEXT_BORDER,
         borderRadius: RECT_RADIUS,
         color: "currentColor",
       };
@@ -204,6 +208,15 @@ export function canvasPrimitiveReactStyle(
     borderStyle = "dashed";
   }
 
+  if (
+    kind === "text" &&
+    !overrides?.stroke &&
+    overrides?.strokeWidth === undefined
+  ) {
+    borderWidth = 0;
+    borderStyle = "solid";
+  }
+
   if (overrides?.fill) {
     background = overrides.fill;
   }