@agent-native/core 0.163.4 → 0.164.1

package/corpus/templates/design/app/pages/design-editor/commands/start-retry-generation.ts

@@ -0,0 +1,152 @@
+import type { AgentChatMessage } from "@agent-native/core/client/agent-chat";
+import type { PromptComposerSubmitOptions } from "@agent-native/core/client/composer";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+
+import type { UploadedFile } from "@/components/editor/PromptDialog";
+import { patchPendingGeneration } from "@/lib/pending-generation";
+import type { RetryablePrompt } from "@/pages/design-editor/command-types";
+import { MAX_GENERATION_ATTEMPTS } from "@/pages/design-editor/editor-constants";
+import {
+  designGenerationDirectives,
+  designTemplateRefinementDirectives,
+  formatUploadedFileContext,
+  imageAttachmentsFromUploadedFiles,
+  loadDesignSystemGenerationContext,
+} from "@/pages/design-editor/generation-prompt-directives";
+import type { DesignData } from "@/pages/design-editor/types";
+
+export interface StartRetryGenerationArgs {
+  agentSubmit: (
+    message: string,
+    context: string,
+    options?: Omit<AgentChatMessage, "message" | "context">,
+  ) => string;
+  canEditDesign: boolean;
+  clearAutoRetryTimer: () => void;
+  clearGenerationCompleteTimer: () => void;
+  design: DesignData | null;
+  generationModelRef: RefObject<{
+    model?: string;
+    engine?: string;
+    effort?: PromptComposerSubmitOptions["effort"];
+  } | null>;
+  id: string | undefined;
+  setGenerationChatTabId: Dispatch<SetStateAction<string | null>>;
+  setGenerationIssue: Dispatch<SetStateAction<string | null>>;
+  setHasPendingGeneration: Dispatch<SetStateAction<boolean>>;
+  setRetryablePrompt: Dispatch<
+    SetStateAction<{
+      prompt: string;
+      files: UploadedFile[];
+      model?: PromptComposerSubmitOptions["model"];
+      engine?: PromptComposerSubmitOptions["engine"];
+      effort?: PromptComposerSubmitOptions["effort"];
+      designSystemId?: string | null;
+      attempt?: number;
+      source?: string;
+      templateId?: string;
+      templateBaselineFiles?: Array<{ id: string; contentHash: string }>;
+    } | null>
+  >;
+}
+
+export async function runStartRetryGeneration(
+  {
+    agentSubmit,
+    canEditDesign,
+    clearAutoRetryTimer,
+    clearGenerationCompleteTimer,
+    design,
+    generationModelRef,
+    id,
+    setGenerationChatTabId,
+    setGenerationIssue,
+    setHasPendingGeneration,
+    setRetryablePrompt,
+  }: StartRetryGenerationArgs,
+  promptState: RetryablePrompt,
+  attempt: number,
+  mode: "manual" | "auto",
+) {
+  if (!id || !design || !canEditDesign) return;
+  clearAutoRetryTimer();
+  const fileContext = formatUploadedFileContext(promptState.files);
+  const images = imageAttachmentsFromUploadedFiles(promptState.files);
+  const designSystemContext = await loadDesignSystemGenerationContext(
+    promptState.designSystemId,
+  );
+  const retryLine =
+    mode === "auto"
+      ? `(Automatically retrying attempt ${attempt} of ${MAX_GENERATION_ATTEMPTS} — the previous attempt did not complete.)`
+      : "(Retrying — the previous attempt did not complete.)";
+  const context = [
+    promptState.templateId
+      ? `The user picked the "${promptState.source ?? "template"}" template (id: "${promptState.templateId}").`
+      : `The user has design "${id}" (title: "${design.title}") open and wants to fill it with design files.`,
+    `User request: "${promptState.prompt}"`,
+    promptState.designSystemId
+      ? `Design system id: "${promptState.designSystemId}"`
+      : "",
+    designSystemContext,
+    fileContext,
+    "",
+    retryLine,
+    ...(promptState.templateId
+      ? designTemplateRefinementDirectives(
+          id,
+          promptState.templateId,
+          promptState.designSystemId,
+        )
+      : designGenerationDirectives(id, promptState.designSystemId)),
+  ].join("\n");
+  clearGenerationCompleteTimer();
+  setGenerationIssue(null);
+  const startedAt = Date.now();
+  patchPendingGeneration(id, {
+    prompt: promptState.prompt,
+    files: promptState.files,
+    title: design.title,
+    designSystemId: promptState.designSystemId,
+    model: promptState.model,
+    engine: promptState.engine,
+    effort: promptState.effort,
+    source: promptState.source,
+    templateId: promptState.templateId,
+    templateBaselineFiles: promptState.templateBaselineFiles,
+    attempt,
+    startedAt,
+  });
+  setHasPendingGeneration(true);
+  setRetryablePrompt(null);
+  generationModelRef.current = {
+    model: promptState.model,
+    engine: promptState.engine,
+    effort: promptState.effort,
+  };
+  const runTabId = agentSubmit(
+    `Generate design for "${design.title}": ${promptState.prompt}`,
+    context,
+    {
+      model: promptState.model,
+      engine: promptState.engine,
+      effort: promptState.effort,
+      images,
+    },
+  );
+  setGenerationChatTabId(runTabId);
+  patchPendingGeneration(id, {
+    prompt: promptState.prompt,
+    files: promptState.files,
+    title: design.title,
+    designSystemId: promptState.designSystemId,
+    model: promptState.model,
+    engine: promptState.engine,
+    effort: promptState.effort,
+    source: promptState.source,
+    templateId: promptState.templateId,
+    templateBaselineFiles: promptState.templateBaselineFiles,
+    attempt,
+    runTabId,
+    startedAt,
+  });
+}

