@agent-native/core 0.176.1 → 0.176.2-nightly-20260831185956

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

@@ -21,6 +21,8 @@ import {
   getNudgeDelta,
   getPanForZoomToCursor,
   getResizeCursorForHandle,
+  quantizeCanvasPoint,
+  WHOLE_PIXEL_SNAP_STEP,
   resizeFrameGroupFromDelta,
   resizeFrameGroupToBounds,
   resizeRotatedFrameFromDeltaWithSnap,
@@ -29,6 +31,7 @@ import {
   screenToCanvasPoint,
   type ArrowNudgeKey,
 } from "@shared/canvas-math";
+import { resolveLayoutGridSnapStep } from "@shared/layout-grid";
 import {
   appendPenNode,
   clonePenPath,
@@ -197,6 +200,14 @@ const MAX_WHEEL_PAN_DELTA = 240;
  *  element every gesture frame by applyViewToDom. React supplies the same
  *  number as the var's fallback, so first paint and SSR are unaffected. */
 const CHROME_SCALE_CSS_VAR = "--an-chrome-scale";
+
+/** A grid line lives inside the scaled world layer, so it needs the chrome
+ *  counter-scale to stay hairline instead of fattening as you zoom in. */
+const LAYOUT_GRID_LINE_CSS = `calc(1px * var(${CHROME_SCALE_CSS_VAR}, 1))`;
+
+/** Below this on-screen spacing the lines read as a tint, not a grid. Our own
+ *  call: Figma zoom-gates only its pixel grid and always draws layout guides. */
+const MIN_LAYOUT_GRID_SCREEN_PX = 10;
 const PIXEL_GRID_ZOOM = 800;
 
 function hasScreenChildLayers(content: string): boolean {
@@ -501,6 +512,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   frameToolDraws = "frame",
   onDeleteSelection,
   onNudgeSelection,
+  nudgeAmounts,
+  layoutGrids,
   onZoomChange,
   renderScreenContent,
   renderBreakpointContent,
@@ -580,6 +593,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   const onGeometryChangeRef = useRef(onGeometryChange);
   const onGeometryCommitRef = useRef(onGeometryCommit);
   const onNudgeSelectionRef = useRef(onNudgeSelection);
+  const nudgeAmountsRef = useRef(nudgeAmounts);
+  const layoutGridsRef = useRef(layoutGrids);
   const screensRef = useRef(screens);
   const [draftPrimitives, setDraftPrimitives] = useState<DraftPrimitive[]>([]);
   const draftPrimitivesRef = useRef(draftPrimitives);
@@ -1177,6 +1192,44 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     [getScreenMetadata, metadataById, previewDeviceFrame],
   );
 
+  /** Every board<->content conversion must resolve the viewport here. A second
+   *  derivation drew cross-screen drop guides at 4x the hit-test geometry; the
+   *  live iframe size beats `resolveScreenMetadata`'s defaulted fallback. */
+  const getFrameViewportSize = useCallback(
+    (screen: ScreenFile): { width: number; height: number } => {
+      const iframe = findCanvasIframeForScreen(
+        surfaceRef.current,
+        getActiveScreenIframeId(screen),
+        boardFileId,
+      );
+      const metadata = getResolvedMetadata(screen);
+      return {
+        width: iframe?.clientWidth || metadata.width,
+        height: iframe?.clientHeight || metadata.height,
+      };
+    },
+    [boardFileId, getResolvedMetadata],
+  );
+
+  /** Board-space step for a gesture inside `frameId`. Scaled because a 1280px
+   *  screen shown as a 320px card renders at 0.25, where snapping 8 board px
+   *  would commit a 32px content offset. */
+  const resolveBoardSnapStepForFrame = useCallback(
+    (frameId: string | null | undefined): number => {
+      const grids = layoutGridsRef.current;
+      if (!grids || !frameId) return WHOLE_PIXEL_SNAP_STEP;
+      const contentStep = resolveLayoutGridSnapStep(grids, frameId);
+      if (contentStep <= WHOLE_PIXEL_SNAP_STEP) return WHOLE_PIXEL_SNAP_STEP;
+      const screen = screensRef.current.find((item) => item.id === frameId);
+      const geometry = frameGeometryRef.current[frameId];
+      if (!screen || !geometry?.width) return contentStep;
+      const viewport = getFrameViewportSize(screen);
+      const boardPerContentPx = geometry.width / Math.max(1, viewport.width);
+      return contentStep * boardPerContentPx;
+    },
+    [getFrameViewportSize],
+  );
+
   // Per-screen entry-object reuse for canvasFrames (PF21) and per-screen
   // content-node cache for screenContentById (PF21). See the definitions of
   // canvasFrames/screenContentById below for the full invalidation-key
@@ -1209,6 +1262,14 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     onNudgeSelectionRef.current = onNudgeSelection;
   }, [onNudgeSelection]);
 
