Editor look: Width (Narrow/Wide/Full), --- splits cards, springy menu, mono source (#155)

kayg commented

2026-10-14 10:02:08 +00:00

Owner

Closes #155 (with the two scope updates: Width replaces Page/Card).

Width: Narrow / Wide / Full (Style → Width, replaces Page/Card and "Wide page")

Full is the old Page look: the page fills its glass frame, edge to edge.
Narrow (680 px column) and Wide (940 px) float the paper on the backdrop. There is no glass frame; the paper itself is the framed surface (lib/paper.ts, a CodeMirror layer behind the text). The text column is never padded for the card, so the handle and the → ⋯ pill sit inside the card at every width. On a phone-width window a floating card has no room for them, so they're hidden there (right-click and long press still open the menu).
Changing width from the mouse springs the card in place (--spring-morph). A growing card widens first and the text follows once it has room; a shrinking one narrows the text first, so text rewraps once, never during the spring. The keyboard (and opening a note) changes it at once.
The card's horizontal placement is CSS (cm.css), so it follows Focus and the Width spring; JS only gives each card its top and height from CodeMirror's height map (no DOM reads while typing).
Migration: calternal-layout: card opens as Narrow (Wide if calternal-wide: true); a page opens as Full. Choosing a width writes calternal-width and removes the old keys. Nothing is rewritten on open.

--- (thematic breaks), packages/editor/src/syntax/breaks.ts

Narrow/Wide: each --- splits the paper into stacked cards with the backdrop in the gap. Full: a calm 1 px divider.
The --- is hidden except while the caret is on its line (then it shows, muted). Both states have the same line height, so nothing moves.
Typing --- straight under a line of text used to make that line a setext heading (the "void"). Typing it there now adds a blank line first, so it stays a break in every markdown reader. The file still says ---.

Opacity / Blur act on the paper itself (the page at Full, the cards at Narrow/Wide), with a floor of 40%. Blur only applies below 100%.

Root cause of "Card at 99% jumps to 0": below 100% the shell masks the frame's glass to a thin ring (that's right for a page), but in Card the visible surface was that glass, so it vanished. The card's own paper was a fixed var(--paper) and .page.card forced --page-bg: transparent, so the opacity value reached nothing after that.

Context menu: grows from the pointer (origin is the click point, even when the menu had to move to fit) with a short spring on scale 0.96 → 1 (spring(0.72, 0.2) squeezed into 200 ms), a 140 ms fade and a 3 px blur clearing. The submenu grows from its row. It closes in 100 ms. Opened or closed from the keyboard, it doesn't animate.

Source mode uses Maple Mono for the whole note, title included, at the same sizes. The 500 face is fetched at startup without holding the first paint. Switching keeps the caret's line where it was on screen (only the editor's own scroller moves).