package/corpus/templates/design/app/pages/design-editor/commands/start-sidebar-resize.ts

@@ -0,0 +1,99 @@
+import type {
+  Dispatch,
+  PointerEvent as ReactPointerEvent,
+  RefObject,
+  SetStateAction,
+} from "react";
+
+import type { DesignLeftPanel } from "@/pages/design-editor/types";
+
+export interface StartSidebarResizeArgs {
+  activeLeftPanel: DesignLeftPanel;
+  leftSidebarContentRef: RefObject<HTMLDivElement | null>;
+  leftSidebarWidth: number;
+  rightSidebarContentRef: RefObject<HTMLDivElement | null>;
+  rightSidebarWidth: number;
+  setLeftSidebarWidth: Dispatch<SetStateAction<number>>;
+  setRightSidebarWidth: Dispatch<SetStateAction<number>>;
+}
+
+export function runStartSidebarResize(
+  {
+    activeLeftPanel,
+    leftSidebarContentRef,
+    leftSidebarWidth,
+    rightSidebarContentRef,
+    rightSidebarWidth,
+    setLeftSidebarWidth,
+    setRightSidebarWidth,
+  }: StartSidebarResizeArgs,
+  side: "left" | "right",
+  event: ReactPointerEvent<HTMLDivElement>,
+) {
+  event.preventDefault();
+  event.stopPropagation();
+  event.currentTarget.setPointerCapture?.(event.pointerId);
+  const startX = event.clientX;
+  const codePanelOpen = side === "left" && activeLeftPanel === "code";
+  const startWidth =
+    side === "left"
+      ? codePanelOpen
+        ? Math.max(leftSidebarWidth, 640)
+        : Math.min(leftSidebarWidth, 420)
+      : rightSidebarWidth;
+  const setWidth = side === "left" ? setLeftSidebarWidth : setRightSidebarWidth;
+  const minWidth = side === "left" ? (codePanelOpen ? 520 : 220) : 240;
+  const maxWidth = side === "left" ? (codePanelOpen ? 1100 : 420) : 390;
+  const target =
+    side === "left"
+      ? leftSidebarContentRef.current
+      : rightSidebarContentRef.current;
+  const previousTransition = target?.style.transition ?? "";
+  if (target) target.style.transition = "none";
+  let latestWidth = startWidth;
+  const previousCursor = document.body.style.cursor;
+  const previousUserSelect = document.body.style.userSelect;
+  const dragShield = document.createElement("div");
+  dragShield.setAttribute("data-design-sidebar-resize-shield", side);
+  dragShield.style.cssText =
+    "position:fixed;inset:0;z-index:2147483647;cursor:col-resize;background:transparent;pointer-events:auto;";
+  document.body.style.cursor = "col-resize";
+  document.body.style.userSelect = "none";
+  document.body.appendChild(dragShield);
+
+  const handleMove = (moveEvent: PointerEvent) => {
+    moveEvent.preventDefault();
+    const delta =
+      side === "left" ? moveEvent.clientX - startX : startX - moveEvent.clientX;
+    const next = Math.min(maxWidth, Math.max(minWidth, startWidth + delta));
+    latestWidth = next;
+    if (target) {
+      target.style.width = `${next}px`;
+    } else {
+      // No ref available (shouldn't normally happen) — fall back to the
+      // old per-move state update so resizing still works.
+      setWidth(next);
+    }
+  };
+  const cleanup = () => {
+    dragShield.removeEventListener("pointermove", handleMove);
+    dragShield.removeEventListener("pointerup", cleanup);
+    dragShield.removeEventListener("pointercancel", cleanup);
+    window.removeEventListener("pointermove", handleMove);
+    window.removeEventListener("pointerup", cleanup);
+    window.removeEventListener("pointercancel", cleanup);
+    dragShield.remove();
+    document.body.style.cursor = previousCursor;
+    document.body.style.userSelect = previousUserSelect;
+    if (target) target.style.transition = previousTransition;
+    // Commit the final width to state once, on release.
+    setWidth(latestWidth);
+  };
+
+  dragShield.addEventListener("pointermove", handleMove);
+  dragShield.addEventListener("pointerup", cleanup);
+  dragShield.addEventListener("pointercancel", cleanup);
+  window.addEventListener("pointermove", handleMove);
+  window.addEventListener("pointerup", cleanup);
+  window.addEventListener("pointercancel", cleanup);
+}

