@agent-native/core 0.80.10 → 0.80.11

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

@@ -51,6 +51,7 @@ import {
   type CodeLayerTreeNode,
 } from "@shared/code-layer";
 import { componentNameFor, isComponentInstance } from "@shared/component-model";
+import type { A11yFinding } from "@shared/design-review";
 import {
   DESIGN_CAPABILITY_NAMES,
   hasCapability,
@@ -60,7 +61,7 @@ import {
   resolveTweaksToCssVars,
   type TweakSelections,
 } from "@shared/resolve-tweaks";
-import { widthToPrefix } from "@shared/responsive-classes";
+import { utilityStem, widthToPrefix } from "@shared/responsive-classes";
 import { normalizeDesignSourceType } from "@shared/source-mode";
 import {
   IconArrowLeft,
@@ -223,8 +224,6 @@ 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
@@ -434,6 +433,32 @@ export function getLayerMoveSourceContent(args: {
   );
 }
 
+export function getFreshActiveFileContent(args: {
+  activeContent: string;
+  latestContent?: string | null;
+  lastLocalContent?: string | null;
+}) {
+  return args.latestContent ?? args.lastLocalContent ?? args.activeContent;
+}
+
+export function getFreshScreenContent(args: {
+  screenId: string;
+  activeFileId?: string | null;
+  freshActiveContent: string;
+  fileContentById: ReadonlyMap<string, string>;
+}) {
+  return args.screenId === args.activeFileId
+    ? args.freshActiveContent
+    : (args.fileContentById.get(args.screenId) ?? "");
+}
+
+export function getLayerMoveIterationOrder<T>(
+  orderedIds: readonly T[],
+  placement: "before" | "after" | "inside",
+): T[] {
+  return placement === "after" ? [...orderedIds].reverse() : [...orderedIds];
+}
+
 function resolveZoomUpdate(update: SetStateAction<number>, current: number) {
   return typeof update === "function" ? update(current) : update;
 }
@@ -939,6 +964,113 @@ function applyInlineStylesToHtml(
   }
 }
 
+const CSS_PROPERTY_UTILITY_STEMS: Record<string, string[]> = {
+  color: ["text-color"],
+  "background-color": ["background-color"],
+  background: ["background-color", "background-image"],
+  "font-size": ["font-size"],
+  "font-weight": ["font-weight"],
+  "font-family": ["font-family"],
+  "text-align": ["text-align"],
+  display: ["display"],
+  position: ["position"],
+  width: ["w"],
+  height: ["h"],
+  opacity: ["opacity"],
+  "border-radius": ["rounded"],
+  padding: ["p"],
+  "padding-left": ["px", "pl"],
+  "padding-right": ["px", "pr"],
+  "padding-top": ["py", "pt"],
+  "padding-bottom": ["py", "pb"],
+  margin: ["m"],
+  "margin-left": ["mx", "ml"],
+  "margin-right": ["mx", "mr"],
+  "margin-top": ["my", "mt"],
+  "margin-bottom": ["my", "mb"],
+  gap: ["gap"],
+  "column-gap": ["gap-x"],
+  "row-gap": ["gap-y"],
+};
+
+const DEFAULT_STATES_PANEL_BREAKPOINTS = [
+  { id: "bp-mobile", label: "Mobile", widthPx: 390 },
+  { id: "bp-tablet", label: "Tablet", widthPx: 768 },
+  { id: "bp-desktop", label: "Desktop", widthPx: 1280 },
+] as const;
+
+function normalizeCssPropertyName(property: string): string {
+  return property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+
+function looksLikeTailwindUtility(value: string): boolean {
+  const trimmed = value.trim();
+  if (!trimmed || /\s/.test(trimmed)) return false;
+  if (/[;{}]/.test(trimmed) || /\/\*/.test(trimmed)) return false;
+  if (/^(?:#|rgb\(|rgba\(|hsl\(|hsla\(|var\(|calc\()/i.test(trimmed)) {
+    return false;
+  }
+  if (trimmed.includes(":")) return false;
+  return /^[!-]?[a-z0-9][a-z0-9[\]()./%_-]*$/i.test(trimmed);
+}
+
+function responsiveUtilityMatchesStyleProperty(
+  property: string,
+  value: string,
+): boolean {
+  if (!looksLikeTailwindUtility(value)) return false;
+  const normalizedProperty = normalizeCssPropertyName(property);
+  const stem = utilityStem(value.trim());
+  const allowed = CSS_PROPERTY_UTILITY_STEMS[normalizedProperty];
+  return allowed ? allowed.includes(stem) : stem === normalizedProperty;
+}
+
+interface DesignStatePreviewRow {
+  captureData?: Record<string, unknown> | null;
+  fixtureData?: Record<string, unknown> | null;
+}
+
+const STATE_PREVIEW_HTML_KEYS = [
+  "domHtml",
+  "domSnapshot",
+  "documentHtml",
+  "html",
+  "content",
+  "markup",
+] as const;
+
+function looksLikePreviewHtml(value: string): boolean {
+  return /<!doctype|<html\b|<body\b|<[a-zA-Z][\s>]/i.test(value);
+}
+
+function findStatePreviewHtml(value: unknown, depth = 0): string | null {
+  if (typeof value === "string") {
+    return looksLikePreviewHtml(value) ? value : null;
+  }
+  if (!value || typeof value !== "object" || Array.isArray(value) || depth > 2)
+    return null;
+  const record = value as Record<string, unknown>;
+  for (const key of STATE_PREVIEW_HTML_KEYS) {
+    const hit = findStatePreviewHtml(record[key], depth + 1);
+    if (hit) return hit;
+  }
+  for (const entry of Object.values(record)) {
+    const hit = findStatePreviewHtml(entry, depth + 1);
+    if (hit) return hit;
+  }
+  return null;
+}
+
+function designStatePreviewHtml(
+  row: DesignStatePreviewRow | undefined,
+): string | null {
+  if (!row) return null;
+  return (
+    findStatePreviewHtml(row.captureData) ??
+    findStatePreviewHtml(row.fixtureData)
+  );
+}
+
 function escapeHtmlAttributeValue(value: string): string {
   return value
     .replace(/&/g, "&amp;")
@@ -2096,6 +2228,36 @@ function collectCodeLayerAncestors(
   return [];
 }
 
+export function sortCodeLayerIdsByTreeOrder(
+  ids: readonly string[],
+  tree: readonly CodeLayerTreeNode[],
+): string[] {
+  const treeOrder = new Map<string, number>();
+  let index = 0;
+  const visit = (nodes: readonly CodeLayerTreeNode[]) => {
+    for (const node of nodes) {
+      treeOrder.set(node.id, index);
+      index += 1;
+      visit(node.children);
+    }
+  };
+  visit(tree);
+
+  const originalOrder = new Map(
+    ids.map((id, originalIndex) => [id, originalIndex]),
+  );
+  return [...ids].sort((a, b) => {
+    const aOrder = treeOrder.get(a);
+    const bOrder = treeOrder.get(b);
+    if (aOrder === undefined && bOrder === undefined) {
+      return (originalOrder.get(a) ?? 0) - (originalOrder.get(b) ?? 0);
+    }
+    if (aOrder === undefined) return 1;
+    if (bOrder === undefined) return -1;
+    return aOrder - bOrder;
+  });
+}
+
 function findCodeLayerNodeInProjection(
   projection: CodeLayerProjection,
   previousNode: CodeLayerNode,
@@ -2819,6 +2981,11 @@ function buildAuthoritativeTweakSelections(
         ? persistedSelections[tweak.id]
         : tweak.defaultValue;
   }
+  for (const [key, value] of Object.entries(persistedSelections)) {
+    if (/^--[-_a-zA-Z0-9]+$/.test(key)) {
+      selections[key] = value;
+    }
+  }
   return selections;
 }
 
@@ -3035,6 +3202,9 @@ export default function DesignEditor() {
   const [hiddenLayerIds, setHiddenLayerIds] = useState<Set<string>>(
     () => new Set(),
   );
+  const layerStateOverridesRef = useRef<
+    Map<string, { hidden?: boolean; locked?: boolean }>
+  >(new Map());
   const [overviewSelectAllRequest, setOverviewSelectAllRequest] = useState(0);
   const [overviewClearSelectionRequest, setOverviewClearSelectionRequest] =
     useState(0);
@@ -3054,6 +3224,11 @@ export default function DesignEditor() {
   const [motionDockOpen, setMotionDockOpen] = useState(false);
   const [motionTracks, setMotionTracks] = useState<MotionDockTrack[]>([]);
   const [motionDurationMs, setMotionDurationMs] = useState(1000);
+  const [shaderFillPreview, setShaderFillPreview] = useState<{
+    selector?: string;
+    nodeId?: string;
+    css: string;
+  } | null>(null);
 
   // ── Breakpoint preview state (§6.4) ─────────────────────────────────────────
   // Active breakpoint width for the current design (pixels). Controls which
@@ -3065,6 +3240,11 @@ export default function DesignEditor() {
   // ── 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);
+  const [reviewFileId, setReviewFileId] = useState<string | null>(null);
+  const [reviewFindings, setReviewFindings] = useState<A11yFinding[]>([]);
+  const [reviewAuditLoading, setReviewAuditLoading] = useState(false);
+  const [reviewAuditedAt, setReviewAuditedAt] = useState<string | null>(null);
+  const [reviewAuditError, setReviewAuditError] = useState<string | null>(null);
 
   useEffect(() => {
     if (!isBuilderDesignEmbed) return;
@@ -3213,6 +3393,14 @@ export default function DesignEditor() {
         geometryRedoStackRef.current.length > 0,
     );
   }, []);
+  const clearLocalUndoRedoStacks = useCallback(() => {
+    contentUndoStackRef.current = [];
+    contentRedoStackRef.current = [];
+    geometryUndoStackRef.current = [];
+    geometryRedoStackRef.current = [];
+    historyOrderRef.current = [];
+    redoOrderRef.current = [];
+  }, []);
   const persistedSelectionStateRef = useRef<string | null>(null);
   const designSelectionOwnerIdRef = useRef(`${TAB_ID}:${generateTabId()}`);
   const frameGeometrySaveTimerRef = useRef<number | null>(null);
@@ -4421,70 +4609,21 @@ export default function DesignEditor() {
   }, [files, activeFileId]);
 
   const activeFile = files.find((f) => f.id === activeFileId) ?? files[0];
+  useEffect(() => {
+    if (!reviewFileId || reviewFileId === activeFile?.id) return;
+    setReviewFileId(null);
+    setReviewFindings([]);
+    setReviewAuditedAt(null);
+    setReviewAuditError(null);
+    setReviewAuditLoading(false);
+  }, [activeFile?.id, reviewFileId]);
+
   const initialGenerationReadOnly = shouldLockInspectorForInitialGeneration({
     fileCount: files.length,
     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({
@@ -4873,6 +5012,7 @@ export default function DesignEditor() {
   // The last content this client itself wrote into the Y.Doc (inline-style
   // edits) — so the reconcile/observe doesn't treat our own echo as external.
   const lastLocalContentRef = useRef<string | null>(null);
+  const latestActiveContentRef = useRef<string | null>(null);
   // Freshest known DB `updatedAt` for the active file, kept in a ref so the
   // Yjs observe handler can advance the reconcile watermark without re-subscribing.
   const documentFileUpdatedAtRef = useRef<string | null>(null);
@@ -4916,8 +5056,8 @@ export default function DesignEditor() {
       setCollabContentFileId(null);
       lastAppliedFileUpdatedAtRef.current = null;
       lastLocalContentRef.current = null;
-      contentUndoStackRef.current = [];
-      contentRedoStackRef.current = [];
+      latestActiveContentRef.current = null;
+      clearLocalUndoRedoStacks();
       clearStaleAgentCollabRecovery();
       syncUndoRedoState();
       return;
@@ -4928,13 +5068,14 @@ export default function DesignEditor() {
       setCollabContentFileId(null);
       lastAppliedFileUpdatedAtRef.current = null;
       lastLocalContentRef.current = null;
-      contentUndoStackRef.current = [];
-      contentRedoStackRef.current = [];
+      latestActiveContentRef.current = null;
+      clearLocalUndoRedoStacks();
       clearStaleAgentCollabRecovery();
       syncUndoRedoState();
     }
   }, [
     activeFileId,
+    clearLocalUndoRedoStacks,
     clearStaleAgentCollabRecovery,
     syncUndoRedoState,
     viewMode,
@@ -4956,6 +5097,7 @@ export default function DesignEditor() {
       setCollabContent(pendingLocalContent);
       setCollabContentFileId(fileId);
       lastLocalContentRef.current = pendingLocalContent;
+      latestActiveContentRef.current = pendingLocalContent;
       setContentRenderRevision((revision) => revision + 1);
       ydoc.transact(() => {
         ytext.delete(0, ytext.length);
@@ -4975,6 +5117,7 @@ export default function DesignEditor() {
         setCollabContent(storedContent);
         setCollabContentFileId(fileId);
         lastLocalContentRef.current = storedContent;
+        latestActiveContentRef.current = storedContent;
         setContentRenderRevision((revision) => revision + 1);
         ydoc.transact(() => {
           ytext.delete(0, ytext.length);
@@ -4987,6 +5130,7 @@ export default function DesignEditor() {
       // confirms or applies the current DB content.
       setCollabContent(text);
       setCollabContentFileId(fileId);
+      latestActiveContentRef.current = text;
       setContentRenderRevision((revision) => revision + 1);
     }
   }, [
@@ -5029,6 +5173,7 @@ export default function DesignEditor() {
         setCollabContent(pendingLocalContent);
         setCollabContentFileId(fileId);
         lastLocalContentRef.current = pendingLocalContent;
+        latestActiveContentRef.current = pendingLocalContent;
         setContentRenderRevision((revision) => revision + 1);
         ydoc.transact(() => {
           ytext.delete(0, ytext.length);
@@ -5038,6 +5183,7 @@ export default function DesignEditor() {
       }
       setCollabContent(next);
       setCollabContentFileId(fileId);
+      latestActiveContentRef.current = next;
       if (isLocalEdit) {
         lastLocalContentRef.current = next;
       } else {
@@ -5142,6 +5288,7 @@ export default function DesignEditor() {
       setCollabContent(dbContent);
       setCollabContentFileId(activeFile.id);
       lastLocalContentRef.current = dbContent;
+      latestActiveContentRef.current = dbContent;
       if (dbUpdatedAt) lastAppliedFileUpdatedAtRef.current = dbUpdatedAt;
       setContentRenderRevision((revision) => revision + 1);
 
@@ -5195,6 +5342,7 @@ export default function DesignEditor() {
             setCollabContent(expectedContent);
             setCollabContentFileId(expectedFileId);
             lastLocalContentRef.current = expectedContent;
+            latestActiveContentRef.current = expectedContent;
             lastAppliedFileUpdatedAtRef.current = expectedUpdatedAt;
             setContentRenderRevision((revision) => revision + 1);
 
@@ -5220,6 +5368,7 @@ export default function DesignEditor() {
     setCollabContent(dbContent);
     setCollabContentFileId(activeFile.id);
     lastLocalContentRef.current = dbContent;
+    latestActiveContentRef.current = dbContent;
     if (dbUpdatedAt) lastAppliedFileUpdatedAtRef.current = dbUpdatedAt;
     setContentRenderRevision((revision) => revision + 1);
 
@@ -5281,6 +5430,56 @@ export default function DesignEditor() {
     [],
   );
 
+  const handleRunDesignAudit = useCallback(async () => {
+    if (!id || !activeFile?.id) return;
+    const auditFileId = activeFile.id;
+    setReviewFileId(auditFileId);
+    setReviewAuditLoading(true);
+    setReviewAuditError(null);
+    try {
+      const result = await callAction<{
+        findings: A11yFinding[];
+        auditedAt: string;
+      }>("run-design-audit", {
+        designId: id,
+        fileId: auditFileId,
+      } as any);
+      setReviewFileId(auditFileId);
+      setReviewFindings(Array.isArray(result.findings) ? result.findings : []);
+      setReviewAuditedAt(result.auditedAt ?? new Date().toISOString());
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : t("designEditor.toasts.auditRunFailed");
+      setReviewAuditError(message);
+      toast.error(message);
+    } finally {
+      setReviewAuditLoading(false);
+    }
+  }, [activeFile?.id, id, t]);
+
+  const handleReviewFindingClick = useCallback(
+    (finding: A11yFinding) => {
+      const selector =
+        finding.selector ??
+        (finding.nodeId
+          ? `[data-agent-native-node-id="${finding.nodeId.replace(/"/g, '\\"')}"]`
+          : null);
+      if (!selector) return;
+      canvasIframeRef.current?.contentWindow?.postMessage(
+        {
+          type: "select-element",
+          selector,
+          nodeId: finding.nodeId ?? undefined,
+        },
+        "*",
+      );
+      if (finding.nodeId) setSelectedLayerIdsState([finding.nodeId]);
+    },
+    [canvasIframeRef],
+  );
+
   // Broadcast pointer position (normalized to canvas container) and
   // selected element selector so peers can see where the user is working.
   const handleCanvasPointerMove = useCallback(
@@ -5411,6 +5610,9 @@ export default function DesignEditor() {
       : (activeFile?.content ?? ""));
   const activeContent =
     typeof activeContentSource === "string" ? activeContentSource : "";
+  useLayoutEffect(() => {
+    latestActiveContentRef.current = activeContent;
+  }, [activeContent]);
   const fileContentById = useMemo(() => {
     const map = new Map<string, string>();
     for (const file of files) {
@@ -5420,9 +5622,16 @@ export default function DesignEditor() {
   }, [files]);
   const getScreenContent = useCallback(
     (screenId: string) =>
-      screenId === activeFile?.id
-        ? activeContent
-        : (fileContentById.get(screenId) ?? ""),
+      getFreshScreenContent({
+        screenId,
+        activeFileId: activeFile?.id,
+        freshActiveContent: getFreshActiveFileContent({
+          activeContent,
+          latestContent: latestActiveContentRef.current,
+          lastLocalContent: lastLocalContentRef.current,
+        }),
+        fileContentById,
+      }),
     [activeContent, activeFile?.id, fileContentById],
   );
   const pageStyles = useMemo(
@@ -5449,6 +5658,38 @@ export default function DesignEditor() {
   }, [selectedCodeLayerNode, selectedElement?.selector]);
   const selectedCanvasSelector = selectedCanvasSelectorCandidates[0] ?? null;
 
+  const handleDesignStateSelect = useCallback(
+    (stateId: string | null, row?: DesignStatePreviewRow) => {
+      setSelectedStateId(stateId);
+      const win = canvasIframeRef.current?.contentWindow;
+      if (!win) return;
+
+      if (stateId === null) {
+        win.postMessage(
+          {
+            type: "replace-document-content",
+            content: activeContent,
+            forceFullDocument: true,
+          },
+          "*",
+        );
+        return;
+      }
+
+      const html = designStatePreviewHtml(row);
+      if (!html) return;
+      win.postMessage(
+        {
+          type: "replace-document-content",
+          content: html,
+          forceFullDocument: true,
+        },
+        "*",
+      );
+    },
+    [activeContent, canvasIframeRef],
+  );
+
   // ── 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).
@@ -5497,10 +5738,14 @@ export default function DesignEditor() {
   const selectedComponentNodeId = useMemo(() => {
     if (!selectedCodeLayerNode) return undefined;
     return isComponentInstance(selectedCodeLayerNode)
-      ? selectedCodeLayerNode.id
+      ? bridgeSourceIdForCodeLayerNode(selectedCodeLayerNode)
       : undefined;
   }, [selectedCodeLayerNode]);
 
+  useEffect(() => {
+    setShaderFillPreview(null);
+  }, [activeFile?.id, selectedElement?.selector, selectedElement?.sourceId]);
+
   // A friendly default name for the create-component dialog, derived from the
   // selected element's layer name / tag.
   const defaultComponentName = useMemo(() => {
@@ -5729,6 +5974,7 @@ export default function DesignEditor() {
       setCollabContent(nextContent);
       setCollabContentFileId(activeFile.id);
       lastLocalContentRef.current = nextContent;
+      latestActiveContentRef.current = nextContent;
       if (id) {
         queryClient.setQueryData(
           ["action", "get-design", { id }],
@@ -5829,6 +6075,68 @@ export default function DesignEditor() {
     ],
   );
 
+  const handleComponentPropApplied = useCallback(
+    (fileId: string, nextContent: string) => {
+      applyFileContentUpdate(fileId, nextContent, {
+        refreshPreview: fileId === activeFile?.id,
+      });
+    },
+    [activeFile?.id, applyFileContentUpdate],
+  );
+
+  const handleReviewFixApplied = useCallback(
+    (
+      _finding: A11yFinding,
+      result?: { fileId?: string; patchedContent?: string },
+    ) => {
+      setReviewFindings((prev) =>
+        prev.filter((finding) => finding.id !== _finding.id),
+      );
+      if (
+        typeof result?.fileId === "string" &&
+        typeof result.patchedContent === "string"
+      ) {
+        applyFileContentUpdate(result.fileId, result.patchedContent, {
+          refreshPreview: result.fileId === activeFile?.id,
+        });
+      }
+      void handleRunDesignAudit();
+    },
+    [activeFile?.id, applyFileContentUpdate, handleRunDesignAudit],
+  );
+
+  const resolvedReviewPanelProps = useMemo<
+    Omit<ReviewPanelProps, "className"> | undefined
+  >(() => {
+    if (!id || !activeFile) return undefined;
+    const reviewMatchesActiveFile = reviewFileId === activeFile.id;
+    return {
+      findings: reviewMatchesActiveFile ? reviewFindings : [],
+      auditLoading: reviewMatchesActiveFile ? reviewAuditLoading : false,
+      auditedAt: reviewMatchesActiveFile ? reviewAuditedAt : null,
+      auditError: reviewMatchesActiveFile ? reviewAuditError : null,
+      onRunAudit: handleRunDesignAudit,
+      onFindingClick: handleReviewFindingClick,
+      fixSource: {
+        designId: id,
+        fileId: activeFile.id,
+        filename: activeFile.filename,
+      },
+      onFixApplied: handleReviewFixApplied,
+    };
+  }, [
+    activeFile,
+    handleReviewFindingClick,
+    handleReviewFixApplied,
+    handleRunDesignAudit,
+    id,
+    reviewAuditError,
+    reviewAuditLoading,
+    reviewAuditedAt,
+    reviewFileId,
+    reviewFindings,
+  ]);
+
   const handleCreatePrimitive = useCallback(
     (screenId: string, primitive: CanvasPrimitiveInsert) => {
       if (!canEditDesign) return false;
@@ -6321,6 +6629,15 @@ export default function DesignEditor() {
       mode,
       activeTool,
       tweakValues: tweakSelections,
+      onShaderFillPreview: (_descriptor, css) => {
+        setShaderFillPreview({
+          selector: selectedElement?.selector ?? undefined,
+          nodeId:
+            selectedElement?.sourceId ?? selectedCodeLayerNode?.id ?? undefined,
+          css,
+        });
+      },
+      onShaderFillPreviewClear: () => setShaderFillPreview(null),
     }),
     [
       activeFile?.filename,
@@ -6333,6 +6650,7 @@ export default function DesignEditor() {
       mode,
       overviewSelectedScreenIds,
       selectedElement,
+      selectedCodeLayerNode?.id,
       selectedScreenIds,
       tweakSelections,
       viewMode,
@@ -6557,7 +6875,10 @@ export default function DesignEditor() {
       // advance lastLocalContentRef.current to resolvedNextContent below, the
       // next synchronous call reads the previous call's result and the patches
       // compose. Falls back to activeContent when the ref is unset (file switch).
-      const baseContent = lastLocalContentRef.current ?? activeContent;
+      const baseContent =
+        latestActiveContentRef.current ??
+        lastLocalContentRef.current ??
+        activeContent;
       const [firstProperty, firstValue] = entries[0];
       const projection = buildCodeLayerProjection(baseContent);
       const targetInfo = options.elementInfo ?? selectedElement;
@@ -6624,8 +6945,19 @@ export default function DesignEditor() {
       });
       const sendStyleChange = (window as any).__designCanvasSendStyle;
       if (!options.runtimeApplied && typeof sendStyleChange === "function") {
+        const selectorCandidates = targetNode
+          ? codeLayerSelectorAliases(targetNode)
+          : selector
+            ? [selector]
+            : [];
+        const nodeId = targetNode
+          ? bridgeSourceIdForCodeLayerNode(targetNode)
+          : targetInfo?.sourceId;
         entries.forEach(([property, value]) => {
-          sendStyleChange(selector, property, value);
+          sendStyleChange(selector, property, value, {
+            selectorCandidates,
+            nodeId,
+          });
         });
       }
 
@@ -6661,16 +6993,19 @@ export default function DesignEditor() {
           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 };
+            const utility = value.trim();
+            if (responsiveUtilityMatchesStyleProperty(property, utility)) {
+              const rcPatch = applyVisualEdit(current.content, {
+                kind: "responsive-class",
+                target: targetNode ? { nodeId: targetNode.id } : { selector },
+                prefix: activeBreakpointPrefix,
+                operation: "replace",
+                utility,
+                stem: utilityStem(utility),
+              });
+              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.
@@ -6744,6 +7079,7 @@ export default function DesignEditor() {
       // Mark as our own write so the get-design reconcile + Yjs observe don't
       // treat the echo as an external edit and fight the live value.
       lastLocalContentRef.current = resolvedNextContent;
+      latestActiveContentRef.current = resolvedNextContent;
       // Write the edit into the shared Y.Doc so other open clients see it live
       // through Yjs (not only via the slower update-file → applyText round-trip).
       // Use LOCAL_EDIT_ORIGIN so the UndoManager captures this transaction.
@@ -6803,7 +7139,10 @@ export default function DesignEditor() {
       ) {
         const sendStyleChange = (window as any).__designCanvasSendStyle;
         if (typeof sendStyleChange === "function") {
-          sendStyleChange(selector, property, value);
+          sendStyleChange(selector, property, value, {
+            selectorCandidates: selectedCanvasSelectorCandidates,
+            nodeId: selectedElement?.sourceId,
+          });
           return;
         }
       }
@@ -6812,6 +7151,8 @@ export default function DesignEditor() {
     [
       commitVisualStyles,
       selectedElement?.selector,
+      selectedElement?.sourceId,
+      selectedCanvasSelectorCandidates,
       textEditingState.active,
       textEditingState.hasRange,
       textEditingState.selector,
@@ -6830,6 +7171,16 @@ export default function DesignEditor() {
     [commitVisualStyles, selectedElement?.selector],
   );
 
+  const getFreshActiveContent = useCallback(
+    () =>
+      getFreshActiveFileContent({
+        activeContent,
+        latestContent: latestActiveContentRef.current,
+        lastLocalContent: lastLocalContentRef.current,
+      }),
+    [activeContent],
+  );
+
   const handleVisualStyleChange = useCallback(
     (
       selector: string,
@@ -6858,7 +7209,8 @@ export default function DesignEditor() {
     ) => {
       if (!canEditDesign) return false;
       if (!activeFile) return false;
-      const projection = buildCodeLayerProjection(activeContent);
+      const baseContent = getFreshActiveContent();
+      const projection = buildCodeLayerProjection(baseContent);
       const resolveBridgeNode = (targetSelector: string, sourceId?: string) =>
         resolveCodeLayerNodeFromBridge(projection, targetSelector, sourceId);
       const targetInfo = elementInfo
@@ -6875,7 +7227,7 @@ export default function DesignEditor() {
         anchorSelector,
         details?.anchorSourceId,
       );
-      const patch = applyVisualEdit(activeContent, {
+      const patch = applyVisualEdit(baseContent, {
         kind: "moveNode",
         target: targetNode ? { nodeId: targetNode.id } : { selector },
         anchor: anchorNode
@@ -6923,7 +7275,13 @@ export default function DesignEditor() {
       }
       return true;
     },
-    [activeContent, activeFile, applyLocalContentUpdate, canEditDesign, t],
+    [
+      activeFile,
+      applyLocalContentUpdate,
+      canEditDesign,
+      getFreshActiveContent,
+      t,
+    ],
   );
 
   const handleVisualDuplicateChange = useCallback(
@@ -6940,7 +7298,8 @@ export default function DesignEditor() {
     ) => {
       if (!canEditDesign) return false;
       if (!activeFile) return false;
-      const projection = buildCodeLayerProjection(activeContent);
+      const baseContent = getFreshActiveContent();
+      const projection = buildCodeLayerProjection(baseContent);
       const targetInfo = elementInfo
         ? {
             ...elementInfo,
@@ -6960,7 +7319,7 @@ export default function DesignEditor() {
         details?.anchorSelector,
         details?.anchorSourceId,
       );
-      const nextContent = insertClonedHtmlLayer(activeContent, cloneHtml, {
+      const nextContent = insertClonedHtmlLayer(baseContent, cloneHtml, {
         targetSelectors: targetNode
           ? codeLayerSelectorAliases(targetNode)
           : [selector],
@@ -6994,7 +7353,13 @@ export default function DesignEditor() {
       }
       return true;
     },
-    [activeContent, activeFile, applyLocalContentUpdate, canEditDesign, t],
+    [
+      activeFile,
+      applyLocalContentUpdate,
+      canEditDesign,
+      getFreshActiveContent,
+      t,
+    ],
   );
 
   const handleTextContentChange = useCallback(
@@ -7006,7 +7371,8 @@ export default function DesignEditor() {
     ) => {
       if (!canEditDesign) return;
       if (!activeFile) return;
-      const projection = buildCodeLayerProjection(activeContent);
+      const baseContent = getFreshActiveContent();
+      const projection = buildCodeLayerProjection(baseContent);
       const targetInfo = elementInfo ? { ...elementInfo, selector } : null;
       const targetNode = targetInfo
         ? resolveCodeLayerNodeFromElementInfo(projection, targetInfo)
@@ -7014,10 +7380,10 @@ export default function DesignEditor() {
       const isEmpty = value.trim().length === 0;
       const removedContent =
         isEmpty && targetNode
-          ? removeCodeLayerNodeFromHtml(activeContent, targetNode)
+          ? removeCodeLayerNodeFromHtml(baseContent, targetNode)
           : null;
       const patch = !removedContent
-        ? applyVisualEdit(activeContent, {
+        ? applyVisualEdit(baseContent, {
             kind: "textContent",
             target: targetNode ? { nodeId: targetNode.id } : { selector },
             value,
@@ -7027,12 +7393,7 @@ export default function DesignEditor() {
       const nextContent =
         removedContent ??
         (patch?.result.status === "applied" ? patch.content : null) ??
-        updateElementContentInHtml(
-          activeContent,
-          selector,
-          value,
-          details?.html,
-        );
+        updateElementContentInHtml(baseContent, selector, value, details?.html);
       if (!nextContent) {
         toast.error(
           codeLayerPatchMessage(
@@ -7081,7 +7442,13 @@ export default function DesignEditor() {
           : previous;
       });
     },
-    [activeContent, activeFile, applyLocalContentUpdate, canEditDesign, t],
+    [
+      activeFile,
+      applyLocalContentUpdate,
+      canEditDesign,
+      getFreshActiveContent,
+      t,
+    ],
   );
 
   const handleScreenVisualStyleChange = useCallback(
@@ -7402,7 +7769,10 @@ export default function DesignEditor() {
 
   const handleCopySelection = useCallback(async () => {
     if (!selectedElement?.selector) return;
-    const html = getElementOuterHtml(activeContent, selectedElement.selector);
+    const html = getElementOuterHtml(
+      getFreshActiveContent(),
+      selectedElement.selector,
+    );
     if (!html) return;
     copiedLayerHtmlRef.current = html;
     pasteCascadeRef.current = 0;
@@ -7412,11 +7782,12 @@ export default function DesignEditor() {
     } catch {
       toast.error(t("designEditor.toasts.clipboardBlocked"));
     }
-  }, [activeContent, selectedElement, t]);
+  }, [getFreshActiveContent, selectedElement, t]);
 
   const handlePasteSelection = useCallback(
     (position?: { x: number; y: number }) => {
       if (!activeFile || !canEditDesign || !copiedLayerHtmlRef.current) return;
+      const baseContent = getFreshActiveContent();
 
       // 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
@@ -7451,7 +7822,7 @@ export default function DesignEditor() {
           }
         })();
 
-        const nextContent = insertClonedHtmlLayer(activeContent, strippedHtml, {
+        const nextContent = insertClonedHtmlLayer(baseContent, strippedHtml, {
           targetSelectors: [selector],
           placement: "after",
         });
@@ -7476,7 +7847,7 @@ export default function DesignEditor() {
             : { x: 120 + offset, y: 120 + offset };
         })();
       const nextContent = cloneHtmlLayerAtPosition(
-        activeContent,
+        baseContent,
         copiedLayerHtmlRef.current,
         targetPosition,
       );
@@ -7485,10 +7856,10 @@ export default function DesignEditor() {
       applyLocalContentUpdate(nextContent);
     },
     [
-      activeContent,
       activeFile,
       applyLocalContentUpdate,
       canEditDesign,
+      getFreshActiveContent,
       selectedCanvasSelector,
       selectedElement,
     ],
@@ -7496,10 +7867,11 @@ export default function DesignEditor() {
 
   const handlePasteOverSelection = useCallback(() => {
     if (!activeFile || !copiedLayerHtmlRef.current) return;
+    const baseContent = getFreshActiveContent();
     if (selectedElement?.boundingRect) {
       const { x, y } = selectedElement.boundingRect;
       const nextContent = cloneHtmlLayerAtPosition(
-        activeContent,
+        baseContent,
         copiedLayerHtmlRef.current,
         { x, y },
       );
@@ -7509,9 +7881,9 @@ export default function DesignEditor() {
       handlePasteSelection();
     }
   }, [
-    activeContent,
     activeFile,
     applyLocalContentUpdate,
+    getFreshActiveContent,
     handlePasteSelection,
     selectedElement,
   ]);
@@ -7519,7 +7891,8 @@ export default function DesignEditor() {
   const handleDuplicateSelection = useCallback(() => {
     if (!canEditDesign) return;
     if (selectedElement?.selector) {
-      const html = getElementOuterHtml(activeContent, selectedElement.selector);
+      const baseContent = getFreshActiveContent();
+      const html = getElementOuterHtml(baseContent, selectedElement.selector);
       if (!html) {
         toast.error(t("designEditor.toasts.duplicateElementFailed"));
         return;
@@ -7550,7 +7923,7 @@ export default function DesignEditor() {
           return html;
         }
       })();
-      const nextContent = insertClonedHtmlLayer(activeContent, strippedHtml, {
+      const nextContent = insertClonedHtmlLayer(baseContent, strippedHtml, {
         targetSelectors: [selector],
         placement: "after",
       });
@@ -7563,10 +7936,10 @@ export default function DesignEditor() {
     }
     if (activeFile) handleDuplicateScreen(activeFile.id);
   }, [
-    activeContent,
     activeFile,
     applyLocalContentUpdate,
     canEditDesign,
+    getFreshActiveContent,
     handleDuplicateScreen,
     selectedCanvasSelector,
     selectedElement,
@@ -7575,6 +7948,7 @@ export default function DesignEditor() {
 
   const handleDeleteSelection = useCallback(() => {
     if (!canEditDesign) return;
+    const baseContent = getFreshActiveContent();
     // Multi-select delete: when several DOM/code layers are selected in the
     // panel, remove all of them — not just the single focused element. Compose
     // the removals against the running content (re-projecting each pass) so
@@ -7586,7 +7960,7 @@ export default function DesignEditor() {
         !files.some((file) => file.id === layerId),
     );
     if (candidateIds.length > 1) {
-      let content = activeContent;
+      let content = baseContent;
       const removedSelectors: string[] = [];
       for (const layerId of candidateIds) {
         const projection = buildCodeLayerProjection(content);
@@ -7600,7 +7974,7 @@ export default function DesignEditor() {
         if (selector) removedSelectors.push(selector);
         content = next;
       }
-      if (content !== activeContent) {
+      if (content !== baseContent) {
         removedSelectors.forEach((selector) => deleteRuntimeElement(selector));
         applyLocalContentUpdate(content, { refreshPreview: false });
         setSelectedElement(null);
@@ -7611,27 +7985,26 @@ export default function DesignEditor() {
     }
 
     if (!selectedElement?.selector) return;
-    const projection = buildCodeLayerProjection(activeContent);
+    const projection = buildCodeLayerProjection(baseContent);
     const targetNode = resolveCodeLayerNodeFromElementInfo(
       projection,
       selectedElement,
     );
     const nextContent =
       (targetNode
-        ? removeCodeLayerNodeFromHtml(activeContent, targetNode)
-        : null) ??
-      removeElementFromHtml(activeContent, selectedElement.selector);
+        ? removeCodeLayerNodeFromHtml(baseContent, targetNode)
+        : null) ?? removeElementFromHtml(baseContent, selectedElement.selector);
     if (!nextContent) return;
     deleteRuntimeElement(selectedElement.selector);
     applyLocalContentUpdate(nextContent, { refreshPreview: false });
     setSelectedElement(null);
     setSelectedLayerIdsState([]);
   }, [
-    activeContent,
     applyLocalContentUpdate,
     canEditDesign,
     deleteRuntimeElement,
     files,
+    getFreshActiveContent,
     selectedElement,
     selectedLayerIdsState,
   ]);
@@ -7639,6 +8012,7 @@ export default function DesignEditor() {
   // Wrap the current multi-layer selection into a new group container.
   const handleGroupSelection = useCallback(() => {
     if (!canEditDesign || !activeFile) return;
+    const baseContent = getFreshActiveContent();
     // 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
@@ -7648,14 +8022,14 @@ export default function DesignEditor() {
     // selection.
     const fileIds = new Set(files.map((f) => f.id));
     const activeNodeIdSet = buildActiveFileNodeIdSet(
-      buildCodeLayerProjection(activeContent),
+      buildCodeLayerProjection(baseContent),
     );
     const nodeIds = selectedLayerIdsState.filter(
       (id) =>
         !id.startsWith("__") && !fileIds.has(id) && activeNodeIdSet.has(id),
     );
     if (nodeIds.length < 2) return;
-    const patch = applyVisualEdit(activeContent, {
+    const patch = applyVisualEdit(baseContent, {
       kind: "wrapNodes",
       targetIds: nodeIds,
       autoLayout: false,
@@ -7684,11 +8058,11 @@ export default function DesignEditor() {
       }
     }
   }, [
-    activeContent,
     activeFile,
     applyLocalContentUpdate,
     canEditDesign,
     files,
+    getFreshActiveContent,
     selectedLayerIdsState,
     t,
   ]);
@@ -7696,12 +8070,13 @@ export default function DesignEditor() {
   // Unwrap the currently selected single-container layer.
   const handleUngroupSelection = useCallback(() => {
     if (!canEditDesign || !activeFile) return;
+    const baseContent = getFreshActiveContent();
     // 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),
+      buildCodeLayerProjection(baseContent),
     );
     const nodeIds = selectedLayerIdsState.filter(
       (id) =>
@@ -7709,7 +8084,7 @@ export default function DesignEditor() {
     );
     const targetId = nodeIds[0];
     if (!targetId) return;
-    const patch = applyVisualEdit(activeContent, {
+    const patch = applyVisualEdit(baseContent, {
       kind: "unwrap",
       targetId,
     });
@@ -7727,11 +8102,11 @@ export default function DesignEditor() {
     setSelectedElement(null);
     setSelectedLayerIdsState([]);
   }, [
-    activeContent,
     activeFile,
     applyLocalContentUpdate,
     canEditDesign,
     files,
+    getFreshActiveContent,
     selectedLayerIdsState,
     t,
   ]);
@@ -7748,7 +8123,8 @@ export default function DesignEditor() {
       opts?: { direction?: "row" | "column"; gap?: string },
     ) => {
       if (!canEditDesign || !activeFile) return;
-      const patch = applyVisualEdit(activeContent, {
+      const baseContent = getFreshActiveContent();
+      const patch = applyVisualEdit(baseContent, {
         kind: "autoLayout",
         targetId: targetNodeId,
         enabled: true,
@@ -7777,7 +8153,13 @@ export default function DesignEditor() {
         setSelectedElement(elementInfoFromCodeLayerNode(containerNode));
       }
     },
-    [activeContent, activeFile, applyLocalContentUpdate, canEditDesign, t],
+    [
+      activeFile,
+      applyLocalContentUpdate,
+      canEditDesign,
+      getFreshActiveContent,
+      t,
+    ],
   );
 
   /**
@@ -9703,14 +10085,29 @@ ${serializedHtml}
         )
         .map((node) => node.id),
     );
+    const allLayerIds = new Set([
+      ...fileIds,
+      ...allCodeLayerNodes.map((node) => node.id),
+    ]);
     const reconcile = (
       current: Set<string>,
       sourceIds: Set<string>,
+      kind: "hidden" | "locked",
     ): Set<string> => {
       const next = new Set(sourceIds);
       current.forEach((id) => {
         if (fileIds.has(id)) next.add(id);
       });
+      layerStateOverridesRef.current.forEach((override, id) => {
+        if (!allLayerIds.has(id)) {
+          layerStateOverridesRef.current.delete(id);
+          return;
+        }
+        const value = override[kind];
+        if (value === undefined) return;
+        if (value) next.add(id);
+        else next.delete(id);
+      });
       if (
         next.size === current.size &&
         Array.from(next).every((id) => current.has(id))
@@ -9720,8 +10117,12 @@ ${serializedHtml}
       return next;
     };
 
-    setLockedLayerIds((current) => reconcile(current, lockedFromSource));
-    setHiddenLayerIds((current) => reconcile(current, hiddenFromSource));
+    setLockedLayerIds((current) =>
+      reconcile(current, lockedFromSource, "locked"),
+    );
+    setHiddenLayerIds((current) =>
+      reconcile(current, hiddenFromSource, "hidden"),
+    );
   }, [codeLayerModelsByFile, files]);
   const lockedLayerSelectors = useMemo(() => {
     const selectors = Array.from(lockedLayerIds)
@@ -9973,7 +10374,11 @@ ${serializedHtml}
     const match = statesPanelBreakpoints.find(
       (bp) => bp.widthPx === activeBreakpointWidthState,
     );
-    return match?.id ?? "auto";
+    if (match) return match.id;
+    const defaultMatch = DEFAULT_STATES_PANEL_BREAKPOINTS.find(
+      (bp) => bp.widthPx === activeBreakpointWidthState,
+    );
+    return defaultMatch?.id ?? "auto";
   }, [activeBreakpointWidthState, statesPanelBreakpoints]);
 
   const handleOpenDesignPreview = useCallback(() => {
@@ -10090,10 +10495,11 @@ ${serializedHtml}
       ) {
         return;
       }
+      const freshActiveContent = getFreshActiveContent();
       const destFile = files.find((file) => file.id === targetOwner.fileId);
       const destContent =
         targetOwner.fileId === activeFile?.id
-          ? activeContent
+          ? freshActiveContent
           : (destFile?.content ?? "");
       if (!destContent) return;
 
@@ -10124,10 +10530,26 @@ ${serializedHtml}
         }
       }
 
+      const targetTreeForMove =
+        targetOwner.fileId === activeFile?.id
+          ? buildCodeLayerTree(buildCodeLayerProjection(freshActiveContent))
+          : targetOwner.tree;
+      const orderedSameFileDragIds = sortCodeLayerIdsByTreeOrder(
+        sameFileDragIds,
+        targetTreeForMove,
+      );
+      const movedIdOrder = [
+        ...orderedSameFileDragIds,
+        ...crossFileDrags.map((drag) => drag.draggedId),
+      ];
+
       // --- Same-file moves (existing path) ---
       let nextDestContent = destContent;
       let moved = false;
-      for (const draggedId of sameFileDragIds) {
+      for (const draggedId of getLayerMoveIterationOrder(
+        orderedSameFileDragIds,
+        intent.placement,
+      )) {
         const patch = applyVisualEdit(nextDestContent, {
           kind: "moveNode",
           target: { nodeId: draggedId },
@@ -10158,7 +10580,7 @@ ${serializedHtml}
         const currentSourceContent = getLayerMoveSourceContent({
           sourceFileId,
           activeFileId: activeFile?.id,
-          activeContent,
+          activeContent: freshActiveContent,
           sourceFileContent: srcFile.content,
           sourceContentMap,
         });
@@ -10207,7 +10629,7 @@ ${serializedHtml}
       const finalDestTree = finalDestProjection
         ? buildCodeLayerTree(finalDestProjection)
         : [];
-      const movedNodesAfterMove = intent.draggedIds
+      const movedNodesAfterMove = movedIdOrder
         .map((draggedId) => movedNodeSnapshots.get(draggedId))
         .map((node) =>
           node && finalDestProjection
@@ -10249,14 +10671,14 @@ ${serializedHtml}
       }
     },
     [
-      activeContent,
       activeFile?.id,
       applyFileContentUpdate,
       canEditDesign,
       canMoveLayer,
       codeLayerOwnerByNodeId,
-      files,
       effectiveCodeLayerState,
+      files,
+      getFreshActiveContent,
       t,
     ],
   );
@@ -10406,7 +10828,7 @@ ${serializedHtml}
       const sourceFile = files.find((file) => file.id === owner.fileId);
       const sourceContent =
         owner.fileId === activeFile?.id
-          ? activeContent
+          ? getFreshActiveContent()
           : (sourceFile?.content ?? "");
       if (!sourceContent) return;
       const nextContent = setCodeLayerAttributeInHtml(
@@ -10422,12 +10844,12 @@ ${serializedHtml}
       setSelectedLayerIdsState([layerId]);
     },
     [
-      activeContent,
       activeFile?.id,
       applyFileContentUpdate,
       canEditDesign,
       codeLayerOwnerByNodeId,
       files,
+      getFreshActiveContent,
       queryClient,
       t,
       updateFileMutation,
@@ -10437,6 +10859,10 @@ ${serializedHtml}
   const handleToggleLayerLocked = useCallback(
     (layerId: string, locked: boolean) => {
       if (!canEditDesign) return;
+      layerStateOverridesRef.current.set(layerId, {
+        ...layerStateOverridesRef.current.get(layerId),
+        locked,
+      });
       const applyLockedState = () => {
         setLockedLayerIds((current) => {
           const next = new Set(current);
@@ -10451,38 +10877,47 @@ ${serializedHtml}
       }
       const owner = codeLayerOwnerByNodeId.get(layerId);
       const node = owner?.node;
-      if (!owner || !node) return;
+      if (!owner || !node) {
+        applyLockedState();
+        return;
+      }
       const sourceFile = files.find((file) => file.id === owner.fileId);
       const sourceContent =
         owner.fileId === activeFile?.id
-          ? activeContent
+          ? getFreshActiveContent()
           : (sourceFile?.content ?? "");
-      if (!sourceContent) return;
-      const nextContent = setCodeLayerAttributeInHtml(
-        sourceContent,
-        node,
-        "data-agent-native-locked",
-        locked ? "true" : null,
-      );
-      if (!nextContent || nextContent === sourceContent) return;
-      applyFileContentUpdate(owner.fileId, nextContent, {
-        refreshPreview: false,
-      });
+      if (sourceContent) {
+        const nextContent = setCodeLayerAttributeInHtml(
+          sourceContent,
+          node,
+          "data-agent-native-locked",
+          locked ? "true" : null,
+        );
+        if (nextContent && nextContent !== sourceContent) {
+          applyFileContentUpdate(owner.fileId, nextContent, {
+            refreshPreview: false,
+          });
+        }
+      }
       applyLockedState();
     },
     [
-      activeContent,
       activeFile?.id,
       applyFileContentUpdate,
       canEditDesign,
       codeLayerOwnerByNodeId,
       files,
+      getFreshActiveContent,
     ],
   );
 
   const handleToggleLayerHidden = useCallback(
     (layerId: string, hidden: boolean) => {
       if (!canEditDesign) return;
+      layerStateOverridesRef.current.set(layerId, {
+        ...layerStateOverridesRef.current.get(layerId),
+        hidden,
+      });
       const applyHiddenState = () => {
         setHiddenLayerIds((current) => {
           const next = new Set(current);
@@ -10497,32 +10932,37 @@ ${serializedHtml}
       }
       const owner = codeLayerOwnerByNodeId.get(layerId);
       const node = owner?.node;
-      if (!owner || !node) return;
+      if (!owner || !node) {
+        applyHiddenState();
+        return;
+      }
       const sourceFile = files.find((file) => file.id === owner.fileId);
       const sourceContent =
         owner.fileId === activeFile?.id
-          ? activeContent
+          ? getFreshActiveContent()
           : (sourceFile?.content ?? "");
-      if (!sourceContent) return;
-      const nextContent = setCodeLayerAttributeInHtml(
-        sourceContent,
-        node,
-        "data-agent-native-hidden",
-        hidden ? "true" : null,
-      );
-      if (!nextContent || nextContent === sourceContent) return;
-      applyFileContentUpdate(owner.fileId, nextContent, {
-        refreshPreview: false,
-      });
+      if (sourceContent) {
+        const nextContent = setCodeLayerAttributeInHtml(
+          sourceContent,
+          node,
+          "data-agent-native-hidden",
+          hidden ? "true" : null,
+        );
+        if (nextContent && nextContent !== sourceContent) {
+          applyFileContentUpdate(owner.fileId, nextContent, {
+            refreshPreview: false,
+          });
+        }
+      }
       applyHiddenState();
     },
     [
-      activeContent,
       activeFile?.id,
       applyFileContentUpdate,
       canEditDesign,
       codeLayerOwnerByNodeId,
       files,
+      getFreshActiveContent,
     ],
   );
 
@@ -11864,11 +12304,8 @@ ${serializedHtml}
                         sourceType={designSourceType}
                         fusionUrl={designFusionUrl}
                         previewWidthPx={activeBreakpointWidthState}
+                        shaderFillPreview={shaderFillPreview}
                         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"}
@@ -12036,6 +12473,51 @@ ${serializedHtml}
                   tweakValues={tweakSelections}
                   extensionContext={designExtensionContext}
                   readOnly={initialGenerationReadOnly}
+                  onComponentPropApplied={handleComponentPropApplied}
+                  onTokensApplied={(resolvedCssVars) => {
+                    if (!canEditDesign || !id) return;
+                    setTweakSelections((prev) => ({
+                      ...prev,
+                      ...resolvedCssVars,
+                    }));
+                    queryClient.setQueryData(
+                      ["action", "get-design", { id }],
+                      (old: any) => {
+                        if (!old || typeof old !== "object") return old;
+                        let currentData: Record<string, unknown> = {};
+                        if (typeof old.data === "string" && old.data) {
+                          try {
+                            const parsed = JSON.parse(old.data);
+                            if (
+                              parsed &&
+                              typeof parsed === "object" &&
+                              !Array.isArray(parsed)
+                            ) {
+                              currentData = parsed;
+                            }
+                          } catch {
+                            currentData = {};
+                          }
+                        }
+                        const currentSelections =
+                          currentData.tweakSelections &&
+                          typeof currentData.tweakSelections === "object" &&
+                          !Array.isArray(currentData.tweakSelections)
+                            ? currentData.tweakSelections
+                            : {};
+                        return {
+                          ...old,
+                          data: JSON.stringify({
+                            ...currentData,
+                            tweakSelections: {
+                              ...currentSelections,
+                              ...resolvedCssVars,
+                            },
+                          }),
+                        };
+                      },
+                    );
+                  }}
                   onTweakChange={(tweakId, value) =>
                     setTweakSelections((prev) => {
                       if (!canEditDesign) return prev;
@@ -12068,9 +12550,7 @@ ${serializedHtml}
                           activeStateId: selectedStateId,
                           activeBreakpointId: statesPanelActiveBreakpointId,
                           breakpoints: statesPanelBreakpoints,
-                          onStateSelect: (stateId) => {
-                            setSelectedStateId(stateId);
-                          },
+                          onStateSelect: handleDesignStateSelect,
                           onBreakpointSelect: (breakpointId) => {
                             // "auto" = clear the active breakpoint (overview).
                             if (breakpointId === "auto") {
@@ -12083,9 +12563,13 @@ ${serializedHtml}
                               }
                               return;
                             }
-                            const bp = statesPanelBreakpoints.find(
-                              (b) => b.id === breakpointId,
-                            );
+                            const bp =
+                              statesPanelBreakpoints.find(
+                                (b) => b.id === breakpointId,
+                              ) ??
+                              DEFAULT_STATES_PANEL_BREAKPOINTS.find(
+                                (b) => b.id === breakpointId,
+                              );
                             if (!bp) return;
                             setActiveBreakpointWidthState(bp.widthPx);
                             if (id) {
@@ -12105,7 +12589,7 @@ ${serializedHtml}
                         }
                       : undefined
                   }
-                  reviewPanelProps={reviewPanelProps}
+                  reviewPanelProps={resolvedReviewPanelProps}
                 />
               </div>
             ) : (
@@ -12132,12 +12616,33 @@ ${serializedHtml}
           selectedTarget={motionSelectedTarget}
           onApply={(tracks, durationMs) => {
             if (!id) return;
-            applyMotionEditMutation.mutate({
-              designId: id,
-              fileId: activeFile.id,
-              tracks: tracks.map(({ label: _label, ...t }) => t),
-              durationMs,
-            });
+            applyMotionEditMutation.mutate(
+              {
+                designId: id,
+                fileId: activeFile.id,
+                tracks: tracks.map(({ label: _label, ...t }) => t),
+                durationMs,
+                includeContent: true,
+              },
+              {
+                onSuccess: (result) => {
+                  const response = result as {
+                    fileId?: unknown;
+                    patchedContent?: unknown;
+                  };
+                  if (
+                    typeof response.fileId === "string" &&
+                    typeof response.patchedContent === "string"
+                  ) {
+                    applyFileContentUpdate(
+                      response.fileId,
+                      response.patchedContent,
+                      { refreshPreview: response.fileId === activeFile.id },
+                    );
+                  }
+                },
+              },
+            );
           }}
           applying={applyMotionEditMutation.isPending}
         />