@agent-native/core 0.92.11 → 0.93.0

package/corpus/templates/clips/app/components/layout/Header.tsx

@@ -8,6 +8,7 @@ import { useLocation } from "react-router";
 const pageTitleKeys: Record<string, string> = {
   "/": "navigation.library",
   "/library": "navigation.library",
+  "/shared": "navigation.sharedWithMe",
   "/spaces": "navigation.spaces",
   "/archive": "navigation.archive",
   "/trash": "navigation.trash",

package/corpus/templates/clips/app/components/library/empty-state.tsx

@@ -13,6 +13,7 @@ import { Button } from "@/components/ui/button";
 
 type EmptyKind =
   | "library"
+  | "shared"
   | "folder"
   | "space"
   | "archive"
@@ -21,6 +22,7 @@ type EmptyKind =
 
 const ICONS: Record<EmptyKind, React.ComponentType<{ className?: string }>> = {
   library: IconVideo,
+  shared: IconUsersGroup,
   folder: IconFolder,
   space: IconUsersGroup,
   archive: IconArchive,

package/corpus/templates/clips/app/components/library/library-grid.tsx

@@ -25,14 +25,15 @@ import { EmptyState } from "./empty-state";
 import { FilterChips, type FilterChip } from "./filter-chips";
 import { PageHeader } from "./page-header";
 import { RecordingCard } from "./recording-card";
+import { SearchBar } from "./search-bar";
 import { SortMenu, type SortKey } from "./sort-menu";
 
 interface LibraryGridProps {
-  view: "library" | "space" | "archive" | "trash" | "all";
+  view: "library" | "shared" | "space" | "archive" | "trash" | "all";
   folderId?: string | null;
   spaceId?: string | null;
   /** What empty-state illustration to render. Defaults from `view`. */
-  emptyKind?: "library" | "folder" | "space" | "archive" | "trash";
+  emptyKind?: "library" | "shared" | "folder" | "space" | "archive" | "trash";
   title?: string;
   tagFilter?: string | null;
   onClearTag?: () => void;
@@ -122,6 +123,7 @@ export function LibraryGrid({
   const archiveRecording = useArchiveRecording();
   const restoreRecording = useRestoreRecording();
   const moveRecording = useMoveRecording();
+  const canManageRecordings = view !== "shared";
   const canMoveSelection = view === "library" || view === "space";
   const { data: scopedFolders } = useFolders(
     {
@@ -240,11 +242,13 @@ export function LibraryGrid({
       ? "archive"
       : view === "trash"
         ? "trash"
-        : view === "space"
-          ? "space"
-          : folderId
-            ? "folder"
-            : "library");
+        : view === "shared"
+          ? "shared"
+          : view === "space"
+            ? "space"
+            : folderId
+              ? "folder"
+              : "library");
 
   return (
     <div className="flex flex-1 flex-col min-h-0">
@@ -263,14 +267,18 @@ export function LibraryGrid({
 
       {/* Page header — rendered into the top app bar */}
       <PageHeader>
-        <div className="min-w-0 flex-1">
+        <div className="min-w-0 shrink-0">
           {title && (
             <h1 className="text-base font-semibold text-foreground truncate">
               {title}
             </h1>
           )}
         </div>
-        <div className="ml-auto flex shrink-0 items-center gap-2">
+        <SearchBar
+          side="bottom"
+          className="hidden min-w-52 max-w-xl flex-1 md:block"
+        />
+        <div className="ms-auto flex shrink-0 items-center gap-2">
           {extraActions}
           <SortMenu value={sort} onChange={setSort} />
         </div>
@@ -322,41 +330,60 @@ export function LibraryGrid({
                 <RecordingCard
                   key={r.id}
                   recording={r}
-                  selected={selected.has(r.id)}
-                  selectionMode={selectionMode}
-                  onToggleSelect={toggleSelect}
-                  onShare={(rec) => setSharingRec(rec)}
+                  selected={
+                    canManageRecordings ? selected.has(r.id) : undefined
+                  }
+                  selectionMode={canManageRecordings && selectionMode}
+                  onToggleSelect={
+                    canManageRecordings ? toggleSelect : undefined
+                  }
+                  onShare={
+                    canManageRecordings
+                      ? (rec) => setSharingRec(rec)
+                      : undefined
+                  }
                   moveTargets={moveTargets}
                   onMove={canMoveSelection ? moveSingle : undefined}
                   isMovePending={moveRecording.isPending}
-                  onTrash={(rec) => {
-                    trashRecording.mutate(
-                      { id: rec.id },
-                      {
-                        onSuccess: () =>
-                          toast.success(t("libraryGrid.movedToTrash")),
-                      },
-                    );
-                  }}
-                  onArchive={(rec) => {
-                    if (rec.archivedAt) {
-                      restoreRecording.mutate(
-                        { id: rec.id },
-                        {
-                          onSuccess: () =>
-                            toast.success(t("libraryGrid.restoredFromArchive")),
-                        },
-                      );
-                    } else {
-                      archiveRecording.mutate(
-                        { id: rec.id },
-                        {
-                          onSuccess: () =>
-                            toast.success(t("libraryGrid.archived")),
-                        },
-                      );
-                    }
-                  }}
+                  onTrash={
+                    canManageRecordings
+                      ? (rec) => {
+                          trashRecording.mutate(
+                            { id: rec.id },
+                            {
+                              onSuccess: () =>
+                                toast.success(t("libraryGrid.movedToTrash")),
+                            },
+                          );
+                        }
+                      : undefined
+                  }
+                  onArchive={
+                    canManageRecordings
+                      ? (rec) => {
+                          if (rec.archivedAt) {
+                            restoreRecording.mutate(
+                              { id: rec.id },
+                              {
+                                onSuccess: () =>
+                                  toast.success(
+                                    t("libraryGrid.restoredFromArchive"),
+                                  ),
+                              },
+                            );
+                          } else {
+                            archiveRecording.mutate(
+                              { id: rec.id },
+                              {
+                                onSuccess: () =>
+                                  toast.success(t("libraryGrid.archived")),
+                              },
+                            );
+                          }
+                        }
+                      : undefined
+                  }
+                  readOnly={!canManageRecordings}
                 />
               ))}
             </div>
@@ -364,7 +391,7 @@ export function LibraryGrid({
         </div>
 
         {/* Sticky bulk-action toolbar */}
-        {selected.size > 0 && (
+        {canManageRecordings && selected.size > 0 && (
           <div className="pointer-events-none sticky bottom-0 flex justify-center pb-4">
             <div className="pointer-events-auto">
               <BulkActionToolbar

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -28,6 +28,7 @@ import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
   IconPlus,
+  IconShare,
   IconSettings,
 } from "@tabler/icons-react";
 import { ReactNode, useEffect, useMemo, useState } from "react";
@@ -132,6 +133,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
   // Clip count for the "Library" nav item — count-only, no row payload or
   // title polling across the app shell.
   const { data: libraryCount } = useRecordingsCount({ view: "library" });
+  const { data: sharedCount } = useRecordingsCount({ view: "shared" });
 
   const libFolderList: FolderNode[] = useMemo(
     () =>
@@ -158,6 +160,11 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
   const pageOwnsToolbar =
     location.pathname === "/extensions" ||
     location.pathname.startsWith("/extensions/");
+  const pageHasHeaderSearch =
+    location.pathname.startsWith("/library") ||
+    location.pathname === "/shared" ||
+    location.pathname === "/archive" ||
+    /^\/spaces\/[^/]+/.test(location.pathname);
 
   useEffect(() => {
     setSidebarOpen(false);
@@ -193,6 +200,13 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
       match: (p) => p.startsWith("/library"),
       count: libraryCount,
     },
+    {
+      to: "/shared",
+      label: t("navigation.sharedWithMe"),
+      icon: IconShare,
+      match: (p) => p === "/shared",
+      count: sharedCount,
+    },
     {
       to: "/spaces",
       label: t("navigation.spaces"),
@@ -505,7 +519,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                   {t("navigation.desktopCta")}
                 </CaptureInstallInlineLink>
               )}
-              <SearchBar />
+              {(isMobile || !pageHasHeaderSearch) && <SearchBar />}
             </div>
 
             <div className="shrink-0 px-1 py-1">

package/corpus/templates/clips/app/components/library/recording-card.tsx

@@ -69,6 +69,7 @@ interface RecordingCardProps {
   isMovePending?: boolean;
   onArchive?: (rec: RecordingSummary) => void;
   onTrash?: (rec: RecordingSummary) => void;
+  readOnly?: boolean;
 }
 
 export function RecordingCard({
@@ -82,6 +83,7 @@ export function RecordingCard({
   isMovePending = false,
   onArchive,
   onTrash,
+  readOnly = false,
 }: RecordingCardProps) {
   const navigate = useNavigate();
   const t = useT();
@@ -118,6 +120,9 @@ export function RecordingCard({
       recording.failureReason ?? "",
     );
   const canMove = Boolean(onMove && moveTargets.length > 0);
+  const canSelect = Boolean(onToggleSelect) && !readOnly;
+  const showActions =
+    !readOnly && Boolean(onShare || onMove || onArchive || onTrash);
   const hasDefaultTitle = isDefaultTitle(recording.title);
   const displayTitle = hasDefaultTitle
     ? t("editableTitle.untitled")
@@ -221,7 +226,7 @@ export function RecordingCard({
         </div>
 
         {/* Selection checkbox */}
-        {(selectionMode || hovered || selected) && (
+        {canSelect && (selectionMode || hovered || selected) && (
           <div
             onClick={handleCheckbox}
             className="absolute top-2 start-2 flex h-5 w-5 items-center justify-center rounded bg-background/90 border border-border"
@@ -276,7 +281,7 @@ export function RecordingCard({
                       : failureReason}
                 </div>
               </div>
-              {!waitingForStorage && (
+              {!waitingForStorage && onTrash && (
                 <button
                   type="button"
                   onClick={handleRemoveFailed}
@@ -311,7 +316,7 @@ export function RecordingCard({
               />
               <span className="capitalize">{recording.visibility}</span>
               <span>•</span>
-              {recording.viewCount > 0 ? (
+              {recording.viewCount > 0 && !readOnly ? (
                 <ViewedByPopover
                   recordingId={recording.id}
                   className="underline-offset-2 hover:underline hover:text-foreground"
@@ -332,74 +337,82 @@ export function RecordingCard({
             </div>
           </div>
 
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
-              <button
-                className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
-                aria-label={t("clipsFinalRaw.recordingMenu")}
+          {showActions && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+                <button
+                  className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                  aria-label={t("clipsFinalRaw.recordingMenu")}
+                >
+                  <IconDots className="h-4 w-4" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                onClick={(e) => e.stopPropagation()}
               >
-                <IconDots className="h-4 w-4" />
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="end"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <DropdownMenuItem onSelect={() => onShare?.(recording)}>
-                <IconShare className="h-4 w-4 me-2" />{" "}
-                {t("recordingPage.share")}
-              </DropdownMenuItem>
-              {canMove ? (
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>
-                    <IconFolder className="h-4 w-4 me-2" />{" "}
-                    {t("clipsFinalRaw.moveToFolder")}
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent className="w-64">
-                    {moveTargets.map((target, index) => (
-                      <DropdownMenuItem
-                        key={target.id ?? `root-${index}`}
-                        disabled={target.disabled || isMovePending}
-                        onSelect={() => onMove?.(recording, target.id)}
-                      >
-                        <span
-                          className="truncate"
-                          style={{
-                            paddingInlineStart: (target.depth ?? 0) * 12,
-                          }}
+                {onShare && (
+                  <DropdownMenuItem onSelect={() => onShare(recording)}>
+                    <IconShare className="h-4 w-4 me-2" />{" "}
+                    {t("recordingPage.share")}
+                  </DropdownMenuItem>
+                )}
+                {canMove ? (
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                      <IconFolder className="h-4 w-4 me-2" />{" "}
+                      {t("clipsFinalRaw.moveToFolder")}
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuSubContent className="w-64">
+                      {moveTargets.map((target, index) => (
+                        <DropdownMenuItem
+                          key={target.id ?? `root-${index}`}
+                          disabled={target.disabled || isMovePending}
+                          onSelect={() => onMove?.(recording, target.id)}
                         >
-                          {target.name}
-                        </span>
-                        {target.disabled && (
-                          <span className="ms-auto text-xs text-muted-foreground">
-                            {t("clipsFinalRaw.current")}
+                          <span
+                            className="truncate"
+                            style={{
+                              paddingInlineStart: (target.depth ?? 0) * 12,
+                            }}
+                          >
+                            {target.name}
                           </span>
-                        )}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-              ) : null}
-              <DropdownMenuSeparator />
-              {recording.archivedAt ? (
-                <DropdownMenuItem onSelect={() => onArchive?.(recording)}>
-                  <IconCheck className="h-4 w-4 me-2" />{" "}
-                  {t("clipsFinalRaw.unarchive")}
-                </DropdownMenuItem>
-              ) : (
-                <DropdownMenuItem onSelect={() => onArchive?.(recording)}>
-                  <IconArchive className="h-4 w-4 me-2" />{" "}
-                  {t("navigation.archive")}
-                </DropdownMenuItem>
-              )}
-              <DropdownMenuItem
-                onSelect={() => onTrash?.(recording)}
-                className="text-destructive focus:text-destructive"
-              >
-                <IconTrash className="h-4 w-4 me-2" /> {t("folderTree.delete")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+                          {target.disabled && (
+                            <span className="ms-auto text-xs text-muted-foreground">
+                              {t("clipsFinalRaw.current")}
+                            </span>
+                          )}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+                ) : null}
+                {(onArchive || onTrash) && <DropdownMenuSeparator />}
+                {onArchive &&
+                  (recording.archivedAt ? (
+                    <DropdownMenuItem onSelect={() => onArchive(recording)}>
+                      <IconCheck className="h-4 w-4 me-2" />{" "}
+                      {t("clipsFinalRaw.unarchive")}
+                    </DropdownMenuItem>
+                  ) : (
+                    <DropdownMenuItem onSelect={() => onArchive(recording)}>
+                      <IconArchive className="h-4 w-4 me-2" />{" "}
+                      {t("navigation.archive")}
+                    </DropdownMenuItem>
+                  ))}
+                {onTrash && (
+                  <DropdownMenuItem
+                    onSelect={() => onTrash(recording)}
+                    className="text-destructive focus:text-destructive"
+                  >
+                    <IconTrash className="h-4 w-4 me-2" />{" "}
+                    {t("folderTree.delete")}
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
         </div>
 
         <div className="flex items-center gap-2">

package/corpus/templates/clips/app/components/library/search-bar.tsx

@@ -43,6 +43,7 @@ function highlight(
 
 interface SearchBarProps {
   className?: string;
+  side?: "top" | "right" | "bottom" | "left";
 }
 
 function matchLabel(hit: SearchHit, t: ReturnType<typeof useT>): string {
@@ -60,7 +61,7 @@ function matchLabel(hit: SearchHit, t: ReturnType<typeof useT>): string {
   }
 }
 
-export function SearchBar({ className }: SearchBarProps) {
+export function SearchBar({ className, side = "right" }: SearchBarProps) {
   const t = useT();
   const navigate = useNavigate();
   const [query, setQuery] = useState("");
@@ -154,9 +155,9 @@ export function SearchBar({ className }: SearchBarProps) {
 
         <PopoverContent
           align="start"
-          side="right"
+          side={side}
           sideOffset={8}
-          className="w-[420px] p-0 overflow-hidden"
+          className="w-[min(420px,calc(100vw-2rem))] p-0 overflow-hidden"
           onOpenAutoFocus={(e) => e.preventDefault()}
         >
           {isFetching && results.length === 0 && (

package/corpus/templates/clips/app/components/player/delete-recording-menu.tsx

@@ -48,6 +48,7 @@ export function RecordingOptionsMenu({
 }: RecordingOptionsMenuProps) {
   const t = useT();
   const [open, setOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
   const showDownload = canDownload && Boolean(onDownload);
   const showDelete = canDelete;
   const trashRecording = useActionMutation<any, { id: string }>(
@@ -68,6 +69,11 @@ export function RecordingOptionsMenu({
     trashRecording.mutate({ id: recordingId });
   }, [recordingId, trashRecording]);
 
+  const handleDownload = useCallback(() => {
+    setMenuOpen(false);
+    onDownload?.();
+  }, [onDownload]);
+
   if (!showDownload && !showDelete) return null;
 
   return (
@@ -77,7 +83,7 @@ export function RecordingOptionsMenu({
         if (!trashRecording.isPending) setOpen(nextOpen);
       }}
     >
-      <DropdownMenu>
+      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
@@ -91,13 +97,13 @@ export function RecordingOptionsMenu({
         <DropdownMenuContent align="end" className="w-44">
           {showDownload ? (
             <DropdownMenuItem
-              onSelect={() => onDownload?.()}
+              onSelect={handleDownload}
               disabled={downloadPending}
             >
               <IconDownload className="me-2 h-4 w-4" />
               {downloadPending
                 ? (downloadingLabel ?? t("sharePage.downloading"))
-                : (downloadLabel ?? t("sharePage.downloadMp4"))}
+                : (downloadLabel ?? t("recordRoute.downloadRecording"))}
             </DropdownMenuItem>
           ) : null}
           {showDownload && showDelete ? <DropdownMenuSeparator /> : null}

package/corpus/templates/clips/app/components/player/share-dialog.tsx

@@ -498,7 +498,7 @@ function LinkTab({
                   {t("shareDialog.openPlayer")}
                 </>
               ) : (
-                t("shareDialog.downloadMp4")
+                t("recordRoute.downloadRecording")
               )}
             </Button>
           ) : null}

package/corpus/templates/clips/app/components/player/transcript-panel.tsx

@@ -305,14 +305,24 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
               const isActive = displaySegments[activeIndex] === seg;
               return (
                 <li key={seg.startMs}>
-                  <button
-                    onClick={() => onSeek(seg.startMs)}
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={(event) => {
+                      if (hasSelectionWithin(event.currentTarget)) return;
+                      onSeek(seg.startMs);
+                    }}
+                    onKeyDown={(event) => {
+                      if (event.key !== "Enter" && event.key !== " ") return;
+                      event.preventDefault();
+                      onSeek(seg.startMs);
+                    }}
                     className={cn(
-                      "w-full text-left px-3 py-2 flex gap-3 items-start hover:bg-accent/50",
+                      "flex w-full cursor-pointer items-start gap-3 px-3 py-2 text-left hover:bg-accent/50",
                       isActive && "bg-accent",
                     )}
                   >
-                    <span className="text-[11px] text-muted-foreground font-mono tabular-nums pt-0.5 shrink-0">
+                    <span className="shrink-0 pt-0.5 font-mono text-[11px] tabular-nums text-muted-foreground">
                       {msToClock(seg.startMs)}
                     </span>
                     <span
@@ -324,7 +334,7 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
                         __html: highlight(seg.text, query),
                       }}
                     />
-                  </button>
+                  </div>
                 </li>
               );
             })}
@@ -335,6 +345,18 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
   );
 }
 
+function hasSelectionWithin(element: HTMLElement): boolean {
+  const selection = window.getSelection();
+  if (!selection || selection.isCollapsed || !selection.toString().trim()) {
+    return false;
+  }
+  const { anchorNode, focusNode } = selection;
+  return Boolean(
+    (anchorNode && element.contains(anchorNode)) ||
+    (focusNode && element.contains(focusNode)),
+  );
+}
+
 function highlight(text: string, q: string): string {
   const escaped = text.replace(/[&<>]/g, (c) =>
     c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&gt;",

package/corpus/templates/clips/app/hooks/use-library.ts

@@ -34,7 +34,7 @@ export interface RecordingSummary {
 }
 
 export interface ListRecordingsArgs {
-  view?: "library" | "space" | "archive" | "trash" | "all";
+  view?: "library" | "shared" | "space" | "archive" | "trash" | "all";
   folderId?: string | null;
   spaceId?: string | null;
   tag?: string | null;

package/corpus/templates/clips/app/hooks/use-navigation-state.ts

@@ -2,6 +2,7 @@ import { getBrowserTabId, useAgentRouteState } from "@agent-native/core/client";
 
 export type ClipsView =
   | "library"
+  | "shared"
   | "spaces"
   | "space"
   | "archive"
@@ -44,6 +45,7 @@ interface NavigateCommand extends Partial<NavigationState> {
  *   /library                    -> library
  *   /library?q=...              -> library (with search)
  *   /library/folder/:folderId   -> library (with folderId)
+ *   /shared                     -> shared
  *   /spaces                     -> spaces
  *   /spaces/:spaceId            -> space
  *   /archive                    -> archive
@@ -58,7 +60,10 @@ interface NavigateCommand extends Partial<NavigationState> {
  *   /notifications              -> notifications
  *   /settings[/*]               -> settings
  */
-function stateFromLocation(pathname: string, search: string): NavigationState {
+export function stateFromLocation(
+  pathname: string,
+  search: string,
+): NavigationState {
   const params = new URLSearchParams(search);
   const searchTerm = params.get("q") || undefined;
   const p = pathname.replace(/\/+$/, "") || "/";
@@ -117,6 +122,7 @@ function stateFromLocation(pathname: string, search: string): NavigationState {
   }
 
   if (p === "/spaces") return { view: "spaces" };
+  if (p === "/shared") return { view: "shared" };
   if (p === "/archive") return { view: "archive" };
   if (p === "/trash") return { view: "trash" };
   if (p === "/record") return { view: "record" };
@@ -144,7 +150,7 @@ function stateFromLocation(pathname: string, search: string): NavigationState {
  * Turn a navigate-command payload (from the agent) into a URL path.
  * If the command includes `path`, prefer that — otherwise map view+ids.
  */
-function pathFromCommand(cmd: NavigateCommand): string {
+export function pathFromCommand(cmd: NavigateCommand): string {
   if (cmd.path) return cmd.path;
   switch (cmd.view) {
     case "recording":
@@ -159,6 +165,8 @@ function pathFromCommand(cmd: NavigateCommand): string {
       return cmd.spaceId ? `/spaces/${cmd.spaceId}` : "/spaces";
     case "spaces":
       return "/spaces";
+    case "shared":
+      return "/shared";
     case "archive":
       return "/archive";
     case "trash":

package/corpus/templates/clips/app/hooks/use-player-shortcuts.ts

@@ -40,6 +40,7 @@ export function usePlayerShortcuts(opts: UsePlayerShortcutsOpts) {
     if (!enabled) return;
 
     function onKey(e: KeyboardEvent) {
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
       if (shouldIgnore(e.target)) return;
       const player = playerRef.current;
       if (!player) return;