* feat(studio): show every colour of a mixed selection in the text swatch
Selecting text painted in more than one colour showed a white swatch. The
toolbar reads a property only when the whole selection agrees on it, which is
right for bold and italic (a toggle is on or off) but wrong for a swatch: with
nothing to report it fell back to the default, so a red-and-green selection
claimed to be white.
The swatch now reads the colours as they run through the selection and draws
one band per run, sized by how many characters carry it. Hard stops, not a
fade — it reports the colours that are there, and a blend would draw colours
that are not. A single-colour selection is a plain swatch, as before, and
picking a colour still applies it to everything selected.
* feat(studio): blend the mixed-colour text swatch instead of banding it
Bands read as two separate swatches sitting next to each other. Each colour
now sits at the middle of its share and the browser fills between them, so the
control looks like one swatch holding a mixed selection.
* fix(studio): keep whitespace out of the text colour swatch
Colouring a whole element and then recolouring one word inside it leaves the
spaces around that word carrying the first colour. The swatch counted them, so
a red word inside green text drew a sliver of green, then red, then green —
the element's colour appearing at an edge where no glyph is painted in it.
Whitespace paints nothing, so it no longer contributes a colour. The swatch
shows the colours the glyphs are actually drawn in, in the order they appear.
* fix(studio): stop the colour swatch repeating its gradient under the border
The swatch grew a green edge on its red side and a red edge on its green side.
`background` maps a gradient to the padding box and then repeats it to fill the
border box, so the 1px ring showed the strip either side of the tile: the
gradient's end colour along the leading edge, its start colour along the
trailing one, both read as a mirrored copy of the swatch.
Painting from the border box instead gives the ring the colour the glyphs next
to it are actually drawn in.
* fix(studio): drop the highlight when a text edit closes
Picking a word with a double press and then clicking away left the word
painted grey. The element was no longer being edited, but the text still read
as selected.
Ending the edit removed contenteditable and blurred the element, and neither
of those drops the browser's own selection. It now clears the selection as
part of the teardown, and only when the selection lives inside the element
being closed — one somewhere else in the preview belongs to whatever put it
there.
* feat(studio): match the mixed-colour swatch to the one in the design tool
The swatch drew a proportional blend along the horizontal: each colour took
the share of the sweep that its characters took of the selection. At 16px that
reads as one muddy smear, and a colour used by a single character is almost
invisible — the opposite of what the control is for, which is answering "which
colours are in here".
It now sweeps diagonally through each distinct colour, evenly spaced, the way
the mixed-colour swatch works in the design tool this sits alongside. A colour
appears once however much text carries it, and the dot itself matches that
reference too: 16px, a 2px ring, and a small lift on hover.
The character counts had no other consumer, so the reader hands back the
distinct colours in document order rather than counting.
* fix(studio): harden mixed-colour text swatches
* refactor(studio): split inline text style readers
* feat(studio): edit and style text in the preview
Double-press a text element in the canvas and the caret opens where you
pressed, in the element itself rather than in a panel. Select characters and
a small toolbar offers colour, bold, italic and underline, applied to
exactly those characters.
The toolbar lives in Studio's document rather than the composition's.
Putting it in the preview would inject Studio's chrome into the user's
composition, where a render would capture it and the composition's own
styling would inherit into it.
In a flex or grid container the rebuilt runs go inside one wrapper, so a
coloured word cannot reflow the element it sits in.
Also fixes the keyboard: the shortcut guards matched contenteditable=true
only, so playback shortcuts ate letters typed into the composition.
* refactor(studio): keep domEditingLayers under the size cap
The rich-text operation pushed this file past the 600-line gate. Same change
the branch made later, landed with the commit that caused it.
* test(studio): wrap selection changes in act
* fix(studio): restore rich text after failed save
* fix(studio): polish inline text editing
* fix(studio): harden inline text editing
Miguel Ángel