@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/widget-tree/WidgetTreeView.tsx

@@ -1,24 +1,388 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef, useState, type DragEvent, type KeyboardEvent } from 'react';
+import type { WidgetPlacementAsset } from '@workbench-kit/contracts';
 import {
   collectWidgetNodes,
+  firstSelectedWidgetPath,
   getWidgetDisplayLabel,
+  getWidgetChildren,
   isWidgetPathSelected,
+  widgetPathEquals,
   widgetPathKey,
   type GenericWidget,
+  type WidgetNode,
   type WidgetPath,
   type WidgetSelectionState,
 } from '@workbench-kit/jdw';
 
-import { Panel, PanelBody } from '../layout/Panel';
-import { EmptyState } from '../primitives/EmptyState';
+import { Panel, PanelBody } from '../layout/panel';
+import { EmptyState } from '../primitives/empty-state';
 import { cx } from '../utils/cx';
-import { formatWidgetPlacementMeta } from './widget-tree-layout.js';
+import { readWidgetPlacementAssetDragData } from './widget-placement-asset-dnd.js';
+import {
+  canAddChildren,
+  formatWidgetPlacementMeta,
+  insertedWidgetPathForParent,
+} from './widget-tree-layout.js';
 
 export interface WidgetTreeViewProps {
   readonly root: GenericWidget | null;
   readonly parseError: string | null;
   readonly selection?: WidgetSelectionState | undefined;
   readonly onSelectPath?: ((path: WidgetPath) => void) | undefined;
+  readonly onActivatePath?: ((path: WidgetPath) => void) | undefined;
+  readonly onDeletePath?: ((path: WidgetPath) => void) | undefined;
+  readonly onMovePath?: ((operation: WidgetTreeMoveOperation) => void) | undefined;
+  readonly onPlaceAssetPath?: ((operation: WidgetTreeAssetDropOperation) => void) | undefined;
+}
+
+export function isWidgetTreeActivateKey(key: string): boolean {
+  return key === 'Enter';
+}
+
+type WidgetTreeNavigationKey = 'ArrowDown' | 'ArrowUp' | 'Home' | 'End';
+type WidgetTreeHorizontalNavigationKey = 'ArrowLeft' | 'ArrowRight';
+type WidgetTreeMoveDirection = 'up' | 'down';
+export type WidgetTreeDropPlacement = 'before' | 'inside' | 'after';
+
+export interface WidgetTreeReorderOperation {
+  readonly kind: 'reorder';
+  readonly path: WidgetPath;
+  readonly parentPath: WidgetPath;
+  readonly fromIndex: number;
+  readonly toIndex: number;
+  readonly nextPath: WidgetPath;
+}
+
+export interface WidgetTreeReparentOperation {
+  readonly kind: 'reparent';
+  readonly fromPath: WidgetPath;
+  readonly toParentPath: WidgetPath;
+  readonly insertIndex: number;
+  readonly nextPath: WidgetPath;
+}
+
+export type WidgetTreeMoveOperation = WidgetTreeReorderOperation | WidgetTreeReparentOperation;
+
+export type WidgetTreeHorizontalNavigationAction =
+  | { readonly type: 'collapse'; readonly path: WidgetPath }
+  | { readonly type: 'expand'; readonly path: WidgetPath }
+  | { readonly type: 'select'; readonly path: WidgetPath };
+
+export interface WidgetTreeAssetDropOperation {
+  readonly asset: WidgetPlacementAsset;
+  readonly parentPath: WidgetPath;
+  readonly insertIndex: number;
+  readonly nextPath: WidgetPath;
+}
+
+interface WidgetTreeDropTarget {
+  readonly pathKey: string;
+  readonly placement: WidgetTreeDropPlacement;
+}
+
+export interface WidgetTreeDropPlacementGeometry {
+  readonly targetPath: WidgetPath;
+  readonly targetWidget: GenericWidget;
+  readonly offsetY: number;
+  readonly height: number;
+}
+
+function selectedNodeIndex(
+  nodes: readonly WidgetNode[],
+  selection: WidgetSelectionState | undefined,
+): number {
+  if (!selection) return -1;
+  return nodes.findIndex((node) => isWidgetPathSelected(selection, node.path));
+}
+
+export function resolveWidgetTreeNavigationPath(
+  nodes: readonly WidgetNode[],
+  selection: WidgetSelectionState | undefined,
+  key: WidgetTreeNavigationKey,
+): WidgetPath | null {
+  if (nodes.length === 0) return null;
+
+  const currentIndex = selectedNodeIndex(nodes, selection);
+  const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;
+
+  if (key === 'Home') return nodes[0]?.path ?? null;
+  if (key === 'End') return nodes[nodes.length - 1]?.path ?? null;
+  if (key === 'ArrowDown')
+    return nodes[Math.min(nodes.length - 1, fallbackIndex + 1)]?.path ?? null;
+  return nodes[Math.max(0, fallbackIndex - 1)]?.path ?? null;
+}
+
+function directChildPathOf(
+  nodes: readonly WidgetNode[],
+  parentPath: WidgetPath,
+): WidgetPath | null {
+  return (
+    nodes.find((node) => {
+      if (node.path.length !== parentPath.length + 1) return false;
+      return isPathPrefix(parentPath, node.path);
+    })?.path ?? null
+  );
+}
+
+export function resolveWidgetTreeHorizontalNavigationAction(
+  visibleNodes: readonly WidgetNode[],
+  selection: WidgetSelectionState | undefined,
+  collapsedPathKeys: ReadonlySet<string>,
+  key: WidgetTreeHorizontalNavigationKey,
+): WidgetTreeHorizontalNavigationAction | null {
+  const current = visibleNodes[selectedNodeIndex(visibleNodes, selection)];
+  if (!current) return null;
+
+  const currentPathKey = widgetPathKey(current.path);
+  const isCollapsed = collapsedPathKeys.has(currentPathKey);
+  const hasChildren = hasCollapsibleWidgetChildren(current.widget);
+
+  if (key === 'ArrowRight') {
+    if (!hasChildren) return null;
+    if (isCollapsed) return { type: 'expand', path: current.path };
+
+    const childPath = directChildPathOf(visibleNodes, current.path);
+    return childPath ? { type: 'select', path: childPath } : null;
+  }
+
+  if (hasChildren && !isCollapsed) {
+    return { type: 'collapse', path: current.path };
+  }
+
+  if (current.path.length === 0) return null;
+  return { type: 'select', path: current.path.slice(0, -1) };
+}
+
+export function isRootWidgetPath(path: WidgetPath): boolean {
+  return path.length === 0;
+}
+
+function arrayChildSegment(
+  path: WidgetPath,
+): { readonly kind: 'children'; readonly index: number } | null {
+  const segment = path[path.length - 1];
+  return segment?.kind === 'children' ? segment : null;
+}
+
+function pathAtIndex(parentPath: WidgetPath, index: number): WidgetPath {
+  return [...parentPath, { kind: 'children', index }];
+}
+
+function hasNodeAtPath(nodes: readonly WidgetNode[], path: WidgetPath): boolean {
+  const key = widgetPathKey(path);
+  return nodes.some((node) => widgetPathKey(node.path) === key);
+}
+
+function nodeAtPath(nodes: readonly WidgetNode[], path: WidgetPath): WidgetNode | null {
+  const key = widgetPathKey(path);
+  return nodes.find((node) => widgetPathKey(node.path) === key) ?? null;
+}
+
+function isPathPrefix(prefix: WidgetPath, path: WidgetPath): boolean {
+  if (prefix.length > path.length) return false;
+  return prefix.every((segment, index) => {
+    const candidate = path[index];
+    if (!candidate || segment.kind !== candidate.kind) return false;
+    return (
+      segment.kind === 'child' ||
+      (candidate.kind === 'children' && segment.index === candidate.index)
+    );
+  });
+}
+
+function isGenericWidget(value: unknown): value is GenericWidget {
+  return (
+    value !== null &&
+    !Array.isArray(value) &&
+    typeof value === 'object' &&
+    typeof (value as GenericWidget).type === 'string'
+  );
+}
+
+export function hasCollapsibleWidgetChildren(widget: GenericWidget): boolean {
+  return getWidgetChildren(widget).length > 0 || isGenericWidget(widget.child);
+}
+
+function hasCollapsedAncestor(path: WidgetPath, collapsedPathKeys: ReadonlySet<string>): boolean {
+  for (let depth = 0; depth < path.length; depth++) {
+    if (collapsedPathKeys.has(widgetPathKey(path.slice(0, depth)))) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function filterVisibleWidgetNodes(
+  nodes: readonly WidgetNode[],
+  collapsedPathKeys: ReadonlySet<string>,
+): WidgetNode[] {
+  if (collapsedPathKeys.size === 0) return [...nodes];
+  return nodes.filter((node) => !hasCollapsedAncestor(node.path, collapsedPathKeys));
+}
+
+function adjustPathAfterRemoval(path: WidgetPath, removedPath: WidgetPath): WidgetPath {
+  const removedSegment = removedPath[removedPath.length - 1];
+  if (removedSegment?.kind !== 'children') return path;
+
+  const removedParentPath = removedPath.slice(0, -1);
+  return path.map((segment, depth) => {
+    if (segment.kind !== 'children' || depth !== removedParentPath.length) return segment;
+
+    const sameParent = removedParentPath.every((ancestorSegment, index) => {
+      const candidate = path[index];
+      if (!candidate || ancestorSegment.kind !== candidate.kind) return false;
+      return (
+        ancestorSegment.kind === 'child' ||
+        (candidate.kind === 'children' && ancestorSegment.index === candidate.index)
+      );
+    });
+
+    if (sameParent && removedSegment.index < segment.index) {
+      return { kind: 'children', index: segment.index - 1 } as const;
+    }
+
+    return segment;
+  });
+}
+
+function createMoveOperation(
+  nodes: readonly WidgetNode[],
+  path: WidgetPath,
+  toIndex: number,
+): WidgetTreeReorderOperation | null {
+  const segment = arrayChildSegment(path);
+  if (!segment || toIndex < 0 || segment.index === toIndex) return null;
+
+  const parentPath = path.slice(0, -1);
+  const nextPath = pathAtIndex(parentPath, toIndex);
+  if (!hasNodeAtPath(nodes, nextPath)) return null;
+
+  return {
+    kind: 'reorder',
+    path,
+    parentPath,
+    fromIndex: segment.index,
+    toIndex,
+    nextPath,
+  };
+}
+
+export function resolveWidgetTreeMoveOperation(
+  nodes: readonly WidgetNode[],
+  selection: WidgetSelectionState | undefined,
+  direction: WidgetTreeMoveDirection,
+): WidgetTreeMoveOperation | null {
+  const current = nodes[selectedNodeIndex(nodes, selection)];
+  if (!current) return null;
+
+  const segment = arrayChildSegment(current.path);
+  if (!segment) return null;
+
+  const toIndex = direction === 'up' ? segment.index - 1 : segment.index + 1;
+  return createMoveOperation(nodes, current.path, toIndex);
+}
+
+function createReparentOperation(
+  nodes: readonly WidgetNode[],
+  sourcePath: WidgetPath,
+  targetParentPath: WidgetPath,
+  insertIndex: number,
+): WidgetTreeReparentOperation | null {
+  if (isRootWidgetPath(sourcePath)) return null;
+  if (isPathPrefix(sourcePath, targetParentPath)) return null;
+
+  const targetNode = nodeAtPath(nodes, targetParentPath);
+  if (!targetNode || !canAddChildren(targetNode.widget)) return null;
+
+  const sourceSegment = arrayChildSegment(sourcePath);
+  const targetChildren = getWidgetChildren(targetNode.widget);
+  if (insertIndex < 0 || insertIndex > targetChildren.length) return null;
+
+  const sameParent =
+    sourceSegment !== null && widgetPathEquals(sourcePath.slice(0, -1), targetParentPath);
+  const targetIndex =
+    sameParent && sourceSegment.index < insertIndex ? insertIndex - 1 : insertIndex;
+  if (sameParent && sourceSegment?.index === targetIndex) return null;
+
+  const adjustedParentPath = adjustPathAfterRemoval(targetParentPath, sourcePath);
+  const nextPath = insertedWidgetPathForParent(targetNode.widget, adjustedParentPath, targetIndex);
+
+  return {
+    kind: 'reparent',
+    fromPath: sourcePath,
+    toParentPath: targetParentPath,
+    insertIndex,
+    nextPath,
+  };
+}
+
+export function resolveWidgetTreeDropOperation(
+  nodes: readonly WidgetNode[],
+  sourcePath: WidgetPath,
+  targetPath: WidgetPath,
+  placement: WidgetTreeDropPlacement = 'inside',
+): WidgetTreeMoveOperation | null {
+  const targetNode = nodeAtPath(nodes, targetPath);
+  if (!targetNode) return null;
+
+  if (placement === 'inside') {
+    if (!canAddChildren(targetNode.widget)) return null;
+
+    return createReparentOperation(
+      nodes,
+      sourcePath,
+      targetPath,
+      getWidgetChildren(targetNode.widget).length,
+    );
+  }
+
+  const target = arrayChildSegment(targetPath);
+  if (!target) return null;
+
+  return createReparentOperation(
+    nodes,
+    sourcePath,
+    targetPath.slice(0, -1),
+    target.index + (placement === 'after' ? 1 : 0),
+  );
+}
+
+export function resolveWidgetTreeAssetDropOperation(
+  nodes: readonly WidgetNode[],
+  asset: WidgetPlacementAsset,
+  targetPath: WidgetPath,
+  placement: WidgetTreeDropPlacement = 'inside',
+): WidgetTreeAssetDropOperation | null {
+  const targetNode = nodeAtPath(nodes, targetPath);
+  if (!targetNode) return null;
+
+  if (placement === 'inside') {
+    if (!canAddChildren(targetNode.widget)) return null;
+
+    const insertIndex = getWidgetChildren(targetNode.widget).length;
+    return {
+      asset,
+      parentPath: targetPath,
+      insertIndex,
+      nextPath: insertedWidgetPathForParent(targetNode.widget, targetPath, insertIndex),
+    };
+  }
+
+  const target = arrayChildSegment(targetPath);
+  if (!target) return null;
+
+  const parentPath = targetPath.slice(0, -1);
+  const parentNode = nodeAtPath(nodes, parentPath);
+  if (!parentNode || !canAddChildren(parentNode.widget)) return null;
+
+  const insertIndex = target.index + (placement === 'after' ? 1 : 0);
+  return {
+    asset,
+    parentPath,
+    insertIndex,
+    nextPath: insertedWidgetPathForParent(parentNode.widget, parentPath, insertIndex),
+  };
 }
 
 function parentTypeForNode(
@@ -31,8 +395,294 @@ function parentTypeForNode(
   return nodes.find((node) => widgetPathKey(node.path) === parentKey)?.widget.type;
 }
 
-export function WidgetTreeView({ root, parseError, selection, onSelectPath }: WidgetTreeViewProps) {
+export function resolveWidgetTreeDropPlacement({
+  targetPath,
+  targetWidget,
+  offsetY,
+  height,
+}: WidgetTreeDropPlacementGeometry): WidgetTreeDropPlacement {
+  const resolvedHeight = Math.max(1, height);
+
+  if (isRootWidgetPath(targetPath) && canAddChildren(targetWidget)) {
+    return 'inside';
+  }
+
+  if (canAddChildren(targetWidget)) {
+    if (offsetY < resolvedHeight / 3) return 'before';
+    if (offsetY > (resolvedHeight * 2) / 3) return 'after';
+    return 'inside';
+  }
+
+  return offsetY < resolvedHeight / 2 ? 'before' : 'after';
+}
+
+function resolveDropPlacementFromEvent(
+  event: DragEvent<HTMLLIElement>,
+  targetNode: WidgetNode,
+): WidgetTreeDropPlacement {
+  const rect = event.currentTarget.getBoundingClientRect();
+  return resolveWidgetTreeDropPlacement({
+    targetPath: targetNode.path,
+    targetWidget: targetNode.widget,
+    offsetY: event.clientY - rect.top,
+    height: rect.height,
+  });
+}
+
+export function WidgetTreeView({
+  root,
+  parseError,
+  selection,
+  onSelectPath,
+  onActivatePath,
+  onDeletePath,
+  onMovePath,
+  onPlaceAssetPath,
+}: WidgetTreeViewProps) {
   const nodes = useMemo(() => (root ? collectWidgetNodes(root) : []), [root]);
+  const selectedPath = selection ? firstSelectedWidgetPath(selection) : null;
+  const selectedPathKey = selectedPath ? widgetPathKey(selectedPath) : null;
+  const [collapsedPathKeys, setCollapsedPathKeys] = useState<ReadonlySet<string>>(() => new Set());
+  const [dragPath, setDragPath] = useState<WidgetPath | null>(null);
+  const [dropTarget, setDropTarget] = useState<WidgetTreeDropTarget | null>(null);
+  const treeButtonRefs = useRef(new Map<string, HTMLButtonElement>());
+  const visibleNodes = useMemo(
+    () => filterVisibleWidgetNodes(nodes, collapsedPathKeys),
+    [collapsedPathKeys, nodes],
+  );
+  const selectedIndex = selectedNodeIndex(visibleNodes, selection);
+
+  const setPathCollapsed = (path: WidgetPath, collapsed: boolean) => {
+    const pathKey = widgetPathKey(path);
+    setCollapsedPathKeys((current) => {
+      const alreadyCollapsed = current.has(pathKey);
+      if (alreadyCollapsed === collapsed) return current;
+
+      const next = new Set(current);
+      if (collapsed) {
+        next.add(pathKey);
+      } else {
+        next.delete(pathKey);
+      }
+      return next;
+    });
+  };
+
+  const focusPath = (path: WidgetPath) => {
+    treeButtonRefs.current.get(widgetPathKey(path))?.focus();
+  };
+
+  useEffect(() => {
+    if (!selectedPath) return;
+
+    setCollapsedPathKeys((current) => {
+      let changed = false;
+      const next = new Set(current);
+
+      for (let depth = 0; depth < selectedPath.length; depth++) {
+        const ancestorKey = widgetPathKey(selectedPath.slice(0, depth));
+        if (next.delete(ancestorKey)) {
+          changed = true;
+        }
+      }
+
+      return changed ? next : current;
+    });
+  }, [selectedPathKey, selectedPath]);
+
+  const handleHorizontalNavigation = (key: WidgetTreeHorizontalNavigationKey): boolean => {
+    const action = resolveWidgetTreeHorizontalNavigationAction(
+      visibleNodes,
+      selection,
+      collapsedPathKeys,
+      key,
+    );
+    if (!action) return false;
+
+    if (action.type === 'collapse') {
+      setPathCollapsed(action.path, true);
+      focusPath(action.path);
+      return true;
+    }
+
+    if (action.type === 'expand') {
+      setPathCollapsed(action.path, false);
+      focusPath(action.path);
+      return true;
+    }
+
+    onSelectPath?.(action.path);
+    focusPath(action.path);
+    return true;
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {
+    if (event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+      const operation = resolveWidgetTreeMoveOperation(
+        nodes,
+        selection,
+        event.key === 'ArrowUp' ? 'up' : 'down',
+      );
+      if (operation && onMovePath) {
+        event.preventDefault();
+        onMovePath(operation);
+      }
+      return;
+    }
+
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      if (handleHorizontalNavigation(event.key)) {
+        event.preventDefault();
+      }
+      return;
+    }
+
+    if (
+      event.key === 'ArrowDown' ||
+      event.key === 'ArrowUp' ||
+      event.key === 'Home' ||
+      event.key === 'End'
+    ) {
+      const nextPath = resolveWidgetTreeNavigationPath(visibleNodes, selection, event.key);
+      if (nextPath) {
+        event.preventDefault();
+        onSelectPath?.(nextPath);
+        focusPath(nextPath);
+      }
+      return;
+    }
+
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+      const current = visibleNodes[selectedIndex];
+      if (current && !isRootWidgetPath(current.path)) {
+        event.preventDefault();
+        onDeletePath?.(current.path);
+      }
+      return;
+    }
+
+    const current = visibleNodes[selectedIndex];
+    if (current && isWidgetTreeActivateKey(event.key) && onActivatePath) {
+      event.preventDefault();
+      onSelectPath?.(current.path);
+      onActivatePath(current.path);
+    }
+  };
+
+  const handleToggleCollapse = (path: WidgetPath, isCollapsed: boolean) => {
+    setPathCollapsed(path, !isCollapsed);
+
+    if (
+      !isCollapsed &&
+      selectedPath &&
+      isPathPrefix(path, selectedPath) &&
+      !widgetPathEquals(path, selectedPath)
+    ) {
+      onSelectPath?.(path);
+    }
+  };
+
+  const handleDragStart = (event: DragEvent<HTMLLIElement>, path: WidgetPath) => {
+    if (!onMovePath || isRootWidgetPath(path)) {
+      event.preventDefault();
+      return;
+    }
+
+    setDragPath(path);
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('application/x-workbench-widget-path', widgetPathKey(path));
+  };
+
+  const handleDragOver = (event: DragEvent<HTMLLIElement>, targetNode: WidgetNode) => {
+    const asset = onPlaceAssetPath ? readWidgetPlacementAssetDragData(event.dataTransfer) : null;
+    if (asset) {
+      const placement = resolveDropPlacementFromEvent(event, targetNode);
+      const operation = resolveWidgetTreeAssetDropOperation(
+        nodes,
+        asset,
+        targetNode.path,
+        placement,
+      );
+      const targetKey = widgetPathKey(targetNode.path);
+      if (!operation) {
+        setDropTarget(null);
+        return;
+      }
+
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'copy';
+      setDropTarget({ pathKey: targetKey, placement });
+      return;
+    }
+
+    if (!dragPath) return;
+
+    const placement = resolveDropPlacementFromEvent(event, targetNode);
+    const operation = resolveWidgetTreeDropOperation(nodes, dragPath, targetNode.path, placement);
+    const targetKey = widgetPathKey(targetNode.path);
+    if (!operation) {
+      setDropTarget(null);
+      return;
+    }
+
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    setDropTarget({ pathKey: targetKey, placement });
+  };
+
+  const handleDragLeave = (event: DragEvent<HTMLLIElement>, path: WidgetPath) => {
+    const relatedTarget = event.relatedTarget;
+    if (relatedTarget instanceof Node && event.currentTarget.contains(relatedTarget)) return;
+
+    const targetKey = widgetPathKey(path);
+    setDropTarget((current) => (current?.pathKey === targetKey ? null : current));
+  };
+
+  const handleDrop = (event: DragEvent<HTMLLIElement>, targetNode: WidgetNode) => {
+    const asset = onPlaceAssetPath ? readWidgetPlacementAssetDragData(event.dataTransfer) : null;
+    if (asset) {
+      const placement =
+        dropTarget?.pathKey === widgetPathKey(targetNode.path)
+          ? dropTarget.placement
+          : resolveDropPlacementFromEvent(event, targetNode);
+      const operation = resolveWidgetTreeAssetDropOperation(
+        nodes,
+        asset,
+        targetNode.path,
+        placement,
+      );
+      if (!operation) {
+        setDropTarget(null);
+        return;
+      }
+
+      event.preventDefault();
+      onPlaceAssetPath?.(operation);
+      setDragPath(null);
+      setDropTarget(null);
+      return;
+    }
+
+    if (!dragPath || !onMovePath) {
+      setDropTarget(null);
+      return;
+    }
+
+    const placement =
+      dropTarget?.pathKey === widgetPathKey(targetNode.path)
+        ? dropTarget.placement
+        : resolveDropPlacementFromEvent(event, targetNode);
+    const operation = resolveWidgetTreeDropOperation(nodes, dragPath, targetNode.path, placement);
+    if (!operation) {
+      setDropTarget(null);
+      return;
+    }
+
+    event.preventDefault();
+    onMovePath(operation);
+    setDragPath(null);
+    setDropTarget(null);
+  };
 
   return (
     <Panel className="widget-tree-outline" data-testid="widget-tree-outline-panel">
@@ -46,13 +696,26 @@ export function WidgetTreeView({ root, parseError, selection, onSelectPath }: Wi
             No widget root.
           </EmptyState>
         ) : (
-          <ul aria-label="Widget outline" className="widget-tree-outline__list" role="tree">
-            {nodes.map((node) => {
+          <ul
+            aria-label="Widget outline"
+            aria-keyshortcuts="ArrowLeft ArrowRight Alt+ArrowUp Alt+ArrowDown Delete Backspace"
+            className="widget-tree-outline__list"
+            role="tree"
+            onKeyDown={handleKeyDown}
+          >
+            {visibleNodes.map((node) => {
               const pathKey = widgetPathKey(node.path);
               const depth = node.path.length;
-              const isSelected = selection ? isWidgetPathSelected(selection, node.path) : false;
+              const isSelected = selection
+                ? isWidgetPathSelected(selection, node.path)
+                : isRootWidgetPath(node.path);
               const parentType = parentTypeForNode(nodes, node.path);
               const placementMeta = formatWidgetPlacementMeta(node.widget, parentType);
+              const canMove = Boolean(onMovePath && !isRootWidgetPath(node.path));
+              const hasChildren = hasCollapsibleWidgetChildren(node.widget);
+              const isCollapsed = collapsedPathKeys.has(pathKey);
+              const dropPlacement = dropTarget?.pathKey === pathKey ? dropTarget.placement : null;
+              const displayLabel = getWidgetDisplayLabel(node.widget);
               const textPreview =
                 node.widget.type === 'text' && typeof node.widget.text === 'string'
                   ? node.widget.text
@@ -62,23 +725,60 @@ export function WidgetTreeView({ root, parseError, selection, onSelectPath }: Wi
                 <li
                   key={pathKey}
                   aria-level={depth + 1}
+                  aria-expanded={hasChildren ? !isCollapsed : undefined}
                   aria-selected={isSelected}
                   className={cx(
                     'widget-tree-outline__item',
                     isSelected && 'widget-tree-outline__item--selected',
+                    canMove && 'widget-tree-outline__item--movable',
+                    dropPlacement && `widget-tree-outline__item--drop-${dropPlacement}`,
                   )}
+                  data-drop-position={dropPlacement ?? undefined}
                   data-testid={`widget-tree-node-${pathKey}`}
+                  draggable={canMove}
                   role="treeitem"
                   style={{ paddingLeft: `${depth * 14 + 6}px` }}
+                  onDragEnd={() => {
+                    setDragPath(null);
+                    setDropTarget(null);
+                  }}
+                  onDragLeave={(event) => handleDragLeave(event, node.path)}
+                  onDragOver={(event) => handleDragOver(event, node)}
+                  onDragStart={(event) => handleDragStart(event, node.path)}
+                  onDrop={(event) => handleDrop(event, node)}
                 >
+                  {hasChildren ? (
+                    <button
+                      aria-label={`${isCollapsed ? 'Expand' : 'Collapse'} ${displayLabel}`}
+                      className="widget-tree-outline__twistie"
+                      type="button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        handleToggleCollapse(node.path, isCollapsed);
+                      }}
+                    >
+                      {isCollapsed ? '▸' : '▾'}
+                    </button>
+                  ) : (
+                    <span
+                      aria-hidden="true"
+                      className="widget-tree-outline__twistie widget-tree-outline__twistie--spacer"
+                    />
+                  )}
                   <button
                     className="widget-tree-outline__button"
+                    ref={(button) => {
+                      if (button) {
+                        treeButtonRefs.current.set(pathKey, button);
+                      } else {
+                        treeButtonRefs.current.delete(pathKey);
+                      }
+                    }}
+                    tabIndex={isSelected ? 0 : -1}
                     type="button"
                     onClick={() => onSelectPath?.(node.path)}
                   >
-                    <span className="widget-tree-outline__type">
-                      {getWidgetDisplayLabel(node.widget)}
-                    </span>
+                    <span className="widget-tree-outline__type">{displayLabel}</span>
                     {placementMeta ? (
                       <span className="widget-tree-outline__placement">{placementMeta}</span>
                     ) : null}