brane 0.0.2 → 0.3.0

package/dist/shared/glow-hues.js

@@ -0,0 +1,225 @@
+/**
+ * Which hue a narrative's awaiting glow wears on this device.
+ *
+ * The glow used to be the narrative's speaker hash (`speakerHue`), which knows
+ * nothing about what else is on screen: two agents parked side by side could
+ * glow the same purple, and 🎨 Recolor's `salt + 1` was a fresh random draw
+ * that could land on another. The glow's job is to let the operator tell
+ * sessions apart at a glance, so the hue is *allocated* instead:
+ *
+ * - **Chosen once, then sticky.** The first time a narrative glows here it
+ *   takes the middle of the widest empty arc among the hues of the other
+ *   narratives that glowed recently, and keeps that hue on every later listen.
+ *   Nothing moves it automatically — an operator learns sessions by color, and
+ *   a hue that shifted whenever a neighbour lit up would be unlearnable.
+ * - **Recolor rolls within the clear arcs.** A random hue at least half as far
+ *   from the others as the best spot on the wheel, a visible step from the
+ *   current one, and clear of the hues this narrative was just recolored away
+ *   from. Always taking the widest gap's middle made it a toggle: with one
+ *   other session glowing there is one such middle, and alone on the wheel
+ *   the fallback flipped to the opposite hue and back again.
+ *
+ * "Recently" rather than "glowing right now": a session between replies will
+ * glow again in a minute, so its hue is still spoken for. Rather than ask
+ * every screen for a list of live narratives (the header has none), the store
+ * keeps when each hue last glowed and treats the {@link RECENT_LIMIT} most
+ * recent within {@link RECENT_MS} as taken. A dead session drops out on its
+ * own by never glowing again.
+ *
+ * Client-side only, like the Recolor salt: a preference of this device's
+ * eyes, never sent to the daemon. Window-free so `src/test/glow-hues.test.ts`
+ * can pin it; `expo/lib/glow-hues.ts` binds it to `localStorage`.
+ */
+import { speakerHue } from "./speaker-color.js";
+export const GLOW_HUES_STORAGE_KEY = "brane:glow-hues";
+/** How long a hue stays spoken for after it last glowed. */
+export const RECENT_MS = 7 * 24 * 60 * 60 * 1000;
+/** At most this many hues count as taken — the most recently glowing. Past a
+ *  dozen, every gap is under 30° anyway, and the sessions that matter are the
+ *  ones the operator saw last. */
+export const RECENT_LIMIT = 12;
+/** `seen` is refreshed on render, so writes are coalesced to one per minute. */
+const SEEN_RESOLUTION_MS = 60 * 1000;
+/** A Recolor must change the color, not shade it: nothing nearer the current
+ *  hue than this. At 45° a fifth of presses moved under 70°, pink to rose or
+ *  sky to blue, and read as no change at all; 100° crosses a color family. */
+export const MIN_RECOLOR_STEP = 100;
+/** A Recolor keeps at least this fraction of the best clearance from the
+ *  others that any hue on the wheel could have… */
+export const RECOLOR_CLEARANCE = 0.5;
+/** …or, when that leaves nowhere a full step away, this fraction. The step
+ *  outranks the clearance: with one other session opposite, the arc at half
+ *  the best clearance is 180° wide and a 100° step can't be taken inside it. */
+export const RECOLOR_CLEARANCE_MIN = 0.25;
+/** Hues this narrative was recolored away from are rejected for this long… */
+export const REJECTED_MS = 60 * 60 * 1000;
+/** …at most this many of them… */
+export const REJECTED_LIMIT = 4;
+/** …and a Recolor keeps this far from each, so a second press can't undo the
+ *  first by stepping back to where it started. */
+export const REJECTED_CLEARANCE = 60;
+/** Shortest distance between two hues around the wheel, in degrees. */
+export function hueDistance(a, b) {
+    const d = Math.abs(a - b) % 360;
+    return Math.min(d, 360 - d);
+}
+const norm = (h) => ((Math.round(h) % 360) + 360) % 360;
+/**
+ * Midpoints of the empty arcs between `taken` hues, widest first. Ties keep
+ * wheel order, so the answer is deterministic. Empty when nothing is taken —
+ * the caller decides what a free wheel means.
+ */
+export function gapMidpoints(taken) {
+    const hues = [...new Set(taken.map(norm))].sort((a, b) => a - b);
+    if (hues.length === 0)
+        return [];
+    const gaps = hues.map((h, i) => {
+        const next = i + 1 < hues.length ? hues[i + 1] : hues[0] + 360;
+        const width = next - h;
+        return { width, mid: norm(h + width / 2) };
+    });
+    return gaps
+        .map((g, i) => ({ ...g, i }))
+        .sort((a, b) => b.width - a.width || a.i - b.i)
+        .map((g) => g.mid);
+}
+export function parseGlowAssignments(raw) {
+    if (!raw)
+        return {};
+    try {
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== "object" || Array.isArray(parsed))
+            return {};
+        const out = {};
+        for (const [nid, v] of Object.entries(parsed)) {
+            const a = v;
+            if (a && Number.isFinite(a.hue) && Number.isFinite(a.seen)) {
+                out[nid] = { hue: norm(a.hue), seen: a.seen };
+                const rejected = Array.isArray(a.rejected)
+                    ? a.rejected.filter((r) => r && Number.isFinite(r.hue) && Number.isFinite(r.at))
+                    : [];
+                if (rejected.length)
+                    out[nid].rejected = rejected.map((r) => ({ hue: norm(r.hue), at: r.at }));
+            }
+        }
+        return out;
+    }
+    catch {
+        return {};
+    }
+}
+/** Hues spoken for by narratives other than `self`: the most recently glowing
+ *  {@link RECENT_LIMIT}, within {@link RECENT_MS}. */
+export function takenHues(assignments, self, now) {
+    return Object.entries(assignments)
+        .filter(([nid, a]) => nid !== self && now - a.seen <= RECENT_MS)
+        .sort((a, b) => b[1].seen - a[1].seen)
+        .slice(0, RECENT_LIMIT)
+        .map(([, a]) => a.hue);
+}
+/** The hue a narrative gets the first time it glows. On a free wheel that is
+ *  its speaker hash — the color it wore before this allocator existed. */
+export function firstHue(nid, taken) {
+    return gapMidpoints(taken)[0] ?? speakerHue(nid);
+}
+/** Nearest distance from `hue` to any of `hues`; a half turn when there are none. */
+function clearance(hue, hues) {
+    return hues.reduce((m, h) => Math.min(m, hueDistance(hue, h)), 180);
+}
+/** Where 🎨 Recolor moves a hue: a random whole degree at least
+ *  {@link MIN_RECOLOR_STEP} from the current hue, clear of the `rejected` ones,
+ *  and at least {@link RECOLOR_CLEARANCE} of the best available clearance from
+ *  the others. On a wheel too crowded for all three, the clearance drops to
+ *  {@link RECOLOR_CLEARANCE_MIN} first, then the rejected hues give way oldest
+ *  first, and only then the step; with nothing left, the widest gap's middle, with the current
+ *  hue counted as taken so it still moves. */
+export function recolorHue(current, taken, opts = {}) {
+    const { rejected = [], random = Math.random } = opts;
+    const others = [...new Set(taken.map(norm))];
+    const left = rejected.map(norm);
+    const best = others.length ? gapMidpoints(others).reduce((m, mid) => Math.max(m, clearance(mid, others)), 0) : 180;
+    const clearAt = (fraction) => {
+        const out = [];
+        for (let h = 0; h < 360; h++)
+            if (clearance(h, others) >= best * fraction)
+                out.push(h);
+        return out;
+    };
+    const clear = clearAt(RECOLOR_CLEARANCE);
+    const looser = clearAt(RECOLOR_CLEARANCE_MIN);
+    const stepped = (hues) => hues.filter((h) => hueDistance(h, current) >= MIN_RECOLOR_STEP);
+    // `rejected` is newest first, so the hues it lets go of are the oldest: the
+    // one this press is about to leave, and the one before, are kept longest.
+    const fresh = (hues, n) => hues.filter((h) => clearance(h, left.slice(0, n)) >= REJECTED_CLEARANCE);
+    const tiers = [];
+    for (let n = left.length; n > 0; n--)
+        tiers.push(fresh(stepped(clear), n), fresh(stepped(looser), n));
+    tiers.push(stepped(clear), stepped(looser), clear.filter((h) => h !== norm(current)));
+    const pool = tiers.find((t) => t.length > 0);
+    if (!pool)
+        return gapMidpoints([...others, current])[0];
+    return pool[Math.min(pool.length - 1, Math.floor(random() * pool.length))];
+}
+/** The allocator over a key-value store — `localStorage` in the app. Every
+ *  store access is guarded: an unreadable store is an empty one, and a failed
+ *  write still returns the hue it computed. */
+export class GlowHues {
+    store;
+    now;
+    random;
+    constructor(store, now = Date.now, random = Math.random) {
+        this.store = store;
+        this.now = now;
+        this.random = random;
+    }
+    read() {
+        try {
+            return parseGlowAssignments(this.store.getItem(GLOW_HUES_STORAGE_KEY));
+        }
+        catch {
+            return {};
+        }
+    }
+    write(assignments) {
+        try {
+            this.store.setItem(GLOW_HUES_STORAGE_KEY, JSON.stringify(assignments));
+        }
+        catch { }
+    }
+    /** The hue `nid` glows in, assigning one the first time. Call it only for a
+     *  narrative that is glowing: that call is what marks the hue as in use. */
+    hueFor(nid) {
+        const assignments = this.read();
+        const now = this.now();
+        const existing = assignments[nid];
+        if (existing) {
+            if (now - existing.seen >= SEEN_RESOLUTION_MS) {
+                assignments[nid] = { ...existing, seen: now };
+                this.write(assignments);
+            }
+            return existing.hue;
+        }
+        const hue = firstHue(nid, takenHues(assignments, nid, now));
+        assignments[nid] = { hue, seen: now };
+        this.write(assignments);
+        return hue;
+    }
+    /** 🎨 Recolor: move `nid` somewhere new and clear of the others, and
+     *  remember the hue it left so the next few presses don't go back to it. */
+    recolor(nid) {
+        const assignments = this.read();
+        const now = this.now();
+        const current = assignments[nid]?.hue ?? speakerHue(nid);
+        const rejected = [{ hue: current, at: now }, ...(assignments[nid]?.rejected ?? [])]
+            .filter((r) => now - r.at <= REJECTED_MS)
+            .slice(0, REJECTED_LIMIT);
+        const hue = recolorHue(current, takenHues(assignments, nid, now), {
+            rejected: rejected.map((r) => r.hue),
+            random: this.random,
+        });
+        assignments[nid] = { hue, seen: now, rejected };
+        this.write(assignments);
+        return hue;
+    }
+}
+//# sourceMappingURL=glow-hues.js.map

package/dist/shared/hex-dump.js

@@ -0,0 +1,62 @@
+// The hex view's two rules, window-free so the daemon (which decides a file
+// is binary) and the app (which lays the bytes out) agree without a browser.
+/** Bytes a binary file is served in, per request. 16 KB is 1,024 rows: enough
+ *  to read a header by, and few enough DOM lines for a phone. */
+export const HEX_PAGE_BYTES = 16 * 1024;
+/** How far into a file the binary check looks — git's figure. */
+export const BINARY_SNIFF_BYTES = 8000;
+export const HEX_ROW_BYTES = 16;
+/** Columns a row takes at `rowBytes` bytes: offset, gap, bytes, group gap,
+ *  space, gutter. What the view measures against its width. */
+export function hexRowColumns(rowBytes) {
+    return 8 + 2 + rowBytes * 3 + (rowBytes > 8 ? 1 : 0) + 1 + rowBytes;
+}
+/** A file is binary if a NUL appears in its first 8000 bytes: git's rule, and
+ *  the one every diff tool and pager the operator uses already agrees with.
+ *  UTF-16 text reads as binary under it, which is what git shows too. */
+export function looksBinary(head) {
+    const n = Math.min(head.length, BINARY_SNIFF_BYTES);
+    for (let i = 0; i < n; i++)
+        if (head[i] === 0)
+            return true;
+    return false;
+}
+export function hexRows(bytes, offset = 0, rowBytes = HEX_ROW_BYTES) {
+    const rows = [];
+    for (let at = 0; at < bytes.length; at += rowBytes) {
+        let hex = "";
+        let ascii = "";
+        for (let j = 0; j < rowBytes; j++) {
+            if (j === 8)
+                hex += " ";
+            const i = at + j;
+            if (i < bytes.length) {
+                const b = bytes[i];
+                hex += (b < 16 ? "0" : "") + b.toString(16) + " ";
+                ascii += b >= 0x20 && b < 0x7f ? String.fromCharCode(b) : ".";
+            }
+            else {
+                hex += "   ";
+            }
+        }
+        rows.push({ offset: hexOffset(offset + at), hex, ascii });
+    }
+    return rows;
+}
+/** Where byte `j` of a row starts in its `hex` column. */
+export function hexColumnOf(j, rowBytes = HEX_ROW_BYTES) {
+    return j * 3 + (rowBytes > 8 && j >= 8 ? 1 : 0);
+}
+/** `xxd`'s layout: an 8-digit offset, the bytes (sixteen to a row in two
+ *  groups of eight, or eight to a row on a phone), and the printable-ASCII
+ *  gutter. `offset` is where `bytes` starts in the file, so a later page
+ *  numbers its rows where they are. */
+export function hexDumpRows(bytes, offset = 0, rowBytes = HEX_ROW_BYTES) {
+    return hexRows(bytes, offset, rowBytes).map((r) => `${r.offset}  ${r.hex} ${r.ascii}`);
+}
+/** Eight hex digits, more past 4 GiB — the column widens rather than wraps. */
+export function hexOffset(n) {
+    const s = n.toString(16);
+    return s.length >= 8 ? s : "0".repeat(8 - s.length) + s;
+}
+//# sourceMappingURL=hex-dump.js.map