+  useEffect(() => {
+    nudgeAmountsRef.current = nudgeAmounts;
+  }, [nudgeAmounts]);
+
+  useEffect(() => {
+    layoutGridsRef.current = layoutGrids;
+  }, [layoutGrids]);
+
   useEffect(() => {
     onPrimitiveReparentRef.current = onPrimitiveReparent;
   }, [onPrimitiveReparent]);
@@ -1878,6 +1939,32 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     [activeId, getSelectableFrameEntries],
   );
 
+  /** Container hit-tests want "which screen is this object in", and an object
+   *  flush against a frame edge misses on its own corner. */
+  const frameGeometryCenter = useCallback(
+    (geometry: FrameGeometry | undefined): Point => ({
+      x: (geometry?.x ?? 0) + (geometry?.width ?? 0) / 2,
+      y: (geometry?.y ?? 0) + (geometry?.height ?? 0) / 2,
+    }),
+    [],
+  );
+
+  /** A screen frame is laid out by the board, which has no grid, so any screen
+   *  in the selection keeps the whole-pixel floor. */
+  const resolveSnapStepForTargets = useCallback(
+    (targetIds: readonly string[], center: Point): number => {
+      if (!layoutGridsRef.current) return WHOLE_PIXEL_SNAP_STEP;
+      const movesAFrame = targetIds.some(
+        (targetId) => frameGeometryRef.current[targetId] !== undefined,
+      );
+      if (movesAFrame) return WHOLE_PIXEL_SNAP_STEP;
+      return resolveBoardSnapStepForFrame(
+        getFrameEntryAtPoint(center)?.id ?? null,
+      );
+    },
+    [getFrameEntryAtPoint, resolveBoardSnapStepForFrame],
+  );
+
   // Mirrors getFrameEntryAtPoint above, but hit-tests draft primitives
   // instead of committed screens/frames — used by the alt-hover measurement
   // (Figma parity) so hovering an uncommitted draft while a selection exists
@@ -2067,26 +2154,15 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       crossScreenLastHitResultRef.current.clear();
     };
 
