@1agh/maude 0.49.2 → 0.50.0

package/apps/studio/client/panels/CloudBar.jsx

@@ -0,0 +1,284 @@
+// Cloud Phase 23 C3 — Maude Cloud in the sidebar footer.
+//
+// The same compact rail treatment as the GitHub IdentityBar directly below
+// it, and deliberately the same `gi-*` chrome (one material, one dialog
+// family). Differences that matter:
+//
+//   • Works in BOTH the desktop shell and a plain browser: the whole lane is
+//     the dev-server's loopback `/_api/cloud/*` — no Tauri, no keychain, no
+//     CORS. The credential never enters this JS; the server holds it.
+//   • Sign-in is OUR device flow: the dashboard shows /activate, the person
+//     types (or arrives with) the short code, this panel just polls.
+//   • "Connect" attaches THIS project to the chosen cloud workspace — the
+//     exact state `maude design link` writes, minus the terminal.
+
+import { useEffect, useRef, useState } from 'react';
+
+const api = async (path, init) => {
+  const res = await fetch(path, init);
+  const json = await res.json().catch(() => ({}));
+  return { ok: res.ok, status: res.status, json };
+};
+
+function Spark({ size = 15 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
+      <path d="M16 5l2.8 8.2L27 16l-8.2 2.8L16 27l-2.8-8.2L5 16l8.2-2.8z" />
+    </svg>
+  );
+}
+
+function Icon({ name, size = 15 }) {
+  const p = {
+    'chevron-up': <polyline points="3.5 10 8 5.5 12.5 10" />,
+    external: (
+      <>
+        <path d="M6 3.5H3.2A.7.7 0 0 0 2.5 4.2v8.6a.7.7 0 0 0 .7.7h8.6a.7.7 0 0 0 .7-.7V10" />
+        <line x1="8" y1="8" x2="13" y2="3" />
+        <polyline points="9.5 3 13 3 13 6.5" />
+      </>
+    ),
+    copy: (
+      <>
+        <rect x="5.5" y="5.5" width="7.5" height="7.5" rx="1.2" />
+        <path d="M3 10.5V3.2A.7.7 0 0 1 3.7 2.5H10" />
+      </>
+    ),
+    link: (
+      <>
+        <path d="M6.5 9.5l3-3" />
+        <path d="M7.5 4.5l1-1a2.47 2.47 0 0 1 3.5 3.5l-1 1" />
+        <path d="M8.5 11.5l-1 1a2.47 2.47 0 0 1-3.5-3.5l1-1" />
+      </>
+    ),
+    signout: (
+      <>
+        <path d="M6.5 13.5H3.2a.7.7 0 0 1-.7-.7V3.2a.7.7 0 0 1 .7-.7h3.3" />
+        <line x1="13" y1="8" x2="6.5" y2="8" />
+        <polyline points="10 5 13 8 10 11" />
+      </>
+    ),
+  }[name];
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      {p}
+    </svg>
+  );
+}
+
+export default function CloudBar() {
+  const [state, setState] = useState('loading'); // loading | out | in
+  const [email, setEmail] = useState(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [device, setDevice] = useState(null); // { userCode, verificationUrl, deviceCode }
+  const [projects, setProjects] = useState(null);
+  const [busy, setBusy] = useState('');
+  const [note, setNote] = useState('');
+  const [error, setError] = useState('');
+  const [copied, setCopied] = useState(false);
+  const railRef = useRef(null);
+  const pollRef = useRef(null);
+
+  useEffect(() => {
+    api('/_api/cloud/status').then((r) => {
+      if (r.ok && r.json?.connected) {
+        setEmail(r.json.email);
+        setState('in');
+      } else setState('out');
+    });
+    return () => clearInterval(pollRef.current);
+  }, []);
+
+  useEffect(() => {
+    if (!menuOpen) return undefined;
+    const onDoc = (e) => {
+      if (railRef.current && !railRef.current.contains(e.target)) setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [menuOpen]);
+
+  async function startSignIn() {
+    setError('');
+    const r = await api('/_api/cloud/signin/start', { method: 'POST' });
+    if (!r.ok || !r.json?.ok) {
+      setError(r.json?.error || 'Maude Cloud could not be reached.');
+      return;
+    }
+    setDevice(r.json);
+    window.open(r.json.verificationUrl, '_blank', 'noopener');
+    pollRef.current = setInterval(async () => {
+      const p = await api('/_api/cloud/signin/poll', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ deviceCode: r.json.deviceCode }),
+      });
+      if (p.json?.pending) return;
+      clearInterval(pollRef.current);
+      if (p.ok && p.json?.ok) {
+        setEmail(p.json.email);
+        setState('in');
+        setDevice(null);
+      } else {
+        setDevice(null);
+        setError(p.json?.error || 'The sign-in did not finish. Try again.');
+      }
+    }, (r.json.interval ?? 5) * 1000);
+  }
+
+  function cancelSignIn() {
+    clearInterval(pollRef.current);
+    setDevice(null);
+  }
+
+  async function openMenu() {
+    const next = !menuOpen;
+    setMenuOpen(next);
+    if (next && projects === null) {
+      const r = await api('/_api/cloud/projects');
+      setProjects(r.ok && r.json?.ok ? r.json.projects : []);
+      if (!r.ok && r.status === 401) {
+        setMenuOpen(false);
+        setState('out');
+        setEmail(null);
+      }
+    }
+  }
+
+  async function connect(projectId) {
+    setBusy(projectId);
+    setNote('');
+    setError('');
+    const r = await api('/_api/cloud/attach', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ project: projectId }),
+    });
+    setBusy('');
+    if (r.ok && r.json?.ok) {
+      setNote(`Linked to ${projectId} — restart the studio server to start syncing.`);
+    } else {
+      setError(r.json?.error || 'The workspace could not be connected.');
+    }
+    setMenuOpen(false);
+  }
+
+  async function signOut() {
+    setMenuOpen(false);
+    await api('/_api/cloud/signout', { method: 'POST' });
+    setEmail(null);
+    setProjects(null);
+    setState('out');
+  }
+
+  function copyCode() {
+    if (!device?.userCode) return;
+    navigator.clipboard?.writeText(device.userCode).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      },
+      () => {}
+    );
+  }
+
+  if (state === 'loading') return null;
+
+  return (
+    <div className="gi-rail cb-rail" ref={railRef} data-testid="cloud-bar">
+      {state === 'out' && (
+        <>
+          <button type="button" className="btn btn--ghost btn--sm gi-rail-signin" onClick={startSignIn} data-testid="cloud-signin">
+            <Spark size={14} /> Sign in to Maude Cloud
+          </button>
+          {error && <span className="gi-rail-err" title={error}>{error}</span>}
+        </>
+      )}
+
+      {state === 'in' && (
+        <>
+          <button
+            type="button"
+            className={'gi-rail-account' + (menuOpen ? ' is-open' : '')}
+            aria-expanded={menuOpen}
+            aria-haspopup="menu"
+            onClick={openMenu}
+            title={`Maude Cloud — ${email ?? 'connected'}`}
+            data-testid="cloud-account"
+          >
+            <span className="gi-avatar gi-avatar--fallback" aria-hidden="true"><Spark size={14} /></span>
+            <span className="gi-rail-login">{email ?? 'Maude Cloud'}</span>
+            <span className="gi-rail-caret"><Icon name="chevron-up" size={13} /></span>
+          </button>
+          {note && <span className="gi-rail-hint" title={note}>{note}</span>}
+          {error && <span className="gi-rail-err" title={error}>{error}</span>}
+          {menuOpen && (
+            <div className="gi-menu" role="menu" aria-label="Maude Cloud">
+              <div className="gi-menu-hd">
+                <span className="gi-avatar gi-avatar--fallback" aria-hidden="true"><Spark size={16} /></span>
+                <span className="gi-menu-id">
+                  <span className="gi-menu-name">Maude Cloud</span>
+                  <span className="gi-menu-login">{email ?? 'connected'}</span>
+                </span>
+              </div>
+              {projects === null && <div className="gi-menu-item" aria-disabled="true">Loading projects…</div>}
+              {Array.isArray(projects) && projects.length === 0 && (
+                <div className="gi-menu-item" aria-disabled="true">No projects yet — start one on the dashboard.</div>
+              )}
+              {Array.isArray(projects) &&
+                projects.map((p) => (
+                  <button
+                    key={p.id}
+                    type="button"
+                    className="gi-menu-item"
+                    role="menuitem"
+                    disabled={busy === p.id}
+                    onClick={() => connect(p.id)}
+                    title={`Connect this project to ${p.url} (${p.role})`}
+                    data-testid={`cloud-project-${p.id}`}
+                  >
+                    <Icon name="link" size={15} /> {busy === p.id ? 'Connecting…' : `Connect ${p.name || p.id}`}
+                    <span className="gi-menu-login" style={{ marginLeft: 'auto' }}>{p.stateLabel}</span>
+                  </button>
+                ))}
+              <div className="gi-menu-sep" />
+              <button type="button" className="gi-menu-item" role="menuitem" onClick={() => window.open('https://cloud.maude.sh', '_blank', 'noopener')}>
+                <Icon name="external" size={15} /> Open the dashboard
+              </button>
+              <button type="button" className="gi-menu-item gi-menu-item--danger" role="menuitem" onClick={signOut}>
+                <Icon name="signout" size={15} /> Sign out
+              </button>
+            </div>
+          )}
+        </>
+      )}
+
+      {device && (
+        <div className="gi-modal" role="dialog" aria-modal="true" aria-label="Sign in to Maude Cloud" onKeyDown={(e) => { if (e.key === 'Escape') cancelSignIn(); }}>
+          <div className="gi-scrim" aria-hidden="true" onClick={cancelSignIn} />
+          <div className="gi-dialog gi-dialog--code" data-testid="cloud-device-dialog">
+            <div className="gi-dc-head">
+              <span className="gi-dc-marks"><Spark size={26} /></span>
+              <h2>Sign in to Maude Cloud</h2>
+              <p>Maude opened your dashboard in the browser. Confirm this code there to connect.</p>
+            </div>
+            <div className="gi-code">
+              <span className="gi-code-val" data-testid="cloud-user-code">{device.userCode}</span>
+              <button type="button" className="btn btn--ghost gi-code-copy" onClick={copyCode} aria-label="Copy the code">
+                <Icon name="copy" size={15} /> {copied ? 'Copied' : 'Copy'}
+              </button>
+            </div>
+            <div className="gi-dc-status" aria-live="polite">
+              <span className="gi-pulse" aria-hidden="true" />
+              <span>Waiting for you to confirm in the browser…</span>
+            </div>
+            <div className="gi-dc-foot">
+              <button type="button" className="btn btn--ghost" onClick={cancelSignIn}>Cancel</button>
+              <span className="gi-dc-foot-note">Nothing is stored until you confirm.</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/studio/client/styles/3-shell-maude.css

@@ -281,6 +281,10 @@
   appearance: none; border: 0; background: transparent; text-align: left;
 }
 .st-tree-sec-hd:hover { color: var(--fg-0); }
+/* feature-file-tree-drag-drop-folders (dogfood follow-up) — the section
+   header is the drop target for "move back to this group's root". Same
+   accent language as .st-row.is-drop-target. */
+.st-tree-sec-hd.is-drop-target { background: var(--accent-tint); color: var(--fg-0); box-shadow: inset 2px 0 0 var(--accent); }
 .st-tree-sec-hd .st-sec-name { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
 .st-tree-sec-hd .st-pill {
   margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
@@ -298,6 +302,15 @@
 .st-row.is-sel { background: var(--accent-tint); color: var(--fg-0); box-shadow: inset 2px 0 0 var(--accent); }
 .st-row.is-muted { color: var(--fg-3); }
 .st-row[aria-disabled="true"] { cursor: default; }
+/* feature-file-tree-drag-drop-folders (Task 8) — a valid drop target reuses
+   the exact .st-row.is-sel treatment (same accent language: "this is where
+   it lands"), the dragged source dims, and a busy row (server round-trip
+   in flight) dims further + suspends pointer events so it can't be re-dragged
+   mid-move. */
+.st-row.is-drop-target { background: var(--accent-tint); color: var(--fg-0); box-shadow: inset 2px 0 0 var(--accent); }
+.st-row.is-dragging { opacity: 0.45; transition: opacity var(--dur-soft) var(--ease-out); }
+.st-row.is-busy { opacity: 0.6; pointer-events: none; }
+@media (prefers-reduced-motion: reduce) { .st-row.is-dragging { transition-duration: 1ms; } }
 .st-row-glyph { width: 14px; display: inline-flex; justify-content: center; color: var(--fg-3); flex: 0 0 14px; }
 .st-row.is-sel .st-row-glyph { color: var(--accent); }
 .st-row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
@@ -339,6 +352,19 @@
 .st-row-wrap:hover .st-git-badge,
 .st-row-wrap:focus-within .st-git-badge { margin-right: 24px; }
 .st-row-del:hover { color: var(--status-error); background: color-mix(in oklab, var(--status-error) 14%, transparent); }
+/* feature-file-tree-drag-drop-folders (Task 9) — the keyboard-reachable
+   "⋯" trigger (Move to… / New folder here). Same treatment as .st-row-del;
+   sits to ITS left when both share a row (a canvas row has delete too). */
+.st-row-menu-btn {
+  position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
+  appearance: none; border: 0; background: transparent; color: var(--fg-3); cursor: pointer;
+  width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-xs);
+  opacity: 0; transition: opacity var(--dur-soft) var(--ease-out);
+}
+.st-row-wrap:hover .st-row-menu-btn, .st-row-menu-btn:focus-visible { opacity: 1; }
+.st-row-menu-btn:hover { background: var(--bg-3); color: var(--fg-0); }
+.st-row-menu-btn.has-delete-sibling { right: calc(var(--space-2) + 24px); }
+@media (prefers-reduced-motion: reduce) { .st-row-menu-btn, .st-row-del { transition-duration: 1ms; } }
 
 /* DS-folder row — chevron toggles disclosure, name opens the system view. */
 .st-ds-folder { display: flex; align-items: center; gap: 0; padding: 0; }

package/apps/studio/client/tree-row-menu.jsx

@@ -0,0 +1,132 @@
+// tree-row-menu.jsx — feature-file-tree-drag-drop-folders (Task 9).
+//
+// The KEYBOARD path for tree operations that Task 8's drag & drop can't
+// reach on its own — WCAG 2.1.1 (keyboard operability) makes this a hard-stop
+// for the a11y gate, not optional polish. A focusable "⋯" button + Enter/click
+// opens a small menu; Move to… drills into a flat destination-folder list.
+// Reuses the existing menubar dropdown visual language (`.st-dropdown` /
+// `.st-dd-item` from 3-shell-maude.css) rather than inventing new chrome —
+// only `position` is overridden inline since this menu anchors to an
+// arbitrary row, not the menubar's fixed offset.
+
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * One shared menu instance per tree (mirrors useTreeDrag — only one row's
+ * menu is ever open at a time). `extra` is caller-defined data identifying
+ * WHICH row this is for (e.g. `{ kind: 'file', path }` / `{ kind: 'dir',
+ * dirPath }`), read back by the caller when rendering <TreeRowMenu> so
+ * rootItems/destinations can be computed per-row without the hook needing to
+ * know about canvases or folders at all.
+ */
+export function useRowMenu() {
+  const [state, setState] = useState(null); // { x, y, anchorEl, view, extra }
+  const openAt = (e, extra) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const anchorEl = e.currentTarget;
+    const r = anchorEl.getBoundingClientRect();
+    setState({ x: r.left, y: r.bottom + 4, anchorEl, view: 'root', extra });
+  };
+  const close = () => {
+    setState((s) => {
+      s?.anchorEl?.focus();
+      return null;
+    });
+  };
+  const showMoveTo = () => setState((s) => (s ? { ...s, view: 'move-to' } : s));
+  return { state, openAt, close, showMoveTo };
+}
+
+/**
+ * `rootItems` — [{ id, label, onSelect, disabled?, destructive? }] for the
+ * top-level menu. `destinations` — [{ path, label }] shown when the user
+ * picks the item with `id === 'move-to'`; `onPickDestination(path)` fires
+ * the actual move.
+ */
+export function TreeRowMenu({ state, onClose, rootItems, destinations, onPickDestination }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!state) return;
+    const el = ref.current;
+    const focusFirst = () => el?.querySelector('button:not([disabled])')?.focus();
+    focusFirst();
+    const onDocPointer = (e) => {
+      if (!el.contains(e.target)) onClose();
+    };
+    const onKey = (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        const items = Array.from(el.querySelectorAll('button:not([disabled])'));
+        if (items.length === 0) return;
+        const idx = items.indexOf(document.activeElement);
+        const next =
+          e.key === 'ArrowDown' ? (idx + 1) % items.length : (idx - 1 + items.length) % items.length;
+        items[next]?.focus();
+      }
+    };
+    document.addEventListener('pointerdown', onDocPointer, true);
+    document.addEventListener('keydown', onKey, true);
+    return () => {
+      document.removeEventListener('pointerdown', onDocPointer, true);
+      document.removeEventListener('keydown', onKey, true);
+    };
+  }, [state, onClose]);
+
+  if (!state) return null;
+  const style = { position: 'fixed', left: state.x, top: state.y };
+
+  if (state.view === 'move-to') {
+    return (
+      <div ref={ref} className="st-dropdown" role="menu" aria-label="Move to…" style={style}>
+        <div className="st-dd-hd">Move to…</div>
+        {destinations.length === 0 ? (
+          <div className="st-dd-item" aria-disabled="true">
+            No other folders
+          </div>
+        ) : (
+          destinations.map((d) => (
+            <button
+              key={d.path}
+              type="button"
+              role="menuitem"
+              className="st-dd-item"
+              onClick={() => {
+                onPickDestination(d.path);
+                onClose();
+              }}
+            >
+              <span className="st-dd-lead">{d.label}</span>
+            </button>
+          ))
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={ref} className="st-dropdown" role="menu" style={style}>
+      {rootItems.map((item) => (
+        <button
+          key={item.id}
+          type="button"
+          role="menuitem"
+          disabled={item.disabled}
+          className="st-dd-item"
+          style={item.destructive ? { color: 'var(--status-error)' } : undefined}
+          onClick={() => {
+            if (item.disabled) return;
+            item.onSelect();
+          }}
+        >
+          <span className="st-dd-lead">{item.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/apps/studio/client/use-tree-drag.js

@@ -0,0 +1,120 @@
+// use-tree-drag.js — feature-file-tree-drag-drop-folders (Task 8).
+//
+// Drag source/target bookkeeping for the file tree's HTML5 drag & drop layer:
+// which canvas row is being dragged, which folder row is currently hovered
+// (for the highlight + spring-load-open), and a small timer for the
+// spring-load itself. Kept out of Tree/DirRow/CanvasRow so those components
+// stay about rendering, not drag bookkeeping.
+//
+// Payload MIME is a custom `application/x-maude-canvas` (not `text/plain` or
+// `Files`) so an OS file drag can't be mistaken for a tree-row drag, and the
+// existing canvas-side media-drop path (use-canvas-media-drop.tsx) — which
+// only reacts to real `DataTransfer.files` — stays unaffected.
+
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+export const TREE_DRAG_MIME = 'application/x-maude-canvas';
+const SPRING_LOAD_MS = 600;
+
+/**
+ * `onMove(fromPath, toDir)` — async, called on a valid drop. The caller owns
+ * the actual fetch + tree refresh; this hook only tracks UI state and decides
+ * when a drop is valid.
+ */
+export function useTreeDrag(onMove) {
+  const [draggedPath, setDraggedPath] = useState(null);
+  const [overDir, setOverDir] = useState(null);
+  const [busyPath, setBusyPath] = useState(null);
+  const springTimer = useRef(null);
+
+  const clearSpring = useCallback(() => {
+    if (springTimer.current) {
+      clearTimeout(springTimer.current);
+      springTimer.current = null;
+    }
+  }, []);
+
+  const dragProps = useMemo(
+    () => (path, draggable) => {
+      if (!draggable) return {};
+      return {
+        draggable: true,
+        onDragStart: (e) => {
+          e.dataTransfer.effectAllowed = 'move';
+          e.dataTransfer.setData(TREE_DRAG_MIME, path);
+          // A lightweight ghost — the browser default drag image for a
+          // <button> row is poor (grabs the whole row incl. badges).
+          const ghost = document.createElement('div');
+          ghost.textContent = path.split('/').pop();
+          ghost.style.cssText =
+            'position:fixed;top:-1000px;left:-1000px;padding:4px 10px;' +
+            'background:var(--bg-2);color:var(--fg-1);border-radius:6px;' +
+            'font:12px system-ui;pointer-events:none;';
+          document.body.appendChild(ghost);
+          e.dataTransfer.setDragImage(ghost, 8, 8);
+          setTimeout(() => ghost.remove(), 0);
+          setDraggedPath(path);
+        },
+        onDragEnd: () => {
+          setDraggedPath(null);
+          setOverDir(null);
+          clearSpring();
+        },
+      };
+    },
+    [clearSpring]
+  );
+
+  /** `dirPath` is the drop target's full path; `openIfClosed` spring-loads it
+   *  open after hovering. `valid` gates whether this target accepts drops at
+   *  all (e.g. false for the design-system group). */
+  const dropProps = useMemo(
+    () => (dirPath, valid, openIfClosed) => {
+      if (!valid) return {};
+      return {
+        onDragOver: (e) => {
+          if (!e.dataTransfer.types.includes(TREE_DRAG_MIME)) return;
+          // Only preventDefault on a valid target — the cursor itself then
+          // communicates validity (no-drop glyph elsewhere).
+          e.preventDefault();
+          e.dataTransfer.dropEffect = 'move';
+          if (overDir !== dirPath) {
+            setOverDir(dirPath);
+            clearSpring();
+            if (openIfClosed) {
+              springTimer.current = setTimeout(() => {
+                openIfClosed();
+                springTimer.current = null;
+              }, SPRING_LOAD_MS);
+            }
+          }
+        },
+        onDragLeave: (e) => {
+          // Ignore bubbled leave events from child elements re-entering.
+          if (e.currentTarget.contains(e.relatedTarget)) return;
+          if (overDir === dirPath) setOverDir(null);
+          clearSpring();
+        },
+        onDrop: async (e) => {
+          e.preventDefault();
+          clearSpring();
+          setOverDir(null);
+          const fromPath = e.dataTransfer.getData(TREE_DRAG_MIME);
+          setDraggedPath(null);
+          if (!fromPath || fromPath === dirPath) return;
+          setBusyPath(fromPath);
+          try {
+            await onMove(fromPath, dirPath);
+          } finally {
+            setBusyPath(null);
+          }
+        },
+      };
+    },
+    [overDir, clearSpring, onMove]
+  );
+
+  // `move` — the raw callback, for the Task 9 keyboard path ("Move to…"),
+  // which doesn't go through a drop event at all.
+  return { draggedPath, overDir, busyPath, dragProps, dropProps, move: onMove };
+}