@agent-native/core 0.84.10 → 0.84.12

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

@@ -138,7 +138,7 @@ import type { StatesPanelProps } from "./StatesPanel";
 import { TweaksPanelContent } from "./TweaksPanel";
 import type { ElementInfo } from "./types";
 
-export type InspectorTab = "design" | "tweaks";
+export type InspectorTab = "design" | "tweaks" | "extensions";
 
 const MIXED_VALUE = "Mixed";
 
@@ -216,6 +216,7 @@ interface EditPanelProps {
   tweakValues?: Record<string, string | number | boolean>;
   onTweakChange?: (id: string, value: string | number | boolean) => void;
   onRequestTweaks?: (anchor: HTMLElement) => void;
+  extensionsPanel?: ReactNode;
   onStyleChange: (property: string, value: string) => void;
   onStylesChange?: (styles: Record<string, string>) => void;
   onExport?: (settings: ExportSettingsValue[]) => void;
@@ -283,6 +284,8 @@ interface EditPanelProps {
   defaultComponentName?: string;
   /** Code-inspection data for the "Inspect code" popover. */
   inspectCode?: InspectCodeData;
+  /** Optional compact AI edit controls for selected/local source elements. */
+  aiActions?: ReactNode;
 }
 
 /**
@@ -2960,10 +2963,12 @@ function InspectorTabsHeader({
   activeTab,
   onActiveTabChange,
   trailing,
+  showExtensions,
 }: {
   activeTab: InspectorTab;
   onActiveTabChange: (tab: InspectorTab) => void;
   trailing?: ReactNode;
+  showExtensions?: boolean;
 }) {
   const t = useT();
 
@@ -2986,6 +2991,14 @@ function InspectorTabsHeader({
           >
             {t("designEditor.tweaks")}
           </TabsTrigger>
+          {showExtensions ? (
+            <TabsTrigger
+              value="extensions"
+              className="h-6 rounded-md px-1.5 !text-[11px] font-semibold text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-[var(--design-editor-panel-raised-bg)] data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              {"Extensions" /* i18n-ignore design inspector tab */}
+            </TabsTrigger>
+          ) : null}
         </TabsList>
       </Tabs>
       {trailing ? <div className="shrink-0">{trailing}</div> : null}
