@agent-native/core 0.85.6 → 0.86.0

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

@@ -1,7 +1,9 @@
 import { parseCssColor, rgbaToCss } from "@shared/color-utils";
 import { IconTrash } from "@tabler/icons-react";
 import {
+  type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent,
+  useEffect,
   useRef,
   useState,
 } from "react";
@@ -83,6 +85,44 @@ function clamp(n: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, n));
 }
 
+/**
+ * Parses a stop-position draft string into a finite 0–100 number, or `null`
+ * when the draft is invalid/empty and the field should revert instead of
+ * committing (mirrors `parseNumericDraft` in DesignColorPicker.tsx).
+ */
+export function parseStopPositionDraft(draft: string): number | null {
+  const trimmed = draft.trim();
+  if (trimmed === "") return null;
+  const parsed = Number(trimmed);
+  return Number.isFinite(parsed) ? clamp(parsed, 0, 100) : null;
+}
+
+/**
+ * Picks which remaining stop should become selected after deleting one.
+ * Returns the id of the stop whose position is closest to the removed
+ * stop's position (ties broken by whichever appears first in `stops`),
+ * rather than always jumping to the leftmost stop — deleting a stop near
+ * the right edge of the ramp should keep selection nearby, not teleport
+ * the user's focus across the gradient.
+ */
+export function nearestStopId(
+  stops: GradientStopValue[],
+  removedPosition: number | undefined,
+): string | null {
+  if (stops.length === 0) return null;
+  if (removedPosition === undefined) return sortedStops(stops)[0]?.id ?? null;
+  let best: GradientStopValue | null = null;
+  let bestDistance = Infinity;
+  for (const stop of stops) {
+    const distance = Math.abs(stop.position - removedPosition);
+    if (distance < bestDistance) {
+      best = stop;
+      bestDistance = distance;
+    }
+  }
+  return best?.id ?? null;
+}
+
 // ─── Default / parse helpers ───────────────────────────────────────────────────
 
 let stopCounter = 0;
@@ -356,9 +396,17 @@ export function GradientEditor({
   };
 
   // Bar background click → add a new stop (only if no significant drag movement).
+  // setPointerCapture pins all subsequent pointermove/pointerup events to the
+  // bar element regardless of where the cursor physically ends up — without
+  // it, a fast drag that leaves the bar's bounding box before the next
+  // pointermove fires stops delivering events to this handler (hit-testing
+  // sends them to whatever's now under the cursor instead), so the movement
+  // never gets flagged and the eventual pointerup elsewhere is misread as a
+  // stationary click that adds a spurious stop.
   const handleBarPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
     if (disabled) return;
     barClickRef.current = { moved: false, startX: event.clientX };
+    event.currentTarget.setPointerCapture(event.pointerId);
   };
 
   const handleBarPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