package/corpus/templates/design/app/pages/design-editor/commands/style-change.ts

@@ -0,0 +1,152 @@
+import type { InteractionState } from "@shared/interaction-states";
+import type { RefObject } from "react";
+
+import type { StyleChangeMeta } from "@/components/design/EditPanel";
+import type { ElementInfo } from "@/components/design/types";
+import type { SelectedLayerTarget } from "@/pages/design-editor/code-layer-state";
+import { shouldSkipVisualStyleCommitForPreview } from "@/pages/design-editor/editor-state";
+
+export interface StyleChangeArgs {
+  commitInteractionStateStyles: (
+    state: InteractionState,
+    styles: Record<string, string>,
+  ) => boolean;
+  commitRelativeStyleDeltaToSelectedLayers: (
+    property: string,
+    delta: number,
+  ) => boolean;
+  commitStylesToSelectedLayers: (styles: Record<string, string>) => boolean;
+  commitVisualStyles: (
+    selector: string,
+    styles: Record<string, string>,
+    options?: {
+      runtimeApplied?: boolean;
+      elementInfo?: ElementInfo;
+      originalStyles?: Record<string, string>;
+    },
+  ) => void;
+  handleClearBreakpointOverride: (
+    property: string,
+    maxWidthPx: number,
+  ) => boolean;
+  previewInteractionStateStyles: (
+    state: InteractionState,
+    styles: Record<string, string>,
+  ) => void;
+  selectedCanvasSelectorCandidates: string[];
+  selectedElement: ElementInfo | null;
+  selectedLayerTargetsRef: RefObject<SelectedLayerTarget[]>;
+  textEditingState: { active: boolean; selector?: string; hasRange?: boolean };
+}
+
+export function runStyleChange(
+  {
+    commitInteractionStateStyles,
+    commitRelativeStyleDeltaToSelectedLayers,
+    commitStylesToSelectedLayers,
+    commitVisualStyles,
+    handleClearBreakpointOverride,
+    previewInteractionStateStyles,
+    selectedCanvasSelectorCandidates,
+    selectedElement,
+    selectedLayerTargetsRef,
+    textEditingState,
+  }: StyleChangeArgs,
+  property: string,
+  value: string,
+  meta?: StyleChangeMeta,
+) {
+  if (meta?.interactionState) {
+    if (meta.phase === "preview") {
+      previewInteractionStateStyles(meta.interactionState, {
+        [property]: value,
+      });
+      return;
+    }
+    if (
+      commitInteractionStateStyles(meta.interactionState, {
+        [property]: value,
+      })
+    ) {
+      return;
+    }
+  }
+  if (meta?.breakpointReset) {
+    handleClearBreakpointOverride(
+      meta.breakpointReset.property,
+      meta.breakpointReset.maxWidthPx,
+    );
+    return;
+  }
+  const selector = selectedElement?.selector ?? "body";
+  if (
+    textEditingState.active &&
+    textEditingState.hasRange &&
+    textEditingState.selector === selector
+  ) {
+    const sendStyleChange = (window as any).__designCanvasSendStyle;
+    if (typeof sendStyleChange === "function") {
+      sendStyleChange(selector, property, value, {
+        selectorCandidates: selectedCanvasSelectorCandidates,
+        nodeId: selectedElement?.sourceId,
+      });
+      return;
+    }
+  }
+  // PF12: a mid-gesture scrub/color-drag preview tick (ScrubInput's
+  // `phase: "preview"`, DesignColorPicker's per-tick `onChange`) is cheap
+  // to show live but must NOT run the expensive source commit
+  // (projection parse + HTML patch + history entry) on every tick — only
+  // the gesture's final "commit" (or a caller that never passes meta at
+  // all, e.g. keyboard/agent edits) does that. Route preview ticks
+  // through the same cheap iframe postMessage path the text-range case
+  // above already uses, and skip commitVisualStyles entirely so there is
+  // no source write — and therefore no history entry — for any preview
+  // tick. Multi-layer-selection commits (commitStylesToSelectedLayers)
+  // have no equivalent cheap multi-element preview channel, so previews
+  // for that case conservatively fall through to the existing full-commit
+  // behavior below (unchanged from before PF12).
+  if (
+    shouldSkipVisualStyleCommitForPreview({
+      phase: meta?.phase,
+      selectedLayerCount: selectedLayerTargetsRef.current.length,
+    })
+  ) {
+    const sendStyleChange = (window as any).__designCanvasSendStyle;
+    if (typeof sendStyleChange === "function") {
+      sendStyleChange(selector, property, value, {
+        selectorCandidates: selectedCanvasSelectorCandidates,
+        nodeId: selectedElement?.sourceId,
+      });
+    }
+    // No live bridge available for this preview tick (e.g. inactive
+    // screen) — nothing cheap to do; wait for the gesture's "commit".
+    return;
+  }
+  // Mixed-value arrow-step parity (item 7): ScrubInput's own
+  // ScrubInputChangeMeta now carries `relativeDelta` (set on a mixed-
+  // selection arrow nudge), and EditPanel forwards that meta object
+  // straight through to onStyleChange — but StyleChangeMeta (this
+  // parameter's declared type) doesn't declare the field yet, so it's
+  // read defensively through a local cast rather than a direct property
+  // access. This works today (the field is present on the actual object
+  // at runtime) and degrades safely to "absent" if that ever changes —
+  // either way behavior falls through to the existing absolute-value
+  // paths below unchanged. Only routes through the per-node relative
+  // path for an actual multi-selection; commitRelativeStyleDeltaToSelectedLayers
+  // itself also no-ops (returns false) for a single target.
+  const relativeDelta = (meta as { relativeDelta?: number } | undefined)
+    ?.relativeDelta;
+  if (typeof relativeDelta === "number") {
+    if (commitRelativeStyleDeltaToSelectedLayers(property, relativeDelta))
+      return;
+  }
+  // Page properties render only when there is no concrete DOM element
+  // selection. Screen/layer ids can remain in the broader selection ref
+  // while Escape exposes Page (especially after overview/breakpoint
+  // navigation); never let that stale structural selection hijack a page
+  // background/font edit away from the body.
+  if (selectedElement && commitStylesToSelectedLayers({ [property]: value }))
+    return;
+  commitVisualStyles(selector, { [property]: value });
+}

