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>

editors/vscode/src/extension.bundle.cjs

@@ -1,4 +1,4 @@
-// WRN editor extension source hash: 825c406dea4b196976b1b6e53b3c71c3263bd63f403acdaf2fe7e5ad174275da
+// WRN editor extension source hash: 174fee91d6ec09c86f71f1204aeb46a20e5a563cc8af1484051d68dde01c8e10
 // WRN editor extension generator hash: 456d1d614e44e5fb1f19b784176c09cf2ade9b64ef73a17934c2698150b62728
 "use strict";
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
@@ -23204,10 +23204,16 @@ ${(0, codegen_ts_1.generate)(ast)}`,
       }
       function functionEntry(ast, fn, availableFunctions) {
         const parameterNames = new Set(fn.parameters.map((parameter) => parameter.name));
-        const stateNames = ast.states.filter((state) => state.runtime !== "server" && safeIdentifier(state.name) && !RUNTIME_BINDINGS.has(state.name) && !parameterNames.has(state.name)).map((state) => state.name);
+        const declaredLocals = new Set;
+        for (const match of fn.body.matchAll(/\b(?:var|let|const)\s+([A-Za-z_$][\w$]*)|\bfunction\s+([A-Za-z_$][\w$]*)/g)) {
+          const name = match[1] ?? match[2];
+          if (name)
+            declaredLocals.add(name);
+        }
+        const stateNames = ast.states.filter((state) => state.runtime !== "server" && safeIdentifier(state.name) && !RUNTIME_BINDINGS.has(state.name) && !parameterNames.has(state.name) && !declaredLocals.has(state.name)).map((state) => state.name);
         const stateSet = new Set(stateNames);
-        const propNames = ast.props.filter((prop) => safeIdentifier(prop.name) && !RUNTIME_BINDINGS.has(prop.name) && !parameterNames.has(prop.name) && !stateSet.has(prop.name)).map((prop) => prop.name);
-        const functionAliases = availableFunctions.filter((name) => safeIdentifier(name) && !RUNTIME_BINDINGS.has(name) && !parameterNames.has(name) && !stateSet.has(name) && !propNames.includes(name));
+        const propNames = ast.props.filter((prop) => safeIdentifier(prop.name) && !RUNTIME_BINDINGS.has(prop.name) && !parameterNames.has(prop.name) && !stateSet.has(prop.name) && !declaredLocals.has(prop.name)).map((prop) => prop.name);
+        const functionAliases = availableFunctions.filter((name) => safeIdentifier(name) && !RUNTIME_BINDINGS.has(name) && !parameterNames.has(name) && !stateSet.has(name) && !propNames.includes(name) && !declaredLocals.has(name));
         const parameters = fn.parameters.map((parameter) => parameter.name).join(", ");
         const initialStateSnapshot = stateNames.length ? `const __wrnexusInitialState = { ${stateNames.map((name) => `${JSON.stringify(name)}: context.state.${name}`).join(", ")} };` : "";
         const stateAliases = stateNames.length ? `let { ${stateNames.join(", ")} } = context.state;` : "";
@@ -23404,6 +23410,12 @@ export function bindClientScope(context) {
         }
         return `data-on-${name}`;
       }
+      function componentEventAttribute(name) {
+        if (name.startsWith("window:") || name.startsWith("document:") || name.startsWith("browser-") || name.startsWith("mobile-")) {
+          return eventAttribute(name);
+        }
+        return `data-wrn-out-${name}`;
+      }
       function reactiveAttrValue(raw, reactive) {
         let found = false;
         const value = raw.replace(/\{([^{}]+)\}/g, (whole, inner) => {
@@ -23527,7 +23539,7 @@ export function bindClientScope(context) {
         }
         const componentTag = isComponentTag(node.tag);
         const attrs = node.attrs.filter((attr) => attr.name !== "data-component").map((attr) => {
-          const name = attr.event ? eventAttribute(attr.name) : attr.name;
+          const name = attr.event ? componentTag ? componentEventAttribute(attr.name) : eventAttribute(attr.name) : attr.name;
           if (attr.boolean) {
             return escLit(` ${name}`);
           }
@@ -23699,7 +23711,7 @@ export function bindClientScope(context) {
             return `\${__wireSpreadAttrs(${ctx.resolveExpr(spread[1])})}`;
           }
           if (attr.event) {
-            return escLit(` ${eventAttribute(attr.name)}="`) + escLit(attrEscape(attr.value)) + escLit(`"`);
+            return escLit(` ${componentEventAttribute(attr.name)}="`) + escLit(attrEscape(attr.value)) + escLit(`"`);
           }
           if (attr.boolean) {
             return ` ${attr.name}`;
@@ -24751,6 +24763,9 @@ ${handlers.join(`
               const referencesLoopVariable2 = elementContext.loopVars ? exprRefsState(a.value, elementContext.loopVars) : false;
               const referencesServerLocal2 = ctx.serverLocals ? exprRefsState(a.value, ctx.serverLocals) : false;
               const marker2 = referencesState2 || referencesLoopVariable2 || referencesServerLocal2 ? ` data-wrn-bind-${bindIndex++}="${escLit(attrEscape(JSON.stringify([a.name, a.value])))}"` : "";