@@ -369,6 +417,9 @@ export function GradientEditor({
   };
 
   const handleBarClick = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
     // Only add if the pointer didn't move significantly (not a drag).
     if (!barClickRef.current || barClickRef.current.moved) {
       barClickRef.current = null;
@@ -440,10 +491,11 @@ export function GradientEditor({
 
   const removeStop = (id: string) => {
     if (value.stops.length <= 2) return;
+    const removed = value.stops.find((stop) => stop.id === id);
     const nextStops = value.stops.filter((stop) => stop.id !== id);
     onChange({ ...value, stops: nextStops });
     if (selectedStopId === id) {
-      onSelectStop(sortedStops(nextStops)[0]?.id ?? "");
+      onSelectStop(nearestStopId(nextStops, removed?.position) ?? "");
     }
   };
 
@@ -454,6 +506,40 @@ export function GradientEditor({
   const showAngle = value.kind === "linear" || value.kind === "angular";
   const selectedStop = value.stops.find((s) => s.id === selectedStopId);
 
+  // Stop-position draft: buffered so typing doesn't commit (and dirty the
+  // history) on every keystroke. Commits on blur/Enter; Escape reverts.
+  const [positionDraft, setPositionDraft] = useState<string>(() =>
+    String(Math.round(selectedStop?.position ?? 0)),
+  );
+  const positionDraftRef = useRef(positionDraft);
+  const skipPositionBlurRef = useRef(false);
+  const selectedStopPosition = selectedStop?.position;
+  useEffect(() => {
+    const next = String(Math.round(selectedStopPosition ?? 0));
+    positionDraftRef.current = next;
+    setPositionDraft(next);
+    // Resync whenever the selected stop changes or its position changes
+    // externally (drag on the bar, another control).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedStopId, selectedStopPosition]);
+
+  const commitPositionDraft = () => {
+    const parsed = parseStopPositionDraft(positionDraftRef.current);
+    if (parsed === null) {
+      const reverted = String(Math.round(selectedStop?.position ?? 0));
+      positionDraftRef.current = reverted;
+      setPositionDraft(reverted);
+      return;
+    }
+    updateStopPosition(selectedStopId, parsed);
+  };
+
+  const revertPositionDraft = () => {
+    const reverted = String(Math.round(selectedStop?.position ?? 0));
+    positionDraftRef.current = reverted;
+    setPositionDraft(reverted);
+  };
+
   return (
     <div className={cn("px-3 pt-1.5 pb-1 select-none", className)}>
       {/* ── Gradient bar + stop handles ──────────────────────────────────────── */}
@@ -558,11 +644,31 @@ export function GradientEditor({
             max={100}
             aria-label={"Stop position" /* i18n-ignore */}
             disabled={disabled}
-            value={Math.round(selectedStop?.position ?? 0)}
+            value={positionDraft}
             onChange={(event) => {
-              const next = Number(event.target.value);
-              if (Number.isFinite(next))
-                updateStopPosition(selectedStopId, clamp(next, 0, 100));
+              positionDraftRef.current = event.target.value;
+              setPositionDraft(event.target.value);
+            }}
+            onFocus={(event) => event.target.select()}
+            onKeyDown={(event: ReactKeyboardEvent<HTMLInputElement>) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                commitPositionDraft();
+                skipPositionBlurRef.current = true;
+                event.currentTarget.blur();
+              }
+              if (event.key === "Escape") {
+                revertPositionDraft();
+                skipPositionBlurRef.current = true;
+                event.currentTarget.blur();
+              }
+            }}
+            onBlur={() => {
+              if (skipPositionBlurRef.current) {
+                skipPositionBlurRef.current = false;
+                return;
+              }
+              commitPositionDraft();
             }}
             className="h-full min-w-0 flex-1 bg-transparent px-1.5 !text-[11px] tabular-nums focus-visible:outline-none"
           />

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

@@ -264,11 +264,18 @@ export function ImageFillControls({
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [urlDraft, setUrlDraft] = useState(value.url);
   const urlDraftRef = useRef(value.url);
+  // Guard re-syncing the draft from an external value change while the field
+  // is focused (mirrors ScrubInput's `focused` pattern): without this, an
+  // incoming prop update while the user is mid-typing a URL — e.g. a
+  // selection-driven re-render, or another control committing a sibling
+  // style in the same patch — clobbers their in-progress keystrokes.
+  const [focused, setFocused] = useState(false);
 
   useEffect(() => {
+    if (focused) return;
     urlDraftRef.current = value.url;
     setUrlDraft(value.url);
-  }, [value.url]);
+  }, [focused, value.url]);
 
   const commitUrl = () => {
     onChange({ ...value, url: urlDraftRef.current.trim() });
@@ -352,7 +359,11 @@ export function ImageFillControls({
             urlDraftRef.current = event.target.value;
             setUrlDraft(event.target.value);
           }}
-          onBlur={commitUrl}
+          onFocus={() => setFocused(true)}
+          onBlur={() => {
+            setFocused(false);
+            commitUrl();
+          }}
           onKeyDown={(event) => {
             if (event.key === "Enter") {
               event.preventDefault();

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

@@ -23,6 +23,8 @@ import {
   getScrubStepFromEvent,
   normalizeScrubNumber,
   parseScrubExpression,
+  startScrubDrag,
+  updateScrubDrag,
   type ScrubExpressionOptions,
 } from "./scrub-input-utils";
 
@@ -31,6 +33,20 @@ type ScrubInputIcon = (props: { className?: string }) => ReactNode;
 export interface ScrubInputChangeMeta {
   source: "commit" | "keyboard" | "scrub";
   expression?: string;
+  /**
+   * Gesture-lifecycle signal for downstream consumers that want to throttle
+   * expensive work during a drag and only do the expensive commit once.
+   *
+   * - "preview": a live, in-progress tick — e.g. one pointermove sample while
+   *   scrubbing. There can be many of these per gesture; treat each as a
+   *   cheap, throttleable preview of the value, not a point to commit at full
+   *   cost.
+   * - "commit": the gesture's authoritative, final value. Fired exactly once
+   *   per gesture: on pointerup that ends a scrub drag, and for every
+   *   `source: "commit"` (blur/Enter) or `source: "keyboard"` (arrow step)
+   *   change, since those are already discrete, complete edits.
+   */
+  phase: "preview" | "commit";
 }
 
 export interface ScrubInputProps extends ScrubExpressionOptions {
@@ -85,10 +101,12 @@ export function ScrubInput({
   const skipNextBlurCommitRef = useRef(false);
   const dragRef = useRef({
     pointerId: -1,
-    startX: 0,
-    prevX: 0,
-    hasDragged: false,
+    drag: startScrubDrag(0),
   });
+  // The last normalized value emitted as a "preview" scrub tick, so endDrag
+  // can re-emit it once as the gesture's authoritative "commit" — without
+  // recomputing from stale pointer deltas after pointer capture is released.
+  const lastScrubValueRef = useRef(value);
 
   useEffect(() => {
     if (!focused) {
@@ -109,6 +127,7 @@ export function ScrubInput({
     const formatted = formatScrubValue(normalized, options);
     draftRef.current = formatted;
     setDraft(formatted);
+    return normalized;
   };
 
   const commitDraft = () => {
@@ -127,21 +146,45 @@ export function ScrubInput({
 
     draftRef.current = parsed.normalized;
     setDraft(parsed.normalized);
-    if (parsed.value !== value) {
-      onChange(parsed.value, { source: "commit", expression: currentDraft });
+    // From a mixed selection every explicitly typed value must commit, even
+    // when it equals the placeholder `value` prop (e.g. typing "0"): the
+    // selected objects hold differing values, so "no change" is meaningless.
+    if (parsed.value !== value || mixed) {
+      onChange(parsed.value, {
+        source: "commit",
+        expression: currentDraft,
+        phase: "commit",
+      });
     }
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "ArrowUp" || event.key === "ArrowDown") {
       event.preventDefault();
+      // Mixed selection: the `value` prop is only a placeholder (typically 0),
+      // so stepping from it would snap every selected object to a value the
+      // user never chose. Require an explicit typed value first — typing then
+      // committing applies to all, which is the design-editor convention.
+      if (mixed) return;
       const direction = event.key === "ArrowUp" ? 1 : -1;
       // getScrubStepFromEvent handles shiftKey (×10) and altKey (÷10).
       // Cmd (metaKey) mirrors Shift for ×10 — editor convention on macOS.
       const baseStep = getScrubStepFromEvent(event, step);
       const cmdMultiplier = event.metaKey && !event.shiftKey ? 10 : 1;
-      setNextValue(value + direction * baseStep * cmdMultiplier, {
+      // Step from the currently typed draft, not the last-committed `value`
+      // prop — otherwise an in-progress, uncommitted edit (typed but not yet
+      // blurred/entered) is silently discarded the moment an arrow key is
+      // pressed. Parse the draft the same way commitDraft does, falling back
+      // to `value` only when the draft doesn't parse (e.g. empty/invalid).
+      const draftParsed = parseScrubExpression(
+        draftRef.current,
+        value,
+        options,
+      );
+      const base = draftParsed ? draftParsed.value : value;
+      setNextValue(base + direction * baseStep * cmdMultiplier, {
         source: "keyboard",
+        phase: "commit",
       });
       return;
     }
@@ -169,9 +212,7 @@ export function ScrubInput({
     event.preventDefault();
     dragRef.current = {
       pointerId: event.pointerId,
-      startX: event.clientX,
-      prevX: event.clientX,
-      hasDragged: false,
+      drag: startScrubDrag(event.clientX),
     };
     event.currentTarget.setPointerCapture(event.pointerId);
     setDragging(true);
@@ -179,28 +220,50 @@ export function ScrubInput({
 
   const handlePointerMove = (event: PointerEvent<HTMLLabelElement>) => {
     if (!dragging || dragRef.current.pointerId !== event.pointerId) return;
-    const incr = event.clientX - dragRef.current.prevX;
-    if (incr === 0) return;
-    dragRef.current.prevX = event.clientX;
-    dragRef.current.hasDragged = true;
+    // Mixed selection: scrubbing has no meaningful base value (the `value`
+    // prop is a placeholder), so committing drag deltas would snap every
+    // selected object to a step-from-0 value. Keep the drag inert; releasing
+    // without a committed drag focuses the input so the user can type an
+    // explicit value that then applies to all.
+    if (mixed) return;
+    // updateScrubDrag mirrors the jitter-threshold + hasDragged bookkeeping
+    // (see scrub-input-utils.ts) so it can be unit tested in isolation from
+    // real DOM pointer events.
+    const tick = updateScrubDrag(dragRef.current.drag, event.clientX);
+    dragRef.current.drag = tick.state;
+    if (tick.deltaX === null) return;
     // Use incremental deltas from the last move so that clamped/rounded values
     // committed by onChange are respected. A total-delta approach would create
     // a dead zone equal to the amount dragged past the clamp boundary.
     const next =
       value +
-      incr *
+      tick.deltaX *
         getScrubStepFromEvent(
           { altKey: event.altKey, shiftKey: event.shiftKey },
           step,
         );
-    setNextValue(next, { source: "scrub" });
+    lastScrubValueRef.current = setNextValue(next, {
+      source: "scrub",
+      phase: "preview",
+    });
   };
 
   const endDrag = (event: PointerEvent<HTMLLabelElement>) => {
     if (dragRef.current.pointerId !== event.pointerId) return;
     event.currentTarget.releasePointerCapture(event.pointerId);
-    const wasDrag = dragRef.current.hasDragged;
+    const wasDrag = dragRef.current.drag.hasDragged;
     setDragging(false);
+    // A real scrub drag emitted only "preview" ticks via handlePointerMove.
+    // Emit exactly one authoritative "commit" here with the final value so a
+    // downstream consumer can distinguish "gesture finished" from "still
+    // dragging" — without this, the last preview tick would be the only
+    // signal, and a consumer that ignores preview ticks would never commit.
+    if (wasDrag && !mixed) {
+      onChange(lastScrubValueRef.current, {
+        source: "scrub",
+        phase: "commit",
+      });
+    }
     // If the pointer was released without dragging (a plain click), focus the
     // input so the user can type immediately — mirrors the design editor's label click
     // behaviour (the event.preventDefault() in handlePointerDown blocks the

package/corpus/templates/design/app/components/design/inspector/index.ts

@@ -39,6 +39,9 @@ export {
 } from "./ExportSettingsPanel";
 export {
   DesignColorPicker,
+  endPointerGesture,
+  POINTER_GESTURE_IDLE,
+  startPointerGesture,
   type DesignColorMode,
   type DesignColorPickerLabels,
   type DesignColorPickerProps,
@@ -49,6 +52,7 @@ export {
   type DesignGradientStopPatch,
   type DesignGradientType,
   type DesignPaintType,
+  type PointerGestureState,
 } from "./DesignColorPicker";
 export {
   GradientEditor,
@@ -85,6 +89,11 @@ export {
   getScrubStepFromEvent,
   normalizeScrubNumber,
   parseScrubExpression,
+  SCRUB_DRAG_THRESHOLD_PX,
+  startScrubDrag,
+  updateScrubDrag,
   type ParsedScrubExpression,
+  type ScrubDragState,
+  type ScrubDragTick,
   type ScrubExpressionOptions,
 } from "./scrub-input-utils";

package/corpus/templates/design/app/components/design/inspector/scrub-input-utils.ts

@@ -5,6 +5,62 @@ export interface ScrubExpressionOptions {
   precision?: number;
 }
 
+// ─── Scrub-drag gesture-lifecycle state machine ───────────────────────────────
+//
+// Pure mirror of the pointerdown/pointermove/pointerup bookkeeping in
+// ScrubInput's dragRef, extracted so the "exactly one commit-phase emission
+// per gesture" contract can be unit tested without simulating real DOM
+// pointer events (this template has no jsdom/testing-library dependency).
+
+/** Cumulative pointer movement (px) required before a drag start is treated
+ * as a real scrub rather than jitter during a plain click. Mirrors
+ * ScrubInput's DRAG_THRESHOLD_PX. */
+export const SCRUB_DRAG_THRESHOLD_PX = 3;
+
+export interface ScrubDragState {
+  startX: number;
+  prevX: number;
+  hasDragged: boolean;
+}
+
+/** Begins tracking a new scrub gesture at the given starting pointer X. */
+export function startScrubDrag(startX: number): ScrubDragState {
+  return { startX, prevX: startX, hasDragged: false };
+}
+
+export interface ScrubDragTick {
+  /** The updated drag state after this pointermove sample. */
+  state: ScrubDragState;
+  /** The incremental delta (px) to apply this tick, or null when the move
+   * should be ignored (no movement, or still under the jitter threshold). */
+  deltaX: number | null;
+}
+
+/**
+ * Processes one pointermove sample against the in-progress drag state.
+ * Mirrors ScrubInput's handlePointerMove threshold/hasDragged logic exactly:
+ * a move is ignored until cumulative movement clears SCRUB_DRAG_THRESHOLD_PX,
+ * after which every subsequent move (including this one) yields an
+ * incremental delta and marks the gesture as a real drag.
+ */
+export function updateScrubDrag(
+  state: ScrubDragState,
+  clientX: number,
+): ScrubDragTick {
+  const incr = clientX - state.prevX;
+  if (incr === 0) {
+    return { state, deltaX: null };
+  }
+  const cumulativeDelta = Math.abs(clientX - state.startX);
+  if (!state.hasDragged && cumulativeDelta < SCRUB_DRAG_THRESHOLD_PX) {
+    return { state: { ...state, prevX: clientX }, deltaX: null };
+  }
+  return {
+    state: { ...state, prevX: clientX, hasDragged: true },
+    deltaX: incr,
+  };
+}
+
 export interface ParsedScrubExpression {
   value: number;
   normalized: string;
@@ -17,6 +73,11 @@ type Token =
   | { type: "operator"; value: MathOperator };
 
 const NUMBER_CHAR_PATTERN = /[0-9.]/;
+// Comma is only treated as a digit character while scanning a number token
+// (see tokenizeExpression) so a locale-style decimal comma ("12,5") parses as
+// 12.5, without swallowing the "," that a caller might use to separate
+// distinct expressions elsewhere.
+const NUMBER_OR_COMMA_CHAR_PATTERN = /[0-9.,]/;
 
 export function parseScrubExpression(
   input: string,
@@ -157,8 +218,12 @@ function tokenizeExpression(expression: string): Token[] {
     if (NUMBER_CHAR_PATTERN.test(char) || signedNumber) {
       const start = index;
       index += 1;
-      while (NUMBER_CHAR_PATTERN.test(expression[index] ?? "")) index += 1;
-      const value = Number(expression.slice(start, index));
+      // Allow a single comma decimal separator within this number token
+      // ("12,5" → 12.5), matching common European locale input. A second
+      // comma/period is left for the caller's Number() parse to reject.
+      while (NUMBER_OR_COMMA_CHAR_PATTERN.test(expression[index] ?? ""))
+        index += 1;
+      const value = Number(expression.slice(start, index).replace(",", "."));
       if (!Number.isFinite(value)) return [];
       tokens.push({ type: "number", value });
       previousWasOperator = false;

package/corpus/templates/design/app/components/design/types.ts

@@ -18,6 +18,22 @@ export interface ElementInfo {
   selector?: string;
   classes: string[];
   computedStyles: Record<string, string>;
+  /**
+   * Raw authored `el.style` values (not computed) for a bounded set of
+   * layout-relevant properties: position, left, right, top, bottom, width,
+   * height, transform, whiteSpace. Populated on SELECTION payloads only
+   * (not hover). Optional because older/hover payloads omit it — callers
+   * must fall back to computedStyles-based inference when absent.
+   */
+  inlineStyles?: Record<string, string>;
+  /**
+   * Value of the element's `data-an-primitive` attribute (e.g. "text",
+   * "rectangle", "frame", "ellipse") when present. Canvas-drawn primitives —
+   * including T-tool text, which is a plain `div` — carry this marker so the
+   * inspector can identify them without relying on tagName alone. Optional
+   * because older payloads and non-primitive/source-backed elements omit it.
+   */
+  primitiveKind?: string;
   portableStyleSnapshot?: PortableStyleSnapshot;
   boundingRect: { x: number; y: number; width: number; height: number };
   textContent?: string;

package/corpus/templates/design/app/components/editor/PromptDialog.tsx

@@ -9,6 +9,7 @@ import {
   type EmbeddedAppRef,
 } from "@agent-native/core/embedding/react";
 import {
+  IconApps,
   IconPalette,
   IconPhoto,
   IconPlus,
@@ -288,6 +289,8 @@ function AssetsPickerSkeleton() {
   );
 }
 
+export type PromptCreationMode = "design" | "app";
+
 interface PromptPopoverProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -308,6 +311,14 @@ interface PromptPopoverProps {
   selectedDesignSystemId?: string | null;
   onDesignSystemChange?: (id: string | null) => void;
   onCreateDesignSystem?: () => void;
+  /**
+   * "Design" (inline prototype, default) vs "Full app" (Builder Fusion cloud
+   * container). Omit both this and `onCreationModeChange` to hide the mode
+   * selector entirely — used when full-app building is flag-disabled, so the
+   * popover renders pixel-identical to the design-only version.
+   */
+  creationMode?: PromptCreationMode;
+  onCreationModeChange?: (mode: PromptCreationMode) => void;
 }
 
 export interface PromptDesignSystemOption {
@@ -344,6 +355,8 @@ export default function PromptPopover({
   selectedDesignSystemId,
   onDesignSystemChange,
   onCreateDesignSystem,
+  creationMode,
+  onCreationModeChange,
 }: PromptPopoverProps) {
   const t = useT();
   const [uploading, setUploading] = useState(false);
@@ -533,10 +546,17 @@ export default function PromptPopover({
         data-agent-native-prompt-popover
         className="z-[200] w-[min(420px,calc(100vw-24px))] rounded-xl border-border p-0 shadow-2xl shadow-black/60"
       >
-        <div className="px-3.5 pt-3 pb-2">
+        <div className="flex items-center justify-between gap-2 px-3.5 pt-3 pb-2">
           <span className="text-sm font-medium text-foreground/90">
             {title}
           </span>
+          {creationMode && onCreationModeChange ? (
+            <CreationModeToggle
+              mode={creationMode}
+              onChange={onCreationModeChange}
+              disabled={loading || uploading}
+            />
+          ) : null}
         </div>
 
         <div className="px-2 pb-2">
@@ -757,3 +777,62 @@ function PromptAttachmentMenu({
     </Popover>
   );
 }
+
+/**
+ * Compact segmented "Design" / "Full app" pill selector shown in the new-design
+ * popover title row. Only rendered by the caller when full-app building is
+ * flag-enabled (see FULL_APP_BUILDING_ENABLED in shared/full-app.ts) — when
+ * absent the popover renders with no mode control at all.
+ */
+function CreationModeToggle({
+  mode,
+  onChange,
+  disabled,
+}: {
+  mode: "design" | "app";
+  onChange: (mode: "design" | "app") => void;
+  disabled?: boolean;
+}) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label={
+        "Design or full app" /* i18n-ignore compact new-design mode toggle, flag-gated */
+      }
+      className="flex shrink-0 items-center gap-0.5 rounded-full border border-border bg-muted/40 p-0.5"
+    >
+      <button
+        type="button"
+        role="radio"
+        aria-checked={mode === "design"}
+        disabled={disabled}
+        onClick={() => onChange("design")}
+        className={`flex cursor-pointer items-center gap-1 rounded-full px-2 py-1 !text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+          mode === "design"
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground/80"
+        }`}
+      >
+        <IconPalette className="h-3 w-3" />
+        {"Design" /* i18n-ignore compact new-design mode toggle, flag-gated */}
+      </button>
+      <button
+        type="button"
+        role="radio"
+        aria-checked={mode === "app"}
+        disabled={disabled}
+        onClick={() => onChange("app")}
+        className={`flex cursor-pointer items-center gap-1 rounded-full px-2 py-1 !text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+          mode === "app"
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground/80"
+        }`}
+      >
+        <IconApps className="h-3 w-3" />
+        {
+          "Full app" /* i18n-ignore compact new-design mode toggle, flag-gated */
+        }
+      </button>
+    </div>
+  );
+}

package/corpus/templates/design/app/components/visual-editor/CanvasCommentPins.tsx

@@ -340,16 +340,34 @@ export function CanvasCommentPins({
     const ro = new ResizeObserver(bump);
     ro.observe(canvas);
 
-    // Scroll listeners on the canvas's scrollable ancestor(s) and window cover
-    // both page-level scrolling and container-level panning.
-    const scrollTarget =
-      canvas.closest<HTMLElement>("[class*='overflow']") ?? window;
-    scrollTarget.addEventListener("scroll", bump, { passive: true });
+    // Scroll listeners on every scrollable ancestor and the window cover both
+    // page-level scrolling and container-level panning. Walk the ancestor
+    // chain with getComputedStyle instead of a class-name heuristic so
+    // inline-styled, nested, and multiple scroll containers are all covered.
+    const isScrollable = (value: string) =>
+      value === "auto" || value === "scroll" || value === "overlay";
+    const scrollTargets: Array<HTMLElement | Window> = [];
+    for (let el: HTMLElement | null = canvas; el; el = el.parentElement) {
+      const style = getComputedStyle(el);
+      if (
+        isScrollable(style.overflow) ||
+        isScrollable(style.overflowX) ||
+        isScrollable(style.overflowY)
+      ) {
+        scrollTargets.push(el);
+      }
+    }
+    scrollTargets.push(window);
+    for (const target of scrollTargets) {
+      target.addEventListener("scroll", bump, { passive: true });
+    }
     window.addEventListener("resize", bump, { passive: true });
 
     return () => {
       ro.disconnect();
-      scrollTarget.removeEventListener("scroll", bump);
+      for (const target of scrollTargets) {
+        target.removeEventListener("scroll", bump);
+      }
       window.removeEventListener("resize", bump);
     };
   }, [canvasEl]);