package/corpus/templates/design/app/pages/design-editor/commands/styles-change.ts

@@ -0,0 +1,155 @@
+import type { InteractionState } from "@shared/interaction-states";
+import type { RefObject } from "react";
+
+import type { StyleChangeMeta } from "@/components/design/EditPanel";
+import type { ElementInfo } from "@/components/design/types";
+import type { SelectedLayerTarget } from "@/pages/design-editor/code-layer-state";
+import { shouldSkipVisualStyleCommitForPreview } from "@/pages/design-editor/editor-state";
+
+export interface StylesChangeArgs {
+  commitInteractionStateStyles: (
+    state: InteractionState,
+    styles: Record<string, string>,
+  ) => boolean;
+  commitRelativeStyleDeltaToSelectedLayers: (
+    property: string,
+    delta: number,
+  ) => boolean;
+  commitStylesToSelectedLayers: (styles: Record<string, string>) => boolean;
+  commitVisualStyles: (
+    selector: string,
+    styles: Record<string, string>,
+    options?: {
+      runtimeApplied?: boolean;
+      elementInfo?: ElementInfo;
+      originalStyles?: Record<string, string>;
+    },
+  ) => void;
+  handleClearBreakpointOverride: (
+    property: string,
+    maxWidthPx: number,
+  ) => boolean;
+  previewInteractionStateStyles: (
+    state: InteractionState,
+    styles: Record<string, string>,
+  ) => void;
+  selectedCanvasSelectorCandidates: string[];
+  selectedElement: ElementInfo | null;
+  selectedLayerTargetsRef: RefObject<SelectedLayerTarget[]>;
+  textEditingState: { active: boolean; selector?: string; hasRange?: boolean };
+}
+
+export function runStylesChange(
+  {
+    commitInteractionStateStyles,
+    commitRelativeStyleDeltaToSelectedLayers,
+    commitStylesToSelectedLayers,
+    commitVisualStyles,
+    handleClearBreakpointOverride,
+    previewInteractionStateStyles,
+    selectedCanvasSelectorCandidates,
+    selectedElement,
+    selectedLayerTargetsRef,
+    textEditingState,
+  }: StylesChangeArgs,
+  styles: Record<string, string>,
+  meta?: StyleChangeMeta,
+) {
+  // Interaction-states phase 2 — see handleStyleChange's matching branch
+  // (and commitInteractionStateStyles's doc comment) for the full
+  // contract. Batched form: every property in this one commit lands in
+  // the SAME managed-block write (one applyFileContentUpdate call), so a
+  // multi-property commit made while a state is active (e.g. a shadow
+  // popover's X/Y/blur/spread) is still exactly one history step.
+  if (meta?.interactionState) {
+    if (meta.phase === "preview") {
+      previewInteractionStateStyles(meta.interactionState, styles);
+      return;
+    }
+    if (commitInteractionStateStyles(meta.interactionState, styles)) {
+      return;
+    }
+  }
+  // Item 14 — see handleStyleChange's matching branch for the full
+  // breakpointReset contract. EditPanel's BreakpointOverrideIndicator
+  // reset currently only fires through onStyleChange (a single
+  // property), but StylesChangeHandler shares the same StyleChangeMeta
+  // type, so this guards defensively for any batched caller too —
+  // breakpointReset only ever targets its own `property`, so only that
+  // one key of `styles` is relevant here.
+  if (meta?.breakpointReset) {
+    handleClearBreakpointOverride(
+      meta.breakpointReset.property,
+      meta.breakpointReset.maxWidthPx,
+    );
+    return;
+  }
+  const selector = selectedElement?.selector ?? "body";
+  const entries = Object.entries(styles).filter(([, value]) => Boolean(value));
+  if (entries.length === 0) return;
+  // T10: mirror handleStyleChange's text-range routing here. Without
+  // this, a multi-property style commit (e.g. EditPanel's typography
+  // controls, which batch fontSize/lineHeight/etc into one call) while a
+  // text RANGE is selected mid-edit would restyle the whole element
+  // instead of just the selected range — handleStyleChange (the
+  // single-property path) already special-cases this; handleStylesChange
+  // just never got the same treatment.
+  if (
+    textEditingState.active &&
+    textEditingState.hasRange &&
+    textEditingState.selector === selector
+  ) {
+    const sendStyleChange = (window as any).__designCanvasSendStyle;
+    if (typeof sendStyleChange === "function") {
+      entries.forEach(([property, value]) => {
+        sendStyleChange(selector, property, value, {
+          selectorCandidates: selectedCanvasSelectorCandidates,
+          nodeId: selectedElement?.sourceId,
+        });
+      });
+      return;
+    }
+  }
+  // PF12: same preview/commit split as handleStyleChange — see its
+  // comment for the full undo-safety rationale. A batched multi-property
+  // preview tick (e.g. EditPanel's shadow X/Y/blur/spread popover) is
+  // still just a live preview: send every property to the cheap iframe
+  // bridge and skip the expensive multi-property commitVisualStyles call.
+  if (
+    shouldSkipVisualStyleCommitForPreview({
+      phase: meta?.phase,
+      selectedLayerCount: selectedLayerTargetsRef.current.length,
+    })
+  ) {
+    const sendStyleChange = (window as any).__designCanvasSendStyle;
+    if (typeof sendStyleChange === "function") {
+      entries.forEach(([property, value]) => {
+        sendStyleChange(selector, property, value, {
+          selectorCandidates: selectedCanvasSelectorCandidates,
+          nodeId: selectedElement?.sourceId,
+        });
+      });
+    }
+    return;
+  }
+  // Mixed-value arrow-step parity (item 7): see handleStyleChange's
+  // matching comment for the full defensive-read rationale. A relative
+  // delta is inherently single-valued (one scrub gesture on one field),
+  // so this only applies when the batched patch has exactly one entry —
+  // a multi-property patch (e.g. a shadow popover's X+Y+blur+spread all
+  // at once) has no single delta to apply per-node and falls through to
+  // the existing absolute-value paths unchanged.
+  const relativeDelta = (meta as { relativeDelta?: number } | undefined)
+    ?.relativeDelta;
+  if (typeof relativeDelta === "number" && entries.length === 1) {
+    const [singleProperty] = entries[0]!;
+    if (commitRelativeStyleDeltaToSelectedLayers(singleProperty, relativeDelta))
+      return;
+  }
+  if (
+    selectedElement &&
+    commitStylesToSelectedLayers(Object.fromEntries(entries))
+  )
+    return;
+  commitVisualStyles(selector, Object.fromEntries(entries));
+}