+              if (referencesLoopVariable2) {
+                return ` data-wrn-bind-${bindIndex++}="${escLit(attrEscape(JSON.stringify([a.name, a.value])))}"`;
+              }
               return `\${__wireBooleanAttr(${JSON.stringify(a.name)}, ${elementContext.resolveExpr(expression)})}${marker2}`;
             }
             if (a.value === "false")
@@ -24759,6 +24774,9 @@ ${handlers.join(`
               return ` ${a.name}`;
           }
           const wholeExpression = wholeAttributeExpression(a.value);
+          if (a.name === "data-show" && wholeExpression) {
+            return ` data-show="${escLit(attrEscape(wholeExpression))}"`;
+          }
           const compiledValue = isExplicitComponentMount && wholeExpression ? `\${__wireProp(${elementContext.resolveExpr(wholeExpression)})}` : compileAttrValue(a.value, elementContext);
           const rendered = ` ${a.name}="${compiledValue}"`;
           const referencesState = exprRefsComponentReactiveValue(a.value, ctx);
@@ -25054,7 +25072,10 @@ function __wireSpreadAttrs(value: any): string {
       lowerName === "style" ||
       lowerName === "slot" ||
       lowerName === "data-component" ||
-      lowerName.startsWith("data-wrn")
+      // Internal markers must not leak through a spread -- except the
+      // parent's output handlers, whose whole job is to ride from the mount
+      // onto the view root so the mounting scope can bind them there.
+      (lowerName.startsWith("data-wrn") && !lowerName.startsWith("data-wrn-out-"))
     ) {
       continue;
     }
@@ -25173,7 +25194,7 @@ function __wireRaw(v: any): string {
       }
       function renderPageComponentAttr(attr, dynamicExpressions) {
         if (attr.event) {
-          return ` ${eventAttribute(attr.name)}="${attrEscape(attr.value)}"`;
+          return ` ${componentEventAttribute(attr.name)}="${attrEscape(attr.value)}"`;
         }
         if (attr.boolean) {
           return ` ${attr.name}`;
@@ -28961,6 +28982,7 @@ ${serverFunctions}
           let depth = 0;
           let i = this.pos;
           let str = null;
+          let atLineStart = false;
           for (;i < src.length; i++) {
             const c = src[i];
             if (str) {
@@ -28972,6 +28994,29 @@ ${serverFunctions}
                 str = null;
               continue;
             }
+            if (c === `
+`) {
+              atLineStart = true;
+              continue;
+            }
+            if (c === "/" && src[i + 1] === "*") {
+              const close = src.indexOf("*/", i + 2);
+              if (close === -1)
+                break;
+              i = close + 1;
+              atLineStart = false;
+              continue;
+            }
+            if (atLineStart && c === "/" && src[i + 1] === "/") {
+              const newline = src.indexOf(`
+`, i + 2);
+              if (newline === -1)
+                break;
+              i = newline - 1;
+              continue;
+            }
+            if (c !== " " && c !== "\t" && c !== "\r")
+              atLineStart = false;
             if (c === '"' || c === "'" || c === "`") {
               str = c;
               continue;