@agent-native/core 0.80.9 → 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],
@@ -909,7 +987,8 @@ function LayerRow({
   const selectable = node.selectable !== false;
   const lockable = node.lockable !== false && Boolean(onToggleLocked);
   const hideable = node.hideable !== false && Boolean(onToggleHidden);
-  const draggable = selectable && Boolean(onMoveLayer);
+  const dragEligible = selectable && !node.locked && !node.hidden;
+  const draggable = dragEligible && Boolean(onMoveLayer);
   const canDropInside = layerCanDropInside(node, hasChildren);
   const activeDrop =
     dropIndicator?.targetId === node.id ? dropIndicator.placement : null;
@@ -947,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();
@@ -970,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();
@@ -989,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") {
@@ -1004,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) {
@@ -1014,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;
     }
@@ -1037,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);
@@ -1061,7 +1142,7 @@ function LayerRow({
   };
 
   const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
-    if (!onMoveLayer || !selectable) return;
+    if (!onMoveLayer || !dragEligible) return;
     // dataTransfer.getData() always returns "" during dragover per spec.
     // Read from the module-level activeDragState set in handleDragStart instead.
     if (!activeDragState) return;
@@ -1084,7 +1165,7 @@ function LayerRow({
   };
 
   const handleDrop = (event: DragEvent<HTMLDivElement>) => {
-    if (!onMoveLayer || !selectable) {
+    if (!onMoveLayer || !dragEligible) {
       onDropIndicatorChange(null);
       return;
     }

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

@@ -0,0 +1,157 @@
+import { useT } from "@agent-native/core/client";
+import {
+  IconInfoCircle,
+  IconMessageBolt,
+  IconClipboard,
+  IconX,
+} from "@tabler/icons-react";
+import { useState } from "react";
+
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { useAgentEditRequest } from "@/hooks/useAgentEditRequest";
+
+export interface LocalSourceEditBannerProps {
+  /** The design id for agent context. */
+  designId: string;
+  /** The active file id for agent context, if known. */
+  fileId?: string;
+  /** Path to the localhost source file that should receive edits, if known. */
+  routeSourceFile?: string;
+  /** Called when the user dismisses the banner. */
+  onDismiss?: () => void;
+}
+
+/**
+ * Dismissible informational banner shown for screens connected to a local
+ * source (localhost / React dev server). Explains that edits are routed
+ * through the AI agent rather than applied directly, and provides quick
+ * "Ask AI to edit" and "Copy prompt" affordances.
+ */
+export function LocalSourceEditBanner({
+  designId,
+  fileId,
+  routeSourceFile,
+  onDismiss,
+}: LocalSourceEditBannerProps) {
+  const t = useT();
+  const { sendEdit, copyPrompt } = useAgentEditRequest();
+  const [promptOpen, setPromptOpen] = useState(false);
+  const [request, setRequest] = useState("");
+
+  const baseArgs = { designId, fileId, routeSourceFile };
+  const submitArgs = { ...baseArgs, message: request };
+  const trimmed = request.trim();
+
+  return (
+    <>
+      <Alert className="relative flex items-start gap-2 rounded-none border-x-0 border-t-0 py-2 px-3 text-xs">
+        <IconInfoCircle className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+        <AlertDescription className="flex flex-1 flex-col gap-1.5 text-xs leading-snug">
+          <span>{t("designEditor.localSourceEdit.bannerNotice")}</span>
+          <div className="flex flex-wrap gap-1.5">
+            <Button
+              size="sm"
+              variant="outline"
+              className="h-6 gap-1 px-2 text-[11px]"
+              onClick={() => setPromptOpen(true)}
+            >
+              <IconMessageBolt className="size-3 shrink-0" />
+              {t("designEditor.localSourceEdit.askAiToEdit")}
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-6 gap-1 px-2 text-[11px] text-muted-foreground"
+              onClick={() => {
+                void copyPrompt({
+                  ...baseArgs,
+                  message: routeSourceFile
+                    ? `Edit the connected source file "${routeSourceFile}" as requested.`
+                    : "Edit the connected source code as requested.",
+                });
+              }}
+            >
+              <IconClipboard className="size-3 shrink-0" />
+              {t("designEditor.localSourceEdit.copyPrompt")}
+            </Button>
+          </div>
+        </AlertDescription>
+        {onDismiss && (
+          <button
+            type="button"
+            aria-label={t("designEditor.dismiss")}
+            onClick={onDismiss}
+            className="absolute end-2 top-2 rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+          >
+            <IconX className="size-3.5" />
+          </button>
+        )}
+      </Alert>
+
+      <Dialog open={promptOpen} onOpenChange={setPromptOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {t("designEditor.localSourceEdit.dialogTitle")}
+            </DialogTitle>
+            <DialogDescription>
+              {routeSourceFile
+                ? t("designEditor.localSourceEdit.dialogDescriptionFile", {
+                    file: routeSourceFile,
+                  })
+                : t("designEditor.localSourceEdit.dialogDescription")}
+            </DialogDescription>
+          </DialogHeader>
+          <Textarea
+            autoFocus
+            value={request}
+            onChange={(e) => setRequest(e.target.value)}
+            placeholder={t("designEditor.localSourceEdit.requestPlaceholder")}
+            className="min-h-[96px] resize-none"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && trimmed) {
+                e.preventDefault();
+                void sendEdit(submitArgs);
+                setRequest("");
+                setPromptOpen(false);
+              }
+            }}
+          />
+          <DialogFooter className="gap-2">
+            <Button
+              variant="ghost"
+              onClick={() => {
+                void copyPrompt(submitArgs);
+              }}
+              disabled={!trimmed}
+            >
+              <IconClipboard className="size-4" />
+              {t("designEditor.localSourceEdit.copyPrompt")}
+            </Button>
+            <Button
+              onClick={() => {
+                void sendEdit(submitArgs);
+                setRequest("");
+                setPromptOpen(false);
+              }}
+              disabled={!trimmed}
+            >
+              <IconMessageBolt className="size-4" />
+              {t("designEditor.localSourceEdit.askAiToEdit")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}