review: theme-owned drop mask token, overlay fade-in, stable gallery keys, close-button stacking, stale note defaults

packages/client/ui-attachment/src/DropOverlay.module.css

@@ -1,6 +1,7 @@
 /* Full-viewport drop invitation (DeepSeek Chat DragMask). pointer-events:
    none — the layer is decoration; drag events must keep hitting the page so
-   the owner's enter/leave count stays balanced. */
+   the owner's enter/leave count stays balanced. The frosted sheet color is
+   the theme's drop-mask alias (dark override lives with the theme owner). */
 .mask {
   position: fixed;
   inset: 0;
@@ -9,12 +10,20 @@
   align-items: center;
   justify-content: center;
   pointer-events: none;
-  background-color: rgba(255, 255, 255, 0.7);
+  background-color: var(--dsw-alias-bg-mask-drop);
   backdrop-filter: blur(10px);
+  animation: fade-in 160ms ease-out;
 }
 
-:global(body[data-ds-dark-theme]) .mask {
-  background-color: rgba(39, 39, 48, 0.7);
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mask {
+    animation: none;
+  }
 }
 
 .wrap {

packages/client/ui-attachment/src/DropOverlay.tsx

@@ -1,5 +1,4 @@
 import { createPortal } from 'react-dom'
-import clsx from 'clsx'
 import css from './DropOverlay.module.css'
 
 /** Drop-overlay strings the owner resolves from its own locale namespace. */
@@ -27,7 +26,7 @@ export function DropOverlay({ disabled, labels }: {
   labels: DropOverlayLabels
 }) {
   return createPortal(
-    <div className={clsx(css.mask, disabled && css.disabled)} role="status">
+    <div className={css.mask} role="status">
       <div className={css.wrap}>
         <div className={css.illustration} aria-hidden="true">
           {disabled ? <UploadDisabledIllustration /> : <UploadIllustration />}

packages/client/ui-attachment/src/ImageLightbox.module.css

@@ -19,7 +19,6 @@
 
 .image {
   position: relative;
-  z-index: 1;
   max-width: min(100%, 1600px);
   max-height: calc(100vh - 80px);
   object-fit: contain;
@@ -32,6 +31,7 @@
   position: fixed;
   top: 20px;
   right: 20px;
+  z-index: 1;
   display: grid;
   place-items: center;
   width: 36px;