Keeps · Working canvas

One board for options, motion, and dated progress

Progress journal

What we were thinking, what we tried, what landed. Newest first.

Crop / Full icons — picked

  • Choice: Arrows in · out (rectangle.arrowtriangle.2.inward ↔ rectangle.arrowtriangle.2.outward), the strong pair.
  • Shipped as product default for the header frame toggle.

HTML canvas workflow

  • Problem: HTML boards were opening in Safari and scattering as separate files — hard to review in Cursor or on the go.
  • Rule: keep HTML in the Cursor panel; one Keeps canvas; dated journal; publish for phone/tablet.
  • This file is that canvas: apps/Keeps/docs/canvas/index.html.

Crop / Full icon pairs

  • Problem: Crop ↔ full toggle needed icons that read as a clear pair.
  • Tried: 10 SF Symbol pairs (crop/expand, compress/expand, arrows in/out, aspect ratio, inset, viewfinder, portrait, square, photo frame).
  • In app: long-press the frame button → pick a pair. Default still Crop · Expand.
  • Board: see Crop / Full icons below (real SF Symbol PNGs).

Detail ↔ swipe morph + crop frame

  • Morph: detail and swipe stay on one screen — metadata/tools fade; deck behind focus; no fullScreenCover “new card”.
  • Crop off (swipe): full photo with blurred letterbox fill. Detail stays plain (no blur).
  • Crop on (detail): single fill layer only — video / Live Photo must match poster fill so a letterboxed surface doesn’t sit in front of a zoomed still.
  • Gestures: morph deck regained left/right tap + middle full-screen (same as dedicated SwipeView).
  • Bridge: crop/frame toggle beside trash; freeze icons; wash behind focus.

Swipe middle bridge button

  • Explored real SF Symbol options for the Archive · glass · Keep middle control (hand.draw → swipe, info → detail).
  • Standalone study still at docs/previews/swipe-middle-button.html; embedded below.

Trim handle shape

  • Matched trim scrubber handles to reference photos; SVG left/right glyphs + HTML preview.
  • Assets under docs/previews/; preview embedded below.

Crop / Full icon pairs

Tap a pair to preview the header control. Crop = card fill. Full = photo boundaries.

Crop / card fill (green in app) Full boundaries

Header · Crop on

Green means card-frame fill is active.

Header · Full on

Primary color means full boundaries.

Selected: Crop · Expand · key cropExpand

Swipe middle button

Earlier study for the glass bridge between Archive and Keep.

Real SF Symbol options

Embedded from docs/previews/swipe-middle-button.html.

Trim handles

Scrubber handle shape study against reference.

Handle preview

Embedded from docs/previews/trim-handle-preview.html.

Remote: https://keeps-canvas.pages.dev/ · same Wi‑Fi: ./serve-canvas.sh → phone opens the printed LAN URL. Desk: keep this file in the Cursor panel (not Safari).