Mockup: attachment cards round 2, kayg's review and bounce-card galleries (#172, #245)

kayg commented

2026-10-14 12:19:16 +00:00

Owner

Round 2 of the attachment mockup: kayg's review in #245. It replaces #232 (the forge ignores pushes to an open PR), so it includes round 1 (#172) too, rebased on today's dev. Mockup only.

Live at https://preview.calternal.cloud/#/note/autumn-trip?list=all and https://preview.calternal.cloud/#/note/lake-weekend?list=all

Points from #245

The card whose ⋯ or right-click menu is open stays grown, with its toolbar showing.
Pressing a toolbar button never presses the picture (:has() keeps the press for the card itself).
Not built: three options are posted on #245 for you to choose from.
Nothing in the mockup to change; see the #245 comment.
Hover is scale only: no lift, no photo drift, no map zoom, no PDF tilt.
The name strip sits on the picture: a soft blur that fades in, the name, then dimensions or length and size in small tabular figures.
"Deeplink" is gone from Copy as; Copy link to block is the one link.
Double-click opens the original file (a 2000 px copy) in the viewer. A click shows it 1:1, and you can scroll around.
A real recording plays. Its waveform is decoded from the sound (RMS per bar), and the player is only created on first play.
Layout changes grow the card from its old shape (FLIP on a spring), and the blocks below glide to their new place. Keyboard changes happen at once.
Syntax colours, lib/highlight.ts:
- The language comes from the fence word or file extension, else from the code itself, and shows as "Plain text" when it can't tell.
- Python, TS/JS, Rust, Shell, JSON, CSS and SQL.
- Used by code blocks and code-file embeds.
Embedded notes are drawn by the editor's own block renderer: BlockContent.svelte is now shared by Editor.svelte and NoteCard.svelte, and so is blockview.ts (tree lines and list numbers).
- No side bar, and Open is in the toolbar.
- Opening scales the note up out of its card instead of the fade.

