Two complaints from the user on the rail:
1. Still too wide at 1.5rem (~24px).
2. The band doesn't visually distinguish itself from the canvas
so the grip + "+" look detached.
Fixes:
- **Rail trimmed to 1rem (~16px)** — combined with content-px gives
a 32px total padding on the rail side. The 28×28 grip lands
at content.left+0 → +28 with a 4px gap before the text. This is
the minimum band width that still keeps the grip fully inside
the editor's visible content area.
- **Dotted pattern on the band** — `[data-words-content]::before`
fills the rail's padding zone (32px wide, full height) with a
radial-gradient dot pattern at 8×8 px tiles. Color is
`status-color @ 40% opacity` so the dots read as a "this is a
gutter" cue without competing with content. `pointer-events:
none` and `z-index: 0` so they don't interfere with selection
or caret.
- **Flips with drawer side** — when `<Words.Drawer side='left'>`
the pseudo's inset moves to inline-end so the dotted band tracks
the rail to the right side.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
dev
33b3a580b7