Mockup blocks.html: the pickers on a real phone (#471) [mockup, do not merge]

kayg commented

2026-10-16 16:55:14 +00:00

Owner

Mockup, do not merge. Nothing merges until kayg approves (#471). Fixes kayg's iPhone round; stacked on #491 (the second commit is new here).

Contrast: the shared dense glass is 0.78 in light and dark (one change in packages/ui tokens, so every dense surface follows), checked by a test.
The picker is a shell with the glass as a backplate and its own scroller for the rows, moved to <body>: nothing paints over it, and the glass stays whole while rows scroll.
Touch: real scroller (momentum, overscroll-behavior: contain); a row is chosen by a tap under 8 px.
Keyboard: follows the shared visualViewport (lib/fit/viewport.svelte.ts, from search r5), stays above keyboard and bottom bar, flips above the caret line when fewer than three rows fit.
The caret in a link chip is drawn as tall as the chip's words.

Live: https://preview.calternal.cloud/blocks.html#/note/blocks-and-embeds?list=all. Evidence and notes are on #471.

🤖 Generated with Claude Code

https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

**Mockup, do not merge.** Nothing merges until kayg approves (#471). Fixes kayg's iPhone round; stacked on #491 (the second commit is new here). - Contrast: the shared dense glass is 0.78 in light and dark (one change in `packages/ui` tokens, so every dense surface follows), checked by a test. - The picker is a shell with the glass as a backplate and its own scroller for the rows, moved to `<body>`: nothing paints over it, and the glass stays whole while rows scroll. - Touch: real scroller (momentum, `overscroll-behavior: contain`); a row is chosen by a tap under 8 px. - Keyboard: follows the shared `visualViewport` (`lib/fit/viewport.svelte.ts`, from search r5), stays above keyboard and bottom bar, flips above the caret line when fewer than three rows fit. - The caret in a link chip is drawn as tall as the chip's words. Live: https://preview.calternal.cloud/blocks.html#/note/blocks-and-embeds?list=all. Evidence and notes are on #471. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_019QGa6qjALuHyi8H1naGp6b

kayg added 5 commits

2026-10-16 16:55:14 +00:00

Mockup links.html: missing notes, tag picker, link and handle contrast (#448 , #449 , #450 ) 90aa4ac06a

Mockup only, do not merge. One page with switchable variants:
- #448: a link to a never-written note makes it at the link's path and opens it
  (Made "…" · Undo); Trash card (Restore, Open read-only in place); deleted-for-good
  card (Create a new note, Remove link); a file moved outside the app is found by id
  and its link quietly updated; ⌘↵ in a link does what a click does. Every link leads
  with a kind icon (note, day, photo, file); missing=icondim|icon|fade|dim,
  trash=replace|beside. No underlines.
- #449: `#` opens the same glass picker as `[[`/`@`: prefix then fuzzy, one level at a
  time, counts; Enter/Tab accept, Space keeps typing, Esc closes; trigger=after1|immediate,
  tagrow=count|plain.
- #450: chip=icon-accent|icon-ink|neutral|current (pill only on hover or caret),
  handle=ink|white|current on #319's dense glass, over=paper|photo; contrast measured
  by scripts/links-contrast.mjs and shown in the Mockup pill.

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

Mockup links.html: picked links get their kind icon; no ring on the note text (#448 , #449 ) 1b7d0d4dca

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

Mockup links.html: kayg's approval round (#448 , #449 , #450 ) 2788397d06

- Links sit in the sentence like words: no gap before the punctuation after a link
  (the pill's room is cancelled by an equal negative margin, so hover and the caret
  still never move a word).
- No links summary above a note's title; "Linked here" stays at the end of the note.
- Safari's bars no longer change colour on page changes: one theme-color writer that
  copies the root's edge colour, data-edge on the phone stack, and the app's floor
  under the page, so the sky never shows below a note (keyboard, toolbar, slides).
- Pickers and cards close on navigation, on a click elsewhere and when the caret
  leaves the trigger.
- The Trash card shows the note itself (the approved peek); the plain card is a fallback.
- Cards, pickers and the ink handle and pill use the shared floating glass from #319
  (glass.css, Glass.svelte and its tokens, taken from origin/issue/319-one-glass).

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

Mockup blocks.html: one registry of block actions behind / and Insert, and embeds (#471 )

CI / server (pull_request) Successful in 24s

Details

CI / rust (pull_request) Successful in 1m56s

Details

CI / web (pull_request) Failing after 57m30s

Details

760ba47eeb

One list of block actions (headings, lists, task, quote, code, table, divider, note box,
embed a note, link to a note, photo or file, day link, tag, time-log line). Each is a plugin
file under src/blocks/plugins and has a label, icon, keywords, the markdown it writes and an
optional typed shortcut. The `/` menu (opens at the start of a block or after a space, never
inside "and/or") and the bottom bar's Insert sheet both read it.

Embeds: `![Title](<Note.md>)` and `![Title](<Note.md#Heading>)` render the note, or one part
of it, as a glass card with an open arrow. A note that was never written, is in the Trash or
was deleted for good reuses the links' looks (#448). Photos and files show as media cards.

The shared inline picker gets a Link | Embed switch (tap, or Cmd+E, no motion from the
keyboard). `[[` and `@` start a link; `![[`, `!@`, `![]()` and `/embed` start an embed. A
link's menu offers "Show as embed", an embed's "Show as link".

Also: the picker follows its line when the page scrolls or a picture loads, a space after a
picked link survives the next key in Chromium, `####`, `---` and a code fence work as
typed shortcuts, and an embed counts as a link in "Linked here".

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

Mockup blocks.html: the pickers on a real phone (#471 )

CI / server (pull_request) Successful in 30s

Details

CI / rust (pull_request) Successful in 2m21s

Details

CI / web (pull_request) Failing after 51m27s

Details

9be3be0fd5

kayg's iPhone round:
- Contrast: the shared dense glass is now 0.78 (was 0.56) in light and dark, so menu text keeps
  4.5:1 and icons 3:1 over the worst thing behind it (black in light, white in dark). A test
  checks it from the computed colours.
- The picker is a shell with the glass as a backplate and a separate scroller for the rows, moved
  to <body>: nothing can paint over it, and the glass stays whole while the rows scroll.
- Touch: the list is a real scroller (momentum, no scroll chaining); a row is chosen by a tap
  that moved under 8 px, a mouse still chooses on press.
- Keyboard: the list follows the shared visualViewport (lib/fit/viewport.svelte.ts, from search
  r5), stays above the keyboard and the bottom bar, opens below the caret line when three rows
  fit and above it otherwise, and re-fits as the keyboard changes.
- The caret inside a link chip is drawn as tall as the chip's words; a tap springs it between
  heights, the keyboard never animates.

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

kayg referenced this pull request

2026-10-16 16:55:34 +00:00

Embeds, plus one block-action registry behind the / menu and the Insert sheet #471

kayg referenced this pull request

2026-10-28 00:53:32 +00:00

dev's browser suite has 29 failing tests #697

kayg referenced this pull request

2026-10-28 00:53:32 +00:00

dev CI web job red since 22 Oct: bundle budgets exceeded #689

kayg referenced this pull request

2026-11-04 13:06:24 +00:00

Open PR triage (Nov 4) #931