Galleries (kayg's markdown decision)

Markdown: one image per line stays a single image. Several images on one line, separated by spaces, are a gallery.
Stack: our own take on bounce-cards, with no library. A fanned stack of prints bounces in on an elastic spring (WAAPI on scale) when it scrolls into view.
- Pointing at a print brings it forward and nudges the others aside, as far as the line has room.
- ← → change the front print with no motion.
- Reduced motion: no bounce.
Grid is the other layout.
Building and splitting a gallery:
- A quiet + beside a single image adds a picture to its line.
- Dropping one image card on another joins them.
- "Take out of gallery" moves a picture to its own line below.
Fixtures: "Weekend by the lake" shows both forms.

Also

ui.svelte.ts: a focused element that unmounts made the focusout listener write state during Svelte's update (state_unsafe_mutation). That write is now deferred with a microtask.

🤖 Generated with Claude Code

https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

Round 2 of the attachment mockup: kayg's review in #245. It replaces #232 (the forge ignores pushes to an open PR), so it includes round 1 (#172) too, rebased on today's dev. **Mockup only.** Live at https://preview.calternal.cloud/#/note/autumn-trip?list=all and https://preview.calternal.cloud/#/note/lake-weekend?list=all **Points from #245** 1. The card whose ⋯ or right-click menu is open stays grown, with its toolbar showing. 2. Pressing a toolbar button never presses the picture (`:has()` keeps the press for the card itself). 3. Not built: three options are posted on #245 for you to choose from. 4. Nothing in the mockup to change; see the #245 comment. 5. Hover is scale only: no lift, no photo drift, no map zoom, no PDF tilt. 6. The name strip sits on the picture: a soft blur that fades in, the name, then dimensions or length and size in small tabular figures. 7. "Deeplink" is gone from Copy as; Copy link to block is the one link. 8. Double-click opens the original file (a 2000 px copy) in the viewer. A click shows it 1:1, and you can scroll around. 9. A real recording plays. Its waveform is decoded from the sound (RMS per bar), and the player is only created on first play. 10. Layout changes grow the card from its old shape (FLIP on a spring), and the blocks below glide to their new place. Keyboard changes happen at once. 11. Syntax colours, `lib/highlight.ts`: - The language comes from the fence word or file extension, else from the code itself, and shows as "Plain text" when it can't tell. - Python, TS/JS, Rust, Shell, JSON, CSS and SQL. - Used by code blocks and code-file embeds. 12. Embedded notes are drawn by the editor's own block renderer: `BlockContent.svelte` is now shared by `Editor.svelte` and `NoteCard.svelte`, and so is `blockview.ts` (tree lines and list numbers). - No side bar, and Open is in the toolbar. - Opening scales the note up out of its card instead of the fade. **Galleries (kayg's markdown decision)** - **Markdown:** one image per line stays a single image. Several images on one line, separated by spaces, are a gallery. - **Stack:** our own take on bounce-cards, with no library. A fanned stack of prints bounces in on an elastic spring (WAAPI on `scale`) when it scrolls into view. - Pointing at a print brings it forward and nudges the others aside, as far as the line has room. - ← → change the front print with no motion. - Reduced motion: no bounce. - **Grid** is the other layout. - **Building and splitting a gallery:** - A quiet + beside a single image adds a picture to its line. - Dropping one image card on another joins them. - "Take out of gallery" moves a picture to its own line below. - **Fixtures:** "Weekend by the lake" shows both forms. **Also** - `ui.svelte.ts`: a focused element that unmounts made the focusout listener write state during Svelte's update (`state_unsafe_mutation`). That write is now deferred with a microtask. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

kayg added 2 commits

2026-10-14 12:19:16 +00:00

Mockup: attachment embeds as floating cards, with menus that fit each kind (#172 ) 942ca4ceef

Every embed is a floating card with layered depth that lifts and grows a
touch on a spring under the pointer (kayg.org's card feel), and focuses with
a ring and no motion from the keyboard. Each kind gets its own context menu
(layouts as an icon row, the kind's actions, then the shared tail: copy
link to block, copy as, duplicate, move, delete) and a mini toolbar with the
layouts and the one or two actions people reach for most.

Fixture note "Autumn trip": Large and Card photos, a gallery made from
adjacent photos (carousel or grid), HEIC, GIF, video, a recording,
PDF, CSV, code, a plain file, an embedded note, a link card and pill, and a
place from a geo: link. Stacked on #176 (#133's mockup refresh).

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

Mockup round 2 for attachments: kayg's review (#245 )

CI / server (pull_request) Successful in 28s

Details

CI / rust (pull_request) Failing after 2m4s

Details

CI / web (pull_request) Failing after 15s

Details

f8c3632c59

- The card whose menu is open stays grown with its toolbar showing (1).
- Pressing the toolbar never presses the picture (2).
- Hover is scale only: no lift, no photo drifting inside (5).
- Pictures carry their name on a soft blurred strip with size and
  dimensions (6).
- Copy as drops Deeplink; Copy link to block is the one link (7).
- Double-click opens the original at full resolution, click for 1:1 (8).
- Recordings play for real and draw their waveform from the sound (9).
- Layout changes grow from the old shape; text below glides (10).
- Code blocks and code files find their language, say Plain text
  otherwise, and get syntax colours (11).
- Embedded notes are drawn by the editor's own block renderer
  (BlockContent), no side bar, Open in the toolbar, and the note scales up
  out of its card when opened (12).
- Galleries: several images on one line. They bounce in as a fanned
  stack when scrolled into view (our own take on bounce-cards); pointing
  brings a print forward, arrow keys do it at once. A quiet + beside a
  single image adds a picture to its line, dropping one image on another
  joins them, and Take out of gallery moves one to its own line.
- Fixture note "Weekend by the lake" shows both ways to write pictures.

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 12:19:17 +00:00

Mockup: attachment embeds as floating cards, with menus that fit each kind (#172) #232

kayg referenced this pull request

2026-10-14 12:19:34 +00:00

Attachment mockup, round 2: kayg's 12 points #245

kayg referenced this pull request

2026-10-14 12:59:52 +00:00

Mockup: attachment cards round 2, bounce cards like the original, shared context menu (#172, #245) #278

kayg commented

2026-10-14 12:59:53 +00:00

Author