-    // Single source of truth for a target screen's "viewport" dimensions used
-    // to scale board<->iframe coordinates. MUST prefer the iframe's live
-    // clientWidth/clientHeight over resolveScreenMetadata's DEFAULTED
-    // 1280x2560 fallback (used for screens — e.g. duplicated screens — with
-    // no screenMetadata entry in designs.data). runHitTest and
-    // getTargetLocalPoint already did this correctly; requestCrossScreenDropGuide
-    // previously called getResolvedMetadata directly with no iframe fallback,
-    // so the drawn guide used different (often wrong-by-4x) geometry than the
-    // hit-test that produced it — guides rendered squashed/mispositioned for
-    // any screen missing metadata. Centralizing here keeps all three call
-    // sites in sync going forward.
+    // Routed through getFrameViewportSize so this effect, the draft-commit
+    // conversion, and grid snapping cannot disagree.
     const getTargetViewportMetadata = (
       targetScreen: (typeof screensRef.current)[number],
       targetIframe: HTMLIFrameElement | null | undefined,
-    ): { width: number; height: number } => ({
-      width:
-        targetIframe?.clientWidth || getResolvedMetadata(targetScreen).width,
-      height:
-        targetIframe?.clientHeight || getResolvedMetadata(targetScreen).height,
-    });
+    ): { width: number; height: number } =>
+      targetIframe?.clientWidth && targetIframe.clientHeight
+        ? { width: targetIframe.clientWidth, height: targetIframe.clientHeight }
+        : getFrameViewportSize(targetScreen);
 
     const runHitTest = (
       candidate: CrossScreenDragTarget,
@@ -2983,6 +3059,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     boardFrameGeometry,
     boardSurfaceRenderGeometry,
     getFrameEntryAtPoint,
+    getFrameViewportSize,
     getCanvasPoint,
     getResolvedMetadata,
     onCrossScreenElementDrop,
@@ -4755,8 +4832,16 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       e.preventDefault();
       e.stopPropagation();
 
-      const originCanvas = getCanvasPoint(e.clientX, e.clientY);
-      const originFrameId = getFrameEntryAtPoint(originCanvas)?.id;
+      // Quantized from the first sample: `clientPoint / zoom` is fractional at
+      // every zoom but 100%, and a new object's x/y come straight off these.
+      // The frame resolves from the raw point, which decides the step.
+      const rawOriginCanvas = getCanvasPoint(e.clientX, e.clientY);
+      const originFrameId = getFrameEntryAtPoint(rawOriginCanvas)?.id;
+      const creationSnapStep = resolveBoardSnapStepForFrame(originFrameId);
+      const originCanvas = quantizeCanvasPoint(
+        rawOriginCanvas,
+        creationSnapStep,
+      );
       const initialGeometry = getDraftPreviewGeometryForTool(
         tool,
         originCanvas,
@@ -4790,7 +4875,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       const handleMouseMove = (ev: MouseEvent) => {
         const state = dragState.current;
         if (!state || state.type !== "draft-create") return;
-        const nextCanvas = getCanvasPoint(ev.clientX, ev.clientY);
+        const nextCanvas = quantizeCanvasPoint(
+          getCanvasPoint(ev.clientX, ev.clientY),
+          creationSnapStep,
+        );
         if (
           !state.hasMoved &&
           Math.hypot(
@@ -4830,7 +4918,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           return;
         }
 
-        const endCanvas = getCanvasPoint(ev.clientX, ev.clientY);
+        const endCanvas = quantizeCanvasPoint(
+          getCanvasPoint(ev.clientX, ev.clientY),
+          creationSnapStep,
+        );
         const canvasMoved =
           Math.hypot(
             endCanvas.x - state.originCanvas.x,
@@ -4944,6 +5035,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       installDragListeners,
       onActiveToolChange,
       onCreateScreenFrame,
+      resolveBoardSnapStepForFrame,
       toolProps,
     ],
   );
@@ -5051,7 +5143,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           thresholdScreenPx: DEFAULT_SNAP_THRESHOLD_SCREEN_PX,
           zoom: zoomRef.current,
           bypass: ev.metaKey || ev.ctrlKey,
-          pixelGrid: true,
+          snapStep: resolveSnapStepForTargets(
+            state.targetIds,
+            frameGeometryCenter(movingEntries[0]?.geometry),
+          ),
           lockedAxes: ev.shiftKey ? { x: dx === 0, y: dy === 0 } : undefined,
         });
 
@@ -5268,6 +5363,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       updatePrimitiveDropTarget,
       updateSelectedDraftIds,
       updateSelectedIds,
+      frameGeometryCenter,
+      resolveSnapStepForTargets,
     ],
   );
 
@@ -5378,6 +5475,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             thresholdScreenPx: DEFAULT_SNAP_THRESHOLD_SCREEN_PX,
             zoom: zoomRef.current,
             bypass: ev.metaKey || ev.ctrlKey,
