From c819acc62ed562954f01822d2d8b2ce1d66094ae Mon Sep 17 00:00:00 2001
From: YaelAnaya <yael.anaya@uabc.edu.mx>
Date: Mon, 24 Aug 2026 01:48:38 -0700
Subject: [PATCH 1/5] refactor(annotator): the annotation workspace draws
 Tabler

The primitives and the screens converged on `@tabler/icons-react` in earlier
phases, which left the annotator as the one place `lucide-react` still drew:
eleven modules, sixty-one call sites, thirty-one distinct glyphs. Every one of
them now imports the same set the rest of the frontend does.

The glyphs are chosen by what they mean here, not by which name matches. Most are
direct, and two deliberately are not. `GeometryIcon` documents that a polygon has
to read as a closed path and a lane as an open one, and the old set inverted that
by calling the polygon's glyph `Spline`; the polygon now takes `IconPolygon` and
the polyline `IconVectorSpline`, so the distinction survives the rename rather
than the spelling doing.

Sizes and accessible names are carried over untouched - `size-6` included, where
the compact geometry is a separate question from which set draws it. Two comments
claimed `DESIGN.md` pins three specific glyphs; it pins none, and they no longer
say so.
---
 .../ui-core/src/annotator/AddClassDialog.tsx  |  6 +-
 .../ui-core/src/annotator/AnnotationPage.tsx  | 74 +++++++++----------
 .../ui-core/src/annotator/AnnotatorPanel.tsx  | 14 ++--
 frontend/ui-core/src/annotator/AssetImage.tsx |  4 +-
 .../ui-core/src/annotator/CanvasReassign.tsx  |  4 +-
 .../ui-core/src/annotator/ClassRegion.tsx     |  6 +-
 .../ui-core/src/annotator/GeometryIcon.tsx    | 24 +++---
 .../ui-core/src/annotator/ReassignMenu.tsx    |  4 +-
 .../ui-core/src/annotator/SuggestPanel.tsx    | 30 +++++---
 .../ui-core/src/annotator/ToolPalette.tsx     | 29 ++++----
 frontend/ui-core/src/annotator/ZoomWidget.tsx | 10 +--
 11 files changed, 106 insertions(+), 99 deletions(-)

diff --git a/frontend/ui-core/src/annotator/AddClassDialog.tsx b/frontend/ui-core/src/annotator/AddClassDialog.tsx
index 934be458..e67e356e 100644
--- a/frontend/ui-core/src/annotator/AddClassDialog.tsx
+++ b/frontend/ui-core/src/annotator/AddClassDialog.tsx
@@ -85,7 +85,7 @@
  * where every other refusal here renders.
  */
 
-import { Plus, X } from "lucide-react";
+import { IconPlus, IconX } from "@tabler/icons-react";
 import { useEffect, useRef, useState, type JSX } from "react";
 
 import { asApiError } from "../data/errors";
@@ -634,7 +634,7 @@ export function AddClassDialog({
                       onBank?.(banked);
                     }}
                   >
-                    <X className="size-3" aria-hidden="true" />
+                    <IconX className="size-3" aria-hidden="true" />
                   </button>
                 </li>
               ))}
