@agent-native/core 0.131.3 → 0.131.4

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

@@ -11,6 +11,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 export type ExportFormat = "png" | "jpg" | "svg" | "pdf" | "webp";
@@ -399,16 +404,29 @@ function ExportRow({
         aria-label={labels.suffix}
       />
 
-      {/* Remove row button — matches the design editor's × on each export entry */}
-      <button
-        type="button"
-        aria-label={labels.removeExport}
-        disabled={isDisabled || !canRemove}
-        className="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
-        onClick={() => onRemoveRow(row.id)}
-      >
-        <IconX className="size-3" />
-      </button>
+      {/* Remove row — only rendered once there is more than one export to
+          remove. A permanently disabled × cannot explain itself: `disabled`
+          suppresses pointer events, so it carries no tooltip either, and the
+          single-row default left an unexplained dead icon in the row. The span
+          keeps hover alive while a run is in flight and the button is disabled. */}
+      {canRemove ? (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="flex shrink-0">
+              <button
+                type="button"
+                aria-label={labels.removeExport}
+                disabled={isDisabled}
+                className="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+                onClick={() => onRemoveRow(row.id)}
+              >
+                <IconX className="size-3" />
+              </button>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="left">{labels.removeExport}</TooltipContent>
+        </Tooltip>
+      ) : null}
     </div>
   );
 }

package/corpus/templates/design/app/components/design/inspector/design-icons.tsx

@@ -109,7 +109,8 @@ export function IconPaddingVertical({ className }: IconProps) {
   );
 }
 
