@agent-native/core 0.80.9 → 0.80.10

package/corpus/templates/design/app/pages/DesignEditor.tsx

@@ -38,20 +38,30 @@ import {
   type CanvasFrameGeometry,
   type CanvasFrameGeometryById,
 } from "@shared/canvas-frames";
+import { resolveSourceCapabilities } from "@shared/capability-resolver";
 import {
   applyVisualEdit,
   buildCodeLayerProjection,
   buildCodeLayerTree,
   ensureCodeLayerNodeIdsInHtml,
+  moveNodeBetweenDocuments,
   removeCodeLayerNodeFromHtml,
   type CodeLayerNode,
+  type CodeLayerProjection,
   type CodeLayerTreeNode,
 } from "@shared/code-layer";
+import { componentNameFor, isComponentInstance } from "@shared/component-model";
+import {
+  DESIGN_CAPABILITY_NAMES,
+  hasCapability,
+} from "@shared/design-source-capabilities";
 import { shouldUseLiveFileContent } from "@shared/html-content";
 import {
   resolveTweaksToCssVars,
   type TweakSelections,
 } from "@shared/resolve-tweaks";
+import { widthToPrefix } from "@shared/responsive-classes";
+import { normalizeDesignSourceType } from "@shared/source-mode";
 import {
   IconArrowLeft,
   IconArrowUpRight,
@@ -94,6 +104,9 @@ import {
   IconFileExport,
   IconPlayerPlay,
   IconDeviceFloppy,
+  IconRocket,
+  IconExternalLink,
+  IconCircleCheck,
   IconTerminal2,
 } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
@@ -113,6 +126,7 @@ import { useParams, useNavigate, Link, useLocation } from "react-router";
 import { toast } from "sonner";
 import * as Y from "yjs";
 
+import { canvasPrimitiveVisual } from "@/components/design/canvas-primitive-style";
 import {
   CanvasContextMenu,
   type CanvasContextMenuHandle,
@@ -121,10 +135,15 @@ import {
   DesignCanvas,
   type IframeContextMenuPayload,
   type IframeHotkeyPayload,
+  type MotionTrackWire,
 } from "@/components/design/DesignCanvas";
 import { DesignEditorSkeleton } from "@/components/design/DesignEditorSkeleton";
 import type { DesignExtensionSlotContext } from "@/components/design/DesignExtensionsPanel";
-import { EditPanel, type InspectorTab } from "@/components/design/EditPanel";
+import {
+  EditPanel,
+  type InspectCodeData,
+  type InspectorTab,
+} from "@/components/design/EditPanel";
 import type { ExportSettingsValue } from "@/components/design/inspector";
 import {
   LayersPanel,
@@ -132,12 +151,18 @@ import {
   type LayersPanelMoveIntent,
   type LayersPanelNode,
 } from "@/components/design/LayersPanel";
+import { LocalSourceEditBanner } from "@/components/design/LocalSourceEditBanner";
+import {
+  MotionDock,
+  type MotionDockTrack,
+} from "@/components/design/MotionDock";
 import {
   MultiScreenCanvas,
   OVERVIEW_FRAME_WIDTH,
   type CanvasPrimitiveInsert,
 } from "@/components/design/MultiScreenCanvas";
 import { QuestionFlow } from "@/components/design/QuestionFlow";
+import type { ReviewPanelProps } from "@/components/design/ReviewPanel";
 import type { ElementInfo, DeviceFrameType } from "@/components/design/types";
 import {
   DEVICE_FRAME_VIEWPORTS,
@@ -148,6 +173,14 @@ import type { UploadedFile } from "@/components/editor/PromptDialog";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -190,6 +223,8 @@ import {
 import { prettyScreenName } from "@/lib/screen-names";
 import { cn } from "@/lib/utils";
 
+import type { A11yFinding } from "../../shared/design-review.js";
+
 const TAB_ID = generateTabId();
 
 // Selection is tab-scoped (like navigation) so a second editor tab cannot
@@ -263,6 +298,32 @@ export function getSelectedScreenIdsForEditorState(args: {
   return activeFileId ? [activeFileId] : [];
 }
 
+function fileIdFromLayerSelectionId(
+  layerId: string,
+  fileIds: Set<string>,
+): string | null {
+  const normalized = layerId.startsWith("code:")
+    ? layerId.slice("code:".length)
+    : layerId;
+  return fileIds.has(normalized) ? normalized : null;
+}
+
+export function getOverviewScreenIdsFromLayerSelection(args: {
+  fileIds: string[];
+  layerIds: string[];
+}) {
+  const fileIds = new Set(args.fileIds);
+  const seen = new Set<string>();
+  const selectedScreenIds: string[] = [];
+  args.layerIds.forEach((layerId) => {
+    const fileId = fileIdFromLayerSelectionId(layerId, fileIds);
+    if (!fileId || seen.has(fileId)) return;
+    seen.add(fileId);
+    selectedScreenIds.push(fileId);
+  });
+  return selectedScreenIds;
+}
+
 export function getOverviewEnterTarget(args: {
   activeFileId: string | null | undefined;
   overviewSelectedScreenIds: string[];
@@ -334,6 +395,45 @@ export function getDesignEditorShareUrl(
   return new URL(pathname, origin).toString();
 }
 
+export function getLocalhostRouteSourceFile(args: {
+  sourceFile?: string;
+  source?: string;
+}): string | undefined {
+  if (args.sourceFile?.trim()) return args.sourceFile;
+  const raw = args.source;
+  if (!raw) return undefined;
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (
+      parsed &&
+      typeof parsed === "object" &&
+      "file" in parsed &&
+      typeof (parsed as Record<string, unknown>).file === "string"
+    ) {
+      return (parsed as Record<string, string>).file;
+    }
+  } catch {
+    if (raw.length > 0) return raw;
+  }
+  return undefined;
+}
+
+export function getLayerMoveSourceContent(args: {
+  sourceFileId: string;
+  activeFileId?: string | null;
+  activeContent: string;
+  sourceFileContent?: string;
+  sourceContentMap: ReadonlyMap<string, string>;
+}) {
+  return (
+    args.sourceContentMap.get(args.sourceFileId) ??
+    (args.sourceFileId === args.activeFileId
+      ? args.activeContent
+      : args.sourceFileContent) ??
+    ""
+  );
+}
+
 function resolveZoomUpdate(update: SetStateAction<number>, current: number) {
   return typeof update === "function" ? update(current) : update;
 }
@@ -367,6 +467,27 @@ export function shouldEscapeToOverview(args: {
   );
 }
 
+/**
+ * Build the set of all node ids (both projection ids and data-agent-native-node-id
+ * attribute values) that exist in the given projection. Used by handleGroupSelection
+ * and handleUngroupSelection to filter selectedLayerIdsState to the active file's
+ * nodes before passing them to wrapNodes / unwrap, preventing cross-file stale ids
+ * from causing spurious "conflict" errors.
+ *
+ * Exported for unit testing.
+ */
+export function buildActiveFileNodeIdSet(
+  projection: CodeLayerProjection,
+): Set<string> {
+  const ids = new Set<string>();
+  for (const n of projection.nodes) {
+    ids.add(n.id);
+    const attrId = n.dataAttributes["data-agent-native-node-id"];
+    if (attrId) ids.add(attrId);
+  }
+  return ids;
+}
+
 let html2CanvasColorContext: CanvasRenderingContext2D | null | undefined;
 
 interface FileContentSaveRequest {
@@ -603,6 +724,12 @@ interface GeometryHistoryEntry {
   after: CanvasFrameGeometryById;
 }
 
+interface ContentHistoryEntry {
+  fileId: string;
+  before: string;
+  after: string;
+}
+
 type PatchProofStatus =
   | "runtime"
   | "queued"
@@ -820,6 +947,44 @@ function escapeHtmlAttributeValue(value: string): string {
     .replace(/>/g, "&gt;");
 }
 
+const ABS_POSITION_PROPS = [
+  "position",
+  "left",
+  "top",
+  "right",
+  "bottom",
+] as const;
+
+/**
+ * Remove absolute-positioning style properties from the element identified by
+ * `data-agent-native-node-id` so that it becomes a flow child after being
+ * reparented into a container. Returns the updated HTML, or the original HTML
+ * if the node cannot be found or parsing is unavailable.
+ *
+ * Uses DOMParser + CSSStyleDeclaration.removeProperty() rather than
+ * applyVisualEdit({kind:"style",value:""}) because the substrate rejects
+ * empty-string values in isSafeStyleValue, making that approach a silent no-op.
+ */
+function removeAbsolutePositioningFromNodeInHtml(
+  content: string,
+  nodeAttrId: string,
+): string {
+  if (typeof window === "undefined") return content;
+  try {
+    const doc = new DOMParser().parseFromString(content, "text/html");
+    const element = doc.querySelector(
+      `[data-agent-native-node-id="${CSS.escape(nodeAttrId)}"]`,
+    ) as HTMLElement | null;
+    if (!element) return content;
+    for (const prop of ABS_POSITION_PROPS) {
+      element.style.removeProperty(prop);
+    }
+    return `<!DOCTYPE html>\n${doc.documentElement.outerHTML}`;
+  } catch {
+    return content;
+  }
+}
+
 function escapeHtmlText(value: string): string {
   return value
     .replace(/&/g, "&amp;")
@@ -1147,12 +1312,20 @@ function appendCanvasPrimitiveToHtml(
       element.style.transform = `rotate(${geometry.rotation}deg)`;
     }
 
+    // Use the shared canvas-primitive-style module so committed output is
+    // pixel-identical to the draft preview (fixes B5 color jump, B6 ellipse
+    // radius jump).  User-supplied fill/stroke/strokeWidth override the
+    // canonical defaults so hand-chosen colours are preserved.
+    const canonical = canvasPrimitiveVisual(
+      primitive.kind === "rectangle" ? "rect" : primitive.kind,
+    );
     if (primitive.kind === "frame") {
-      element.style.background = primitive.fill ?? "rgba(255, 255, 255, 0.04)";
-      element.style.border = `${primitive.strokeWidth ?? 1}px solid ${
-        primitive.stroke ?? "rgba(148, 163, 184, 0.35)"
-      }`;
-      element.style.borderRadius = "2px";
+      element.style.background = primitive.fill ?? canonical.background;
+      element.style.border =
+        primitive.stroke !== undefined || primitive.strokeWidth !== undefined
+          ? `${primitive.strokeWidth ?? 1}px dashed ${primitive.stroke ?? canonical.border.split(" ").slice(2).join(" ")}`
+          : canonical.border;
+      element.style.borderRadius = canonical.borderRadius;
       element.style.overflow = "hidden";
     } else if (primitive.kind === "text") {
       element.textContent = primitive.text ?? "Text";
@@ -1164,18 +1337,23 @@ function appendCanvasPrimitiveToHtml(
       element.style.fontSize = "16px";
       element.style.lineHeight = "1.2";
       element.style.whiteSpace = "pre-wrap";
+      element.style.border = canonical.border;
+      element.style.borderRadius = canonical.borderRadius;
     } else if (primitive.kind === "ellipse") {
-      element.style.background = primitive.fill ?? "rgba(37, 99, 235, 0.16)";
-      element.style.border = `${primitive.strokeWidth ?? 1}px solid ${
-        primitive.stroke ?? "rgb(37, 99, 235)"
-      }`;
-      element.style.borderRadius = "50%";
+      element.style.background = primitive.fill ?? canonical.background;
+      element.style.border =
+        primitive.stroke !== undefined || primitive.strokeWidth !== undefined
+          ? `${primitive.strokeWidth ?? 1}px solid ${primitive.stroke ?? canonical.border.split(" ").slice(2).join(" ")}`
+          : canonical.border;
+      element.style.borderRadius = canonical.borderRadius; // "50%"
     } else {
-      element.style.background = primitive.fill ?? "rgba(37, 99, 235, 0.16)";
-      element.style.border = `${primitive.strokeWidth ?? 1}px solid ${
-        primitive.stroke ?? "rgb(37, 99, 235)"
-      }`;
-      element.style.borderRadius = "2px";
+      // rect / rectangle / frame fallthrough
+      element.style.background = primitive.fill ?? canonical.background;
+      element.style.border =
+        primitive.stroke !== undefined || primitive.strokeWidth !== undefined
+          ? `${primitive.strokeWidth ?? 1}px solid ${primitive.stroke ?? canonical.border.split(" ").slice(2).join(" ")}`
+          : canonical.border;
+      element.style.borderRadius = canonical.borderRadius;
     }
 
     doc.body.appendChild(element);
@@ -1918,6 +2096,48 @@ function collectCodeLayerAncestors(
   return [];
 }
 
+function findCodeLayerNodeInProjection(
+  projection: CodeLayerProjection,
+  previousNode: CodeLayerNode,
+): CodeLayerNode | null {
+  const stableSourceIds = [
+    previousNode.dataAttributes["data-agent-native-node-id"],
+    previousNode.dataAttributes["data-code-layer-id"],
+    previousNode.dataAttributes["data-layer-id"],
+    previousNode.dataAttributes["data-builder-id"],
+    previousNode.dataAttributes["data-loc"],
+    typeof previousNode.attributes.id === "string"
+      ? previousNode.attributes.id
+      : undefined,
+  ].filter((id): id is string => Boolean(id));
+
+  for (const sourceId of stableSourceIds) {
+    const stableMatch = projection.nodes.find(
+      (node) =>
+        node.dataAttributes["data-agent-native-node-id"] === sourceId ||
+        node.dataAttributes["data-code-layer-id"] === sourceId ||
+        node.dataAttributes["data-layer-id"] === sourceId ||
+        node.dataAttributes["data-builder-id"] === sourceId ||
+        node.dataAttributes["data-loc"] === sourceId ||
+        node.attributes.id === sourceId,
+    );
+    if (stableMatch) return stableMatch;
+  }
+
+  const exactMatch = projection.nodes.find(
+    (node) => node.id === previousNode.id,
+  );
+  if (exactMatch) return exactMatch;
+
+  const fallbackMatches = projection.nodes.filter(
+    (node) =>
+      node.tag === previousNode.tag &&
+      node.layerName === previousNode.layerName &&
+      (node.textSnippet ?? "") === (previousNode.textSnippet ?? ""),
+  );
+  return fallbackMatches.length === 1 ? (fallbackMatches[0] ?? null) : null;
+}
+
 function AgentNativeMenuMark({ className }: { className?: string }) {
   return (
     <svg
@@ -2828,6 +3048,24 @@ export default function DesignEditor() {
   const spaceHandPreviousToolRef = useRef<DesignTool | null>(null);
   const hasSelectedElement = Boolean(selectedElement);
 
+  // ── Motion dock state (§6.3) ────────────────────────────────────────────────
+  // The MotionDock is mounted below the canvas and shown when motionDockOpen.
+  // Tracks and durationMs are local state; "Write to CSS" calls applyMotionEdit.
+  const [motionDockOpen, setMotionDockOpen] = useState(false);
+  const [motionTracks, setMotionTracks] = useState<MotionDockTrack[]>([]);
+  const [motionDurationMs, setMotionDurationMs] = useState(1000);
+
+  // ── Breakpoint preview state (§6.4) ─────────────────────────────────────────
+  // Active breakpoint width for the current design (pixels). Controls which
+  // side-by-side frame is focused. undefined = no frame selected (overview mode).
+  const [activeBreakpointWidthState, setActiveBreakpointWidthState] = useState<
+    number | undefined
+  >(undefined);
+
+  // ── Design state selection (§6.4 / §8) ───────────────────────────────────────
+  // null = Default (live) view; a string id = one of the design_state rows.
+  const [selectedStateId, setSelectedStateId] = useState<string | null>(null);
+
   useEffect(() => {
     if (!isBuilderDesignEmbed) return;
     // Announce ready to Builder. The trusted origin is not yet known at this
@@ -2955,6 +3193,9 @@ export default function DesignEditor() {
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
   const undoManagerRef = useRef<Y.UndoManager | null>(null);
+  const contentUndoStackRef = useRef<ContentHistoryEntry[]>([]);
+  const contentRedoStackRef = useRef<ContentHistoryEntry[]>([]);
+  const suppressContentHistoryRef = useRef(false);
   const geometryUndoStackRef = useRef<GeometryHistoryEntry[]>([]);
   const geometryRedoStackRef = useRef<GeometryHistoryEntry[]>([]);
   const historyOrderRef = useRef<Array<"content" | "geometry">>([]);
@@ -2963,10 +3204,12 @@ export default function DesignEditor() {
     const undoManager = undoManagerRef.current;
     setCanUndo(
       Boolean(undoManager?.canUndo()) ||
+        contentUndoStackRef.current.length > 0 ||
         geometryUndoStackRef.current.length > 0,
     );
     setCanRedo(
       Boolean(undoManager?.canRedo()) ||
+        contentRedoStackRef.current.length > 0 ||
         geometryRedoStackRef.current.length > 0,
     );
   }, []);
@@ -2974,6 +3217,9 @@ export default function DesignEditor() {
   const designSelectionOwnerIdRef = useRef(`${TAB_ID}:${generateTabId()}`);
   const frameGeometrySaveTimerRef = useRef<number | null>(null);
   const [tweakSaveActive, setTweakSaveActive] = useState(false);
+  // Dismissible localhost-source banner (reset per session).
+  const [localSourceBannerDismissed, setLocalSourceBannerDismissed] =
+    useState(false);
   // Shared visual-editor annotate overlays. drawMode owns the send toolbar,
   // while pinMode temporarily routes canvas clicks to comment pins that queue
   // into the same agent submission.
@@ -3292,6 +3538,58 @@ export default function DesignEditor() {
     designAccessRole === "owner" || designAccessRole === "admin";
   const canEditDesign = canShareDesign || designAccessRole === "editor";
   const canEditDesignRef = useRef(canEditDesign);
+  const pendingLocalFileContentsRef = useRef<
+    Map<
+      string,
+      { content: string; startedAt: number; baseUpdatedAt?: string | null }
+    >
+  >(new Map());
+  const [
+    pendingLocalFileContentsRevision,
+    setPendingLocalFileContentsRevision,
+  ] = useState(0);
+
+  const markPendingLocalFileContent = useCallback(
+    (fileId: string, content: string, baseUpdatedAt?: string | null) => {
+      const current = pendingLocalFileContentsRef.current.get(fileId);
+      if (current?.content === content) {
+        if (
+          baseUpdatedAt !== undefined &&
+          current.baseUpdatedAt === undefined
+        ) {
+          pendingLocalFileContentsRef.current.set(fileId, {
+            ...current,
+            baseUpdatedAt,
+          });
+          setPendingLocalFileContentsRevision((revision) => revision + 1);
+        }
+        return;
+      }
+      pendingLocalFileContentsRef.current.set(fileId, {
+        content,
+        startedAt: Date.now(),
+        baseUpdatedAt,
+      });
+      setPendingLocalFileContentsRevision((revision) => revision + 1);
+    },
+    [],
+  );
+
+  const clearPendingLocalFileContent = useCallback(
+    (fileId: string, expectedContent?: string) => {
+      const current = pendingLocalFileContentsRef.current.get(fileId);
+      if (!current) return;
+      if (
+        expectedContent !== undefined &&
+        current.content !== expectedContent
+      ) {
+        return;
+      }
+      pendingLocalFileContentsRef.current.delete(fileId);
+      setPendingLocalFileContentsRevision((revision) => revision + 1);
+    },
+    [],
+  );
 
   useEffect(() => {
     canEditDesignRef.current = canEditDesign;
@@ -3332,6 +3630,45 @@ export default function DesignEditor() {
   const duplicateDesignMutation = useActionMutation("duplicate-design");
   const exportHtmlMutation = useActionMutation("export-html");
   const exportZipMutation = useActionMutation("export-zip");
+  const applyMotionEditMutation = useActionMutation("apply-motion-edit");
+  // §6.4 breakpoint mutations — wired to MultiScreenCanvas + affordance
+  const addBreakpointMutation = useActionMutation("add-breakpoint");
+  const setActiveBreakpointMutation = useActionMutation(
+    "set-active-breakpoint",
+  );
+
+  // §6.1 — promote a selection into a reusable component instance.
+  const createComponentMutation = useActionMutation("create-component");
+  // §6.1 — jump to a component instance's source (selects the root + navigates).
+  const openComponentSourceMutation = useActionMutation(
+    "open-component-source",
+  );
+
+  // §6.6 — "Make it real" migration flow (migrate-inline-design-to-app).
+  // The mutation stays unconditional; the dialog gates on isSignedIn.
+  const migrateMutation = useActionMutation("migrate-inline-design-to-app");
+
+  // Dialog open/close state for the "Make this a real app" flow.
+  const [makeRealDialogOpen, setMakeRealDialogOpen] = useState(false);
+
+  // Result payload returned by migrate-inline-design-to-app on success.
+  // `null` = not yet migrated; populated once the Builder agent accepts the job.
+  const [migrationResult, setMigrationResult] = useState<{
+    branchName?: string;
+    url?: string;
+    versionId?: string;
+    seedFileCount?: number;
+    status?: string;
+    projectId?: string;
+    cta?: {
+      kind: string;
+      label: string;
+      description: string;
+      connectUrl?: string;
+      primaryAction: string;
+    };
+  } | null>(null);
+
   const [shareExportFormat, setShareExportFormat] =
     useState<ShareExportFormat>("html");
   const [codingHandoffResult, setCodingHandoffResult] =
@@ -3356,6 +3693,7 @@ export default function DesignEditor() {
   const saveFileContent = useCallback(
     (pending: FileContentSaveRequest) => {
       if (!canEditDesignRef.current) return;
+      markPendingLocalFileContent(pending.id, pending.content);
       latestFileSaveForUnloadRef.current[pending.id] = pending;
       const previous =
         fileSaveChainsRef.current[pending.id] ?? Promise.resolve();
@@ -3374,6 +3712,7 @@ export default function DesignEditor() {
                 : prev,
             );
           } catch (error) {
+            clearPendingLocalFileContent(pending.id, pending.content);
             setPatchProof((prev) =>
               prev && prev.fileId === pending.id && prev.status === "queued"
                 ? {
@@ -3395,7 +3734,12 @@ export default function DesignEditor() {
         }
       });
     },
-    [t, updateFileMutation],
+    [
+      clearPendingLocalFileContent,
+      markPendingLocalFileContent,
+      t,
+      updateFileMutation,
+    ],
   );
 
   const queueFileContentSave = useCallback(
@@ -3410,6 +3754,7 @@ export default function DesignEditor() {
         content,
         syncCollab: options.syncCollab ?? true,
       };
+      markPendingLocalFileContent(fileId, content);
       latestFileSaveForUnloadRef.current[fileId] = pending;
       if (options.immediate) {
         const timer = fileSaveTimersRef.current[fileId];
@@ -3434,7 +3779,7 @@ export default function DesignEditor() {
         saveFileContent(pending);
       }, 400);
     },
-    [saveFileContent],
+    [markPendingLocalFileContent, saveFileContent],
   );
 
   useEffect(() => {
@@ -3679,7 +4024,38 @@ export default function DesignEditor() {
     updateDesignMutation,
   ]);
 
-  const files = design?.files ?? [];
+  const serverFiles = design?.files ?? [];
+  useEffect(() => {
+    if (pendingLocalFileContentsRef.current.size === 0) return;
+    let changed = false;
+    for (const file of serverFiles) {
+      const pending = pendingLocalFileContentsRef.current.get(file.id);
+      if (pending && (file.content ?? "") === pending.content) {
+        if (
+          pending.baseUpdatedAt !== undefined &&
+          file.updatedAt === pending.baseUpdatedAt
+        ) {
+          continue;
+        }
+        pendingLocalFileContentsRef.current.delete(file.id);
+        changed = true;
+      }
+    }
+    if (changed) {
+      setPendingLocalFileContentsRevision((revision) => revision + 1);
+    }
+  }, [serverFiles]);
+  const pendingLocalFileContentsSnapshot = useMemo(
+    () => new Map(pendingLocalFileContentsRef.current),
+    [pendingLocalFileContentsRevision],
+  );
+  const files = useMemo(() => {
+    if (pendingLocalFileContentsSnapshot.size === 0) return serverFiles;
+    return serverFiles.map((file) => {
+      const pending = pendingLocalFileContentsSnapshot.get(file.id);
+      return pending ? { ...file, content: pending.content } : file;
+    });
+  }, [pendingLocalFileContentsSnapshot, serverFiles]);
   const designDataJson = useMemo(
     () => parseDesignDataJson(design?.data),
     [design?.data],
@@ -3699,6 +4075,38 @@ export default function DesignEditor() {
       designDataJson,
       "screenMetadata",
     );
+    // §6.4 — breakpoint set stored in designs.data.breakpointSet as a
+    // BreakpointSet { id, breakpoints: BreakpointDefinition[] }.
+    // Each BreakpointDefinition has { id, label, widthPx, prefix }.
+    const breakpointSet = (() => {
+      try {
+        const raw = (designDataJson as Record<string, unknown>)?.breakpointSet;
+        if (
+          raw &&
+          typeof raw === "object" &&
+          !Array.isArray(raw) &&
+          Array.isArray((raw as Record<string, unknown>).breakpoints)
+        ) {
+          return raw as {
+            id: string;
+            breakpoints: Array<{
+              id: string;
+              widthPx: number;
+              label?: string;
+              prefix?: string;
+            }>;
+          };
+        }
+      } catch {
+        // ignore
+      }
+      return undefined;
+    })();
+    const bpWidths =
+      breakpointSet && breakpointSet.breakpoints.length > 0
+        ? breakpointSet.breakpoints.map((bp) => bp.widthPx)
+        : undefined;
+
     return files.map((file) => {
       const metadata = getDesignDataRecord(metadataByFileId, file.id);
       const stringValue = (key: string) =>
@@ -3716,6 +4124,7 @@ export default function DesignEditor() {
         updatedAt: file.updatedAt,
         sourceType: stringValue("sourceType"),
         source: stringValue("source"),
+        sourceFile: stringValue("sourceFile"),
         lod: stringValue("lod"),
         previewState: stringValue("previewState"),
         status: stringValue("status"),
@@ -3724,9 +4133,19 @@ export default function DesignEditor() {
         height: numberValue("height"),
         url: stringValue("url"),
         previewUrl: stringValue("previewUrl"),
+        // Breakpoint preview widths (§6.4). When non-empty, MultiScreenCanvas
+        // renders one iframe per width to the right of the primary frame.
+        breakpointWidths: bpWidths,
+        // Active breakpoint width tracked in component state; shared across all
+        // screens (a design has one active breakpoint set at a time in v1).
+        activeBreakpointWidth: bpWidths?.includes(
+          activeBreakpointWidthState ?? -1,
+        )
+          ? activeBreakpointWidthState
+          : undefined,
       };
     });
-  }, [designDataJson, files]);
+  }, [designDataJson, files, activeBreakpointWidthState]);
   const queueFrameGeometrySave = useCallback(
     (geometryById: CanvasFrameGeometryById) => {
       if (!id || !canEditDesignRef.current) return;
@@ -3838,6 +4257,61 @@ export default function DesignEditor() {
     [syncUndoRedoState, writeFrameGeometrySnapshot],
   );
 
+  // §6.6 — "Make this a real app" handler.
+  // Opens the dialog; actual migration fires when the user confirms.
+  const handleOpenMakeReal = useCallback(() => {
+    setMigrationResult(null);
+    setMakeRealDialogOpen(true);
+  }, []);
+
+  // Fires when the user clicks "Start migration" in the dialog.
+  // Calls migrate-inline-design-to-app, then on success flips sourceType to
+  // "fusion" in the design data blob so gated panels light up.
+  const handleConfirmMakeReal = useCallback(async () => {
+    if (!id) return;
+    try {
+      const result = await migrateMutation.mutateAsync({ designId: id } as any);
+      const r = result as any;
+      setMigrationResult({
+        branchName: r?.branchName,
+        url: r?.url,
+        versionId: r?.versionId,
+        seedFileCount: r?.seedFileCount,
+        status: r?.status,
+        projectId: r?.projectId,
+        cta: r?.cta,
+      });
+
+      // When the Builder agent accepted the job (status = "processing"),
+      // flip the design data to sourceType "fusion" so capability-gated
+      // panels (branches, deploy) light up on refresh.
+      if (r?.status === "processing" && r?.url) {
+        const nextData = {
+          ...designDataJsonRef.current,
+          sourceType: "fusion",
+          fusionBranchName: r.branchName,
+          fusionUrl: r.url,
+          fusionProjectId: r.projectId,
+        };
+        updateDesignMutation.mutate(
+          { id, data: JSON.stringify(nextData) } as any,
+          {
+            onSuccess: () => {
+              queryClient.invalidateQueries({
+                queryKey: ["action", "get-design"],
+              });
+            },
+          },
+        );
+      } else if (r?.status === "not-configured") {
+        // Builder not connected — leave dialog open to show the CTA.
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Migration failed";
+      toast.error(message);
+    }
+  }, [id, migrateMutation, updateDesignMutation, queryClient]);
+
   generationOutputReadyRef.current = files.length > 0;
 
   useEffect(() => {
@@ -3952,6 +4426,65 @@ export default function DesignEditor() {
     generating,
     pendingGenerationActive,
   });
+
+  // §6.5 Review panel — lazy, on-demand accessibility audit for the active
+  // file. The audit walks the file's rendered HTML, so it must never run on
+  // editor load: it is gated behind `auditRequested` (flipped by the panel's
+  // "Run" button) and reset whenever the active file changes so each file is
+  // audited explicitly. The ReviewPanel itself owns the apply-a11y-fix mutation
+  // behind its inline "Fix" button; we just supply the active design source and
+  // refetch on apply so a resolved finding drops out of the list.
+  const [auditRequested, setAuditRequested] = useState(false);
+  useEffect(() => {
+    setAuditRequested(false);
+  }, [activeFile?.id]);
+
+  const auditQuery = useActionQuery<{
+    auditedAt: string;
+    findings: A11yFinding[];
+  }>(
+    "run-design-audit",
+    { designId: id ?? "", fileId: activeFile?.id },
+    {
+      enabled: auditRequested && !!id && !!activeFile?.id,
+      refetchOnWindowFocus: false,
+    },
+  );
+
+  const reviewPanelProps = useMemo<
+    Omit<ReviewPanelProps, "className"> | undefined
+  >(() => {
+    if (!id || !activeFile) return undefined;
+    const audit = auditRequested ? auditQuery.data : undefined;
+    return {
+      findings: audit?.findings ?? [],
+      auditLoading: auditRequested && auditQuery.isFetching,
+      auditedAt: audit?.auditedAt ?? null,
+      auditError:
+        auditRequested && auditQuery.isError
+          ? auditQuery.error?.message ||
+            "Audit failed. Try again." /* i18n-ignore design review fallback */
+          : null,
+      onRunAudit: () => {
+        // First run flips the gate (the query auto-fetches); later runs refetch.
+        if (auditRequested) {
+          void auditQuery.refetch();
+        } else {
+          setAuditRequested(true);
+        }
+      },
+      fixSource: {
+        designId: id,
+        fileId: activeFile.id,
+        filename: activeFile.filename,
+      },
+      onFixApplied: () => {
+        // Re-run the audit so the resolved finding drops out of the list.
+        void auditQuery.refetch();
+      },
+    };
+  }, [id, activeFile, auditRequested, auditQuery]);
+
   const selectedScreenIds = useMemo(
     () =>
       getSelectedScreenIdsForEditorState({
@@ -4383,7 +4916,10 @@ export default function DesignEditor() {
       setCollabContentFileId(null);
       lastAppliedFileUpdatedAtRef.current = null;
       lastLocalContentRef.current = null;
+      contentUndoStackRef.current = [];
+      contentRedoStackRef.current = [];
       clearStaleAgentCollabRecovery();
+      syncUndoRedoState();
       return;
     }
     if (activeFileId !== prevActiveFileIdRef.current) {
@@ -4392,9 +4928,17 @@ export default function DesignEditor() {
       setCollabContentFileId(null);
       lastAppliedFileUpdatedAtRef.current = null;
       lastLocalContentRef.current = null;
+      contentUndoStackRef.current = [];
+      contentRedoStackRef.current = [];
       clearStaleAgentCollabRecovery();
+      syncUndoRedoState();
     }
-  }, [activeFileId, clearStaleAgentCollabRecovery, viewMode]);
+  }, [
+    activeFileId,
+    clearStaleAgentCollabRecovery,
+    syncUndoRedoState,
+    viewMode,
+  ]);
 
   useEffect(() => {
     return clearStaleAgentCollabRecovery;
@@ -4406,6 +4950,19 @@ export default function DesignEditor() {
     const fileId = activeFileId;
     const ytext = ydoc.getText("content");
     const text = ytext.toString();
+    const pendingLocalContent =
+      pendingLocalFileContentsRef.current.get(fileId)?.content;
+    if (pendingLocalContent && text !== pendingLocalContent) {
+      setCollabContent(pendingLocalContent);
+      setCollabContentFileId(fileId);
+      lastLocalContentRef.current = pendingLocalContent;
+      setContentRenderRevision((revision) => revision + 1);
+      ydoc.transact(() => {
+        ytext.delete(0, ytext.length);
+        ytext.insert(0, pendingLocalContent);
+      }, TAB_ID);
+      return;
+    }
     if (text.length > 0) {
       const storedContent = activeFile?.content ?? "";
       if (
@@ -4432,7 +4989,14 @@ export default function DesignEditor() {
       setCollabContentFileId(fileId);
       setContentRenderRevision((revision) => revision + 1);
     }
-  }, [ydoc, isSynced, activeFileId, activeFile?.content, activeFile?.fileType]);
+  }, [
+    ydoc,
+    isSynced,
+    activeFileId,
+    activeFile?.content,
+    activeFile?.fileType,
+    pendingLocalFileContentsRevision,
+  ]);
 
   // Keep the freshest DB `updatedAt` in a ref the observe handler can read.
   useEffect(() => {
@@ -4453,14 +5017,27 @@ export default function DesignEditor() {
     const ytext = ydoc.getText("content");
     const handler = (_event: unknown, transaction?: { origin?: unknown }) => {
       const next = ytext.toString();
-      setCollabContent(next);
-      setCollabContentFileId(fileId);
       // UndoManager fires with itself as the origin; treat those as local too
       // so the reconcile watermark and stale-selection fix are consistent.
       const isLocalEdit =
         transaction?.origin === TAB_ID ||
         transaction?.origin === LOCAL_EDIT_ORIGIN ||
         transaction?.origin === undoManagerRef.current;
+      const pendingLocalContent =
+        pendingLocalFileContentsRef.current.get(fileId)?.content;
+      if (pendingLocalContent && next !== pendingLocalContent && !isLocalEdit) {
+        setCollabContent(pendingLocalContent);
+        setCollabContentFileId(fileId);
+        lastLocalContentRef.current = pendingLocalContent;
+        setContentRenderRevision((revision) => revision + 1);
+        ydoc.transact(() => {
+          ytext.delete(0, ytext.length);
+          ytext.insert(0, pendingLocalContent);
+        }, TAB_ID);
+        return;
+      }
+      setCollabContent(next);
+      setCollabContentFileId(fileId);
       if (isLocalEdit) {
         lastLocalContentRef.current = next;
       } else {
@@ -4688,6 +5265,22 @@ export default function DesignEditor() {
   const canvasContextMenuRef = useRef<CanvasContextMenuHandle | null>(null);
   const canvasContainerRef = useRef<HTMLDivElement>(null);
 
+  // Live handle to the active DesignCanvas preview iframe. DesignCanvas owns the
+  // <iframe> internally (tagged data-design-preview-iframe) and does not forward
+  // its ref, so we resolve the element lazily from the DOM at read time. The
+  // MotionDock reads `.current` only when scrubbing, so this always returns the
+  // currently-mounted iframe even after content swaps recreate the element.
+  const canvasIframeRef = useMemo<React.RefObject<HTMLIFrameElement | null>>(
+    () => ({
+      get current() {
+        return document.querySelector<HTMLIFrameElement>(
+          "iframe[data-design-preview-iframe]",
+        );
+      },
+    }),
+    [],
+  );
+
   // Broadcast pointer position (normalized to canvas container) and
   // selected element selector so peers can see where the user is working.
   const handleCanvasPointerMove = useCallback(
@@ -4801,18 +5394,27 @@ export default function DesignEditor() {
   // Resolve the content to render: prefer collab content only after the
   // per-file reconcile state has reset for the current active file. Otherwise a
   // file switch can render one frame with the previous file's Yjs text.
+  // Always resolve to a string — a non-string source (e.g. a collab value that
+  // is not yet a plain string, or a not-yet-loaded file) must never reach the
+  // many `content.trim()` / projection callers below, which would crash render.
   const activeCollabFileReady =
     viewMode === "single" && activeFileId === prevActiveFileIdRef.current;
-  const activeContent =
-    activeCollabFileReady &&
+  const pendingActiveFileContent = activeFile?.id
+    ? pendingLocalFileContentsSnapshot.get(activeFile.id)?.content
+    : undefined;
+  const activeContentSource =
+    pendingActiveFileContent ??
+    (activeCollabFileReady &&
     collabContentFileId === activeFile?.id &&
     collabContent !== null
       ? collabContent
-      : (activeFile?.content ?? "");
+      : (activeFile?.content ?? ""));
+  const activeContent =
+    typeof activeContentSource === "string" ? activeContentSource : "";
   const fileContentById = useMemo(() => {
     const map = new Map<string, string>();
     for (const file of files) {
-      map.set(file.id, file.content ?? "");
+      map.set(file.id, typeof file.content === "string" ? file.content : "");
     }
     return map;
   }, [files]);
@@ -4846,6 +5448,173 @@ export default function DesignEditor() {
     return selectedElement?.selector ? [selectedElement.selector] : [];
   }, [selectedCodeLayerNode, selectedElement?.selector]);
   const selectedCanvasSelector = selectedCanvasSelectorCandidates[0] ?? null;
+
+  // ── Inspector header quick actions (Create component / Inspect code) ───────
+  // Resolve the design-level source type + capability map so the inspector can
+  // gate the real-app affordances (jump-to-source, prop write-back).
+  const designSourceType = useMemo(
+    () =>
+      normalizeDesignSourceType(designDataJson.sourceType as unknown) ??
+      "inline",
+    [designDataJson.sourceType],
+  );
+  const sourceCapabilities = useMemo(() => {
+    const caps = resolveSourceCapabilities(designSourceType);
+    return DESIGN_CAPABILITY_NAMES.filter((name) => hasCapability(caps, name));
+  }, [designSourceType]);
+
+  // Builder-hosted preview URL for fusion-source designs, written into the
+  // design data blob by the "Make it real" migration. Threaded into DesignCanvas
+  // so the fusion preview renders (and so the bridge trust check can validate
+  // the frame's origin against it).
+  const designFusionUrl = useMemo(() => {
+    const raw = (designDataJson as { fusionUrl?: unknown }).fusionUrl;
+    return typeof raw === "string" && raw ? raw : undefined;
+  }, [designDataJson]);
+
+  // §6.1 — open a component instance's source. open-component-source selects the
+  // component root in the editor and emits a navigate app-state; for real-app
+  // (localhost / fusion) sources it also resolves the external file location.
+  const handleComponentSourceJump = useCallback(
+    ({ nodeId }: { nodeId: string; componentName: string }) => {
+      if (!id || !nodeId) return;
+      openComponentSourceMutation.mutate(
+        { designId: id, nodeId, fileId: activeFileId ?? undefined } as any,
+        {
+          onError: () => {
+            toast.error(
+              "Could not open component source" /* i18n-ignore edge-case jump failure */,
+            );
+          },
+        },
+      );
+    },
+    [id, activeFileId, openComponentSourceMutation],
+  );
+
+  // The selected node id, when it already is a recognised component instance —
+  // unlocks the contextual Component section at the top of the Design tab.
+  const selectedComponentNodeId = useMemo(() => {
+    if (!selectedCodeLayerNode) return undefined;
+    return isComponentInstance(selectedCodeLayerNode)
+      ? selectedCodeLayerNode.id
+      : undefined;
+  }, [selectedCodeLayerNode]);
+
+  // A friendly default name for the create-component dialog, derived from the
+  // selected element's layer name / tag.
+  const defaultComponentName = useMemo(() => {
+    if (selectedCodeLayerNode?.layerName)
+      return selectedCodeLayerNode.layerName;
+    if (selectedElement?.tagName) {
+      const tag = selectedElement.tagName;
+      return tag.charAt(0).toUpperCase() + tag.slice(1);
+    }
+    return "Component";
+  }, [selectedCodeLayerNode?.layerName, selectedElement?.tagName]);
+
+  // Outer HTML of the selection — backs the inline/Alpine "Inspect code" view.
+  const selectedElementOuterHtml = useMemo(() => {
+    if (!selectedElement?.selector) return null;
+    return (
+      selectedElement.htmlContent ??
+      getElementOuterHtml(activeContent, selectedElement.selector)
+    );
+  }, [activeContent, selectedElement?.selector, selectedElement?.htmlContent]);
+
+  // §6.3 — the motion-dock target: the selected element's literal
+  // `data-agent-native-node-id` (the value the motion compiler + preview bridge
+  // match on, NOT the hashed projection id) plus a friendly label. Single-screen
+  // mode auto-stamps every selectable node with this attribute (see the
+  // ensureCodeLayerNodeIdsInHtml effect), so a selection reliably resolves to a
+  // stable node id here. `null` when nothing animatable is selected — the dock
+  // then disables its "Add track" affordance.
+  const motionSelectedTarget = useMemo<{
+    nodeId: string;
+    label: string;
+  } | null>(() => {
+    if (!selectedCodeLayerNode) return null;
+    const nodeId =
+      selectedCodeLayerNode.dataAttributes["data-agent-native-node-id"]?.trim();
+    if (!nodeId) return null;
+    const label =
+      selectedCodeLayerNode.layerName ||
+      selectedElement?.tagName ||
+      "Selected element";
+    return { nodeId, label };
+  }, [selectedCodeLayerNode, selectedElement?.tagName]);
+
+  // Serialisable subset of the dock's tracks for the DesignCanvas motion-preview
+  // bridge. Strips the UI-only `label` field. Only populated while the dock is
+  // open so a closed dock never leaves preview overrides on the canvas; an empty
+  // array makes DesignCanvas send `motion-preview-clear`. Scrubbing previews
+  // these tracks live in the iframe — it never writes (that is "Write to CSS").
+  const motionTracksWire = useMemo<MotionTrackWire[]>(() => {
+    if (!motionDockOpen || motionTracks.length === 0) return [];
+    return motionTracks.map(({ label: _label, ...track }) => track);
+  }, [motionDockOpen, motionTracks]);
+
+  const inspectCodeData = useMemo<InspectCodeData | undefined>(() => {
+    if (!selectedElement) return undefined;
+    // Inline/Alpine: the design HTML is the source — show the element's HTML.
+    // Real-app source resolution (vscode:// deep link) requires the
+    // resolveNodeToFile bridge op, which is wired through open-component-source
+    // when an external file path is available; until that round-trip is hooked
+    // up here the popover shows the projected HTML for all source types.
+    return { html: selectedElementOuterHtml, sourceLocation: null };
+  }, [selectedElement, selectedElementOuterHtml]);
+
+  const handleCreateComponent = useCallback(
+    (name: string) => {
+      if (!id || !selectedElement) return;
+      const nodeId = selectedElementLayerId ?? undefined;
+      const selector = selectedCanvasSelector ?? selectedElement.selector;
+      createComponentMutation.mutate(
+        { designId: id, nodeId, selector, name } as any,
+        {
+          onSuccess: () => {
+            queryClient.invalidateQueries({
+              queryKey: ["action", "get-design"],
+            });
+            toast.success(t("designEditor.toasts.componentCreated"));
+          },
+          onError: () => {
+            toast.error(t("designEditor.toasts.componentCreateFailed"));
+          },
+        },
+      );
+
+      // Follow-up: ask the Design agent to extract props and replace repeated
+      // instances with this component. The deterministic annotate above is the
+      // core; this is an enhancement that runs in the agent chat.
+      sendToAgentChat({
+        message: `Extract props for the "${name}" component and replace repeated instances on this design with it.`,
+        context: [
+          `Design id: "${id}".`,
+          selectedElement.selector
+            ? `Component root selector: ${selectedElement.selector}.`
+            : "",
+          nodeId ? `Component root node id: ${nodeId}.` : "",
+          `The element was just annotated with data-agent-native-component="${name}".`,
+          "Call view-screen first, then use get-code-layer-projection to find repeated instances, and apply-visual-edit / apply-component-prop-edit to converge them on this component with data-agent-native-prop-* props.",
+        ]
+          .filter(Boolean)
+          .join("\n"),
+        submit: true,
+        openSidebar: true,
+      });
+    },
+    [
+      id,
+      selectedElement,
+      selectedElementLayerId,
+      selectedCanvasSelector,
+      createComponentMutation,
+      queryClient,
+      t,
+    ],
+  );
+
   const hoveredCodeLayerNode = useMemo(() => {
     if (!hoveredElement) return null;
     if (isScreenRootElementInfo(hoveredElement)) return null;
@@ -4923,6 +5692,40 @@ export default function DesignEditor() {
       } = {},
     ) => {
       if (!activeFile || !canEditDesignRef.current) return;
+      const previousContent =
+        collabContentFileIdRef.current === activeFile.id &&
+        typeof collabContentRef.current === "string"
+          ? collabContentRef.current
+          : (activeFile.content ?? "");
+      const yjsHistoryAvailable = Boolean(
+        ydoc && isSynced && undoManagerRef.current,
+      );
+      if (
+        !suppressContentHistoryRef.current &&
+        !yjsHistoryAvailable &&
+        previousContent !== nextContent
+      ) {
+        contentUndoStackRef.current = [
+          ...contentUndoStackRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
+          {
+            fileId: activeFile.id,
+            before: previousContent,
+            after: nextContent,
+          },
+        ];
+        contentRedoStackRef.current = [];
+        historyOrderRef.current = [
+          ...historyOrderRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
+          "content",
+        ];
+        redoOrderRef.current = [];
+        syncUndoRedoState();
+      }
+      markPendingLocalFileContent(
+        activeFile.id,
+        nextContent,
+        activeFile.updatedAt,
+      );
       setCollabContent(nextContent);
       setCollabContentFileId(activeFile.id);
       lastLocalContentRef.current = nextContent;
@@ -4976,9 +5779,11 @@ export default function DesignEditor() {
       activeFile,
       id,
       isSynced,
+      markPendingLocalFileContent,
       queryClient,
       queueFileContentSave,
       replacePreviewContent,
+      syncUndoRedoState,
       ydoc,
     ],
   );
@@ -4994,6 +5799,8 @@ export default function DesignEditor() {
         applyLocalContentUpdate(nextContent, options);
         return;
       }
+      const previousFile = files.find((file) => file.id === fileId);
+      markPendingLocalFileContent(fileId, nextContent, previousFile?.updatedAt);
       queryClient.setQueryData(["action", "get-design", { id }], (old: any) => {
         if (!old || typeof old !== "object" || !Array.isArray(old.files)) {
           return old;
@@ -5011,7 +5818,15 @@ export default function DesignEditor() {
         syncCollab: true,
       });
     },
-    [activeFile?.id, applyLocalContentUpdate, id, queryClient, saveFileContent],
+    [
+      activeFile?.id,
+      applyLocalContentUpdate,
+      files,
+      id,
+      markPendingLocalFileContent,
+      queryClient,
+      saveFileContent,
+    ],
   );
 
   const handleCreatePrimitive = useCallback(
@@ -5085,8 +5900,12 @@ export default function DesignEditor() {
 
   const handlePrimitiveCreated = useCallback(
     (screenId: string, nodeId: string) => {
+      // B2/B4 fix: stay in overview mode after drawing a primitive.  The user
+      // drew a shape on the board — they should remain on the board with the
+      // new primitive selected, matching Figma behaviour.  We activate the
+      // target screen (so the layers panel shows its content) and select the
+      // new node, but do NOT switch to single/full view.
       pendingOverviewScreenSelectionRef.current = null;
-      viewModeRef.current = "single";
       setActiveFileId(screenId);
       setSelectedElement(null);
       setHoveredElement(null);
@@ -5094,7 +5913,7 @@ export default function DesignEditor() {
       setOverviewSelectedScreenIds([]);
       setActiveTool("move");
       setMode("edit");
-      setViewMode("single");
+      // viewMode stays at "overview" — no setViewMode("single") call here.
     },
     [],
   );
@@ -5329,6 +6148,58 @@ export default function DesignEditor() {
       mode,
       activeTool,
       inspectorTab: activeInspectorTab,
+      // §8 DesignNavigationState additions — dock + breakpoint context
+      dock: { kind: "motion" as const, open: motionDockOpen },
+      motion: {
+        previewing: false,
+        playheadMs: 0,
+        timelineId: undefined as string | undefined,
+        selectedTrackId: undefined as string | undefined,
+        selectedKeyframeId: undefined as string | undefined,
+      },
+      // §8 breakpoint fields — "auto" = no specific breakpoint focused.
+      breakpoint: (activeBreakpointWidthState != null
+        ? activeBreakpointWidthState < 500
+          ? "mobile"
+          : activeBreakpointWidthState < 1024
+            ? "tablet"
+            : "desktop"
+        : "auto") as "auto" | "mobile" | "tablet" | "desktop",
+      activeBreakpointId: (() => {
+        if (activeBreakpointWidthState == null) return undefined;
+        try {
+          const raw = (designDataJson as Record<string, unknown>)
+            ?.breakpointSet;
+          if (
+            raw &&
+            typeof raw === "object" &&
+            Array.isArray((raw as Record<string, unknown>).breakpoints)
+          ) {
+            const bps = (
+              raw as { breakpoints: Array<{ id: string; widthPx: number }> }
+            ).breakpoints;
+            return bps.find((b) => b.widthPx === activeBreakpointWidthState)
+              ?.id;
+          }
+        } catch {
+          // ignore
+        }
+        return undefined;
+      })(),
+      breakpointSetId: (() => {
+        try {
+          const raw = (designDataJson as Record<string, unknown>)
+            ?.breakpointSet;
+          if (raw && typeof raw === "object") {
+            return (raw as Record<string, unknown>).id as string | undefined;
+          }
+        } catch {
+          // ignore
+        }
+        return undefined;
+      })(),
+      // §8 — active design state (null = Default / live view)
+      selectedStateId,
     };
     (window as any).__designSelection = selection;
     const persistedSelection = {
@@ -5344,6 +6215,12 @@ export default function DesignEditor() {
       mode: selection.mode,
       activeTool: selection.activeTool,
       inspectorTab: selection.inspectorTab,
+      dock: selection.dock,
+      motion: selection.motion,
+      breakpoint: selection.breakpoint,
+      activeBreakpointId: selection.activeBreakpointId,
+      breakpointSetId: selection.breakpointSetId,
+      selectedStateId: selection.selectedStateId,
       ownerId: designSelectionOwnerIdRef.current,
     };
     const persistedKey = JSON.stringify(persistedSelection);
@@ -5381,6 +6258,10 @@ export default function DesignEditor() {
     overviewSelectedScreenIds,
     viewMode,
     zoom,
+    motionDockOpen,
+    activeBreakpointWidthState,
+    designDataJson,
+    selectedStateId,
   ]);
 
   useEffect(() => {
@@ -5751,12 +6632,49 @@ export default function DesignEditor() {
       const nextContent = applyInlineStylesToHtml(baseContent, selector, {
         ...Object.fromEntries(entries),
       });
+      // §6.4 — Breakpoint-scoped class editing. Reuses the `projection` and
+      // `targetNode` resolved above for the patch-proof block (same baseContent).
+      // When an active non-base breakpoint frame is set, attempt to route class
+      // edits through `kind: "responsive-class"` so the write targets only that
+      // breakpoint prefix (e.g. "md:text-lg" instead of "text-lg").  This fires
+      // when the element has a `responsive-class` EditCapability, which signals
+      // that its values come from Tailwind class tokens and can carry a prefix.
+      // Falls back to `kind: "style"` (inline attribute) for any entry that
+      // fails the responsive path (e.g. raw CSS values with no Tailwind utility).
+      const activeBreakpointPrefix =
+        activeBreakpointWidthState != null
+          ? widthToPrefix(activeBreakpointWidthState)
+          : null;
+      // `responsive-class` is a code-layer EditCapability kind not yet reflected
+      // in the ElementInfo type union (types.ts); cast to string for the check.
+      const hasResponsiveCapability =
+        activeBreakpointPrefix != null &&
+        activeBreakpointPrefix !== "base" &&
+        selectedElement?.editCapabilities?.some(
+          (cap) => (cap.kind as string) === "responsive-class",
+        );
       const stylePatch = entries.reduce<{
         content: string;
         failed: string | null;
       }>(
         (current, [property, value]) => {
           if (current.failed) return current;
+          // Try responsive-class path first when appropriate.
+          if (hasResponsiveCapability && activeBreakpointPrefix) {
+            const rcPatch = applyVisualEdit(current.content, {
+              kind: "responsive-class",
+              target: targetNode ? { nodeId: targetNode.id } : { selector },
+              prefix: activeBreakpointPrefix,
+              operation: "replace",
+              utility: value,
+              stem: property,
+            });
+            if (rcPatch.result.status === "applied") {
+              return { content: rcPatch.content, failed: null };
+            }
+            // Responsive-class path didn't apply (e.g. value is a raw CSS value,
+            // not a Tailwind utility); fall through to the inline-style path.
+          }
           const patch = applyVisualEdit(current.content, {
             kind: "style",
             target: targetNode ? { nodeId: targetNode.id } : { selector },
@@ -5865,6 +6783,7 @@ export default function DesignEditor() {
     [
       activeContent,
       activeFile,
+      activeBreakpointWidthState,
       canEditDesign,
       queueFileContentSave,
       selectedElement,
@@ -6490,7 +7409,6 @@ export default function DesignEditor() {
     setHasCanvasClipboard(true);
     try {
       await navigator.clipboard.writeText(html);
-      toast.success(t("designEditor.toasts.copied"));
     } catch {
       toast.error(t("designEditor.toasts.clipboardBlocked"));
     }
@@ -6499,7 +7417,53 @@ export default function DesignEditor() {
   const handlePasteSelection = useCallback(
     (position?: { x: number; y: number }) => {
       if (!activeFile || !canEditDesign || !copiedLayerHtmlRef.current) return;
-      // Explicit positions (e.g. "Paste here" at the cursor) are honored as-is.
+
+      // B7 fix: when an element is selected and no explicit canvas position was
+      // given, insert the clone as an in-flow sibling right AFTER the selected
+      // element.  Strip any position/left/top from the clone so it participates
+      // in normal document flow instead of being an absolutely-positioned body
+      // child.  Fall back to the old position-based clone when nothing is
+      // selected or a "Paste here" position is provided.
+      if (!position && selectedElement?.selector) {
+        const selector = selectedCanvasSelector ?? selectedElement.selector;
+        // Strip position properties from the pasted clone so it becomes an
+        // in-flow sibling (not absolute).
+        const strippedHtml = (() => {
+          try {
+            const parser = new DOMParser();
+            const tmp = parser.parseFromString(
+              `<template>${copiedLayerHtmlRef.current!}</template>`,
+              "text/html",
+            );
+            const root =
+              tmp.querySelector("template")?.content.firstElementChild ??
+              tmp.body.firstElementChild;
+            if (root && root instanceof HTMLElement) {
+              root.style.position = "";
+              root.style.left = "";
+              root.style.top = "";
+              root.style.right = "";
+              root.style.bottom = "";
+            }
+            return root?.outerHTML ?? copiedLayerHtmlRef.current!;
+          } catch {
+            return copiedLayerHtmlRef.current!;
+          }
+        })();
+
+        const nextContent = insertClonedHtmlLayer(activeContent, strippedHtml, {
+          targetSelectors: [selector],
+          placement: "after",
+        });
+        if (nextContent) {
+          pasteCascadeRef.current += 1;
+          applyLocalContentUpdate(nextContent);
+          return;
+        }
+        // Fall through to position-based clone if insert failed.
+      }
+
+      // Explicit positions (e.g. "Paste here" at the cursor) are honored as-is.
       // Keyboard pastes land near the source layer and cascade so repeats don't
       // stack exactly.
       const targetPosition =
@@ -6519,9 +7483,15 @@ export default function DesignEditor() {
       if (!nextContent) return;
       if (!position) pasteCascadeRef.current += 1;
       applyLocalContentUpdate(nextContent);
-      toast.success(t("designEditor.toasts.pasted"), { duration: 3000 });
     },
-    [activeContent, activeFile, applyLocalContentUpdate, canEditDesign, t],
+    [
+      activeContent,
+      activeFile,
+      applyLocalContentUpdate,
+      canEditDesign,
+      selectedCanvasSelector,
+      selectedElement,
+    ],
   );
 
   const handlePasteOverSelection = useCallback(() => {
@@ -6535,7 +7505,6 @@ export default function DesignEditor() {
       );
       if (!nextContent) return;
       applyLocalContentUpdate(nextContent);
-      toast.success(t("designEditor.toasts.pasted"));
     } else {
       handlePasteSelection();
     }
@@ -6545,20 +7514,46 @@ export default function DesignEditor() {
     applyLocalContentUpdate,
     handlePasteSelection,
     selectedElement,
-    t,
   ]);
 
   const handleDuplicateSelection = useCallback(() => {
     if (!canEditDesign) return;
     if (selectedElement?.selector) {
       const html = getElementOuterHtml(activeContent, selectedElement.selector);
-      const rect = selectedElement.boundingRect;
-      const nextContent = html
-        ? cloneHtmlLayerAtPosition(activeContent, html, {
-            x: rect.x + 16,
-            y: rect.y + 16,
-          })
-        : null;
+      if (!html) {
+        toast.error(t("designEditor.toasts.duplicateElementFailed"));
+        return;
+      }
+      // B7 fix: duplicate inserts the clone as an in-flow sibling right AFTER
+      // the original — not as an absolutely-positioned body child.  Strip
+      // position/left/top so it joins normal document flow.
+      const selector = selectedCanvasSelector ?? selectedElement.selector;
+      const strippedHtml = (() => {
+        try {
+          const parser = new DOMParser();
+          const tmp = parser.parseFromString(
+            `<template>${html}</template>`,
+            "text/html",
+          );
+          const root =
+            tmp.querySelector("template")?.content.firstElementChild ??
+            tmp.body.firstElementChild;
+          if (root && root instanceof HTMLElement) {
+            root.style.position = "";
+            root.style.left = "";
+            root.style.top = "";
+            root.style.right = "";
+            root.style.bottom = "";
+          }
+          return root?.outerHTML ?? html;
+        } catch {
+          return html;
+        }
+      })();
+      const nextContent = insertClonedHtmlLayer(activeContent, strippedHtml, {
+        targetSelectors: [selector],
+        placement: "after",
+      });
       if (nextContent) {
         applyLocalContentUpdate(nextContent);
       } else {
@@ -6573,7 +7568,9 @@ export default function DesignEditor() {
     applyLocalContentUpdate,
     canEditDesign,
     handleDuplicateScreen,
+    selectedCanvasSelector,
     selectedElement,
+    t,
   ]);
 
   const handleDeleteSelection = useCallback(() => {
@@ -6639,6 +7636,402 @@ export default function DesignEditor() {
     selectedLayerIdsState,
   ]);
 
+  // Wrap the current multi-layer selection into a new group container.
+  const handleGroupSelection = useCallback(() => {
+    if (!canEditDesign || !activeFile) return;
+    // Collect the DOM-node layer ids that belong to the active screen.
+    // Build a set of ids present in the active content so stale ids from
+    // other files (which can persist in selectedLayerIdsState after a
+    // cross-screen layers-panel selection) are excluded before wrapNodes
+    // runs against activeContent. Without this filter, cross-file ids
+    // cause wrapNodes to return "conflict" even for a valid same-file
+    // selection.
+    const fileIds = new Set(files.map((f) => f.id));
+    const activeNodeIdSet = buildActiveFileNodeIdSet(
+      buildCodeLayerProjection(activeContent),
+    );
+    const nodeIds = selectedLayerIdsState.filter(
+      (id) =>
+        !id.startsWith("__") && !fileIds.has(id) && activeNodeIdSet.has(id),
+    );
+    if (nodeIds.length < 2) return;
+    const patch = applyVisualEdit(activeContent, {
+      kind: "wrapNodes",
+      targetIds: nodeIds,
+      autoLayout: false,
+    });
+    if (patch.result.status !== "applied") {
+      toast.error(
+        codeLayerPatchMessage(
+          patch.result.message,
+          t("designEditor.toasts.layerMoveFailed"),
+        ),
+        { duration: 4000 },
+      );
+      return;
+    }
+    applyLocalContentUpdate(patch.content, { skipPreview: true });
+    // Select the new wrapper node if the substrate reported its id.
+    const wrapperId = patch.result.wrapperNodeId;
+    if (wrapperId) {
+      // Find the projection node whose data-agent-native-node-id matches.
+      const wrapperNode = patch.projection.nodes.find(
+        (n) => n.dataAttributes["data-agent-native-node-id"] === wrapperId,
+      );
+      if (wrapperNode) {
+        setSelectedLayerIdsState([wrapperNode.id]);
+        setSelectedElement(elementInfoFromCodeLayerNode(wrapperNode));
+      }
+    }
+  }, [
+    activeContent,
+    activeFile,
+    applyLocalContentUpdate,
+    canEditDesign,
+    files,
+    selectedLayerIdsState,
+    t,
+  ]);
+
+  // Unwrap the currently selected single-container layer.
+  const handleUngroupSelection = useCallback(() => {
+    if (!canEditDesign || !activeFile) return;
+    // Filter to active-file nodes only (mirrors handleGroupSelection fix).
+    // A stale id from another file must not be passed to unwrap or it will
+    // fail with "conflict" even though the actual selection is valid.
+    const fileIds = new Set(files.map((f) => f.id));
+    const activeNodeIdSet = buildActiveFileNodeIdSet(
+      buildCodeLayerProjection(activeContent),
+    );
+    const nodeIds = selectedLayerIdsState.filter(
+      (id) =>
+        !id.startsWith("__") && !fileIds.has(id) && activeNodeIdSet.has(id),
+    );
+    const targetId = nodeIds[0];
+    if (!targetId) return;
+    const patch = applyVisualEdit(activeContent, {
+      kind: "unwrap",
+      targetId,
+    });
+    if (patch.result.status !== "applied") {
+      toast.error(
+        codeLayerPatchMessage(
+          patch.result.message,
+          t("designEditor.toasts.layerMoveFailed"),
+        ),
+        { duration: 4000 },
+      );
+      return;
+    }
+    applyLocalContentUpdate(patch.content, { skipPreview: true });
+    setSelectedElement(null);
+    setSelectedLayerIdsState([]);
+  }, [
+    activeContent,
+    activeFile,
+    applyLocalContentUpdate,
+    canEditDesign,
+    files,
+    selectedLayerIdsState,
+    t,
+  ]);
+
+  /**
+   * Convert the selected container to full auto-layout. Applies the
+   * { kind: "autoLayout", enabled: true } substrate intent which sets
+   * display:flex on the target AND strips position:absolute/left/top/right/bottom
+   * from its direct children so they become flow children.
+   */
+  const handleAutoLayoutConvert = useCallback(
+    (
+      targetNodeId: string,
+      opts?: { direction?: "row" | "column"; gap?: string },
+    ) => {
+      if (!canEditDesign || !activeFile) return;
+      const patch = applyVisualEdit(activeContent, {
+        kind: "autoLayout",
+        targetId: targetNodeId,
+        enabled: true,
+        direction: opts?.direction ?? "row",
+        gap: opts?.gap ?? "8px",
+      });
+      if (patch.result.status !== "applied") {
+        toast.error(
+          codeLayerPatchMessage(
+            patch.result.message,
+            t("designEditor.toasts.layerMoveFailed"),
+          ),
+          { duration: 4000 },
+        );
+        return;
+      }
+      applyLocalContentUpdate(patch.content, { skipPreview: true });
+      // Re-select the container so the inspector refreshes its layout state.
+      const containerNode = patch.projection.nodes.find(
+        (n) =>
+          n.dataAttributes["data-agent-native-node-id"] === targetNodeId ||
+          n.id === targetNodeId,
+      );
+      if (containerNode) {
+        setSelectedLayerIdsState([containerNode.id]);
+        setSelectedElement(elementInfoFromCodeLayerNode(containerNode));
+      }
+    },
+    [activeContent, activeFile, applyLocalContentUpdate, canEditDesign, t],
+  );
+
+  /**
+   * Handle a primitive being drag-dropped onto another primitive in the
+   * MultiScreenCanvas overview (CONTRACT: onPrimitiveReparent prop).
+   *
+   * Same-screen: applies a moveNode intent then strips the moved node's
+   * absolute positioning so it becomes a flow child of the container.
+   * Cross-screen: uses moveNodeBetweenDocuments and persists both files.
+   */
+  const handleOverviewPrimitiveReparent = useCallback(
+    ({
+      sourceNodeId,
+      sourceScreenId,
+      targetNodeId,
+      targetScreenId,
+    }: {
+      sourceNodeId: string;
+      sourceScreenId: string;
+      targetNodeId: string;
+      targetScreenId: string;
+      placement: "inside";
+    }) => {
+      if (!canEditDesign) return;
+
+      if (sourceScreenId === targetScreenId) {
+        // --- Same-screen reparent ---
+        const baseContent = getScreenContent(sourceScreenId);
+        if (!baseContent) return;
+
+        // 1. Move the node inside the target container.
+        const movePatch = applyVisualEdit(baseContent, {
+          kind: "moveNode",
+          target: { nodeId: sourceNodeId },
+          anchor: { nodeId: targetNodeId },
+          placement: "inside",
+        });
+        if (movePatch.result.status !== "applied") {
+          toast.error(
+            codeLayerPatchMessage(
+              movePatch.result.message,
+              t("designEditor.toasts.layerMoveFailed"),
+            ),
+            { duration: 4000 },
+          );
+          return;
+        }
+
+        // 2. Strip absolute positioning from the moved node so it flows naturally.
+        // Use removeAbsolutePositioningFromNodeInHtml (DOM-based) because the
+        // applyVisualEdit substrate rejects empty-string values in isSafeStyleValue,
+        // making applyVisualEdit({kind:"style",value:""}) a silent no-op.
+        const movedNodeAttrId =
+          movePatch.projection.nodes.find(
+            (n) =>
+              n.dataAttributes["data-agent-native-node-id"] === sourceNodeId ||
+              n.id === sourceNodeId,
+          )?.dataAttributes["data-agent-native-node-id"] ?? sourceNodeId;
+        const strippedContent = removeAbsolutePositioningFromNodeInHtml(
+          movePatch.content,
+          movedNodeAttrId,
+        );
+
+        applyFileContentUpdate(sourceScreenId, strippedContent, {
+          skipPreview: true,
+        });
+
+        // Re-select the moved node.
+        const nextProjection = buildCodeLayerProjection(strippedContent);
+        const movedNodeAfter = nextProjection.nodes.find(
+          (n) =>
+            n.dataAttributes["data-agent-native-node-id"] === sourceNodeId ||
+            n.id === sourceNodeId,
+        );
+        if (movedNodeAfter) {
+          setSelectedLayerIdsState([movedNodeAfter.id]);
+          setSelectedElement(elementInfoFromCodeLayerNode(movedNodeAfter));
+        }
+        return;
+      }
+
+      // --- Cross-screen reparent ---
+      const sourceContent = getScreenContent(sourceScreenId);
+      const destContent = getScreenContent(targetScreenId);
+      if (!sourceContent || !destContent) return;
+
+      // Resolve data-agent-native-node-id attributes for moveNodeBetweenDocuments.
+      const sourceProjection = buildCodeLayerProjection(sourceContent);
+      const destProjection = buildCodeLayerProjection(destContent);
+      const sourceNode = sourceProjection.nodes.find(
+        (n) =>
+          n.dataAttributes["data-agent-native-node-id"] === sourceNodeId ||
+          n.id === sourceNodeId,
+      );
+      const anchorNode = destProjection.nodes.find(
+        (n) =>
+          n.dataAttributes["data-agent-native-node-id"] === targetNodeId ||
+          n.id === targetNodeId,
+      );
+      const nodeAttrId =
+        sourceNode?.dataAttributes["data-agent-native-node-id"] ?? sourceNodeId;
+      const anchorAttrId =
+        anchorNode?.dataAttributes["data-agent-native-node-id"] ?? targetNodeId;
+
+      const result = moveNodeBetweenDocuments(sourceContent, destContent, {
+        nodeId: nodeAttrId,
+        anchorNodeId: anchorAttrId,
+        placement: "inside",
+      });
+      if (result.status !== "applied") {
+        toast.error(
+          codeLayerPatchMessage(
+            result.message,
+            t("designEditor.toasts.layerMoveFailed"),
+          ),
+          { duration: 4000 },
+        );
+        return;
+      }
+
+      // Strip absolute positioning from the moved node in the destination.
+      // Use removeAbsolutePositioningFromNodeInHtml (DOM-based) because
+      // applyVisualEdit({kind:"style",value:""}) is a silent no-op (the
+      // substrate rejects empty-string values in isSafeStyleValue). Use
+      // result.movedNodeId (the final id in destHtml, which may differ from
+      // nodeAttrId when a collision triggered an id re-stamp) so the strip and
+      // re-selection always find the correct element.
+      const destNodeAttrId = result.movedNodeId ?? nodeAttrId;
+      const strippedDest = removeAbsolutePositioningFromNodeInHtml(
+        result.destHtml,
+        destNodeAttrId,
+      );
+
+      applyFileContentUpdate(sourceScreenId, result.sourceHtml, {
+        refreshPreview: true,
+      });
+      applyFileContentUpdate(targetScreenId, strippedDest, {
+        refreshPreview: true,
+      });
+
+      // Re-select the moved node in the destination.
+      const finalProjection = buildCodeLayerProjection(strippedDest);
+      const movedNodeFinal = finalProjection.nodes.find(
+        (n) => n.dataAttributes["data-agent-native-node-id"] === destNodeAttrId,
+      );
+      if (movedNodeFinal) {
+        setSelectedLayerIdsState([movedNodeFinal.id]);
+        setSelectedElement(elementInfoFromCodeLayerNode(movedNodeFinal));
+      }
+    },
+    [applyFileContentUpdate, canEditDesign, getScreenContent, t],
+  );
+
+  /**
+   * Cross-screen element drag-drop handler (CONTRACT: onCrossScreenElementDrop
+   * prop on MultiScreenCanvas).
+   *
+   * The bridge in the source screen's iframe posts phase:"end" with the
+   * selector / sourceNodeId of the dragged element.  MultiScreenCanvas maps
+   * the board point to a target screen and calls this handler.  We resolve
+   * both screens' content, identify the node by its data-agent-native-node-id
+   * (falling back to a projection lookup by selector when only the selector is
+   * available), call moveNodeBetweenDocuments to move it into the target
+   * screen's <body>, persist both files, switch the active screen to the
+   * target, and select the moved node — keeping viewMode "overview" throughout.
+   */
+  const handleCrossScreenElementDrop = useCallback(
+    ({
+      sourceSelector,
+      sourceNodeId,
+      sourceScreenId,
+      targetScreenId,
+    }: {
+      sourceSelector: string;
+      sourceNodeId?: string;
+      sourceScreenId: string;
+      targetScreenId: string;
+    }) => {
+      if (!canEditDesign) return;
+      if (sourceScreenId === targetScreenId) return;
+
+      const sourceContent = getScreenContent(sourceScreenId);
+      const destContent = getScreenContent(targetScreenId);
+      if (!sourceContent || !destContent) return;
+
+      // Resolve the data-agent-native-node-id that moveNodeBetweenDocuments
+      // uses as a stable key.  Prefer the bridge-supplied sourceNodeId when it
+      // looks like a node-attr id; otherwise look up via selector projection.
+      const sourceProjection = buildCodeLayerProjection(sourceContent);
+      const resolvedSourceNode = sourceNodeId
+        ? (sourceProjection.nodes.find(
+            (n) =>
+              n.dataAttributes["data-agent-native-node-id"] === sourceNodeId ||
+              n.id === sourceNodeId,
+          ) ??
+          resolveCodeLayerNodeFromBridge(
+            sourceProjection,
+            sourceSelector,
+            sourceNodeId,
+          ))
+        : resolveCodeLayerNodeFromBridge(sourceProjection, sourceSelector);
+      const nodeAttrId =
+        resolvedSourceNode?.dataAttributes["data-agent-native-node-id"] ??
+        sourceNodeId ??
+        sourceSelector;
+
+      const result = moveNodeBetweenDocuments(sourceContent, destContent, {
+        nodeId: nodeAttrId,
+        placement: "inside",
+      });
+      if (result.status !== "applied") {
+        toast.error(
+          codeLayerPatchMessage(
+            result.message,
+            t("designEditor.toasts.layerMoveFailed"),
+          ),
+          { duration: 4000 },
+        );
+        return;
+      }
+
+      // Strip absolute positioning from the moved node in the destination so
+      // it flows naturally as a body child (mirrors handleOverviewPrimitiveReparent).
+      // Use result.movedNodeId (the final id in destHtml, which may differ from
+      // nodeAttrId when a collision triggered an id re-stamp) so the strip and
+      // re-selection always find the correct element.
+      const destNodeAttrId = result.movedNodeId ?? nodeAttrId;
+      const strippedDest = removeAbsolutePositioningFromNodeInHtml(
+        result.destHtml,
+        destNodeAttrId,
+      );
+
+      applyFileContentUpdate(sourceScreenId, result.sourceHtml, {
+        refreshPreview: true,
+      });
+      applyFileContentUpdate(targetScreenId, strippedDest, {
+        refreshPreview: true,
+      });
+
+      // Switch active screen to the target and select the moved node; viewMode
+      // stays "overview" (no setViewMode call).
+      setActiveFileId(targetScreenId);
+      const finalProjection = buildCodeLayerProjection(strippedDest);
+      const movedNodeFinal = finalProjection.nodes.find(
+        (n) => n.dataAttributes["data-agent-native-node-id"] === destNodeAttrId,
+      );
+      if (movedNodeFinal) {
+        setSelectedLayerIdsState([movedNodeFinal.id]);
+        setSelectedElement(elementInfoFromCodeLayerNode(movedNodeFinal));
+      }
+    },
+    [applyFileContentUpdate, canEditDesign, getScreenContent, t],
+  );
+
   const handleCutSelection = useCallback(async () => {
     if (!selectedElement?.selector) return;
     // Copy first (populates the internal clipboard ref even if the async
@@ -6737,8 +8130,7 @@ export default function DesignEditor() {
       textAlign: selectedElement.computedStyles.textAlign,
     };
     setHasPropsClipboard(true);
-    toast.success(t("designEditor.toasts.propsCopied"));
-  }, [selectedElement, t]);
+  }, [selectedElement]);
 
   const handlePasteProps = useCallback(() => {
     if (!canEditDesign) return;
@@ -6749,8 +8141,7 @@ export default function DesignEditor() {
       ),
     );
     commitVisualStyles(selectedElement.selector, styles);
-    toast.success(t("designEditor.toasts.propsPasted"));
-  }, [canEditDesign, commitVisualStyles, selectedElement, t]);
+  }, [canEditDesign, commitVisualStyles, selectedElement]);
 
   const changeSelectedZIndex = useCallback(
     (mode: "forward" | "front" | "backward" | "back") => {
@@ -6810,31 +8201,67 @@ export default function DesignEditor() {
     if (!canEditDesign) return;
     const um = undoManagerRef.current;
     const undoContent = () => {
-      if (!um || !um.canUndo()) return false;
-      um.undo();
-      if (ydoc && activeFile) {
-        const next = ydoc.getText("content").toString();
-        lastLocalContentRef.current = next;
-        queueFileContentSave(activeFile.id, next, {
-          syncCollab: !(ydoc && isSynced),
-        });
-        if (!replacePreviewContent(next)) {
-          setContentRenderRevision((revision) => revision + 1);
+      if (um?.canUndo()) {
+        um.undo();
+        if (ydoc && activeFile) {
+          const next = ydoc.getText("content").toString();
+          markPendingLocalFileContent(
+            activeFile.id,
+            next,
+            activeFile.updatedAt,
+          );
+          lastLocalContentRef.current = next;
+          queueFileContentSave(activeFile.id, next, {
+            syncCollab: !(ydoc && isSynced),
+          });
+          if (!replacePreviewContent(next)) {
+            setContentRenderRevision((revision) => revision + 1);
+          }
+          // Clear stale selection if the undo removed the selected element.
+          setSelectedElement((prev) => {
+            if (!prev) return prev;
+            return elementInfoExistsInContent(next, prev) ? prev : null;
+          });
+          setHoveredElement((prev) => {
+            if (!prev) return prev;
+            return elementInfoExistsInContent(next, prev) ? prev : null;
+          });
         }
-        // Clear stale selection if the undo removed the selected element.
-        setSelectedElement((prev) => {
-          if (!prev) return prev;
-          return elementInfoExistsInContent(next, prev) ? prev : null;
-        });
-        setHoveredElement((prev) => {
-          if (!prev) return prev;
-          return elementInfoExistsInContent(next, prev) ? prev : null;
-        });
+        redoOrderRef.current = [
+          ...redoOrderRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
+          "content",
+        ];
+        return true;
       }
+
+      if (!activeFile) return false;
+      const entry = contentUndoStackRef.current.pop();
+      if (!entry || entry.fileId !== activeFile.id) return false;
+      contentRedoStackRef.current = [
+        ...contentRedoStackRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
+        entry,
+      ];
       redoOrderRef.current = [
         ...redoOrderRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
         "content",
       ];
+      suppressContentHistoryRef.current = true;
+      try {
+        applyLocalContentUpdate(entry.before, {
+          refreshPreview: false,
+          immediateSave: true,
+        });
+      } finally {
+        suppressContentHistoryRef.current = false;
+      }
+      setSelectedElement((prev) => {
+        if (!prev) return prev;
+        return elementInfoExistsInContent(entry.before, prev) ? prev : null;
+      });
+      setHoveredElement((prev) => {
+        if (!prev) return prev;
+        return elementInfoExistsInContent(entry.before, prev) ? prev : null;
+      });
       return true;
     };
     const undoGeometry = () => {
@@ -6870,8 +8297,10 @@ export default function DesignEditor() {
   }, [
     ydoc,
     activeFile,
+    applyLocalContentUpdate,
     canEditDesign,
     isSynced,
+    markPendingLocalFileContent,
     queueFileContentSave,
     replacePreviewContent,
     syncUndoRedoState,
@@ -6882,31 +8311,67 @@ export default function DesignEditor() {
     if (!canEditDesign) return;
     const um = undoManagerRef.current;
     const redoContent = () => {
-      if (!um || !um.canRedo()) return false;
-      um.redo();
-      if (ydoc && activeFile) {
-        const next = ydoc.getText("content").toString();
-        lastLocalContentRef.current = next;
-        queueFileContentSave(activeFile.id, next, {
-          syncCollab: !(ydoc && isSynced),
-        });
-        if (!replacePreviewContent(next)) {
-          setContentRenderRevision((revision) => revision + 1);
+      if (um?.canRedo()) {
+        um.redo();
+        if (ydoc && activeFile) {
+          const next = ydoc.getText("content").toString();
+          markPendingLocalFileContent(
+            activeFile.id,
+            next,
+            activeFile.updatedAt,
+          );
+          lastLocalContentRef.current = next;
+          queueFileContentSave(activeFile.id, next, {
+            syncCollab: !(ydoc && isSynced),
+          });
+          if (!replacePreviewContent(next)) {
+            setContentRenderRevision((revision) => revision + 1);
+          }
+          // Clear stale selection if the redo removed the selected element.
+          setSelectedElement((prev) => {
+            if (!prev) return prev;
+            return elementInfoExistsInContent(next, prev) ? prev : null;
+          });
+          setHoveredElement((prev) => {
+            if (!prev) return prev;
+            return elementInfoExistsInContent(next, prev) ? prev : null;
+          });
         }
-        // Clear stale selection if the redo removed the selected element.
-        setSelectedElement((prev) => {
-          if (!prev) return prev;
-          return elementInfoExistsInContent(next, prev) ? prev : null;
-        });
-        setHoveredElement((prev) => {
-          if (!prev) return prev;
-          return elementInfoExistsInContent(next, prev) ? prev : null;
-        });
+        historyOrderRef.current = [
+          ...historyOrderRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
+          "content",
+        ];
+        return true;
       }
+
+      if (!activeFile) return false;
+      const entry = contentRedoStackRef.current.pop();
+      if (!entry || entry.fileId !== activeFile.id) return false;
+      contentUndoStackRef.current = [
+        ...contentUndoStackRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
+        entry,
+      ];
       historyOrderRef.current = [
         ...historyOrderRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
         "content",
       ];
+      suppressContentHistoryRef.current = true;
+      try {
+        applyLocalContentUpdate(entry.after, {
+          refreshPreview: false,
+          immediateSave: true,
+        });
+      } finally {
+        suppressContentHistoryRef.current = false;
+      }
+      setSelectedElement((prev) => {
+        if (!prev) return prev;
+        return elementInfoExistsInContent(entry.after, prev) ? prev : null;
+      });
+      setHoveredElement((prev) => {
+        if (!prev) return prev;
+        return elementInfoExistsInContent(entry.after, prev) ? prev : null;
+      });
       return true;
     };
     const redoGeometry = () => {
@@ -6942,8 +8407,10 @@ export default function DesignEditor() {
   }, [
     ydoc,
     activeFile,
+    applyLocalContentUpdate,
     canEditDesign,
     isSynced,
+    markPendingLocalFileContent,
     queueFileContentSave,
     replacePreviewContent,
     syncUndoRedoState,
@@ -7382,6 +8849,8 @@ export default function DesignEditor() {
       setTitleDraft(design?.title ?? "");
       setTitleEditing(true);
     },
+    onGroup: canEditDesign ? handleGroupSelection : undefined,
+    onUngroup: canEditDesign ? handleUngroupSelection : undefined,
     onSelectAll: handleSelectAllFrames,
     onUndo: canEditDesign ? handleUndo : undefined,
     onRedo: canEditDesign ? handleRedo : undefined,
@@ -8458,6 +9927,55 @@ ${serializedHtml}
     );
   }, [activeContent, activeFile?.id, builderPreviewUrl, overviewScreens]);
 
+  // §6.4 / §8 — Breakpoints list for the StatesPanel, derived from
+  // designs.data.breakpointSet. Returns a stable empty array when none are set.
+  const statesPanelBreakpoints = useMemo<
+    Array<{ id: string; label: string; widthPx: number }>
+  >(() => {
+    try {
+      const raw = (designDataJson as Record<string, unknown>)?.breakpointSet;
+      if (
+        raw &&
+        typeof raw === "object" &&
+        !Array.isArray(raw) &&
+        Array.isArray((raw as Record<string, unknown>).breakpoints)
+      ) {
+        const bps = (
+          raw as {
+            breakpoints: Array<{
+              id: string;
+              widthPx: number;
+              label?: string;
+            }>;
+          }
+        ).breakpoints;
+        return bps.map((bp) => ({
+          id: bp.id,
+          widthPx: bp.widthPx,
+          label:
+            bp.label ??
+            (bp.widthPx >= 1024
+              ? "Desktop"
+              : bp.widthPx >= 600
+                ? "Tablet"
+                : "Mobile"),
+        }));
+      }
+    } catch {
+      // ignore
+    }
+    return [];
+  }, [designDataJson]);
+
+  // Active breakpoint id for the StatesPanel — "auto" when no frame is focused.
+  const statesPanelActiveBreakpointId = useMemo<string>(() => {
+    if (activeBreakpointWidthState == null) return "auto";
+    const match = statesPanelBreakpoints.find(
+      (bp) => bp.widthPx === activeBreakpointWidthState,
+    );
+    return match?.id ?? "auto";
+  }, [activeBreakpointWidthState, statesPanelBreakpoints]);
+
   const handleOpenDesignPreview = useCallback(() => {
     if (activeScreenPreviewUrl) {
       window.open(activeScreenPreviewUrl, "_blank", "noopener,noreferrer");
@@ -8479,6 +9997,16 @@ ${serializedHtml}
     selectedElementLayerId ??
     activeFile?.id ??
     "";
+  const selectedElementFullViewScreenId =
+    viewMode === "overview" && selectedElement
+      ? selectedElementLayerId
+        ? (codeLayerOwnerByNodeId.get(selectedElementLayerId)?.fileId ??
+          activeFileId)
+        : activeFileId
+      : null;
+  const fullViewScreenIds = selectedElementFullViewScreenId
+    ? [selectedElementFullViewScreenId]
+    : [];
   const activeLayerLocked = Boolean(
     activeLayerId && effectiveCodeLayerState.lockedIds.has(activeLayerId),
   );
@@ -8486,6 +10014,35 @@ ${serializedHtml}
     activeLayerId && effectiveCodeLayerState.hiddenIds.has(activeLayerId),
   );
 
+  // Detect if the active screen is a localhost/local source so we can show a banner.
+  const activeScreenIsLocalSource =
+    viewMode === "single" &&
+    Boolean(activeFile) &&
+    activeOverviewScreen?.sourceType === "localhost";
+  const activeScreenRouteSourceFile = activeScreenIsLocalSource
+    ? getLocalhostRouteSourceFile({
+        sourceFile: activeOverviewScreen?.sourceFile,
+        source: activeOverviewScreen?.source,
+      })
+    : undefined;
+
+  // canGroup: 2+ DOM-node layers selected in the active screen (not file rows).
+  const fileIdSet = new Set(files.map((f) => f.id));
+  const selectedDomLayerIds = selectedLayerIds.filter(
+    (id) => !id.startsWith("__") && !fileIdSet.has(id),
+  );
+  const canGroup =
+    canEditDesign &&
+    viewMode === "single" &&
+    Boolean(activeFile) &&
+    selectedDomLayerIds.length >= 2;
+  // canUngroup: exactly one DOM-node layer selected.
+  const canUngroup =
+    canEditDesign &&
+    viewMode === "single" &&
+    Boolean(activeFile) &&
+    selectedDomLayerIds.length === 1;
+
   const canMoveLayer = useCallback(
     (intent: LayersPanelMoveIntent) => {
       const targetOwner = codeLayerOwnerByNodeId.get(intent.targetId);
@@ -8498,17 +10055,24 @@ ${serializedHtml}
       }
       return intent.draggedIds.some((draggedId) => {
         const draggedOwner = codeLayerOwnerByNodeId.get(draggedId);
-        return (
-          draggedId !== intent.targetId &&
-          !!draggedOwner &&
-          draggedOwner.fileId === targetOwner.fileId &&
-          !collectCodeLayerAncestors(
+        if (
+          draggedId === intent.targetId ||
+          !draggedOwner ||
+          effectiveCodeLayerState.lockedIds.has(draggedId) ||
+          effectiveCodeLayerState.hiddenIds.has(draggedId)
+        ) {
+          return false;
+        }
+        // Same-file move: also exclude ancestor drags (would orphan the node).
+        if (draggedOwner.fileId === targetOwner.fileId) {
+          return !collectCodeLayerAncestors(
             targetOwner.tree,
             intent.targetId,
-          ).includes(draggedId) &&
-          !effectiveCodeLayerState.lockedIds.has(draggedId) &&
-          !effectiveCodeLayerState.hiddenIds.has(draggedId)
-        );
+          ).includes(draggedId);
+        }
+        // Cross-file move: allowed as long as neither side is locked/hidden
+        // (already checked above). File-row ids are excluded by the owner check.
+        return true;
       });
     },
     [codeLayerOwnerByNodeId, effectiveCodeLayerState],
@@ -8526,26 +10090,45 @@ ${serializedHtml}
       ) {
         return;
       }
-      const sourceFile = files.find((file) => file.id === targetOwner.fileId);
-      const sourceContent =
+      const destFile = files.find((file) => file.id === targetOwner.fileId);
+      const destContent =
         targetOwner.fileId === activeFile?.id
           ? activeContent
-          : (sourceFile?.content ?? "");
-      if (!sourceContent) return;
-      let nextContent = sourceContent;
-      let moved = false;
+          : (destFile?.content ?? "");
+      if (!destContent) return;
+
+      // Group dragged ids by source file so we can handle same-file and
+      // cross-file moves independently.
+      const sameFileDragIds: string[] = [];
+      const crossFileDrags: Array<{ draggedId: string; sourceFileId: string }> =
+        [];
+      const movedNodeSnapshots = new Map<string, CodeLayerNode>();
       for (const draggedId of intent.draggedIds) {
         const draggedOwner = codeLayerOwnerByNodeId.get(draggedId);
         if (
           draggedId === intent.targetId ||
           !draggedOwner ||
-          draggedOwner.fileId !== targetOwner.fileId ||
           effectiveCodeLayerState.lockedIds.has(draggedId) ||
           effectiveCodeLayerState.hiddenIds.has(draggedId)
         ) {
           continue;
         }
-        const patch = applyVisualEdit(nextContent, {
+        movedNodeSnapshots.set(draggedId, draggedOwner.node);
+        if (draggedOwner.fileId === targetOwner.fileId) {
+          sameFileDragIds.push(draggedId);
+        } else {
+          crossFileDrags.push({
+            draggedId,
+            sourceFileId: draggedOwner.fileId,
+          });
+        }
+      }
+
+      // --- Same-file moves (existing path) ---
+      let nextDestContent = destContent;
+      let moved = false;
+      for (const draggedId of sameFileDragIds) {
+        const patch = applyVisualEdit(nextDestContent, {
           kind: "moveNode",
           target: { nodeId: draggedId },
           anchor: { nodeId: intent.targetId },
@@ -8561,13 +10144,109 @@ ${serializedHtml}
           );
           continue;
         }
-        nextContent = patch.content;
+        nextDestContent = patch.content;
         moved = true;
       }
-      if (!moved || nextContent === sourceContent) return;
-      applyFileContentUpdate(targetOwner.fileId, nextContent, {
-        refreshPreview: true,
-      });
+
+      // --- Cross-file moves: use moveNodeBetweenDocuments ---
+      // Group by source file so multiple nodes from the same source are
+      // applied sequentially against the running source content.
+      const sourceContentMap = new Map<string, string>();
+      for (const { draggedId, sourceFileId } of crossFileDrags) {
+        const srcFile = files.find((f) => f.id === sourceFileId);
+        if (!srcFile) continue;
+        const currentSourceContent = getLayerMoveSourceContent({
+          sourceFileId,
+          activeFileId: activeFile?.id,
+          activeContent,
+          sourceFileContent: srcFile.content,
+          sourceContentMap,
+        });
+
+        // The dragged node's data-agent-native-node-id is the node id tracked
+        // by code-layer. Look up the actual attribute value from the owner.
+        const draggedOwner = codeLayerOwnerByNodeId.get(draggedId);
+        const nodeAttrId =
+          draggedOwner?.node.dataAttributes["data-agent-native-node-id"] ??
+          draggedId;
+        const anchorAttrId =
+          codeLayerOwnerByNodeId.get(intent.targetId)?.node.dataAttributes[
+            "data-agent-native-node-id"
+          ] ?? intent.targetId;
+
+        const result = moveNodeBetweenDocuments(
+          currentSourceContent,
+          nextDestContent,
+          {
+            nodeId: nodeAttrId,
+            anchorNodeId: anchorAttrId,
+            placement: intent.placement,
+          },
+        );
+        if (result.status !== "applied") {
+          toast.error(
+            codeLayerPatchMessage(
+              result.message,
+              t("designEditor.toasts.layerMoveFailed"),
+            ),
+            { duration: 4000 },
+          );
+          continue;
+        }
+        sourceContentMap.set(sourceFileId, result.sourceHtml);
+        nextDestContent = result.destHtml;
+        moved = true;
+      }
+
+      if (!moved) return;
+
+      const finalDestProjection =
+        nextDestContent !== destContent
+          ? buildCodeLayerProjection(nextDestContent)
+          : null;
+      const finalDestTree = finalDestProjection
+        ? buildCodeLayerTree(finalDestProjection)
+        : [];
+      const movedNodesAfterMove = intent.draggedIds
+        .map((draggedId) => movedNodeSnapshots.get(draggedId))
+        .map((node) =>
+          node && finalDestProjection
+            ? findCodeLayerNodeInProjection(finalDestProjection, node)
+            : null,
+        )
+        .filter((node): node is CodeLayerNode => Boolean(node));
+
+      if (movedNodesAfterMove.length > 0) {
+        setSelectedLayerIdsState(movedNodesAfterMove.map((node) => node.id));
+        const lastMovedNode =
+          movedNodesAfterMove[movedNodesAfterMove.length - 1];
+        if (lastMovedNode && targetOwner.fileId === activeFile?.id) {
+          setSelectedElement(elementInfoFromCodeLayerNode(lastMovedNode));
+        }
+        const movedAncestorIds = movedNodesAfterMove.flatMap((node) =>
+          collectCodeLayerAncestors(finalDestTree, node.id),
+        );
+        setExpandedLayerIds((current) => {
+          const next = new Set(current);
+          next.add(targetOwner.fileId);
+          movedAncestorIds.forEach((ancestorId) => next.add(ancestorId));
+          return next.size === current.length ? current : Array.from(next);
+        });
+      }
+
+      // Persist source files that changed.
+      for (const [sourceFileId, newSourceContent] of sourceContentMap) {
+        applyFileContentUpdate(sourceFileId, newSourceContent, {
+          refreshPreview: false,
+        });
+      }
+
+      // Persist dest file (which may also be the active file).
+      if (nextDestContent !== destContent) {
+        applyFileContentUpdate(targetOwner.fileId, nextDestContent, {
+          refreshPreview: false,
+        });
+      }
     },
     [
       activeContent,
@@ -8616,6 +10295,21 @@ ${serializedHtml}
           ? currentLayerIds.filter((layerId) => layerId !== intent.id)
           : [...currentLayerIds, intent.id];
         setSelectedLayerIdsState(additiveLayerIds);
+        if (viewModeRef.current === "overview") {
+          const fileIds = files.map((file) => file.id);
+          const selectedScreenIds = getOverviewScreenIdsFromLayerSelection({
+            fileIds,
+            layerIds: additiveLayerIds,
+          });
+          const toggledScreen =
+            getOverviewScreenIdsFromLayerSelection({
+              fileIds,
+              layerIds: [intent.id],
+            }).length > 0;
+          if (toggledScreen || selectedScreenIds.length > 0) {
+            setOverviewSelectedScreenIds(selectedScreenIds);
+          }
+        }
         setSelectedElement(null);
         focusDesignInspectorForSelection();
         setActiveTool("move");
@@ -9096,6 +10790,19 @@ ${serializedHtml}
             ? t("designEditor.stopPinningComments")
             : t("designEditor.pinComment")}
         </DropdownMenuItem>
+        {isSignedIn && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={() => {
+                handleOpenMakeReal();
+              }}
+            >
+              <IconRocket className="mr-2 h-4 w-4" />
+              {"Make this a real app" /* i18n-ignore */}
+            </DropdownMenuItem>
+          </>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );
@@ -9254,6 +10961,28 @@ ${serializedHtml}
             <TooltipContent>{t("designEditor.designPreview")}</TooltipContent>
           </Tooltip>
 
+          {/* §6.6 — "Make this a real app" shortcut button (signed-in only).
+              Surfaces the migration CTA without requiring the project menu. */}
+          {isSignedIn && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-8 cursor-pointer rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+                  onClick={handleOpenMakeReal}
+                  disabled={migrateMutation.isPending}
+                  aria-label={"Make this a real app" /* i18n-ignore */}
+                >
+                  <IconRocket className="size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {"Make this a real app" /* i18n-ignore */}
+              </TooltipContent>
+            </Tooltip>
+          )}
+
           {isSignedIn ? (
             <ShareButton
               resourceType="design"
@@ -9447,6 +11176,19 @@ ${serializedHtml}
                   ? t("designEditor.stopPinningComments")
                   : t("designEditor.pinComment")}
               </DropdownMenuItem>
+              {isSignedIn && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={() => {
+                      handleOpenMakeReal();
+                    }}
+                  >
+                    <IconRocket className="mr-2 h-4 w-4" />
+                    {"Make this a real app" /* i18n-ignore */}
+                  </DropdownMenuItem>
+                </>
+              )}
             </DropdownMenuContent>
           </DropdownMenu>
           {titleEditing && canEditDesign ? (
@@ -9786,7 +11528,9 @@ ${serializedHtml}
               canEditDesign && hasPropsClipboard && Boolean(selectedElement)
             }
             canCopyAsCode={Boolean(selectedElement?.selector)}
-            hiddenActions={["group", "ungroup", "rename"]}
+            canGroup={canGroup}
+            canUngroup={canUngroup}
+            hiddenActions={["rename"]}
             getCanvasPoint={getContextCanvasPoint}
             onPasteHere={(details) =>
               handlePasteSelection(
@@ -9818,310 +11562,396 @@ ${serializedHtml}
                 handleToggleLayerHidden(activeLayerId, !activeLayerHidden);
               }
             }}
+            onGroup={canGroup ? handleGroupSelection : undefined}
+            onUngroup={canUngroup ? handleUngroupSelection : undefined}
             onCopyProps={handleCopyProps}
             onPasteProps={handlePasteProps}
             onCopyAsCode={handleCopySelection}
           >
             {activeFile ? (
-              <div
-                ref={canvasContainerRef}
-                className="relative mx-1 h-full min-w-0 flex-1 overflow-hidden rounded-xl bg-[var(--design-editor-canvas-bg)]"
-                onPointerMove={handleCanvasPointerMove}
-              >
-                {/* Transparent shield that blocks pointer events reaching the
+              <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+                {/* Banner for screens connected to a local dev server: edits
+                    route through the agent rather than being applied inline. */}
+                {activeScreenIsLocalSource &&
+                  !localSourceBannerDismissed &&
+                  id && (
+                    <LocalSourceEditBanner
+                      designId={id}
+                      fileId={activeFile.id}
+                      routeSourceFile={activeScreenRouteSourceFile}
+                      onDismiss={() => setLocalSourceBannerDismissed(true)}
+                    />
+                  )}
+                <div
+                  ref={canvasContainerRef}
+                  className="relative mx-1 min-w-0 flex-1 overflow-hidden rounded-xl bg-[var(--design-editor-canvas-bg)]"
+                  onPointerMove={handleCanvasPointerMove}
+                >
+                  {/* Transparent shield that blocks pointer events reaching the
                     iframe when a portaled Radix popover (e.g. color picker) is
                     open. The iframe has its own event context so it receives
                     pointer events even when visually covered by the popover. */}
-                {inspectorPopoverOpen && (
-                  <div
-                    aria-hidden="true"
-                    style={{
-                      position: "absolute",
-                      inset: 0,
-                      zIndex: 10,
-                      pointerEvents: "auto",
-                    }}
-                  />
-                )}
-                {viewMode === "overview" ? (
-                  <MultiScreenCanvas
-                    screens={overviewScreens}
-                    zoom={overviewCanvasZoom}
-                    onZoomChange={setOverviewCanvasZoom}
-                    activeId={activeFileId}
-                    selectedScreenIds={overviewSelectedScreenIds}
-                    activeScreenHasHoveredChild={
-                      Boolean(hoveredElement) &&
-                      !hoveredElementIsScreenRoot &&
-                      hoveredElementScreenId === activeFileId
-                    }
-                    hoveredChildScreenId={hoveredChildScreenId}
-                    directlyHoveredScreenId={hoveredScreenRootId}
-                    previewDeviceFrame={deviceFrame}
-                    activeTool={activeTool}
-                    onActiveToolChange={(tool) =>
-                      setActiveTool(tool === "rectangle" ? "rect" : tool)
-                    }
-                    selectAllRequest={overviewSelectAllRequest}
-                    clearSelectionRequest={overviewClearSelectionRequest}
-                    onScreenSelectionChange={
-                      handleOverviewScreenSelectionChange
-                    }
-                    geometryById={canvasFrameGeometryById}
-                    onGeometryChange={queueFrameGeometrySave}
-                    onGeometryCommit={handleGeometryCommit}
-                    onCreatePrimitive={handleCreatePrimitive}
-                    onPrimitiveCreated={handlePrimitiveCreated}
-                    onCreateScreenFrame={handleCreateScreenFrame}
-                    onDeleteSelection={handleDeleteOverviewSelection}
-                    onSelectionChange={setOverviewSelectedScreenIds}
-                    onPick={(id) => {
-                      pendingOverviewScreenSelectionRef.current = null;
-                      setSelectedElement(null);
-                      setHoveredElement(null);
-                      setSelectedLayerIdsState([id]);
-                      setActiveFileId(id);
-                      setActiveTool("move");
-                      setMode("edit");
-                    }}
-                    onEdit={enterSingleScreen}
-                    onDuplicate={handleDuplicateScreen}
-                    renderScreenContent={(screen, metadata, geometry) => {
-                      const screenIsActive = screen.id === activeFile?.id;
-                      const screenContent = getScreenContent(screen.id);
-                      const screenContentKey = [
-                        screen.id,
-                        screen.updatedAt ?? "",
-                        getContentSignature(screenContent),
-                        screenIsActive ? contentRenderRevision : 0,
-                      ].join(":");
-
-                      return (
-                        <DesignCanvas
-                          content={screenContent}
-                          contentKey={screenContentKey}
-                          zoom={100}
-                          deviceFrame="none"
-                          embeddedFrame={{
-                            viewportWidth: Math.max(
-                              1,
-                              Math.round(geometry.width),
-                            ),
-                            viewportHeight: Math.max(
-                              1,
-                              Math.round(geometry.height),
-                            ),
-                            displayWidth: Math.max(
-                              1,
-                              Math.round(geometry.width),
-                            ),
-                            displayHeight: Math.max(
-                              1,
-                              Math.round(geometry.height),
-                            ),
-                            fluid: true,
-                          }}
-                          editorChromeScaleX={overviewCanvasZoom / 100}
-                          editorChromeScaleY={overviewCanvasZoom / 100}
-                          editMode={mode === "edit"}
-                          interactMode={false}
-                          readOnly={!canEditDesign}
-                          scaleMode={screenIsActive && activeTool === "scale"}
-                          clearSelectionRequest={overviewClearSelectionRequest}
-                          registerRuntimeBridge={screenIsActive}
-                          selectedSelector={
-                            screenIsActive ? selectedCanvasSelector : null
-                          }
-                          selectedSelectorCandidates={
-                            screenIsActive
-                              ? selectedCanvasSelectorCandidates
-                              : []
-                          }
-                          hoveredSelector={
-                            hoveredElementScreenId === screen.id
-                              ? hoveredCanvasSelector
-                              : null
-                          }
-                          hoveredSelectorCandidates={
-                            hoveredElementScreenId === screen.id
-                              ? hoveredCanvasSelectorCandidates
-                              : []
-                          }
-                          lockedSelectors={getLayerSelectorsForFile(
-                            screen.id,
-                            lockedLayerIds,
-                          )}
-                          hiddenSelectors={getLayerSelectorsForFile(
-                            screen.id,
-                            hiddenLayerIds,
-                          )}
-                          onElementSelect={(info) =>
-                            handleScreenElementSelect(screen.id, info)
-                          }
-                          onElementHover={(info) =>
-                            handleScreenElementHover(screen.id, info)
-                          }
-                          onClearSelection={() =>
-                            handleScreenElementClear(screen.id)
+                  {inspectorPopoverOpen && (
+                    <div
+                      aria-hidden="true"
+                      style={{
+                        position: "absolute",
+                        inset: 0,
+                        zIndex: 10,
+                        pointerEvents: "auto",
+                      }}
+                    />
+                  )}
+                  {viewMode === "overview" ? (
+                    <MultiScreenCanvas
+                      screens={overviewScreens}
+                      zoom={overviewCanvasZoom}
+                      onZoomChange={setOverviewCanvasZoom}
+                      activeId={activeFileId}
+                      selectedScreenIds={overviewSelectedScreenIds}
+                      fullViewScreenIds={fullViewScreenIds}
+                      activeScreenHasHoveredChild={
+                        Boolean(hoveredElement) &&
+                        !hoveredElementIsScreenRoot &&
+                        hoveredElementScreenId === activeFileId
+                      }
+                      hoveredChildScreenId={hoveredChildScreenId}
+                      directlyHoveredScreenId={hoveredScreenRootId}
+                      previewDeviceFrame={deviceFrame}
+                      activeTool={activeTool}
+                      onActiveToolChange={(tool) =>
+                        setActiveTool(tool === "rectangle" ? "rect" : tool)
+                      }
+                      selectAllRequest={overviewSelectAllRequest}
+                      clearSelectionRequest={overviewClearSelectionRequest}
+                      onScreenSelectionChange={
+                        handleOverviewScreenSelectionChange
+                      }
+                      geometryById={canvasFrameGeometryById}
+                      onGeometryChange={queueFrameGeometrySave}
+                      onGeometryCommit={handleGeometryCommit}
+                      onCreatePrimitive={handleCreatePrimitive}
+                      onPrimitiveCreated={handlePrimitiveCreated}
+                      onPrimitiveReparent={handleOverviewPrimitiveReparent}
+                      onCrossScreenElementDrop={handleCrossScreenElementDrop}
+                      onCreateScreenFrame={handleCreateScreenFrame}
+                      onDeleteSelection={handleDeleteOverviewSelection}
+                      onSelectionChange={setOverviewSelectedScreenIds}
+                      onPick={(id) => {
+                        pendingOverviewScreenSelectionRef.current = null;
+                        setSelectedElement(null);
+                        setHoveredElement(null);
+                        setSelectedLayerIdsState([id]);
+                        setActiveFileId(id);
+                        setActiveTool("move");
+                        setMode("edit");
+                      }}
+                      onEdit={enterSingleScreen}
+                      onDuplicate={handleDuplicateScreen}
+                      onAddBreakpoint={(screenId, widthPx) => {
+                        if (!id) return;
+                        const breakpointLabel =
+                          widthPx <= 480
+                            ? "Mobile"
+                            : widthPx <= 1024
+                              ? "Tablet"
+                              : "Desktop";
+                        void addBreakpointMutation.mutateAsync({
+                          designId: id,
+                          label: breakpointLabel,
+                          widthPx,
+                        });
+                      }}
+                      onActiveBreakpointChange={(_screenId, widthPx) => {
+                        setActiveBreakpointWidthState(widthPx);
+                        if (!id) return;
+                        const bpSet = (() => {
+                          try {
+                            const raw = (
+                              designDataJson as Record<string, unknown>
+                            )?.breakpointSet;
+                            if (
+                              raw &&
+                              typeof raw === "object" &&
+                              Array.isArray(
+                                (raw as Record<string, unknown>).breakpoints,
+                              )
+                            ) {
+                              return raw as {
+                                breakpoints: Array<{
+                                  id: string;
+                                  widthPx: number;
+                                }>;
+                              };
+                            }
+                          } catch {
+                            // Ignore malformed design data; the mutation below
+                            // can still clear back to auto.
                           }
-                          onIframeHotkey={handleIframeHotkey}
-                          onIframeContextMenu={handleIframeContextMenu}
-                          onVisualStyleChange={(selector, styles, info) =>
-                            handleScreenVisualStyleChange(
+                          return null;
+                        })();
+                        const bp = bpSet?.breakpoints.find(
+                          (b) => b.widthPx === widthPx,
+                        );
+                        void setActiveBreakpointMutation.mutateAsync({
+                          designId: id,
+                          breakpointId:
+                            widthPx !== undefined && bp ? bp.id : "auto",
+                        });
+                      }}
+                      renderScreenContent={(screen, metadata, geometry) => {
+                        const screenIsActive = screen.id === activeFile?.id;
+                        const screenContent = getScreenContent(screen.id);
+                        const screenContentKey = screenIsActive
+                          ? [screen.id, contentRenderRevision].join(":")
+                          : [
                               screen.id,
-                              selector,
-                              styles,
-                              info,
-                            )
-                          }
-                          onVisualStructureChange={(
-                            selector,
-                            anchorSelector,
-                            placement,
-                            info,
-                            details,
-                          ) =>
-                            handleScreenVisualStructureChange(
+                              screen.updatedAt ?? "",
+                              getContentSignature(screenContent),
+                              0,
+                            ].join(":");
+
+                        return (
+                          <DesignCanvas
+                            content={screenContent}
+                            contentKey={screenContentKey}
+                            zoom={100}
+                            deviceFrame="none"
+                            sourceType={designSourceType}
+                            fusionUrl={designFusionUrl}
+                            onComponentSourceJump={handleComponentSourceJump}
+                            embeddedFrame={{
+                              viewportWidth: Math.max(
+                                1,
+                                Math.round(geometry.width),
+                              ),
+                              viewportHeight: Math.max(
+                                1,
+                                Math.round(geometry.height),
+                              ),
+                              displayWidth: Math.max(
+                                1,
+                                Math.round(geometry.width),
+                              ),
+                              displayHeight: Math.max(
+                                1,
+                                Math.round(geometry.height),
+                              ),
+                              fluid: true,
+                            }}
+                            editorChromeScaleX={overviewCanvasZoom / 100}
+                            editorChromeScaleY={overviewCanvasZoom / 100}
+                            editMode={mode === "edit"}
+                            interactMode={false}
+                            readOnly={!canEditDesign}
+                            scaleMode={screenIsActive && activeTool === "scale"}
+                            clearSelectionRequest={
+                              overviewClearSelectionRequest
+                            }
+                            registerRuntimeBridge={screenIsActive}
+                            selectedSelector={
+                              screenIsActive ? selectedCanvasSelector : null
+                            }
+                            selectedSelectorCandidates={
+                              screenIsActive
+                                ? selectedCanvasSelectorCandidates
+                                : []
+                            }
+                            hoveredSelector={
+                              hoveredElementScreenId === screen.id
+                                ? hoveredCanvasSelector
+                                : null
+                            }
+                            hoveredSelectorCandidates={
+                              hoveredElementScreenId === screen.id
+                                ? hoveredCanvasSelectorCandidates
+                                : []
+                            }
+                            lockedSelectors={getLayerSelectorsForFile(
                               screen.id,
+                              lockedLayerIds,
+                            )}
+                            hiddenSelectors={getLayerSelectorsForFile(
+                              screen.id,
+                              hiddenLayerIds,
+                            )}
+                            onElementSelect={(info) =>
+                              handleScreenElementSelect(screen.id, info)
+                            }
+                            onElementHover={(info) =>
+                              handleScreenElementHover(screen.id, info)
+                            }
+                            onClearSelection={() =>
+                              handleScreenElementClear(screen.id)
+                            }
+                            onIframeHotkey={handleIframeHotkey}
+                            onIframeContextMenu={handleIframeContextMenu}
+                            onVisualStyleChange={(selector, styles, info) =>
+                              handleScreenVisualStyleChange(
+                                screen.id,
+                                selector,
+                                styles,
+                                info,
+                              )
+                            }
+                            onVisualStructureChange={(
                               selector,
                               anchorSelector,
                               placement,
                               info,
                               details,
-                            )
-                          }
-                          onVisualDuplicateChange={(
-                            selector,
-                            cloneHtml,
-                            info,
-                            details,
-                          ) =>
-                            handleScreenVisualDuplicateChange(
-                              screen.id,
+                            ) =>
+                              handleScreenVisualStructureChange(
+                                screen.id,
+                                selector,
+                                anchorSelector,
+                                placement,
+                                info,
+                                details,
+                              )
+                            }
+                            onVisualDuplicateChange={(
                               selector,
                               cloneHtml,
                               info,
                               details,
-                            )
-                          }
-                          onTextContentChange={(
-                            selector,
-                            value,
-                            info,
-                            details,
-                          ) =>
-                            handleScreenTextContentChange(
-                              screen.id,
+                            ) =>
+                              handleScreenVisualDuplicateChange(
+                                screen.id,
+                                selector,
+                                cloneHtml,
+                                info,
+                                details,
+                              )
+                            }
+                            onTextContentChange={(
                               selector,
                               value,
                               info,
                               details,
-                            )
-                          }
-                          onTextEditingStateChange={setTextEditingState}
-                          onElementDblClickText={(info) =>
-                            handleScreenElementDblClickText(screen.id, info)
-                          }
-                          tweakValues={cssVarValues}
-                          drawMode={false}
-                          pinMode={false}
-                          designId={id}
-                          designTitle={design?.title}
-                          commentContextId={`${id}:${screen.id}`}
-                          commentContextLabel={`${design?.title ?? t("navigation.brand")} / ${prettyScreenName(screen.filename)}`}
-                        />
-                      );
-                    }}
-                  />
-                ) : (
-                  <>
-                    <DesignCanvas
-                      content={activeContent}
-                      contentKey={`${activeFile.id}:${contentRenderRevision}`}
-                      zoom={zoom}
-                      onZoomChange={setZoom}
-                      deviceFrame={deviceFrame}
-                      editMode={mode === "edit"}
-                      interactMode={mode === "interact"}
-                      readOnly={!canEditDesign}
-                      scaleMode={activeTool === "scale"}
-                      clearSelectionRequest={overviewClearSelectionRequest}
-                      selectedSelector={selectedCanvasSelector}
-                      selectedSelectorCandidates={
-                        selectedCanvasSelectorCandidates
-                      }
-                      hoveredSelector={hoveredCanvasSelector}
-                      hoveredSelectorCandidates={
-                        hoveredCanvasSelectorCandidates
-                      }
-                      lockedSelectors={lockedLayerSelectors}
-                      hiddenSelectors={hiddenLayerSelectors}
-                      onElementSelect={handleElementSelect}
-                      onElementHover={handleElementHover}
-                      onClearSelection={() => {
-                        setSelectedElement(null);
-                        setHoveredElement(null);
-                        setHoveredElementScreenId(null);
-                        setSelectedLayerIdsState([]);
-                      }}
-                      onIframeHotkey={handleIframeHotkey}
-                      onIframeContextMenu={handleIframeContextMenu}
-                      onVisualStyleChange={handleVisualStyleChange}
-                      onVisualStructureChange={handleVisualStructureChange}
-                      onVisualDuplicateChange={handleVisualDuplicateChange}
-                      onTextContentChange={handleTextContentChange}
-                      onTextEditingStateChange={setTextEditingState}
-                      onElementDblClickText={handleElementDblClickText}
-                      tweakValues={cssVarValues}
-                      drawMode={drawMode}
-                      onExitDrawMode={() => {
-                        setDrawMode(false);
-                        setPinMode(false);
-                        setActiveTool("move");
-                        setMode("edit");
-                      }}
-                      pinMode={pinMode}
-                      onExitPinMode={() => {
-                        setPinMode(false);
-                        if (mode === "annotate") {
-                          setActiveTool("draw");
-                        }
-                      }}
-                      designId={id}
-                      designTitle={design?.title}
-                      commentContextId={`${id}:${activeFile.id}`}
-                      commentContextLabel={`${design?.title ?? t("navigation.brand")} / ${prettyScreenName(activeFile.filename)}`}
-                      onPrototypeNavigate={(screen) => {
-                        if (!screen) return;
-                        const norm = (s: string) =>
-                          s
-                            .replace(/^\.?\//, "")
-                            .replace(/\.html?$/i, "")
-                            .toLowerCase();
-                        const target = norm(screen);
-                        if (!target) return;
-                        // Exact (normalized) filename match only — a substring match
-                        // could send "board" to "dashboard.html".
-                        const match = files.find(
-                          (f) => norm(f.filename) === target,
+                            ) =>
+                              handleScreenTextContentChange(
+                                screen.id,
+                                selector,
+                                value,
+                                info,
+                                details,
+                              )
+                            }
+                            onTextEditingStateChange={setTextEditingState}
+                            onElementDblClickText={(info) =>
+                              handleScreenElementDblClickText(screen.id, info)
+                            }
+                            tweakValues={cssVarValues}
+                            drawMode={false}
+                            pinMode={false}
+                            designId={id}
+                            designTitle={design?.title}
+                            commentContextId={`${id}:${screen.id}`}
+                            commentContextLabel={`${design?.title ?? t("navigation.brand")} / ${prettyScreenName(screen.filename)}`}
+                          />
                         );
-                        if (match) {
-                          viewModeRef.current = "single";
-                          setScreenZoom(FOCUSED_SCREEN_ZOOM);
-                          setViewMode("single");
-                          setActiveFileId(match.id);
-                        }
                       }}
                     />
-                    {/* Presence: live cursor overlay for remote participants */}
-                    {others.length > 0 && (
-                      <LiveCursorOverlay
-                        others={others}
-                        containerRef={canvasContainerRef}
+                  ) : (
+                    <>
+                      <DesignCanvas
+                        content={activeContent}
+                        contentKey={`${activeFile.id}:${contentRenderRevision}`}
+                        zoom={zoom}
+                        onZoomChange={setZoom}
+                        deviceFrame={deviceFrame}
+                        sourceType={designSourceType}
+                        fusionUrl={designFusionUrl}
+                        previewWidthPx={activeBreakpointWidthState}
+                        onComponentSourceJump={handleComponentSourceJump}
+                        // TODO: thread motionTracks / shaderFillPreview live-preview
+                        // props once the canvas-side live preview state is plumbed
+                        // here (non-trivial new state; MotionDock already drives
+                        // motion-preview directly via canvasIframeRef for now).
+                        motionTracks={motionTracksWire}
+                        editMode={mode === "edit"}
+                        interactMode={mode === "interact"}
+                        readOnly={!canEditDesign}
+                        scaleMode={activeTool === "scale"}
+                        clearSelectionRequest={overviewClearSelectionRequest}
+                        selectedSelector={selectedCanvasSelector}
+                        selectedSelectorCandidates={
+                          selectedCanvasSelectorCandidates
+                        }
+                        hoveredSelector={hoveredCanvasSelector}
+                        hoveredSelectorCandidates={
+                          hoveredCanvasSelectorCandidates
+                        }
+                        lockedSelectors={lockedLayerSelectors}
+                        hiddenSelectors={hiddenLayerSelectors}
+                        onElementSelect={handleElementSelect}
+                        onElementHover={handleElementHover}
+                        onClearSelection={() => {
+                          setSelectedElement(null);
+                          setHoveredElement(null);
+                          setHoveredElementScreenId(null);
+                          setSelectedLayerIdsState([]);
+                        }}
+                        onIframeHotkey={handleIframeHotkey}
+                        onIframeContextMenu={handleIframeContextMenu}
+                        onVisualStyleChange={handleVisualStyleChange}
+                        onVisualStructureChange={handleVisualStructureChange}
+                        onVisualDuplicateChange={handleVisualDuplicateChange}
+                        onTextContentChange={handleTextContentChange}
+                        onTextEditingStateChange={setTextEditingState}
+                        onElementDblClickText={handleElementDblClickText}
+                        tweakValues={cssVarValues}
+                        drawMode={drawMode}
+                        onExitDrawMode={() => {
+                          setDrawMode(false);
+                          setPinMode(false);
+                          setActiveTool("move");
+                          setMode("edit");
+                        }}
+                        pinMode={pinMode}
+                        onExitPinMode={() => {
+                          setPinMode(false);
+                          if (mode === "annotate") {
+                            setActiveTool("draw");
+                          }
+                        }}
+                        designId={id}
+                        designTitle={design?.title}
+                        commentContextId={`${id}:${activeFile.id}`}
+                        commentContextLabel={`${design?.title ?? t("navigation.brand")} / ${prettyScreenName(activeFile.filename)}`}
+                        onPrototypeNavigate={(screen) => {
+                          if (!screen) return;
+                          const norm = (s: string) =>
+                            s
+                              .replace(/^\.?\//, "")
+                              .replace(/\.html?$/i, "")
+                              .toLowerCase();
+                          const target = norm(screen);
+                          if (!target) return;
+                          // Exact (normalized) filename match only — a substring match
+                          // could send "board" to "dashboard.html".
+                          const match = files.find(
+                            (f) => norm(f.filename) === target,
+                          );
+                          if (match) {
+                            viewModeRef.current = "single";
+                            setScreenZoom(FOCUSED_SCREEN_ZOOM);
+                            setViewMode("single");
+                            setActiveFileId(match.id);
+                          }
+                        }}
                       />
-                    )}
-                  </>
-                )}
+                      {/* Presence: live cursor overlay for remote participants */}
+                      {others.length > 0 && (
+                        <LiveCursorOverlay
+                          others={others}
+                          containerRef={canvasContainerRef}
+                        />
+                      )}
+                    </>
+                  )}
+                </div>
               </div>
             ) : (
               <div className="flex flex-1 items-center justify-center">
@@ -10140,7 +11970,7 @@ ${serializedHtml}
                       </p>
                       {retryablePrompt ? (
                         <p className="mx-auto mb-4 max-w-sm text-xs italic text-muted-foreground/70">
-                          "{retryablePrompt.prompt}"
+                          {`"${retryablePrompt.prompt}"`}
                         </p>
                       ) : null}
                       <div className="flex items-center justify-center gap-2">
@@ -10217,8 +12047,65 @@ ${serializedHtml}
                   onRequestTweaks={handleRequestTweaks}
                   onStyleChange={handleStyleChange}
                   onStylesChange={handleStylesChange}
+                  onAutoLayoutConvert={handleAutoLayoutConvert}
                   onExport={handleInspectorExport}
                   exporting={pngExporting || svgExporting}
+                  designId={id}
+                  fileId={activeFile?.id}
+                  filename={activeFile?.filename}
+                  componentNodeId={selectedComponentNodeId}
+                  sourceCapabilities={sourceCapabilities}
+                  onCreateComponent={
+                    id && selectedElement ? handleCreateComponent : undefined
+                  }
+                  defaultComponentName={defaultComponentName}
+                  inspectCode={inspectCodeData}
+                  statesPanelProps={
+                    id
+                      ? {
+                          // §6.4 / §8 — active state and breakpoint wired into
+                          // the StatesPanel so selection is agent-visible.
+                          activeStateId: selectedStateId,
+                          activeBreakpointId: statesPanelActiveBreakpointId,
+                          breakpoints: statesPanelBreakpoints,
+                          onStateSelect: (stateId) => {
+                            setSelectedStateId(stateId);
+                          },
+                          onBreakpointSelect: (breakpointId) => {
+                            // "auto" = clear the active breakpoint (overview).
+                            if (breakpointId === "auto") {
+                              setActiveBreakpointWidthState(undefined);
+                              if (id) {
+                                void setActiveBreakpointMutation.mutateAsync({
+                                  designId: id,
+                                  breakpointId: "auto",
+                                });
+                              }
+                              return;
+                            }
+                            const bp = statesPanelBreakpoints.find(
+                              (b) => b.id === breakpointId,
+                            );
+                            if (!bp) return;
+                            setActiveBreakpointWidthState(bp.widthPx);
+                            if (id) {
+                              void setActiveBreakpointMutation.mutateAsync({
+                                designId: id,
+                                breakpointId,
+                              });
+                            }
+                          },
+                          onAddBreakpoint: () => {
+                            // Delegate to the MultiScreenCanvas affordance by
+                            // navigating to overview where the "+" button lives.
+                            if (viewMode !== "overview") {
+                              setViewMode("overview");
+                            }
+                          },
+                        }
+                      : undefined
+                  }
+                  reviewPanelProps={reviewPanelProps}
                 />
               </div>
             ) : (
@@ -10228,6 +12115,34 @@ ${serializedHtml}
         ) : null}
       </div>
 
+      {/* Motion dock (§6.3) — collapsible bottom dock; visible when activeFile
+          is open and the user has opened it. Canvas remains visible above.
+          Preview-only scrubbing fires a motion-preview postMessage to the
+          canvas iframe (via canvasIframeRef); "Write to CSS" fires
+          apply-motion-edit. */}
+      {!embedded && activeFile ? (
+        <MotionDock
+          tracks={motionTracks}
+          durationMs={motionDurationMs}
+          open={motionDockOpen}
+          onOpenChange={setMotionDockOpen}
+          onTracksChange={setMotionTracks}
+          onDurationChange={setMotionDurationMs}
+          canvasIframeRef={canvasIframeRef}
+          selectedTarget={motionSelectedTarget}
+          onApply={(tracks, durationMs) => {
+            if (!id) return;
+            applyMotionEditMutation.mutate({
+              designId: id,
+              fileId: activeFile.id,
+              tracks: tracks.map(({ label: _label, ...t }) => t),
+              durationMs,
+            });
+          }}
+          applying={applyMotionEditMutation.isPending}
+        />
+      ) : null}
+
       <PromptPopover
         open={showPrompt}
         onOpenChange={handlePromptOpenChange}
@@ -10313,6 +12228,183 @@ ${serializedHtml}
         loading={generating || pendingGenerationActive}
         anchorRef={tweakPromptAnchorRef}
       />
+
+      {/* §6.6 — "Make this a real app" dialog.
+          Three states:
+          1. Idle — confirm prompt with description of what will happen.
+          2. Migrating — spinner while the Builder cloud agent accepts the job.
+          3. Success — branchName + url; sourceType already flipped to fusion.
+          4. Not-configured — CTA to connect Builder.io.
+      */}
+      <Dialog
+        open={makeRealDialogOpen}
+        onOpenChange={(open) => {
+          if (!migrateMutation.isPending) setMakeRealDialogOpen(open);
+        }}
+      >
+        <DialogContent className="sm:max-w-md">
+          {/* Not-configured: Builder not connected or no project ID */}
+          {migrationResult?.status === "not-configured" &&
+          migrationResult.cta ? (
+            <>
+              <DialogHeader>
+                <DialogTitle className="flex items-center gap-2">
+                  <IconRocket className="size-5 text-muted-foreground" />
+                  {migrationResult.cta.label}
+                </DialogTitle>
+                <DialogDescription>
+                  {migrationResult.cta.description}
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter className="flex-col gap-2 sm:flex-row">
+                <Button
+                  variant="outline"
+                  onClick={() => setMakeRealDialogOpen(false)}
+                  className="cursor-pointer"
+                >
+                  Cancel
+                </Button>
+                {migrationResult.cta.connectUrl ? (
+                  <Button asChild className="cursor-pointer">
+                    <a
+                      href={migrationResult.cta.connectUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {migrationResult.cta.primaryAction}
+                      <IconExternalLink className="ml-1.5 size-3.5" />
+                    </a>
+                  </Button>
+                ) : null}
+              </DialogFooter>
+            </>
+          ) : migrationResult?.status === "processing" ? (
+            /* Success: Builder accepted the migration job */
+            <>
+              <DialogHeader>
+                <DialogTitle className="flex items-center gap-2">
+                  <IconCircleCheck className="size-5 text-green-500" />
+                  {"Migration started" /* i18n-ignore */}
+                </DialogTitle>
+                <DialogDescription>
+                  {
+                    "Builder is generating a React app branch from your design. The original inline design is preserved and recoverable." /* i18n-ignore */
+                  }
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-3 py-2">
+                {migrationResult.branchName && (
+                  <div className="rounded-md border border-border bg-muted/40 px-3 py-2 text-sm">
+                    <span className="text-muted-foreground">
+                      {"Branch: " /* i18n-ignore */}
+                    </span>
+                    <span className="font-mono font-medium">
+                      {migrationResult.branchName}
+                    </span>
+                  </div>
+                )}
+                {migrationResult.url && (
+                  <a
+                    href={migrationResult.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1.5 text-sm text-[var(--design-editor-accent-color)] hover:underline"
+                  >
+                    {"Open in Builder" /* i18n-ignore */}
+                    <IconExternalLink className="size-3.5" />
+                  </a>
+                )}
+                {migrationResult.seedFileCount !== undefined && (
+                  <p className="text-xs text-muted-foreground">
+                    {
+                      `${migrationResult.seedFileCount} design file${migrationResult.seedFileCount === 1 ? "" : "s"} included in migration seed.` /* i18n-ignore */
+                    }
+                  </p>
+                )}
+              </div>
+              <DialogFooter>
+                <Button
+                  onClick={() => setMakeRealDialogOpen(false)}
+                  className="cursor-pointer"
+                >
+                  {"Done" /* i18n-ignore */}
+                </Button>
+              </DialogFooter>
+            </>
+          ) : (
+            /* Idle or migrating */
+            <>
+              <DialogHeader>
+                <DialogTitle className="flex items-center gap-2">
+                  <IconRocket className="size-5" />
+                  {"Make this a real app" /* i18n-ignore */}
+                </DialogTitle>
+                <DialogDescription>
+                  {
+                    "Connect Builder.io to convert this design into a React + Tailwind app with real components, props, branches, and deploys. Your current inline design is preserved as a snapshot you can restore at any time." /* i18n-ignore */
+                  }
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-2 py-1 text-sm text-muted-foreground">
+                <p>{"What happens:" /* i18n-ignore */}</p>
+                <ul className="list-disc pl-4 space-y-1">
+                  <li>
+                    {
+                      "Your design HTML and tokens are sent to the Builder cloud agent" /* i18n-ignore */
+                    }
+                  </li>
+                  <li>
+                    {
+                      "A React + Tailwind branch is generated in Builder" /* i18n-ignore */
+                    }
+                  </li>
+                  <li>
+                    {
+                      "The editor switches to fusion source mode — gated panels light up" /* i18n-ignore */
+                    }
+                  </li>
+                  <li>
+                    {
+                      "The original inline design is saved as a restorable snapshot" /* i18n-ignore */
+                    }
+                  </li>
+                </ul>
+                <p className="pt-1 text-xs">
+                  {
+                    "Requires Builder.io to be connected with a branch project configured." /* i18n-ignore */
+                  }
+                </p>
+              </div>
+              <DialogFooter className="flex-col gap-2 sm:flex-row">
+                <Button
+                  variant="outline"
+                  onClick={() => setMakeRealDialogOpen(false)}
+                  disabled={migrateMutation.isPending}
+                  className="cursor-pointer"
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onClick={() => void handleConfirmMakeReal()}
+                  disabled={migrateMutation.isPending}
+                  className="cursor-pointer"
+                >
+                  {
+                    migrateMutation.isPending ? (
+                      <>
+                        <Spinner className="mr-2 size-3.5" />
+                        {"Starting migration…" /* i18n-ignore */}
+                      </>
+                    ) : (
+                      "Start migration"
+                    ) /* i18n-ignore */
+                  }
+                </Button>
+              </DialogFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }