GENERAL NOTES

Method. The page is the vanilla sample app's contacts state, /app/contacts and then one contact at /app/contacts/fruiz, served from its built dist and measured in headless Chromium at 1280 × 900 and 390 × 844 after document.fonts.ready settles: getBoundingClientRect for every box, getComputedStyle for every padding, margin, border, radius and flex. The visualizer and the API docs are switched off, so the routed page stands alone. census-document.mjs writes the readings to census-document.json, reads each declared rule out of styles.css at origin/main @ 3f55e419, and stops when a selector is missing or a formula misses the page by half a pixel. The build is this branch's at eca2d156, whose apps/ and packages/ match 3f55e419 file for file. The idiom is dimensional-drawing by enesozturk (MIT), after Apple's accessory dimensional drawings: codes on the drawing, every code a row of a schedule, derived values written as formulas, nothing invented. The atlas sets it in its own chrome, in both themes, with colour kept editorial.

One geometry for four apps. The four sample apps take their stylesheet and their pages from sample-app-shared, and their 4 built stylesheets are byte-identical (6,128 bytes, sha-256 2575db0b00a9e455…). Each app writes its own shell, and the 4 shells carry the same markup: a nav of uiSref tabs and three <ui-view> slots in <main>. The shared pages hold four more, the root view and the nested ones inside contacts and messages. The tab padding is Bootstrap 3.3.7's, which the apps load from a CDN; every other spacing on the plate is the shared stylesheet's.

What the drawing says. Under the nav, the shell's named <ui-view name="contacts"> fills the page. Inside it the contact list carries no width of its own: it hugs its longest name at W1 = 176.31 px at both widths, and its height is a sum, H6 = 2·S6 + H7 + LH + N·H2, over 25 rows. The nested <ui-view> is unnamed and flexes into the rest of the row, W2 = VW − W1; the contact's content sits inset in it by S9 and S10, and every link on the page — tab, row, action — carries uiSref and hugs its label. At 390 the nav wraps to two rows, H4 = H1 + H3 − 2·M1 + B, and the list row wraps too: the nested view drops under the list and takes the full line, so the page grows to H10 below a fold at VH2.

Sheet 1's plates are this page's layers. Sheet 1 raises its document as plates from the window to the link; the stack at the lower right is the same climb, measured: window, body, #root, <ui-router>, the root <ui-view>, the shell's named view, the nested view and the active row's link, each at its real rectangle and its depth in the DOM. A layer stack is honest here because the page really is layered. Sheet 1 letters its window /people with a named detail view; the sample app's own names are contacts for the view the shell fills and none for the nested one the detail lands in.