package/dist/shared/hex-pages.js

@@ -0,0 +1,52 @@
+// The hex view's page arithmetic, window-free so it can be tested without a
+// browser. A file is shown as whichever of its 16 KB pages have been loaded,
+// in place, with a gap row standing for each unloaded run between them; a
+// search hit names bytes, and these say which pages and rows those bytes are
+// on.
+import { HEX_PAGE_BYTES } from "./hex-dump.js";
+/** The page that byte `offset` is on. Pages sit on multiples of the page
+ *  size, so two loaded neighbours always join without a seam. */
+export function pageOf(offset, pageBytes = HEX_PAGE_BYTES) {
+    return offset - (offset % pageBytes);
+}
+/** Every page a hit of `length` bytes at `at` touches. */
+export function pagesOfHit(at, length, pageBytes = HEX_PAGE_BYTES) {
+    const out = [];
+    for (let p = pageOf(at, pageBytes); p < at + Math.max(1, length); p += pageBytes)
+        out.push(p);
+    return out;
+}
+/** The file as it will be drawn: loaded pages in order, a gap wherever the
+ *  next page doesn't start where the last one ended, and a trailing gap
+ *  until the page holding the end has been read. `size` is the file's size
+ *  when known. */
+export function hexSegments(pages, size) {
+    const sorted = [...pages].sort((a, b) => a.offset - b.offset);
+    const out = [];
+    let at = 0;
+    let end = size;
+    for (const p of sorted) {
+        if (p.offset > at)
+            out.push({ kind: "gap", from: at, to: p.offset });
+        out.push({ kind: "page", offset: p.offset });
+        at = p.offset + p.length;
+        if (p.eof)
+            end = at;
+    }
+    if (end === null || at < end)
+        out.push({ kind: "gap", from: at, to: end });
+    return out;
+}
+/** A hit's bytes, row by row: for each row it touches, the row's start and
+ *  the first and last byte of the hit within it (inclusive, 0-based in the
+ *  row). A hit that wraps a row is two spans, which is how it is painted in
+ *  both columns. */
+export function rowSpans(at, length, rowBytes) {
+    const out = [];
+    const end = at + Math.max(1, length);
+    for (let row = at - (at % rowBytes); row < end; row += rowBytes) {
+        out.push({ row, first: Math.max(at, row) - row, last: Math.min(end, row + rowBytes) - 1 - row });
+    }
+    return out;
+}
+//# sourceMappingURL=hex-pages.js.map

