Playground: demo the H-K salience, flex, and scroll-anchor capabilities#513
Merged
DROOdotFOO merged 5 commits intoJul 13, 2026
Merged
Conversation
Three shipped capabilities had no representation in the playground, so the
work was invisible to anyone browsing it:
Salience Palette the H-K colour solver -- palettes are (hue, chroma, tier)
and lightness is *solved* against the terminal background
detected via OSC 11, so the same semantic colour resolves
differently against different grounds.
Flex Layout the spec-9.7 engine: flex_wrap, align_content :stretch vs
:flex_start, gap, flex: 1 growth, and the automatic
min-content minimum flooring a column at its content width.
Scroll Anchor Viewport overflow_anchor :auto -- a growing log stays
pinned to the tail, scrolling up releases the pin, :none
freezes it.
Each is interactive, so the rule is visible rather than merely rendered.
Widget-count assertions move 30 -> 33.
merklebonsai
force-pushed
the
pr/playground-capability-demos
branch
from
July 13, 2026 14:59
222ae88 to
e28c4ce
Compare
Viewport returned a `:row`. A `:row`/`:column` dissolves into its children's positions and never becomes a positioned element, so it cannot carry identity, cannot bound its own height, and cannot stamp `:clip_bounds`. Windowed content was therefore free to paint straight through the enclosing border and over whatever followed it. Only `:box` produces a positioned element. Render as one: it carries `:id`, defaults `height` to `visible_height` and `overflow` to `:hidden` (both `put_new`, so callers keep the last word), and passes `overflow_anchor` through for the LiveView surface to key its `overflow-anchor` CSS off. The inner content column also pinned `gap: 0`. It is a literal `:column`, which routes through the Containers compat map, whose historical default is gap 1 -- it was silently double-spacing every windowed row. Viewport render output gains one nesting level (box > row > [content, scrollbar]); the tests that walked the old shape descend accordingly.
The windowed rows were double-spaced: the content column is a literal `:column`,
which routes through `containers_compat_to_flex/2`, and that reads gap from
`:attrs` or the top level -- never from `:style` -- defaulting it to 1 in layout
mode. Declaring `style: %{gap: 0}` therefore did nothing.
With a 2-row stride, twelve windowed rows spanned twenty-four rows while the
viewport clipped at twelve, so half of them were clipped away and the demo
looked broken.
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Three shipped capabilities had no representation in the playground, so the work was effectively invisible to anyone browsing it. Each demo is interactive, so the rule is visible rather than merely rendered.
(hue, chroma, tier)and lightness is solved against the terminal background detected via OSC 11. Cycle hue/tier and the assumed ground to see the same semantic colour resolve differently against different grounds — which is the entire point of the solver.flex_wrap,align_content: :stretchvs:flex_start,gap, andflex: 1growth, with the automatic min-content minimum visibly flooring a column at its content width.Viewport'soverflow_anchor: :auto: a growing log stays pinned to the tail; scrolling up releases the pin;:nonefreezes it.Widget-count assertions move 30 → 33 (
catalog_test,app_test,sidebar_scroll_test).Playground suite: 301/301 pass. Compile clean (
--warnings-as-errors), format clean.Note: #509 also adds a demo (OSC Ambient) and bumps the same counts, so a trivial conflict on those assertions is expected whichever merges second.