@agent-native/core 0.80.7 → 0.80.9

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

@@ -7,12 +7,14 @@ import {
   IconLock,
   IconLockOpen,
   IconLayoutGrid,
+  IconPencil,
   IconPlus,
   IconSearch,
 } from "@tabler/icons-react";
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -23,6 +25,13 @@ import {
 } from "react";
 
 import { Button } from "@/components/ui/button";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 import { Input } from "@/components/ui/input";
 import {
   Tooltip,
@@ -31,6 +40,9 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
+const LAYER_ROW_BASE_INDENT = 4;
+const LAYER_ROW_DEPTH_INDENT = 18;
+
 export type LayersPanelNodeType =
   | "file"
   | "screen"
@@ -94,6 +106,7 @@ export interface LayersPanelSelectionIntent {
   id: string;
   selectedIds: string[];
   additive: boolean;
+  currentSelectedIds?: string[];
   range: boolean;
   source: "keyboard" | "pointer";
 }
@@ -107,6 +120,7 @@ export interface LayersPanelMoveIntent {
 export interface LayersPanelLabels {
   title: string;
   screens: string;
+  allScreens: string;
   screenOverview: string;
   addScreen: string;
   searchPlaceholder: string;
@@ -128,6 +142,7 @@ export interface LayersPanelLabels {
 export interface LayersPanelProps {
   screens?: LayersPanelFile[];
   activeScreenId?: string;
+  screenOverviewActive?: boolean;
   files?: LayersPanelFile[];
   layers?: LayersPanelNode[];
   codeLayers?: LayersPanelNode[];
@@ -161,19 +176,45 @@ interface FlatLayerRow {
   depth: number;
   ancestorIds: string[];
   hasChildren: boolean;
+  canAcceptChildren: boolean;
 }
 
+// Node types that can contain children even when currently empty.
+// Leaf / void types (text, image, shape, rectangle) are excluded so we don't
+// offer an "inside" drop zone on genuinely non-container elements.
+const CONTAINER_TYPES = new Set<LayersPanelNodeType | undefined>([
+  "file",
+  "screen",
+  "frame",
+  "group",
+  "section",
+  "component",
+  "instance",
+  "code",
+  "element",
+]);
+
 const SECTION_CODE_ID = "__design_layers_code__";
 const SECTION_ELEMENT_ID = "__design_layers_elements__";
 
 // Module-level drag state: dataTransfer.getData() returns "" during dragover
 // per spec; the source row stores the drag payload here on dragstart instead.
 let activeDragState: { sourceId: string; draggedIds: string[] } | null = null;
+let activeDropIntent: LayersPanelMoveIntent | null = null;
+
+const ROW_BASE_INDENT = 4;
+const ROW_INDENT_STEP = 28;
+const ROW_MAX_INDENT = 96;
+
+function rowIndent(depth: number): number {
+  return Math.min(ROW_BASE_INDENT + depth * ROW_INDENT_STEP, ROW_MAX_INDENT);
+}
 
 function defaultLabels(t: ReturnType<typeof useT>): LayersPanelLabels {
   return {
     title: t("layersPanel.title"),
     screens: t("layersPanel.screens"),
+    allScreens: t("layersPanel.allScreens"),
     screenOverview: t("designEditor.screenOverview"),
     addScreen: t("layersPanel.addScreen"),
     searchPlaceholder: t("layersPanel.searchPlaceholder"),
@@ -307,8 +348,16 @@ function flattenRows(
   nodes.forEach((node, index) => {
     const children = node.children ?? [];
     const hasChildren = children.length > 0;
+    const canAcceptChildren = CONTAINER_TYPES.has(node.type);
     const rowKey = `${parentKey}/${node.id}:${index}`;
-    rows.push({ node, rowKey, depth, ancestorIds, hasChildren });
+    rows.push({
+      node,
+      rowKey,
+      depth,
+      ancestorIds,
+      hasChildren,
+      canAcceptChildren,
+    });
     if (hasChildren && (forceExpanded || expandedIds.has(node.id))) {
       flattenRows(
         children,
@@ -374,6 +423,7 @@ function layerCanShowBadge(node: LayersPanelNode) {
 export function LayersPanel({
   screens,
   activeScreenId,
+  screenOverviewActive = false,
   files,
   layers,
   codeLayers,
@@ -400,6 +450,7 @@ export function LayersPanel({
   const t = useT();
   const labels = useMemo(() => mergeLabels(labelsProp, t), [labelsProp, t]);
   const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const selectedIdsRef = useRef<readonly string[]>(selectedIds);
   const expandedIdSet = useMemo(() => new Set(expandedIds), [expandedIds]);
   const lastSelectionAnchorRef = useRef<string | null>(selectedIds[0] ?? null);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -435,6 +486,10 @@ export function LayersPanel({
     [roots, selectedIdSet],
   );
 
+  useLayoutEffect(() => {
+    selectedIdsRef.current = selectedIds;
+  }, [selectedIds]);
+
   useEffect(() => {
     if (selectedAncestorIds.length === 0) return;
     const next = new Set(expandedIds);
@@ -481,33 +536,47 @@ export function LayersPanel({
       id: string,
       options: {
         additive: boolean;
+        currentSelectedIds?: string[];
         range: boolean;
         source: "keyboard" | "pointer";
       },
     ) => {
+      const currentSelectedIds =
+        options.currentSelectedIds ?? selectedIdsRef.current;
+      const currentSelectedIdSet = new Set(currentSelectedIds);
       let nextIds: string[];
       if (options.range && lastSelectionAnchorRef.current) {
-        const from = selectableVisibleIds.indexOf(
-          lastSelectionAnchorRef.current,
-        );
+        let anchor = lastSelectionAnchorRef.current;
+        if (selectableVisibleIds.indexOf(anchor) < 0) {
+          // Stale anchor (deleted / filtered / collapsed out of view): pivot from
+          // the last selected layer that is still visible & selectable, matching
+          // Figma's behavior instead of dropping the range to a single select.
+          const fallback = [...selectedIds]
+            .reverse()
+            .find((sid) => selectableVisibleIds.includes(sid));
+          if (fallback) {
+            anchor = fallback;
+            lastSelectionAnchorRef.current = fallback;
+          }
+        }
+        const from = selectableVisibleIds.indexOf(anchor);
         const to = selectableVisibleIds.indexOf(id);
         if (from >= 0 && to >= 0) {
           const [start, end] = from < to ? [from, to] : [to, from];
           const rangeIds = selectableVisibleIds.slice(start, end + 1);
           nextIds = options.additive
-            ? Array.from(new Set([...selectedIds, ...rangeIds]))
+            ? Array.from(new Set([...currentSelectedIds, ...rangeIds]))
             : rangeIds;
         } else {
           nextIds = [id];
         }
       } else if (options.additive) {
-        nextIds = selectedIdSet.has(id)
-          ? selectedIds.filter((selectedId) => selectedId !== id)
-          : [...selectedIds, id];
+        nextIds = currentSelectedIdSet.has(id)
+          ? currentSelectedIds.filter((selectedId) => selectedId !== id)
+          : [...currentSelectedIds, id];
       } else {
         nextIds = [id];
       }
-
       // Only advance the anchor on plain clicks; Shift+clicks extend from the
       // existing anchor so the pivot stays fixed across consecutive range clicks.
       if (!options.range) {
@@ -515,7 +584,7 @@ export function LayersPanel({
       }
       onSelectionChange(nextIds, { id, selectedIds: nextIds, ...options });
     },
-    [onSelectionChange, selectableVisibleIds, selectedIdSet, selectedIds],
+    [onSelectionChange, selectableVisibleIds],
   );
 
   const commitRename = useCallback(
@@ -599,12 +668,6 @@ export function LayersPanel({
               {labels.screens}
             </h2>
             <div className="flex items-center gap-0.5 text-muted-foreground">
-              <IconTooltipButton
-                label={labels.screenOverview}
-                onClick={onScreenOverview}
-              >
-                <IconLayoutGrid className="size-3.5" />
-              </IconTooltipButton>
               <IconTooltipButton
                 label={labels.searchPlaceholder}
                 onClick={openSearch}
@@ -620,9 +683,30 @@ export function LayersPanel({
               </IconTooltipButton>
             </div>
           </div>
+          <div className="px-2">
+            <button
+              type="button"
+              className={cn(
+                "flex h-8 w-full cursor-default items-center gap-2 rounded-[5px] px-2 text-left text-[12px] font-semibold outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
+                screenOverviewActive
+                  ? "bg-[var(--design-editor-active-row-color)] text-foreground"
+                  : "text-foreground/85 hover:bg-[var(--design-editor-active-row-color)] hover:text-foreground",
+              )}
+              aria-current={screenOverviewActive ? "page" : undefined}
+              onClick={() => onScreenOverview?.()}
+              title={labels.allScreens}
+            >
+              <IconLayoutGrid className="size-4 shrink-0" />
+              <span className="min-w-0 flex-1 truncate">
+                {labels.allScreens}
+              </span>
+            </button>
+          </div>
+          <div className="mx-3 my-2 border-t border-[var(--design-editor-panel-divider-color)]" />
           <div className="space-y-0.5 px-2">
             {screenRows.map((screen) => {
-              const isActive = screen.id === activeScreenId;
+              const isActive =
+                !screenOverviewActive && screen.id === activeScreenId;
               return (
                 <button
                   key={screen.id}
@@ -633,6 +717,7 @@ export function LayersPanel({
                       ? "bg-[var(--design-editor-active-row-color)] text-foreground"
                       : "text-foreground/85 hover:bg-[var(--design-editor-active-row-color)] hover:text-foreground",
                   )}
+                  aria-current={isActive ? "page" : undefined}
                   onClick={() => onScreenSelect?.(screen.id)}
                   title={screen.filename ?? screen.name}
                 >
@@ -697,9 +782,13 @@ export function LayersPanel({
         </div>
       ) : null}
 
-      <div className="min-h-0 flex-1 overflow-y-auto py-2">
+      <div className="min-h-0 flex-1 overflow-auto overscroll-contain py-2">
         {visibleRows.length ? (
-          <div className="px-2" role="tree" aria-label={labels.title}>
+          <div
+            className="w-max min-w-full px-2"
+            role="tree"
+            aria-label={labels.title}
+          >
             {visibleRows.map((row) => (
               <LayerRow
                 key={row.rowKey}
@@ -723,6 +812,7 @@ export function LayersPanel({
                 onCommitRename={commitRename}
                 onCancelRename={() => setRenamingId(null)}
                 onStartRename={startRename}
+                onRename={onRename}
                 onSelect={selectNode}
                 onToggleExpanded={(expanded) =>
                   onExpandedIdsChange(
@@ -766,6 +856,7 @@ function LayerRow({
   onCommitRename,
   onCancelRename,
   onStartRename,
+  onRename,
   onSelect,
   onToggleExpanded,
   onToggleLocked,
@@ -792,10 +883,12 @@ function LayerRow({
   onCommitRename: (id: string) => void;
   onCancelRename: () => void;
   onStartRename: (node: LayersPanelNode) => void;
+  onRename?: (id: string, name: string) => void;
   onSelect: (
     id: string,
     options: {
       additive: boolean;
+      currentSelectedIds?: string[];
       range: boolean;
       source: "keyboard" | "pointer";
     },
@@ -812,21 +905,42 @@ function LayerRow({
   selectedIds: readonly string[];
   visibleRows: FlatLayerRow[];
 }) {
-  const { node, depth, hasChildren } = row;
+  const { node, depth, hasChildren, canAcceptChildren } = row;
   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 canDropInside = layerCanDropInside(node, hasChildren);
   const activeDrop =
     dropIndicator?.targetId === node.id ? dropIndicator.placement : null;
   // Tracks whether the user pressed Escape to cancel rename so that the
   // subsequent blur event does not commit the edit.
   const renameCancelledRef = useRef(false);
 
+  const readSelectedIdsFromTree = (target: HTMLElement): string[] => {
+    const tree = target.closest('[role="tree"]');
+    if (!tree) return selectedIds.filter((id) => !id.startsWith("__"));
+    return Array.from(
+      tree.querySelectorAll<HTMLElement>(
+        '[role="treeitem"][aria-selected="true"] [data-layer-row-button][data-layer-node-id]',
+      ),
+    )
+      .map((button) => button.dataset.layerNodeId)
+      .filter((id): id is string => Boolean(id && !id.startsWith("__")));
+  };
+
   const handlePointerSelect = (event: MouseEvent<HTMLButtonElement>) => {
     if (!selectable) return;
+    if (event.detail === 0) return;
+    const nativeEvent = event.nativeEvent;
+    const additive =
+      event.metaKey ||
+      event.ctrlKey ||
+      nativeEvent.metaKey ||
+      nativeEvent.ctrlKey;
     onSelect(node.id, {
-      additive: event.metaKey || event.ctrlKey,
+      additive,
+      currentSelectedIds: readSelectedIdsFromTree(event.currentTarget),
       range: event.shiftKey,
       source: "pointer",
     });
@@ -857,11 +971,12 @@ function LayerRow({
       (visibleRow) => visibleRow.rowKey === row.rowKey,
     );
 
-    if (event.key === "Enter" || event.key === " ") {
+    if (event.key === "Enter" || event.key === " " || event.key === "Space") {
       event.preventDefault();
       if (!selectable) return;
       onSelect(node.id, {
         additive: event.metaKey || event.ctrlKey,
+        currentSelectedIds: readSelectedIdsFromTree(event.currentTarget),
         range: event.shiftKey,
         source: "keyboard",
       });
@@ -959,11 +1074,12 @@ function LayerRow({
     const intent = {
       draggedIds: cleanedIds,
       targetId: node.id,
-      placement: dropPlacementForEvent(event, hasChildren),
+      placement: dropPlacementForEvent(event, canDropInside),
     } satisfies LayersPanelMoveIntent;
     if (canMoveLayer && !canMoveLayer(intent)) return;
     event.preventDefault();
     event.dataTransfer.dropEffect = "move";
+    activeDropIntent = intent;
     onDropIndicatorChange(intent);
   };
 
@@ -992,233 +1108,312 @@ function LayerRow({
       (id) => id && id !== node.id && !id.startsWith("__"),
     );
     if (cleanedIds.length > 0) {
-      // Recompute placement from the drop event position rather than relying on
-      // React state (dropIndicator) which may be stale or null.
-      const intent = {
-        draggedIds: cleanedIds,
-        targetId: node.id,
-        placement: dropPlacementForEvent(event, hasChildren),
-      } satisfies LayersPanelMoveIntent;
+      const storedIntent =
+        activeDropIntent?.targetId === node.id
+          ? {
+              ...activeDropIntent,
+              draggedIds: activeDropIntent.draggedIds.filter((id) =>
+                cleanedIds.includes(id),
+              ),
+            }
+          : null;
+      const intent =
+        storedIntent && storedIntent.draggedIds.length > 0
+          ? storedIntent
+          : ({
+              draggedIds: cleanedIds,
+              targetId: node.id,
+              placement: dropPlacementForEvent(event, canDropInside),
+            } satisfies LayersPanelMoveIntent);
       if (!canMoveLayer || canMoveLayer(intent)) {
         onMoveLayer(intent);
       }
     }
+    activeDropIntent = null;
     onDropIndicatorChange(null);
   };
 
-  return (
-    <div
-      ref={rowRef}
-      role="treeitem"
-      aria-expanded={hasChildren ? isExpanded : undefined}
-      aria-level={depth + 1}
-      aria-selected={selectable ? isSelected : undefined}
-      className="relative"
-      draggable={draggable}
-      onDragStart={handleDragStart}
-      onDragOver={handleDragOver}
-      onDragLeave={(event) => {
-        // Only clear the indicator when the pointer truly leaves this row.
-        // Moving into a child element fires dragleave on the outer div too, so
-        // we suppress the clear when relatedTarget is still within this row.
-        if (event.currentTarget.contains(event.relatedTarget as Node | null))
-          return;
-        onDropIndicatorChange(null);
-      }}
-      onDrop={handleDrop}
-      onDragEnd={() => {
-        activeDragState = null;
-        onDropIndicatorChange(null);
-      }}
-      onMouseEnter={() => onHoverLayer?.(node.id)}
-      onMouseLeave={() => onLeaveLayer?.(node.id)}
-    >
-      {activeDrop === "before" ? (
-        <span className="pointer-events-none absolute left-2 right-2 top-0 z-10 h-px bg-[var(--design-editor-accent-color)]" />
-      ) : null}
-      {activeDrop === "after" ? (
-        <span className="pointer-events-none absolute bottom-0 left-2 right-2 z-10 h-px bg-[var(--design-editor-accent-color)]" />
-      ) : null}
-      <div
-        className={cn(
-          "group flex h-8 items-center gap-1 rounded-[5px] pr-1 text-[12px]",
-          activeDrop === "inside" &&
-            "ring-1 ring-inset ring-[var(--design-editor-accent-color)]",
-          isSelected &&
-            "bg-[var(--design-editor-selection-color)] text-foreground",
-          !isSelected &&
-            isInSelectedSubtree &&
-            "bg-[var(--design-editor-selected-subtree-color)] text-foreground/95",
-          !isSelected &&
-            isActiveScreen &&
-            "bg-[var(--design-editor-active-row-color)] text-foreground hover:bg-[var(--design-editor-active-row-color)]",
-          !isSelected &&
-            !isInSelectedSubtree &&
-            !isActiveScreen &&
-            "text-foreground/90 hover:bg-[var(--design-editor-layer-hover-color)] hover:text-foreground",
-          node.hidden && "text-muted-foreground",
-        )}
-        style={{ paddingLeft: 4 + depth * 28 }}
-      >
-        {hasChildren ? (
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            className="size-4 shrink-0 rounded-sm p-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
-            aria-label={isExpanded ? labels.collapse : labels.expand}
-            onClick={(event) => {
-              event.stopPropagation();
-              onToggleExpanded(!isExpanded);
-            }}
-          >
-            {isExpanded ? (
-              <IconChevronDown className="size-4" />
-            ) : (
-              <IconChevronRight className="size-4 rtl:-scale-x-100" />
-            )}
-          </Button>
-        ) : (
-          <span className="size-4 shrink-0" />
-        )}
+  const showContextMenu =
+    selectable &&
+    (Boolean(onRename && node.renamable !== false) || lockable || hideable);
 
-        <button
-          type="button"
-          disabled={!selectable}
-          data-layer-row-button
-          data-layer-node-id={node.id}
-          className={cn(
-            "flex min-w-0 flex-1 items-center gap-2 overflow-hidden rounded-sm px-0.5 py-0 text-left outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
-            selectable ? "cursor-default" : "cursor-default opacity-80",
-          )}
-          onClick={handlePointerSelect}
-          onDoubleClick={() => onStartRename(node)}
-          onKeyDown={handleKeyDown}
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild disabled={!showContextMenu}>
+        <div
+          ref={rowRef}
+          role="treeitem"
+          aria-expanded={hasChildren ? isExpanded : undefined}
+          aria-level={depth + 1}
+          aria-selected={selectable ? isSelected : undefined}
+          className="relative min-w-full"
+          draggable={draggable}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragLeave={(event) => {
+            // Only clear the indicator when the pointer truly leaves this row.
+            // Moving into a child element fires dragleave on the outer div too, so
+            // we suppress the clear when relatedTarget is still within this row.
+            if (
+              event.currentTarget.contains(event.relatedTarget as Node | null)
+            )
+              return;
+            if (activeDropIntent?.targetId === node.id) activeDropIntent = null;
+            onDropIndicatorChange(null);
+          }}
+          onDrop={handleDrop}
+          onDragEnd={() => {
+            activeDragState = null;
+            activeDropIntent = null;
+            onDropIndicatorChange(null);
+          }}
+          onMouseEnter={() => onHoverLayer?.(node.id)}
+          onMouseLeave={() => onLeaveLayer?.(node.id)}
         >
-          <span
+          {activeDrop === "before" ? (
+            <span className="pointer-events-none absolute left-2 right-2 top-0 z-10 h-px bg-[var(--design-editor-accent-color)]" />
+          ) : null}
+          {activeDrop === "after" ? (
+            <span className="pointer-events-none absolute bottom-0 left-2 right-2 z-10 h-px bg-[var(--design-editor-accent-color)]" />
+          ) : null}
+          <div
             className={cn(
-              "shrink-0 text-muted-foreground",
-              (isSelected || isInSelectedSubtree) && "text-foreground",
+              "group flex h-8 min-w-full items-center gap-1 rounded-[5px] pr-1 text-[12px]",
+              activeDrop === "inside" &&
+                "ring-1 ring-inset ring-[var(--design-editor-accent-color)]",
+              isSelected &&
+                "bg-[var(--design-editor-selection-color)] text-foreground",
+              !isSelected &&
+                isInSelectedSubtree &&
+                "bg-[var(--design-editor-selected-subtree-color)] text-foreground/95",
+              !isSelected &&
+                isActiveScreen &&
+                "bg-[var(--design-editor-active-row-color)] text-foreground hover:bg-[var(--design-editor-active-row-color)]",
+              !isSelected &&
+                !isInSelectedSubtree &&
+                !isActiveScreen &&
+                "text-foreground/90 hover:bg-[var(--design-editor-layer-hover-color)] hover:text-foreground",
+              node.hidden && "text-muted-foreground",
             )}
+            style={{ paddingLeft: rowIndent(depth) }}
           >
-            {node.icon ?? (
-              <LayerGlyph
-                node={node}
-                selected={isSelected}
-                inSelectedSubtree={isInSelectedSubtree}
-              />
-            )}
-          </span>
-          {isRenaming ? (
-            <input
-              autoFocus
-              value={renameDraft}
-              onClick={(event) => event.stopPropagation()}
-              onChange={(event) => onRenameDraftChange(event.target.value)}
-              onBlur={() => {
-                // Escape sets renameCancelledRef before blur fires; skip commit.
-                if (renameCancelledRef.current) {
-                  renameCancelledRef.current = false;
-                  return;
-                }
-                onCommitRename(node.id);
-              }}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  event.preventDefault();
-                  onCommitRename(node.id);
-                } else if (event.key === "Escape") {
-                  event.preventDefault();
-                  renameCancelledRef.current = true;
-                  onCancelRename();
-                }
-              }}
-              className="h-6 min-w-0 flex-1 rounded-[4px] border border-[var(--design-editor-accent-color)] bg-[var(--design-editor-panel-bg)] px-1.5 text-[12px] text-foreground outline-none"
-              aria-label={labels.rename}
-            />
-          ) : (
-            <span
-              className={cn(
-                "min-w-0 flex-1 truncate font-medium leading-none",
-                node.hidden && "line-through",
-              )}
-            >
-              {node.name}
-            </span>
-          )}
-          {!isRenaming &&
-          layerCanShowBadge(node) &&
-          node.badge !== null &&
-          node.badge !== undefined ? (
-            <span className="shrink-0 rounded-sm bg-muted px-1 text-[10px] text-muted-foreground">
-              {node.badge}
-            </span>
-          ) : null}
-        </button>
-
-        {lockable ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
+            {hasChildren ? (
               <Button
                 type="button"
                 variant="ghost"
                 size="icon"
-                className={cn(
-                  "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
-                  node.locked && "opacity-100",
-                  isSelected && "text-foreground",
-                )}
-                aria-label={node.locked ? labels.unlock : labels.lock}
+                className="size-4 shrink-0 rounded-sm p-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
+                aria-label={isExpanded ? labels.collapse : labels.expand}
                 onClick={(event) => {
                   event.stopPropagation();
-                  onToggleLocked?.(node.id, !node.locked);
+                  onToggleExpanded(!isExpanded);
                 }}
               >
-                {node.locked ? (
-                  <IconLock className="size-3" />
+                {isExpanded ? (
+                  <IconChevronDown className="size-4" />
                 ) : (
-                  <IconLockOpen className="size-3" />
+                  <IconChevronRight className="size-4 rtl:-scale-x-100" />
                 )}
               </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              {node.locked ? labels.unlock : labels.lock}
-            </TooltipContent>
-          </Tooltip>
-        ) : null}
+            ) : (
+              <span className="size-4 shrink-0" />
+            )}
 
-        {hideable ? (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
+            <button
+              type="button"
+              disabled={!selectable}
+              data-layer-row-button
+              data-layer-node-id={node.id}
+              className={cn(
+                "flex min-w-0 flex-1 items-center gap-2 rounded-sm px-0.5 py-0 text-left outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
+                selectable ? "cursor-default" : "cursor-default opacity-80",
+              )}
+              onClick={handlePointerSelect}
+              onDoubleClick={() => onStartRename(node)}
+              onKeyDown={handleKeyDown}
+            >
+              <span
                 className={cn(
-                  "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
-                  node.hidden && "opacity-100",
-                  isSelected && "text-foreground",
+                  "shrink-0 text-muted-foreground",
+                  (isSelected || isInSelectedSubtree) && "text-foreground",
                 )}
-                aria-label={node.hidden ? labels.show : labels.hide}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onToggleHidden?.(node.id, !node.hidden);
-                }}
               >
-                {node.hidden ? (
-                  <IconEyeOff className="size-3" />
-                ) : (
-                  <IconEye className="size-3" />
+                {node.icon ?? (
+                  <LayerGlyph
+                    node={node}
+                    selected={isSelected}
+                    inSelectedSubtree={isInSelectedSubtree}
+                  />
                 )}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
+              </span>
+              {isRenaming ? (
+                <input
+                  autoFocus
+                  value={renameDraft}
+                  onClick={(event) => event.stopPropagation()}
+                  onChange={(event) => onRenameDraftChange(event.target.value)}
+                  onBlur={() => {
+                    // Escape sets renameCancelledRef before blur fires; skip commit.
+                    if (renameCancelledRef.current) {
+                      renameCancelledRef.current = false;
+                      return;
+                    }
+                    onCommitRename(node.id);
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      // Stop propagation so the keydown does not bubble up to the
+                      // parent row <button>'s handleKeyDown, which would fire
+                      // onSelect and potentially trigger canvas-level side effects
+                      // (e.g. switching to overview mode or selecting a wrong layer).
+                      event.stopPropagation();
+                      onCommitRename(node.id);
+                    } else if (event.key === "Tab") {
+                      // Commit the rename on Tab (Figma behavior) and prevent the
+                      // keydown from reaching the global design hotkeys handler which
+                      // would cycle the active file when Tab fires outside an input.
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onCommitRename(node.id);
+                    } else if (event.key === "Escape") {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      renameCancelledRef.current = true;
+                      onCancelRename();
+                    }
+                  }}
+                  className="h-6 min-w-0 flex-1 rounded-[4px] border border-[var(--design-editor-accent-color)] bg-[var(--design-editor-panel-bg)] px-1.5 text-[12px] text-foreground outline-none"
+                  aria-label={labels.rename}
+                />
+              ) : (
+                <span
+                  className={cn(
+                    "min-w-0 flex-1 truncate font-medium leading-none",
+                    node.hidden && "line-through",
+                  )}
+                  title={node.name}
+                >
+                  {node.name}
+                </span>
+              )}
+              {!isRenaming &&
+              layerCanShowBadge(node) &&
+              node.badge !== null &&
+              node.badge !== undefined ? (
+                <span className="shrink-0 rounded-sm bg-muted px-1 text-[10px] text-muted-foreground">
+                  {node.badge}
+                </span>
+              ) : null}
+            </button>
+
+            {lockable ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className={cn(
+                      "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
+                      node.locked && "opacity-100",
+                      isSelected && "text-foreground",
+                    )}
+                    aria-label={node.locked ? labels.unlock : labels.lock}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onToggleLocked?.(node.id, !node.locked);
+                    }}
+                  >
+                    {node.locked ? (
+                      <IconLock className="size-3" />
+                    ) : (
+                      <IconLockOpen className="size-3" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {node.locked ? labels.unlock : labels.lock}
+                </TooltipContent>
+              </Tooltip>
+            ) : null}
+
+            {hideable ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className={cn(
+                      "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
+                      node.hidden && "opacity-100",
+                      isSelected && "text-foreground",
+                    )}
+                    aria-label={node.hidden ? labels.show : labels.hide}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onToggleHidden?.(node.id, !node.hidden);
+                    }}
+                  >
+                    {node.hidden ? (
+                      <IconEyeOff className="size-3" />
+                    ) : (
+                      <IconEye className="size-3" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {node.hidden ? labels.show : labels.hide}
+                </TooltipContent>
+              </Tooltip>
+            ) : null}
+          </div>
+        </div>
+      </ContextMenuTrigger>
+      {showContextMenu ? (
+        <ContextMenuContent className="z-[300] min-w-[160px] text-[12px]">
+          {onRename && node.renamable !== false ? (
+            <ContextMenuItem
+              className="gap-2 text-[12px]"
+              onSelect={() => onStartRename(node)}
+            >
+              <IconPencil className="size-3.5 text-muted-foreground" />
+              {labels.rename}
+            </ContextMenuItem>
+          ) : null}
+          {onRename && node.renamable !== false && (lockable || hideable) ? (
+            <ContextMenuSeparator />
+          ) : null}
+          {lockable ? (
+            <ContextMenuItem
+              className="gap-2 text-[12px]"
+              onSelect={() => onToggleLocked?.(node.id, !node.locked)}
+            >
+              {node.locked ? (
+                <IconLockOpen className="size-3.5 text-muted-foreground" />
+              ) : (
+                <IconLock className="size-3.5 text-muted-foreground" />
+              )}
+              {node.locked ? labels.unlock : labels.lock}
+            </ContextMenuItem>
+          ) : null}
+          {hideable ? (
+            <ContextMenuItem
+              className="gap-2 text-[12px]"
+              onSelect={() => onToggleHidden?.(node.id, !node.hidden)}
+            >
+              {node.hidden ? (
+                <IconEye className="size-3.5 text-muted-foreground" />
+              ) : (
+                <IconEyeOff className="size-3.5 text-muted-foreground" />
+              )}
               {node.hidden ? labels.show : labels.hide}
-            </TooltipContent>
-          </Tooltip>
-        ) : null}
-      </div>
-    </div>
+            </ContextMenuItem>
+          ) : null}
+        </ContextMenuContent>
+      ) : null}
+    </ContextMenu>
   );
 }
 
@@ -1580,6 +1775,18 @@ function ElementLayerGlyph({ className }: { className?: string }) {
   );
 }
 
+function layerCanDropInside(node: LayersPanelNode, hasChildren: boolean) {
+  return (
+    hasChildren ||
+    Boolean(node.layout?.isFlexContainer || node.layout?.isGridContainer) ||
+    node.type === "file" ||
+    node.type === "screen" ||
+    node.type === "frame" ||
+    node.type === "group" ||
+    node.type === "section"
+  );
+}
+
 function dropPlacementForEvent(
   event: DragEvent<HTMLDivElement>,
   canDropInside: boolean,