Coordination: tree lines (#133) and breaks both live in the default-mode compartment. I didn't touch block chrome positioning (#148): the controls are inside the card because the card is drawn around the unpadded column. BottomBar (#145) and the save label (#139) are untouched; Shell only hides the frame glass and progressive blur at Narrow/Wide. TASTE.md and ADR 0035 now say "width" where they said "page or card".

Tests: packages/editor/test/breaks.test.ts (4), apps/web/e2e/width.spec.ts (cards and controls inside them, divider and caret reveal, migration and key tidy-up, see-through floor, source font and caret, keyboard menu, plus a @perf typing test for Full vs Narrow). Evidence and numbers are on #155.

🤖 Generated with Claude Code

https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

Closes #155 (with the two scope updates: Width replaces Page/Card). **Width: Narrow / Wide / Full** (Style → Width, replaces Page/Card and "Wide page") - Full is the old Page look: the page fills its glass frame, edge to edge. - Narrow (680 px column) and Wide (940 px) float the paper on the backdrop. There is no glass frame; the paper itself is the framed surface (`lib/paper.ts`, a CodeMirror layer behind the text). The text column is never padded for the card, so the handle and the → ⋯ pill sit inside the card at every width. On a phone-width window a floating card has no room for them, so they're hidden there (right-click and long press still open the menu). - Changing width from the mouse springs the card in place (`--spring-morph`). A growing card widens first and the text follows once it has room; a shrinking one narrows the text first, so text rewraps once, never during the spring. The keyboard (and opening a note) changes it at once. - The card's horizontal placement is CSS (`cm.css`), so it follows Focus and the Width spring; JS only gives each card its top and height from CodeMirror's height map (no DOM reads while typing). - Migration: `calternal-layout: card` opens as Narrow (Wide if `calternal-wide: true`); a page opens as Full. Choosing a width writes `calternal-width` and removes the old keys. Nothing is rewritten on open. **`---` (thematic breaks)**, `packages/editor/src/syntax/breaks.ts` - Narrow/Wide: each `---` splits the paper into stacked cards with the backdrop in the gap. Full: a calm 1 px divider. - The `---` is hidden except while the caret is on its line (then it shows, muted). Both states have the same line height, so nothing moves. - Typing `---` straight under a line of text used to make that line a setext heading (the "void"). Typing it there now adds a blank line first, so it stays a break in every markdown reader. The file still says `---`. **Opacity / Blur** act on the paper itself (the page at Full, the cards at Narrow/Wide), with a floor of 40%. Blur only applies below 100%. - Root cause of "Card at 99% jumps to 0": below 100% the shell masks the frame's glass to a thin ring (that's right for a page), but in Card the visible surface *was* that glass, so it vanished. The card's own paper was a fixed `var(--paper)` and `.page.card` forced `--page-bg: transparent`, so the opacity value reached nothing after that. **Context menu**: grows from the pointer (origin is the click point, even when the menu had to move to fit) with a short spring on scale 0.96 → 1 (`spring(0.72, 0.2)` squeezed into 200 ms), a 140 ms fade and a 3 px blur clearing. The submenu grows from its row. It closes in 100 ms. Opened or closed from the keyboard, it doesn't animate. **Source mode** uses Maple Mono for the whole note, title included, at the same sizes. The 500 face is fetched at startup without holding the first paint. Switching keeps the caret's line where it was on screen (only the editor's own scroller moves). Coordination: tree lines (#133) and breaks both live in the default-mode compartment. I didn't touch block chrome positioning (#148): the controls are inside the card because the card is drawn around the unpadded column. BottomBar (#145) and the save label (#139) are untouched; Shell only hides the frame glass and progressive blur at Narrow/Wide. TASTE.md and ADR 0035 now say "width" where they said "page or card". Tests: `packages/editor/test/breaks.test.ts` (4), `apps/web/e2e/width.spec.ts` (cards and controls inside them, divider and caret reveal, migration and key tidy-up, see-through floor, source font and caret, keyboard menu, plus a `@perf` typing test for Full vs Narrow). Evidence and numbers are on #155. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

kayg added 1 commit

2026-10-14 10:02:09 +00:00

Editor look: Width replaces Page/Card, --- splits cards, springy menu, mono source (#155 )

CI / web (pull_request) Failing after 27s

Details

CI / rust (pull_request) Successful in 1m50s

Details

8922dff883

- Width (Narrow / Wide / Full) replaces the Page/Card look and "Wide page". Full is the old
  page in its frame; Narrow and Wide float the paper on the backdrop, drawn as cards on a
  CodeMirror layer, so the margin controls sit inside the card. Older calternal-layout /
  calternal-wide keys open at their new width and are tidied when a width is chosen.
- A width change from the mouse springs the card in place; the text rewraps once, after.
  The keyboard changes it at once.
- --- (a thematic break) splits floating paper into stacked cards and is a calm divider at
  Full. The --- shows, muted, only with the caret on its line; same height either way.
  Typing --- under a line of text adds a blank line first, so it stays a break, not a heading.
- Opacity and blur act on the paper itself (page or cards), floor 40%. Fixes Card at 99%:
  the frame glass vanished and the card's paper ignored the opacity.
- The context menu grows from the pointer with a short spring, fade and blur; the submenu
  from its row; keyboard-opened menus just appear.
- Source mode is set in Maple Mono; switching keeps the caret's line in place.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

kayg referenced this pull request

2026-10-14 11:39:51 +00:00

Editor look: Width (Narrow/Wide/Full), --- splits cards, springy menu, mono source (#155) #252

kayg commented

2026-10-14 11:39:56 +00:00

Author

Owner

Replaced by #252 (rebased on dev, plus the readable menu surface). Closing.

kayg closed this pull request

2026-10-14 11:39:57 +00:00

kayg referenced this pull request

2026-10-14 11:42:11 +00:00