rocicorp · arv · Feb 27, 2026 · Feb 27, 2026
diff --git a/demo/App.module.css b/demo/App.module.css
@@ -1,19 +1,28 @@
 .page {
   font-family: system-ui, sans-serif;
   margin: 0;
-  padding: 0 16px;
   height: 100vh;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   box-sizing: border-box;
   position: relative;
 }
 
+.list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-block: 8px;
+  white-space: nowrap;
 }
 
 .heading {
@@ -23,12 +32,28 @@
   display: flex;
   align-items: baseline;
   gap: 8px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.headingText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex-shrink: 1;
 }
 
 .itemCount {
   font-size: 14px;
   font-weight: 400;
   color: #666;
+  flex-shrink: 999;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .subtitle {
@@ -59,6 +84,7 @@
   top: 0;
   left: 0;
   width: 100%;
+  cursor: pointer;
 }
 
 .rowIndex {
@@ -73,12 +99,19 @@
   flex: 1;
   font-size: 14px;
   font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .rowValue {
   font-size: 13px;
   color: #444;
   font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  flex-shrink: 0;
+  width: 160px;
+  text-align: right;
 }
 
 .row[aria-selected='true'] {

diff --git a/demo/App.tsx b/demo/App.tsx
@@ -2,7 +2,7 @@ import {useZeroVirtualizer} from '@rocicorp/zero-virtual/react';
 import {useCallback, useMemo, useRef, useState} from 'react';
 import styles from './App.module.css';
 import {ItemCount} from './ItemCount.tsx';
-import {PermalinkNotFoundWarning} from './PermalinkNotFoundWarning.tsx';
+import {ItemDetail} from './ItemDetail.tsx';
 import {queries, type ItemStart, type ListContextParams} from './queries.ts';
 import type {Item} from './schema.ts';
 import {SortControls} from './SortControls.tsx';
@@ -73,77 +73,79 @@ export function App() {
     [listContextParams],
   );
 
-  const {virtualizer, rowAt, estimatedTotal, total, permalinkNotFound} =
-    useZeroVirtualizer({
-      listContextParams,
-      getScrollElement,
-      getRowKey,
-      estimateSize,
-      getPageQuery,
-      getSingleQuery,
-      toStartRow,
-      permalinkID,
-    });
+  const {virtualizer, rowAt, estimatedTotal, total} = useZeroVirtualizer({
+    listContextParams,
+    getScrollElement,
+    getRowKey,
+    estimateSize,
+    getPageQuery,
+    getSingleQuery,
+    toStartRow,
+    permalinkID,
+  });
 
   const virtualItems = virtualizer.getVirtualItems();
 
   return (
     <div className={styles.page}>
-      <PermalinkNotFoundWarning
-        show={permalinkNotFound}
-        permalinkID={permalinkID}
-      />
-      <div className={styles.header}>
-        <h1 className={styles.heading}>
-          Zero Virtual Demo
-          <ItemCount total={total} estimatedTotal={estimatedTotal} />
-        </h1>
-        <SortControls
-          sortField={sortField}
-          sortDirection={sortDirection}
-          onToggleSortField={toggleSortField}
-          onToggleSortDirection={toggleSortDirection}
-        />
-      </div>
-      {/* Scrollable viewport */}
-      <div ref={parentRef} className={styles.viewport}>
-        {/* Total height spacer */}
-        <div style={{height: virtualizer.getTotalSize(), position: 'relative'}}>
-          {virtualItems.map(virtualRow => {
-            const row = rowAt(virtualRow.index);
-
-            if (row === undefined) {
-              // placeholder
+      <div className={styles.list}>
+        <div className={styles.header}>
+          <h1 className={styles.heading}>
+            <span className={styles.headingText}>Zero Virtual Demo</span>
+            <ItemCount total={total} estimatedTotal={estimatedTotal} />
+          </h1>
+          <SortControls
+            sortField={sortField}
+            sortDirection={sortDirection}
+            onToggleSortField={toggleSortField}
+            onToggleSortDirection={toggleSortDirection}
+          />
+        </div>
+        {/* Scrollable viewport */}
+        <div ref={parentRef} className={styles.viewport}>
+          {/* Total height spacer */}
+          <div
+            style={{height: virtualizer.getTotalSize(), position: 'relative'}}
+          >
+            {virtualItems.map(virtualRow => {
+              const row = rowAt(virtualRow.index);
+
+              if (row === undefined) {
+                // placeholder
+                return (
+                  <div
+                    key={virtualRow.key}
+                    data-index={virtualRow.index}
+                    className={styles.row}
+                    style={{transform: `translateY(${virtualRow.start}px)`}}
+                  >
+                    <span className={styles.rowLabel}>Loading...</span>
+                  </div>
+                );
+              }
+
               return (
                 <div
                   key={virtualRow.key}
                   data-index={virtualRow.index}
                   className={styles.row}
                   style={{transform: `translateY(${virtualRow.start}px)`}}
+                  aria-selected={row.id === permalinkID || undefined}
+                  onClick={() => setHash(row.id === permalinkID ? '' : row.id)}
                 >
-                  <span className={styles.rowLabel}>Loading...</span>
+                  <span className={styles.rowLabel}>{row.title}</span>
+                  <span className={styles.rowValue}>
+                    {dateFormatter.format(row[sortField])}
+                  </span>
                 </div>
               );
-            }
-
-            return (
-              <div
-                key={virtualRow.key}
-                data-index={virtualRow.index}
-                className={styles.row}
-                style={{transform: `translateY(${virtualRow.start}px)`}}
-                aria-selected={row.id === permalinkID || undefined}
-                onClick={() => setHash(row.id === permalinkID ? '' : row.id)}
-              >
-                <span className={styles.rowLabel}>{row.title}</span>
-                <span className={styles.rowValue}>
-                  {dateFormatter.format(row[sortField])}
-                </span>
-              </div>
-            );
-          })}
+            })}
+          </div>
         </div>
       </div>
+      {permalinkID && (
+        <ItemDetail id={permalinkID} onClose={() => setHash('')} />
+      )}
     </div>
   );
 }
diff --git a/demo/ItemDetail.module.css b/demo/ItemDetail.module.css
@@ -0,0 +1,73 @@
+.panel {
+  width: 360px;
+  flex-shrink: 0;
+  border-left: 1px solid #ddd;
+  padding: 16px 24px 24px;
+  overflow: auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.close {
+  align-self: flex-end;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  color: #888;
+  padding: 4px 8px;
+  border-radius: 4px;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.close:hover {
+  background: #f0f0f0;
+  color: #222;
+}
+
+.empty {
+  margin: auto;
+  color: #999;
+  font-size: 14px;
+  font-family: system-ui, sans-serif;
+  text-align: center;
+}
+
+.title {
+  font-family: system-ui, sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0 0 12px;
+}
+
+.description {
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+  color: #444;
+  margin: 24px 0;
+  line-height: 1.6;
+}
+
+.meta {
+  font-family: system-ui, sans-serif;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 16px;
+  font-size: 13px;
+  margin: 0;
+}
+
+.meta dt {
+  font-weight: 600;
+  color: #555;
+}
+
+.meta dd {
+  margin: 0;
+  color: #222;
+  font-variant-numeric: tabular-nums;
+  word-break: break-all;
+}
diff --git a/demo/ItemDetail.tsx b/demo/ItemDetail.tsx
@@ -0,0 +1,57 @@
+import {useQuery} from '@rocicorp/zero/react';
+import React from 'react';
+import styles from './ItemDetail.module.css';
+import {queries} from './queries.ts';
+
+const dateFormatter = new Intl.DateTimeFormat(undefined, {
+  dateStyle: 'long',
+  timeStyle: 'medium',
+});
+
+type Props = {
+  id: string;
+  onClose: () => void;
+};
+
+export function ItemDetail({id, onClose}: Props) {
+  const [item, {type}] = useQuery(queries.item.getSingleQuery({id}));
+
+  let content: React.ReactNode;
+
+  if (!item) {
+    switch (type) {
+      case 'complete':
+        content = <p className={styles.empty}>Item not found. {id}</p>;
+        break;
+      case 'error':
+        content = <p className={styles.empty}>Error loading item. {id}</p>;
+        break;
+      default:
+        content = <p className={styles.empty}>Loading…</p>;
+    }
+  } else {
+    content = (
+      <>
+        <h2 className={styles.title}>{item.title}</h2>
+        <dl className={styles.meta}>
+          <dt>ID</dt>
+          <dd>{item.id}</dd>
+          <dt>Created</dt>
+          <dd>{dateFormatter.format(item.created)}</dd>
+          <dt>Modified</dt>
+          <dd>{dateFormatter.format(item.modified)}</dd>
+        </dl>
+        <p className={styles.description}>{item.description}</p>
+      </>
+    );
+  }
+
+  return (
+    <div className={styles.panel}>
+      <button className={styles.close} onClick={onClose} aria-label="Close">
+        ✕
+      </button>
+      {content}
+    </div>
+  );
+}