v0.2.9
QR codes: @monowind/qr-code
<mono-qr>renders a scannable QR code on the grid. The element's text is the value; the code is packed into the font's real cell proportions — half blocks where a cell is twice as tall as wide, so a version-1 code is 21 columns by 11 rows — and the light DOM keeps the value for screen readers.levelpicks the error-correction level (the renderer raises it further when the chosen size has room),scalegrows the symbol uniformly, andaspectoverrides the measured cell ratio. The quiet zone a reader needs is ordinary padding, opt-in like every utility:px-4 py-2is the standard four modules.- Themes restyle a code through their glyph set (
qrFull,qrUpper,qrLower); a set with only a full block renders two cells per module, so an ASCII-only theme still scans. - Scannability is tested end to end: every packing is decoded from a raster in Node, and screenshots of the painted code are decoded in Chromium, Firefox, and WebKit.
Borders, blocks, and shades tile in any font
- Box-drawing and block glyphs fit their row. Fonts that draw them shorter than the line (Menlo and SF Mono do, and any font under a taller
leading-*) used to leave a hairline between rows of borders, scrollbar thumbs, and QR codes. Each such range is now scaled a pixel and a half past the row and pinned to it, one transform per range so junctions and halves keep meeting, checked against the engine's own baseline. - Shades
░ ▒ ▓stay crisp. A shade's lattice is locked to whole device pixels, so scaling never resamples it into moiré, and its pattern carries on from row to row instead of restarting at every line, so a scrollbar track reads as one continuous texture. - Cells are a whole number of layout units. The cell width rounds up to 1/64 px, the unit Chromium and WebKit snap boxes to, so a row of fitted glyphs ends exactly where a row of text does; and inline backgrounds now reach a row's edges in fonts whose content area is shorter than the line box (SF Mono in Safari), so rows of
bg-*no longer show a seam. size-*utilities are read in Firefox's class-scan fallback likew-*andh-*.
Scrolling
- Arrow keys scroll a focused container reliably in Firefox. A key press no longer triggers a relayout, which cut Firefox's smooth keyboard scroll short after a few pixels; relayouts now happen only for Enter and Space (Space on a scroll container pages it instead). A layout pass also writes a container's scroll position back only when the pass moved it, since any write cancels a native scroll in flight.
- Keyboard scrolls settle on a cell in Safari, which fires no
scrollendafter them: the settle now also runs after a short pause following a key press.
Selection
- Text-mode drags inside a banner select by character, and the painted highlight and the copy follow the range; a drag across the banner still takes it whole. A double-click on a custom leaf selects the art's line under the pointer and a triple-click the whole leaf, in both modes.
<mono-ascii>folds only collapsible whitespace, so a run of widens a gap, and a no-break space draws as the space glyph.
Playground
- The default sample ends with a QR code in a promo box, alongside the story's other glyphs.
Full changelog: v0.2.8...v0.2.9