@1agh/maude 0.49.2 → 0.51.0

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

@@ -0,0 +1,388 @@
+// 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';
+
+import { invoke, isNativeApp, listen } from '../github.js';
+
+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 };
+};
+
+/**
+ * Parse a maude://open/<project>?code=mhc_… deep link. Untrusted input — a
+ * drive-by page can navigate to maude:// — so nothing here is acted on
+ * without the person pressing Connect, and the code is only ever exchanged
+ * against the app's own configured Maude Cloud address.
+ */
+export function parseDeepLink(url) {
+  const m = /^maude:\/\/open\/([a-z0-9]+(?:-[a-z0-9]+)*)\/?\?(.*)$/.exec(String(url ?? ''));
+  if (!m) return null;
+  const code = new URLSearchParams(m[2]).get('code') ?? '';
+  if (!/^mhc_[0-9a-f]{16,128}$/.test(code)) return null;
+  return { project: m[1], code };
+}
+
+/** The share view's address for a project cell URL (viewer's browser home). */
+export function shareViewUrl(projectUrl, projectId) {
+  try {
+    const u = new URL(projectUrl);
+    return `${u.protocol}//view-${u.host}`;
+  } catch {
+    return `https://view-${projectId}.cloud.maude.sh`;
+  }
+}
+
+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 [pending, setPending] = useState(null); // { project, code } from maude://
+  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);
+  }, []);
+
+  // maude:// deep links (Phase 17) — native shell only. The link that LAUNCHED
+  // the app is parked in the shell (take once); links while running arrive as
+  // events. Either way: ask, never auto-connect.
+  useEffect(() => {
+    if (!isNativeApp()) return undefined;
+    const consume = (url) => {
+      const parsed = parseDeepLink(url);
+      if (parsed) setPending(parsed);
+    };
+    invoke('take_pending_deep_link')
+      .then((url) => url && consume(url))
+      .catch(() => {});
+    let unlisten = null;
+    listen('maude://deep-link', consume).then((fn) => {
+      unlisten = fn;
+    });
+    return () => unlisten?.();
+  }, []);
+
+  async function connectPending() {
+    if (!pending) return;
+    setBusy('deeplink');
+    setError('');
+    const r = await api('/_api/cloud/attach/code', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ code: pending.code }),
+    });
+    setBusy('');
+    setPending(null);
+    if (r.ok && r.json?.ok) {
+      setNote(`Linked to ${r.json.project ?? pending.project} — restart the studio server to start syncing.`);
+    } else {
+      setError(r.json?.error || 'The workspace could not be connected.');
+    }
+  }
+
+  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">
+      {pending && (
+        <div className="gi-rail-confirm" data-testid="cloud-deeplink">
+          <span className="gi-rail-hint">Connect this project to {pending.project}?</span>
+          <button
+            type="button"
+            className="btn btn--sm"
+            disabled={busy === 'deeplink'}
+            onClick={connectPending}
+            data-testid="cloud-deeplink-connect"
+          >
+            {busy === 'deeplink' ? 'Connecting…' : 'Connect'}
+          </button>
+          <button
+            type="button"
+            className="btn btn--ghost btn--sm"
+            onClick={() => setPending(null)}
+            data-testid="cloud-deeplink-dismiss"
+          >
+            Not now
+          </button>
+        </div>
+      )}
+      {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) =>
+                  p.role === 'viewer' ? (
+                    // Viewer dignity (Phase 17 T4): no dead Connect that would
+                    // 403 at the workspace — viewing has a first-class home in
+                    // the browser, and the label says why.
+                    <button
+                      key={p.id}
+                      type="button"
+                      className="gi-menu-item"
+                      role="menuitem"
+                      onClick={() => window.open(shareViewUrl(p.url, p.id), '_blank', 'noopener')}
+                      title="Viewing works in the browser. Editing in the app needs the member role — ask whoever runs the project."
+                      data-testid={`cloud-project-${p.id}`}
+                    >
+                      <Icon name="external" size={15} /> View {p.name || p.id} in the browser
+                      <span className="gi-menu-login" style={{ marginLeft: 'auto' }}>viewer</span>
+                    </button>
+                  ) : (
+                    <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; }
@@ -1967,6 +1993,8 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .gi-rail { position: relative; flex: 0 0 auto; margin-top: auto; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: var(--space-2); }
 .gi-rail-hint { font-size: var(--type-xs); color: var(--fg-2); padding: var(--space-1) var(--space-1); }
 .gi-rail-signin { width: 100%; justify-content: center; }
+.gi-rail-confirm { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-2); }
+.gi-rail-confirm .gi-rail-hint { flex: 1 1 100%; padding: 0; }
 .gi-rail-err { font-size: var(--type-xs); color: var(--status-error); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gi-avatar { border-radius: var(--radius-pill); display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--accent-fg); background: var(--accent); flex: 0 0 auto; }
 .gi-rail-account { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-1) var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--fg-0); cursor: pointer; text-align: left; }

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>
+  );
+}