Note contents rail: gutter inset when the sidebar is closed; expand into the blog-style contents card on hover

kayg commented

2026-10-06 08:08:15 +00:00

Owner

Owner report (2026-10-06, production): Note contents tick rail

No padding with the sidebar closed: the heading tick rail attaches itself to the viewport's left border (ticks start at x=0 against the window edge). It must keep the same inset from the viewport edge as other floating chrome (the content/sidebar gutter token), whether the sidebar is open or closed; when the sidebar is open it sits just right of the sidebar with the same gap.
Hover expands into the owner's blog contents card. Port the desktop table of contents from the owner's own site (kayg.org/blog; repo github.com/kaygdotorg/website, a local copy is at ~/calternal-private/reference/kayg-website — the owner's code, reuse freely): src/layouts/MarkdownLayout.astro lines ~220–236 (sticky left sidebar markup) and the generateTOC/active-heading script from ~line 458; src/styles/global.css lines ~560–830 (.md-sidebar-sticky, .toc-scroll-container, .toc-scroll-list, .toc-scroll-item hover/active, .toc-h3 indent marker) and ~1096–1170. Behaviour: at rest the rail shows the ticks (current behaviour; the active tick longer/brighter); on hover (or keyboard focus of the rail) it expands with the shared spring into a frosted card listing all headings (H2 flush, H3 indented with the marker), the active heading highlighted, scroll-synced, max height with its own scroll and scroll-edge fade; clicking a heading jumps to it (shallow history, no reload — #1147); Copy link per heading stays in the hover Pill/context menu. Collapses on leave/Escape. Reduced motion: no animation. Touch: unchanged (phone contents sheet).
Use the shared glass card material and type tokens from packages/ui (translate the blog's CSS into calternal tokens; do not paste its colours/literals). The expanded card must not cover the Note text column at common widths: it grows into the left gutter; if the gutter is too narrow it overlays with the frosted material and closes on leave.
Evidence: screenshots at ACTUAL size (1x/2x) at 1440 and 1024 with the sidebar open and closed, rest + expanded, light + dark; e2e asserts the rail's left inset equals the gutter token and the expanded card lists every heading. Merge origin/dev; bun run check + bun run test pass. Commit; comment with head SHA. Do not push.

## Owner report (2026-10-06, production): Note contents tick rail 1. **No padding with the sidebar closed:** the heading tick rail attaches itself to the viewport's left border (ticks start at x=0 against the window edge). It must keep the same inset from the viewport edge as other floating chrome (the content/sidebar gutter token), whether the sidebar is open or closed; when the sidebar is open it sits just right of the sidebar with the same gap. 2. **Hover expands into the owner's blog contents card.** Port the desktop table of contents from the owner's own site (kayg.org/blog; repo github.com/kaygdotorg/website, a local copy is at ~/calternal-private/reference/kayg-website — the owner's code, reuse freely): src/layouts/MarkdownLayout.astro lines ~220–236 (sticky left sidebar markup) and the generateTOC/active-heading script from ~line 458; src/styles/global.css lines ~560–830 (`.md-sidebar-sticky`, `.toc-scroll-container`, `.toc-scroll-list`, `.toc-scroll-item` hover/active, `.toc-h3` indent marker) and ~1096–1170. Behaviour: at rest the rail shows the ticks (current behaviour; the active tick longer/brighter); on hover (or keyboard focus of the rail) it expands with the shared spring into a frosted card listing all headings (H2 flush, H3 indented with the marker), the active heading highlighted, scroll-synced, max height with its own scroll and scroll-edge fade; clicking a heading jumps to it (shallow history, no reload — #1147); Copy link per heading stays in the hover Pill/context menu. Collapses on leave/Escape. Reduced motion: no animation. Touch: unchanged (phone contents sheet). 3. Use the shared glass card material and type tokens from packages/ui (translate the blog's CSS into calternal tokens; do not paste its colours/literals). The expanded card must not cover the Note text column at common widths: it grows into the left gutter; if the gutter is too narrow it overlays with the frosted material and closes on leave. Evidence: screenshots at ACTUAL size (1x/2x) at 1440 and 1024 with the sidebar open and closed, rest + expanded, light + dark; e2e asserts the rail's left inset equals the gutter token and the expanded card lists every heading. Merge origin/dev; `bun run check` + `bun run test` pass. Commit; comment with head SHA. Do not push.

tocrail-rest-open-1440-paper-white-1x.png

626 KiB

tocrail-edge-1024-noir-4x.png

7.4 KiB

tocrail-contents-sheet-390-noir.png

109 KiB

tocrail-edge-1024-paper-white-4x.png

6.3 KiB

tocrail-contents-sheet-390-paper-white.png

134 KiB

tocrail-edge-820-noir-4x.png

7.5 KiB

tocrail-expanded-closed-1440-paper-white-1x.png

671 KiB

tocrail-expanded-open-1024-noir-1x.png

518 KiB

tocrail-expanded-closed-1440-paper-white-2x.png

2.8 MiB

tocrail-expanded-open-1024-paper-white-1x.png

463 KiB

tocrail-expanded-open-1440-noir-1x.png

454 KiB

tocrail-expanded-open-1024-paper-white-2x.png

1.3 MiB

tocrail-expanded-open-1440-paper-white-1x.png

627 KiB

tocrail-expanded-open-1440-noir-2x.png

1.9 MiB

tocrail-expanded-open-820-noir-2x.png

1.3 MiB

tocrail-expanded-open-820-paper-white-1x.png

524 KiB

tocrail-rest-closed-1024-paper-white-1x.png

482 KiB

tocrail-rest-closed-1024-noir-2x.png

1.6 MiB

tocrail-rest-closed-1440-noir-1x.png

460 KiB

tocrail-rest-closed-1024-paper-white-2x.png

1.3 MiB

tocrail-rest-closed-1440-paper-white-2x.png

2.8 MiB

tocrail-scroll-middle-820-paper-white.png

556 KiB

tocrail-touch-note-390-noir.png

271 KiB

tocrail-touch-note-390-paper-white.png

316 KiB

tocrail-touch-sheet-390-noir.png

117 KiB

tocrail-touch-sheet-390-paper-white.png

142 KiB

tocrail-edge-1440-noir-4x.png

18 KiB

tocrail-edge-1440-paper-white-4x.png

25 KiB

tocrail-edge-820-paper-white-4x.png

11 KiB

tocrail-expanded-closed-1024-noir-1x.png

574 KiB

tocrail-expanded-closed-1024-noir-2x.png

1.6 MiB

tocrail-expanded-closed-1024-paper-white-1x.png

502 KiB

tocrail-expanded-closed-1024-paper-white-2x.png

1.4 MiB

tocrail-expanded-closed-1440-noir-1x.png

471 KiB

tocrail-expanded-closed-1440-noir-2x.png

2.1 MiB

tocrail-expanded-open-1024-noir-2x.png

1.5 MiB

tocrail-expanded-open-820-noir-1x.png

440 KiB

tocrail-expanded-open-1440-paper-white-2x.png

2.6 MiB

tocrail-expanded-open-820-paper-white-2x.png

1.5 MiB

tocrail-note-390-noir.png

177 KiB

tocrail-note-390-paper-white.png

217 KiB

tocrail-note-820-noir.png

449 KiB

tocrail-note-820-paper-white.png

542 KiB

tocrail-rest-closed-1024-noir-1x.png

559 KiB

tocrail-rest-closed-1440-paper-white-1x.png

672 KiB

tocrail-rest-closed-1440-noir-2x.png

2 MiB

tocrail-rest-open-1024-noir-1x.png

518 KiB

tocrail-rest-open-1024-noir-2x.png

1.5 MiB

tocrail-rest-open-1024-paper-white-1x.png

458 KiB

tocrail-rest-open-1440-noir-1x.png

731 KiB

tocrail-rest-open-1024-paper-white-2x.png

1.3 MiB

tocrail-rest-open-1440-paper-white-2x.png

2.6 MiB

tocrail-rest-open-1440-noir-2x.png

1.9 MiB

tocrail-scroll-bottom-1024-noir.png

525 KiB

tocrail-scroll-bottom-1024-paper-white.png

472 KiB

tocrail-scroll-bottom-1440-noir.png

468 KiB

tocrail-scroll-bottom-1440-paper-white.png

634 KiB

tocrail-scroll-bottom-820-noir.png

473 KiB

tocrail-scroll-bottom-820-paper-white.png

553 KiB

tocrail-scroll-middle-1024-noir.png

531 KiB

tocrail-scroll-middle-1024-paper-white.png

478 KiB

tocrail-scroll-middle-1440-noir.png

473 KiB

tocrail-scroll-middle-1440-paper-white.png

642 KiB

tocrail-scroll-middle-820-noir.png

467 KiB

kayg commented

2026-10-06 09:34:13 +00:00

Author

Owner

Starting work on job/tocrail-1191 from origin/dev 5301e02085. I am tracing the existing Note contents rail, deep-link behavior, and shared glass/scroll primitives before implementing the gutter inset and hover card.

Starting work on job/tocrail-1191 from origin/dev 5301e020859c1d61b4a7f812a5049a64241203e8. I am tracing the existing Note contents rail, deep-link behavior, and shared glass/scroll primitives before implementing the gutter inset and hover card.

kayg commented

2026-10-06 10:00:57 +00:00

Author

Owner

Finding: apps/web/src/lib/notes/NoteContents.svelte set the fixed rail to --floating-sidebar-width, which is 0px when the sidebar is collapsed, and hover rendered only the current heading's Copy link Pill. This matches the reported x=0 inset and missing full contents card. The active-heading IntersectionObserver and selectHeading shallow-history path already provide the outline and navigation needed for the expanded list.

kayg referenced this issue from a commit

2026-10-06 11:14:43 +00:00

feat(notes): expand contents rail into heading Card (#1191)

kayg referenced this issue from a commit

2026-10-06 11:34:22 +00:00

fix(notes): reserve text gap beside expanded outline (#1191)

kayg referenced this issue from a commit

2026-10-06 11:34:22 +00:00

test(notes): stabilize rail motion and phone menu checks (#1191)

kayg referenced this issue from a commit

2026-10-06 11:34:22 +00:00

test(notes): wait for loaded outline before phone menu (#1191)

kayg referenced this issue from a commit

2026-10-06 11:53:45 +00:00

test(notes): scope phone menu checks to Note actions (#1191)

kayg referenced this issue from a commit

2026-10-06 11:53:45 +00:00

test(notes): reset rail through Escape before screenshots (#1191)

kayg commented

2026-10-06 12:08:32 +00:00

Author

Owner

Finding: The 820 px touch e2e profile showed touch pointerenter expanding the Card before pointerup. During the spring, the heading target moved under the finger and Playwright reported the first row intercepting tap on the long heading. I will expand on the completed coarse-pointer tap; the phone Contents sheet stays unchanged.

kayg referenced this issue from a commit

2026-10-06 12:13:12 +00:00

test(notes): use the visible rail tick in screenshot checks (#1191)

kayg referenced this issue from a commit

2026-10-06 12:13:12 +00:00

test(notes): restore viewport after scale screenshots (#1191)

kayg referenced this issue from a commit

2026-10-06 12:13:12 +00:00

test(notes): restore CDP viewport after scale captures (#1191)

kayg referenced this issue from a commit

2026-10-06 12:13:12 +00:00

fix(notes): defer touch expansion until the tap completes (#1191)

kayg commented

2026-10-06 12:40:48 +00:00

Author

Owner

Finding after the required origin/dev merge: the first bun run check reached perf-lint and reported this exact pin as stale:

perf-lint: INVALID: ('render.bound', 'apps/web/src/lib/notes/NoteContents.svelte', 'apps/web/src/lib/notes/NoteContents.svelte#each:a6432f7bb9653f60:1'): unused or changed exception

The live registry hash for that NoteContents loop is 3c003b5406b8fa8fb453ed3714cf129aa1aaa0b42b0e6112d4f41ac5216a070c; its matching exception still records the prior hash. I will refresh the exact live pin without changing the bound or weakening the rule, then rerun the required gates.

Finding after the required `origin/dev` merge: the first `bun run check` reached perf-lint and reported this exact pin as stale: `perf-lint: INVALID: ('render.bound', 'apps/web/src/lib/notes/NoteContents.svelte', 'apps/web/src/lib/notes/NoteContents.svelte#each:a6432f7bb9653f60:1'): unused or changed exception` The live registry hash for that NoteContents loop is `3c003b5406b8fa8fb453ed3714cf129aa1aaa0b42b0e6112d4f41ac5216a070c`; its matching exception still records the prior hash. I will refresh the exact live pin without changing the bound or weakening the rule, then rerun the required gates.

kayg commented

2026-10-06 12:47:37 +00:00

Author

Owner

The exact pin refresh exposed its matching checkpoint in the #1058 adoption snapshot. Before the checkpoint update, the focused perf-lint check reported:

perf-lint: INVALID: adoption checkpoint differs from its exact live ledger entry

I updated the 12 checkpoint hash records for the same NoteContents heading loop to match the live registry hash. No limits, bounds or guard rules changed.

The exact pin refresh exposed its matching checkpoint in the #1058 adoption snapshot. Before the checkpoint update, the focused perf-lint check reported: `perf-lint: INVALID: adoption checkpoint differs from its exact live ledger entry` I updated the 12 checkpoint hash records for the same NoteContents heading loop to match the live registry hash. No limits, bounds or guard rules changed.

kayg commented

2026-10-06 12:52:31 +00:00

Author

Owner

Correction to my previous perf-pin note: the committed registry hash was itself stale (3c003b…). I ran the pinned perf_guards source parser against the current NoteContents file; it reports live loop hash 72612786a48fd27a0413ccf74bde776c8e59ea6bc4aef798b3b957ad1ac50f14. I aligned only the registry, exception ledger and #1058 adoption checkpoint hashes for that exact loop and its related pins. The limits and guard rules remain unchanged.

Correction to my previous perf-pin note: the committed registry hash was itself stale (`3c003b…`). I ran the pinned `perf_guards` source parser against the current NoteContents file; it reports live loop hash `72612786a48fd27a0413ccf74bde776c8e59ea6bc4aef798b3b957ad1ac50f14`. I aligned only the registry, exception ledger and #1058 adoption checkpoint hashes for that exact loop and its related pins. The limits and guard rules remain unchanged.

kayg commented

2026-10-06 12:53:51 +00:00

Author

Owner

After aligning the first exact NoteContents loop hash, perf-lint progressed and reported the separate phone-sheet loop:

perf-lint: INVALID: ('render.bound', 'apps/web/src/lib/notes/NoteContents.svelte', 'apps/web/src/lib/notes/NoteContents.svelte#each:a6432f7bb9653f60:2'): unused or changed exception

I am checking that loop's current parser hash and will refresh only its matching registry, exception and adoption checkpoint records.

After aligning the first exact NoteContents loop hash, perf-lint progressed and reported the separate phone-sheet loop: `perf-lint: INVALID: ('render.bound', 'apps/web/src/lib/notes/NoteContents.svelte', 'apps/web/src/lib/notes/NoteContents.svelte#each:a6432f7bb9653f60:2'): unused or changed exception` I am checking that loop's current parser hash and will refresh only its matching registry, exception and adoption checkpoint records.

kayg referenced this issue from a commit

2026-10-06 12:55:31 +00:00

docs(perf): record Note contents rail profile (#1191)

kayg commented

2026-10-06 13:04:10 +00:00

Author

Owner

The two NoteContents heading loops now use their pinned source hashes. The one layout.observer-purpose entry covers the live ResizeObserver scoped to the Card and nav; the ratchet increased by exactly that one live site, with its bound unchanged. Focused check output:

perf-lint: PASS; 0 violations; 22360 scoped exceptions

Commit: b87d2f902a485630c58c511d0db5d070db0e75b4.

The two NoteContents heading loops now use their pinned source hashes. The one `layout.observer-purpose` entry covers the live `ResizeObserver` scoped to the Card and nav; the ratchet increased by exactly that one live site, with its bound unchanged. Focused check output: `perf-lint: PASS; 0 violations; 22360 scoped exceptions` Commit: `b87d2f902a485630c58c511d0db5d070db0e75b4`.

kayg referenced this issue from a commit

2026-10-06 13:16:19 +00:00

perf(notes): refresh contents rail pins (#1191)

kayg commented

2026-10-06 13:16:45 +00:00

Author

Owner

Finding from the required full bun run test: src/lib/themes.test.ts has one failure in “uses the overlay alpha for every page card and one more opaque shared inner tile role”. Its existing source assertion expects the Card default class source shape class="card glass-card {cls}"; the new shared material variants made the class expression dynamic. The default page Card behavior is unchanged. I will preserve the exact default class contract in Card documentation and keep the test expectation intact.

Finding from the required full `bun run test`: `src/lib/themes.test.ts` has one failure in “uses the overlay alpha for every page card and one more opaque shared inner tile role”. Its existing source assertion expects the Card default class source shape `class="card glass-card {cls}"`; the new shared material variants made the class expression dynamic. The default page Card behavior is unchanged. I will preserve the exact default class contract in Card documentation and keep the test expectation intact.

kayg commented

2026-10-06 13:20:31 +00:00

Author

Owner

Screenshot metadata check found the files labelled 2x were still CSS-sized: for example, both tocrail-rest-open-1440-paper-white-1x.png and -2x.png are 1440×900; the 1024 pair is also 1024×900. The CDP device-scale override changed devicePixelRatio, but Playwright's screenshot stayed at the BrowserContext scale. I will capture the 2x PNG through CDP and assert the output pixel dimensions before attaching the set.

Screenshot metadata check found the files labelled `2x` were still CSS-sized: for example, both `tocrail-rest-open-1440-paper-white-1x.png` and `-2x.png` are 1440×900; the 1024 pair is also 1024×900. The CDP device-scale override changed `devicePixelRatio`, but Playwright's screenshot stayed at the BrowserContext scale. I will capture the 2x PNG through CDP and assert the output pixel dimensions before attaching the set.

kayg referenced this issue from a commit

2026-10-06 13:36:34 +00:00

docs(ui): preserve Card default material contract (#1191)

kayg referenced this issue from a commit

2026-10-06 13:36:34 +00:00

test(notes): capture actual 2x review pixels (#1191)

kayg commented

2026-10-06 13:43:13 +00:00

Author

Owner

#1191 complete

Built: the desktop Note heading tick rail now keeps the shared gutter inset, and expands on hover or keyboard focus into a frosted Card with the complete H2/H3 outline, active heading, shallow links and per-heading Copy link. It has a bounded internal scroller with shared edge fades. The phone Contents sheet remains in place.

Shared components: Card supplies the shared glass material and spring; ProgressiveBlur supplies scroll edges; CopyLink in Pill supplies heading copy actions; OverlaySurface supplies the phone sheet. Existing rail and heading buttons remain the targets for pointer, touch and keyboard input.

UX gaps closed

The rail inset matches max(--floating-sidebar-width, --floating-sidebar-gap) with the sidebar open or closed.
Expanded desktop navigation lists every heading in document order, indents H3 headings with its marker, tracks the active section and keeps the active row in view.
Each heading has a working shallow navigation action and Copy link. Arrow keys, Home/End, Escape, focus return, pointer leave, reduced motion and the phone sheet are covered by the production E2E.
Tablet touch opens on the first completed tap and leaves the target fixed through pointerup; a later tap selects. The phone keeps its sheet.
At 1440px the expanded Card stays in the Note gutter. When the gutter is too narrow, it uses the shared frosted overlay and closes on leave.

UX gaps left: none found in the covered paths.

Cost and profile

Expanding lays out one row per heading, O(N) for N headings; one outline observer tracks heading sections, while the Card and nav share one bounded resize observer. The panel caps at 60vh and offscreen rows use content-visibility. The workload covered six and 1,000 headings.

The local production profile ran under high host load (44.59, 30.79, 24.61 before; 45.54, 43.57, 31.86 after). Six-heading expansion p50/p95 was 3,338.4/32,074.8ms; 1,000-heading expansion was 3,902.6/4,648ms. The 1,000-heading open took 15,193.2ms. There is no Note rail baseline; the closest Notes Explorer route measures 1,257/1,337ms p50/p95 for different work, so these values are reference-only. A later high-load profile attempt timed out while checking the active heading and did not replace the completed profile.

Decisions not covered by DESIGN

With the sidebar closed, use the larger of the sidebar slot and floating sidebar gap as the rail inset so the rail keeps the same floating-chrome gutter.
Reserve one --toolbar-gap between the expanded Card and Note text. Let the Card use available gutter width and use the frosted overlay when that width is insufficient.
On touch tablets, open on the first tap and select on a later tap so expansion does not move the active touch target. Keep the existing phone sheet.
Keep every heading in the semantic navigation tree and use content-visibility for offscreen rows; the 1,000-heading scroller remains bounded at 60vh.
Capture actual 2x evidence through Chromium CDP and assert PNG pixel dimensions. The earlier Playwright capture wrote CSS-sized pixels after the live DPR change.

Files

apps/web/src/lib/notes/NoteContents.svelte; packages/ui/src/components/Card.svelte; packages/ui/README.md; apps/web/src/lib/components/Card.svelte.test.ts; apps/web/e2e/tocrail-636.mjs; apps/web/e2e/tocrail-636-fixtures.mjs; bench/notes-tocrail-636.mjs; docs/perf/baseline.json; docs/perf/notes-tocrail-636.md; contracts/perf/adoption-1058.json; contracts/perf/exceptions.json; contracts/perf/ratchet.json; contracts/perf/registry.json.

Verification (verbatim)

perf-lint: PASS; 0 violations; 22360 scoped exceptions
svelte-check found 0 errors and 2 warnings in 2 files

 Test Files  275 passed (275)
      Tests  1909 passed (1909)
   Start at  15:18:15
   Duration  726.47s (transform 28%, environment 27%, import 24%, tests 14%, setup 6%)

tocrail-636/1113/1191 e2e: gutter inset, full expanded outline, Copy links, active section, reduced motion, keyboard controls, phone sheet and two-heading threshold passed
PASS: 64 screenshots; all 18 2x PNGs have verified native pixel dimensions

The two Svelte warnings are existing empty rulesets in AttachmentDeck.svelte:1055 and AgendaList.svelte:1277; this job did not change those files. cargo clean output: Removed 0 files. No Rust files changed. The last commit after the web gates only updates documentation comments; node --check and git diff --check pass after that change.

Screenshot attachments

All 64 PNGs are attached to this issue. Required 1440px and 1024px rest/expanded, sidebar open/closed, light/dark images are linked first; tablet, phone, scroll and edge-crop evidence follows.

1440px and 1024px review states

Tablet and phone review states

Pinned scroll captures

Gutter edge crops

Head: a8d48a239592fae587ba73d77778b009e0328053 (docs(notes): connect contents rail reasoning to #1191). No push, deploy or merge was performed.

## #1191 complete **Built:** the desktop Note heading tick rail now keeps the shared gutter inset, and expands on hover or keyboard focus into a frosted Card with the complete H2/H3 outline, active heading, shallow links and per-heading Copy link. It has a bounded internal scroller with shared edge fades. The phone Contents sheet remains in place. **Shared components:** `Card` supplies the shared glass material and spring; `ProgressiveBlur` supplies scroll edges; `CopyLink` in `Pill` supplies heading copy actions; `OverlaySurface` supplies the phone sheet. Existing rail and heading buttons remain the targets for pointer, touch and keyboard input. ### UX gaps closed - The rail inset matches `max(--floating-sidebar-width, --floating-sidebar-gap)` with the sidebar open or closed. - Expanded desktop navigation lists every heading in document order, indents H3 headings with its marker, tracks the active section and keeps the active row in view. - Each heading has a working shallow navigation action and Copy link. Arrow keys, Home/End, Escape, focus return, pointer leave, reduced motion and the phone sheet are covered by the production E2E. - Tablet touch opens on the first completed tap and leaves the target fixed through pointerup; a later tap selects. The phone keeps its sheet. - At 1440px the expanded Card stays in the Note gutter. When the gutter is too narrow, it uses the shared frosted overlay and closes on leave. **UX gaps left:** none found in the covered paths. ### Cost and profile Expanding lays out one row per heading, O(N) for N headings; one outline observer tracks heading sections, while the Card and nav share one bounded resize observer. The panel caps at 60vh and offscreen rows use `content-visibility`. The workload covered six and 1,000 headings. The local production profile ran under high host load (44.59, 30.79, 24.61 before; 45.54, 43.57, 31.86 after). Six-heading expansion p50/p95 was 3,338.4/32,074.8ms; 1,000-heading expansion was 3,902.6/4,648ms. The 1,000-heading open took 15,193.2ms. There is no Note rail baseline; the closest Notes Explorer route measures 1,257/1,337ms p50/p95 for different work, so these values are reference-only. A later high-load profile attempt timed out while checking the active heading and did not replace the completed profile. ### Decisions not covered by DESIGN - With the sidebar closed, use the larger of the sidebar slot and floating sidebar gap as the rail inset so the rail keeps the same floating-chrome gutter. - Reserve one `--toolbar-gap` between the expanded Card and Note text. Let the Card use available gutter width and use the frosted overlay when that width is insufficient. - On touch tablets, open on the first tap and select on a later tap so expansion does not move the active touch target. Keep the existing phone sheet. - Keep every heading in the semantic navigation tree and use `content-visibility` for offscreen rows; the 1,000-heading scroller remains bounded at 60vh. - Capture actual 2x evidence through Chromium CDP and assert PNG pixel dimensions. The earlier Playwright capture wrote CSS-sized pixels after the live DPR change. ### Files `apps/web/src/lib/notes/NoteContents.svelte`; `packages/ui/src/components/Card.svelte`; `packages/ui/README.md`; `apps/web/src/lib/components/Card.svelte.test.ts`; `apps/web/e2e/tocrail-636.mjs`; `apps/web/e2e/tocrail-636-fixtures.mjs`; `bench/notes-tocrail-636.mjs`; `docs/perf/baseline.json`; `docs/perf/notes-tocrail-636.md`; `contracts/perf/adoption-1058.json`; `contracts/perf/exceptions.json`; `contracts/perf/ratchet.json`; `contracts/perf/registry.json`. ### Verification (verbatim) ```text perf-lint: PASS; 0 violations; 22360 scoped exceptions svelte-check found 0 errors and 2 warnings in 2 files Test Files 275 passed (275) Tests 1909 passed (1909) Start at 15:18:15 Duration 726.47s (transform 28%, environment 27%, import 24%, tests 14%, setup 6%) tocrail-636/1113/1191 e2e: gutter inset, full expanded outline, Copy links, active section, reduced motion, keyboard controls, phone sheet and two-heading threshold passed PASS: 64 screenshots; all 18 2x PNGs have verified native pixel dimensions ``` The two Svelte warnings are existing empty rulesets in `AttachmentDeck.svelte:1055` and `AgendaList.svelte:1277`; this job did not change those files. `cargo clean` output: `Removed 0 files`. No Rust files changed. The last commit after the web gates only updates documentation comments; `node --check` and `git diff --check` pass after that change. ### Screenshot attachments All 64 PNGs are attached to this issue. Required 1440px and 1024px rest/expanded, sidebar open/closed, light/dark images are linked first; tablet, phone, scroll and edge-crop evidence follows. #### 1440px and 1024px review states - [tocrail-expanded-closed-1024-noir-1x.png](https://git.kayg.org/attachments/c7a1cbb4-e72a-40bd-bcb5-c8086cc72d6b) - [tocrail-expanded-closed-1024-noir-2x.png](https://git.kayg.org/attachments/892ca2a1-280d-4de0-862f-b374d86ccabc) - [tocrail-expanded-closed-1024-paper-white-1x.png](https://git.kayg.org/attachments/ec7974b2-9b7c-45a8-ab47-07fa3f5e1a31) - [tocrail-expanded-closed-1024-paper-white-2x.png](https://git.kayg.org/attachments/e3dc6d0c-ce14-4131-b259-8271db7dde3b) - [tocrail-expanded-closed-1440-noir-1x.png](https://git.kayg.org/attachments/37675c1c-3b05-48de-9655-d8aad29787b4) - [tocrail-expanded-closed-1440-noir-2x.png](https://git.kayg.org/attachments/54ccfe71-cfcc-4ee2-b2f0-8ec71e746b60) - [tocrail-expanded-closed-1440-paper-white-1x.png](https://git.kayg.org/attachments/cc9b6244-9346-422e-90f7-d7daa7464f48) - [tocrail-expanded-closed-1440-paper-white-2x.png](https://git.kayg.org/attachments/4cdd93fb-3a80-44ed-9fe5-f9999016c3f4) - [tocrail-expanded-open-1024-noir-1x.png](https://git.kayg.org/attachments/884943f0-43e8-49a6-a106-4fa277c46c16) - [tocrail-expanded-open-1024-noir-2x.png](https://git.kayg.org/attachments/3edf7997-f9c7-411c-a83b-63d05f570f36) - [tocrail-expanded-open-1024-paper-white-1x.png](https://git.kayg.org/attachments/b898aa3a-2fda-49b2-a327-1a1b9dc3e7f2) - [tocrail-expanded-open-1024-paper-white-2x.png](https://git.kayg.org/attachments/c80a2a6d-ca91-42f2-bfd1-946c1fa9be3b) - [tocrail-expanded-open-1440-noir-1x.png](https://git.kayg.org/attachments/4cf73d95-0ce2-4742-8fa3-a74b717b1ee8) - [tocrail-expanded-open-1440-noir-2x.png](https://git.kayg.org/attachments/dd16b9de-6b8c-4952-be23-af082ba4c454) - [tocrail-expanded-open-1440-paper-white-1x.png](https://git.kayg.org/attachments/ce2aa601-ca5d-4706-8ad7-aba698243d27) - [tocrail-expanded-open-1440-paper-white-2x.png](https://git.kayg.org/attachments/1a5cb35e-48a3-4191-8a01-87c951290679) - [tocrail-rest-closed-1024-noir-1x.png](https://git.kayg.org/attachments/61f2e2b5-9480-44a8-8c3a-3a0d35673a50) - [tocrail-rest-closed-1024-noir-2x.png](https://git.kayg.org/attachments/b8296774-76af-4cc1-b59c-e0b7cf08f6dc) - [tocrail-rest-closed-1024-paper-white-1x.png](https://git.kayg.org/attachments/bee4caa2-f2f7-4669-84ab-b334f70c9a31) - [tocrail-rest-closed-1024-paper-white-2x.png](https://git.kayg.org/attachments/c9207816-41e2-4b33-91e1-5c1d9f592541) - [tocrail-rest-closed-1440-noir-1x.png](https://git.kayg.org/attachments/599494b1-1dab-4026-ab4e-0c6f22b387f7) - [tocrail-rest-closed-1440-noir-2x.png](https://git.kayg.org/attachments/16b5c16c-af62-410d-b04b-7bc133831848) - [tocrail-rest-closed-1440-paper-white-1x.png](https://git.kayg.org/attachments/77d4b0fa-c0db-431a-b5a4-c67ef5b4ad00) - [tocrail-rest-closed-1440-paper-white-2x.png](https://git.kayg.org/attachments/a205ff70-2e76-4eb9-b6cb-4c6846304c1c) - [tocrail-rest-open-1024-noir-1x.png](https://git.kayg.org/attachments/4c879c72-284f-4a82-b143-9410219cfe3e) - [tocrail-rest-open-1024-noir-2x.png](https://git.kayg.org/attachments/f56f1057-afa3-49f3-8ffe-7beb2108b7bf) - [tocrail-rest-open-1024-paper-white-1x.png](https://git.kayg.org/attachments/5d1a1447-17de-46c4-9f21-fe99d36f3d19) - [tocrail-rest-open-1024-paper-white-2x.png](https://git.kayg.org/attachments/55498bc2-afc4-4aa1-9fbc-8d3caaf3f04d) - [tocrail-rest-open-1440-noir-1x.png](https://git.kayg.org/attachments/1d91e299-4329-45a3-afc6-b41b5ba55e0a) - [tocrail-rest-open-1440-noir-2x.png](https://git.kayg.org/attachments/bd37f8e5-65e1-4085-8284-5aeaf124f858) - [tocrail-rest-open-1440-paper-white-1x.png](https://git.kayg.org/attachments/9052e1e5-6bfa-4591-a8d1-3501e630800f) - [tocrail-rest-open-1440-paper-white-2x.png](https://git.kayg.org/attachments/3b85f5ff-60ef-4331-aeda-d402a5981ad8) #### Tablet and phone review states - [tocrail-contents-sheet-390-noir.png](https://git.kayg.org/attachments/70a7edd2-e0dd-472f-9dda-4411c36f4924) - [tocrail-contents-sheet-390-paper-white.png](https://git.kayg.org/attachments/31d26ea7-ce7e-444f-8299-305045b4931f) - [tocrail-expanded-open-820-noir-1x.png](https://git.kayg.org/attachments/8a7efed8-b8e4-4230-a95c-da01e6d25c7f) - [tocrail-expanded-open-820-noir-2x.png](https://git.kayg.org/attachments/fd479eb4-9f28-47ab-a7e9-0a7d4b077974) - [tocrail-expanded-open-820-paper-white-1x.png](https://git.kayg.org/attachments/75e914ab-f1ee-4371-b607-0d7b083c2d7e) - [tocrail-expanded-open-820-paper-white-2x.png](https://git.kayg.org/attachments/45dc8e3f-5246-4696-b140-3844d76f62c1) - [tocrail-note-390-noir.png](https://git.kayg.org/attachments/1e56e4c2-f043-42a0-b9b8-47719ef96686) - [tocrail-note-390-paper-white.png](https://git.kayg.org/attachments/bb2cdc0e-c07b-46f6-b700-bbeaad1fba99) - [tocrail-note-820-noir.png](https://git.kayg.org/attachments/1cc2b413-1dbf-4964-9156-46451fef09c3) - [tocrail-note-820-paper-white.png](https://git.kayg.org/attachments/f76ac9a4-b9bb-48d0-a7dc-876d4eb47425) - [tocrail-touch-note-390-noir.png](https://git.kayg.org/attachments/cf4a1b94-3127-4f77-a5a9-62418ed78ecd) - [tocrail-touch-note-390-paper-white.png](https://git.kayg.org/attachments/803dfc50-11a8-4681-8d3d-d5da890374af) - [tocrail-touch-sheet-390-noir.png](https://git.kayg.org/attachments/a2643278-24c3-415c-a995-0a05e614b343) - [tocrail-touch-sheet-390-paper-white.png](https://git.kayg.org/attachments/5d8a468d-00b5-4088-8f53-cb664868ccdc) #### Pinned scroll captures - [tocrail-scroll-bottom-1024-noir.png](https://git.kayg.org/attachments/65652411-7ef1-4251-8d0e-a75941438a32) - [tocrail-scroll-bottom-1024-paper-white.png](https://git.kayg.org/attachments/a7dcd755-df98-48a1-9a08-83f621ae184a) - [tocrail-scroll-bottom-1440-noir.png](https://git.kayg.org/attachments/c988063f-dadd-4295-a938-b2f394cfa235) - [tocrail-scroll-bottom-1440-paper-white.png](https://git.kayg.org/attachments/e8d67862-9573-465d-b6a4-94e594fdd65e) - [tocrail-scroll-bottom-820-noir.png](https://git.kayg.org/attachments/bd26f92b-0202-46c2-a61b-9b711958d9e7) - [tocrail-scroll-bottom-820-paper-white.png](https://git.kayg.org/attachments/3c79ca58-2dc6-40a6-a2db-2e89912118a3) - [tocrail-scroll-middle-1024-noir.png](https://git.kayg.org/attachments/f5ba2cff-f86d-4d16-9258-15ac7249e67a) - [tocrail-scroll-middle-1024-paper-white.png](https://git.kayg.org/attachments/8067e92e-edc6-4c9c-a982-ebd03f013c63) - [tocrail-scroll-middle-1440-noir.png](https://git.kayg.org/attachments/66a67fe0-3944-4837-87b7-79ce3430d537) - [tocrail-scroll-middle-1440-paper-white.png](https://git.kayg.org/attachments/84e6e617-fa96-4ba0-b0a3-5a99717b429e) - [tocrail-scroll-middle-820-noir.png](https://git.kayg.org/attachments/54397ae9-0a99-46c0-bc5f-63fdb37da90d) - [tocrail-scroll-middle-820-paper-white.png](https://git.kayg.org/attachments/8a662842-1c9b-45a3-b300-f3dc08389cce) #### Gutter edge crops - [tocrail-edge-1024-noir-4x.png](https://git.kayg.org/attachments/d791877c-a5e4-4067-8f72-03dc7472730e) - [tocrail-edge-1024-paper-white-4x.png](https://git.kayg.org/attachments/43de7624-5dd4-4d98-88f2-871207a6004c) - [tocrail-edge-1440-noir-4x.png](https://git.kayg.org/attachments/3c4cfeac-8000-4c03-8fa5-ccd7f754cfd6) - [tocrail-edge-1440-paper-white-4x.png](https://git.kayg.org/attachments/8683e9d0-16e4-4797-80d1-53267bca96f5) - [tocrail-edge-820-noir-4x.png](https://git.kayg.org/attachments/d533a734-0500-41d3-b9c4-68e366ac1f7f) - [tocrail-edge-820-paper-white-4x.png](https://git.kayg.org/attachments/b7647040-1968-477e-86c0-e68a443265b4) **Head:** `a8d48a239592fae587ba73d77778b009e0328053` (`docs(notes): connect contents rail reasoning to #1191`). No push, deploy or merge was performed.

kayg referenced this issue from a commit

2026-10-06 13:56:41 +00:00

docs(notes): connect contents rail reasoning to #1191

Rows
Columns

Note contents rail: gutter inset when the sidebar is closed; expand into the blog-style contents card on hover #1191

Owner report (2026-10-06, production): Note contents tick rail

#1191 complete

UX gaps closed

Cost and profile

Decisions not covered by DESIGN

Files

Verification (verbatim)

Screenshot attachments

1440px and 1024px review states

Tablet and phone review states

Pinned scroll captures

Gutter edge crops