package/dist/shared/hit-drum.js

@@ -0,0 +1,79 @@
+/** The physics of the find-in-file hit drum, window-free.
+ *
+ *  The drum's position is a real number in *hit units*: 2.0 means hit #3 is
+ *  centered, 2.5 is halfway to #4. It does not wrap — reaching the first or
+ *  last hit is information the reader needs — so a position past either end
+ *  only ever exists as rubber-band overscroll on its way back. The page
+ *  follows it in whole hits (`clampIndex`), snapping each onto the middle
+ *  line as the drum passes it. */
+/** The hit a position rests on: nearest, and never past either end. */
+export function clampIndex(pos, count) {
+    if (count <= 0)
+        return -1;
+    return Math.max(0, Math.min(count - 1, Math.round(pos)));
+}
+/** How far past an end the drum can be pulled, in hits. */
+export const RUBBER_BAND_LIMIT = 0.5;
+/** Map a raw position (finger-tracked, unbounded) onto the drum: exact
+ *  inside the range, and past either end an overscroll that grows ever more
+ *  slowly toward `RUBBER_BAND_LIMIT` — the resistance that says "end". */
+export function rubberBand(raw, count) {
+    const hi = Math.max(0, count - 1);
+    const band = (over) => (RUBBER_BAND_LIMIT * over) / (RUBBER_BAND_LIMIT + over);
+    if (raw < 0)
+        return -band(-raw);
+    if (raw > hi)
+        return hi + band(raw - hi);
+    return raw;
+}
+/** The nudge a step into an end gives the drum (hits/s): under the spring
+ *  it travels about a quarter of a detent toward the wall and settles back,
+ *  so Enter on the last hit visibly lands rather than doing nothing. */
+export const BUMP_VELOCITY = 22;
+/** Critically damped spring: fastest approach with no overshoot, so the page
+ *  it drives never scrolls past a hit and comes back. */
+export const SPRING_OMEGA = 16;
+/** One integration step (semi-implicit Euler) toward `target`; `dt` in
+ *  seconds, velocity in hits per second. */
+export function springStep(x, v, target, dt, omega = SPRING_OMEGA) {
+    const a = -omega * omega * (x - target) - 2 * omega * v;
+    const nv = v + a * dt;
+    return { x: x + nv * dt, v: nv };
+}
+/** Close enough to call it landed. */
+export function springAtRest(x, v, target) {
+    return Math.abs(x - target) < 0.002 && Math.abs(v) < 0.05;
+}
+/** How far a flick carries, in seconds of release velocity — the same
+ *  projection iOS scroll views use (deceleration 0.998/ms ≈ 0.5 s), trimmed
+ *  so a casual flick skims a handful of hits rather than the whole file. */
+export const THROW_SECONDS = 0.35;
+/** Where a release at `pos` moving `v` hits/s comes to rest: a whole hit,
+ *  and never past either end — a flick into the last hit stops there, with
+ *  its leftover velocity spent as a bounce against the wall. */
+export function throwTarget(pos, v, count) {
+    return clampIndex(pos + v * THROW_SECONDS, count);
+}
+/** Release velocity from recent pointer samples, in px/ms: the slope over the
+ *  last `windowMs`, so a finger that stopped before lifting throws nothing. */
+export function releaseVelocity(samples, now, windowMs = 80) {
+    const recent = samples.filter((s) => now - s.t <= windowMs);
+    if (recent.length < 2)
+        return 0;
+    const first = recent[0];
+    const last = recent[recent.length - 1];
+    const dt = last.t - first.t;
+    return dt > 0 ? (last.y - first.y) / dt : 0;
+}
+/** A hit total short enough for the drum's face: exact below 1,000, then
+ *  `1.2k`. Rounded down, so the total never claims a hit that isn't there;
+ *  the ordinal beside it stays exact, which is what tells hit 1,234 from
+ *  1,235. */
+export function compactCount(n) {
+    if (n < 1000)
+        return String(n);
+    if (n < 10000)
+        return `${Math.floor(n / 100) / 10}k`;
+    return `${Math.floor(n / 1000)}k`;
+}
+//# sourceMappingURL=hit-drum.js.map

