@

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/api/accounts.ts

@@ -0,0 +1,90 @@
+// API route: GET /api/accounts — a paged, sorted, filtered slice of a dataset.
+//
+// This is the server half of the DataTable `load` contract. The table sends
+// page, pageSize, sortKey, sortDirection and query, and expects `rows` for
+// that page plus `total` for the whole matching set. The total has to come
+// from here: the table only ever sees one page and cannot count the rest.
+import type { Context } from "@wrnexus/core";
+
+interface Account {
+  id: number;
+  name: string;
+  plan: string;
+  owner: string;
+  seats: number;
+  renewsOn: string;
+}
+
+const PLANS = ["Scale", "Team", "Enterprise", "Starter"];
+const OWNERS = ["A. Okafor", "R. Silva", "M. Chen", "J. Dubois", "P. Novak"];
+const NAMES = [
+  "Northwind",
+  "Acme Industrial",
+  "Globex",
+  "Initech",
+  "Umbrella",
+  "Stark Labs",
+  "Wayne Foods",
+  "Soylent",
+  "Hooli",
+  "Vehement",
+  "Massive Dynamic",
+  "Cyberdyne",
+  "Tyrell",
+  "Aperture",
+  "Black Mesa",
+  "Oceanic",
+  "Weyland",
+  "Gringotts",
+  "Duff Brewing",
+  "Prestige Worldwide",
+  "Bluth Company",
+  "Pied Piper",
+];
+
+// Deterministic so paging is stable across requests.
+const ACCOUNTS: Account[] = NAMES.map((name, index) => ({
+  id: index + 1,
+  name,
+  plan: PLANS[index % PLANS.length]!,
+  owner: OWNERS[index % OWNERS.length]!,
+  seats: ((index * 13) % 240) + 4,
+  renewsOn: new Date(Date.UTC(2026, index % 12, ((index * 5) % 27) + 1)).toISOString().slice(0, 10),
+}));
+
+export function GET(ctx: Context): Response {
+  const params = ctx.url.searchParams;
+  const page = Math.max(1, Number(params.get("page")) || 1);
+  const pageSize = Math.min(100, Math.max(1, Number(params.get("pageSize")) || 10));
+  const query = (params.get("query") ?? "").trim().toLowerCase();
+  const sortKey = params.get("sortKey") ?? "";
+  const descending = params.get("sortDirection") === "desc";
+
+  let matched = ACCOUNTS;
+  if (query) {
+    matched = matched.filter((account) =>
+      [account.name, account.plan, account.owner, account.renewsOn].some((field) =>
+        field.toLowerCase().includes(query),
+      ),
+    );
+  }
+
+  if (sortKey) {
+    const direction = descending ? -1 : 1;
+    matched = [...matched].sort((left, right) => {
+      const a = left[sortKey as keyof Account];
+      const b = right[sortKey as keyof Account];
+      if (typeof a === "number" && typeof b === "number") return (a - b) * direction;
+      return String(a).localeCompare(String(b)) * direction;
+    });
+  }
+
+  const start = (page - 1) * pageSize;
+
+  return Response.json({
+    rows: matched.slice(start, start + pageSize),
+    total: matched.length,
+    page,
+    pageSize,
+  });
+}

examples/basic-app/app/api/invite.ts

@@ -0,0 +1,26 @@
+// API route: POST /api/invite. Validates the body with the SAME schema the
+// modal's invite form uses in the browser, so a request that bypasses the
+// client (curl, a replayed fetch, a stale page) is held to identical rules.
+//
+// There is no mail provider wired up in the example, so a successful parse
+// just echoes the invite back. The point being demonstrated is the shared
+// schema and the client/server round trip, not delivery.
+import { verifyCsrf, type Context } from "@wrnexus/core";
+import { parseBody } from "@wrnexus/validation";
+import invite from "../schemas/invite.ts";
+
+export async function POST(ctx: Context): Promise<Response> {
+  if (!verifyCsrf(ctx)) return new Response("Invalid CSRF token", { status: 403 });
+
+  const result = await parseBody(invite, ctx.req);
+  if (!result.ok) return result.response; // 400 { ok:false, errors } — rendered per field
+
+  const { email, message } = result.value as { email: string; message?: string };
+
+  return Response.json({
+    ok: true,
+    email,
+    message: message ?? "",
+    sentAt: new Date().toISOString(),
+  });
+}