fix(website): drawer structure + PretableSurface measurement loop (#63)

Bug 1 — Drawer architecture: DrawerHandle and Drawer were siblings in
page.tsx, so when the drawer-wrap was upgraded to fixed/peek-56px, the
handle stayed in document flow and the peek was empty. Nest DrawerHandle
inside Drawer's drawer-wrap so they share the upgrade and the handle
becomes the visible peek.

Bug 2 — Render loop: PretableSurface's row-height measurement
useLayoutEffect had no deps, so after its own setMeasuredHeights
triggered a re-render, the effect re-fired against the new DOM, and
under high-churn streaming with wrap:true rows it never reached a
fixed point — hitting React's "Maximum update depth exceeded" guard
and crashing the page on first render. Gate the effect on
[snapshot.visibleRows, columns, viewportWidth] so it only re-measures
when something that could legitimately change row metrics has changed.

Also: drop unused onTelemetryChange callback from HeroGrid (was a
new-each-render arrow that compounded the loop), restore RATE_PER_SEC
to 1000 (the marketing wedge claim), restore wrap:true on the message
column, and seed 30 initial rows so the grid isn't blank before the
first rAF flush.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: blove

apps/website/app/components/Drawer.tsx

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from "react";
 
+import { DrawerHandle } from "./DrawerHandle";
 import { useDrawer } from "./useDrawer";
 
 interface DrawerProps {
@@ -12,6 +13,7 @@ export function Drawer({ children }: DrawerProps) {
   const { close } = useDrawer();
   return (
     <div className="drawer-wrap" data-testid="drawer">
+      <DrawerHandle />
       <div
         aria-label="More about pretable"
         className="drawer-content overflow-y-auto bg-bg-page"

apps/website/app/components/HeroGrid.tsx

@@ -1,9 +1,6 @@
 "use client";
 
-import {
-  PretableSurface,
-  type PretableTelemetry,
-} from "@pretable-internal/react-surface";
+import { PretableSurface } from "@pretable-internal/react-surface";
 import { useEffect, useRef, useState } from "react";
 
 import { type HeroEvent, heroEventLog } from "./heroGrid/eventLog";
@@ -12,6 +9,7 @@ import styles from "./heroGrid/heroGrid.module.css";
 
 const RATE_PER_SEC = 1000;
 const VISIBLE_BUFFER_ROWS = 200;
+const SEED_ROW_COUNT = 30;
 
 const columns = [
   { id: "timestamp", header: "Time", widthPx: 92, pinned: "left" as const },
@@ -32,10 +30,19 @@ interface DisplayRow {
   [key: string]: unknown;
 }
 
+function buildSeedRows(count: number): DisplayRow[] {
+  return heroEventLog.slice(0, count).map((entry, index) => ({
+    ...entry,
+    __sequence: index,
+    id: `seed-${index}`,
+  }));
+}
+
 export function HeroGrid() {
-  const [rows, setRows] = useState<DisplayRow[]>([]);
+  const [rows, setRows] = useState<DisplayRow[]>(() =>
+    buildSeedRows(SEED_ROW_COUNT),
+  );
   const [paused, setPaused] = useState(false);
-  const telemetryRef = useRef<PretableTelemetry | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -49,29 +56,37 @@ export function HeroGrid() {
         heroEventLog.slice(0, 50).map((entry, index) => ({
           ...entry,
           __sequence: index,
+          id: `seed-${index}`,
         })),
       );
       return;
     }
 
+    let pending: DisplayRow[] = [];
     const replay = createHeroReplay({
       ratePerSec: RATE_PER_SEC,
       onEmit: (event: HeroEvent, sequence: number) => {
-        setRows((prev) => {
-          const next = [
-            { ...event, __sequence: sequence, id: `seq-${sequence}` },
-            ...prev,
-          ];
-          return next.length > VISIBLE_BUFFER_ROWS
-            ? next.slice(0, VISIBLE_BUFFER_ROWS)
-            : next;
+        pending.push({
+          ...event,
+          __sequence: sequence,
+          id: `seq-${sequence}`,
         });
       },
     });
 
     let raf = 0;
     const loop = (timestampMs: number) => {
       replay.tickAtMs(timestampMs);
+      if (pending.length > 0) {
+        const batch = pending;
+        pending = [];
+        setRows((prev) => {
+          const next = [...batch.reverse(), ...prev];
+          return next.length > VISIBLE_BUFFER_ROWS
+            ? next.slice(0, VISIBLE_BUFFER_ROWS)
+            : next;
+        });
+      }
       raf = requestAnimationFrame(loop);
     };
     raf = requestAnimationFrame(loop);
@@ -107,9 +122,6 @@ export function HeroGrid() {
           ariaLabel="Pretable streaming demo"
           columns={columns}
           getRowId={(row: DisplayRow) => row.id}
-          onTelemetryChange={(t) => {
-            telemetryRef.current = t;
-          }}
           rows={rows}
           viewportHeight={520}
         />

apps/website/app/components/__tests__/Drawer.test.tsx

@@ -1,4 +1,10 @@
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
 
 import { Drawer } from "../Drawer";
@@ -23,9 +29,17 @@ describe("Drawer", () => {
     expect(screen.getByText("Marketing content")).toBeInTheDocument();
   });
 
-  it("renders a close button labelled Close", () => {
+  it("renders an internal close button", () => {
     render(<Drawer>x</Drawer>);
-    expect(screen.getByRole("button", { name: /close/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /^close$/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("nests the DrawerHandle inside the drawer-wrap so the peek is the handle", () => {
+    render(<Drawer>x</Drawer>);
+    const wrap = screen.getByTestId("drawer");
+    expect(within(wrap).getByTestId("drawer-handle")).toBeInTheDocument();
   });
 });
 

apps/website/app/components/heroGrid/heroGrid.module.css

@@ -15,6 +15,7 @@
   gap: 10px;
   padding: 10px 24px;
   background: rgba(255, 248, 241, 0.75);
+  -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   border-bottom: 1px solid rgba(180, 83, 9, 0.15);
   font-family: var(--font-mono, ui-monospace, monospace);

apps/website/app/page.tsx

@@ -2,7 +2,6 @@ import { CodeExample } from "./components/CodeExample";
 import { ComparisonTable } from "./components/ComparisonTable";
 import { CtaSection } from "./components/CtaSection";
 import { Drawer } from "./components/Drawer";
-import { DrawerHandle } from "./components/DrawerHandle";
 import { FeatureGrid } from "./components/FeatureGrid";
 import { HeroGrid } from "./components/HeroGrid";
 import { HowItWorks } from "./components/HowItWorks";
@@ -15,7 +14,6 @@ export default function HomePage() {
     <>
       <main>
         <HeroGrid />
-        <DrawerHandle />
         <Drawer>
           <ReceiptsBand />
           <ScrollReveal>

packages/react-surface/src/pretable-surface.tsx

@@ -279,7 +279,12 @@ export function PretableSurface<TRow extends PretableRow = PretableRow>({
       // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: measuring DOM in useLayoutEffect requires synchronous state update
       setMeasuredHeights(nextHeights);
     }
-  });
+    // Deps: only re-run when something that could legitimately change row
+    // measurements has changed. Without these deps, the effect re-runs on
+    // every render — including the re-render triggered by its own
+    // setMeasuredHeights call — which under high-churn streaming with
+    // wrap:true rows can hit React's "Maximum update depth" guard.
+  }, [snapshot.visibleRows, columns, viewportWidth]);
 
   return (
     <div