package/dist/shared/known-nids.js

@@ -0,0 +1,58 @@
+/** Which narrative ids a screen is allowed to linkify.
+ *
+ *  `narrativeIdLinks` links only ids that actually exist, so that arbitrary
+ *  strings of the same shape don't become dead links. That refusal is right,
+ *  but it makes the *set* load-bearing in a way that is easy to miss: an
+ *  incomplete set is indistinguishable, on screen, from a narrative that isn't
+ *  there. Nothing renders differently. Nothing is logged. A reference just
+ *  quietly stops being a link.
+ *
+ *  So the rule this module exists to enforce is: **linkification degrades, it
+ *  does not switch off.** Ids come from every source the screen already has,
+ *  ordered by how little can go wrong with them:
+ *
+ *    viewing — the route param. No network, always available.
+ *    pushed  — the control channel's `state` frame, sent on connect over the
+ *              socket the screen needs anyway, and covering every narrative
+ *              including archived ones.
+ *    listed  — the `GET /api/narratives` sweep. The heaviest request the
+ *              screen makes, and the one that fails first on a slow link.
+ *
+ *  Before this, `listed` was the only source. On a slow or flaky connection it
+ *  would fail, its rejection was swallowed, the effect could not re-fire, and
+ *  every narrative reference on the screen stayed dead until a reload — while
+ *  the conversation itself, fetched separately, rendered perfectly. That is
+ *  what makes it read as "the linkifier is broken" rather than "a request
+ *  didn't land".
+ *
+ *  Window-free on purpose, like `view-url.ts`, so the property can be tested
+ *  without a browser.
+ */
+function addAll(into, from) {
+    if (!from)
+        return;
+    for (const n of from) {
+        if (n && typeof n.id === "string" && n.id)
+            into.add(n.id);
+    }
+}
+/** Every narrative id this screen can vouch for.
+ *
+ *  Deliberately a union rather than a fallback chain: a source being present
+ *  says nothing about it being complete. The `state` frame is a snapshot from
+ *  connect time and misses anything spawned since; the list sweep is a moment
+ *  later. Taking both costs nothing and each covers the other's gap.
+ *
+ *  Note what is *not* a source: ids parsed out of event `re` arrays. Those are
+ *  never validated on write, so trusting them would hand the dead-link problem
+ *  back to whoever wrote the reference — which is exactly what the existence
+ *  check is there to prevent. */
+export function collectKnownNids(sources) {
+    const known = new Set();
+    if (sources.viewing)
+        known.add(sources.viewing);
+    addAll(known, sources.pushed);
+    addAll(known, sources.listed);
+    return known;
+}
+//# sourceMappingURL=known-nids.js.map

