@agent-native/core 0.84.9 → 0.84.12

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -186,7 +186,11 @@ interface MultiScreenCanvasProps {
     screenId: string,
     primitive: CanvasPrimitiveInsert,
   ) => boolean | string;
-  onPrimitiveCreated?: (screenId: string, nodeId: string) => void;
+  onPrimitiveCreated?: (
+    screenId: string,
+    nodeId: string,
+    options?: { nextTool?: "move" | "pen" },
+  ) => void;
   onPrimitiveReparent?: (args: {
     sourceNodeId: string;
     sourceScreenId: string;
@@ -1505,7 +1509,7 @@ export function MultiScreenCanvas({
     setTransformBadge(null);
   }, [clearSelectionRequest, updateSelectedDraftIds, updateSelectedIds]);
 
-  // Center the lineup on first mount so the user sees screens, not whitespace.
+  // Center the lineup when the screen footprint changes so new frames stay reachable.
   useEffect(() => {
     if (!surfaceRef.current || screens.length === 0) return;
     const rect = surfaceRef.current.getBoundingClientRect();
@@ -1529,11 +1533,26 @@ export function MultiScreenCanvas({
     );
     const totalWidth = bounds?.width ?? SCREEN_WIDTH;
     const totalHeight = bounds?.height ?? SCREEN_CARD_HEIGHT;
-    const visualLeft = Math.max(24, (rect.width - totalWidth * scale) / 2);
-    const visualTop = Math.max(24, (rect.height - totalHeight * scale) / 2);
+    // Leave a Figma-like board gutter beside the last frame for quick drops/draws,
+    // and fit tall single frames so lower canvas interactions remain reachable.
+    const widthFitScale =
+      screens.length > 1 && totalWidth > 0
+        ? Math.max(0.1, (rect.width - 180) / totalWidth)
+        : scale;
+    const heightFitScale =
+      totalHeight > 0 ? Math.max(0.1, (rect.height - 96) / totalHeight) : scale;
+    const nextScale = Math.min(scale, widthFitScale, heightFitScale);
+    if (nextScale < scale) {
+      const nextZoom = nextScale * 100;
+      zoomRef.current = nextZoom;
+      setCanvasZoom(nextZoom);
+      onZoomChange?.(nextZoom);
+    }
+    const visualLeft = Math.max(24, (rect.width - totalWidth * nextScale) / 2);
+    const visualTop = Math.max(24, (rect.height - totalHeight * nextScale) / 2);
     const nextPan = {
-      x: visualLeft - SURFACE_PADDING * scale,
-      y: visualTop - SURFACE_PADDING * scale,
+      x: visualLeft - SURFACE_PADDING * nextScale,
+      y: visualTop - SURFACE_PADDING * nextScale,
     };
     panRef.current = nextPan;
     setPan(nextPan);
@@ -2517,9 +2536,11 @@ export function MultiScreenCanvas({
         updateSelectedIds(() => state.baseSelectedIds);
         updateSelectedDraftIds(() => state.baseSelectedDraftIds);
       } else if (state.type === "pen-node") {
-        setActivePenPath(
-          state.pathBefore ? clonePenPath(state.pathBefore) : null,
-        );
+        const restoredPath = state.pathBefore
+          ? clonePenPath(state.pathBefore)
+          : null;
+        activePenPathRef.current = restoredPath;
+        setActivePenPath(restoredPath);
         setPenGesturePreview(null);
         setPenPointer(null);
         setPenCloseHover(false);
@@ -2792,10 +2813,10 @@ export function MultiScreenCanvas({
           });
           const persisted = handler(boardPrimitive);
           if (!persisted) return null;
-          // Return a sentinel PersistedDraftPrimitive so the caller can remove
-          // the draft. The sentinel frameId "__board__" is detected downstream.
+          // Return the board file id so the caller can run the same selection
+          // and text-edit activation path used by regular screen primitives.
           return {
-            frameId: "__board__",
+            frameId: boardFileId ?? "__board__",
             nodeId:
               (typeof persisted === "string"
                 ? persisted
@@ -2836,6 +2857,7 @@ export function MultiScreenCanvas({
       };
     },
     [
+      boardFileId,
       getScreenMetadata,
       getTargetFrameForDraft,
       metadataById,
@@ -2845,7 +2867,11 @@ export function MultiScreenCanvas({
   );
 
   const commitDraftPrimitive = useCallback(
-    (nextDraft: DraftPrimitive, preferredFrameId?: string) => {
+    (
+      nextDraft: DraftPrimitive,
+      preferredFrameId?: string,
+      options?: { nextTool?: "move" | "pen" },
+    ) => {
       const persisted = persistDraftPrimitive(nextDraft, preferredFrameId);
       if (persisted) {
         updateDraftPrimitives((current) =>
@@ -2853,9 +2879,9 @@ export function MultiScreenCanvas({
         );
         updateSelectedDraftIds(() => []);
         updateSelectedIds(() => []);
-        if (persisted.frameId !== "__board__") {
-          onPrimitiveCreated?.(persisted.frameId, persisted.nodeId);
-        }
+        onPrimitiveCreated?.(persisted.frameId, persisted.nodeId, {
+          nextTool: options?.nextTool,
+        });
         return;
       }
 
@@ -2937,9 +2963,10 @@ export function MultiScreenCanvas({
           stroke: toolProps?.stroke,
           strokeWidth: toolProps?.strokeWidth,
         }),
+        undefined,
+        { nextTool: "pen" },
       );
       clearActivePenPath();
-      onActiveToolChange?.("pen");
     },
     [clearActivePenPath, commitDraftPrimitive, onActiveToolChange, toolProps],
   );
@@ -3041,9 +3068,10 @@ export function MultiScreenCanvas({
         pathBefore: pathSnapshot,
         hasMoved: false,
       };
-      setPenGesturePreview(
-        appendPenNode(pathSnapshot, createCornerNode(anchor)),
-      );
+      const initialPath = appendPenNode(pathSnapshot, createCornerNode(anchor));
+      activePenPathRef.current = initialPath;
+      setActivePenPath(initialPath);
+      setPenGesturePreview(initialPath);
       setPenPointer(null);
       setPenCloseHover(false);
       setIsDragging(true);
@@ -3071,7 +3099,10 @@ export function MultiScreenCanvas({
                 : handlePoint,
             )
           : createCornerNode(state.anchor);
-        setPenGesturePreview(appendPenNode(state.pathBefore, node));
+        const nextPath = appendPenNode(state.pathBefore, node);
+        activePenPathRef.current = nextPath;
+        setActivePenPath(nextPath);
+        setPenGesturePreview(nextPath);
       };
 
       const handleMouseUp = (ev: MouseEvent) => {
@@ -3090,7 +3121,9 @@ export function MultiScreenCanvas({
                 : handlePoint,
             )
           : createCornerNode(state.anchor);
-        setActivePenPath(appendPenNode(state.pathBefore, node));
+        const nextPath = appendPenNode(state.pathBefore, node);
+        activePenPathRef.current = nextPath;
+        setActivePenPath(nextPath);
         setPenGesturePreview(null);
         setPenPointer(null);
         setPenCloseHover(false);
@@ -3101,6 +3134,7 @@ export function MultiScreenCanvas({
       const cancelPenGesture = () => {
         const state = dragState.current;
         if (state?.type === "pen-node") {
+          activePenPathRef.current = state.pathBefore;
           setActivePenPath(state.pathBefore);
         }
         setPenGesturePreview(null);
@@ -4730,6 +4764,20 @@ export function MultiScreenCanvas({
         frameGeometry[screen.id] ?? getInitialFrameGeometry(index, metadata),
     };
   });
+  const topScreenId =
+    selectedIds.find((id) =>
+      canvasFrames.some(({ screen }) => screen.id === id),
+    ) ??
+    (activeId && canvasFrames.some(({ screen }) => screen.id === activeId)
+      ? activeId
+      : canvasFrames[0]?.screen.id);
+  const renderCanvasFrames =
+    topScreenId && canvasFrames.some(({ screen }) => screen.id === topScreenId)
+      ? [
+          ...canvasFrames.filter(({ screen }) => screen.id !== topScreenId),
+          ...canvasFrames.filter(({ screen }) => screen.id === topScreenId),
+        ]
+      : canvasFrames;
   const screenContentById = useMemo(() => {
     if (!renderScreenContent) return new Map<string, ReactNode>();
     return new Map(
@@ -4910,7 +4958,7 @@ export function MultiScreenCanvas({
             );
           })()}
 
-        {canvasFrames.map(({ screen, metadata, geometry }) => {
+        {renderCanvasFrames.map(({ screen, metadata, geometry }) => {
           return (
             <Screen
               key={screen.id}
@@ -7031,13 +7079,6 @@ function draftPrimitiveToInsert(
     x: Math.round((point.x - frameGeometry.x) * scaleX),
     y: Math.round((point.y - frameGeometry.y) * scaleY),
   });
-  const localGeometry = {
-    ...draft.geometry,
-    x: Math.round((draft.geometry.x - frameGeometry.x) * scaleX),
-    y: Math.round((draft.geometry.y - frameGeometry.y) * scaleY),
-    width: Math.max(1, Math.round(draft.geometry.width * scaleX)),
-    height: Math.max(1, Math.round(draft.geometry.height * scaleY)),
-  };
   const scaledPenPath = draft.penPath
     ? scalePenPathToGeometry(draft.penPath, frameGeometry, {
         x: 0,
@@ -7046,6 +7087,15 @@ function draftPrimitiveToInsert(
         height: metadata?.height ?? frameGeometry.height,
       })
     : undefined;
+  const localGeometry = scaledPenPath
+    ? getPenPathGeometry(scaledPenPath)
+    : {
+        ...draft.geometry,
+        x: Math.round((draft.geometry.x - frameGeometry.x) * scaleX),
+        y: Math.round((draft.geometry.y - frameGeometry.y) * scaleY),
+        width: Math.max(1, Math.round(draft.geometry.width * scaleX)),
+        height: Math.max(1, Math.round(draft.geometry.height * scaleY)),
+      };
   return {
     kind: draft.kind,
     nodeId: draft.id,

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -58,6 +58,8 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     );
     chromeTransitionStyle.textContent =
       '[data-agent-native-edit-overlay="selection"]{transition:border-width 150ms ease-out}' +
+      '[data-agent-native-empty-text-editing="true"] [data-agent-native-edit-overlay="selection"]{display:none!important}' +
+      "[data-agent-native-text-editing]{outline:none!important;outline-offset:0!important}" +
       "[data-agent-native-edge-handle],[data-agent-native-edit-handle],[data-agent-native-rotate-handle]{transition:width 150ms ease-out,height 150ms ease-out,border-width 150ms ease-out,top 150ms ease-out,bottom 150ms ease-out,left 150ms ease-out,right 150ms ease-out}" +
       "[data-agent-native-spacing-line]{position:absolute;display:none;pointer-events:none;border-radius:999px}" +
       "[data-agent-native-spacing-region]{position:absolute;display:none;box-sizing:border-box;pointer-events:auto;background-size:6px 6px}" +
@@ -2402,12 +2404,24 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
   }
 
   function refreshOverlays(): void {
+    var textEditingEl =
+      activeTextEditEl ||
+      (document.querySelector(
+        "[data-agent-native-text-editing]",
+      ) as HTMLElement | null);
     if (hoveredEl && hoveredEl !== selectedEl) {
       positionOverlay(highlightOverlay, hoveredEl);
     } else {
       highlightOverlay.style.display = "none";
     }
-    if (selectedEl) {
+    if (textEditingEl) {
+      if (activeTextEditEl === textEditingEl) {
+        updateTextEditingChrome(textEditingEl, "", "");
+      }
+      if (!hasTextCharacters(textEditingEl)) {
+        hideSelectionOverlay();
+      }
+    } else if (selectedEl) {
       positionOverlay(selectionOverlay, selectedEl);
     } else {
       hideParentAutoLayoutOverlay();
@@ -2819,9 +2833,15 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     originalMinWidth: string,
     originalMinHeight: string,
   ): void {
-    target.style.outline = "";
-    target.style.outlineOffset = "";
+    target.style.outline = "none";
+    target.style.outlineStyle = "none";
+    target.style.outlineWidth = "0px";
+    target.style.outlineColor = "transparent";
+    target.style.outlineOffset = "0px";
     if (hasTextCharacters(target)) {
+      document.documentElement.removeAttribute(
+        "data-agent-native-empty-text-editing",
+      );
       target.style.minWidth = originalMinWidth;
       target.style.minHeight = originalMinHeight;
       positionOverlay(selectionOverlay, target);
@@ -2830,6 +2850,10 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     }
     target.style.minWidth = originalMinWidth || "1px";
     target.style.minHeight = originalMinHeight || "1em";
+    document.documentElement.setAttribute(
+      "data-agent-native-empty-text-editing",
+      "true",
+    );
     hideSelectionOverlay();
     setSelectionOverlayResizeChromeVisible(false);
   }
@@ -5021,24 +5045,37 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     // code-layer node rather than a runtime-only descendant (which would emit a
     // brittle body > div:nth-of-type(...) selector that never resolves).
     selectedEl = selectionTargetForHit(target) || target;
+    var programmaticTextEdit =
+      !!e &&
+      (e as unknown as { agentNativeProgrammaticTextEdit?: boolean })
+        .agentNativeProgrammaticTextEdit === true;
     var originalText = target.textContent || "";
     var originalHtml = target.innerHTML || "";
     var originalMinWidth = target.style.minWidth;
     var originalMinHeight = target.style.minHeight;
     var originalBorderColor = target.style.borderColor;
+    var originalOutline = target.style.outline;
+    var originalOutlineOffset = target.style.outlineOffset;
     var committed = false;
     activeTextEditEl = target;
     target.setAttribute("contenteditable", "true");
     target.setAttribute("data-agent-native-text-editing", "true");
     target.style.cursor = "text";
     target.style.borderColor = "transparent";
+    target.style.outline = "none";
+    target.style.outlineStyle = "none";
+    target.style.outlineWidth = "0px";
+    target.style.outlineColor = "transparent";
+    target.style.outlineOffset = "0px";
     setTextEditingPointerPassthrough(true);
     updateTextEditingChrome(target, originalMinWidth, originalMinHeight);
-    postElementSelect(target, e);
-    (window.parent as Window).postMessage(
-      { type: "element-dblclick-text", payload: getElementInfo(target) },
-      "*",
-    );
+    if (!programmaticTextEdit) {
+      postElementSelect(target, e);
+      (window.parent as Window).postMessage(
+        { type: "element-dblclick-text", payload: getElementInfo(target) },
+        "*",
+      );
+    }
     postTextEditingState(target, true);
 
     function finish(commit) {
@@ -5053,9 +5090,12 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
       document.removeEventListener("selectionchange", onSelectionChange);
       target.removeAttribute("contenteditable");
       target.removeAttribute("data-agent-native-text-editing");
+      document.documentElement.removeAttribute(
+        "data-agent-native-empty-text-editing",
+      );
       target.style.cursor = "";
-      target.style.outline = "";
-      target.style.outlineOffset = "";
+      target.style.outline = originalOutline;
+      target.style.outlineOffset = originalOutlineOffset;
       target.style.minWidth = originalMinWidth;
       target.style.minHeight = originalMinHeight;
       target.style.borderColor = originalBorderColor;
@@ -5077,6 +5117,15 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
     }
 
     function onBlur() {
+      if (programmaticTextEdit && !(target.textContent || "").trim()) {
+        window.setTimeout(function () {
+          if (committed || (target.textContent || "").trim()) return;
+          target.focus();
+          updateTextEditingChrome(target, originalMinWidth, originalMinHeight);
+          postTextEditingState(target, true);
+        }, 0);
+        return;
+      }
       finish(true);
     }
 
@@ -5302,6 +5351,7 @@ declare var __DESIGN_CANVAS_BOARD_SURFACE__: boolean;
           clientX: bteCenterX,
           clientY: bteCenterY,
           target: textTarget,
+          agentNativeProgrammaticTextEdit: true,
           preventDefault: function () {},
           stopPropagation: function () {},
           stopImmediatePropagation: function () {},

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

@@ -248,6 +248,8 @@ export function canvasPrimitiveReactStyle(
   // For text kind, clear fill-as-background since text uses `color`
   if (kind === "text") {
     style.background = "transparent";
+    style.outline = "none";
+    style.outlineOffset = 0;
   }
 
   return style;

package/corpus/templates/design/app/components/design/inspector/InspectorAiActions.tsx

@@ -25,6 +25,8 @@ export interface InspectorAiActionsProps {
   fileId?: string;
   /** Active file name (e.g. "index.html"). */
   filename?: string;
+  /** Localhost-backed source file, when the selected screen comes from a local app. */
+  routeSourceFile?: string;
   /** The design id. */
   designId?: string;
   /** When false, the controls are disabled. */
@@ -43,6 +45,7 @@ export function InspectorAiActions({
   sourceId,
   fileId,
   filename,
+  routeSourceFile,
   designId,
   canEdit,
 }: InspectorAiActionsProps) {
@@ -57,6 +60,7 @@ export function InspectorAiActions({
     sourceId,
     fileId,
     filename,
+    routeSourceFile,
     designId,
   };
   const disabled = !canEdit || !request.trim();

package/corpus/templates/design/app/hooks/use-question-flow.ts

@@ -41,7 +41,7 @@ export function useQuestionFlow(
         formattedAnswers,
         "",
         designId
-          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete the unchosen variant screens, then continue from the kept screen; otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
+          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete the unchosen variant screens, call get-design-snapshot with fileId for the kept screen, then continue from that single file in a bounded pass. Prefer edit-design; if generate-design is needed, update only the kept file compactly and stop after the first successful save. Otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
           : "Now continue the design. Honor any answer about variations: use variants only if requested; otherwise generate one polished direction.",
       ]
         .filter(Boolean)
@@ -79,7 +79,7 @@ export function useQuestionFlow(
         formattedAnswers,
         "",
         designId
-          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete the unchosen variant screens, then continue from the kept screen; otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
+          ? "Now continue the design. Honor any answer about variations: if the user asked to explore options, call present-design-variants with 2-5 concise directions using label, description, accentColor, and feature bullets; omit large content HTML when needed because the action can render compact representative screens - wait for their chat pick, delete the unchosen variant screens, call get-design-snapshot with fileId for the kept screen, then continue from that single file in a bounded pass. Prefer edit-design; if generate-design is needed, update only the kept file compactly and stop after the first successful save. Otherwise call generate-design with one complete, renderable index.html first. Do not ask another question unless a required decision is still genuinely missing."
           : "Now continue the design. Honor any answer about variations: use variants only if requested; otherwise generate one polished direction.",
       ]
         .filter(Boolean)

package/corpus/templates/design/app/hooks/useAgentEditRequest.ts

@@ -26,7 +26,7 @@ export interface AgentEditRequestArgs {
  * same pattern used by the tweaks panel (DesignEditor.tsx ~5293) and the
  * extensions panel context builder (DesignExtensionsPanel.tsx ~120-131).
  */
-function buildEditContext(args: AgentEditRequestArgs): string {
+export function buildEditContext(args: AgentEditRequestArgs): string {
   const lines: string[] = [];
 
   if (args.designId) {
@@ -77,7 +77,7 @@ function buildEditContext(args: AgentEditRequestArgs): string {
  * Builds the full pasteable prompt string (visible message + context block)
  * for use in the "Copy prompt" flow.
  */
-function buildFullPrompt(args: AgentEditRequestArgs): string {
+export function buildFullPrompt(args: AgentEditRequestArgs): string {
   const context = buildEditContext(args);
   return `${args.message}\n\n---\n${context}`;
 }

package/corpus/templates/design/app/i18n-data.ts

@@ -291,7 +291,7 @@ const enUS = {
     clickToRename: "Click to rename",
     collaborators: "Collaborators",
     share: "Share",
-    signUpToSave: "Sign up to save",
+    signUpToSave: "Sign up free to save",
     signUpToSaveDescription:
       "Sign up for a free account to save designs, screen layouts, and generate new ones.",
     signUpToShare: "Sign up to share",