Add dnd styling

src/components/Tree.css

@@ -37,6 +37,7 @@
     width: 100%;
     box-sizing: border-box;
     outline: none;
+    border-radius: 6px;
 
     /* Chevron */
 
@@ -108,6 +109,7 @@
 
     &[data-focus-visible] {
       outline: 2px solid var(--alinea-focus-ring-color);
+      background: var(--alinea-background-color);
       outline-offset: -2px;
     }
 
@@ -159,26 +161,9 @@
       }
     }
 
-    /* Action buttons */
-
-    button:not([slot]) {
-      margin-left: auto;
-      background: transparent;
-      border: none;
-      font-size: 1.05rem;
-      line-height: 1.2em;
-      padding: 4px 6px;
-      transition: background 200ms;
-
-      &[data-hovered] {
-        background: var(--alinea-highlight-hover);
-      }
-
-      &[data-pressed] {
-        background: var(--alinea-highlight-pressed);
-        box-shadow: none;
-      }
-    }
+    user-select: none;
+    -webkit-user-drag: element;
+    touch-action: none;
   }
 
   /* Drop indicator */
@@ -206,3 +191,43 @@
   outline-offset: -1px;
   background: var(--alinea-highlight-overlay);
 }
+
+.alinea-rac-TreeItem-controls {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  & > * {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+  }
+}
+
+.alinea-rac-TreeItem-dragHandle {
+  margin-left: auto;
+  background: transparent;
+  border: none;
+  font-size: 1.05rem;
+  line-height: 1.2em;
+  padding: 4px 6px;
+  transition: background 200ms;
+
+  &[data-hovered] {
+    background: var(--alinea-highlight-hover);
+  }
+
+  &[data-pressed] {
+    background: var(--alinea-highlight-pressed);
+    box-shadow: none;
+  }
+
+  &[data-invisible="true"] {
+    opacity: 0 !important;
+    &:focus-visible {
+      opacity: 1 !important;
+      + .react-aria-Button[data-invisible="false"] {
+        opacity: 0 !important;
+      }
+    }
+  }
+}

src/components/Tree.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import {type ReactNode, memo, useMemo} from 'react'
+import {type ReactNode, memo} from 'react'
 import {
   Tree as AriaTree,
   TreeItem as AriaTreeItem,
@@ -42,36 +42,37 @@ export const TreeItemContent = memo(function TreeItemContent({
   suffix,
   children
 }: TreeItemContentProps) {
-  const inner = useMemo(
-    () => (
-      <>
-        <Button slot="chevron">
-          <IcRoundKeyboardArrowRight />
-        </Button>
-        {icon && (
-          <span data-slot="icon">
-            <Icon icon={icon} />
-          </span>
-        )}
-        <span data-slot="label">{children}</span>
-        {suffix && <span data-slot="suffix">{suffix}</span>}
-      </>
-    ),
-    [children, icon, suffix]
-  )
   return (
     <AriaTreeItemContent>
       {({
         selectionBehavior,
         selectionMode,
-        allowsDragging
+        allowsDragging,
+        isDragging
       }: TreeItemContentRenderProps) => (
         <>
-          {allowsDragging && <Button slot="drag">≡</Button>}
           {selectionBehavior === 'toggle' && selectionMode !== 'none' && (
             <Checkbox slot="selection" />
           )}
-          {inner}
+          <div className="alinea-rac-TreeItem-controls">
+            <Button
+              slot="drag"
+              data-invisible={!isDragging}
+              className="alinea-rac-TreeItem-dragHandle"
+            >
+              ≡
+            </Button>
+            <Button slot="chevron" data-invisible={isDragging}>
+              <IcRoundKeyboardArrowRight />
+            </Button>
+          </div>
+          {icon && (
+            <span data-slot="icon">
+              <Icon icon={icon} />
+            </span>
+          )}
+          <span data-slot="label">{children}</span>
+          {suffix && <span data-slot="suffix">{suffix}</span>}
         </>
       )}
     </AriaTreeItemContent>