package/dist/shared/list-scroll-keys.js

@@ -0,0 +1,56 @@
+/** The browser's scroll keys, for a list that doesn't hold focus.
+ *
+ *  A browser gives PageUp/PageDown, Home/End and the vertical arrows to the
+ *  scroller that holds focus, or to the document when nothing does. The
+ *  narrative list is an inner ScrollView, and the document has nothing to
+ *  scroll on purpose (see public/index.html). So on a freshly loaded page, or
+ *  after a click in the header, those keys reach no scroller and do nothing.
+ *  The list screen hears them on `document` and moves its own scroller. This
+ *  file works out where to scroll to. Deciding whether the screen should handle
+ *  the key at all needs the DOM, so that part stays in the screen.
+ *
+ *  The steps match Chromium's: 40 px per arrow press, and 87.5% of the visible
+ *  height per page, so a line from the old page stays in view.
+ */
+export const ARROW_STEP_PX = 40;
+export const PAGE_FRACTION = 0.875;
+const SCROLL_KEYS = new Set(["PageUp", "PageDown", "Home", "End", "ArrowUp", "ArrowDown"]);
+/** Whether this keydown is one the list should scroll for. Modified keys are
+ *  left alone: ⌘↑/⌘↓ are the browser's own top/bottom keys, ⇧↑/⇧↓ extend a
+ *  selection, and ⌥ and ⌃ belong to the OS. */
+export function isListScrollKey(e) {
+    if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey)
+        return false;
+    return SCROLL_KEYS.has(e.key);
+}
+/** The scrollTop that `key` should move a scroller to, or `null` if the key
+ *  doesn't scroll.
+ *
+ *  `from` is usually the scroller's current `scrollTop`. While a smooth scroll
+ *  is still animating, pass the target it is heading for instead. Otherwise a
+ *  second PageDown pressed mid-animation starts from wherever the animation
+ *  had got to, and falls short of two pages. */
+export function listScrollTarget(key, from, m) {
+    const max = Math.max(0, m.scrollHeight - m.clientHeight);
+    const page = Math.max(1, m.clientHeight * PAGE_FRACTION);
+    let to;
+    switch (key) {
+        case "ArrowUp":
+            to = from - ARROW_STEP_PX;
+            break;
+        case "ArrowDown":
+            to = from + ARROW_STEP_PX;
+            break;
+        case "PageUp":
+            to = from - page;
+            break;
+        case "PageDown":
+            to = from + page;
+            break;
+        case "Home": return 0;
+        case "End": return max;
+        default: return null;
+    }
+    return Math.min(max, Math.max(0, to));
+}
+//# sourceMappingURL=list-scroll-keys.js.map

