@agent-native/core 0.80.10 → 0.80.11

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

@@ -170,7 +170,7 @@ export interface LayersPanelProps {
   canMoveLayer?: (intent: LayersPanelMoveIntent) => boolean;
 }
 
-interface FlatLayerRow {
+export interface FlatLayerRow {
   node: LayersPanelNode;
   rowKey: string;
   depth: number;
@@ -412,6 +412,65 @@ function collectAncestorIds(
   return Array.from(ancestors);
 }
 
+export function getLayerSelectionAnchorFromExternalSelection(args: {
+  selectedIds: readonly string[];
+  selectableVisibleIds: readonly string[];
+}): string | null {
+  const selectableVisibleIdSet = new Set(args.selectableVisibleIds);
+  return (
+    [...args.selectedIds]
+      .reverse()
+      .find((id) => selectableVisibleIdSet.has(id)) ?? null
+  );
+}
+
+export function getTreeOrderedLayerIds(
+  ids: readonly string[],
+  visibleRows: readonly FlatLayerRow[],
+): string[] {
+  const idSet = new Set(ids.filter((id) => id && !id.startsWith("__")));
+  const orderedIds = visibleRows
+    .map((row) => row.node.id)
+    .filter((id) => idSet.has(id));
+  const orderedIdSet = new Set(orderedIds);
+  return [
+    ...orderedIds,
+    ...ids.filter((id) => id && !id.startsWith("__") && !orderedIdSet.has(id)),
+  ];
+}
+
+export function getDraggedLayerIdsForRows(args: {
+  selectedIds: readonly string[];
+  nodeId: string;
+  visibleRows: readonly FlatLayerRow[];
+}): string[] {
+  const rawDraggedIds = args.selectedIds.includes(args.nodeId)
+    ? getTreeOrderedLayerIds(args.selectedIds, args.visibleRows)
+    : [args.nodeId];
+  const draggedIdSet = new Set(rawDraggedIds);
+  return rawDraggedIds.filter((id) => {
+    const rowForId = args.visibleRows.find((row) => row.node.id === id);
+    return !rowForId?.ancestorIds.some((ancestorId) =>
+      draggedIdSet.has(ancestorId),
+    );
+  });
+}
+
+export function shouldResyncLayerSelectionAnchor(args: {
+  selectionSignature: string;
+  lastPanelSelectionSignature: string;
+  currentAnchor: string | null;
+  selectableVisibleIds: readonly string[];
+}) {
+  const anchorStillVisible =
+    args.currentAnchor !== null &&
+    args.selectableVisibleIds.includes(args.currentAnchor);
+  return (
+    args.selectionSignature !== args.lastPanelSelectionSignature ||
+    !anchorStillVisible
+  );
+}
+
 function layerCanShowBadge(node: LayersPanelNode) {
   return (
     node.type === "file" ||
@@ -451,6 +510,7 @@ export function LayersPanel({
   const labels = useMemo(() => mergeLabels(labelsProp, t), [labelsProp, t]);
   const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
   const selectedIdsRef = useRef<readonly string[]>(selectedIds);
+  const lastPanelSelectionSignatureRef = useRef(selectedIds.join("\0"));
   const expandedIdSet = useMemo(() => new Set(expandedIds), [expandedIds]);
   const lastSelectionAnchorRef = useRef<string | null>(selectedIds[0] ?? null);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -486,9 +546,35 @@ export function LayersPanel({
     [roots, selectedIdSet],
   );
 
+  const selectableVisibleIds = useMemo(
+    () =>
+      visibleRows
+        .map(({ node }) => node)
+        .filter((node) => node.selectable !== false)
+        .map((node) => node.id),
+    [visibleRows],
+  );
+
   useLayoutEffect(() => {
     selectedIdsRef.current = selectedIds;
-  }, [selectedIds]);
+    const signature = selectedIds.join("\0");
+    if (
+      !shouldResyncLayerSelectionAnchor({
+        selectionSignature: signature,
+        lastPanelSelectionSignature: lastPanelSelectionSignatureRef.current,
+        currentAnchor: lastSelectionAnchorRef.current,
+        selectableVisibleIds,
+      })
+    ) {
+      return;
+    }
+    lastPanelSelectionSignatureRef.current = signature;
+    lastSelectionAnchorRef.current =
+      getLayerSelectionAnchorFromExternalSelection({
+        selectedIds,
+        selectableVisibleIds,
+      });
+  }, [selectableVisibleIds, selectedIds]);
 
   useEffect(() => {
     if (selectedAncestorIds.length === 0) return;
@@ -522,15 +608,6 @@ export function LayersPanel({
     return () => window.cancelAnimationFrame(frame);
   }, [selectedScrollRowKey]);
 
-  const selectableVisibleIds = useMemo(
-    () =>
-      visibleRows
-        .map(({ node }) => node)
-        .filter((node) => node.selectable !== false)
-        .map((node) => node.id),
-    [visibleRows],
-  );
-
   const selectNode = useCallback(
     (
       id: string,
@@ -582,6 +659,7 @@ export function LayersPanel({
       if (!options.range) {
         lastSelectionAnchorRef.current = id;
       }
+      lastPanelSelectionSignatureRef.current = nextIds.join("\0");
       onSelectionChange(nextIds, { id, selectedIds: nextIds, ...options });
     },
     [onSelectionChange, selectableVisibleIds],
@@ -948,12 +1026,15 @@ function LayerRow({
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
-    const focusVisibleButton = (nextIndex: number) => {
+    const getFocusableButtons = () => {
       const tree = event.currentTarget.closest('[role="tree"]');
-      if (!tree) return false;
-      const buttons = Array.from(
+      if (!tree) return [];
+      return Array.from(
         tree.querySelectorAll<HTMLButtonElement>("[data-layer-row-button]"),
       ).filter((button) => !button.disabled);
+    };
+    const focusVisibleButton = (nextIndex: number) => {
+      const buttons = getFocusableButtons();
       const target =
         buttons[Math.max(0, Math.min(buttons.length - 1, nextIndex))];
       target?.focus();
@@ -971,6 +1052,8 @@ function LayerRow({
     const currentIndex = visibleRows.findIndex(
       (visibleRow) => visibleRow.rowKey === row.rowKey,
     );
+    const focusableButtons = getFocusableButtons();
+    const currentFocusableIndex = focusableButtons.indexOf(event.currentTarget);
 
     if (event.key === "Enter" || event.key === " " || event.key === "Space") {
       event.preventDefault();
@@ -990,12 +1073,12 @@ function LayerRow({
     }
     if (event.key === "ArrowDown") {
       event.preventDefault();
-      focusVisibleButton(currentIndex + 1);
+      focusVisibleButton(currentFocusableIndex + 1);
       return;
     }
     if (event.key === "ArrowUp") {
       event.preventDefault();
-      focusVisibleButton(currentIndex - 1);
+      focusVisibleButton(currentFocusableIndex - 1);
       return;
     }
     if (event.key === "Home") {
@@ -1005,7 +1088,7 @@ function LayerRow({
     }
     if (event.key === "End") {
       event.preventDefault();
-      focusVisibleButton(visibleRows.length - 1);
+      focusVisibleButton(focusableButtons.length - 1);
       return;
     }
     if (event.key === "ArrowRight" && hasChildren && !isExpanded) {
@@ -1015,9 +1098,13 @@ function LayerRow({
     }
     if (event.key === "ArrowRight" && hasChildren && isExpanded) {
       event.preventDefault();
-      const child = visibleRows[currentIndex + 1];
+      const nextButton = focusableButtons[currentFocusableIndex + 1];
+      const childId = nextButton?.dataset.layerNodeId;
+      const child = childId
+        ? visibleRows.find((visibleRow) => visibleRow.node.id === childId)
+        : null;
       if (child?.ancestorIds.includes(node.id)) {
-        focusVisibleButton(currentIndex + 1);
+        focusVisibleButton(currentFocusableIndex + 1);
       }
       return;
     }
@@ -1038,17 +1125,10 @@ function LayerRow({
       event.preventDefault();
       return;
     }
-    const rawDraggedIds = selectedIds.includes(node.id)
-      ? selectedIds.filter((id) => !id.startsWith("__"))
-      : [node.id];
-    // Remove any node whose ancestor is also being dragged to avoid double-moves.
-    // When a parent is moved, its children move with it automatically.
-    const draggedIdSet = new Set(rawDraggedIds);
-    const draggedIds = rawDraggedIds.filter((id) => {
-      const rowForId = visibleRows.find((r) => r.node.id === id);
-      return !rowForId?.ancestorIds.some((ancestorId) =>
-        draggedIdSet.has(ancestorId),
-      );
+    const draggedIds = getDraggedLayerIdsForRows({
+      selectedIds,
+      nodeId: node.id,
+      visibleRows,
     });
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.setData("application/x-design-layer-id", node.id);

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

@@ -174,6 +174,14 @@ export function MotionDock({
     () => new Set(tracks.map((t) => t.targetNodeId)),
   );
 
+  useEffect(() => {
+    setExpandedNodeIds((current) => {
+      const next = new Set(current);
+      for (const track of tracks) next.add(track.targetNodeId);
+      return next.size === current.size ? current : next;
+    });
+  }, [tracks]);
+
   // Ruler / track area ref for pointer math.
   const trackAreaRef = useRef<HTMLDivElement>(null);
 
@@ -403,6 +411,7 @@ export function MotionDock({
   // ── Render ────────────────────────────────────────────────────────────────
   return (
     <div
+      aria-label="Motion dock"
       className={cn(
         "flex flex-col border-t border-border bg-background transition-all duration-150 select-none",
         isOpen ? "" : "h-8",

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

@@ -4377,7 +4377,7 @@ const Screen = memo(function Screen({
           )}
           {creationToolActive ? (
             <span
-              className="absolute inset-0 z-20 cursor-crosshair"
+              className="pointer-events-auto absolute inset-0 z-20 cursor-crosshair"
               aria-hidden="true"
             />
           ) : null}

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

@@ -63,6 +63,12 @@ export interface ReviewFixSource {
   filename?: string;
 }
 
+export interface ReviewFixResult {
+  applied?: boolean;
+  fileId?: string;
+  patchedContent?: string;
+}
+
 /** Per-finding state for the optimistic Fix flow. */
 type FixStatus = "idle" | "pending" | "fixed" | "error";
 
@@ -116,7 +122,7 @@ export interface ReviewPanelProps {
    * Called after a fix is successfully applied — e.g. to refetch the audit so
    * the resolved finding drops out of the list.  The applied finding is passed.
    */
-  onFixApplied?: (finding: A11yFinding) => void;
+  onFixApplied?: (finding: A11yFinding, result?: ReviewFixResult) => void;
   className?: string;
 }
 
@@ -186,7 +192,7 @@ function FindingRow({
   finding: A11yFinding;
   onClick?: (finding: A11yFinding) => void;
   fixSource?: ReviewFixSource;
-  onFixApplied?: (finding: A11yFinding) => void;
+  onFixApplied?: (finding: A11yFinding, result?: ReviewFixResult) => void;
 }) {
   const cfg = SEVERITY_CONFIG[finding.severity];
   const Icon = cfg.icon;
@@ -213,6 +219,7 @@ function FindingRow({
         designId: fixSource?.designId,
         fileId: fixSource?.fileId,
         filename: fixSource?.filename,
+        includeContent: true,
         finding: {
           id: finding.id,
           severity: finding.severity,
@@ -224,10 +231,10 @@ function FindingRow({
           wcag: finding.wcag,
           fixAvailable: finding.fixAvailable,
         },
-      })) as { applied?: boolean } | undefined;
+      })) as ReviewFixResult | undefined;
       if (res?.applied) {
         setFixStatus("fixed");
-        onFixApplied?.(finding);
+        onFixApplied?.(finding, res);
       } else {
         // The engine could not apply it (e.g. selector no longer resolves).
         setFixStatus("error");
@@ -374,7 +381,7 @@ function A11ySection({
   onRunAudit?: () => void;
   onFindingClick?: (finding: A11yFinding) => void;
   fixSource?: ReviewFixSource;
-  onFixApplied?: (finding: A11yFinding) => void;
+  onFixApplied?: (finding: A11yFinding, result?: ReviewFixResult) => void;
 }) {
   const errors = findings.filter((f) => f.severity === "error");
   const warnings = findings.filter((f) => f.severity === "warning");

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

@@ -58,6 +58,8 @@ interface DesignStateRow {
   breakpoint: DesignStateBreakpoint;
   sourceRef?: string | null;
   route?: string | null;
+  fixtureData?: Record<string, unknown> | null;
+  captureData?: Record<string, unknown> | null;
   previewRef?: string | null;
   createdAt?: string | null;
   updatedAt?: string | null;
@@ -76,7 +78,7 @@ export interface StatesPanelProps {
   breakpoints: Array<{ id: string; label: string; widthPx: number }>;
   /** Whether the design's source supports live captures. */
   canCapture?: boolean;
-  onStateSelect: (stateId: string | null) => void;
+  onStateSelect: (stateId: string | null, row?: DesignStateRow) => void;
   onBreakpointSelect: (breakpointId: string) => void;
   onAddBreakpoint?: () => void;
   onCapture?: () => void;
@@ -455,7 +457,7 @@ export function StatesPanel({
                 key={row.id}
                 row={row}
                 isActive={activeStateId === row.id}
-                onSelect={() => onStateSelect(row.id)}
+                onSelect={() => onStateSelect(row.id, row)}
                 onDelete={() => handleDeleteState(row.id)}
               />
             ))}

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

@@ -182,18 +182,21 @@ function TokenRow({
       )}
 
       {/* Friendly name */}
-      <span
-        className="flex-1 cursor-pointer truncate text-[11px] text-foreground"
+      <button
+        type="button"
+        className="min-w-0 flex-1 cursor-pointer truncate bg-transparent p-0 text-left text-[11px] text-foreground"
         onClick={onStartEdit}
+        aria-label={`Edit ${token.name}`}
         title={token.name}
       >
         {token.name}
-      </span>
+      </button>
 
       {/* Value / edit input */}
       {editing ? (
         <Input
           ref={inputRef}
+          aria-label={`Token value for ${token.name}`}
           value={editDraft}
           onChange={(e) => onDraftChange(e.target.value)}
           onKeyDown={(e) => {
@@ -204,20 +207,22 @@ function TokenRow({
           className="h-5 w-24 px-1 py-0 text-[11px] font-mono"
         />
       ) : (
-        <span
-          className="max-w-[6rem] cursor-pointer truncate text-right font-mono text-[10px] text-muted-foreground hover:text-foreground"
+        <button
+          type="button"
+          className="max-w-[6rem] cursor-pointer truncate bg-transparent p-0 text-right font-mono text-[10px] text-muted-foreground hover:text-foreground"
           title={token.value}
+          aria-label={`Edit value for ${token.name}`}
           onClick={onStartEdit}
         >
           {token.value}
-        </span>
+        </button>
       )}
 
       {/* CSS var chip (hidden when editing, visible on hover) */}
       {!editing && (
         <Tooltip>
           <TooltipTrigger asChild>
-            <span className="hidden cursor-default select-all rounded bg-muted px-1 py-0 font-mono text-[9px] text-muted-foreground/70 group-hover:inline">
+            <span className="pointer-events-none hidden max-w-[5.5rem] shrink-0 cursor-default select-all truncate rounded bg-muted px-1 py-0 font-mono text-[9px] text-muted-foreground/70 group-hover:inline-block">
               {token.cssVar}
             </span>
           </TooltipTrigger>
@@ -231,7 +236,7 @@ function TokenRow({
       {!editing && (
         <Badge
           variant="outline"
-          className="hidden h-4 cursor-default px-1 py-0 text-[9px] text-muted-foreground/60 group-hover:flex"
+          className="pointer-events-none hidden h-4 shrink-0 cursor-default px-1 py-0 text-[9px] text-muted-foreground/60 group-hover:flex"
         >
           {token.source}
         </Badge>

package/corpus/templates/design/app/i18n/zh-TW.ts

@@ -425,6 +425,7 @@ const messages = {
       layerMoveFailed: "無法移動該圖層",
       duplicateElementFailed: "無法複製該元素",
       saveCopyError: "無法儲存這個設計的副本",
+      auditRunFailed: "無法執行設計稽核",
     },
     localSourceEdit: {
       bannerNotice: "對已連結本機程式碼的編輯由 AI 代理套用，不會直接寫入。",

package/corpus/templates/design/app/i18n-data.ts

@@ -438,6 +438,7 @@ const enUS = {
       layerMoveFailed: "Could not move that layer",
       duplicateElementFailed: "Could not duplicate that element",
       saveCopyError: "Could not save a copy of this design",
+      auditRunFailed: "Unable to run design audit",
       componentCreated: "Component created",
       componentCreateFailed: "Could not create component",
     },
@@ -8912,6 +8913,7 @@ const designPublicShareOverrides = {
       shareEditorLinkDescription: "有權限的任何人都能在編輯器中開啟這個設計。",
       toasts: {
         saveCopyError: "無法儲存這個設計的副本",
+        auditRunFailed: "無法執行設計稽核",
       },
     },
     visualEdit: {
@@ -8941,6 +8943,7 @@ const designPublicShareOverrides = {
         "有访问权限的任何人都可以在编辑器中打开此设计。",
       toasts: {
         saveCopyError: "无法保存此设计的副本",
+        auditRunFailed: "无法运行设计审核",
       },
     },
     visualEdit: {
@@ -8970,6 +8973,7 @@ const designPublicShareOverrides = {
         "Cualquier persona con acceso puede abrir este diseño en el editor.",
       toasts: {
         saveCopyError: "No se pudo guardar una copia de este diseño",
+        auditRunFailed: "No se pudo ejecutar la auditoria de diseno",
       },
     },
     visualEdit: {
@@ -8999,6 +9003,7 @@ const designPublicShareOverrides = {
         "Toute personne ayant acces peut ouvrir ce design dans l'editeur.",
       toasts: {
         saveCopyError: "Impossible d'enregistrer une copie de ce design",
+        auditRunFailed: "Impossible d'executer l'audit de design",
       },
     },
     visualEdit: {
@@ -9029,6 +9034,7 @@ const designPublicShareOverrides = {
       toasts: {
         saveCopyError:
           "Eine Kopie dieses Designs konnte nicht gespeichert werden",
+        auditRunFailed: "Design-Audit konnte nicht ausgefuehrt werden",
       },
     },
     visualEdit: {
@@ -9058,6 +9064,7 @@ const designPublicShareOverrides = {
         "アクセス権のある人は、このデザインをエディターで開けます。",
       toasts: {
         saveCopyError: "このデザインのコピーを保存できませんでした",
+        auditRunFailed: "デザイン監査を実行できませんでした",
       },
     },
     visualEdit: {
@@ -9087,6 +9094,7 @@ const designPublicShareOverrides = {
         "액세스 권한이 있는 누구나 편집기에서 이 디자인을 열 수 있습니다.",
       toasts: {
         saveCopyError: "이 디자인의 사본을 저장할 수 없습니다",
+        auditRunFailed: "디자인 감사를 실행할 수 없습니다",
       },
     },
     visualEdit: {
@@ -9116,6 +9124,7 @@ const designPublicShareOverrides = {
         "Qualquer pessoa com acesso pode abrir este design no editor.",
       toasts: {
         saveCopyError: "Nao foi possivel salvar uma copia deste design",
+        auditRunFailed: "Nao foi possivel executar a auditoria de design",
       },
     },
     visualEdit: {
@@ -9145,6 +9154,7 @@ const designPublicShareOverrides = {
         "access वाला कोई भी व्यक्ति इस design को editor में खोल सकता है।",
       toasts: {
         saveCopyError: "इस design की copy सहेजी नहीं जा सकी",
+        auditRunFailed: "design audit चलाया नहीं जा सका",
       },
     },
     visualEdit: {
@@ -9174,6 +9184,7 @@ const designPublicShareOverrides = {
         "يمكن لاي شخص لديه صلاحية الوصول فتح هذا التصميم في المحرر.",
       toasts: {
         saveCopyError: "تعذر حفظ نسخة من هذا التصميم",
+        auditRunFailed: "تعذر تشغيل تدقيق التصميم",
       },
     },
     visualEdit: {