+            snapStep: resolveSnapStepForTargets(
+              state.targetIds,
+              frameGeometryCenter(resized.bounds),
+            ),
           },
         );
         const resizedEntries = resizeFrameGroupToBounds(
@@ -5485,6 +5586,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       updateDraftPrimitivesRefOnly,
       updateSelectedDraftIds,
       updateSelectedIds,
+      frameGeometryCenter,
+      resolveSnapStepForTargets,
     ],
   );
 
@@ -5861,7 +5964,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           thresholdScreenPx: DEFAULT_SNAP_THRESHOLD_SCREEN_PX,
           zoom: zoomRef.current,
           bypass: ev.metaKey || ev.ctrlKey,
-          pixelGrid: true,
+          snapStep: resolveSnapStepForTargets(
+            state.targetIds,
+            frameGeometryCenter(movingEntries[0]?.geometry),
+          ),
           lockedAxes: ev.shiftKey ? { x: dx === 0, y: dy === 0 } : undefined,
         });
 
@@ -6068,6 +6174,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       updatePrimitiveDropTarget,
       updateSelectedDraftIds,
       updateSelectedIds,
+      frameGeometryCenter,
+      resolveSnapStepForTargets,
     ],
   );
 
@@ -6381,6 +6489,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             // K-scale (aspect-locked) resize away from its ratio — see
             // computeAspectPreservingResizeSnap in canvas-math.ts.
             preserveAspectRatio: lockAspectRatio,
+            snapStep: resolveSnapStepForTargets(
+              state.targetIds,
+              frameGeometryCenter(resized.bounds),
+            ),
           },
         );
         const resizedEntries = resizeFrameGroupToBounds(
@@ -6449,6 +6561,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       updateFrameGeometry,
       updateFrameGeometryRefOnly,
       updateSelectedIds,
+      frameGeometryCenter,
+      resolveSnapStepForTargets,
     ],
   );
 
@@ -7585,12 +7699,19 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       event.preventDefault();
       event.stopPropagation();
 
