@1agh/maude 0.42.0 → 0.43.0

package/apps/studio/client/export-center.jsx

@@ -255,6 +255,34 @@ function ProgressBar({ progress }) {
   );
 }
 
+// Per-job anchor for the ETA: the FIRST progress sample the client sees. For a
+// video export that's the first frame-step frame — after the (progress-less)
+// renderMediaOnWeb attempt — so the rate is measured over real capture work and
+// isn't skewed by that pre-roll. Keyed by job id; cleared when the job ends.
+const etaAnchors = new Map();
+
+/** Rough "~N min left" from the rate since the first observed progress sample.
+ *  Recomputes on every progress update (frame-step emits ~1–2/s), so it ticks
+ *  down live without a timer. Returns null until there's enough delta to trust. */
+function etaLabel(job) {
+  const cur = job.progress?.current;
+  const total = job.progress?.total;
+  if (!cur || !total || cur >= total) {
+    etaAnchors.delete(job.id);
+    return null;
+  }
+  let anchor = etaAnchors.get(job.id);
+  if (!anchor || cur < anchor.c) {
+    anchor = { t: Date.now(), c: cur };
+    etaAnchors.set(job.id, anchor);
+  }
+  const doneSinceAnchor = cur - anchor.c;
+  if (doneSinceAnchor < 3) return null; // need a few frames to estimate a rate
+  const remainingMs = ((Date.now() - anchor.t) / doneSinceAnchor) * (total - cur);
+  if (remainingMs < 45_000) return '<1 min left';
+  return `~${Math.round(remainingMs / 60_000)} min left`;
+}
+
 function StatusPill({ job }) {
   const statusText =
     job.status === 'queued'
@@ -266,7 +294,13 @@ function StatusPill({ job }) {
         : job.status === 'done'
           ? 'Ready'
           : 'Failed';
-  return <span className={`st-export-pill st-export-pill--${job.status}`}>{statusText}</span>;
+  const eta = job.status === 'running' ? etaLabel(job) : null;
+  return (
+    <span className={`st-export-pill st-export-pill--${job.status}`}>
+      {statusText}
+      {eta ? ` · ${eta}` : ''}
+    </span>
+  );
 }
 
 export function ExportBadge({ center }) {

package/apps/studio/client/github.js

@@ -35,6 +35,10 @@ export const signOut = () => invoke('github_sign_out');
 export const isSignedIn = () => invoke('github_is_signed_in');
 export const openVerification = () =>
   invoke('github_open_verification', { url: 'https://github.com/login/device' });
+/** Open a github.com URL (PR link, repo page) in the OS browser. Native only; the
+ *  Rust side host-locks it to github.com. Throws on an older desktop build without
+ *  the command — callers fall back to copy-to-clipboard. */
+export const openGitHubUrl = (url) => invoke('open_github_url', { url });
 /** Show the device code as soon as the shell has it. Returns an unlisten promise. */
 export const onDeviceCode = (cb) => listen('github://device-code', cb);
 /** Fire when sign-in completes (any surface) so other surfaces can flip live. cb(login). */

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

@@ -364,6 +364,14 @@ export default function GitPanel({
                 getLatest: true,
               }
         );
+      else if (kind === 'publish' && /protected branch|GH006/i.test(res.error || ''))
+        // A protected default branch rejects a direct Publish — point at the PR flow
+        // (DDR-162): the way to add work to a protected branch is a draft + a pull request.
+        setBanner({
+          variant: 'warn',
+          title: 'This branch is protected',
+          text: 'It needs a pull request. Switch to a draft, then use “Add to Shared version” to open one.',
+        });
       else setBanner({ variant: 'error', text: res.error || 'Something went wrong.' });
       return res;
     } finally {

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

@@ -19,7 +19,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 
-import { appRecentProjects, isNativeApp, openLocalProject, pickDirectory } from '../github.js';
+import { appRecentProjects, isNativeApp, openGitHubUrl, openLocalProject, pickDirectory } from '../github.js';
 
 const SHARED = new Set(['main', 'master']);
 
@@ -43,6 +43,10 @@ function Icon({ name, size = 16, className }) {
     // refresh drafts — a circular arrow.
     refresh: (<><path d="M12.5 8a4.5 4.5 0 1 1-1.3-3.2" /><polyline points="12.8 2.5 12.8 5 10.3 5" /></>),
     spinner: <path d="M8 2.2a5.8 5.8 0 1 0 5.8 5.8" />,
+    // "get latest" — pull the shared version's new commits down.
+    download: (<><line x1="8" y1="2.5" x2="8" y2="10.5" /><polyline points="5 7.5 8 10.5 11 7.5" /><line x1="3.5" y1="13.2" x2="12.5" y2="13.2" /></>),
+    // dismiss (×) — used by the "continue on <draft>" resume nudge.
+    close: (<><line x1="4" y1="4" x2="12" y2="12" /><line x1="12" y1="4" x2="4" y2="12" /></>),
   }[name];
   return (
     <svg className={className} width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -93,7 +97,7 @@ async function postJson(url, body, opts = {}) {
   }
 }
 
-export default function RepoBranchSwitcher({ project, liveBranch }) {
+export default function RepoBranchSwitcher({ project, liveBranch, remoteSync, onGetLatest }) {
   const native = isNativeApp();
   const [status, setStatus] = useState(null); // { repo, branch }
   const [branches, setBranches] = useState([]);
@@ -103,6 +107,34 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
   const [draftName, setDraftName] = useState('');
   const [foldConfirm, setFoldConfirm] = useState(false);
   const [folding, setFolding] = useState('');
+  // After a GitHub-remote fold: { url, number } (PR opened) or { message } (draft
+  // pushed but no PR). Keeps the confirm sheet open to show the result (DDR-162).
+  const [prResult, setPrResult] = useState(null);
+  const [prCopied, setPrCopied] = useState(false);
+  // Get-latest (pull) busy state for the dock nudge.
+  const [pulling, setPulling] = useState(false);
+  // "Continue on <draft>?" nudge — dismissed for this session once the user opts out.
+  const [resumeDismissed, setResumeDismissed] = useState(false);
+
+  // Open the PR in the OS browser. A WKWebView anchor can't reach the default browser,
+  // so native goes through the Tauri opener (github.com host-locked in Rust); an older
+  // desktop build without that command falls back to copy-to-clipboard. Web just opens.
+  async function reviewPr(url) {
+    if (!isNativeApp()) {
+      window.open(url, '_blank', 'noopener,noreferrer');
+      return;
+    }
+    try {
+      await openGitHubUrl(url);
+    } catch {
+      try {
+        await navigator.clipboard.writeText(url);
+        setPrCopied(true);
+      } catch {
+        /* clipboard blocked — the URL is shown selectable in the sheet */
+      }
+    }
+  }
   const [busy, setBusy] = useState(false);
   const [switching, setSwitching] = useState('');
   const [err, setErr] = useState('');
@@ -248,17 +280,43 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
     else { setErr(r.json?.error || 'Could not create the draft.'); setBusy(false); }
   }
 
-  // "Add this draft to the Shared version" (Task 7) — merge + publish, then remove.
+  // "Get latest" from the dock nudge — pull the shared version's new commits. Reuses
+  // the app's pull handler (onGetLatest = gitGetLatest): on success it re-probes so the
+  // nudge clears; a content conflict opens the visual resolver (handled in app.jsx).
+  async function getLatest() {
+    if (pulling || !onGetLatest) return;
+    setPulling(true);
+    setErr('');
+    const r = await onGetLatest();
+    setPulling(false);
+    if (r && !r.ok && !r.conflict)
+      setErr(r.status === 401 || r.authRequired ? 'Sign in with GitHub to get the latest.' : r.error || 'Could not get the latest.');
+  }
+
+  // "Add this draft to the Shared version" (Task 7 / DDR-162). On a GitHub remote this
+  // opens a pull request (the merge happens on GitHub, post-review) — surface the PR
+  // link and keep the sheet open. A local project merges directly (reload). A draft that
+  // pushed but couldn't open a PR (no sign-in / non-github) shows a heads-up.
   async function foldDraft() {
-    setFoldConfirm(false);
     setFolding(branch);
     setErr('');
-    const r = await postJson('/_api/git/fold', { name: branch });
-    if (r.ok && r.json?.ok) window.location.reload();
-    else {
-      setErr(r.status === 401 ? `Sign in with GitHub to merge into ${sharedName}.` : r.json?.error || 'Could not merge the branch.');
+    const r = await postJson('/_api/git/fold', { name: branch }, { timeoutMs: 45000 });
+    const j = r.json;
+    if (r.ok && j?.ok && j.prUrl) {
+      setPrResult({ url: j.prUrl, number: j.prNumber, repo: j.repo });
+      setFolding('');
+      reloadBranches(); // the draft still exists (the PR references it) — keep the list
+      return;
+    }
+    if (r.ok && j?.ok && j.prUnavailable) {
+      setPrResult({ message: j.error || 'Draft published, but the pull request could not be opened.' });
       setFolding('');
+      reloadBranches();
+      return;
     }
+    if (r.ok && j?.ok) { window.location.reload(); return; } // local merge (no remote)
+    setErr(r.status === 401 ? `Sign in with GitHub to add “${branch}” to ${sharedName}.` : j?.error || 'Could not add the branch.');
+    setFolding('');
   }
 
   async function switchRepo(path) {
@@ -282,6 +340,16 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
 
   const slug = slugify(draftName);
   const currentDraft = onShared ? null : branches.find((b) => b.current);
+  // On the Shared version with a draft around? Offer to jump back to the most
+  // recently-worked local draft. Maude shows whatever branch HEAD is, so after a
+  // merge / Get-latest you land on the Shared version — this saves the manual switch
+  // back to the draft you were iterating on. Dismissible for the session.
+  const resumeDraft =
+    onShared && !resumeDismissed && !switching && !folding
+      ? [...branches]
+          .filter((b) => !SHARED.has(b.name) && b.where !== 'remote')
+          .sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))[0]
+      : null;
 
   // Search-miss (DDR-133, Task 4): a typed name that matches no LOCAL or already-
   // fetched remote branch offers an explicit remote search (the bounded fetch),
@@ -316,6 +384,23 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
 
   return (
     <div className="rb-dock-wrap">
+      {remoteSync?.remoteAhead && !switching && !folding && (
+        <button type="button" data-testid="switcher-get-latest" className="btn btn--primary rb-getlatest" onClick={getLatest} disabled={pulling} title={`Get the latest ${sharedName}`}>
+          <Icon name={pulling ? 'spinner' : 'download'} size={14} className={pulling ? 'rb-spin' : ''} />
+          <span className="rb-getlatest-tx">{pulling ? 'Getting the latest…' : 'Get latest'}</span>
+          {!pulling && remoteSync.behind > 0 && <span className="rb-getlatest-sub">{remoteSync.behind} new on {sharedName}</span>}
+        </button>
+      )}
+      {resumeDraft && (
+        <div className="rb-resume" data-testid="switcher-resume">
+          <button type="button" className="rb-resume-go" onClick={() => switchDraft(resumeDraft.name)} title={`Switch to ${resumeDraft.name}`}>
+            <span className="rb-resume-icon"><Icon name="draft" size={13} /></span>
+            <span className="rb-resume-tx">Continue on <b>{resumeDraft.name}</b></span>
+            <Icon name="chevron-right" size={12} className="rb-resume-arrow" />
+          </button>
+          <button type="button" className="rb-resume-x" data-testid="switcher-resume-dismiss" aria-label="Dismiss" onClick={() => setResumeDismissed(true)}><Icon name="close" size={12} /></button>
+        </div>
+      )}
       <div className="rb-dock" ref={rootRef}>
         {open && (
           <div className="rb-pop rb-pop--up" id="rb-switch-pop" role="menu" aria-label="Switch project or version" data-testid="repo-switcher-popup">
@@ -376,7 +461,7 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
                   </span>
                   <Icon name="check" size={14} className="rb-pop-check" />
                 </button>
-                <button type="button" data-testid="switcher-merge" className="rb-fold" role="menuitem" onClick={() => { setOpen(false); setFoldConfirm(true); }}>
+                <button type="button" data-testid="switcher-merge" className="rb-fold" role="menuitem" onClick={() => { setOpen(false); setErr(''); setPrResult(null); setPrCopied(false); setFoldConfirm(true); }}>
                   <span className="rb-fold-icon"><Icon name="arrow-up-to-line" size={15} /></span>
                   <span className="rb-fold-tx">
                     <span className="rb-fold-title">Merge this branch → {sharedName}</span>
@@ -459,19 +544,46 @@ export default function RepoBranchSwitcher({ project, liveBranch }) {
         {err && !open && !newDraft && !switching && <div className="rb-switcher-err" role="alert">{err}</div>}
       </div>
 
-      {/* Merge-to-default confirm — the one modal in this surface. No 3-way merge UI. */}
+      {/* Add-to-default confirm — the one modal in this surface. No 3-way merge UI.
+          After a GitHub-remote fold it flips to a pull-request result view (DDR-162). */}
       {foldConfirm && (
-        <div className="rb-scrim" role="presentation" onClick={() => setFoldConfirm(false)}>
-          <div className="rb-sheet" role="dialog" aria-modal="true" aria-labelledby="rb-sheet-title" aria-describedby="rb-sheet-body" onClick={(e) => e.stopPropagation()} onKeyDown={(e) => { if (e.key === 'Escape') setFoldConfirm(false); }}>
-            <span className="rb-sheet-icon"><Icon name="arrow-up-to-line" size={20} /></span>
-            <h2 className="rb-sheet-title" id="rb-sheet-title">Merge this branch → {sharedName}</h2>
-            <p className="rb-sheet-body" id="rb-sheet-body">Everything in <b>“{currentDraft?.name || branch}”</b> becomes part of <b>{sharedName}</b> — the default branch everyone shares.</p>
-            <p className="rb-sheet-meta">Your work is now part of {sharedName}, kept in History. Teammates pick it up the next time they Get latest, and the empty branch is cleared away — nothing is lost.</p>
-            {err && <p className="rb-newdraft-err">{err}</p>}
-            <div className="rb-sheet-actions">
-              <button type="button" className="btn btn--ghost" onClick={() => { setFoldConfirm(false); setErr(''); }}>Cancel</button>
-              <button type="button" data-testid="switcher-merge-confirm" className="btn btn--primary" onClick={foldDraft}><Icon name="arrow-up-to-line" size={15} /> Merge → {sharedName}</button>
-            </div>
+        <div className="rb-scrim" role="presentation" onClick={() => { setFoldConfirm(false); setPrResult(null); setPrCopied(false); }}>
+          <div className="rb-sheet" role="dialog" aria-modal="true" aria-labelledby="rb-sheet-title" aria-describedby="rb-sheet-body" onClick={(e) => e.stopPropagation()} onKeyDown={(e) => { if (e.key === 'Escape') { setFoldConfirm(false); setPrResult(null); setPrCopied(false); } }}>
+            {prResult ? (
+              prResult.url ? (
+                <>
+                  <span className="rb-sheet-icon"><Icon name="share" size={20} /></span>
+                  <h2 className="rb-sheet-title" id="rb-sheet-title">Pull request opened{prResult.number ? ` #${prResult.number}` : ''}</h2>
+                  <p className="rb-sheet-body" id="rb-sheet-body">Your draft <b>“{branch}”</b> is up as a pull request into <b>{sharedName}</b>{prResult.repo ? <> of <b>{prResult.repo}</b></> : null}. Review and merge it on GitHub — that keeps your team's review rules.</p>
+                  <p className="rb-sheet-meta rb-pr-url">{prResult.url}</p>
+                  <div className="rb-sheet-actions">
+                    <button type="button" className="btn btn--ghost" onClick={() => { setFoldConfirm(false); setPrResult(null); setPrCopied(false); }}>Close</button>
+                    <button type="button" className="btn btn--primary" data-testid="switcher-pr-link" onClick={() => reviewPr(prResult.url)}><Icon name="share" size={15} /> {prCopied ? 'Link copied — paste in your browser' : 'Review on GitHub'}</button>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <span className="rb-sheet-icon"><Icon name="share" size={20} /></span>
+                  <h2 className="rb-sheet-title" id="rb-sheet-title">Draft published</h2>
+                  <p className="rb-sheet-body" id="rb-sheet-body">{prResult.message}</p>
+                  <div className="rb-sheet-actions">
+                    <button type="button" data-testid="switcher-pr-dismiss" className="btn btn--primary" onClick={() => { setFoldConfirm(false); setPrResult(null); setPrCopied(false); }}>Got it</button>
+                  </div>
+                </>
+              )
+            ) : (
+              <>
+                <span className="rb-sheet-icon"><Icon name="arrow-up-to-line" size={20} /></span>
+                <h2 className="rb-sheet-title" id="rb-sheet-title">Add this branch to {sharedName}</h2>
+                <p className="rb-sheet-body" id="rb-sheet-body">Propose everything in <b>“{currentDraft?.name || branch}”</b> to <b>{sharedName}</b> — the default branch everyone shares.</p>
+                <p className="rb-sheet-meta">On a shared GitHub project this opens a pull request for review; a local project merges directly. Nothing is lost — your work is kept in History.</p>
+                {err && <p className="rb-newdraft-err">{err}</p>}
+                <div className="rb-sheet-actions">
+                  <button type="button" className="btn btn--ghost" onClick={() => { setFoldConfirm(false); setErr(''); }}>Cancel</button>
+                  <button type="button" data-testid="switcher-merge-confirm" className="btn btn--primary" disabled={!!folding} onClick={foldDraft}><Icon name="arrow-up-to-line" size={15} /> {folding ? 'Adding…' : `Add to ${sharedName}`}</button>
+                </div>
+              </>
+            )}
           </div>
         </div>
       )}

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

@@ -0,0 +1,160 @@
+// StickerPicker.jsx — feature-whiteboard-annotation-improvements, Phase 4.
+//
+// Searchable, pack-grouped picker for MAUDE's bundled whiteboard sticker packs
+// (GET /_api/stickers — main-origin only, DDR-054/DDR-088; mirrors AssetPicker's
+// shell/scrim treatment in app.jsx). Triggered from the canvas-side tool
+// palette's Stickers button via `postMessage({dgn:'open-sticker-picker'})`;
+// `onPick(sticker)` hands the caller `{ file, keywords, url }` — app.jsx
+// re-uploads the picked PNG's bytes through the existing /_api/asset lane
+// (content-addressed, canvas-origin-allowlisted) and relays the resulting
+// project path down to the canvas, exactly like the replace-annotation-media
+// flow already does for AssetPicker.
+
+import { useEffect, useMemo, useState } from 'react';
+
+function StIcon({ name, size = 15 }) {
+  if (name === 'x') {
+    return (
+      <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+        <path
+          d="M4 4l8 8M12 4l-8 8"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+        />
+      </svg>
+    );
+  }
+  return null;
+}
+
+export default function StickerPicker({ onPick, onClose }) {
+  const [packs, setPacks] = useState(null); // null = loading
+  const [query, setQuery] = useState('');
+
+  useEffect(() => {
+    let alive = true;
+    fetch('/_api/stickers')
+      .then((r) => r.json())
+      .then((j) => alive && setPacks(j.ok ? j.packs : []))
+      .catch(() => alive && setPacks([]));
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => window.removeEventListener('keydown', onKey, true);
+  }, [onClose]);
+
+  const filteredPacks = useMemo(() => {
+    if (!packs) return [];
+    const q = query.trim().toLowerCase();
+    if (!q) return packs;
+    return packs
+      .map((pack) => ({
+        ...pack,
+        stickers: pack.stickers.filter(
+          (s) =>
+            s.file.toLowerCase().includes(q) ||
+            (s.keywords || []).some((k) => k.toLowerCase().includes(q))
+        ),
+      }))
+      .filter((pack) => pack.stickers.length > 0);
+  }, [packs, query]);
+
+  const totalShown = filteredPacks.reduce((n, p) => n + p.stickers.length, 0);
+
+  return (
+    <div
+      className="st-scrim"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        className="st-dialog st-sticker-picker"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Stickers"
+      >
+        <div className="st-dialog-hd">
+          <span className="st-dialog-title">Stickers</span>
+          <button type="button" className="st-iconbtn" aria-label="Close" onClick={onClose}>
+            <StIcon name="x" size={15} />
+          </button>
+        </div>
+        <div className="st-dialog-bd">
+          <input
+            className="input"
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search stickers…"
+            aria-label="Search stickers"
+            autoFocus
+          />
+          <div className="st-sp-body">
+            {packs == null ? (
+              <div className="st-sp-empty">Loading…</div>
+            ) : totalShown === 0 ? (
+              <div className="st-sp-empty">
+                {query.trim() ? `No stickers match "${query.trim()}"` : 'No stickers bundled'}
+              </div>
+            ) : (
+              filteredPacks.map((pack) => (
+                <div key={pack.slug}>
+                  <div className="st-sp-pack-hd">
+                    <span className="st-sp-pack-name">{pack.name}</span>
+                    {pack.author && <span className="st-sp-pack-author">by {pack.author}</span>}
+                  </div>
+                  <div className="st-sp-grid">
+                    {pack.stickers.map((s) => (
+                      <button
+                        type="button"
+                        key={s.file}
+                        className="st-sp-cell"
+                        title={s.keywords?.[0] || s.file}
+                        onClick={() => onPick(s)}
+                      >
+                        <img className="st-sp-thumb" src={s.url} alt={s.keywords?.[0] || s.file} loading="lazy" />
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+        {packs && packs.length > 0 && (
+          <div className="st-sp-ft">
+            {packs.map((pack) => (
+              <span key={pack.slug}>
+                {pack.name}
+                {pack.author ? ` — ${pack.author}` : ''}
+                {pack.attributionUrl ? (
+                  <>
+                    {' '}
+                    (
+                    <a href={pack.attributionUrl} target="_blank" rel="noreferrer">
+                      source
+                    </a>
+                    )
+                  </>
+                ) : null}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -112,7 +112,7 @@ export default function TimelinePanel({
   total = 0,
   frame = 0,
   playing = false,
-  loop = true,
+  loop = false,
   onSeek,
   onPlay,
   onPause,
@@ -145,6 +145,17 @@ export default function TimelinePanel({
   const clamped = clamp(Math.round(frame), 0, totalFrames - 1);
   const trackRef = useRef(null);
   const draggingRef = useRef(false);
+  const rootRef = useRef(null);
+  // Focus the dock the moment it opens. The transport shortcuts (Space play,
+  // arrow frame-step) live on the SHELL window, so they only fire when focus is
+  // in the shell — but opening the Timeline via ⌘⇧T while focus sat in the
+  // canvas iframe (the common case after any text/element interaction) used to
+  // leave focus stuck in the iframe, so Space/arrows silently did nothing.
+  // Pulling focus here on mount (mount === open, the panel is conditionally
+  // rendered) hands the transport keys a shell focus target immediately.
+  useEffect(() => {
+    rootRef.current?.focus();
+  }, []);
   // Drag-to-retime a sequence's duration: { index, startX, startDur, rowW, curDur }.
   const [retimeDrag, setRetimeDrag] = useState(null);
   // Drag the block body to move a clip's `from`: { index, startX, startFrom, rowW, curFrom }.
@@ -337,8 +348,10 @@ export default function TimelinePanel({
 
   return (
     <aside
+      ref={rootRef}
+      tabIndex={-1}
       className={`tl-panel${resizing ? ' is-resizing' : ''}${dropActive ? ' is-drop' : ''}`}
-      style={height ? { height } : undefined}
+      style={{ ...(height ? { height } : {}), outline: 'none' }}
       onDragOver={(e) => {
         if (!onDropMedia || !hasFiles(e.dataTransfer)) return;
         e.preventDefault();