feat(website): PMS portfolio cockpit hero — streaming, interactions, and grid fixes

README.md

@@ -3,10 +3,11 @@
 [![CI](https://github.com/cacheplane/pretable/actions/workflows/ci.yml/badge.svg)](https://github.com/cacheplane/pretable/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/license-MIT-2563eb.svg)](./LICENSE)
 
-Pretable is a React data grid for AI product teams that need to render messy,
-high-signal data: chat transcripts, eval results, support queues, research
-tables, tool-call logs, and other text-heavy workflows where fixed-height rows
-break down.
+Pretable is a React data grid for teams rendering live, high-signal data: a
+portfolio cockpit where prices tick beside an AI analyst's streaming commentary,
+agent transcripts, eval results, support queues, and other workflows that mix
+dense numbers with wrapped, variable-height text where fixed-height rows break
+down.
 
 It focuses on wrapped text, variable row heights, column virtualization,
 streaming-compatible updates, keyboard/selection primitives, and a small public
@@ -90,6 +91,8 @@ streaming responses, nested metadata, and high-frequency inspection workflows.
 
 Pretable is built around that shape:
 
+- Live numbers and streaming AI narrative coexist in one grid — ticking prices
+  beside wrapped, variable-height analyst text, with no row drift.
 - Variable-height rows and wrapped content are first-class.
 - Column virtualization is part of the proof surface, not a later add-on.
 - Sorting, filtering, focus, copy, and selection live in a framework-neutral

apps/website/__tests__/components/DrawerHero.test.tsx

@@ -21,7 +21,9 @@ describe("DrawerHero", () => {
     expect(
       screen.getByRole("heading", { level: 1, name: /fastest data grid/i }),
     ).toBeInTheDocument();
-    expect(screen.getByText(/60fps under streaming load/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/60fps under live market load/i),
+    ).toBeInTheDocument();
   });
 
   it("renders all three CTAs: copy prompt + npm install + docs link", () => {

apps/website/app/components/ColumnLayoutShowcase.tsx

@@ -0,0 +1,26 @@
+import { ColumnLayoutGrid } from "./showcase/ColumnLayoutGrid";
+
+export function ColumnLayoutShowcase() {
+  return (
+    <section
+      id="column-layout"
+      className="text-text-primary px-7 py-16 md:px-10 md:py-28"
+    >
+      <div className="mx-auto max-w-[1240px]">
+        <p className="font-mono text-[11px] uppercase tracking-[0.14em] text-accent">
+          09 · columns, your way
+        </p>
+        <h2 className="mt-4 font-display text-[36px] leading-[1.05] tracking-[-0.025em] md:text-[44px]">
+          Resize and reorder. <em className="italic text-accent">Built in.</em>
+        </h2>
+        <p className="mt-5 max-w-[64ch] font-display text-[17px] leading-[1.55] text-text-secondary">
+          Drag a column border to resize, drag a header to reorder — no config,
+          no plugins. Make a mess, then hit reset.
+        </p>
+        <div className="mt-10">
+          <ColumnLayoutGrid />
+        </div>
+      </div>
+    </section>
+  );
+}

apps/website/app/components/DrawerHero.tsx

@@ -34,9 +34,9 @@ export function DrawerHero() {
           Built for the AI era.
         </h1>
         <p className="mx-auto mt-5 max-w-[56ch] font-display text-[17px] leading-[1.55] text-text-secondary">
-          60fps under streaming load. Zero row drift. A deterministic engine
-          designed for live data, agent output, and real-time telemetry — not
-          retrofitted from a batch-era grid.
+          60fps under live market load. Zero row drift while an AI analyst
+          streams wrapped commentary beside ticking prices — the grid built for
+          live, AI-augmented data, not retrofitted from a batch-era table.
         </p>
         <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
           <CopyPromptButton prompt={DRAWER_HERO_PROMPT} />
@@ -51,6 +51,9 @@ export function DrawerHero() {
         <p className="mt-8 font-mono text-[11px] text-text-muted">
           MIT licensed · open source
         </p>
+        <p className="mt-2 font-mono text-[10px] text-text-muted">
+          Demo uses illustrative, synthetic market data — not investment advice.
+        </p>
       </div>
     </section>
   );