package/corpus/templates/design/app/pages/design-editor/commands/suggest-auto-layout.ts

@@ -0,0 +1,125 @@
+import type { CodeLayerNode } from "@shared/code-layer";
+import { buildCodeLayerProjection } from "@shared/code-layer";
+import { sourceContentHash } from "@shared/source-workspace";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { toast } from "sonner";
+
+import type { AutoLayoutSuggestion } from "@/pages/design-editor/auto-layout-suggestion";
+import {
+  hasMeaningfulCssTransform,
+  inferAutoLayoutSuggestion,
+} from "@/pages/design-editor/auto-layout-suggestion";
+import type { RuntimeLayerSnapshot } from "@/pages/design-editor/command-types";
+import type { AlignableRect } from "@/pages/design-editor/layout-operations";
+import type { DesignFile } from "@/pages/design-editor/types";
+
+export interface SuggestAutoLayoutArgs {
+  activeCanvasSourceType: "inline" | "localhost" | "fusion";
+  activeFile: DesignFile;
+  canEditDesign: boolean;
+  designSourceType: "inline" | "localhost" | "fusion";
+  getActiveFileSelectedNodeIds: (content: string) => string[];
+  getFreshActiveContent: () => string;
+  liveComputedLayoutForNode: (nodeId: string) => {
+    display: string;
+    transform: string;
+    rotate: string;
+    scale: string;
+  } | null;
+  rectFromCodeLayerNode: (node: CodeLayerNode) => AlignableRect;
+  runtimeLayerSnapshotsById: Record<string, RuntimeLayerSnapshot>;
+  setAutoLayoutSuggestionPreview: Dispatch<
+    SetStateAction<{
+      suggestion: AutoLayoutSuggestion;
+      sourceType: "inline" | "localhost";
+      contentHash: string;
+      screenId: string;
+    } | null>
+  >;
+  t: (key: string, options?: Record<string, unknown>) => string;
+  viewModeRef: RefObject<"single" | "overview">;
+}
+
+export function runSuggestAutoLayout({
+  activeCanvasSourceType,
+  activeFile,
+  canEditDesign,
+  designSourceType,
+  getActiveFileSelectedNodeIds,
+  getFreshActiveContent,
+  liveComputedLayoutForNode,
+  rectFromCodeLayerNode,
+  runtimeLayerSnapshotsById,
+  setAutoLayoutSuggestionPreview,
+  t,
+  viewModeRef,
+}: SuggestAutoLayoutArgs) {
+  if (!canEditDesign || !activeFile || viewModeRef.current !== "single") {
+    return;
+  }
+  const resolvedSourceType = activeCanvasSourceType ?? designSourceType;
+  if (resolvedSourceType !== "inline" && resolvedSourceType !== "localhost") {
+    return;
+  }
+  const sourceType =
+    resolvedSourceType === "localhost" ? "localhost" : "inline";
+  const sourceContent =
+    sourceType === "localhost"
+      ? runtimeLayerSnapshotsById[activeFile.id]?.html
+      : getFreshActiveContent();
+  if (!sourceContent) {
+    toast.error(t("designEditor.toasts.reactSourceAnchorsLoading"));
+    return;
+  }
+  const projection = buildCodeLayerProjection(sourceContent);
+  const nodesById = new Map(projection.nodes.map((node) => [node.id, node]));
+  const selectedIds = getActiveFileSelectedNodeIds(sourceContent);
+  if (selectedIds.length !== 1) {
+    toast(t("designEditor.autoLayoutSuggestion.selectContainer"));
+    return;
+  }
+  const container = nodesById.get(selectedIds[0]!);
+  if (!container || container.children.length === 0) {
+    toast(t("designEditor.autoLayoutSuggestion.selectContainer"));
+    return;
+  }
+  const containerMeasured = rectFromCodeLayerNode(container);
+  const children = container.children
+    .map((childId) => nodesById.get(childId))
+    .filter((child): child is CodeLayerNode => Boolean(child))
+    .map((child) => {
+      const computed = liveComputedLayoutForNode(child.id);
+      return {
+        ...rectFromCodeLayerNode(child),
+        transformed: hasMeaningfulCssTransform({
+          transform: computed?.transform ?? child.style.transform,
+          rotate: computed?.rotate ?? child.style.rotate,
+          scale: computed?.scale ?? child.style.scale,
+          classes: child.classes,
+        }),
+      };
+    });
+  const suggestion = inferAutoLayoutSuggestion({
+    // Child measurements are parent-relative, so the container's own local
+    // content box begins at 0,0 even when the container is positioned in its
+    // parent. This prevents outer-canvas placement from becoming padding.
+    container: {
+      id: container.id,
+      x: 0,
+      y: 0,
+      width: containerMeasured.width,
+      height: containerMeasured.height,
+    },
+    children,
+  });
+  if (!suggestion) {
+    toast(t("designEditor.autoLayoutSuggestion.selectContainer"));
+    return;
+  }
+  setAutoLayoutSuggestionPreview({
+    suggestion,
+    sourceType,
+    contentHash: sourceContentHash(sourceContent),
+    screenId: activeFile.id,
+  });
+}