-      const nudge = getNudgeDelta(event.key, {
-        altKey: event.altKey,
-        ctrlKey: event.ctrlKey,
-        metaKey: event.metaKey,
-        shiftKey: event.shiftKey,
-      });
+      const nudge = getNudgeDelta(
+        event.key,
+        {
+          altKey: event.altKey,
+          ctrlKey: event.ctrlKey,
+          metaKey: event.metaKey,
+          shiftKey: event.shiftKey,
+        },
+        {
+          baseStep: nudgeAmountsRef.current?.small,
+          bigStep: nudgeAmountsRef.current?.big,
+        },
+      );
       const movingFrameEntries = targetIds.map((targetId) => {
         const origin = frameGeometryRef.current[targetId];
         return {
@@ -8100,6 +8221,24 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     selectedLayerSelectorGroupsByScreen,
   ]);
 
+  /** Uses the same content->board scale as the snap: lines that sit anywhere
+   *  other than where objects land are worse than no lines. 0 means no paint. */
+  const layoutGridBoardSizeById = useMemo(() => {
+    const sizes: Record<string, number> = {};
+    if (!layoutGrids) return sizes;
+    const scale = canvasZoom / 100;
+    for (const { screen, metadata, geometry } of canvasFrames) {
+      const grid = layoutGrids[screen.id];
+      if (!grid?.visible || !geometry.width) continue;
+      const viewport = getScreenPreviewViewport(metadata, geometry);
+      const boardSize =
+        grid.size * (geometry.width / Math.max(1, viewport.viewportWidth));
+      if (boardSize * scale < MIN_LAYOUT_GRID_SCREEN_PX) continue;
+      sizes[screen.id] = boardSize;
+    }
+    return sizes;
+  }, [canvasFrames, canvasZoom, layoutGrids]);
+
   // Resolve a bounded live-context allocation from the committed camera. The
   // overscan still makes imminent pan destinations live early; unlike the old
   // one-way hasBeenVisible Set, however, the LRU pool cannot grow forever.
@@ -8523,6 +8662,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           return (
             <Screen
               key={screen.id}
+              layoutGridBoardSize={layoutGridBoardSizeById[screen.id] ?? 0}
               screen={screen}
               metadata={metadata}
               geometry={geometry}
@@ -9948,9 +10088,13 @@ interface ScreenProps {
   ) => void;
   /** Item 8b — full-view entry for one breakpoint frame. */
   onEditBreakpoint?: (screenId: string, widthPx: number) => void;
+  /** Board-space cell size for this frame's layout grid, already converted
+   *  from content px. 0 means draw nothing. */
+  layoutGridBoardSize?: number;
 }
 
 const Screen = memo(function Screen({
+  layoutGridBoardSize = 0,
   screen,
   metadata,
   geometry,
@@ -10384,6 +10528,18 @@ const Screen = memo(function Screen({
               />
             ))
           )}
+          {layoutGridBoardSize > 0 ? (
+            <span
+              data-layout-grid={screen.id}
+              data-layout-grid-size={layoutGridBoardSize}
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 z-10"
+              style={{
+                backgroundImage: `linear-gradient(to right, var(--design-editor-layout-grid-color) ${LAYOUT_GRID_LINE_CSS}, transparent ${LAYOUT_GRID_LINE_CSS}), linear-gradient(to bottom, var(--design-editor-layout-grid-color) ${LAYOUT_GRID_LINE_CSS}, transparent ${LAYOUT_GRID_LINE_CSS})`,
+                backgroundSize: `${layoutGridBoardSize}px ${layoutGridBoardSize}px`,
+              }}
+            />
+          ) : null}
           {creationToolActive ? (
             <span
               className="pointer-events-auto absolute inset-0 z-20 cursor-crosshair"

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

@@ -89,16 +89,16 @@ export function ReviewCommentsPanel({
           onValueChange={(value) => setScope(value as "screen" | "all")}
           className="w-full"
         >
-          <TabsList className="grid h-8 w-full grid-cols-2 rounded-md bg-muted p-0.5">
+          <TabsList className="grid min-h-[var(--design-control-height)] w-full grid-cols-2 rounded-md bg-muted p-0.5">
             <TabsTrigger
               value="screen"
-              className="design-sidebar-section-title h-7 px-2"
+              className="design-sidebar-section-title min-h-[var(--design-control-height)] px-2"
             >
               {t("review.thisScreen")}
             </TabsTrigger>
             <TabsTrigger
               value="all"
-              className="design-sidebar-section-title h-7 px-2"
+              className="design-sidebar-section-title min-h-[var(--design-control-height)] px-2"
             >
               {t("review.allScreens")}
             </TabsTrigger>
@@ -111,7 +111,7 @@ export function ReviewCommentsPanel({
           asChild
           variant="outline"
           size="sm"
-          className="mx-3 mt-3 h-8 shrink-0"
+          className="mx-2 mt-2 min-h-[var(--design-row-height)] shrink-0"
         >
           <a href={signInHref}>{t("review.signInToComment")}</a>
         </Button>

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

@@ -379,7 +379,7 @@ function A11ySection({
 
   return (
     <section aria-labelledby="review-a11y-heading">
-      <div className="flex h-7 items-center justify-between gap-2">
+      <div className="flex min-h-[var(--design-row-height)] items-center justify-between gap-2">
         <div className="flex items-center gap-1.5">
           <IconShieldCheck className="size-3.5 text-muted-foreground" />
           <span

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

@@ -9973,8 +9973,12 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     }
     var currentLeft = readPx(htmlEl.style.left || cs.left);
     var currentTop = readPx(htmlEl.style.top || cs.top);
-    htmlEl.style.left = currentLeft + (oldOriginX - newOriginX) + "px";
-    htmlEl.style.top = currentTop + (oldOriginY - newOriginY) + "px";
+    // Both origins come from getBoundingClientRect, so the raw difference is
+    // subpixel and would be authored as one.
+    htmlEl.style.left =
+      Math.round(currentLeft + (oldOriginX - newOriginX)) + "px";
+    htmlEl.style.top =
+      Math.round(currentTop + (oldOriginY - newOriginY)) + "px";
   }
 
   /** Convert flow members to absolute positioning at their drag release point
@@ -10083,8 +10087,10 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     }
     var localDx = (clientDx * yy - yx * clientDy) / determinant;
     var localDy = (xx * clientDy - clientDx * xy) / determinant;
-    htmlEl.style.left = baseLeft + localDx + "px";
-    htmlEl.style.top = baseTop + localDy + "px";
+    // The exact client point is worth at most a subpixel here, and paying for
+    // it in a fractional authored left/top is the wrong trade.
+    htmlEl.style.left = Math.round(baseLeft + localDx) + "px";
+    htmlEl.style.top = Math.round(baseTop + localDy) + "px";
   }
 
   function applyRuntimeReorder(el, target) {
@@ -10270,6 +10276,15 @@ declare var __INITIAL_SOURCE_HEAD__: string;
   // base converted to content px at snap time via chromeLineScale (1/zoom) to
   // keep the snap tolerance constant on screen at any zoom.
   var SNAP_THRESHOLD_PX = 6;
+
+  /** This screen's layout grid step in content px, pushed by the host. 1 means
+   *  no grid, which is the whole-pixel floor every gesture already lands on. */
+  var layoutGridStep = 1;
+
+  function quantizeToLayoutGrid(value: number): number {
+    if (!(layoutGridStep > 1)) return Math.round(value);
+    return Math.round(value / layoutGridStep) * layoutGridStep;
+  }
   var SNAP_CANDIDATE_CAP = 200;
 
   // Accepts either a real DOMRect (getBoundingClientRect()) or a plain
@@ -12285,8 +12300,10 @@ declare var __INITIAL_SOURCE_HEAD__: string;
       var appliedDx = nextLeft - originLeft;
       var appliedDy = nextTop - originTop;
       memberStates.forEach(function (state) {
-        state.el.style.left = Math.round(state.originLeft + appliedDx) + "px";
-        state.el.style.top = Math.round(state.originTop + appliedDy) + "px";
+        state.el.style.left =
+          quantizeToLayoutGrid(state.originLeft + appliedDx) + "px";
+        state.el.style.top =
+          quantizeToLayoutGrid(state.originTop + appliedDy) + "px";
       });
       if (!duplicatedForDrag && !isGroupDrag) {
         scheduleCrossScreenDragMove(ev);
@@ -12841,15 +12858,17 @@ declare var __INITIAL_SOURCE_HEAD__: string;
       var rect = nextRect(ev);
       if (rect.touchesWidth) widthTouched = true;
       if (rect.touchesHeight) heightTouched = true;
-      resizeEl.style.left = Math.round(rect.left) + "px";
-      resizeEl.style.top = Math.round(rect.top) + "px";
+      resizeEl.style.left = quantizeToLayoutGrid(rect.left) + "px";
+      resizeEl.style.top = quantizeToLayoutGrid(rect.top) + "px";
       // Only write width/height for an axis this gesture actually touched —
       // writing the untouched axis every tick (even to its own unchanged
       // origin value) would silently convert e.g. `width: 100%` to a px
       // value on a pure vertical drag, which is exactly the "shrank instead
       // of preserved" class of bug this fixes.
-      if (widthTouched) resizeEl.style.width = Math.round(rect.width) + "px";
-      if (heightTouched) resizeEl.style.height = Math.round(rect.height) + "px";
+      if (widthTouched)
+        resizeEl.style.width = quantizeToLayoutGrid(rect.width) + "px";
+      if (heightTouched)
+        resizeEl.style.height = quantizeToLayoutGrid(rect.height) + "px";
       if (scaleToolEnabled) {
         // Uniform scale factor: scaleToolEnabled already forces the
         // aspect-ratio lock above (nextRect), so width/origin.width and
@@ -14844,6 +14863,12 @@ declare var __INITIAL_SOURCE_HEAD__: string;
     // set-read-only: toggle the bridge's readOnly state in-place without a reload.
     // When readOnly becomes true the shield/selection/drag/edit entry points are
     // gated so the surface is safe for background/inactive display use.
+    if (e.data.type === "set-layout-grid-step") {
+      var nextStep = Number(e.data.step);
+      layoutGridStep =
+        Number.isFinite(nextStep) && nextStep >= 1 ? nextStep : 1;
+      return;
+    }
     if (e.data.type === "set-read-only") {
       var nextReadOnly = !!e.data.readOnly;
       if (readOnly === nextReadOnly) return;

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

@@ -13,13 +13,13 @@
  *   drawn with no explicit color should look the same (a soft Figma-like
  *   gray) regardless of which document theme it lands in, rather than
  *   silently tinting to whatever `--primary` resolves to there.
- * - Stroke (rect/ellipse): `rgb(168 168 168)` — a slightly darker plain gray,
- *   same rationale as fill above.
+ * - Stroke (rect/ellipse): none by default. Selection chrome supplies the
+ *   temporary outline while a user-chosen stroke is still preserved.
  * - Frame fill: the one default that *is* theme-adaptive —
  *   `hsl(var(--primary) / 0.05)`, a very faint tint of the editor's accent
  *   color so a layout frame's interior reads as "structural chrome" rather
  *   than a fixed gray. Its border stays a plain dashed gray, same as
- *   rect/ellipse's border.
+ *   a plain dashed gray border.
  * - Stroke width: 1px for div-based shapes.
  * - Ellipse: borderRadius "50%" in both paths — no more "oval on commit" jump.
  * - Rect: borderRadius "2px" (small, matches the previous committed value; the
@@ -72,14 +72,14 @@ export interface CanvasPrimitiveVisual {
 /** Default fill — a soft Figma-like neutral gray. */
 const DEFAULT_FILL = "rgb(218 218 218)";
 
-/** Default stroke — slightly darker so new rectangles stay visible. */
+/** Default stroke used when a caller explicitly enables a stroke. */
 const DEFAULT_STROKE = "rgb(168 168 168)";
 
 /** Stroke width in pixels for div-based shapes. */
 const DEFAULT_STROKE_WIDTH_PX = 1;
 
-/** Border shorthand shared by rect + ellipse. */
-const DEFAULT_BORDER = `${DEFAULT_STROKE_WIDTH_PX}px solid ${DEFAULT_STROKE}`;
+/** Shapes start un-stroked; selection chrome owns their temporary outline. */
+const NO_BORDER = "0 solid transparent";
 
 /** Text nodes rely on editor chrome for outlines; the element itself is bare. */
 const TEXT_BORDER = "0 solid transparent";
@@ -134,7 +134,7 @@ export function canvasPrimitiveVisual(
     case "ellipse":
       return {
         background: DEFAULT_FILL,
-        border: DEFAULT_BORDER,
+        border: NO_BORDER,
         borderRadius: "50%",
       };
     case "frame":
@@ -155,7 +155,7 @@ export function canvasPrimitiveVisual(
     default:
       return {
         background: DEFAULT_FILL,
-        border: DEFAULT_BORDER,
+        border: NO_BORDER,
         borderRadius: RECT_RADIUS,
       };
   }
@@ -236,7 +236,9 @@ export function canvasPrimitiveReactStyle(
 
   let background = v.background as string | undefined;
   let borderColor: string | undefined;
-  let borderWidth: number | string | undefined = DEFAULT_STROKE_WIDTH_PX;
+  let borderWidth: number | string | undefined = v.border.startsWith("0 ")
+    ? 0
+    : DEFAULT_STROKE_WIDTH_PX;
   let borderStyle: string | undefined = "solid";
 
   if (kind === "frame" || isText) {
@@ -260,6 +262,11 @@ export function canvasPrimitiveReactStyle(
   }
   if (overrides?.stroke) {
     borderColor = overrides.stroke;
+    if (overrides.strokeWidth === undefined) {
+      borderWidth = DEFAULT_STROKE_WIDTH_PX;
+    }
+  } else if (overrides?.strokeWidth !== undefined) {
+    borderColor = DEFAULT_STROKE;
   } else {
     // Extract from canonical border shorthand: "Npx style color"
     const borderParts = v.border.split(" ");