@

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>
@

examples/basic-app/app/pages/modal.wrn

@@ -1,14 +1,438 @@
+// Modal demo page. Route: /modal
+//
+// Five real-world use cases for the shared @wrnexus/ui Modal component — each
+// one exercises a different combination of props (color, variant, size,
+// scrollable, destructive, showFooter, confirmDisabled) instead of just
+// showing the same modal five times.
+//
+// Notifications go through the shared <Toaster /> mounted at the bottom of
+// this page. Any client expression can raise one with the runtime global —
+// toast("..."), toast.success(...), toast.error(...) — so pages never
+// hand-roll a status banner and never reach for a blocking alert().
+//
+// No import here on purpose: component tags resolve by directory scan, and
+// @wrnexus/ui's index.ts intentionally has no runtime exports (registry.ts
+// holds the server-only filesystem helpers instead) — an explicit
+// `import { Modal } from "@wrnexus/ui"` fails to bundle since there's no
+// matching export. The WRN-IMPORT-IMPLICIT warning this triggers is safe to
+// ignore for component tags.
 page ModalPage {
 
-    functions {
-        function onConfirmed() {
-            alert("User Confirmed")
-        }
+  state noteText = "Remember to ship the release notes"
+  state deletedNote = ""
+
+  functions {
+    function onSaveConfirmed() {
+      toast.success("Changes saved", { title: "Draft published" })
     }
 
-    view {
-        <Modal
-            onConfirmed={onConfirmed}
-        />
+    function onDeleteConfirmed() {
+      toast.error("Account deleted", { title: "Gone for good", duration: 6000 })
     }
+
+    // Toast actions and component state.
+    //
+    // An action callback runs LONG AFTER the function that created it
+    // returned, and a client function only flushes its state when its body
+    // ends -- so assigning noteText straight from the callback would write to
+    // a dead local and vanish. The callback dispatches an event instead, and
+    // the declarative @window binding on the actions row below handles it as
+    // a fresh invocation with live state. Anything that is not component
+    // state (calling toast(), fetch, navigation) works from the callback
+    // directly.
+    function onDeleteNote() {
+      deletedNote = noteText
+      noteText = ""
+      toast("Note deleted", {
+        title: "Deleted",
+        actionLabel: "Undo",
+        onAction: function () {
+          window.dispatchEvent(new CustomEvent("demo:restore-note"))
+        },
+        duration: 8000
+      })
+    }
+
+    function restoreNote() {
+      if (!deletedNote) {
+        return
+      }
+      noteText = deletedNote
+      deletedNote = ""
+      toast.success("Note restored")
+    }
+
+    // Two actions. The second is styled destructive and keeps the toast open
+    // (dismiss: false) so the choice stays on screen until it is resolved.
+    function onConflict() {
+      toast.warning("This note changed in another tab", {
+        title: "Conflict",
+        actions: [
+          {
+            label: "Keep mine",
+            onClick: function () { toast.success("Kept your version") }
+          },
+          {
+            label: "Discard",
+            tone: "danger",
+            dismiss: false,
+            onClick: function () {
+              window.dispatchEvent(new CustomEvent("demo:discard-note"))
+            }
+          }
+        ],
+        duration: 0
+      })
+    }
+
+    function discardNote() {
+      deletedNote = noteText
+      noteText = ""
+      toast.error("Your changes were discarded")
+    }
+
+    // Tones carry their own icon and colour, but any toast can override it.
+    // The class lives in this page source, so the app Tailwind/iconify build
+    // sees it and emits the rule -- a class from inside @wrnexus/ui would not
+    // be scanned, which is why the packaged defaults are inline SVG.
+    function onTrialNotice() {
+      toast.warning("Your trial ends in 3 days", {
+        title: "Heads up",
+        icon: "icon-[lucide--hourglass]",
+        actionLabel: "Upgrade",
+        duration: 6000
+      })
+    }
+
+    function onTermsConfirmed() {
+      toast.success("Thanks, you are all set")
+    }
+
+    // The invite form is a real <form data-schema="invite">, so
+    // @wrnexus/validation owns the rules: it validates on input/blur/submit
+    // against app/schemas/invite.ts, writes each message into the
+    // [data-error] slot the Input renders, and only then POSTs to /api/invite — which parses
+    // the very same schema server-side. These two handlers just react to the
+    // outcome events the validator emits.
+    function onInviteSent(event) {
+      toast.success("Invite sent to " + event.detail.email, { title: "Invitation" })
+      // Close the modal the form lives in. The event bubbles from the form up
+      // to the Modal root, which listens for it -- so the page never needs a
+      // handle on the modal or a way to reach its internal state.
+      event.target.dispatchEvent(
+        new CustomEvent("wrnexus:modal:close", { bubbles: true })
+      )
+    }
+
+    function onInviteFailed(event) {
+      toast.error(event.detail.message || "Could not send the invite", {
+        title: "Invite failed"
+      })
+    }
+  }
+
+  style {
+    .modal-demo-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 1rem;
+      margin-top: 1.5rem;
+    }
+
+    .modal-demo-card {
+      display: flex;
+      flex-direction: column;
+      gap: 0.6rem;
+      padding: 1.1rem;
+      background: var(--wire-color-surface-raised);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 1rem;
+    }
+
+    /*
+     * Direct children only. A modal mounts *inside* its card, and its panel is
+     * position: fixed but still a DOM descendant -- so a plain
+     * `.modal-demo-card p` also styles the copy inside the open modal, which
+     * repainted the destructive modal body muted grey on its red panel. The
+     * card is describing its own blurb here, not everything a component it
+     * hosts happens to render.
+     */
+    .modal-demo-card > h2 {
+      margin: 0;
+      font-size: 0.95rem;
+    }
+
+    .modal-demo-card > p {
+      margin: 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.82rem;
+      line-height: 1.5;
+    }
+
+    .modal-demo-form {
+      display: grid;
+      gap: 0.9rem;
+    }
+
+    .modal-demo-form-error {
+      margin: 0;
+      color: var(--wire-color-danger);
+      font-size: 0.8rem;
+    }
+
+    .modal-demo-form-error:empty {
+      display: none;
+    }
+
+    .modal-demo-submit {
+      appearance: none;
+      min-height: 2.55rem;
+      padding: 0.65rem 1rem;
+      color: var(--wire-color-secondary-contrast);
+      background: var(--wire-color-secondary);
+      border: 0;
+      border-radius: 0.78rem;
+      font: inherit;
+      font-size: 0.83rem;
+      font-weight: 650;
+      cursor: pointer;
+    }
+
+    .modal-demo-toast-demos {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-top: 1.75rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.82rem;
+    }
+
+    .modal-demo-note {
+      color: var(--wire-color-text-muted);
+    }
+
+    .modal-demo-note em {
+      color: var(--wire-color-text);
+      font-style: normal;
+    }
+
+    .modal-demo-toast-demos button {
+      appearance: none;
+      padding: 0.4rem 0.7rem;
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface-raised);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.6rem;
+      font: inherit;
+      font-size: 0.78rem;
+      cursor: pointer;
+    }
+
+    .modal-demo-submit:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .modal-demo-terms {
+      max-height: 12rem;
+      overflow-y: auto;
+      padding-right: 0.5rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.85rem;
+      line-height: 1.6;
+    }
+  }
+
+  view {
+    <h1>Modal</h1>
+    <p>
+      Five common use cases for the shared <code>@wrnexus/ui</code>
+      <code>Modal</code> component — themed, accessible, and responsive out
+      of the box.
+    </p>
+
+    <div class="modal-demo-grid">
+
+      <!-- 1. Info-only modal: no footer, dismiss via close button/backdrop/Escape -->
+      <div class="modal-demo-card">
+        <h2>Info modal</h2>
+        <p>No footer, no actions — just content you dismiss.</p>
+        <Modal
+          title="What's new"
+          description="Release notes for this build."
+          triggerLabel="View release notes"
+          color="info"
+          variant="soft"
+          size="sm"
+          showFooter={false}
+        >
+          <p>
+            This release adds the shared <code>@wrnexus/ui</code>
+            <code>Modal</code> component to every app, fully themed to your
+            palette and dark/light mode.
+          </p>
+        </Modal>
+      </div>
+
+      <!-- 2. Standard confirm/cancel modal -->
+      <div class="modal-demo-card">
+        <h2>Confirmation</h2>
+        <p>Cancel/confirm with a primary action.</p>
+        <Modal
+          title="Save changes?"
+          description="You have unsaved edits on this page."
+          triggerLabel="Save changes"
+          color="primary"
+          variant="soft"
+          size="md"
+          cancelLabel="Discard"
+          confirmLabel="Save"
+          closeOnConfirm={true}
+          @confirm="onSaveConfirmed()"
+        >
+          <p>Saving will overwrite the previously published version.</p>
+        </Modal>
+      </div>
+
+      <!-- 3. Destructive confirmation -->
+      <div class="modal-demo-card">
+        <h2>Destructive action</h2>
+        <p>Danger styling for irreversible actions.</p>
+        <Modal
+          title="Delete account"
+          description="This action cannot be undone."
+          triggerLabel="Delete account"
+          color="danger"
+          variant="solid"
+          destructive={true}
+          cancelLabel="Keep account"
+          confirmLabel="Delete account"
+          closeOnConfirm={true}
+          @confirm="onDeleteConfirmed()"
+        >
+          <p>
+            All of your data, projects, and billing history will be
+            permanently removed.
+          </p>
+        </Modal>
+      </div>
+
+      <!-- 4. Form modal. The form owns its own submit button, so the Modal
+           footer is turned off: @wrnexus/validation binds to form[data-schema]
+           and drives the whole flow (validate on input/blur, block submit
+           while invalid, POST to /api/invite, emit wire:success or
+           wire:error). Nothing here re-implements a rule that
+           app/schemas/invite.ts already states. -->
+      <div class="modal-demo-card">
+        <h2>Form modal</h2>
+        <p>Real Input fields, validated by the shared schema on both sides.</p>
+        <Modal
+          title="Invite a teammate"
+          description="They will get an email with a link to join."
+          triggerLabel="Invite teammate"
+          color="secondary"
+          variant="soft"
+          size="md"
+          showFooter={false}
+        >
+          <form
+            class="modal-demo-form"
+            data-schema="invite"
+            method="post"
+            action="/api/invite"
+            @wire:success="onInviteSent(event)"
+            @wire:error="onInviteFailed(event)"
+          >
+            <Input
+              name="email"
+              type="email"
+              label="Email address"
+              placeholder="teammate@company.com"
+              autocomplete="email"
+              icon="icon-[lucide--mail]"
+              required={true}
+              helperText="They will get a one-time link to join your workspace."
+            />
+            <Input
+              name="message"
+              label="Note (optional)"
+              placeholder="Looking forward to working with you"
+              maxlength="140"
+              icon="icon-[lucide--message-square]"
+              cornerHint="Optional"
+            />
+            <p class="modal-demo-form-error" data-error="_form"></p>
+            <button type="submit" class="modal-demo-submit">Send invite</button>
+          </form>
+        </Modal>
+      </div>
+
+      <!-- 5. Large scrollable content, backdrop-click disabled -->
+      <div class="modal-demo-card">
+        <h2>Scrollable content</h2>
+        <p>Larger size, scrollable body, no accidental backdrop dismiss.</p>
+        <Modal
+          title="Terms of service"
+          description="Please review before continuing."
+          triggerLabel="Read terms"
+          color="primary"
+          variant="outline"
+          size="lg"
+          scrollable={true}
+          closeOnBackdrop={false}
+          cancelLabel=""
+          confirmLabel="I agree"
+          closeOnConfirm={true}
+          @confirm="onTermsConfirmed()"
+        >
+          <div class="modal-demo-terms">
+            <p>
+              This is placeholder terms-of-service copy used to demonstrate a
+              tall, scrollable modal body. In a real app this slot would hold
+              your actual legal text.
+            </p>
+            <p>
+              1. You agree to use this framework responsibly. 2. Components
+              are provided as-is, themed to your app&#39;s palette. 3. Scrollable
+              modals keep the header and footer fixed while the body scrolls
+              independently, so long content never breaks the layout.
+            </p>
+            <p>
+              4. Clicking the backdrop will not close this particular modal —
+              that is controlled by the <code>closeOnBackdrop</code> prop,
+              set to <code>false</code> here on purpose so an explicit choice
+              is required. 5. Pressing Escape still works, since
+              <code>closeOnEscape</code> defaults to <code>true</code>.
+            </p>
+          </div>
+        </Modal>
+      </div>
+
+    </div>
+
+    <p class="modal-demo-toast-demos">
+      Toast tones:
+      <button type="button" @click='toast.success("Everything went through", { title: "Success" })'>success</button>
+      <button type="button" @click='toast.error("That did not work", { title: "Error" })'>danger</button>
+      <button type="button" @click='onTrialNotice()'>warning + custom icon</button>
+      <button type="button" @click='toast.info("Just so you know")'>info</button>
+    </p>
+
+    <p
+      class="modal-demo-toast-demos"
+      @window:demo:restore-note="restoreNote()"
+      @window:demo:discard-note="discardNote()"
+    >
+      Toast actions:
+      <button type="button" @click="onDeleteNote()">delete note (undo)</button>
+      <button type="button" @click="onConflict()">conflict (two actions)</button>
+      <span class="modal-demo-note">Note: <em data-show="noteText">{noteText}</em><em data-show="!noteText">(deleted)</em></span>
+    </p>
+
+    <!-- One host per page (a real app puts this in the layout). Every
+         toast() call anywhere on the page lands here. -->
+    <Toaster position="bottom-right" duration={4500} max={4} />
+
+  }
 }