Measure Pele render time on a phone and set the default diagram limits #522

Part of #521. Read the tracker first: its §Shared contract binds this issue. Work on main.

Summary

A throwaway measurement, outside the tracked tree, that sets the default limits for the new package (D10). It times Pele render plus DOMPurify sanitize across a size ladder. The maintainer then confirms on a real mid-range phone. The public API freezes only at this issue's checkpoint.

Rulings: 1, 10, 11, 12 (#521 §Maintainer rulings).

Files and interfaces

Files (all gitignored; H is REPO/Notes/local-docs/mermaid-measure)

• Create: H/package.json, H/index.html, H/bench.ts, H/examples.md (a copy of https://pele.run/examples.md).
• Create: the measure note, REPO/Notes/local-docs/<measure date>-mermaid-render-measure.md (<measure date> is this run's date, YYYY-MM-DD).

Interfaces

• Produces: DEFAULT_LIMITS = { characters: N, edges: M } for Scaffold @docs.plus/extension-mermaid with its types and the insertMermaid command #523; the starter row laptop p95 for the README (Write the extension-mermaid README, docs, assets and StackBlitz example #526); a check that PeleError.line reports editor lines. If L1 or L2 does not, record a finding (Add the Mermaid renderer, default view, styles and node view #524 adds the offset); the sanitize survival result for docs/security.md.

Measurement rules

• One sample is performance.now() around one synchronous mount(el, source, OPTIONS) on a fresh connected div (width min(720px, 100%)). OPTIONS.sanitize runs inside mount, so a sample is render plus sanitize, like durationMs. Destroy and remove the element after each sample.
• Before the first sample of a fixture, run detectType in try/catch and await load(type). Loading is never timed.
• One warm-up sample, then 50 timed samples. Yield with setTimeout(r, 0) between samples, and keep the tab in the foreground.
• Percentiles are nearest-rank. With 50 samples, p99 is the maximum.
• OPTIONS: { limit: 20000, maxEdges: 1000, outputLimit: 1000000, links: false, images: false, zoom: matchMedia('(pointer: coarse)').matches ? false : 'auto', sanitize, now: Date.UTC(2026, 0, 1) }, where sanitize is the D8 config ([Tracking] Mermaid diagrams in docs.plus through a headless Pele extension #521 §Shared contract → Behaviour) with dompurify 3.4.15.
• Ladder levels (characters/edges): 20000/1000, 15000/750, 10000/500, 5000/250.
• Fixtures:
  • starter: the [Tracking] Mermaid diagrams in docs.plus through a headless Pele extension #521 §Commands starter.
  • Seven grown fixtures (sequence, class, state, er, gantt, gitGraph, mindmap). Each grows one valid line at a time to just under the level's characters. The builder writes the templates.
  • flowchart-edges: flowchart TD plus exactly edges distinct edges.
  • Every ```mermaid block in examples.md, plus the source info.
• A grown fixture that does not reach ready at the top level is a harness defect. Fix its template. The one exception is error:limit(output), a real finding: the characters cap is above what outputLimit allows.
• Line probe: L0 flowchart LR\n A --> B\n B --> (error on editor line 3); L1 the same after a 3-line --- frontmatter (editor line 6); L2 the same after %%{init: {}}%% (editor line 4). Record PeleError.line and column.
• Sanitize probe: run mount with a capturing sanitize that keeps Pele's raw SVG string and the sanitized fragment. Use every examples.md block, info, and flowchart LR\n accTitle: Order flow\n accDescr: Two steps\n A --> B. In both trees, keep one count for each attribute name (id, style, class, role, aria-roledescription, aria-labelledby, aria-describedby), plus the <title> and <desc> element counts, and compare the root text. A mismatch is any single count that differs. It is a finding for the maintainer. Do not change the D8 config here.

Implementation steps

• Step 1: Install the harness and prove the repo is untouched.

  • Run curl -s https://registry.npmjs.org/pele/latest | grep -o '"version":"[^"]*"'. If it is newer than 1.6.0, use that version everywhere ([Tracking] Mermaid diagrams in docs.plus through a headless Pele extension #521 §Shared contract → Pele).
  • H/package.json: { "name": "mermaid-measure", "private": true, "type": "module", "dependencies": { "dompurify": "3.4.15", "pele": "1.6.0" } }.
  • First save git -C REPO status --porcelain to <scratchpad>/status-before.txt.
  • Run mkdir -p REPO/Notes/local-docs/mermaid-measure && cd REPO/Notes/local-docs/mermaid-measure && bun install, then curl -fsS https://pele.run/examples.md -o examples.md.
  • Run git -C REPO status --porcelain and git -C REPO diff --stat bun.lock. Expected: the status matches status-before.txt, and the diff prints nothing. Otherwise stop: Bun treated H as a workspace member.

• Step 2: Write H/index.html and H/bench.ts.

  • index.html holds <div id="host" style="width:min(720px,100%)">, <pre id="out"> and the module script ./bench.ts.
  • bench.ts imports only pele/lazy and dompurify, and examples.md as text: import examples from './examples.md' with { type: 'text' }. It has two modes: ?mode=time&label=<label> and ?mode=probe.
  • Time mode prints one line label=<label> zoom=<zoom> host=<px> viewport=<px>, then a table | fixture | level | chars | edges | first ms | p50 | p95 | p99 | state |, then DONE <label> <rows> rows. state is ready or error:<code>. Print error:limit(output) when the message starts with "Diagram output is longer".
  • Probe mode prints the line-probe table and the sanitize table (fixture | state | mismatches | text equal), then DONE probes.

• Step 3: Run the laptop timing. Run bun ./index.html in H. Open ?mode=time&label=laptop in desktop Chrome, with no throttle and DevTools closed. Expected: DONE laptop and zoom=auto.

• Step 4: Run the phone proxy. In DevTools, choose device mode Moto G Power and CPU 6× slowdown, then load ?mode=time&label=6x. Expected: DONE 6x, zoom=false, and a viewport near 412 px.

• Step 5: Run the probes. Load ?mode=probe with no throttle. Expected: DONE probes, no sanitize mismatch, and every text equal true. Record the actual values either way.

• Step 6: Apply the D10 rule.

  • A ladder row passes when its 6x p99 <= 200. A level passes when all its rows pass.
  • characters is the highest level where all seven grown fixtures pass. edges is the highest level where flowchart-edges passes.
  • A failing starter or example row is a finding. Lowering the limits does not fix it.
  • List every laptop p95 over 16 ms under "Spec gap: laptop gate scope". It never cuts the limits.
  • If no level passes, stop and ask the maintainer. D10 rules out a worker.

• Step 7: Write the measure note and post its verdict. Sections: Setup (machine, Chrome and Bun versions, the rules), Results (the two tables), D10 verdict (DEFAULT_LIMITS = { characters: N, edges: M } and the starter row laptop p95), Probes, Findings, and "Phone confirmation: Pending maintainer." Give the maintainer the Setup, D10 verdict, Probes and Findings sections to post on this issue.

• Step 8: Review checkpoint and maintainer gate.

  • Run git -C REPO status --porcelain. Expected: it matches status-before.txt.
  • The maintainer confirms on a real mid-range Android phone: serve with bun ./index.html, run adb reverse tcp:<port> tcp:<port>, and open http://localhost:<port>/?mode=time&label=phone in Chrome. Apply the Step 6 rule to the phone rows. If the phone gives lower limits, the phone wins.
  • Stop. Scaffold @docs.plus/extension-mermaid with its types and the insertMermaid command #523 starts after the maintainer confirms the limits and rules on the laptop gap (R1).

Decisions

• R1. Do the phone numbers win when they give lower limits, and are laptop p95 rows over 16 ms findings only? Recommended: yes to both. The design names no consequence for the laptop number.

Acceptance criteria

• The posted comment holds the Setup, D10 verdict and Findings sections, with N and M.
• The maintainer has posted the phone confirmation and the R1 ruling on this issue.
• git -C REPO status --porcelain matched status-before.txt at the checkpoint.