@agent-native/core 0.92.12 → 0.94.0

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

@@ -24,7 +24,7 @@ import {
 import { propNameToDataAttribute } from "@shared/component-model";
 import {
   listInteractionStates,
-  readStateStyles,
+  readResolvedStateStyles,
   type InteractionState,
 } from "@shared/interaction-states";
 import {
@@ -186,7 +186,7 @@ import {
 } from "./edit-panel/element-classification";
 import {
   deriveLockedAspectSize,
-  elementIdentityKey,
+  interactionStateSelectionKey,
   useAspectRatioLock,
 } from "./edit-panel/element-identity";
 import {
@@ -227,6 +227,7 @@ import {
 } from "./edit-panel/inspector-controls";
 import {
   authoredStyleValue,
+  elementWithInteractionStateStyles,
   resolveInteractionStateValue,
 } from "./edit-panel/interaction-state-helpers";
 import {
@@ -383,6 +384,14 @@ export { ComponentSection };
 export { extractDocumentColorPalette, type DocumentColorSourceFile };
 export type { StyleChangeHandler, StyleChangeMeta, StylesChangeHandler };
 
+export function mergeOptimisticInteractionStateStyles(
+  persisted: Record<string, string> | undefined,
+  pending: Record<string, string> | undefined,
+): Record<string, string> | undefined {
+  if (!persisted && !pending) return undefined;
+  return { ...(persisted ?? {}), ...(pending ?? {}) };
+}
+
 export type InspectorTab = "design" | "tweaks";
 
 interface EditPanelProps {
@@ -407,6 +416,10 @@ interface EditPanelProps {
   fileId?: string;
   /** Latest active file HTML, used to compose rapid sequential source edits. */
   activeContent?: string;
+  /** Optimistic localhost state styles that are not persisted into activeContent. */
+  pendingInteractionStateStyles?: Partial<
+    Record<InteractionState, Record<string, string>>
+  >;
   /** Server revision for activeContent. */
   activeFileUpdatedAt?: string | null;
   /**
@@ -1347,6 +1360,7 @@ export const EditPanel = memo(function EditPanel({
   exporting = false,
   fileId,
   activeContent,
+  pendingInteractionStateStyles,
   activeFileUpdatedAt,
   files,
   designId,
@@ -1384,6 +1398,14 @@ export const EditPanel = memo(function EditPanel({
   // silently active (matches the export-settings reset effect below).
   const [interactionState, setInteractionState] =
     useState<ActiveInteractionState>(null);
+  // Own the Radix menu state above InteractionStatePanel's conditional
+  // element subtree. A source commit can briefly remove/recreate that subtree
+  // while the selected runtime element is reconciled; panel-local uncontrolled
+  // state interpreted that refresh as an outside close immediately after the
+  // user's click. This state survives the transient remount and is reset only
+  // when the stable selection identity genuinely changes.
+  const [interactionStateMenuOpen, setInteractionStateMenuOpen] =
+    useState(false);
 
   const effectiveSelectedElements = useMemo(
     () =>
@@ -1450,8 +1472,25 @@ export const EditPanel = memo(function EditPanel({
     !selectionAlreadyComponent,
   );
   const selectedElementKey = inspectorElement
-    ? `${selectedCount}:${elementIdentityKey(inspectorElement)}`
+    ? interactionStateSelectionKey(inspectorElement, fileId, selectedCount)
     : "none";
+  // A committed source update can make the projected inspector element
+  // disappear for one render before the iframe's refreshed element-select
+  // payload restores the exact same stable selection. Keep the state picker
+  // mounted through that gap while a non-default state or its menu is active;
+  // unmounting Radix's root synchronously reports onOpenChange(false), which
+  // otherwise closes a menu the user opened during the refresh. A genuine
+  // selection change still resets both values in the selectedElementKey
+  // effect below, so this cache cannot carry a picker to another element.
+  const lastInteractionStateSourceIdRef = useRef<string | null>(null);
+  if (selectedCount <= 1 && inspectorElement?.sourceId) {
+    lastInteractionStateSourceIdRef.current = inspectorElement.sourceId;
+  }
+  const shouldRenderInteractionStatePanel = Boolean(
+    (selectedCount <= 1 && inspectorElement?.sourceId) ||
+    ((interactionState !== null || interactionStateMenuOpen) &&
+      lastInteractionStateSourceIdRef.current),
+  );
   const selectionHasTextElement = effectiveSelectedElements.some((element) =>
     isTextElement(element),
   );
@@ -1493,6 +1532,7 @@ export const EditPanel = memo(function EditPanel({
   // "multi-selection", both of which the state selector doesn't support.
   useEffect(() => {
     setInteractionState(null);
+    setInteractionStateMenuOpen(false);
     onInteractionStateChange?.(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omits onInteractionStateChange: this only needs to fire when the SELECTION changes, not when the parent passes a new callback identity.
   }, [selectedElementKey]);
@@ -1518,8 +1558,17 @@ export const EditPanel = memo(function EditPanel({
     const nodeId = inspectorElement?.sourceId;
     if (!nodeId) return undefined;
     const states = listInteractionStates(activeContent, nodeId);
-    return states.length > 0 ? new Set(states) : undefined;
-  }, [activeContent, selectedCount, inspectorElement?.sourceId]);
+    const pendingStates = Object.entries(pendingInteractionStateStyles ?? {})
+      .filter(([, styles]) => styles && Object.keys(styles).length > 0)
+      .map(([state]) => state as InteractionState);
+    const combined = [...states, ...pendingStates];
+    return combined.length > 0 ? new Set(combined) : undefined;
+  }, [
+    activeContent,
+    pendingInteractionStateStyles,
+    selectedCount,
+    inspectorElement?.sourceId,
+  ]);
 
   // The active state's declared property/value overrides for the selected
   // element, used below to resolve each style-section field's displayed
@@ -1533,14 +1582,35 @@ export const EditPanel = memo(function EditPanel({
     }
     const nodeId = inspectorElement?.sourceId;
     if (!nodeId) return undefined;
-    return readStateStyles(activeContent, nodeId, interactionState);
+    return mergeOptimisticInteractionStateStyles(
+      readResolvedStateStyles(
+        activeContent,
+        nodeId,
+        interactionState,
+        breakpointContext?.activeWidthPx,
+      ),
+      pendingInteractionStateStyles?.[interactionState],
+    );
   }, [
     activeContent,
     interactionState,
     selectedCount,
     inspectorElement?.sourceId,
+    breakpointContext?.activeWidthPx,
+    pendingInteractionStateStyles,
   ]);
 
+  const stateResolvedInspectorElement = useMemo(
+    () =>
+      inspectorElement
+        ? elementWithInteractionStateStyles(
+            inspectorElement,
+            activeInteractionStateStyles,
+          )
+        : null,
+    [activeInteractionStateStyles, inspectorElement],
+  );
+
   // Motion keyframe diamonds (Figma Motion parity) — see `motionKeyframeState`
   // on EditPanelProps. `undefined` (feature off, or a multi-selection, which
   // has no single element to keyframe) hides every diamond below.
@@ -1788,26 +1858,21 @@ export const EditPanel = memo(function EditPanel({
               />
             )}
 
+            {shouldRenderInteractionStatePanel ? (
+              <InteractionStatePanel
+                activeState={interactionState}
+                onActiveStateChange={handleInteractionStateChange}
+                open={interactionStateMenuOpen}
+                onOpenChange={setInteractionStateMenuOpen}
+                availableStates={availableInteractionStates}
+                statesWithOverrides={interactionStatesWithOverrides}
+              />
+            ) : null}
+
             {inspectorElement && (
               <>
-                {/* Element interaction-state selector (Default / Hover /
-                    Focus / Focus-visible / Pressed / Disabled) — Webflow-
-                    style state picker for THIS element's pseudo-class
-                    styling. Distinct from the app-level Design states in
-                    StatesPanel (Loading/Empty/Error/fixtures/captures),
-                    which apply to the whole screen, not one element. Only
-                    offered for a single, source-backed selection (needs a
-                    stable node id — see shared/interaction-states.ts). */}
-                {selectedCount <= 1 && inspectorElement.sourceId && (
-                  <InteractionStatePanel
-                    activeState={interactionState}
-                    onActiveStateChange={handleInteractionStateChange}
-                    availableStates={availableInteractionStates}
-                    statesWithOverrides={interactionStatesWithOverrides}
-                  />
-                )}
                 <PositionLayoutProperties
-                  element={inspectorElement}
+                  element={stateResolvedInspectorElement ?? inspectorElement}
                   onStyleChange={onStyleChange}
                   onStylesChange={onStylesChange}
                   onAlignSelection={onAlignSelection}
@@ -1815,26 +1880,26 @@ export const EditPanel = memo(function EditPanel({
                   breakpointOverrideContext={breakpointOverrideFieldContext}
                 />
                 <LayoutContextProperties
-                  element={inspectorElement}
+                  element={stateResolvedInspectorElement ?? inspectorElement}
                   onStyleChange={onStyleChange}
                   onStylesChange={onStylesChange}
                   motionKeyframeContext={motionKeyframeFieldContext}
                   breakpointOverrideContext={breakpointOverrideFieldContext}
                 />
                 <AppearanceProperties
-                  element={inspectorElement}
+                  element={stateResolvedInspectorElement ?? inspectorElement}
                   onStyleChange={onStyleChange}
                   motionKeyframeContext={motionKeyframeFieldContext}
                   breakpointOverrideContext={breakpointOverrideFieldContext}
                 />
                 {selectionHasTextElement ? (
                   <TypographyProperties
-                    element={inspectorElement}
+                    element={stateResolvedInspectorElement ?? inspectorElement}
                     onStyleChange={onStyleChange}
                   />
                 ) : null}
                 <FillProperties
-                  element={inspectorElement}
+                  element={stateResolvedInspectorElement ?? inspectorElement}
                   onStyleChange={onStyleChange}
                   onStylesChange={onStylesChange}
                   documentColorPalette={documentColorPalette}
@@ -1843,26 +1908,26 @@ export const EditPanel = memo(function EditPanel({
                   breakpointOverrideContext={breakpointOverrideFieldContext}
                 />
                 <StrokeProperties
-                  element={inspectorElement}
+                  element={stateResolvedInspectorElement ?? inspectorElement}
                   onStyleChange={onStyleChange}
                   onStylesChange={onStylesChange}
                   motionKeyframeContext={motionKeyframeFieldContext}
                   breakpointOverrideContext={breakpointOverrideFieldContext}
                 />
                 <EffectsProperties
-                  element={inspectorElement}
+                  element={stateResolvedInspectorElement ?? inspectorElement}
                   onStyleChange={onStyleChange}
                   onStylesChange={onStylesChange}
                   glslShaderContext={glslShaderContext}
                   motionKeyframeContext={motionKeyframeFieldContext}
                 />
                 <SelectionColorsProperties
-                  element={inspectorElement}
+                  element={stateResolvedInspectorElement ?? inspectorElement}
                   onStyleChange={onStyleChange}
                 />
                 {selectionHasContainerElement ? (
                   <LayoutGuideProperties
-                    element={inspectorElement}
+                    element={stateResolvedInspectorElement ?? inspectorElement}
                     onStyleChange={onStyleChange}
                   />
                 ) : null}
@@ -1888,7 +1953,15 @@ export const EditPanel = memo(function EditPanel({
                 <ExportSettingsPanel
                   key={selectedElementKey}
                   value={exportSettings}
-                  formats={["png", "svg"]}
+                  // "pdf" was previously missing here even though the format
+                  // dropdown's type, the default format list, and
+                  // handleDownloadPdf/createSinglePageRasterPdf were already
+                  // fully implemented — Download PDF was unreachable from any
+                  // UI surface (this panel and the "More" export menu are the
+                  // only two, and the menu has no PDF item either). Users had
+                  // no way to trigger it at all, let alone hit a pagination
+                  // or clipping bug in it.
+                  formats={["png", "svg", "pdf"]}
                   exporting={exporting}
                   onChange={(patch) =>
                     setExportSettings((current) => ({ ...current, ...patch }))

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

@@ -44,7 +44,7 @@ import {
 import {
   IconCopy,
   IconDots,
-  IconMaximize,
+  IconHandClick,
   IconPlus,
 } from "@tabler/icons-react";
 import {
@@ -131,8 +131,9 @@ const DRAG_THRESHOLD = 3;
  *  live zoom) to count as "equal" for the smart-spacing guides (CV11). */
 const EQUAL_GAP_TOLERANCE_SCREEN_PX = 2;
 const FRAME_LABEL_HEIGHT = 28;
-const FRAME_HEADER_BUTTON_OUTSIDE_WIDTH = 260;
+const FRAME_HEADER_BUTTON_COMPACT_WIDTH = 260;
 const FRAME_HEADER_BUTTON_RESERVE = 116;
+const FRAME_HEADER_COMPACT_BUTTON_RESERVE = 32;
 const TRANSFORM_BADGE_OFFSET = 12;
 const TRANSFORM_BADGE_EDGE_PADDING = 8;
 const TRANSFORM_BADGE_HEIGHT = 28;
@@ -207,6 +208,7 @@ import {
   getBoardSurfaceStaticPreviewViewport,
   isLineupShrinkOnlyChange,
   OVERVIEW_FRAME_WIDTH,
+  shouldDeferLineupRecenterToCameraCommand,
   shouldRenderBoardSurfaceStaticPreview,
   shouldSuppressLineupRecenter,
   SURFACE_PADDING,
@@ -295,6 +297,7 @@ import {
   getLayerSelectableBounds,
   getOutsideFrameDraftFallback,
   getPreviewDeviceFrameGeometry,
+  getResponsiveScreenCullGeometry,
   getScreenPreviewViewport,
   getSelectableBounds,
   rectContainsPoint,
@@ -412,6 +415,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   onDeleteSelection,
   onZoomChange,
   renderScreenContent,
+  renderBreakpointContent,
   onScreenSelectionChange,
   selectAllRequest,
   clearSelectionRequest,
@@ -1289,6 +1293,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       screens: screens.map((screen) => ({
         id: screen.id,
         metadata: getResolvedMetadata(screen),
+        breakpointWidths: screen.breakpointWidths,
+        layoutGroupId: screen.layoutGroupId,
       })),
       currentGeometryById: frameGeometryRef.current,
       persistedGeometryById: geometryById,
@@ -1405,6 +1411,14 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     ) {
       return;
     }
+    if (
+      shouldDeferLineupRecenterToCameraCommand({
+        cameraCommandNonce: cameraCommand?.nonce,
+        lastHandledCameraCommandNonce: lastCameraCommandNonceRef.current,
+      })
+    ) {
+      return;
+    }
     // A duplicate (alt-drag drop or Cmd+D) placed the new screen(s)
     // deliberately: keep the camera still for exactly those screen-count
     // transitions (see shouldSuppressLineupRecenter's doc for what this must
@@ -6455,23 +6469,76 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   useEffect(() => {
     if (!cameraCommand) return;
     if (lastCameraCommandNonceRef.current === cameraCommand.nonce) return;
-    lastCameraCommandNonceRef.current = cameraCommand.nonce;
-    const rect = surfaceRef.current?.getBoundingClientRect();
-    if (!rect || rect.width <= 0 || rect.height <= 0) return;
-    const camera = getCameraForBounds(
-      cameraCommand.fitBounds,
-      { width: rect.width, height: rect.height },
-      {
-        paddingScreenPx: cameraCommand.paddingScreenPx ?? 64,
-        minZoom: MIN_ZOOM,
-        maxZoom: MAX_ZOOM,
-        fallbackZoom: zoomRef.current,
-      },
-    );
-    zoomRef.current = camera.zoom;
-    panRef.current = { x: camera.x, y: camera.y };
-    applyViewToDom();
-    scheduleViewCommit();
+
+    let cancelled = false;
+    let retryFrame: number | null = null;
+    let retryCount = 0;
+    let resizeObserver: ResizeObserver | null = null;
+    const maxMeasureRetries = 30;
+
+    const applyPendingCameraCommand = () => {
+      if (
+        cancelled ||
+        lastCameraCommandNonceRef.current === cameraCommand.nonce
+      ) {
+        return true;
+      }
+      const rect = surfaceRef.current?.getBoundingClientRect();
+      if (!rect || rect.width <= 0 || rect.height <= 0) return false;
+      const camera = getCameraForBounds(
+        cameraCommand.fitBounds,
+        { width: rect.width, height: rect.height },
+        {
+          paddingScreenPx: cameraCommand.paddingScreenPx ?? 64,
+          // Frame geometry is canvas-space, while every frame DOM node lives
+          // inside the padded world. Include that shared origin so fitting a
+          // small drawn/preset frame actually centers its painted card.
+          canvasPadding: SURFACE_PADDING,
+          minZoom: MIN_ZOOM,
+          maxZoom: MAX_ZOOM,
+          fallbackZoom: zoomRef.current,
+        },
+      );
+      zoomRef.current = camera.zoom;
+      panRef.current = { x: camera.x, y: camera.y };
+      applyViewToDom();
+      scheduleViewCommit();
+      // A nonce is acknowledged only after a measurable surface accepted the
+      // imperative camera commit. Consuming it before this point loses the
+      // command during the brief zero-size overview remount caused by active
+      // screen URL synchronization.
+      lastCameraCommandNonceRef.current = cameraCommand.nonce;
+      resizeObserver?.disconnect();
+      return true;
+    };
+
+    const scheduleMeasureRetry = () => {
+      if (cancelled || retryFrame !== null || retryCount >= maxMeasureRetries) {
+        return;
+      }
+      retryFrame = window.requestAnimationFrame(() => {
+        retryFrame = null;
+        retryCount += 1;
+        if (!applyPendingCameraCommand()) scheduleMeasureRetry();
+      });
+    };
+
+    if (!applyPendingCameraCommand()) {
+      scheduleMeasureRetry();
+      const surface = surfaceRef.current;
+      if (surface && typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(() => {
+          if (!applyPendingCameraCommand()) scheduleMeasureRetry();
+        });
+        resizeObserver.observe(surface);
+      }
+    }
+
+    return () => {
+      cancelled = true;
+      if (retryFrame !== null) window.cancelAnimationFrame(retryFrame);
+      resizeObserver?.disconnect();
+    };
   }, [cameraCommand, applyViewToDom, scheduleViewCommit]);
 
   // PERF9-WHEEL: the first flush that actually moves the camera mutes
@@ -7156,7 +7223,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     const next = computeBoundedScreenCullState({
       candidates: canvasFrames.map(({ screen, geometry }) => ({
         id: screen.id,
-        geometry,
+        geometry: getResponsiveScreenCullGeometry(screen, geometry),
         iframeCount: 1 + (screen.breakpointWidths?.length ?? 0),
       })),
       viewport,
@@ -7522,6 +7589,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
               geometry={geometry}
               locked={lockedScreenIdSet.has(screen.id)}
               screenContent={screenContentById.get(screen.id)}
+              renderBreakpointContent={renderBreakpointContent}
               cullTier={screenCullTierById.get(screen.id) ?? "visible"}
               isActive={screen.id === activeId}
               isTopScreen={screen.id === topScreenId}
@@ -8803,6 +8871,7 @@ interface ScreenProps {
   chromeScale: number;
   chromeSettling: boolean;
   screenContent?: ReactNode;
+  renderBreakpointContent?: MultiScreenCanvasProps["renderBreakpointContent"];
   /** Overview viewport culling tier (PF22) — see computeScreenCullTier.
    *  "visible": render screenContent normally. "culled": screenContent (if
    *  any) stays mounted but is hidden from paint (visibility/
@@ -8874,6 +8943,7 @@ const Screen = memo(function Screen({
   onStartRotate,
   onStartDuplicateGesture,
   screenContent,
+  renderBreakpointContent,
   cullTier,
   onAddBreakpoint,
   onActiveBreakpointChange,
@@ -8951,21 +9021,19 @@ const Screen = memo(function Screen({
   }, []);
   const frameLabelHeight = FRAME_LABEL_HEIGHT * chromeScale;
   const frameScreenWidth = geometry.width / Math.max(chromeScale, 0.001);
-  // BP-DEEP v2 item 1: the narrow-frame fallback that floats the Full-view
-  // pill OUTSIDE the frame's right edge (left-full) lands exactly where the
-  // breakpoint preview row starts, covering the first breakpoint frame's
-  // label/corner (the pill is z-40 over the row). When this screen has
-  // breakpoint frames, always keep the pill INSIDE the frame header —
-  // labelInfoMaxWidth already reserves room for the inside placement.
-  const fullViewOutsideFrame =
-    frameScreenWidth < FRAME_HEADER_BUTTON_OUTSIDE_WIDTH &&
-    !(screen.breakpointWidths && screen.breakpointWidths.length > 0);
+  // Keep frame actions inside their own frame so closely spaced screens cannot
+  // cover one another. Narrow frames collapse Interact to its familiar icon;
+  // the accessible name and native tooltip preserve the action's meaning.
+  const compactFullView = frameScreenWidth < FRAME_HEADER_BUTTON_COMPACT_WIDTH;
   const labelInfoMaxWidth = Math.max(
     64,
-    frameScreenWidth - (fullViewOutsideFrame ? 8 : FRAME_HEADER_BUTTON_RESERVE),
+    frameScreenWidth -
+      (compactFullView
+        ? FRAME_HEADER_COMPACT_BUTTON_RESERVE
+        : FRAME_HEADER_BUTTON_RESERVE),
   );
-  const fullViewMaxWidth = fullViewOutsideFrame
-    ? 120
+  const fullViewMaxWidth = compactFullView
+    ? 20
     : Math.max(84, Math.min(180, frameScreenWidth * 0.46));
 
   return (
@@ -9076,22 +9144,21 @@ const Screen = memo(function Screen({
         <button
           type="button"
           data-frame-full-view
+          data-compact={compactFullView || undefined}
           className={cn(
-            "absolute top-1/2 z-40 flex h-5 shrink-0 items-center gap-1 overflow-hidden rounded-md border border-border bg-background/95 px-1.5 text-[10px] font-medium text-foreground opacity-0 shadow-sm transition-opacity",
+            "absolute right-1 top-1/2 z-40 flex h-5 shrink-0 items-center overflow-hidden rounded-md border border-border bg-background/95 text-[10px] font-medium text-foreground opacity-0 shadow-sm transition-opacity",
+            compactFullView ? "w-5 justify-center px-0" : "gap-1 px-1.5",
             "hover:bg-accent hover:text-accent-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             fullViewVisible && "opacity-100",
-            fullViewOutsideFrame ? "left-full" : "right-1",
           )}
           style={{
             maxWidth: fullViewMaxWidth,
             transform: `translateY(-50%) scale(${chromeScale})`,
-            transformOrigin: fullViewOutsideFrame
-              ? "left center"
-              : "right center",
+            transformOrigin: "right center",
             transition: getChromeLabelTransition(chromeSettling),
           }}
-          aria-label={t("multiScreenCanvas.fullView")}
-          title={t("multiScreenCanvas.fullView")}
+          aria-label={t("designEditor.modes.interact")}
+          title={t("designEditor.modes.interact")}
           onClick={(event) => onEdit(screen.id, event)}
           onMouseDown={(event) => {
             event.preventDefault();
@@ -9100,8 +9167,10 @@ const Screen = memo(function Screen({
           onMouseEnter={() => updateDirectHover(true)}
           onMouseLeave={() => updateDirectHover(false)}
         >
-          <IconMaximize className="size-3 shrink-0" />
-          <span className="truncate">{t("multiScreenCanvas.fullView")}</span>
+          <IconHandClick className="size-3 shrink-0" />
+          <span className={cn("truncate", compactFullView && "sr-only")}>
+            {t("designEditor.modes.interact")}
+          </span>
         </button>
       </div>
       <div
@@ -9321,6 +9390,8 @@ const Screen = memo(function Screen({
           naturalAspect={metadata.height / Math.max(1, metadata.width)}
           previewUrl={previewUrl}
           srcdocWithHitTest={srcdocWithHitTest}
+          metadata={metadata}
+          renderBreakpointContent={renderBreakpointContent}
           activeBreakpointWidth={screen.activeBreakpointWidth}
           isScreenSelected={isSelected}
           penActive={penActive}
@@ -9369,6 +9440,7 @@ function areScreenPropsEqual(prev: ScreenProps, next: ScreenProps) {
   return (
     prev.screen === next.screen &&
     prev.screenContent === next.screenContent &&
+    prev.renderBreakpointContent === next.renderBreakpointContent &&
     prev.cullTier === next.cullTier &&
     sameResolvedMetadata(prev.metadata, next.metadata) &&
     sameFrameGeometry(prev.geometry, next.geometry) &&
@@ -9442,6 +9514,8 @@ function BreakpointPreviewRow({
   naturalAspect,
   previewUrl,
   srcdocWithHitTest,
+  metadata,
+  renderBreakpointContent,
   activeBreakpointWidth,
   isScreenSelected,
   penActive,
@@ -9478,6 +9552,8 @@ function BreakpointPreviewRow({
    * the active edit scope (see getActiveScreenIframeId).
    */
   srcdocWithHitTest: string;
+  metadata: ResolvedScreenMetadata;
+  renderBreakpointContent?: MultiScreenCanvasProps["renderBreakpointContent"];
   activeBreakpointWidth: number | undefined;
   /** Whether the OWNING screen (base frame) is the current selection —
    *  mirrors `Screen`'s own `isSelected`, used so a breakpoint frame's chrome
@@ -9510,12 +9586,12 @@ function BreakpointPreviewRow({
   /** Item 8b — "…" menu "Change width" for one breakpoint frame. */
   onChangeBreakpointWidth?: (widthPx: number, nextWidthPx: number) => void;
   /** Item 8b — full-view entry for one breakpoint frame (double-click or its
-   *  own full-view button), mirroring the base frame's onEdit/full-view
+   *  own Interact button), mirroring the base frame's onEdit/full-view
    *  affordance. */
   onEditBreakpoint?: (widthPx: number) => void;
   /** Gates the "…" menu's mutating items (Remove / Change width) — mirrors
    *  BreakpointBar's own canEdit. Full-view entry is never gated by this,
-   *  same as the base frame's own full-view button. */
+   *  same as the base frame's own Interact button. */
   canEdit?: boolean;
 }) {
   const t = useT();
@@ -9540,6 +9616,13 @@ function BreakpointPreviewRow({
         const { frameWidth, frameHeight, naturalHeight, scale } =
           getBreakpointFrameGeometry({ widthPx, naturalAspect, primaryScale });
         const isActive = activeBreakpointWidth === widthPx;
+        const editableContent = renderBreakpointContent?.(screen, metadata, {
+          widthPx,
+          viewportHeight: naturalHeight,
+          displayWidth: frameWidth,
+          displayHeight: frameHeight,
+          active: isActive,
+        });
         const currentOffsetX = offsetX;
         offsetX += frameWidth + BREAKPOINT_FRAME_GAP;
         // BP-DEEP item 5 — clicking a frame in the group always SELECTS it
@@ -9801,8 +9884,8 @@ function BreakpointPreviewRow({
                     transform: `scale(${chromeScale})`,
                     transformOrigin: "right center",
                   }}
-                  aria-label={t("multiScreenCanvas.fullView")}
-                  title={t("multiScreenCanvas.fullView")}
+                  aria-label={t("designEditor.modes.interact")}
+                  title={t("designEditor.modes.interact")}
                   onClick={(e) => {
                     e.stopPropagation();
                     activateThisFrame(e);
@@ -9813,7 +9896,7 @@ function BreakpointPreviewRow({
                     e.stopPropagation();
                   }}
                 >
-                  <IconMaximize className="size-3" />
+                  <IconHandClick className="size-3" />
                 </button>
               ) : null}
               <span
@@ -9835,6 +9918,8 @@ function BreakpointPreviewRow({
                       {breakpointLabel(widthPx)}
                     </span>
                   </div>
+                ) : editableContent ? (
+                  editableContent
                 ) : (
                   <iframe
                     // Distinct id per breakpoint sub-frame — the primary iframe

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

@@ -73,6 +73,12 @@ export function TweaksPanelContent({
           )}
         </div>
       )}
+      <p
+        data-tweaks-help
+        className="mt-2 border-t border-border/60 pt-2 !text-[10px] leading-relaxed text-muted-foreground/70"
+      >
+        {t("designEditor.tweaksHelp")}
+      </p>
     </div>
   );
 }