complete framework remediation validation

packages/ui/component-catalog.json

@@ -1,7 +1,5 @@
 {
-  "sourceDocuments": [
-    "Screenshot-directed WRNexus UI catalog reset"
-  ],
+  "sourceDocuments": ["Screenshot-directed WRNexus UI catalog reset"],
   "components": [
     {
       "name": "Accordion",

packages/ui/components/DataTable.wrn

@@ -121,7 +121,7 @@ component DataTable {
   state query = ""
   state sortKey = ""
   state sortDirection = "asc"
-  state page = 1
+  state paginationPage = 1
   state perPage = pageSize
   state selectedKeys = []
   state remoteRows = []
@@ -273,7 +273,7 @@ component DataTable {
     // page number past the end, and a table showing nothing with rows
     // available is worse than one that quietly lands on the last page.
     shared function currentPage() {
-      return Math.min(Math.max(1, Number(page) || 1), pageCount())
+      return Math.min(Math.max(1, Number(paginationPage) || 1), pageCount())
     }
 
     shared function visibleRows() {
@@ -576,7 +576,7 @@ component DataTable {
         sortKey = key
         sortDirection = "asc"
       }
-      page = 1
+      paginationPage = 1
       output.sort({ key: sortKey, direction: sortDirection })
       reload()
       output.change(viewState())
@@ -584,7 +584,7 @@ component DataTable {
 
     client function updateQuery(sourceEvent) {
       query = sourceEvent.target.value
-      page = 1
+      paginationPage = 1
       output.search({ query: query })
       reload()
       output.change(viewState())
@@ -592,7 +592,7 @@ component DataTable {
 
     client function goToPage(next) {
       var target = Math.min(Math.max(1, next), pageCount())
-      page = target
+      paginationPage = target
       output.pageChange({ page: target, pageSize: Number(perPage) || 10 })
       reload()
       output.change(viewState())
@@ -602,7 +602,7 @@ component DataTable {
     // takes the Dropdown select detail directly.
     client function pickPageSize(detail) {
       perPage = Number(detail && detail.value) || 10
-      page = 1
+      paginationPage = 1
       output.pageChange({ page: 1, pageSize: perPage })
       reload()
       output.change(viewState())
@@ -613,7 +613,7 @@ component DataTable {
     // clicks.
     client function clearSearch() {
       query = ""
-      page = 1
+      paginationPage = 1
       output.search({ query: "" })
       reload()
     }

packages/ui/test/ui.test.ts

@@ -3227,7 +3227,12 @@ test("list selects items without hrefs as well as navigation items", async () =>
 test("chart renders accessible SVG bars and emits point and legend outputs", async () => {
   const source = readFileSync(uiComponentPath("Chart"), "utf8");
   const dom = mountHtml(
-    await renderComponent(source, { items: [{ label: "Alpha", value: 12 }, { label: "Beta", value: 6 }] }),
+    await renderComponent(source, {
+      items: [
+        { label: "Alpha", value: 12 },
+        { label: "Beta", value: 6 },
+      ],
+    }),
   );
   const root = dom.querySelector('[data-ui-component="Chart"]') as HTMLElement;
   const events: string[] = [];
@@ -3251,7 +3256,8 @@ test("tree view expands branches, selects nodes, and emits public outputs", asyn
   );
   const root = dom.querySelector('[data-ui-component="TreeView"]') as HTMLElement;
   const events: string[] = [];
-  for (const name of ["toggle", "expand", "select"]) root.addEventListener(name, () => events.push(name));
+  for (const name of ["toggle", "expand", "select"])
+    root.addEventListener(name, () => events.push(name));
   (root.querySelector(".wire-tree-view__toggle") as HTMLButtonElement).click();
   expect(root.querySelector(".wire-tree-view__group")?.getAttribute("data-show")).toBe("true");
   (root.querySelector('[aria-level="2"] .wire-tree-view__node') as HTMLButtonElement).click();
@@ -3259,7 +3265,12 @@ test("tree view expands branches, selects nodes, and emits public outputs", asyn
 });
 
 test("confetti completes deferred bursts and clipboard reports successful copies", async () => {
-  const confetti = mountHtml(await renderComponent(readFileSync(uiComponentPath("Confetti"), "utf8"), { duration: 5, count: 4 }));
+  const confetti = mountHtml(
+    await renderComponent(readFileSync(uiComponentPath("Confetti"), "utf8"), {
+      duration: 5,
+      count: 4,
+    }),
+  );
   const confettiRoot = confetti.querySelector('[data-ui-component="Confetti"]') as HTMLElement;
   const confettiEvents: string[] = [];
   confettiRoot.addEventListener("start", () => confettiEvents.push("start"));
@@ -3268,14 +3279,19 @@ test("confetti completes deferred bursts and clipboard reports successful copies
   await new Promise((resolve) => setTimeout(resolve, 15));
   expect(confettiEvents).toEqual(["start", "complete"]);
 
-  const clipboard = mountHtml(await renderComponent(readFileSync(uiComponentPath("Clipboard"), "utf8"), { value: "npm add wrnexus" }));
+  const clipboard = mountHtml(
+    await renderComponent(readFileSync(uiComponentPath("Clipboard"), "utf8"), {
+      value: "npm add wrnexus",
+    }),
+  );
   Object.defineProperty((clipboard.window as { navigator: object }).navigator, "clipboard", {
     configurable: true,
     value: { writeText: () => Promise.resolve() },
   });
   const clipboardRoot = clipboard.querySelector('[data-ui-component="Clipboard"]') as HTMLElement;
   const clipboardEvents: string[] = [];
-  for (const name of ["copy", "success"]) clipboardRoot.addEventListener(name, () => clipboardEvents.push(name));
+  for (const name of ["copy", "success"])
+    clipboardRoot.addEventListener(name, () => clipboardEvents.push(name));
   (clipboardRoot.querySelector("button") as HTMLButtonElement).click();
   await new Promise((resolve) => setTimeout(resolve, 0));
   expect(clipboardEvents).toEqual(["copy", "success"]);