@@ -3282,7 +3295,7 @@ function CornerRadiusControl({
         value={radius}
         onChange={commitRadius}
         min={0}
-        precision={1}
+        precision={0}
       />
       <Tooltip>
         <TooltipTrigger asChild>
@@ -3308,6 +3321,7 @@ function CornerRadiusControl({
         <>
           <AppearanceScrubField
             label={t("editPanel.labels.topLeft")}
+            ariaLabel="Top left"
             icon={IconRadiusTopLeft}
             value={corners.topLeft}
             onChange={(value) =>
@@ -3321,6 +3335,7 @@ function CornerRadiusControl({
           />
           <AppearanceScrubField
             label={t("editPanel.labels.topRight")}
+            ariaLabel="Top right"
             icon={IconRadiusTopRight}
             value={corners.topRight}
             onChange={(value) =>
@@ -3335,6 +3350,7 @@ function CornerRadiusControl({
           <span aria-hidden="true" />
           <AppearanceScrubField
             label={t("editPanel.labels.bottomLeft")}
+            ariaLabel="Bottom left"
             icon={IconRadiusBottomLeft}
             value={corners.bottomLeft}
             onChange={(value) =>
@@ -3348,6 +3364,7 @@ function CornerRadiusControl({
           />
           <AppearanceScrubField
             label={t("editPanel.labels.bottomRight")}
+            ariaLabel="Bottom right"
             icon={IconRadiusBottomRight}
             value={corners.bottomRight}
             onChange={(value) =>
@@ -3368,6 +3385,7 @@ function CornerRadiusControl({
 
 function AppearanceScrubField({
   label,
+  ariaLabel,
   icon,
   value,
   onChange,
@@ -3379,6 +3397,7 @@ function AppearanceScrubField({
   precision,
 }: {
   label: string;
+  ariaLabel?: string;
   icon: (props: { className?: string }) => ReactNode;
   value: number;
   onChange: (value: number) => void;
@@ -3392,7 +3411,7 @@ function AppearanceScrubField({
   return (
     <ScrubInput
       label={label}
-      ariaLabel={label}
+      ariaLabel={ariaLabel ?? label}
       icon={icon}
       value={value}
       onChange={onChange}
@@ -6842,6 +6861,7 @@ export function EditPanel({
   tweakValues = {},
   onTweakChange,
   onRequestTweaks,
+  extensionsPanel,
   onStyleChange,
   onStylesChange,
   onExport,
@@ -6858,6 +6878,7 @@ export function EditPanel({
   selectedElementAlreadyComponent = false,
   defaultComponentName = "Component",
   inspectCode,
+  aiActions,
 }: EditPanelProps) {
   const t = useT();
   const [createComponentOpen, setCreateComponentOpen] = useState(false);
@@ -6950,6 +6971,7 @@ export function EditPanel({
         activeTab={activeTab}
         onActiveTabChange={handleActiveTabChange}
         trailing={headerTrailing}
+        showExtensions={!!extensionsPanel}
       />
 
       {activeTab === "design" ? (
@@ -7058,6 +7080,12 @@ export function EditPanel({
               />
             )}
 
+            {aiActions ? (
+              <div className="border-b border-[var(--design-editor-control-border)] px-2 py-1.5">
+                {aiActions}
+              </div>
+            ) : null}
+
             {!inspectorElement && (
               <PageProperties
                 styles={pageStyles}
@@ -7228,6 +7256,10 @@ export function EditPanel({
             />
           </div>
         </div>
+      ) : activeTab === "extensions" && extensionsPanel ? (
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+          {extensionsPanel}
+        </div>
       ) : null}
     </div>
   );

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

@@ -117,6 +117,14 @@ export interface MotionDockProps {
   canvasIframeRef?: React.RefObject<HTMLIFrameElement | null>;
   /** Whether the parent autosave mutation is in flight. */
   applying?: boolean;
+  /** Controlled auto-keyframe state. */
+  autoKeyframe?: boolean;
+  /** Called when the auto-keyframe toggle changes. */
+  onAutoKeyframeChange?: (enabled: boolean) => void;
+  /** Controlled playhead position, normalized to [0, 1]. */
+  playhead?: number;
+  /** Called whenever the playhead moves. */
+  onPlayheadChange?: (t: number) => void;
   /**
    * The currently-selected canvas element, if any. Required to create the FIRST
    * track for a layer: the picker animates this node's
@@ -139,6 +147,10 @@ export function MotionDock({
   onDurationChange,
   canvasIframeRef,
   applying = false,
+  autoKeyframe: autoKeyframeProp,
+  onAutoKeyframeChange,
+  playhead: playheadProp,
+  onPlayheadChange,
   selectedTarget = null,
 }: MotionDockProps) {
   // Controlled / uncontrolled open state.
@@ -153,13 +165,36 @@ export function MotionDock({
   );
 
   // Playhead position: normalised [0, 1].
-  const [playhead, setPlayhead] = useState(0);
+  const [playhead, setPlayhead] = useState(playheadProp ?? 0);
   const [playing, setPlaying] = useState(false);
   const playRafRef = useRef<number | null>(null);
   const playStartRef = useRef<{ wallMs: number; startT: number } | null>(null);
-
-  // Auto-keyframe mode: clicking the canvas at a time scrubs without writing.
-  const [autoKeyframe, setAutoKeyframe] = useState(false);
+  useEffect(() => {
+    if (playheadProp === undefined) return;
+    setPlayhead(Math.max(0, Math.min(1, playheadProp)));
+  }, [playheadProp]);
+
+  // Auto-keyframe mode: inspector/style edits create keyframes at the playhead.
+  const [autoKeyframeInternal, setAutoKeyframeInternal] = useState(false);
+  const autoKeyframe = autoKeyframeProp ?? autoKeyframeInternal;
+  const setAutoKeyframe = useCallback(
+    (next: boolean | ((current: boolean) => boolean)) => {
+      const resolved =
+        typeof next === "function"
+          ? (next as (current: boolean) => boolean)(autoKeyframe)
+          : next;
+      setAutoKeyframeInternal(resolved);
+      onAutoKeyframeChange?.(resolved);
+    },
+    [autoKeyframe, onAutoKeyframeChange],
+  );
+  const setPlayheadValue = useCallback(
+    (next: number) => {
+      setPlayhead(next);
+      onPlayheadChange?.(next);
+    },
+    [onPlayheadChange],
+  );
 
   // Dock height (resizable via the top drag handle).
   const [dockHeight, setDockHeight] = useState(DEFAULT_DOCK_HEIGHT);
@@ -235,7 +270,7 @@ export function MotionDock({
       if (!playStartRef.current) return;
       const elapsed = now - playStartRef.current.wallMs;
       const t = Math.min(1, playStartRef.current.startT + elapsed / durationMs);
-      setPlayhead(t);
+      setPlayheadValue(t);
       sendPreview(t);
       if (t < 1) {
         playRafRef.current = requestAnimationFrame(tick);
@@ -244,7 +279,7 @@ export function MotionDock({
       }
     };
     playRafRef.current = requestAnimationFrame(tick);
-  }, [durationMs, playhead, sendPreview, stopPlayback]);
+  }, [durationMs, playhead, sendPreview, setPlayheadValue, stopPlayback]);
 
   useEffect(() => {
     return () => {
@@ -263,10 +298,10 @@ export function MotionDock({
       (e.target as HTMLElement).setPointerCapture(e.pointerId);
       const rect = trackAreaRef.current.getBoundingClientRect();
       const t = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-      setPlayhead(t);
+      setPlayheadValue(t);
       sendPreview(t);
     },
-    [sendPreview, stopPlayback],
+    [sendPreview, setPlayheadValue, stopPlayback],
   );
 
   const handleRulerPointerMove = useCallback(
@@ -274,10 +309,10 @@ export function MotionDock({
       if (!isDraggingPlayhead.current || !trackAreaRef.current) return;
       const rect = trackAreaRef.current.getBoundingClientRect();
       const t = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-      setPlayhead(t);
+      setPlayheadValue(t);
       sendPreview(t);
     },
-    [sendPreview],
+    [sendPreview, setPlayheadValue],
   );
 
   const handleRulerPointerUp = useCallback(() => {
@@ -493,7 +528,7 @@ export function MotionDock({
                   className="size-6 shrink-0"
                   onClick={() => {
                     stopPlayback();
-                    setPlayhead(0);
+                    setPlayheadValue(0);
                     sendPreview(0);
                   }}
                   aria-label="Reset playhead"

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();