package/dist/shared/markdown-lists.js

@@ -0,0 +1,72 @@
+/** Where the app and the HTML export have to agree about lists.
+ *
+ *  The export never calls into here — micromark decides looseness itself, on
+ *  the way to HTML, and emits `<li><p>…</p></li>` for a loose item against a
+ *  bare `<li>…</li>` for a tight one. The app has no such luxury: it renders
+ *  from mdast, where the flags survive but the decision does not, so it has to
+ *  make the same call the HTML side already made. This is that call, written
+ *  once and pinned by `src/test/markdown-lists.test.ts` *against micromark's
+ *  own output* — the only way to know the two still agree.
+ */
+/** CommonMark: an item is loose when it holds more than one block, which is
+ *  what `spread` records. The flag is authoritative when present; the child
+ *  count is the fallback for a tree built by hand rather than by a parser. */
+function itemIsLoose(item) {
+    if (!item)
+        return false;
+    if (typeof item.spread === "boolean")
+        return item.spread;
+    return (item.children?.length ?? 0) > 1;
+}
+/** Whether a list renders loose — paragraph margins between items — or tight.
+ *
+ *  Looseness is a property of the **list**, never of the item: CommonMark says
+ *  a list is loose if *any* of its items are separated by a blank line, and
+ *  every item then renders loose. So a two-item list whose first item is spread
+ *  gives its second item paragraph margins too, and reading `item.spread`
+ *  alone — the obvious shortcut — would space the two differently. */
+export function listIsLoose(list) {
+    if (!list)
+        return false;
+    if (list.spread)
+        return true;
+    return (list.children ?? []).some(itemIsLoose);
+}
+/** Where a loose list item's top margin has to live.
+ *
+ *  A list item row is two flex siblings — the marker `<Text>` and a `<View>`
+ *  holding the content — top-aligned. So a margin on the *first paragraph*
+ *  indents only the content column, and the marker stays parked at the top of
+ *  the row: a `1.` floating ~8px above the line it numbers, reading as a
+ *  superscript. Tight lists never showed it because their paragraph margins are
+ *  zeroed anyway; loose lists show it on every item, because there the spacing
+ *  is deliberate.
+ *
+ *  CSS has no such failure mode — the `::marker` is aligned to the first line
+ *  box of the item's principal block, so a `<p>` margin moves the marker with
+ *  the text — which is why the export renders these correctly and the app does
+ *  not. The fix is to put the margin somewhere it moves *both* halves of the
+ *  row: on the row itself.
+ *
+ *  The pair below has to be read together, since the whole point is that they
+ *  add up to what the paragraph margins used to contribute on their own. */
+/** The margin override for a paragraph, by where it sits in a list. `null`
+ *  leaves the stylesheet's own `paragraph` margins alone. */
+export function listParagraphOverride(where) {
+    if (!where.inListItem)
+        return null;
+    // A tight list runs its items together: no paragraph margins at all.
+    if (!where.loose)
+        return { marginVertical: 0 };
+    // Loose: the first block's top margin has moved to the row. Later blocks in
+    // the same item keep theirs — they sit below the marker, not beside it.
+    return where.firstBlock ? { marginTop: 0 } : null;
+}
+/** The row's own top margin — exactly the margin `listParagraphOverride` just
+ *  took off the first paragraph, so the text lands where it always did and only
+ *  the marker moves. `paragraphMargin` is the stylesheet's `paragraph`
+ *  `marginVertical`, passed in rather than duplicated here. */
+export function listItemRowMarginTop(loose, paragraphMargin) {
+    return loose ? paragraphMargin : 0;
+}
+//# sourceMappingURL=markdown-lists.js.map