Claude Code transcript - page 11/11

tables rendered: 1

sheet1 name: January drawables: 1 tables: 1
types: ['table']

(3095, 645)
Shell cwd was reset to /Users/phebert/pnk

viewer built: viewer/dist/  (serve: cd viewer && npm run serve)

  6 passed (1.6s)

NO DEFECTS.

(Bash completed with no output)

4 files changed, 12 insertions(+), 10 deletions(-)

1 file changed, 62 insertions(+)
   38c264c..09cb423  main -> main

87:  if (doc.pageSize) {
88:    frame.style.aspectRatio = `${doc.pageSize.width} / ${doc.pageSize.height}`;
91:    // scale: pages render at a fixed 720px logical width, scaled responsively
92:    const scale = 720 / doc.pageSize.width;
93:    inner.style.width = `${doc.pageSize.width}px`;
94:    inner.style.height = `${doc.pageSize.height}px`;
99:    inner.style.marginLeft = `${-doc.pageSize.width * scale / 2}px`;
104:    frame.style.height = `${doc.pageSize.height * scale}px`;
110:    inner.style.width = "720px";
146: *  (TP.DocumentArchive page_width/height 30/31, margins 32-35 [proto]). */
157:  const ps = doc.pageSize;
158:  if (!ps || !(ps.width > 0) || !(ps.height > 0)) return null;
164:  const contentW = ps.width - left - right;
167:  return { w: ps.width, h: ps.height, left, top, contentW, contentH };
186: * width, then greedily packed into page frames of the printable height.
192: * column-by-column (column-fill: auto), measured at the column width and
210:  const pageSizedDrawables = (p: (typeof body.paragraphs)[number]): Drawable[] | null => {
211:    let pageSized = false;
219:      if (sz.width >= g.w * 0.85 && sz.height >= g.h * 0.85) pageSized = true;
221:    return pageSized ? positioned : null;
29:  body .sheet-area, body .pages-flow, body .notes-panel, body .error-card { color: #1d1d1f; }
30:  body .sheet-area, body .pages-flow { background: #ffffff; border-color: #d2d2d7; }
348:.sheet-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
354:.sheet-area { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; overflow: auto; }
370:.pages-flow {
374:.pages-flow h1, .pages-flow h2, .pages-flow h3,
375:.pages-flow h4, .pages-flow h5, .pages-flow h6 { margin: 0.6em 0 0.3em; }
376:.pages-flow p { margin: 0.4em 0; }
392:/* Word-processing pagination: .pages-print is the printable area inside a
397:.pages-print { display: flow-root; color: #1d1d1f; line-height: 1.2; font-size: 11px; }
398:.pages-print p { margin: 0; }
399:.pages-print h1, .pages-print h2, .pages-print h3,
400:.pages-print h4, .pages-print h5, .pages-print h6 { margin: 0; }
401:.pages-wp-page { margin: 18px auto; max-width: 720px; }
411:.pages-print p, .pages-print h1, .pages-print h2, .pages-print h3,
412:.pages-print h4, .pages-print h5, .pages-print h6,
413:.pages-print .list-item { white-space: pre-wrap; tab-size: 36px; }
430:.pages-print .field[data-field-kind="footnote-mark"] { vertical-align: super; font-size: 0.7em; }

80	  ctx: ViewerCtx,
81	  drawables: Drawable[],
82	  pageIndex: number | undefined,
83	  templateDrawables?: Drawable[],
84	): HTMLElement {
85	  const frame = document.createElement("div");
86	  frame.className = "canvas-frame pages-page";
87	  if (doc.pageSize) {
88	    frame.style.aspectRatio = `${doc.pageSize.width} / ${doc.pageSize.height}`;
89	    const inner = document.createElement("div");
90	    inner.className = "canvas-inner";
91	    // scale: pages render at a fixed 720px logical width, scaled responsively
92	    const scale = 720 / doc.pageSize.width;
93	    inner.style.width = `${doc.pageSize.width}px`;
94	    inner.style.height = `${doc.pageSize.height}px`;
95	    inner.style.transform = `scale(${scale})`;
96	    inner.style.position = "absolute";
97	    inner.style.top = "0";
98	    inner.style.left = "50%";
99	    inner.style.marginLeft = `${-doc.pageSize.width * scale / 2}px`;
100	    // template underlay paints first, beneath the page's own drawables
101	    for (const d of templateDrawables ?? []) inner.appendChild(renderCanvasDrawable(d, hdoc, ctx));
102	    for (const d of drawables) inner.appendChild(renderCanvasDrawable(d, hdoc, ctx));
103	    frame.appendChild(inner);
104	    frame.style.height = `${doc.pageSize.height * scale}px`;
105	    frame.dataset.pageIndex = pageIndex === undefined ? "" : String(pageIndex);
106	  } else {
107	    const inner = document.createElement("div");
108	    inner.className = "canvas-inner";
109	    inner.style.position = "relative";
110	    inner.style.width = "720px";
111	    inner.style.minHeight = "400px";
112	    for (const d of templateDrawables ?? []) inner.appendChild(renderCanvasDrawable(d, hdoc, ctx));
113	    for (const d of drawables) inner.appendChild(renderCanvasDrawable(d, hdoc, ctx));
114	    frame.appendChild(inner);
115	  }
116	  return frame;
117	}
118	
119	function floatingSection(

93:    inner.style.width = `${doc.pageSize.width}px`;
95:    inner.style.transform = `scale(${scale})`;
110:    inner.style.width = "720px";
263:  // transform scaling does not affect layout metrics, so these heights match
282:      wrap.className = "pages-print";
392:    frame.className = "canvas-frame pages-page pages-wp-page";
401:    inner.style.width = `${g.w}px`;
403:    inner.style.transform = `scale(${scale})`;
419:    content.className = "pages-print";
423:    content.style.width = `${g.contentW}px`;
444:      area.className = "pages-footnote-area pages-print";
446:      area.style.width = `${g.contentW}px`;
480:        h.style.width = `${g.contentW}px`;
487:        f.style.width = `${g.contentW}px`;

385	      footnotesByPage.set(pg, list);
386	    });
387	  }
388	
389	  const scale = 720 / g.w;
390	  for (let i = 0; i < pageCount; i++) {
391	    const frame = document.createElement("div");
392	    frame.className = "canvas-frame pages-page pages-wp-page";
393	    frame.style.aspectRatio = `${g.w} / ${g.h}`;
394	    frame.style.height = `${g.h * scale}px`;
395	    // clip at the paper edge like Pages (full-bleed covers store images
396	    // taller than the page: 00C's is 1155pt on a 1024pt page)
397	    frame.style.overflow = "hidden";
398	    frame.dataset.pageIndex = String(i);
399	    const inner = document.createElement("div");
400	    inner.className = "canvas-inner";
401	    inner.style.width = `${g.w}px`;
402	    inner.style.height = `${g.h}px`;
403	    inner.style.transform = `scale(${scale})`;
404	    inner.style.position = "absolute";
405	    inner.style.top = "0";
406	    inner.style.left = "50%";
407	    inner.style.marginLeft = `${-g.w * scale / 2}px`;
408	
409	    // floating drawables first: behind the body text, like Apple's default
410	    for (const d of floatingByPage.get(i) ?? []) {
411	      inner.appendChild(renderCanvasDrawable(d, hdoc, ctx));
412	    }
413	    // full-bleed cover drawables paint at page coordinates (not inset)
414	    for (const d of fullBleedByPage.get(i) ?? []) {

91:    // scale: pages render at a fixed 720px logical width, scaled responsively
92:    const scale = 720 / doc.pageSize.width;
110:    inner.style.width = "720px";
119:function floatingSection(
389:  const scale = 720 / g.w;
508:export function renderPages(doc: PagesDocument, hdoc: HydratedDoc, ctx: ViewerCtx, mount: HTMLElement): void {
531:    floatingSection(doc, hdoc, ctx, view, leading, wordProcessing ? "Cover page" : "Pages");
544:    floatingSection(doc, hdoc, ctx, view, trailing, "Floating objects");

508	export function renderPages(doc: PagesDocument, hdoc: HydratedDoc, ctx: ViewerCtx, mount: HTMLElement): void {
509	  const view = document.createElement("div");
510	  view.id = "pages-view";
511	
512	  const wordProcessing = doc.flavor === "word-processing";
513	  const geom = pageGeom(doc);
514	
515	  if (wordProcessing && doc.body && geom) {
516	    // paginated word-processing render: page frames + margins. Footnotes
517	    // render at their anchor pages' bottoms unless the document asks for
518	    // endnotes (footnotePlacement: section/document endnotes).
519	    paginatedBody(doc, hdoc, ctx, view);
520	    if (doc.footnotePlacement) appendFootnotes(doc, hdoc, ctx, view);
521	    mount.appendChild(view);
522	    applyTextFit(view);
523	    return;
524	  }
525	
526	  // document order: floating groups anchored to page 1 (a cover) belong
527	  // above the flowing body; later pages trail it
528	  const leading = doc.floating.filter((g) => (g.pageIndex ?? 0) === 0);
529	  const trailing = doc.floating.filter((g) => (g.pageIndex ?? 0) !== 0);
530	  if (!wordProcessing || doc.body) {
531	    floatingSection(doc, hdoc, ctx, view, leading, wordProcessing ? "Cover page" : "Pages");
532	  }
533	
534	  if (wordProcessing && doc.body) {
535	    const flow = document.createElement("article");
536	    flow.className = "pages-flow";
537	    const listState = newListNumberingState();
538	    for (const p of doc.body.paragraphs) flow.appendChild(renderParagraph(p, hdoc, ctx, listState));
539	    view.appendChild(flow);
540	    appendFootnotes(doc, hdoc, ctx, view);
541	  }
542	
543	  if (trailing.length > 0) {
544	    floatingSection(doc, hdoc, ctx, view, trailing, "Floating objects");
545	  }
546	  mount.appendChild(view);
547	  // measurement pass (attached): bounded shrink absorbs font-metric drift
548	  applyTextFit(view);
549	}
550	
551	function appendFootnotes(doc: PagesDocument, hdoc: HydratedDoc, ctx: ViewerCtx, view: HTMLElement): void {
552	  if (!doc.footnotes?.length) return;

The file /Users/phebert/pnk/viewer/src/pages.ts has been updated successfully. (file state is current in your context — no need to Read it back)

The file /Users/phebert/pnk/viewer/src/pages.ts has been updated successfully. (file state is current in your context — no need to Read it back)

The file /Users/phebert/pnk/viewer/src/pages.ts has been updated successfully. (file state is current in your context — no need to Read it back)

The file /Users/phebert/pnk/viewer/src/pages.ts has been updated successfully. (file state is current in your context — no need to Read it back)

.drawable-text h4, .drawable-text h5, .drawable-text h6,
.drawable-text .list-item { white-space: pre-wrap; tab-size: 36px; }
/* Apple has no implicit paragraph margins in shape/textbox text either —
   the UA's 1em <p> margin read as a phantom blank line between consecutive
   paragraphs (G2's caption box). Spacing comes only from spaceBefore/After
   on the paragraph style. */
.drawable-text p, .drawable-text h1, .drawable-text h2, .drawable-text h3,
.drawable-text h4, .drawable-text h5, .drawable-text h6 { margin: 0; }
349:.sheet-tab {
350-  border-radius: 8px 8px 0 0; border-bottom: 3px solid transparent; padding: 6px 16px;
351-}
352-.sheet-tab.active { border-bottom-color: var(--accent); font-weight: 600; background: var(--card); }

viewer built: viewer/dist/  (serve: cd viewer && npm run serve)

  6 passed (1.6s)

The file /Users/phebert/pnk/viewer/styles.css has been updated successfully. (file state is current in your context — no need to Read it back)

viewer built: viewer/dist/  (serve: cd viewer && npm run serve)

2 files changed, 29 insertions(+), 5 deletions(-)
   09cb423..6985d83  main -> main

AGENTS.md
CLAUDE.md
docs/CONFORMANCE.md
docs/model-design.md
docs/model-review.md
README.md
      83 README.md
# pnk

**Client-side Apple iWork document viewer** — open `.pages`, `.numbers`, and
`.key` files entirely in your browser. Drop a file, it's parsed in-page from the
raw file bytes by Rust compiled to WebAssembly, rendered as JSON, and displayed.
No account, no login, no email, no upload — nothing ever leaves your machine.

Built for [Hackyard Yard #1](https://hackyard.tech/yards/yard-1) ("no accounts",
48-hour solo build).

## What it does

- **Drag & drop** a Keynote / Numbers / Pages document (iWork '13 and newer,
  flat file or package directory) onto the page.
- It is parsed **in your browser** by a Rust pipeline compiled to WebAssembly:
  ZIP container → Snappy-compressed IWA streams → protobuf (TSP) object
  database → a typed JSON document model.
- The viewer renders that JSON: Keynote slides with positioned shapes, images
  and presenter notes; Numbers sheets with styled tables; Pages word-processing
  flow with headings, paragraphs, and floating covers.
- Friendly error cards for the things it deliberately refuses: password-protected
  files (`.iwph` / `.iwpv2` — we never ask for a password) and legacy pre-2013
  iWork formats.
- **Zero network calls after load** — asserted in the Playwright gate. No
  accounts, no analytics, no server.

## Quick start

```bash
# viewer (TS + esbuild, no framework)
cd viewer && npm install && npm run build && npm run serve

# CLI converters
cargo build --release
target/release/pnk2json document.pages > out.json      # compact JSON
target/release/pnk2json document.numbers --markdown    # readable fallback
```

Playwright gate: `cd viewer && npm install && npm run build && npm test`.

## Repo layout

| path | what |
| --- | --- |
| `crates/iwadump` | Rust CLI structure inspector for iWork '13+ documents |
| `crates/pnk2json` | converter lib + wasm binding + text/markdown dumpers |
| `viewer/` | vanilla-TS web app consuming `pnk2json.wasm` |
| `model/src/` | the TypeScript contract the JSON output obeys (strict tsc) |
| `docs/format/` | provenance-tagged iWork format reference — start at `INDEX.md` |
| `docs/CONFORMANCE.md` | how correctness is proven; corpus + cross-validation results |
| `scripts/` | research tooling, conformance + cross-validation harnesses |
| `fixtures/` | local corpus (gitignored; `provenance.json` committed) |

## How the format works (short version)

An iWork '13+ file is a ZIP whose `Index.zip` holds `.iwa` members: sequences
of Snappy-compressed blocks wrapping protobuf messages — a small object database
(TSWP text, TST tables, TSD drawables, TSCH charts, TSCE formulas, KN Keynote,
TSP shared storage). We decode it from scratch in Rust; every format claim in
`docs/format/` is provenance-tagged (`proto` / `parser` / `fixture-verified` /

`docs/format/` is provenance-tagged (`proto` / `parser` / `fixture-verified` /
`inferred`). Start at [`docs/format/INDEX.md`](docs/format/INDEX.md).

## Verification

- `scripts/conformance.py` — the whole corpus × JSON + markdown: 2,488 ok,
  8 controlled encrypted rejects, 0 defects; timing stays linear.
- `scripts/crossval.py` — every file's embedded QuickLook preview (rendered by
  Apple's own importer) is compared against our output: table censuses, text
  tokens, empty-grid detection. 960/968 clean; every flag investigated.
- Viewer gate: one real fixture per app, encrypted + legacy error cards, and an
  assertion that **zero non-blob network requests** occur after load — the
  no-upload theme, enforced by test.

## Status

Built for Hackyard Yard #1 (2026-08-28/30). See `docs/CONFORMANCE.md` for the
reliability work and `docs/model-design.md` for the JSON model rationale.

## License

Dual-licensed under [MIT](LICENSE-MIT) or [Apache-2.0](LICENSE-APACHE), at your
option. Format research is documented with per-claim provenance and source
commit hashes in `docs/format/`.
# Conformance & Reliability — pnk2json

How we prove the converter is correct and fast, and the specs for hand-built
golden fixtures (built by a human in the real apps, asserted in tests).

## 1. Corpus harness

```bash
cargo build --release
python3 scripts/conformance.py --mode both   # json + markdown over all of success.tsv
```

Verdicts per (fixture, mode): `ok`, `ok:encrypted-reject` (exit 1 with
password/encryption wording), or defects (`DEFECT:*`, `TIMEOUT`, `PANIC`,
`MISSING_FILE`). JSON report lands in `fixtures/conformance-report.json`
(regenerable, not committed).

### Corpus health (2026-08-28, CC-MAIN-2026-34, 1,248 files × 2 modes)

| metric | value |
| --- | --- |
| verdicts | 2,488 ok + 8 ok:encrypted-reject (4 files × 2 modes) |
| defects | **0** (no panics, no timeouts, no unexpected rejects) |
| wall (json mode) | 24.3 s total; median 8.3 ms; p95 39.5 ms; max 2.59 s |
| throughput | median 241 MB/s of input |
| time↔size Pearson r | 0.30 — **no super-linear timing** |

### Findings

1. **JSON amplification on table-heavy Numbers files** — the one reliability
# pnk JSON Document Model — Design Notes

The JSON the pnk pipeline emits (Rust `pnk2json` → TS viewer). The model is for a
**reader/viewer, not an editor**: everything is resolved, flattened, and
self-contained. Source of truth for the format is `docs/format/` (start at
`INDEX.md`); this doc says how that format maps onto the model in
`model/src/*.ts`.

Files:

| file | contents |
|---|---|
| `model/src/primitives.ts` | colors, geometry, fills/shadows/strokes, curve primitives, resolved text styles, units + conventions |
| `model/src/shared.ts` | root envelope, TSWP text model, TSD drawable union, TST table model, TSCH chart model, TSCE placeholder |
| `model/src/pages.ts` | `PagesDocument` — both flavors (word-processing / page-layout) |
| `model/src/numbers.ts` | `NumbersDocument` — sheets as canvases |
| `model/src/keynote.ts` | `KeynoteDocument` — show → slides, masters resolved |

---

## 1. Conventions

### 1.1 Units (everywhere, no exceptions)

| quantity | unit | JSON shape | source |
ATTRIBUTION.md
calcengine.md
charts.md
container.md
drawables.md
gotchas.md
incremental.md
INDEX.md
iwa.md
keynote.md

{
  "name": "pnk-viewer",
  "version": "0.1.0",
  "private": true,
  "description": "Zero-backend in-browser viewer for iWork documents (.pages/.numbers/.key) via pnk2json.wasm",
  "type": "module",
  "scripts": {
    "build": "bash ../scripts/build_viewer.sh",
    "serve": "node_modules/.bin/esbuild --servedir=dist --serve=127.0.0.1:8123 --log-level=warning",
    "typecheck": "tsc --noEmit -p tsconfig.json",
    "test": "npm run typecheck && playwright test"
  },
  "devDependencies": {
    "@playwright/test": "1.62.1",
    "esbuild": "^0.25.0"
  }
}#!/usr/bin/env bash
# Build the pnk viewer (viewer/ -> viewer/dist/), fully static:
#   1. cargo builds pnk2json-wasm for wasm32-unknown-unknown
#   2. wasm-bindgen --target web emits JS glue + .wasm into viewer/dist/wasm
#   3. the generated glue is vendored into viewer/src/wasm/ (committed; the
#      tiny JS file is deterministic for a given wasm-bindgen version) so
#      esbuild can bundle `import init from "./wasm/pnk2json_wasm.js"`
#   4. esbuild bundles viewer/src/main.ts -> viewer/dist/main.js
#   5. the static shell (index.html, styles.css) is copied to viewer/dist/
#
# Prerequisites: cargo, wasm-bindgen 0.2.127 on PATH; `npm install` run once
# inside viewer/ (esbuild + playwright devDependencies).
#
# Output layout (viewer/dist/): index.html  styles.css  main.js  wasm/*.wasm
set -euo pipefail

ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
cd "$ROOT"

ESBUILD="$ROOT/viewer/node_modules/.bin/esbuild"
LICENSE-APACHE
LICENSE-MIT
     204

1	# pnk
2	
3	**Client-side Apple iWork document viewer** — open `.pages`, `.numbers`, and
4	`.key` files entirely in your browser. Drop a file, it's parsed in-page from the
5	raw file bytes by Rust compiled to WebAssembly, rendered as JSON, and displayed.
6	No account, no login, no email, no upload — nothing ever leaves your machine.
7	
8	Built for [Hackyard Yard #1](https://hackyard.tech/yards/yard-1) ("no accounts",
9	48-hour solo build).
10	
11	## What it does
12	

The file /Users/phebert/pnk/README.md has been updated successfully. (file state is current in your context — no need to Read it back)

__pycache__
app_export_pdf.sh
build_viewer.sh
conformance.py
crossval.py
docs_fetch_sources.py
fixtures_downloadall.py
fixtures_ec2_runbook.md
fixtures_queryindex.py
visual_diff.py
1
# iWork File Format Reference — INDEX

Reference documentation for the Apple iWork '13+ file format (`.pages`,
`.numbers`, `.key`), as used by the **pnk** viewer. Built during phase 1 from
primary sources: protobuf definitions extracted from the locally installed

The file /Users/phebert/pnk/docs/model-review.md has been updated successfully. (file state is current in your context — no need to Read it back)

2 files changed, 59 insertions(+), 52 deletions(-)
   6985d83..bf44ba7  main -> main

The file /Users/phebert/pnk/README.md has been updated successfully. (file state is current in your context — no need to Read it back)

1 file changed, 1 insertion(+), 1 deletion(-)
   bf44ba7..dd5d81b  main -> main
?? crates/pnk2json/examples/
?? fixtures/templates/keynote/
?? fixtures/templates/numbers/