@@ -830,7 +830,7 @@ export function AddClassDialog({
                 disabled={pending || !readyForm}
                 onClick={addAnother}
               >
-                <Plus className="size-4" aria-hidden="true" />
+                <IconPlus className="size-4" aria-hidden="true" />
                 Create and add another
                 <kbd className="ml-1 rounded border border-border px-1 font-mono text-xs text-muted-foreground">
                   ⌘↵
diff --git a/frontend/ui-core/src/annotator/AnnotationPage.tsx b/frontend/ui-core/src/annotator/AnnotationPage.tsx
index 6289716a..7741847e 100644
--- a/frontend/ui-core/src/annotator/AnnotationPage.tsx
+++ b/frontend/ui-core/src/annotator/AnnotationPage.tsx
@@ -132,19 +132,20 @@ import {
 } from "@visionset/annotator";
 import { AnnotatorStore as Store } from "@visionset/annotator";
 import {
-  ArrowLeft,
-  Check,
-  CheckCheck,
-  ChevronLeft,
-  ChevronRight,
-  CircleHelp,
-  Grid3x3,
-  MonitorSmartphone,
-  MoreHorizontal,
-  SkipForward,
-  TriangleAlert,
-  Undo2,
-} from "lucide-react";
+  IconAlertTriangle,
+  IconArrowBackUp,
+  IconArrowLeft,
+  IconCheck,
+  IconChecks,
+  IconChevronLeft,
+  IconChevronRight,
+  IconDevices,
+  IconDots,
+  IconEye,
+  IconHelpCircle,
+  IconLayoutGrid,
+  IconPlayerSkipForward,
+} from "@tabler/icons-react";
 import {
   useCallback,
   useEffect,
@@ -182,7 +183,6 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "../primitives/Menu";
-import { Eye } from "lucide-react";
 import { AnnotatorPanel } from "./AnnotatorPanel";
 import { CanvasReassign } from "./CanvasReassign";
 import { EditorNotice, EditorNotices } from "./EditorNotice";
@@ -491,7 +491,7 @@ function TooNarrow({
   return (
     <div className="flex h-full items-center justify-center p-6" data-testid="viewport-too-narrow">
       <EmptyState
-        icon={<MonitorSmartphone className="size-8" />}
+        icon={<IconDevices className="size-8" />}
         title="This screen is too narrow to annotate on"
         description={`Annotating is precision work on a large surface: the editor needs at least ${ANNOTATOR_MIN_VIEWPORT_PX}px of width for the canvas, the tools and the object list to coexist. Rotate to landscape, widen the window, or open this job on a larger screen.`}
         {...(onOpenGallery === undefined || destination === undefined
@@ -503,7 +503,7 @@ function TooNarrow({
                   data-testid="too-narrow-gallery"
                   onClick={() => onOpenGallery(destination.project_id, destination.id)}
                 >
-                  <Grid3x3 className="size-4" aria-hidden="true" />
+                  <IconLayoutGrid className="size-4" aria-hidden="true" />
                   Back to the batch
                 </Button>
               ),
@@ -1926,7 +1926,7 @@ function Workspace({
             onClick={() => attempt(onOpenGallery)}
             disabled={onOpenGallery === undefined}
           >
-            <ArrowLeft className="size-4" />
+            <IconArrowLeft className="size-4" />
           </Button>
 
           {/* The batch's pin, not the project's active version. Named here because
@@ -2038,7 +2038,7 @@ function Workspace({
               data-testid="open-gallery"
               onClick={() => setGalleryOpen(true)}
             >
-              <Grid3x3 className="size-4" />
+              <IconLayoutGrid className="size-4" />
             </Button>
 
             <Button
@@ -2049,7 +2049,7 @@ function Workspace({
               disabled={assetIndex === 0}
               onClick={() => go(-1)}
             >
-              <ChevronLeft className="size-4" />
+              <IconChevronLeft className="size-4" />
             </Button>
             {/*
               `tabular-nums` is the whole reason this is a separate span rather
@@ -2072,7 +2072,7 @@ function Workspace({
               disabled={assetIndex >= assetCount - 1}
               onClick={() => go(1)}
             >
-              <ChevronRight className="size-4" />
+              <IconChevronRight className="size-4" />
             </Button>
           </div>
 
@@ -2117,7 +2117,7 @@ function Workspace({
                 disabled={!declares(asset, ASSET_ACTION.restore) || setProgress.isPending}
                 onClick={unskip}
               >
-                <Undo2 className="size-4" />
+                <IconArrowBackUp className="size-4" />
                 Un-skip
               </Button>
             ) : (
@@ -2129,7 +2129,7 @@ function Workspace({
                 disabled={!declares(asset, ASSET_ACTION.skip) || setProgress.isPending}
                 onClick={() => settle("skipped")}
               >
-                <SkipForward className="size-4" />
+                <IconPlayerSkipForward className="size-4" />
                 Skip
                 <Chip>X</Chip>
               </Button>
@@ -2222,7 +2222,7 @@ function Workspace({
                       });
                     }}
                   >
-                    <CheckCheck className="size-4" />
+                    <IconChecks className="size-4" />
                     {jobState === "completed" ? "Finished" : "Finish job"}
                   </Button>
                 </TooltipTrigger>
@@ -2290,7 +2290,7 @@ function Workspace({
                 onClick={() => go(1)}
               >
                 {flowLabel}
-                <ChevronRight className="size-4" />
+                <IconChevronRight className="size-4" />
               </Button>
             )}
 
@@ -2337,7 +2337,7 @@ function Workspace({
                     disabled={readOnly || !dirty || save.isPending}
                     onClick={() => attempt()}
                   >
-                    <Check className="size-4" />
+                    <IconCheck className="size-4" />
                     Save and stay
                   </Button>
                 </TooltipTrigger>
@@ -2394,7 +2394,7 @@ function Workspace({
                   disabled={setProgress.isPending}
                   onClick={() => settle(reviewAction.progress)}
                 >
-                  <CheckCheck className="size-4" />
+                  <IconChecks className="size-4" />
                   {reviewAction.label}
                 </Button>
               </TooltipTrigger>
@@ -2427,7 +2427,7 @@ function Workspace({
                 aria-label="More actions"
                 data-testid="more-actions"
               >
-                <MoreHorizontal className="size-4" />
+                <IconDots className="size-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
@@ -2444,7 +2444,7 @@ function Workspace({
                   disabled={readOnly || !dirty || save.isPending}
                   onSelect={() => attempt()}
                 >
-                  <Check className="size-4" />
+                  <IconCheck className="size-4" />
                   Save and stay
                 </DropdownMenuItem>
               )}
@@ -2456,7 +2456,7 @@ function Workspace({
                   disabled={setProgress.isPending}
                   onSelect={() => settle(reviewAction.progress)}
                 >
-                  <CheckCheck className="size-4" />
+                  <IconChecks className="size-4" />
                   {reviewAction.label}
                 </DropdownMenuItem>
               )}
@@ -2472,7 +2472,7 @@ function Workspace({
                     data-testid="return-to-annotator"
                     onSelect={() => settle("annotated")}
                   >
-                    <Undo2 className="size-4" />
+                    <IconArrowBackUp className="size-4" />
                     Return to annotator
                   </DropdownMenuItem>
                   {/* Inside the conditional, not above the row below it: the two
@@ -2483,7 +2483,7 @@ function Workspace({
                 </>
               )}
               <DropdownMenuItem data-testid="menu-shortcuts" onSelect={() => setHelpOpen(true)}>
-                <CircleHelp className="size-4" />
+                <IconHelpCircle className="size-4" />
                 Keyboard shortcuts
               </DropdownMenuItem>
             </DropdownMenuContent>
@@ -2510,7 +2510,7 @@ function Workspace({
           className="flex shrink-0 items-center gap-2 border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground"
           data-testid="readonly-banner"
         >
-          <Eye className="size-3.5 shrink-0" aria-hidden="true" />
+          <IconEye className="size-3.5 shrink-0" aria-hidden="true" />
           <span className="font-medium">Viewing only.</span>
           {workflowBecause ?? settledBecause}
           {/*
@@ -2553,7 +2553,7 @@ function Workspace({
           className="flex shrink-0 items-center gap-2 border-b border-destructive/30 bg-destructive/5 px-3 py-1.5 text-xs text-destructive"
           data-testid="skipped-notice"
         >
-          <SkipForward className="size-3.5 shrink-0" aria-hidden="true" />
+          <IconPlayerSkipForward className="size-3.5 shrink-0" aria-hidden="true" />
           This asset is skipped, so it will not reach the dataset and its annotations will not
           count towards the job. Un-skip it to put it back in play.
         </p>
@@ -2717,7 +2717,7 @@ function Workspace({
               <EditorNotice
                 testId="opening-refusal"
                 tone="warn"
-                icon={<TriangleAlert className="size-4" />}
+                icon={<IconAlertTriangle className="size-4" />}
                 title={asApiError(openingRefusal).code}
               >
                 {refusalProse(openingRefusal)}
@@ -2736,7 +2736,7 @@ function Workspace({
               <EditorNotice
                 testId="save-refusal"
                 tone="warn"
-                icon={<TriangleAlert className="size-4" />}
+                icon={<IconAlertTriangle className="size-4" />}
                 title={asApiError(save.error).code}
               >
                 <p className="font-medium text-foreground">This frame could not be saved</p>
@@ -2766,7 +2766,7 @@ function Workspace({
               <EditorNotice
                 testId="action-refusal"
                 tone="warn"
-                icon={<TriangleAlert className="size-4" />}
+                icon={<IconAlertTriangle className="size-4" />}
                 title={asApiError(actionRefusal).code}
               >
                 {refusalProse(actionRefusal)}
@@ -3201,7 +3201,7 @@ function SaveState({
     // so the exception is retired rather than inherited. The tick still
     // carries the meaning on its own — state is never colour alone.
     <span className="flex items-center gap-1 text-xs text-success" data-testid="save-state">
-      <Check className="size-3.5" aria-hidden="true" />
+      <IconCheck className="size-3.5" aria-hidden="true" />
       Saved
     </span>
   );
diff --git a/frontend/ui-core/src/annotator/AnnotatorPanel.tsx b/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
index 98b95a9a..a5ad3488 100644
--- a/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
+++ b/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
@@ -82,7 +82,7 @@ import {
   type LabelClass,
   type Tool,
 } from "@visionset/annotator";
-import { Check, Eye, EyeOff, Sparkles, Tag, Trash2 } from "lucide-react";
+import { IconCheck, IconEye, IconEyeOff, IconSparkles, IconTag, IconTrash } from "@tabler/icons-react";
 import { useEffect, useRef, useState, type JSX, type RefObject } from "react";
 
 import { geometryLabel } from "../data/geometryCategory";
@@ -285,7 +285,7 @@ export function AnnotatorPanel({
             disabled={drawn.length === 0}
             onClick={() => onHiddenChange(allHidden ? new Set() : new Set(drawn.map((o) => o.id)))}
           >
-            {allHidden ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+            {allHidden ? <IconEyeOff className="size-4" /> : <IconEye className="size-4" />}
           </Button>
         </div>
       </div>
@@ -429,7 +429,7 @@ function TagRegion({
                 />
                 <span className="truncate">{declared.name}</span>
                 {on ? (
-                  <Check className="size-3 text-primary" aria-hidden="true" />
+                  <IconCheck className="size-3 text-primary" aria-hidden="true" />
                 ) : (
                   <kbd className="rounded-sm border border-border px-1 font-mono text-xs">
                     {hotkeyForClass(schema, declared.name) ?? "—"}
@@ -488,7 +488,7 @@ function ModelMark({
           aria-label={`Model-produced by ${annotation.model_ref ?? "an unnamed model"}`}
           className="flex shrink-0 items-center text-xs text-muted-foreground"
         >
-          <Sparkles className="size-3" aria-hidden="true" />
+          <IconSparkles className="size-3" aria-hidden="true" />
         </span>
       </TooltipTrigger>
       {/* The full reference, which is far too long for the row and is exactly
@@ -593,7 +593,7 @@ function ObjectRow({
         data-testid={`object-visibility-${index}`}
         onClick={onToggleVisible}
       >
-        {hidden ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
+        {hidden ? <IconEyeOff className="size-3.5" /> : <IconEye className="size-3.5" />}
       </Button>
       <Button
         variant="ghost"
@@ -604,7 +604,7 @@ function ObjectRow({
         onClick={onRemove}
         disabled={onRemove === undefined}
       >
-        <Trash2 className="size-3.5" />
+        <IconTrash className="size-3.5" />
       </Button>
     </li>
   );
@@ -643,7 +643,7 @@ function RowReassign({
           aria-label={`Reassign object ${index + 1}`}
           data-testid={`object-reclass-${index}`}
         >
-          <Tag className="size-3.5" />
+          <IconTag className="size-3.5" />
         </Button>
       </DropdownMenuTrigger>
       <ReassignMenu
diff --git a/frontend/ui-core/src/annotator/AssetImage.tsx b/frontend/ui-core/src/annotator/AssetImage.tsx
index 28dd4d5d..49c90a83 100644
--- a/frontend/ui-core/src/annotator/AssetImage.tsx
+++ b/frontend/ui-core/src/annotator/AssetImage.tsx
@@ -22,7 +22,7 @@
  * app-level blob cache would only pin the same bytes in JS memory a second time.
  */
 
-import { ImageOff } from "lucide-react";
+import { IconPhotoOff } from "@tabler/icons-react";
 import { useEffect, useState, type JSX, type ReactNode } from "react";
 
 import { useApiClient } from "../data/ApiProvider";
@@ -86,7 +86,7 @@ export function AssetImage({ projectId, assetId, children }: AssetImageProps): J
         data-testid="asset-image-error"
         className="flex size-full flex-col items-center justify-center gap-2 text-muted-foreground"
       >
-        <ImageOff className="size-6" aria-hidden="true" />
+        <IconPhotoOff className="size-6" aria-hidden="true" />
         <span className="text-xs">The asset&rsquo;s content could not be loaded.</span>
       </div>
     );
diff --git a/frontend/ui-core/src/annotator/CanvasReassign.tsx b/frontend/ui-core/src/annotator/CanvasReassign.tsx
index 3f5ec28a..0c337d21 100644
--- a/frontend/ui-core/src/annotator/CanvasReassign.tsx
+++ b/frontend/ui-core/src/annotator/CanvasReassign.tsx
@@ -54,7 +54,7 @@ import {
   useAnnotatorSnapshot,
 } from "@visionset/annotator";
 import type { AnnotatorStore, Geometry, Viewport } from "@visionset/annotator";
-import { Tag } from "lucide-react";
+import { IconTag } from "@tabler/icons-react";
 import type { JSX } from "react";
 
 import { Button } from "../primitives/Button";
@@ -126,7 +126,7 @@ export function CanvasReassign({
             aria-label={`Reassign the selected ${subject.label_class}`}
             data-testid="canvas-reclass"
           >
-            <Tag className="size-3.5" />
+            <IconTag className="size-3.5" />
           </Button>
         </DropdownMenuTrigger>
         <ReassignMenu
diff --git a/frontend/ui-core/src/annotator/ClassRegion.tsx b/frontend/ui-core/src/annotator/ClassRegion.tsx
index e80babf0..614001a6 100644
--- a/frontend/ui-core/src/annotator/ClassRegion.tsx
+++ b/frontend/ui-core/src/annotator/ClassRegion.tsx
@@ -58,7 +58,7 @@ import {
   type LabelClass,
   type Tool,
 } from "@visionset/annotator";
-import { Plus } from "lucide-react";
+import { IconPlus } from "@tabler/icons-react";
 import { useState, type JSX, type RefObject } from "react";
 
 import { formatGeometries, geometryLabel } from "../data/geometryCategory";
@@ -203,7 +203,7 @@ export function ClassRegion({
             disabled={onAddClass === undefined}
             onClick={() => onAddClass?.("")}
           >
-            <Plus className="size-4" />
+            <IconPlus className="size-4" />
           </Button>
         </div>
       </div>
@@ -268,7 +268,7 @@ export function ClassRegion({
               className="flex h-9 w-full shrink-0 items-center gap-2 border-t border-border px-3 text-left text-sm text-muted-foreground hover:bg-muted"
               onClick={() => onAddClass?.(creatable)}
             >
-              <Plus className="size-3.5 shrink-0" aria-hidden="true" />
+              <IconPlus className="size-3.5 shrink-0" aria-hidden="true" />
               <span className="truncate">Create class “{creatable}”</span>
             </button>
           )}
diff --git a/frontend/ui-core/src/annotator/GeometryIcon.tsx b/frontend/ui-core/src/annotator/GeometryIcon.tsx
index f3d095f2..e1858876 100644
--- a/frontend/ui-core/src/annotator/GeometryIcon.tsx
+++ b/frontend/ui-core/src/annotator/GeometryIcon.tsx
@@ -1,16 +1,16 @@
 /**
  * The glyph for a drawable geometry, and there is exactly one of each.
  *
- * The tool strip is the only caller. It stays a module of its own because
- * `DESIGN.md` pins these three glyphs as a contract rather than as one
- * component's private detail.
+ * The tool strip is the only caller. It stays a module of its own because there
+ * is exactly one glyph per geometry and that mapping is worth keeping in one
+ * place rather than re-decided at each call site.
  *
  * Worth knowing before reaching for it elsewhere: a class list went back to words
- * because a square, a spline and a waypoint node are not self-describing at chip
+ * because a square, a closed path and an open path are not self-describing at chip
  * size. The strip can afford them — it is five controls learned once.
  */
 
-import { MousePointer2, Spline, Square, Waypoints } from "lucide-react";
+import { IconPointer, IconPolygon, IconSquare, IconVectorSpline } from "@tabler/icons-react";
 import type { JSX } from "react";
 
 export interface GeometryIconProps {
@@ -25,12 +25,12 @@ export interface GeometryIconProps {
   readonly className?: string;
 }
 
-/** `DESIGN.md` pins the three icons. */
+/** One glyph per geometry: a closed rectangle, a closed path, an open path, or the pointer. */
 export function GeometryIcon({ tool, className = "size-4" }: GeometryIconProps): JSX.Element {
-  if (tool === "bbox") return <Square className={className} />;
-  if (tool === "polygon") return <Spline className={className} />;
-  // A lane is a path, and `Waypoints` is the one icon in the set that reads as an
-  // open one — `Spline` is already the polygon's and would say "closed".
-  if (tool === "polyline") return <Waypoints className={className} />;
-  return <MousePointer2 className={className} />;
+  if (tool === "bbox") return <IconSquare className={className} />;
+  if (tool === "polygon") return <IconPolygon className={className} />;
+  // A lane is a path, and it must read as an OPEN one — `IconPolygon` is already
+  // the closed shape above it, and using it here would say "closed" for a lane.
+  if (tool === "polyline") return <IconVectorSpline className={className} />;
+  return <IconPointer className={className} />;
 }
diff --git a/frontend/ui-core/src/annotator/ReassignMenu.tsx b/frontend/ui-core/src/annotator/ReassignMenu.tsx
index bca1d259..29e77783 100644
--- a/frontend/ui-core/src/annotator/ReassignMenu.tsx
+++ b/frontend/ui-core/src/annotator/ReassignMenu.tsx
@@ -47,7 +47,7 @@
 
 import { digitFromCode, hotkeyForClass } from "@visionset/annotator";
 import type { Annotation, AnnotationSchema, LabelClass } from "@visionset/annotator";
-import { Check } from "lucide-react";
+import { IconCheck } from "@tabler/icons-react";
 import type { JSX, KeyboardEvent } from "react";
 
 import { formatGeometries } from "../data/geometryCategory";
@@ -143,7 +143,7 @@ export function ReassignMenu({
               style={{ background: classColor(declared, declared.name) }}
             />
             <span className="min-w-0 flex-1 truncate">{declared.name}</span>
-            {current && <Check className="size-3.5 shrink-0" aria-label="current class" />}
+            {current && <IconCheck className="size-3.5 shrink-0" aria-label="current class" />}
             {ok ? (
               hotkey !== null && (
                 <kbd className="shrink-0 rounded-sm border border-border px-1 font-mono text-xs text-muted-foreground">
diff --git a/frontend/ui-core/src/annotator/SuggestPanel.tsx b/frontend/ui-core/src/annotator/SuggestPanel.tsx
index 83e280ba..f47615a1 100644
--- a/frontend/ui-core/src/annotator/SuggestPanel.tsx
+++ b/frontend/ui-core/src/annotator/SuggestPanel.tsx
@@ -63,7 +63,13 @@ import {
   type SuggestionState,
   type Detail,
 } from "@visionset/annotator";
-import { Check, Loader2, Sparkles, TriangleAlert, X } from "lucide-react";
+import {
+  IconAlertTriangle,
+  IconCheck,
+  IconLoader2,
+  IconSparkles,
+  IconX,
+} from "@tabler/icons-react";
 import type { JSX, ReactNode } from "react";
 
 import { EditorNotice } from "./EditorNotice";
@@ -218,7 +224,7 @@ export function SuggestPanel({
   */
   if (isParked(session)) {
     return (
-      <EditorNotice testId="suggest-panel" tone="calm" icon={<Sparkles className="size-4" />}>
+      <EditorNotice testId="suggest-panel" tone="calm" icon={<IconSparkles className="size-4" />}>
         <p className="font-medium text-foreground" data-testid="suggest-parked">
           {heldClass === null
             ? "Nothing selected to suggest for"
@@ -242,7 +248,7 @@ export function SuggestPanel({
           data-testid="suggest-discard"
           onClick={onDiscard}
         >
-          <X className="size-4" aria-hidden="true" />
+          <IconX className="size-4" aria-hidden="true" />
           Put the tool away
         </Button>
       </EditorNotice>
@@ -259,9 +265,9 @@ export function SuggestPanel({
         tone={copy.tone}
         icon={
           copy.tone === "warn" ? (
-            <TriangleAlert className="size-4" />
+            <IconAlertTriangle className="size-4" />
           ) : (
-            <Loader2 className="size-4 animate-spin" />
+            <IconLoader2 className="size-4 animate-spin" />
           )
         }
       >
@@ -288,7 +294,7 @@ export function SuggestPanel({
 
   if (session.status === "refused") {
     return (
-      <EditorNotice testId="suggest-panel" tone="warn" icon={<TriangleAlert className="size-4" />}>
+      <EditorNotice testId="suggest-panel" tone="warn" icon={<IconAlertTriangle className="size-4" />}>
         <p className="font-medium text-foreground">That suggestion could not be made</p>
         {/* The server's sentence, verbatim. It is the one that carries the
             install command when the cause is a missing extra. */}
@@ -309,7 +315,7 @@ export function SuggestPanel({
   // lives in `usePendingIndicator` rather than here.
   if (session.status === "asking") {
     return (
-      <EditorNotice testId="suggest-panel" tone="calm" icon={<Loader2 className="size-4 animate-spin" />}>
+      <EditorNotice testId="suggest-panel" tone="calm" icon={<IconLoader2 className="size-4 animate-spin" />}>
         <p className="font-medium text-foreground" data-testid="suggest-asking">
           Looking at that…
         </p>
@@ -328,7 +334,7 @@ export function SuggestPanel({
 
   if (session.status === "none") {
     return (
-      <EditorNotice testId="suggest-panel" tone="calm" icon={<Sparkles className="size-4" />}>
+      <EditorNotice testId="suggest-panel" tone="calm" icon={<IconSparkles className="size-4" />}>
         <p className="font-medium text-foreground" data-testid="suggest-none">
           Nothing to suggest there
         </p>
@@ -369,7 +375,7 @@ export function SuggestPanel({
   */
   if (isAcceptable(session)) {
     return (
-      <EditorNotice testId="suggest-panel" tone="calm" icon={<Sparkles className="size-4" />}>
+      <EditorNotice testId="suggest-panel" tone="calm" icon={<IconSparkles className="size-4" />}>
         <p className="font-medium text-foreground" data-testid="suggest-shown">
           A shape for “{session.labelClass}”
         </p>
@@ -378,7 +384,7 @@ export function SuggestPanel({
         </p>
         <div className="mt-1 flex gap-2">
           <Button variant="primary" size="sm" data-testid="suggest-accept" onClick={onAccept}>
-            <Check className="size-4" aria-hidden="true" />
+            <IconCheck className="size-4" aria-hidden="true" />
             Accept
             <Chip>↵</Chip>
           </Button>
@@ -398,7 +404,7 @@ export function SuggestPanel({
   }
 
   return (
-    <EditorNotice testId="suggest-panel" tone="calm" icon={<Sparkles className="size-4" />}>
+    <EditorNotice testId="suggest-panel" tone="calm" icon={<IconSparkles className="size-4" />}>
       <p className="font-medium text-foreground" data-testid="suggest-idle">
         Click the thing you want
       </p>
@@ -489,7 +495,7 @@ function Discard({ onDiscard }: { readonly onDiscard: () => void }): JSX.Element
       data-testid="suggest-discard"
       onClick={onDiscard}
     >
-      <X className="size-4" aria-hidden="true" />
+      <IconX className="size-4" aria-hidden="true" />
       Clear the points
       <Chip>Esc</Chip>
     </Button>
diff --git a/frontend/ui-core/src/annotator/ToolPalette.tsx b/frontend/ui-core/src/annotator/ToolPalette.tsx
index cee530fd..84d2e230 100644
--- a/frontend/ui-core/src/annotator/ToolPalette.tsx
+++ b/frontend/ui-core/src/annotator/ToolPalette.tsx
@@ -95,13 +95,13 @@ import {
 
 import { geometryLabel } from "../data/geometryCategory";
 import {
-  CircleHelp,
-  Hand,
-  Plus,
-  Redo2,
-  Sparkles,
-  Undo2,
-} from "lucide-react";
+  IconArrowBackUp,
+  IconArrowForwardUp,
+  IconHandStop,
+  IconHelpCircle,
+  IconPlus,
+  IconSparkles,
+} from "@tabler/icons-react";
 
 import { GeometryIcon } from "./GeometryIcon";
 import type { JSX, MouseEvent, ReactNode } from "react";
@@ -439,7 +439,7 @@ export function ToolPalette({
           onMouseDown={keepFocus}
           onClick={suggest.onToggle}
         >
-          <Sparkles className="size-4" />
+          <IconSparkles className="size-4" />
         </PaletteButton>
       )}
 
@@ -454,7 +454,7 @@ export function ToolPalette({
           onMouseDown={keepFocus}
           onClick={onAddClass}
         >
-          <Plus className="size-4" />
+          <IconPlus className="size-4" />
         </PaletteButton>
       )}
 
@@ -472,7 +472,7 @@ export function ToolPalette({
         onMouseDown={keepFocus}
         onClick={hand.onToggle}
       >
-        <Hand className="size-4" />
+        <IconHandStop className="size-4" />
       </PaletteButton>
 
       {!readOnly && history !== undefined && (
@@ -493,7 +493,7 @@ export function ToolPalette({
             onMouseDown={keepFocus}
             onClick={history.onUndo}
           >
-            <Undo2 className="size-4" />
+            <IconArrowBackUp className="size-4" />
           </PaletteButton>
           <PaletteButton
             testId="tool-redo"
@@ -503,7 +503,7 @@ export function ToolPalette({
             onMouseDown={keepFocus}
             onClick={history.onRedo}
           >
-            <Redo2 className="size-4" />
+            <IconArrowForwardUp className="size-4" />
           </PaletteButton>
         </>
       )}
@@ -517,7 +517,7 @@ export function ToolPalette({
         onMouseDown={keepFocus}
         onClick={onToggleHelp}
       >
-        <CircleHelp className="size-4" />
+        <IconHelpCircle className="size-4" />
       </PaletteButton>
     </div>
   );
@@ -578,7 +578,8 @@ function PaletteButton({
 /**
  * The strip's own name for the shared glyph.
  *
- * The map lives in `GeometryIcon`, because `DESIGN.md` pins the three glyphs.
+ * The map lives in `GeometryIcon`, so one glyph per geometry is decided once
+ * rather than at each call site.
  */
 function ToolIcon({ tool }: { readonly tool: ToolChoice["tool"] }): JSX.Element {
   return <GeometryIcon tool={tool} />;
diff --git a/frontend/ui-core/src/annotator/ZoomWidget.tsx b/frontend/ui-core/src/annotator/ZoomWidget.tsx
index 410236fc..94524044 100644
--- a/frontend/ui-core/src/annotator/ZoomWidget.tsx
+++ b/frontend/ui-core/src/annotator/ZoomWidget.tsx
@@ -25,7 +25,7 @@
  * a person could change to get it.
  */
 
-import { Maximize2, Minimize2, Minus, Plus, Scan } from "lucide-react";
+import { IconMaximize, IconMinimize, IconMinus, IconPlus, IconScan } from "@tabler/icons-react";
 import { useEffect, useState, type JSX } from "react";
 
 import { Button } from "../primitives/Button";
@@ -70,7 +70,7 @@ export function ZoomWidget({
         reason={floorReason}
         onClick={onZoomOut}
       >
-        <Minus className="size-4" />
+        <IconMinus className="size-4" />
       </ZoomButton>
 
       {/* The stage's own scale, capped by it — so the ceiling reads exactly
@@ -89,7 +89,7 @@ export function ZoomWidget({
         reason={ceilingReason}
         onClick={onZoomIn}
       >
-        <Plus className="size-4" />
+        <IconPlus className="size-4" />
       </ZoomButton>
 
       <span className="mx-0.5 h-5 w-px bg-border" />
@@ -97,7 +97,7 @@ export function ZoomWidget({
       {/* The same implementation `mod+0` reaches, which is why that chord stays
           intercepted rather than forwarded to the host. */}
       <ZoomButton testId="fit" label="Fit to window" atBound={false} reason="" onClick={onFit}>
-        <Scan className="size-4" />
+        <IconScan className="size-4" />
       </ZoomButton>
 
       {fullscreen !== null && (
@@ -108,7 +108,7 @@ export function ZoomWidget({
           reason=""
           onClick={fullscreen.toggle}
         >
-          {fullscreen.active ? <Minimize2 className="size-4" /> : <Maximize2 className="size-4" />}
+          {fullscreen.active ? <IconMinimize className="size-4" /> : <IconMaximize className="size-4" />}
         </ZoomButton>
       )}
     </div>

From 0a0b8099630759b905d51b49016c52b04197f91c Mon Sep 17 00:00:00 2001
From: YaelAnaya <yael.anaya@uabc.edu.mx>
Date: Mon, 24 Aug 2026 01:48:49 -0700
Subject: [PATCH 2/5] test(annotator): the workspace's icon set is held to
 Tabler only

Nothing would have noticed a reintroduction. The dependency stays declared while
the annotator's consumers still carry it, so a stray `lucide-react` import
resolves, typechecks, builds and renders - an editor auto-import or a rebase from
a branch that predates the migration is enough, and the glyph would look close
enough to pass review.

The scan reads the whole directory rather than the eleven files that were
migrated, because a list passes for the twelfth file nobody adds to it. Proving
that mattered: run against a list, the gate misses `EditorNotice.tsx`, which
carries no icon today and would inherit one silently. The length assertion is
there so the test cannot go quiet if the directory read ever stops matching.
---
 .../ui-core/src/annotator/iconSet.test.ts     | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 frontend/ui-core/src/annotator/iconSet.test.ts

diff --git a/frontend/ui-core/src/annotator/iconSet.test.ts b/frontend/ui-core/src/annotator/iconSet.test.ts
new file mode 100644
index 00000000..f6c4ca26
--- /dev/null
+++ b/frontend/ui-core/src/annotator/iconSet.test.ts
@@ -0,0 +1,48 @@
+/**
+ * The annotation workspace draws Tabler, and nothing else.
+ *
+ * `DESIGN.md`'s icon rule names this directory as the last place `lucide-react`
+ * survived: the primitives and the screens were converged first, and the
+ * annotator's own glyphs came last. Once migrated, the interesting failure is not
+ * a wrong glyph but a *reintroduction* — a new file importing the old set because
+ * a neighbouring branch still did, or because an editor auto-imported it while
+ * both packages sat in `node_modules`. Nothing else in the repository would
+ * notice: the dependency stays declared until the annotator's consumers drop it,
+ * so a stray import resolves, builds, and renders.
+ *
+ * The scan is over the whole directory rather than a list of the eleven files
+ * that were migrated. A list would pass for a twelfth file nobody added to it,
+ * which is the failure mode a gate exists to prevent, and the emptiness
+ * assertion below is what stops the scan from proving nothing if the glob ever
+ * stops matching.
+ */
+
+import { readdirSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+/**
+ * `import.meta.url` is an `http://localhost/` URL under jsdom, so the path
+ * resolves from the package root vitest runs in — the reason `ProjectNav`'s own
+ * Tabler assertion spells it this way too.
+ */
+const ANNOTATOR = resolve(process.cwd(), "src/annotator");
+
+/** Every production module here — the tests themselves are not the contract. */
+function productionSources(): readonly string[] {
+  return readdirSync(ANNOTATOR)
+    .filter((name) => /\.tsx?$/.test(name) && !/\.test\.tsx?$/.test(name))
+    .sort();
+}
+
+describe("the annotation workspace's icon set", () => {
+  it("draws Tabler only, in every production module", () => {
+    const sources = productionSources();
+    expect(sources.length).toBeGreaterThan(0);
+
+    const offenders = sources.filter((name) =>
+      readFileSync(resolve(ANNOTATOR, name), "utf8").includes("lucide-react"),
+    );
+    expect(offenders).toEqual([]);
+  });
+});

From 8ba33f2d3caeb2c5fe6ec7088845113b9817f887 Mon Sep 17 00:00:00 2001
From: YaelAnaya <yael.anaya@uabc.edu.mx>
Date: Mon, 24 Aug 2026 01:58:17 -0700
Subject: [PATCH 3/5] refactor(annotator): the workspace's compact icon buttons
 are Nova's icon-xs

Six controls asked for `size="icon"` and then overrode it with `className="size-6"`
- the object row's visibility, delete and reassign triggers, the panel's
show/hide-all, the class region's add, and the canvas picker. `icon-xs` is
`size-6 p-0`, so each of them was spelling the variant out by hand and the
override is what a reader had to notice to know the control's real size.

Nothing moves. `icon-xs` resolves to the geometry the override produced, and the
variant's `svg:size-3` default only applies to icons that carry no size of their
own, which none of these do - the explicit `size-3.5` and `size-4` glyphs are
untouched. `shadow-sm` stays on the canvas picker, where a control floating over
the image needs an edge the panel's buttons do not.

`AssetImage`'s `size-6` is left alone on purpose: it is the glyph in an
error state, not a control's geometry, and there is no button under it.

`CanvasReassign` couples this to arithmetic - `TRIGGER_PX` positions the button
by its own width, so the comment now names the variant that decides it rather
than the class that used to.
---
 frontend/ui-core/src/annotator/AnnotatorPanel.tsx | 12 ++++--------
 frontend/ui-core/src/annotator/CanvasReassign.tsx | 10 +++++++---
 frontend/ui-core/src/annotator/ClassRegion.tsx    |  3 +--
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/ui-core/src/annotator/AnnotatorPanel.tsx b/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
index a5ad3488..ebb8e8e4 100644
--- a/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
+++ b/frontend/ui-core/src/annotator/AnnotatorPanel.tsx
@@ -278,8 +278,7 @@ export function AnnotatorPanel({
           </span>
           <Button
             variant="ghost"
-            size="icon"
-            className="size-6"
+            size="icon-xs"
             aria-label={allHidden ? "Show all objects" : "Hide all objects"}
             data-testid="toggle-all-visibility"
             disabled={drawn.length === 0}
@@ -587,8 +586,7 @@ function ObjectRow({
       )}
       <Button
         variant="ghost"
-        size="icon"
-        className="size-6"
+        size="icon-xs"
         aria-label={hidden ? `Show object ${index + 1}` : `Hide object ${index + 1}`}
         data-testid={`object-visibility-${index}`}
         onClick={onToggleVisible}
@@ -597,8 +595,7 @@ function ObjectRow({
       </Button>
       <Button
         variant="ghost"
-        size="icon"
-        className="size-6"
+        size="icon-xs"
         aria-label={`Delete object ${index + 1}`}
         data-testid={`object-delete-${index}`}
         onClick={onRemove}
@@ -638,8 +635,7 @@ function RowReassign({
       <DropdownMenuTrigger asChild>
         <Button
           variant="ghost"
-          size="icon"
-          className="size-6"
+          size="icon-xs"
           aria-label={`Reassign object ${index + 1}`}
           data-testid={`object-reclass-${index}`}
         >
diff --git a/frontend/ui-core/src/annotator/CanvasReassign.tsx b/frontend/ui-core/src/annotator/CanvasReassign.tsx
index 0c337d21..26bc4a3a 100644
--- a/frontend/ui-core/src/annotator/CanvasReassign.tsx
+++ b/frontend/ui-core/src/annotator/CanvasReassign.tsx
@@ -61,7 +61,11 @@ import { Button } from "../primitives/Button";
 import { DropdownMenu, DropdownMenuTrigger } from "../primitives/Menu";
 import { ReassignMenu } from "./ReassignMenu";
 
-/** The trigger's own size, in screen pixels — `size="icon"` at `size-6`. */
+/**
+ * The trigger's own size, in screen pixels — Nova's `icon-xs`, which is 24px
+ * square. The clamps below position the button by this number, so a different
+ * button size here is a silent mispositioning rather than a visible mistake.
+ */
 const TRIGGER_PX = 24;
 
 /**
@@ -121,8 +125,8 @@ export function CanvasReassign({
         <DropdownMenuTrigger asChild>
           <Button
             variant="secondary"
-            size="icon"
-            className="size-6 shadow-sm"
+            size="icon-xs"
+            className="shadow-sm"
             aria-label={`Reassign the selected ${subject.label_class}`}
             data-testid="canvas-reclass"
           >
diff --git a/frontend/ui-core/src/annotator/ClassRegion.tsx b/frontend/ui-core/src/annotator/ClassRegion.tsx
index 614001a6..880e16b4 100644
--- a/frontend/ui-core/src/annotator/ClassRegion.tsx
+++ b/frontend/ui-core/src/annotator/ClassRegion.tsx
@@ -196,8 +196,7 @@ export function ClassRegion({
               is missing something. */}
           <Button
             variant="ghost"
-            size="icon"
-            className="size-6"
+            size="icon-xs"
             aria-label="Add a class"
             data-testid="class-add"
             disabled={onAddClass === undefined}

From fedb4f752cee53e0b466b7302a3ce9fd2745ffe9 Mon Sep 17 00:00:00 2001
From: YaelAnaya <yael.anaya@uabc.edu.mx>
Date: Mon, 24 Aug 2026 02:29:13 -0700
Subject: [PATCH 4/5] fix(ui): a menu leaves on the frame it is dismissed, so
 the next press is not swallowed

Pressing the overflow trigger straight after an `Escape` did nothing. While the
exit animation ran, Radix kept the content mounted and the dismissable layer with
it, so one pointer-down was read twice - the trigger toggling the menu open, and
the layer still listening treating the same press as an interaction outside itself
and dismissing. The two cancelled and the menu never appeared.

`duration-100` puts that window inside the gap between an Escape and the click
after it, which makes it a defect a fast hand meets routinely. Measured in
chromium against the annotation workspace, the press failed four runs in five, and
the same press after a second Escape failed five in five; both pass with the exit
animation gone, and the browser suite's 256 scenarios pass with it.

The fix is the primitive's rather than the workspace's because the flaw was:
`SURFACE` dresses every `DropdownMenuContent` in the product, so an
annotator-local motion exception would have left the same swallow in the screens
and given one primitive two behaviours. `data-[state=closed]:overflow-hidden` goes
with it - it clipped the surface while the exit shrank it, and nothing paints in
that state now.

`DESIGN.md` carries the decision rather than this diff carrying it alone: the Menu
row says enter-and-no-exit, and a new *Motion* section argues the general rule from
the principle the old behaviour broke - motion never makes anyone wait. An exit
stays available to a surface whose trigger cannot be pressed again immediately,
which is why the tooltip keeps its own.
---
 DESIGN.md                                | 31 ++++++++++++++++++++++--
 frontend/ui-core/src/primitives/Menu.tsx | 20 +++++++++++++--
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 46dce52c..936e5322 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -176,7 +176,7 @@ primitive targets):
 | Button — hover | default `hover:bg-primary/80`; secondary `color-mix(in oklch, var(--secondary), var(--foreground) 5%)`; destructive soft |
 | Input | `h-8 rounded-lg border-input px-2.5 text-base md:text-sm`; dark theme `bg-input/30` |
 | Badge | `h-5 px-2 text-xs rounded-4xl`; icons `size-3`. The `quiet` variant alone is `rounded-md` — a square, colourless label for a fact read beside other facts, never a state |
-| Menu — surface | `dark` subtree + `bg-popover p-1 rounded-lg ring-1 ring-foreground/10 shadow-md`, `min-w-32`, `duration-100` enter/exit |
+| Menu — surface | `dark` subtree + `bg-popover p-1 rounded-lg ring-1 ring-foreground/10 shadow-md`, `min-w-32`, `duration-100` enter and **no exit** — see *Motion* |
 | Menu — item | `px-1.5 py-1 text-sm rounded-md focus:bg-accent focus:text-accent-foreground`; destructive item soft |
 | Card | `rounded-xl ring-1 ring-foreground/10 text-sm`; `--card-spacing` = `--spacing(4)` (16px; 12px at the `sm` size); footer `bg-muted/50` |
 | Dialog — overlay | `bg-black/10 supports-backdrop-filter:backdrop-blur-xs duration-100` |
@@ -185,7 +185,7 @@ primitive targets):
 | Elevation | `ring-1 ring-foreground/10` + a resting shadow — never a coloured border |
 
 `frontend/ui-core/src/primitives/` carries the table itself, not a family resemblance to
-it: the heights, the `ring-3` focus treatment, the `duration-100` enter/exit, the
+it: the heights, the `ring-3` focus treatment, the `duration-100` enter, the
 `--card-spacing` variable and Nova's interaction idioms (uniform disabled opacity, soft
 destructive, `/80`-opacity hover, the inverted menu subtree) are the primitives' own
 declarations. The table is the contract and the primitives are where it is spelled, so a
@@ -248,6 +248,33 @@ which is the only place the composition can be checked: Tailwind renders `ring-3
 `box-shadow` layer, so "the ring is there" is a question about a computed shadow list
 rather than about a class string.
 
+## Motion
+
+Motion orients or confirms, and never stands between somebody and their next action —
+*Fast and quiet*, applied. An **enter** animation is free to play: nothing is waiting on
+it, because the surface it introduces did not exist a frame ago. An **exit** animation is
+not, and the difference is not a matter of taste.
+
+**A floating surface leaves on the frame it is dismissed.** While an exit animation runs,
+Radix keeps the content mounted, and the dismissable layer stays mounted with it. A press
+on the trigger inside that window is read twice — the trigger toggles the surface open,
+and the layer still listening reads the same pointer-down as an interaction outside itself
+and dismisses — so the two cancel and the surface never appears. At `duration-100` that
+window covers the gap between an `Escape` and the click after it, which makes it a defect
+a fast hand meets routinely rather than an edge case. The annotation workspace is where
+that tempo is normal, and it is where the behaviour was measured; the fix belongs to the
+primitive because every menu in the product shared the flaw.
+
+So `DropdownMenuContent` animates in and not out, and
+`frontend/app/e2e/annotate.spec.ts` holds the two presses that would catch a fade being
+restored. A surface that genuinely needs an exit — one whose trigger cannot be pressed
+again straight away, as a modal's cannot — may keep one; the tooltip keeps its own,
+because a hover has no toggle to swallow.
+
+`prefers-reduced-motion` sits above all of this: the base layer in `styles.css` collapses
+every animation and transition to a single frame under that query, so none of the above is
+something a component opts into.
+
 ## Sidebar / Menu
 
 - **`menuColor: inverted`.** Every menu and popover subtree — dropdown content, select
diff --git a/frontend/ui-core/src/primitives/Menu.tsx b/frontend/ui-core/src/primitives/Menu.tsx
index 25cbdddf..81b63752 100644
--- a/frontend/ui-core/src/primitives/Menu.tsx
+++ b/frontend/ui-core/src/primitives/Menu.tsx
@@ -18,14 +18,30 @@ import { cn } from "../lib/cn";
 export const DropdownMenu = DropdownMenuPrimitive.Root;
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
+/**
+ * The enter animation, and no exit animation — the absence is the load-bearing
+ * part.
+ *
+ * An animated exit keeps Radix's content mounted for its duration after `open`
+ * goes false, and the dismissable layer stays mounted with it. A press on the
+ * trigger inside that window is then read twice: the trigger toggles the menu
+ * open, and the layer still listening reads the same pointer-down as an
+ * interaction *outside* itself and dismisses. The two cancel and the menu never
+ * appears. A hundred milliseconds is well inside the gap between an `Escape` and
+ * the click after it, so a fast hand hit this routinely rather than rarely.
+ *
+ * `DESIGN.md`'s "fast and quiet" is the principle it broke — motion orients or
+ * confirms and never makes anyone wait — so the menu leaves on the frame it is
+ * dismissed. Restoring a fade here reintroduces the swallow;
+ * `annotate.spec.ts` holds the two presses that prove it.
+ */
 const SURFACE =
   "dark z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 " +
   "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto " +
   "rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 " +
   "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 " +
   "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 " +
-  "data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 " +
-  "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95";
+  "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95";
 
 export const DropdownMenuContent = forwardRef<
   ElementRef<typeof DropdownMenuPrimitive.Content>,

From 096c6f032dd6225184892824ddac562b6ceeae5a Mon Sep 17 00:00:00 2001
From: YaelAnaya <yael.anaya@uabc.edu.mx>
Date: Mon, 24 Aug 2026 02:29:27 -0700
Subject: [PATCH 5/5] test(e2e): the overflow reopens on a press that follows
 its dismissal

Two scenarios, both of which failed before the menu's exit animation went: the
trigger pressed straight after an `Escape`, and pressed after a second one.
Neither routes through `closeOverflow`, because that helper's wait for the menu to
leave is exactly what they must not do - the product's contract is that there is
nothing to wait for.

`_frame.ts`'s two overflow helpers stated the swallow as current fact and told the
reader the wait existed to avoid it. That was true and is not: the wait is the
assertion that `Escape` closed the menu, and the reason a scenario must not reach
for it when reopening immediately is now what the docstring says.
---
 frontend/app/e2e/_frame.ts        | 28 ++++++++++++-------------
 frontend/app/e2e/annotate.spec.ts | 35 +++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/frontend/app/e2e/_frame.ts b/frontend/app/e2e/_frame.ts
index 7ed90e7b..1fc7c4fc 100644
--- a/frontend/app/e2e/_frame.ts
+++ b/frontend/app/e2e/_frame.ts
@@ -294,10 +294,9 @@ export async function expectProgress(page: Page, progress: string): Promise<void
  * Radix closes the menu on select, so a scenario pressing two of these opens it
  * twice. That is the product's behaviour and not a harness quirk.
  *
- * The menu is waited for rather than assumed: the trigger *toggles*, so a press
- * that arrives while the previous menu is still leaving is read as a dismiss
- * instead of an open (see {@link closeOverflow}). Waiting here is what makes that
- * fail as "the menu did not open" rather than as a missing item three lines later.
+ * The menu is waited for rather than assumed, so a menu that does not open fails
+ * here — as "the menu did not open" — rather than three lines later as a missing
+ * item.
  */
 export async function openOverflow(page: Page): Promise<void> {
   await page.getByTestId("more-actions").click();
@@ -305,19 +304,18 @@ export async function openOverflow(page: Page): Promise<void> {
 }
 
 /**
- * Escape out of the overflow menu, and wait until it has actually left.
+ * Escape out of the overflow menu, and assert it has actually left.
  *
- * Nova's menu surface animates out (`data-closed:animate-out` over `duration-100`),
- * which means Radix keeps the content — and its dismissable layer — mounted for a
- * beat after `open` goes false. A press on the trigger inside that beat hits both
- * handlers at once: the trigger toggles the menu open, and the still-listening
- * layer reads the same pointer-down as an interaction *outside* itself and
- * dismisses. The two cancel, and the menu never appears — which is exactly what
- * reopening the overflow straight after an `Escape` used to run into.
+ * The wait is the assertion that `Escape` closed the menu at all, and it is on the
+ * menu leaving the DOM rather than on a clock — per
+ * `tests/scripts/e2e_discipline.test.mjs`.
  *
- * So the close is a state to wait on, not a keystroke to fire and forget. The wait
- * is on the menu leaving the DOM, which is also the assertion that `Escape` closed
- * it at all — no clock anywhere, per `tests/scripts/e2e_discipline.test.mjs`.
+ * It is not a workaround for a surface that leaves slowly. The menu has no exit
+ * animation, deliberately, so there is no window in which it is still mounted and
+ * swallowing the next press — `DESIGN.md`'s *Motion* argues why, and
+ * `annotate.spec.ts` presses the trigger straight after an `Escape` to keep it
+ * true. A scenario that wants to reopen the menu immediately should do exactly
+ * that rather than reach for this.
  */
 export async function closeOverflow(page: Page): Promise<void> {
   await page.keyboard.press("Escape");
diff --git a/frontend/app/e2e/annotate.spec.ts b/frontend/app/e2e/annotate.spec.ts
index a89317b8..59ff78dd 100644
--- a/frontend/app/e2e/annotate.spec.ts
+++ b/frontend/app/e2e/annotate.spec.ts
@@ -3517,3 +3517,38 @@ test("a press on the suggest panel never reaches the picture underneath", async
   await expect(page.getByTestId("suggest-adjustments")).toBeVisible();
   expect(asks(sent)).toBe(before);
 });
+
+/**
+ * ## Reopening a menu that was just dismissed
+ *
+ * `DESIGN.md`'s *Motion*: a floating surface leaves on the frame it is dismissed,
+ * because an animated exit keeps Radix's dismissable layer mounted and the next
+ * press on the trigger is then read as both an open and an outside-dismiss, which
+ * cancel. These two scenarios are the presses that catch a fade being restored —
+ * both failed against `duration-100` on the way out, the first in four runs of
+ * five and the second in five.
+ *
+ * Neither uses `closeOverflow`. Its wait is what a suite does to stay honest about
+ * a surface that is still leaving; the product's contract is that there is nothing
+ * to wait for.
+ */
+test("the overflow reopens on a press straight after Escape", async ({ page }) => {
+  const sent: Request[] = [];
+  await openJob(page, sent);
+
+  await openOverflow(page);
+  await page.keyboard.press("Escape");
+  await page.getByTestId("more-actions").click();
+  await expect(page.getByRole("menu")).toBeVisible();
+});
+
+test("the overflow reopens on a press straight after a second Escape", async ({ page }) => {
+  const sent: Request[] = [];
+  await openJob(page, sent);
+
+  await openOverflow(page);
+  await page.keyboard.press("Escape");
+  await page.keyboard.press("Escape");
+  await page.getByTestId("more-actions").click();
+  await expect(page.getByRole("menu")).toBeVisible();
+});