Skip to content

fix: the arrow is narrow, and the centre can be dragged - #27

Merged
DoodleBears merged 1 commit into
mainfrom
fix/narrow-arrow-and-drag
Oct 1, 2026
Merged

DoodleBears merged 1 commit into
mainfrom
fix/narrow-arrow-and-drag

Conversation

@DoodleBears

Copy link
Copy Markdown
Contributor

Why

Both reported against the demo: the chevron looked like a glow in one corner, and a centre
you had to hit with a single click was a target nobody aimed at twice.

Change outline

The chevron was a corner glow. Its traversal was a continuous ramp, and a continuous ramp
cannot draw an arrow here: arm takes five distinct values on a 9-row field, so its level
sets are V shapes in theory and a blob in practice — no envelope resolves a line out of five
steps. ring already solved this by being quantised, on an integer lattice, for exactly
this reason, and quantising |along - arm| makes the zero-cells be the arrow rather than
a wash across it. One band per grid step is what keeps it narrow.

Its preset also moved morph → spiral: the traversal is ours but the envelope is the
preset's
, and a plateau holds its level instead of running a crest along the arrow.

The centre is a drag, not a click — setPointerCapture, touch-action: none, movement
only while held (a hover would make the centre chase the cursor). The hint names the
gesture, because drag and click are different affordances and the sentence is the only
thing saying so. The handle is a ring rather than a dot: a 7px disc on a field of 81 dots
reads as one more dot.

Special things to note

  • A layout bug the screenshot caught and the drag probe could not. The overlay was
    inset: 0, spanning the field's padding box, so a handle at 0% sat in the padding
    rather than on the first row of dots — it rendered outside the grid while every
    behavioural assertion reported the correct cell
    . Fixed by insetting the overlay by the
    same 6px.
  • That is the second time this session geometry had to be read off a screenshot: the
    numbers were right and the pixels were somewhere else.
  • The chevron test asserts the zero-cells form the V by reading the whole set rather
    than a few guessed ones — arm spans five rows and along nine, so the arms land every
    two columns, and my first attempt asserted a 1:1 diagonal and reported a shape that was
    fine.
  • 273 tests, oxlint 0, registry ok, both changelog ledgers.

🤖 Generated with Claude Code

Both reported against the demo.

THE CHEVRON WAS A CORNER GLOW. Its traversal was a continuous ramp, and a continuous ramp
cannot draw an arrow here: `arm` takes five distinct values on a 9-row field, so its level
sets are V shapes in theory and a blob in practice, and no envelope resolves a line out of
five steps. `ring` already solved this by being QUANTISED, on an integer lattice, for
exactly this reason — and quantising `|along - arm|` makes the zero-cells be the arrow
itself rather than a wash across it. One band per grid step is what keeps it narrow; any
fewer and adjacent cells share a band and the arrow thickens.

Its preset also moved from `morph` to `spiral`. The traversal is ours but the envelope is
the preset's, and a plateau HOLDS its level instead of running a crest along the arrow, so
the right traversal under the wrong envelope still looked like a static gradient.

The test asserts the zero-cells form the V, by reading the WHOLE set rather than a few
guessed ones — `arm` spans five rows and `along` nine columns, so the arms land every two
columns, and my first attempt asserted a 1:1 diagonal and reported a shape that was fine.

THE CENTRE IS A DRAG, not a click. `setPointerCapture` so the gesture survives leaving the
element, `touch-action: none` so a touch drag does not scroll the page, and movement only
while held — a hover would make the centre chase the cursor the moment it entered the
field, which nobody asked for. The hint names the GESTURE, because a centre you can drag
and a centre you can click are different affordances and the sentence is the only thing
saying so. The handle is a ring rather than a dot: a 7px disc on a field of 81 dots reads
as one more dot, and the ring is what says "this is a thing you move".

AND A LAYOUT BUG THE SCREENSHOT CAUGHT, which the drag probe could not: the overlay was
`inset: 0`, spanning the field's PADDING box, so a handle at 0% sat in the padding rather
than on the first row of dots — it rendered outside the dot grid while every behavioural
assertion reported the correct cell. Fixed by insetting the overlay by the same 6px. This
is the second time this session that geometry had to be read off a screenshot: the numbers
were right and the pixels were somewhere else.

273 tests, oxlint 0, registry ok, both changelog ledgers.
@coderabbitai

coderabbitai Bot commented Oct 1, 2026

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 37 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: c01bcb52-1231-40a0-bc05-b7efe6ca1a65

📥 Commits

Reviewing files that changed from the base of the PR and between 00dc83c and 7e08abe.

📒 Files selected for processing (8)
  • CHANGELOG.md
  • CHANGELOG.zh.md
  • apps/site/messages/en.json
  • apps/site/messages/zh.json
  • apps/site/src/components/TraversalDemo.tsx
  • apps/site/src/styles/site.css
  • apps/site/src/traversals.ts
  • apps/site/test/traversal.test.ts
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@DoodleBears
DoodleBears merged commit 11ade35 into main Oct 1, 2026
2 checks passed
@DoodleBears
DoodleBears deleted the fix/narrow-arrow-and-drag branch October 1, 2026 21:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant