@

feat(ui): add DataTable and Toaster, drop the legacy Table, fix overlay dialogs

DataTable replaces the 20-line Table scaffold entirely: columns, sorting,
filtering, pagination, selection, bulk actions, comparison layout, sticky
first column, custom HTML cells, and a remote source driven by a `request`
output rather than a function prop (props travel as HTML attributes, so a
function arrives as its own source text).

Toaster replaces the hand-rolled status div: tone icons, actions, hover
pause/resume and a progress bar.

Overlays audit -- Modal and Drawer declared aria-modal="true" but nothing
ever moved focus into the panel, so the @keydown handler on their root
never ran and closeOnEscape did nothing. Focus, focus restore, a Tab trap
and a body scroll lock now live in the reactive runtime, shared by both.

ContextMenu placed pointer menus by subtracting a guessed 340x420 from the
viewport, which pushed every menu that was not that size away from the
pointer; it now positions at the pointer and lets the anchored clamp pull
it back once it can be measured.

The reactive runtime size budget moves 150k -> 175k to cover anchored
overlays, dialog behaviour, the toaster and the DataTable client half.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@

packages/ui/components/Drawer.wrn

@@ -20,6 +20,8 @@ open: boolean = false
     showClose: boolean = true
     closeOnBackdrop: boolean = true
     closeOnEscape: boolean = true
+    // Open/close animation length in ms. 0 disables the animation entirely.
+    duration: number = 260
     overlay: boolean = true
     scrollable: boolean = true
     triggerLabel: string = ""
@@ -79,7 +81,9 @@ open: boolean = false
       data-overlay='{overlay ? "true" : "false"}'
       data-scrollable='{scrollable ? "true" : "false"}'
       class='wire-drawer {class}'
+      style='--drawer-duration: {duration}ms'
     >
+
       {#if triggerLabel}
         <button
           type="button"
@@ -101,7 +105,6 @@ open: boolean = false
 
       <div
         class="wire-drawer__layer"
-        data-show='{open || visible}'
         role="presentation"
         @keydown='handleKeydown(event)'
       >
@@ -218,12 +221,32 @@ open: boolean = false
       cursor: pointer;
     }
 
+    /*
+     * The layer stays in the layout and is revealed by [data-open]; it used to
+     * be toggled with data-show, which sets display:none, and display cannot
+     * be transitioned -- the drawer simply snapped in and out. visibility is
+     * delayed by the duration on the way out so the panel can finish sliding
+     * before the layer is taken out of the hit-testing tree.
+     */
     .wire-drawer__layer {
       position: fixed;
       inset: 0;
       z-index: 1200;
       display: flex;
       pointer-events: none;
+      visibility: hidden;
+      opacity: 0;
+      transition:
+        opacity var(--drawer-duration, 260ms) ease,
+        visibility 0s linear var(--drawer-duration, 260ms);
+    }
+
+    .wire-drawer[data-open="true"] .wire-drawer__layer {
+      visibility: visible;
+      opacity: 1;
+      transition:
+        opacity var(--drawer-duration, 260ms) ease,
+        visibility 0s linear 0s;
     }
 
     .wire-drawer__backdrop {
@@ -262,6 +285,38 @@ open: boolean = false
       box-shadow: -28px 0 80px color-mix(in srgb, black 28%, transparent);
       pointer-events: auto;
       overflow: hidden;
+      /* Slides in from whichever edge the placement puts it on. */
+      transform: translateX(100%);
+      transition: transform var(--drawer-duration, 260ms) cubic-bezier(0.32, 0.72, 0, 1);
+    }
+
+    .wire-drawer[data-open="true"] .wire-drawer__panel {
+      transform: none;
+    }
+
+    .wire-drawer[data-placement="left"] .wire-drawer__panel {
+      transform: translateX(-100%);
+    }
+
+    .wire-drawer[data-placement="top"] .wire-drawer__panel {
+      transform: translateY(-100%);
+    }
+
+    .wire-drawer[data-placement="bottom"] .wire-drawer__panel {
+      transform: translateY(100%);
+    }
+
+    .wire-drawer[data-open="true"][data-placement="left"] .wire-drawer__panel,
+    .wire-drawer[data-open="true"][data-placement="top"] .wire-drawer__panel,
+    .wire-drawer[data-open="true"][data-placement="bottom"] .wire-drawer__panel {
+      transform: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-drawer__layer,
+      .wire-drawer__panel {
+        transition: none;
+      }
     }
 
     .wire-drawer[data-size="sm"] .wire-drawer__panel {
@@ -395,12 +450,19 @@ open: boolean = false
       color: color-mix(in srgb, currentColor 76%, transparent);
     }
 
+    /*
+     * padding is reset explicitly: an app-level `button { padding: ... }` rule
+     * outranks the browser default and leaves this fixed-size button with a
+     * content box of a couple of pixels, which squeezes the icon to a sliver
+     * and reads as "the close button has no icon". Same trap as Modal.
+     */
     .wire-drawer__close {
       appearance: none;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       flex: 0 0 auto;
+      padding: 0;
       width: 2.35rem;
       height: 2.35rem;
       color: var(--wire-color-text-muted);
@@ -417,10 +479,30 @@ open: boolean = false
       outline: none;
     }
 
+    /* Never let the glyph be shrunk by the flex container. */
+    .wire-drawer__close svg {
+      flex: 0 0 auto;
+      width: 1rem;
+      height: 1rem;
+    }
+
+    /*
+     * Slot content is authored by the host app, so the app global stylesheet
+     * styles it too. A bare element selector there (p { color: ... }) beats
+     * anything the panel merely *inherits*, which is how modal body copy ended
+     * up muted grey on a saturated background. State the colour explicitly;
+     * :where() keeps the specificity low enough that any class the app puts on
+     * its own slot content still wins.
+     */
     .wire-drawer__body {
       flex: 1 1 auto;
       min-height: 0;
       padding: 1.35rem;
+      color: var(--wire-color-text);
+    }
+
+    .wire-drawer__body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, span, label, code) {
+      color: inherit;
     }
 
     .wire-drawer[data-scrollable="true"] .wire-drawer__body {