One page scroll bar and American English

app.js

@@ -175,21 +175,23 @@ function kitCommand(row) {
 function setCard(r) {
   $('c-kicker').textContent = `${r.scroll}${r.volume ? ' · VOLUME ' + r.volume : ''}${r.voxel_um ? ' · ' + r.voxel_um + ' µm' : ''}`;
   $('c-title').textContent = r.segment + (r.kind !== 'mesh' ? ' (' + r.mesh + ')' : '');
-  const items = r.error ? [['not measured', r.error]] : [
+  // one line per number, so the card fits beside the list without a scroll bar of its own
+  const dd = (v, cls = '') => `<dd${cls ? ` class="${cls}"` : ''}>${esc(String(v))}</dd>`;
+  const flag = (k, mm2, nodes) => `<dt>${k}</dt>${dd(fmt(mm2), 'v')}${dd((nodes || 0).toLocaleString(), 'u')}`;
+  $('c-nums').innerHTML = r.error ? `<dt>not measured</dt>${dd(r.error, 'wrap')}` : [
     ['area', r.area_cm2 == null ? '-' : fmt(r.area_cm2) + ' cm²'],
     ['grid', `${r.grid_w} x ${r.grid_h}`],
     ['filled', pct(r.filled_share)],
-    ['edges within 10% of the step', pct(r.within_10pct)],
+    ['edges within 10%', pct(r.within_10pct)],
     ['median edge / step', fmt(r.edge_p50, 3)],
-    ['grid angle (median)', fmt(r.angle_p50, 1) + '°'],
-    ['holes', `${fmt(r.holes_mm2)} mm² (${(r.holes_nodes || 0).toLocaleString()} nodes)`],
-    ['folds', `${fmt(r.folds_mm2)} mm² (${(r.folds_nodes || 0).toLocaleString()} nodes)`],
-    ['stretched', `${fmt(r.stretched_mm2)} mm² (${(r.stretched_nodes || 0).toLocaleString()} nodes)`],
+    ['median grid angle', fmt(r.angle_p50, 1) + '°'],
     ['area vs meta.json', r.meta_area_ratio == null ? '-' : fmt(r.meta_area_ratio, 4)],
-  ];
-  $('c-nums').innerHTML = items.map(([k, v]) => `<dt>${k}</dt><dd>${esc(String(v))}</dd>`).join('');
+  ].map(([k, v]) => `<dt>${k}</dt>${dd(v)}`).join('') +
+    '<dt class="hd">flagged</dt><dd class="v hd">mm²</dd><dd class="u hd">nodes</dd>' +
+    flag('holes', r.holes_mm2, r.holes_nodes) + flag('folds', r.folds_mm2, r.folds_nodes) +
+    flag('stretched', r.stretched_mm2, r.stretched_nodes);
   $('a-bucket').href = r.url + '/meta.json';
-  $('a-bucket').textContent = 'meta.json on the bucket';
+  $('a-bucket').textContent = 'open meta.json';
 }
 
 function esc(s) {
@@ -256,7 +258,24 @@ $('b-copy').addEventListener('click', async () => {
   try { await navigator.clipboard.writeText(kitCommand(current)); toast('kit command copied'); }
   catch { toast(kitCommand(current)); }
 });
-$('b-about').addEventListener('click', () => $('about').showModal());
+$('b-about').addEventListener('click', () => { $('about').showModal(); cover(); });
+$('about').addEventListener('close', cover);
+
+// One scroll bar at a time (one-screen viewer): the segment list scrolls, unless the table or the guide is open,
+// which then scrolls instead. The panels under the table step aside; under the guide the list stops scrolling, and
+// so does the table when the guide is opened over it.
+function cover() {
+  const table = !$('table-view').hidden, guide = $('about').open;
+  $('picker').hidden = $('card').hidden = table;
+  document.documentElement.classList.toggle('covered', table || guide);
+  document.documentElement.classList.toggle('guide', guide);
+}
+// On a phone the picker sits above the card and takes the height the card leaves (style.css, --card-h).
+if (window.ResizeObserver) {
+  new ResizeObserver(() => document.documentElement.style.setProperty('--card-h', $('card').offsetHeight + 'px'))
+    .observe($('card'));
+}
+if (window.matchMedia && matchMedia('(max-width: 760px), (max-height: 560px)').matches) $('c-more').open = false;
 
 // ---------------------------------------------------------------- table
 
@@ -296,6 +315,7 @@ $('tbl').addEventListener('click', (e) => {
 function setMode(m) {
   document.querySelectorAll('.chip[data-mode]').forEach((b) => b.classList.toggle('on', b.dataset.mode === m));
   $('table-view').hidden = m !== 'table';
+  cover();
   if (m === 'table') fillTable();
 }
 document.querySelectorAll('.chip[data-mode]').forEach((b) => b.addEventListener('click', () => setMode(b.dataset.mode)));

app.py

@@ -33,7 +33,7 @@ LENS_CACHE = 32
 SORTS = ("area_cm2", "filled_share", "within_10pct", "holes_mm2", "folds_mm2", "stretched_mm2", "grid_h", "segment")
 # the page's colors (app.js COLORS), as 0-255 RGB: plain, hole, fold, stretched
 COLORS = {"base": (204, 214, 219), "hole": (89, 166, 255), "fold": (255, 92, 92), "str": (255, 166, 51)}
-WEB_FILES = ("index.html", "app.js", "style.css", "connect.html", "connect.json", "CONNECT.md")
+WEB_FILES = ("index.html", "app.js", "style.css", "connect.html", "connect.json", "CONNECT.md", "onescroll.html")
 SUMMARY_KEYS = ("id", "scroll", "segment", "mesh", "kind", "volume", "voxel_um", "area_cm2", "filled_share",
                 "within_10pct", "holes_mm2", "folds_mm2", "stretched_mm2", "clean", "prize_lists")
 
@@ -288,7 +288,7 @@ def get_segment(segment_id: str):
 
 def segment_picture(segment_id: str, view: str = "3d", azimuth: float = 30.0, elevation: float = 20.0):
     """A picture of one mesh's preview with its flags painted on, as on the page: holes blue, folds red,
-    stretched cells orange, plain grey. Geometry only: no CT, no ink, and a clean surface is not proof the trace
+    stretched cells orange, plain gray. Geometry only: no CT, no ink, and a clean surface is not proof the trace
     stays on one sheet. Only meshes with a preview (scrolls on no prize list) can be drawn.
 
     Args:

index.html

@@ -11,7 +11,69 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="style.css?v=1">
+<link rel="stylesheet" href="style.css?v=2">
+<!-- space-onescroll:start -->
+<!-- one page scroll bar: written by python -m kit spaceconnect render; do not edit -->
+<style>iframe[srcdoc]{display:block;max-height:none!important}</style>
+<script>
+(function () {
+  if (window.__oneScroll) return;
+  window.__oneScroll = true;
+  var CSS = 'html,body{height:auto!important;min-height:0!important}html{overflow:hidden!important}';
+  function size(f) {
+    var d, st = f.__os;
+    try { d = f.contentDocument; } catch (e) { return; }
+    if (!d || !d.body || st.off) return;
+    var de = d.documentElement, r = Math.ceil(de.getBoundingClientRect().height), over = de.scrollHeight;
+    var ch = f.clientHeight, t = r;
+    if (over > ch + 1) t = Math.max(r, over);
+    else if (r >= st.r) t = Math.max(r, ch);
+    st.r = r;
+    if (Math.abs(t - ch) < 2) return;
+    var now = Date.now();
+    st.n = now - st.t0 < 4000 ? st.n + 1 : 1;
+    if (st.n === 1) st.t0 = now;
+    if (st.n > 40) { st.off = true; f.removeAttribute('scrolling'); var g = d.getElementById('space-onescroll'); if (g) g.remove(); return; }
+    f.style.setProperty('height', t + 'px', 'important');
+  }
+  function attach(f) {
+    var d, st = f.__os;
+    try { d = f.contentDocument; } catch (e) { return; }
+    if (!d || !d.documentElement || st.doc === d) return;
+    st.doc = d; st.r = Infinity; st.n = 0; st.off = false;
+    if (!d.getElementById('space-onescroll')) {
+      var s = d.createElement('style'); s.id = 'space-onescroll'; s.textContent = CSS;
+      (d.head || d.documentElement).appendChild(s);
+    }
+    f.setAttribute('scrolling', 'no');
+    f.style.setProperty('min-height', '0', 'important');
+    f.style.setProperty('max-height', 'none', 'important');
+    var w = d.defaultView, go = function () { size(f); };
+    if (w && w.ResizeObserver) { var ro = new w.ResizeObserver(go); ro.observe(d.documentElement); if (d.body) ro.observe(d.body); }
+    d.addEventListener('load', go, true);
+    go();
+  }
+  function bind(f) {
+    if (f.__os || f.getAttribute('data-scroll') === 'inner') return;
+    try { if (!f.contentDocument) return; } catch (e) { return; }
+    f.__os = {t0: 0, n: 0, r: 0};
+    f.addEventListener('load', function () { attach(f); });
+    if (f.contentDocument.readyState !== 'loading') attach(f);
+    else f.contentDocument.addEventListener('DOMContentLoaded', function () { attach(f); });
+  }
+  function scan() { var fs = document.getElementsByTagName('iframe'); for (var i = 0; i < fs.length; i++) bind(fs[i]); }
+  function start() {
+    scan();
+    new MutationObserver(scan).observe(document.documentElement, {childList: true, subtree: true});
+    window.addEventListener('resize', function () {
+      var fs = document.getElementsByTagName('iframe');
+      for (var i = 0; i < fs.length; i++) if (fs[i].__os) size(fs[i]);
+    });
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start); else start();
+})();
+</script>
+<!-- space-onescroll:end -->
 <script type="importmap">
 { "imports": {
   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
@@ -47,7 +109,10 @@
 <aside class="hud br panel" id="card" aria-live="polite">
   <div class="mono small dim" id="c-kicker">SELECT A SEGMENT</div>
   <h2 id="c-title">…</h2>
-  <dl id="c-nums" class="nums mono small"></dl>
+  <details id="c-more" class="more" open>
+    <summary class="mono dim">NUMBERS</summary>
+    <dl id="c-nums" class="nums mono small"></dl>
+  </details>
   <div class="legend mono small">
     <label><input type="checkbox" id="t-hole" checked> <span class="sw hole"></span>holes</label>
     <label><input type="checkbox" id="t-fold" checked> <span class="sw fold"></span>folds</label>
@@ -174,6 +239,6 @@ python -m kit tifxyz check MESH_URL --png check.png</pre>
 </dialog>
 
 <div id="toast" class="toast mono small" role="status" hidden></div>
-<script type="module" src="app.js?v=1"></script>
+<script type="module" src="app.js?v=2"></script>
 </body>
 </html>

onescroll.html

@@ -0,0 +1,62 @@
+<!-- space-onescroll:start -->
+<!-- one page scroll bar: written by python -m kit spaceconnect render; do not edit -->
+<style>iframe[srcdoc]{display:block;max-height:none!important}</style>
+<script>
+(function () {
+  if (window.__oneScroll) return;
+  window.__oneScroll = true;
+  var CSS = 'html,body{height:auto!important;min-height:0!important}html{overflow:hidden!important}';
+  function size(f) {
+    var d, st = f.__os;
+    try { d = f.contentDocument; } catch (e) { return; }
+    if (!d || !d.body || st.off) return;
+    var de = d.documentElement, r = Math.ceil(de.getBoundingClientRect().height), over = de.scrollHeight;
+    var ch = f.clientHeight, t = r;
+    if (over > ch + 1) t = Math.max(r, over);
+    else if (r >= st.r) t = Math.max(r, ch);
+    st.r = r;
+    if (Math.abs(t - ch) < 2) return;
+    var now = Date.now();
+    st.n = now - st.t0 < 4000 ? st.n + 1 : 1;
+    if (st.n === 1) st.t0 = now;
+    if (st.n > 40) { st.off = true; f.removeAttribute('scrolling'); var g = d.getElementById('space-onescroll'); if (g) g.remove(); return; }
+    f.style.setProperty('height', t + 'px', 'important');
+  }
+  function attach(f) {
+    var d, st = f.__os;
+    try { d = f.contentDocument; } catch (e) { return; }
+    if (!d || !d.documentElement || st.doc === d) return;
+    st.doc = d; st.r = Infinity; st.n = 0; st.off = false;
+    if (!d.getElementById('space-onescroll')) {
+      var s = d.createElement('style'); s.id = 'space-onescroll'; s.textContent = CSS;
+      (d.head || d.documentElement).appendChild(s);
+    }
+    f.setAttribute('scrolling', 'no');
+    f.style.setProperty('min-height', '0', 'important');
+    f.style.setProperty('max-height', 'none', 'important');
+    var w = d.defaultView, go = function () { size(f); };
+    if (w && w.ResizeObserver) { var ro = new w.ResizeObserver(go); ro.observe(d.documentElement); if (d.body) ro.observe(d.body); }
+    d.addEventListener('load', go, true);
+    go();
+  }
+  function bind(f) {
+    if (f.__os || f.getAttribute('data-scroll') === 'inner') return;
+    try { if (!f.contentDocument) return; } catch (e) { return; }
+    f.__os = {t0: 0, n: 0, r: 0};
+    f.addEventListener('load', function () { attach(f); });
+    if (f.contentDocument.readyState !== 'loading') attach(f);
+    else f.contentDocument.addEventListener('DOMContentLoaded', function () { attach(f); });
+  }
+  function scan() { var fs = document.getElementsByTagName('iframe'); for (var i = 0; i < fs.length; i++) bind(fs[i]); }
+  function start() {
+    scan();
+    new MutationObserver(scan).observe(document.documentElement, {childList: true, subtree: true});
+    window.addEventListener('resize', function () {
+      var fs = document.getElementsByTagName('iframe');
+      for (var i = 0; i < fs.length; i++) if (fs[i].__os) size(fs[i]);
+    });
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start); else start();
+})();
+</script>
+<!-- space-onescroll:end -->

style.css

@@ -30,7 +30,9 @@ a { color: var(--accent); }
 .tl a { pointer-events: auto; }
 .tr { z-index: 5; top: var(--gut); right: var(--gut); display: flex; gap: 8px; align-items: center; }
 .bl { left: var(--gut); bottom: var(--gut); width: 300px; max-height: 52vh; }
-.br { right: var(--gut); bottom: var(--gut); width: 320px; max-height: 70vh; overflow: auto; }
+/* One-screen viewer: the segment list is the one box that scrolls. The card grows to fit and never scrolls; on a
+   window too short for it, its bottom is cut (NUMBERS folds it back), so its top stays on screen below the buttons. */
+.br { right: var(--gut); bottom: var(--gut); width: 330px; max-height: calc(100vh - 2 * var(--gut) - 44px); overflow: hidden; overflow: clip; }
 .kicker { font-size: 10.5px; letter-spacing: .14em; }
 h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 54px); margin: .15em 0 .1em; line-height: 1; }
 h1 em, h2 em { color: var(--accent); }
@@ -52,10 +54,15 @@ select, input[type=search] { background: #0a1217; color: var(--fg); border: 1px
 .chip.on { background: var(--fg); color: var(--bg); }
 .seg { display: flex; gap: 4px; }
 h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: .2em 0 .4em; word-break: break-word; }
-.nums { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; }
+.more > summary { cursor: pointer; font-size: 10.5px; letter-spacing: .14em; margin: 0 0 6px; }
+.nums { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 3px 10px; margin: 0 0 8px; }
 .nums dt { color: var(--dim); }
-.nums dd { margin: 0; text-align: right; }
-.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0; }
+.nums dd { margin: 0; text-align: right; white-space: nowrap; grid-column: span 2; }
+.nums dd.v, .nums dd.u { grid-column: auto; }
+.nums dd.u { color: var(--dim); }
+.nums dd.wrap { white-space: normal; }
+.nums .hd { color: var(--dim); font-size: 10.5px; padding-top: 4px; }
+.legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0; }
 .legend label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
 .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
 .sw.hole { background: var(--hole); } .sw.fold { background: var(--fold); } .sw.str { background: var(--str); }
@@ -74,11 +81,27 @@ tbody tr.go { cursor: pointer; }
 .sheet-dialog { background: #0a1217; color: var(--fg); border: 1px solid var(--line-strong); border-radius: 12px; max-width: min(680px, calc(100vw - 32px)); padding: 18px 22px; line-height: 1.55; font-size: 13px; }
 .sheet-dialog::backdrop { background: rgba(0, 0, 0, .6); }
 .sheet-dialog .x { float: right; background: none; color: var(--fg); border: 0; font-size: 22px; cursor: pointer; }
-.sheet-dialog pre { background: #05080b; padding: 10px; border-radius: 6px; overflow: auto; }
+.sheet-dialog pre { background: #05080b; padding: 10px; border-radius: 6px; overflow-x: auto; }
 .toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 6; background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 999px; }
 .loading { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; color: var(--dim); }
+/* While the table or the guide is open it is the one box that scrolls: the panels under it step aside. */
+html.covered .list { overflow: hidden; }
+html.guide .tablewrap { overflow: hidden; }
+@media (max-height: 640px) {
+  .br h2 { font-size: 19px; }
+  .nums { gap: 2px 10px; }
+}
 @media (max-width: 760px) {
   .tl .lede { display: none; }
-  .bl { width: calc(100vw - 2 * var(--gut)); max-height: 34vh; bottom: auto; top: 150px; }
-  .br { width: calc(100vw - 2 * var(--gut)); max-height: 34vh; }
+  /* Stacked under the title: the picker, then the card. The card keeps its own height (app.js writes it to
+     --card-h) up to what leaves the picker 225px, room for one row of the list; the picker takes what is left. */
+  .bl { width: calc(100vw - 2 * var(--gut)); bottom: auto; top: calc(var(--gut) + 78px);
+        max-height: max(225px, min(40vh, calc(100vh - 78px - 3 * var(--gut) - var(--card-h, 34vh)))); }
+  .br { width: calc(100vw - 2 * var(--gut)); max-height: calc(100vh - 78px - 3 * var(--gut) - 225px); }
+  .list { min-height: 56px; }
+}
+@media (max-width: 760px) and (max-height: 500px) {
+  /* a phone on its side: the picker and the card side by side, as on a wide screen */
+  .bl { top: auto; bottom: var(--gut); width: calc(50vw - 1.5 * var(--gut)); max-height: calc(100vh - 78px - 3 * var(--gut)); }
+  .br { width: calc(50vw - 1.5 * var(--gut)); max-height: calc(100vh - 2 * var(--gut) - 44px); }
 }