Centina Compass

Install

Compass ships as a packaged download — there is no Chrome Web Store listing during the alpha, so it loads through Chrome's developer mode.

1. Download and unzip the latest release:

1curl -fsSLO "https://get.centina.build/centina-compass-v$(curl -fsSL https://get.centina.build/compass-latest).zip"
2unzip centina-compass-v*.zip

This produces a centina-compass/ folder. Keep it somewhere stable — Chrome loads the extension from this folder, so deleting it disables the extension. To verify the download, fetch the matching .zip.sha256 from the same address and check it with shasum -a 256 -c.

2. Load it into Chrome:

1. Open chrome://extensions (type it in the address bar)
2. Toggle Developer mode on (top-right corner)
3. Click Load unpacked (top-left) and select the unzipped centina-compass/ folder — the one containing manifest.json
4. A card appears: Centina Compass

3. Pin it: click the puzzle-piece icon next to Chrome's address bar, find Centina Compass, click the pin. The icon is how you start a capture.

Updating: download and unzip the new release over the same folder (or replace the folder), then click the circular-arrow reload button on the extension's card in chrome://extensions.

Use

1. Visit any website and click the toolbar icon — the picker toolbar drops in at the top of the page
2. Hover to target an element · ↑ widens to its parent, ↓ steps back down · click or ⏎ captures the target · ⌘⏎ captures the whole page · esc cancels (a second icon click also dismisses)
3. Hovering also shades the target's box model DevTools-style — orange margin bands, blue padding bands, with px values where the bands are thick enough to hold them. Press I to pin the target: a tracing-paper veil settles over the page and the whole subtree is drawn as a measured redline plate — the plate is the whole readout: box strokes over margin/padding bands with their value chips, every sibling gap bracketed, dimension ladders composing the root's width and height, the pinned element's tag titling the drawing, its material facts (fill, border, radius, shadows, fx, signed negative margins) riding the callout column, flex/grid boxes wearing their layout glyphs, and one callout per distinct text style. Plate geometry is painted px; callouts speak CSS values. ↑/↓ move the pin; click/⏎ still capture (the pinned element); esc or I unpins
4. Press T (from hover, or on a pinned plate) for the typography layer, drawn in its own green ink: the veil opens a window so the pinned section's letterforms read at full ink, a baseline hairline underlines every rendered line (always inside the redline box, never through it), each style's first line wears its yellow x-height and purple cap-height rules with measured x/cap labels in the same inks at the rules' right ends, baseline-to-baseline leading is dimensioned in the right gutter (labeled only where the value changes — the left margin belongs to the box lens), and multi-line blocks close with ~N cpl (average characters per full line, flagged narrow under 35 / wide over 75). The layer draws no callouts — every fact is a rule or a dim on the type itself. I and T compose: each key toggles its own layer on the shared pin — magenta box redline, green type readout, or both at once (the box lens keeps speaking identity in its callout column). Toggling the last lit layer off unpins; esc always unpins
5. The toolbar confirms "Copied N nodes — ⌘V in Centina"
6. Switch to the Centina app and press ⌘V on the canvas. The capture lands as real editable boxes — selected, positioned in your view, one undo step.

Troubleshooting

• The icon does nothing — Chrome won't inject on its own pages (chrome://…, Web Store, blank tabs) or on pages opened before the extension was (re)loaded. Use a normal website and refresh it first.
• **Capturing from a file:// page** — enable "Allow access to file URLs" on the extension's card. Note the captured <img> srcs will be file:// URLs, which the app (served over http) cannot display — serve the page over http instead (python3 -m http.server in its directory).
• Images disappear later / offline — captures reference images by URL. Ask an agent to run the embed_images MCP tool on the pasted subtree to inline them as data URIs (see the MCP guide).
• Text wraps differently than the source — webfonts don't travel with a capture. Box heights are frozen so the drift stays contained; typography is otherwise faithful (family stack, size, weight, spacing).

Known v1 limits

Cross-origin iframes aren't captured (same-origin and srcdoc frames ARE — the picker targets through them and they paste as clipping boxes; at most 24 frames per capture, the toolbar says when any were skipped past that budget). Shadow DOM captures as the rendered (flat) tree — web components paste as the boxes they draw, slots resolved, unassigned light children dropped. Webfonts don't travel; pseudo-elements don't exist in the walked DOM; capture at 100% page zoom. Page capture (⌘⏎) scroll-sweeps to load lazy content, but the sweep is bounded to the page's initial height and ~25 screenfuls — an infinite feed captures what existed when you pressed ⌘⏎, not what more scrolling would have loaded. Fixed chrome (navs, banners, floating pills) pastes at its viewport position over the first screenful; fixed content the page reveals by scrolling over it (z-reveal footers) pastes where full scroll shows it. Infinite animations freeze at whatever frame the capture caught (a marquee's current offset); scroll-triggered entrances that never fired paste visible, not opacity-0. Inspect-overlay box-model bands are skipped for elements whose own transform rotates or skews (the highlight stays honest; bands would misalign) and corrected for uniform scale, but a rotated ancestor can still skew band alignment — and the typography lens's horizontal baselines with it — while callout values stay correct either way. The pinned plate (both lenses) treats iframes as opaque boxes (no interior annotations), skips sticky/fixed descendants, and does not track page-driven animation between rebuilds — re-pin (I·I or ↑/↓) refreshes; plate geometry is painted px while callouts keep CSS computed values. Type-lens specifics: vertical writing modes and skewed blocks keep their callout but wear no baselines; ::first-line styling is invisible to computed style; canvas font metrics can't apply font-variation-settings, so a variable-axis override may shift the measured x/cap heights slightly; ~cpl is a width-weighted average of full lines, not an exact count.