-// Flow horizontal: two filled boxes side-by-side inside a wide frame
+// Flow horizontal: item + arrow. Keep the arrow — two symmetric boxes read as
+// "this axis" but not "this direction", forcing a tooltip hover to disambiguate.
 export function IconFlowHorizontal({ className }: IconProps) {
   return (
     <svg
@@ -124,31 +125,24 @@ export function IconFlowHorizontal({ className }: IconProps) {
     >
       {/* Outer container — wide landscape frame */}
       <rect x="2" y="6" width="20" height="12" rx="2" strokeWidth={1.5} />
-      {/* Left item */}
+      {/* First item */}
       <rect
-        x="5"
-        y="9"
-        width="5"
-        height="6"
-        rx="1"
-        fill="currentColor"
-        stroke="none"
-      />
-      {/* Right item */}
-      <rect
-        x="14"
+        x="4.5"
         y="9"
-        width="5"
+        width="4"
         height="6"
         rx="1"
         fill="currentColor"
         stroke="none"
       />
+      {/* Direction arrow — left to right */}
+      <path d="M11 12H18.5" />
+      <path d="M16.3 9.8 18.5 12 16.3 14.2" />
     </svg>
   );
 }
 
-// Flow vertical: two filled boxes stacked inside a tall frame
+// Flow vertical: an item plus a downward arrow — see IconFlowHorizontal.
 export function IconFlowVertical({ className }: IconProps) {
   return (
     <svg
@@ -163,26 +157,19 @@ export function IconFlowVertical({ className }: IconProps) {
     >
       {/* Outer container — tall portrait frame */}
       <rect x="6" y="2" width="12" height="20" rx="2" strokeWidth={1.5} />
-      {/* Top item */}
+      {/* First item */}
       <rect
         x="9"
-        y="5"
+        y="4.5"
         width="6"
-        height="5"
-        rx="1"
-        fill="currentColor"
-        stroke="none"
-      />
-      {/* Bottom item */}
-      <rect
-        x="9"
-        y="14"
-        width="6"
-        height="5"
+        height="4"
         rx="1"
         fill="currentColor"
         stroke="none"
       />
+      {/* Direction arrow — top to bottom */}
+      <path d="M12 11V18.5" />
+      <path d="M9.8 16.3 12 18.5 14.2 16.3" />
     </svg>
   );
 }

package/corpus/templates/design/app/components/design/keyboard-shortcuts.ts

@@ -78,7 +78,8 @@ export const DESIGN_SHORTCUTS: readonly DesignShortcutDefinition[] = [
   shortcut({
     id: "frame-tool",
     category: "tools",
-    bindings: ["f"],
+    // Figma binds both to the frame tool; A is the one long-time users reach for.
+    bindings: ["f", "a"],
     labelKey: "designEditor.keyboardShortcuts.commands.frameTool",
     handler: "onFrameTool",
   }),
@@ -171,7 +172,7 @@ export const DESIGN_SHORTCUTS: readonly DesignShortcutDefinition[] = [
   shortcut({
     id: "zoom-reset",
     category: "zoom",
-    bindings: ["$mod+0"],
+    bindings: ["shift+0", "$mod+0"],
     labelKey: "designEditor.keyboardShortcuts.commands.zoomReset",
     handler: "onZoomReset",
   }),
@@ -502,7 +503,7 @@ export const DESIGN_SHORTCUTS: readonly DesignShortcutDefinition[] = [
   shortcut({
     id: "ungroup",
     category: "layout",
-    bindings: ["$mod+backspace"],
+    bindings: ["$mod+shift+g", "$mod+backspace"],
     labelKey: "designEditor.keyboardShortcuts.commands.ungroup",
     handler: "onUngroup",
   }),

package/corpus/templates/design/app/components/design/multi-screen/chrome-transitions.ts

@@ -7,10 +7,6 @@ const CHROME_OPACITY_TRANSITION = "opacity 150ms ease-out";
 const CHROME_BORDER_SETTLE_TRANSITION = `inset ${CHROME_SETTLE_MS}ms ease-out, border-width ${CHROME_SETTLE_MS}ms ease-out, border-radius ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
 const SELECTION_BOX_SETTLE_TRANSITION = `border-width ${CHROME_SETTLE_MS}ms ease-out, border-radius ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
 const CHROME_HANDLE_SETTLE_TRANSITION = `width ${CHROME_SETTLE_MS}ms ease-out, height ${CHROME_SETTLE_MS}ms ease-out, border-width ${CHROME_SETTLE_MS}ms ease-out, top ${CHROME_SETTLE_MS}ms ease-out, bottom ${CHROME_SETTLE_MS}ms ease-out, left ${CHROME_SETTLE_MS}ms ease-out, right ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
-// Frame header (name + "Interact" button) is counter-scaled via
-// transform to stay a fixed screen size; ease that scale on zoom-settle. opacity
-// is included so the button's hover-fade (transition-opacity) keeps working.
-const CHROME_LABEL_SETTLE_TRANSITION = `transform ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
 
 export function getChromeBorderTransition(chromeSettling: boolean) {
   return chromeSettling
@@ -28,8 +24,16 @@ export function getChromeHandleTransition(chromeSettling: boolean) {
     : CHROME_OPACITY_TRANSITION;
 }
 
-export function getChromeLabelTransition(chromeSettling: boolean) {
-  return chromeSettling
-    ? CHROME_LABEL_SETTLE_TRANSITION
-    : CHROME_OPACITY_TRANSITION;
+/**
+ * Frame header (name + "Interact" button). It is counter-scaled by transform to
+ * stay a fixed screen size, and that counter-scale now tracks the live zoom
+ * every gesture frame through the `--an-chrome-scale` custom property — so
+ * unlike the border/handle/selection chrome above there is no settle-time
+ * snap-back to ease, and no `chromeSettling` branch. Transitioning `transform`
+ * here would actively lag the label behind the canvas whenever a new zoom tick
+ * lands inside the settle window. Opacity is still eased so the button's
+ * hover-fade keeps working.
+ */
+export function getChromeLabelTransition() {
+  return CHROME_OPACITY_TRANSITION;
 }

package/corpus/templates/design/app/components/design/multi-screen/culling.ts

@@ -39,13 +39,30 @@ export const OVERVIEW_CULLING_ENABLED = true;
  *  recomputes. */
 export const OVERVIEW_CULLING_OVERSCAN_FACTOR = 1.5;
 
-/** Maximum number of evictable overview browsing contexts kept mounted at
- * once. One screen costs its primary preview plus every breakpoint preview.
+/** Maximum number of evictable overview SCREENS kept mounted at once.
+ *
+ * The pool is budgeted in screens rather than iframes because a screen is the
+ * unit the user perceives: a board where every screen carries breakpoint
+ * previews costs several browsing contexts per screen, and charging those
+ * against one flat iframe budget shrank the pool to a third of its intended
+ * size. Past that point every committed pan/zoom re-ranked the in-viewport set
+ * by distance and admitted a different subset, so screens were destroyed and
+ * re-created — a document reload, i.e. a visible flash — on ordinary camera
+ * movement. Generating a variant set installs a design-wide breakpoint set, so
+ * this regressed the moment variants existed.
+ *
  * Interaction-protected screens are the sole safety exception: if the user
  * explicitly selects more than this budget, preserving their live editor
  * state wins until that interaction ends, after which the pool contracts on
  * the next culling pass. */
-export const OVERVIEW_LIVE_IFRAME_BUDGET = 32;
+export const OVERVIEW_LIVE_SCREEN_BUDGET = 32;
+
+/** Hard ceiling on total mounted browsing contexts, independent of the screen
+ * budget above. This is the memory backstop the original budget existed for —
+ * a long tour of a 100+ screen board still cannot accumulate contexts without
+ * bound — set high enough that a normal breakpoint-bearing board is limited by
+ * OVERVIEW_LIVE_SCREEN_BUDGET instead of by this. */
+export const OVERVIEW_LIVE_IFRAME_CEILING = 96;
 
 export type ScreenCullTier =
   /** Full content (iframe/DesignCanvas) is mounted and rendered normally. */
@@ -127,7 +144,8 @@ export function computeBoundedScreenCullState({
   everVisibleScreenIds,
   lastVisibleEpochByScreenId,
   accessEpoch,
-  liveIframeBudget = OVERVIEW_LIVE_IFRAME_BUDGET,
+  liveScreenBudget = OVERVIEW_LIVE_SCREEN_BUDGET,
+  liveIframeBudget = OVERVIEW_LIVE_IFRAME_CEILING,
 }: {
   candidates: readonly ScreenCullCandidate[];
   viewport: OverscannedViewportBounds | null;
@@ -136,6 +154,7 @@ export function computeBoundedScreenCullState({
   everVisibleScreenIds: ReadonlySet<string>;
   lastVisibleEpochByScreenId: ReadonlyMap<string, number>;
   accessEpoch: number;
+  liveScreenBudget?: number;
   liveIframeBudget?: number;
 }): BoundedScreenCullState {
   if (!OVERVIEW_CULLING_ENABLED) {
@@ -187,19 +206,25 @@ export function computeBoundedScreenCullState({
     if (protectedScreenIds.has(candidate.id)) add(candidate);
   }
   // Protected screens can temporarily exceed the normal pool. In that case
-  // no evictable iframe is admitted until the interaction set shrinks again.
-  const effectiveBudget = Math.max(
+  // no evictable screen is admitted until the interaction set shrinks again.
+  const effectiveScreenBudget = Math.max(
+    Math.max(0, Math.floor(liveScreenBudget)),
+    nextLive.size,
+  );
+  const effectiveIframeBudget = Math.max(
     Math.max(0, Math.floor(liveIframeBudget)),
     mountedIframeCount,
   );
   const tryAddWithinBudget = (candidate: ScreenCullCandidate) => {
     if (nextLive.has(candidate.id)) return;
+    if (nextLive.size + 1 > effectiveScreenBudget) return;
     if (
-      mountedIframeCount + normalizedIframeCount(candidate) <=
-      effectiveBudget
+      mountedIframeCount + normalizedIframeCount(candidate) >
+      effectiveIframeBudget
     ) {
-      add(candidate);
+      return;
     }
+    add(candidate);
   };
 
   const visibleCandidates = candidates

package/corpus/templates/design/app/components/design/multi-screen/frame-geometry.ts

@@ -1,3 +1,9 @@
+import {
+  BREAKPOINT_FRAME_GAP,
+  getResponsiveGroupWidth,
+  visibleBreakpointWidths,
+} from "@shared/responsive-frame-layout";
+
 import { DEVICE_FRAME_VIEWPORTS, type DeviceFrameType } from "../types";
 import { SURFACE_PADDING } from "./overview-layout";
 import type { FrameGeometry, FrameGeometryById, Point } from "./types";
@@ -5,7 +11,8 @@ import type { FrameGeometry, FrameGeometryById, Point } from "./types";
 const SCREEN_WIDTH = 320;
 const SCREEN_GAP = 56;
 const FRAME_LABEL_HEIGHT = 28;
-const BREAKPOINT_FRAME_GAP = 24;
+
+export { BREAKPOINT_FRAME_GAP, visibleBreakpointWidths };
 
 export interface BoundsRect {
   left: number;
@@ -26,26 +33,6 @@ type ResponsiveLayoutScreen = {
   layoutGroupId?: string;
 };
 
-/** Drops any breakpoint whose width equals the primary frame's own width — a
- * redundant duplicate of the base — also cleaning up designs authored before
- * the default set excluded the primary width. */
-export function visibleBreakpointWidths(
-  breakpointWidths: readonly number[] | undefined,
-  primaryWidthPx: number | undefined,
-): number[] {
-  const deduped = Array.from(
-    new Set(
-      (breakpointWidths ?? []).filter(
-        (width) => Number.isFinite(width) && width > 0,
-      ),
-    ),
-  );
-  if (primaryWidthPx === undefined || !Number.isFinite(primaryWidthPx)) {
-    return deduped;
-  }
-  return deduped.filter((width) => Math.abs(width - primaryWidthPx) > 1);
-}
-
 /** Minimum height for a frame of the given width — one device viewport tall
  * before it grows to content. Keep in sync with deviceViewportHeight in
  * content-size-report.ts. */
@@ -85,12 +72,11 @@ export function getResponsiveScreenGroupSize(
       : (width * sourceHeight) / sourceWidth;
   };
   return {
-    width:
-      baseWidth +
-      breakpoints.reduce(
-        (total, width) => total + BREAKPOINT_FRAME_GAP + width * scale,
-        0,
-      ),
+    width: getResponsiveGroupWidth({
+      primaryWidth: baseWidth,
+      scale,
+      visibleWidths: breakpoints,
+    }),
     height: Math.max(
       baseHeight,
       ...breakpoints.map((width) => breakpointNaturalHeight(width) * scale),

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -225,7 +225,11 @@ export interface MultiScreenCanvasProps {
    * Called when the user clicks the + affordance on a screen's breakpoint
    * row to add the next standard breakpoint width (390 / 768 / 1280).
    */
-  onAddBreakpoint?: (screenId: string, widthPx: number) => void;
+  /** Adds a breakpoint width to the DESIGN. A design has one active breakpoint
+   *  set in v1, so this deliberately takes no screen id: every screen renders
+   *  the same widths, and a per-screen parameter here only ever promised
+   *  scoping the action cannot deliver. */
+  onAddBreakpoint?: (widthPx: number) => void;
   /**
    * Called when the user clicks a breakpoint frame header to make it the
    * active edit scope.
@@ -838,6 +842,9 @@ export type PendingWheelGesture =
   | {
       mode: "zoom";
       deltaY: number;
+      /** Trackpad pinch rather than a discrete mouse notch — the two use
+       *  different sensitivities, so accumulation must not mix them. */
+      pinch: boolean;
       cursor: Point;
       clientX: number;
       clientY: number;

package/corpus/templates/design/app/components/design/multi-screen/zoom-gesture.ts

@@ -0,0 +1,95 @@
+/**
+ * Wheel/pinch → zoom-factor conversion.
+ *
+ * The two input devices are not comparable and must not share a sensitivity.
+ * A mouse wheel emits coarse, discrete notches (one detent ≈ 100px in Chrome's
+ * pixel delta mode); a trackpad pinch emits fine, often fractional deltas at a
+ * far higher rate. Feeding both through one `exp(-deltaY * 0.01)` meant a
+ * single mouse notch multiplied zoom by e¹ ≈ 2.72× — which is what made canvas
+ * zoom feel uncontrollable next to Figma's ~1.1× per notch.
+ *
+ * The clamp applies to the resulting FACTOR, not to the accumulated delta.
+ * Clamping the delta made the step frame-rate dependent: deltas accumulate
+ * between animation frames, so a dropped frame silently doubled the distance
+ * travelled. Clamping the factor means a dropped frame costs smoothness, never
+ * distance.
+ */
+
+/** One mouse-wheel detent in `deltaMode === 0` pixels (Chrome/Safari). */
+export const MOUSE_WHEEL_NOTCH_PX = 100;
+/** Zoom multiplier for one full mouse-wheel notch, matching Figma's feel. */
+export const ZOOM_STEP_PER_NOTCH = 1.1;
+/** Multiplier exponent per pixel of trackpad pinch delta. */
+export const PINCH_ZOOM_SENSITIVITY = 0.0075;
+/** Ceiling on a single frame's zoom change, in either direction. */
+export const MAX_ZOOM_FACTOR_PER_FRAME = 1.6;
+
+/**
+ * Whether a ctrl/meta-modified wheel delta came from a trackpad pinch rather
+ * than a mouse wheel. Browsers report macOS pinch as a synthetic ctrl+wheel
+ * with small, frequently fractional pixel deltas, while a real wheel detent is
+ * a whole number near the notch size. Only meaningful for `deltaMode === 0`;
+ * line/page modes are always discrete wheels and callers must not ask.
+ */
+export function isPinchZoomDelta(deltaY: number): boolean {
+  if (!Number.isFinite(deltaY)) return false;
+  return (
+    !Number.isInteger(deltaY) || Math.abs(deltaY) < MOUSE_WHEEL_NOTCH_PX / 2
+  );
+}
+
+/** Unclamped zoom multiplier for a wheel/pinch delta. Negative delta (scroll
+ *  up / pinch open) zooms in, matching the browser's wheel convention. */
+export function zoomFactorForWheelDelta(
+  deltaY: number,
+  pinch: boolean,
+): number {
+  if (!Number.isFinite(deltaY) || deltaY === 0) return 1;
+  return pinch
+    ? Math.exp(-deltaY * PINCH_ZOOM_SENSITIVITY)
+    : Math.pow(ZOOM_STEP_PER_NOTCH, -deltaY / MOUSE_WHEEL_NOTCH_PX);
+}
+
+/** Bounds one frame's zoom change symmetrically in multiplicative space, so
+ *  zooming in and back out by the same clamped amount is a round trip. */
+export function clampZoomFactor(factor: number): number {
+  if (!Number.isFinite(factor) || factor <= 0) return 1;
+  return Math.min(
+    MAX_ZOOM_FACTOR_PER_FRAME,
+    Math.max(1 / MAX_ZOOM_FACTOR_PER_FRAME, factor),
+  );
+}
+
+/** The zoom multiplier to apply for one flushed gesture frame. */
+export function resolveZoomFactor(deltaY: number, pinch: boolean): number {
+  return clampZoomFactor(zoomFactorForWheelDelta(deltaY, pinch));
+}
+
+/** Anchor for an externally driven zoom change. Only hold the frame centre when
+ *  it is on screen: a frame taller than the viewport has its centre off-screen,
+ *  and holding an invisible point fixed pushes the visible part out of view. */
+export function resolveExternalZoomAnchor(args: {
+  frameCenter: { x: number; y: number } | null;
+  surfaceSize: { width: number; height: number };
+}): { x: number; y: number } {
+  const { frameCenter, surfaceSize } = args;
+  const viewportCenter = {
+    x: surfaceSize.width / 2,
+    y: surfaceSize.height / 2,
+  };
+  if (!frameCenter) return viewportCenter;
+  if (
+    !Number.isFinite(frameCenter.x) ||
+    !Number.isFinite(frameCenter.y) ||
+    surfaceSize.width <= 0 ||
+    surfaceSize.height <= 0
+  ) {
+    return viewportCenter;
+  }
+  const onScreen =
+    frameCenter.x >= 0 &&
+    frameCenter.x <= surfaceSize.width &&
+    frameCenter.y >= 0 &&
+    frameCenter.y <= surfaceSize.height;
+  return onScreen ? frameCenter : viewportCenter;
+}