drawnui-react 0.1.0-preview.16 → 0.1.0-preview.17

package/dist/controls/SkiaLabel.js

@@ -24,6 +24,8 @@ export class SkiaLabel extends SkiaControl {
     verticalTextAlignment = "Start";
     lineSpacing = 1;
     lineHeight = 1;
+    paragraphSpacing = 0;
+    characterSpacing = 1;
     textTransform = "None";
     padding = Thickness.Zero;
     /** Styled fragments; when not empty they replace `Text` (same precedence as C#). */
@@ -79,6 +81,18 @@ export class SkiaLabel extends SkiaControl {
     /** Multiplier applied to the natural line height (ascent + descent). */
     get LineHeight() { return this.lineHeight; }
     set LineHeight(v) { this.Set("lineHeight", v); }
+    /**
+     * Space above every paragraph after the first, in lines (C# ParagraphSpacing; 0 here as DrawnUi.Rust, C# 0.25). A
+     * paragraph starts after "\n"; U+2028 breaks the line inside a paragraph.
+     */
+    get ParagraphSpacing() { return this.paragraphSpacing; }
+    set ParagraphSpacing(v) { this.Set("paragraphSpacing", v); }
+    /**
+     * C# CharacterSpacing: 1 = the font's own spacing; every glyph is followed by (CharacterSpacing - 1) points more
+     * (less below 1), the line measures and wraps at the width it draws (C# 7cf1007c, DrawnUi.Rust label).
+     */
+    get CharacterSpacing() { return this.characterSpacing; }
+    set CharacterSpacing(v) { this.Set("characterSpacing", v); }
     get TextTransform() { return this.textTransform; }
     set TextTransform(v) { this.Set("textTransform", v); }
     get Padding() { return this.padding; }
@@ -113,6 +127,8 @@ export class SkiaLabel extends SkiaControl {
     mainFonts;
     fontsCache = new Map();
     runCache = new Map();
+    /** CharacterSpacing in pixels at the measured scale: added after every glyph of a run (its Width includes them). */
+    glyphSpacing = 0;
     ResolveFonts(family, weight, italic, sizePx) {
         const key = `${family}|${this.fontFamilyFallback}|${weight}|${italic}|${sizePx}`;
         let f = this.fontsCache.get(key);
@@ -142,12 +158,24 @@ export class SkiaLabel extends SkiaControl {
         const weight = span.FontWeight > 0 ? span.FontWeight : span.IsBold ? 700 : this.fontWeight > 0 ? this.fontWeight : bold ? 700 : 0;
         return this.ResolveFonts(span.FontFamily ?? this.fontFamily, weight, italic, (span.FontSize ?? this.fontSize) * scale);
     }
-    static Advance(font, text) {
+    Advance(font, text) {
         let w = 0;
         for (const adv of font.getGlyphWidths(font.getGlyphIDs(text)))
-            w += adv;
+            w += adv + this.glyphSpacing;
         return w;
     }
+    static Ignorable = /[\u200B-\u200F\u2060-\u2064\uFE00-\uFE0F\u{E0000}-\u{E0FFF}]/u;
+    /**
+     * Default-ignorable code points (zero width space, joiners, direction marks, word joiners, variation selectors such
+     * as U+FE0F after an emoji, tags) that none of the fonts has draw nothing and take no room, never the missing-glyph
+     * box (DrawnUi.Rust label_ignorables; text is not shaped here, C# hides them by shaping).
+     */
+    static DropIgnorables(text, main, fallbacks) {
+        if (!SkiaLabel.Ignorable.test(text))
+            return text;
+        const has = (cp) => main.getGlyphIDs(cp)[0] !== 0 || fallbacks.some((f) => f.getGlyphIDs(cp)[0] !== 0);
+        return Array.from(text).filter((cp) => !SkiaLabel.Ignorable.test(cp) || has(cp)).join("");
+    }
     /**
      * Splits text into runs by glyph availability: the main font, or the first fallback that has a glyph where the
      * main font has glyph 0. Spaces always stay on the main font (fallback faces often carry very wide spaces).
@@ -161,8 +189,13 @@ export class SkiaLabel extends SkiaControl {
             const main = fonts.Main;
             const fbs = fonts.Fallbacks;
             cached = [];
+            text = SkiaLabel.DropIgnorables(text, main, fbs);
+            if (text.length === 0) {
+                this.runCache.set(cacheKey, cached);
+                return cached;
+            }
             if (fbs.length === 0) {
-                cached.push({ Text: text, Font: main, Width: SkiaLabel.Advance(main, text), Fonts: fonts });
+                cached.push({ Text: text, Font: main, Width: this.Advance(main, text), Fonts: fonts });
             }
             else {
                 const cps = Array.from(text);
@@ -181,13 +214,13 @@ export class SkiaLabel extends SkiaControl {
                     const f = fontFor(i);
                     if (f !== current) {
                         const t = cps.slice(start, i).join("");
-                        cached.push({ Text: t, Font: current, Width: SkiaLabel.Advance(current, t), Fonts: fonts });
+                        cached.push({ Text: t, Font: current, Width: this.Advance(current, t), Fonts: fonts });
                         start = i;
                         current = f;
                     }
                 }
                 const t = cps.slice(start).join("");
-                cached.push({ Text: t, Font: current, Width: SkiaLabel.Advance(current, t), Fonts: fonts });
+                cached.push({ Text: t, Font: current, Width: this.Advance(current, t), Fonts: fonts });
             }
             this.runCache.set(cacheKey, cached);
         }
@@ -195,6 +228,76 @@ export class SkiaLabel extends SkiaControl {
     }
     Width(runs) { let w = 0; for (const r of runs)
         w += r.Width; return w; }
+    /** A line never starts with these (closing punctuation, small kana, the long vowel mark): JIS X 4051 kinsoku (C#). */
+    static NoBreakBefore = "、。，．・：；？！゛゜ヽヾゝゞ々〻ー」』）〕］｝〉》】〗〙〟｠»’”‐゠–〜～ぁぃぅぇぉっゃゅょゎゕゖァィゥェォッャュョヮヵヶㇰㇱㇲㇳㇴㇵㇶㇷㇸㇹㇺㇻㇼㇽㇾㇿ｡｣､･ｰｧｨｩｪｫｬｭｮｯ)]},.!?:;%";
+    /** A line never ends with these (opening brackets and quotes). */
+    static NoBreakAfter = "「『（〔［｛〈《【〖〘〝｟«‘“｢([{";
+    /** Chinese / Japanese: ideographs, kana, CJK punctuation, full-width forms (C# IsCjkAt). Korean breaks at spaces only. */
+    static Cjk = /[\u3000-\u312F\u3190-\u33FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF\uFF00-\uFFEF\u{20000}-\u{3FFFF}]/u;
+    static CanBreakBetween(before, after) {
+        return (SkiaLabel.Cjk.test(before) || SkiaLabel.Cjk.test(after)) && !SkiaLabel.NoBreakBefore.includes(after) && !SkiaLabel.NoBreakAfter.includes(before);
+    }
+    /**
+     * C# CanBreakInsideWord: whether a line may break between text[index - 1] and text[index] (UTF-16 indexes) inside a
+     * space-free run: next to a Chinese or Japanese character, never before closing punctuation or small kana, never
+     * after an opening bracket, never inside a surrogate pair.
+     */
+    static CanBreakInsideWord(text, index) {
+        if (index <= 0 || index >= text.length)
+            return false;
+        const hi = (k) => { const c = text.charCodeAt(k); return c >= 0xD800 && c <= 0xDBFF; };
+        if (hi(index - 1))
+            return false; // inside a surrogate pair
+        const before = String.fromCodePoint(text.codePointAt(hi(index - 2) && index >= 2 ? index - 2 : index - 1));
+        const after = String.fromCodePoint(text.codePointAt(index));
+        return SkiaLabel.CanBreakBetween(before, after);
+    }
+    /**
+     * C# FitAtBreak: the last place inside the word where a Chinese / Japanese line may break and `prefix` plus the word
+     * up to there still fits; code points from the word's start, 0 = none.
+     */
+    FitCjk(word, prefix, maxWidth) {
+        if (!word.some((r) => SkiaLabel.Cjk.test(r.Text)))
+            return 0;
+        const sp = this.glyphSpacing;
+        let x = prefix, best = 0, before = "", k = 0;
+        for (const r of word) {
+            const cps = Array.from(r.Text), widths = r.Font.getGlyphWidths(r.Font.getGlyphIDs(r.Text, cps.length));
+            for (let i = 0; i < cps.length; i++) {
+                if (k > 0 && SkiaLabel.CanBreakBetween(before, cps[i])) {
+                    if (x - sp > maxWidth)
+                        return best;
+                    best = k;
+                }
+                x += widths[i] + sp;
+                before = cps[i];
+                k++;
+            }
+        }
+        return best;
+    }
+    /** The word cut after `count` code points: the head goes on a line, the rest follows. */
+    SplitWord(word, count) {
+        const head = [], rest = [];
+        let left = count;
+        for (const r of word) {
+            const cps = Array.from(r.Text);
+            if (left >= cps.length) {
+                head.push(r);
+                left -= cps.length;
+                continue;
+            }
+            if (left > 0) {
+                const a = cps.slice(0, left).join(""), b = cps.slice(left).join("");
+                head.push({ ...r, Text: a, Width: this.Advance(r.Font, a) });
+                rest.push({ ...r, Text: b, Width: this.Advance(r.Font, b) });
+                left = 0;
+                continue;
+            }
+            rest.push(r);
+        }
+        return [head, rest];
+    }
     Transform(text) {
         switch (this.textTransform) {
             case "Uppercase": return text.toUpperCase();
@@ -210,10 +313,16 @@ export class SkiaLabel extends SkiaControl {
     Tokenize(scale) {
         const paragraphs = [[]];
         const add = (text, fonts, span) => {
-            const parts = this.Transform(text).split("\n");
+            // "\n" starts a paragraph, U+2028 breaks the line inside one
+            const pieces = this.Transform(text).split(/(\n|\u2028)/);
+            const parts = pieces.filter((_, i) => i % 2 === 0), seps = pieces.filter((_, i) => i % 2 === 1);
             for (let p = 0; p < parts.length; p++) {
-                if (p > 0)
-                    paragraphs.push([]);
+                if (p > 0) {
+                    const next = [];
+                    if (seps[p - 1] === "\u2028")
+                        next.LineBreak = true;
+                    paragraphs.push(next);
+                }
                 const para = paragraphs[paragraphs.length - 1];
                 const words = parts[p].split(" ");
                 for (let w = 0; w < words.length; w++) {
@@ -259,13 +368,21 @@ export class SkiaLabel extends SkiaControl {
                 line.Descent = r.Fonts.Descent;
         }
     }
-    /** Word-wraps tokens into lines that fit maxWidth (Infinity = no wrap), applies MaxLines with a tail ellipsis. */
-    LayoutLines(maxWidth, scale) {
+    /**
+     * Word-wraps tokens into lines that fit maxWidth (Infinity = no wrap); keeps the lines that fit maxHeight (at least one)
+     * and MaxLines, the last kept one ending with a tail ellipsis (C# / DrawnUi.Rust: a label in a box too short for its
+     * text cuts it, not only MaxLines).
+     */
+    LayoutLines(maxWidth, scale, maxHeight = Infinity) {
         const wrap = this.lineBreakMode !== "NoWrap" && isFinite(maxWidth);
+        // run widths carry the gap after every glyph; the one after a line's last glyph is not drawn
+        const sp = this.glyphSpacing;
         const out = [];
         const empty = (fonts) => { const l = this.NewLine(); l.Ascent = fonts.Ascent; l.Descent = fonts.Descent; return l; };
         for (const para of this.Tokenize(scale)) {
             let line = this.NewLine();
+            if (out.length > 0 && !para.LineBreak)
+                line.Para = true;
             let lastFonts = this.mainFonts;
             for (let i = 0; i < para.length; i++) {
                 const tok = para[i];
@@ -276,46 +393,71 @@ export class SkiaLabel extends SkiaControl {
                     i++;
                     word = word.concat(this.Segment(para[i].Text, para[i].Fonts, para[i].Span));
                 }
-                const space = tok.SpaceBefore && line.Runs.length > 0 ? this.Segment(" ", tok.Fonts, tok.Span) : [];
-                const spaceW = this.Width(space), wordW = this.Width(word);
-                if (!wrap || line.Width + spaceW + wordW <= maxWidth || (line.Runs.length === 0 && wordW <= maxWidth)) {
-                    this.Append(line, space);
-                    this.Append(line, word);
-                    continue;
-                }
-                if (line.Runs.length > 0) {
-                    out.push(line);
-                    line = this.NewLine();
-                }
-                if (wordW <= maxWidth) {
-                    this.Append(line, word);
-                    continue;
-                }
-                // word longer than the line: break by code points
-                for (const r of word) {
-                    for (const ch of Array.from(r.Text)) {
-                        const run = this.Segment(ch, r.Fonts, r.Span);
-                        const chW = this.Width(run);
-                        if (line.Runs.length > 0 && line.Width + chW > maxWidth) {
-                            out.push(line);
-                            line = this.NewLine();
+                for (;;) {
+                    const space = tok.SpaceBefore && line.Runs.length > 0 ? this.Segment(" ", tok.Fonts, tok.Span) : [];
+                    const spaceW = this.Width(space), wordW = this.Width(word);
+                    if (!wrap || line.Width + spaceW + wordW - sp <= maxWidth || (line.Runs.length === 0 && wordW - sp <= maxWidth)) {
+                        this.Append(line, space);
+                        this.Append(line, word);
+                        break;
+                    }
+                    // Chinese / Japanese: the word fills the line up to its last break that fits (C# FitAtBreak)
+                    const k = this.FitCjk(word, line.Width + spaceW, maxWidth);
+                    if (k > 0) {
+                        const [head, rest] = this.SplitWord(word, k);
+                        this.Append(line, space);
+                        this.Append(line, head);
+                        out.push(line);
+                        line = this.NewLine();
+                        word = rest;
+                        continue;
+                    }
+                    if (line.Runs.length > 0) {
+                        out.push(line);
+                        line = this.NewLine();
+                        continue;
+                    }
+                    // word longer than the line: break by code points
+                    for (const r of word) {
+                        for (const ch of Array.from(r.Text)) {
+                            const run = this.Segment(ch, r.Fonts, r.Span);
+                            const chW = this.Width(run);
+                            if (line.Runs.length > 0 && line.Width + chW - sp > maxWidth) {
+                                out.push(line);
+                                line = this.NewLine();
+                            }
+                            this.Append(line, run);
                         }
-                        this.Append(line, run);
                     }
+                    break;
                 }
             }
             out.push(line.Runs.length > 0 ? line : empty(lastFonts));
         }
-        if (this.maxLines > 0 && out.length > this.maxLines) {
-            out.length = this.maxLines;
+        let kept = this.maxLines > 0 ? Math.min(out.length, this.maxLines) : out.length;
+        if (isFinite(maxHeight)) {
+            let used = 0, fit = 0;
+            for (let i = 0; i < out.length; i++) {
+                const lh = this.LineHeightPx(out[i]);
+                // the block height of the first i + 1 lines: spacing after every line but the last, paragraph space above
+                const total = used + lh + (i > 0 ? this.ParagraphSpace(out[i]) : 0);
+                if (total > maxHeight && fit > 0)
+                    break;
+                fit++;
+                used = total - lh + lh * this.lineSpacing;
+            }
+            kept = Math.min(kept, fit);
+        }
+        if (kept < out.length) {
+            out.length = kept;
             const truncates = this.lineBreakMode === "TailTruncation" || this.lineBreakMode === "HeadTruncation" || this.lineBreakMode === "MiddleTruncation";
             if (truncates) {
-                const last = out[this.maxLines - 1];
+                const last = out[kept - 1];
                 const tailRun = last.Runs[last.Runs.length - 1];
                 const fonts = tailRun ? tailRun.Fonts : this.mainFonts;
                 const ell = this.Segment("…", fonts, tailRun?.Span);
                 const ellW = this.Width(ell);
-                while (last.Runs.length > 0 && last.Width + ellW > maxWidth) {
+                while (last.Runs.length > 0 && last.Width + ellW - sp > maxWidth) {
                     const r = last.Runs[last.Runs.length - 1];
                     const cps = Array.from(r.Text);
                     cps.pop();
@@ -327,27 +469,39 @@ export class SkiaLabel extends SkiaControl {
                         continue;
                     }
                     r.Text = cps.join("");
-                    r.Width = SkiaLabel.Advance(r.Font, r.Text);
+                    r.Width = this.Advance(r.Font, r.Text);
                     last.Width += r.Width;
                 }
                 this.Append(last, ell);
             }
         }
+        if (sp !== 0)
+            for (const l of out)
+                if (l.Runs.length > 0)
+                    l.Width -= sp;
         return out;
     }
     LineHeightPx(line) { return (line.Ascent + line.Descent) * this.lineHeight; }
+    /** ParagraphSpacing above a line that starts a paragraph (after the first): that many of its lines, with their spacing. */
+    ParagraphSpace(line) { return line.Para && this.paragraphSpacing ? this.LineHeightPx(line) * this.lineSpacing * this.paragraphSpacing : 0; }
     BlockHeight() {
         let h = 0;
         for (let i = 0; i < this.lines.length; i++) {
             const lh = this.LineHeightPx(this.lines[i]);
-            h += i < this.lines.length - 1 ? lh * this.lineSpacing : lh;
+            h += (i < this.lines.length - 1 ? lh * this.lineSpacing : lh) + this.ParagraphSpace(this.lines[i]);
         }
         return h;
     }
-    MeasureAbsolute(widthConstraint, _heightConstraint, scale) {
+    MeasureAbsolute(widthConstraint, heightConstraint, scale) {
         this.mainFonts = this.ResolveMainFonts(scale);
+        const glyphSpacing = scale * (this.characterSpacing - 1);
+        if (glyphSpacing !== this.glyphSpacing) {
+            this.glyphSpacing = glyphSpacing;
+            this.runCache.clear();
+        }
         const px = this.padding.HorizontalThickness * scale, py = this.padding.VerticalThickness * scale;
-        this.lines = this.text || this.Spans.length > 0 ? this.LayoutLines(widthConstraint - px, scale) : [];
+        const extraH = this.EffectsExtra(scale).H;
+        this.lines = this.text || this.Spans.length > 0 ? this.LayoutLines(widthConstraint - px, scale, heightConstraint - py - extraH) : [];
         let width = 0;
         for (const l of this.lines)
             width = Math.max(width, l.Width);
@@ -378,6 +532,7 @@ export class SkiaLabel extends SkiaControl {
         y += extra.Stroke / 2;
         const out = [];
         for (const line of this.lines) {
+            y += this.ParagraphSpace(line);
             const lh = this.LineHeightPx(line);
             const lineW = line.Width + extra.W;
             let x = left;
@@ -430,7 +585,7 @@ export class SkiaLabel extends SkiaControl {
                 cps.forEach((cp, k) => {
                     const w = widths[k] ?? 0;
                     out.push({ Index: index, Length: cp.length, Line: li, Left: x, Top: g.y, Width: w, Height: g.h });
-                    x += w;
+                    x += w + this.glyphSpacing;
                     index += cp.length;
                 });
             }
@@ -512,9 +667,25 @@ export class SkiaLabel extends SkiaControl {
             return paint;
         };
         const canvas = ctx.Context.Canvas;
+        const sp = this.glyphSpacing;
+        // spaced text: every glyph placed with the gap after it (C# MeasureLineGlyphs positions)
+        const drawRun = (run, rx, ry, paint) => {
+            if (sp === 0) {
+                canvas.drawText(run.Text, rx, ry, paint, run.Font);
+                return;
+            }
+            const ids = run.Font.getGlyphIDs(run.Text), widths = run.Font.getGlyphWidths(ids);
+            const positions = new Float32Array(ids.length * 2);
+            for (let k = 0, gx = 0; k < ids.length; k++) {
+                positions[k * 2] = gx;
+                gx += widths[k] + sp;
+            }
+            canvas.drawGlyphs(ids, positions, rx, ry, run.Font, paint);
+        };
         const gradient = this.FillGradient;
         const textRect = new SKRect(left, top, right, bottom);
         for (const line of this.lines) {
+            y += this.ParagraphSpace(line);
             const lh = this.LineHeightPx(line);
             const lineW = line.Width + extra.W;
             let x = left;
@@ -530,22 +701,23 @@ export class SkiaLabel extends SkiaControl {
                 this.SetupGradient(strokePaint, this.StrokeGradient, gradientRect ?? new SKRect(x, y, x + line.Width, y + lh));
             for (const run of line.Runs) {
                 const span = run.Span;
+                const drawnW = run.Width - sp; // the gap after the run's last glyph is not part of it
                 if (span) {
-                    span.Rects.push(new SKRect(x - d.Left, y - d.Top, x + run.Width - d.Left, y + lh - d.Top));
+                    span.Rects.push(new SKRect(x - d.Left, y - d.Top, x + drawnW - d.Left, y + lh - d.Top));
                     if (span.BackgroundColor)
-                        canvas.drawRect(CK.LTRBRect(x, y, x + run.Width, y + lh), paintFor(span.BackgroundColor));
+                        canvas.drawRect(CK.LTRBRect(x, y, x + drawnW, y + lh), paintFor(span.BackgroundColor));
                 }
                 const color = span?.TextColor ?? this.textColor;
                 if (run.Text) {
                     // C# DrawText order: drop shadow, stroke, fill
                     if (shadowPaint)
-                        canvas.drawText(run.Text, x + shadowDx, baseline + shadowDy, shadowPaint, run.Font);
+                        drawRun(run, x + shadowDx, baseline + shadowDy, shadowPaint);
                     if (strokePaint)
-                        canvas.drawText(run.Text, x, baseline, strokePaint, run.Font);
+                        drawRun(run, x, baseline, strokePaint);
                     const paint = paintFor(color);
                     if (gradient && gradientRect)
                         this.SetupGradient(paint, gradient, gradientRect);
-                    canvas.drawText(run.Text, x, baseline, paint, run.Font);
+                    drawRun(run, x, baseline, paint);
                 }
                 if (span?.HasDecorations) {
                     // same geometry as C# DrawSpanDecorations; CanvasKit exposes no underline/strikeout/x-height metrics,
@@ -553,11 +725,11 @@ export class SkiaLabel extends SkiaControl {
                     if (span.Underline && span.UnderlineWidth !== 0) {
                         const w = span.UnderlineWidth > 0 ? span.UnderlineWidth * scale : -span.UnderlineWidth;
                         const yl = Math.round(baseline + scale);
-                        canvas.drawLine(x, yl, x + run.Width, yl, paintFor(color, w));
+                        canvas.drawLine(x, yl, x + drawnW, yl, paintFor(color, w));
                     }
                     if (span.Strikeout) {
                         const yl = Math.round(baseline - (run.Fonts.SizePx * 0.52) / 2);
-                        canvas.drawLine(x, yl, x + run.Width, yl, paintFor(span.StrikeoutColor, span.StrikeoutWidth * scale));
+                        canvas.drawLine(x, yl, x + drawnW, yl, paintFor(span.StrikeoutColor, span.StrikeoutWidth * scale));
                     }
                 }
                 x += run.Width;

package/dist/controls/SkiaLayout.d.ts

@@ -165,6 +165,11 @@ export declare class SkiaLayout extends SkiaControl {
     private MvScheduleBackground;
     /** Binds a cell to items[index] (through the adapter, so MeasureFirst's cell 0 stays realized) and measures it. */
     private MeasureItem;
+    /**
+     * The item's offset and height are real, not estimated (C# LastMeasuredIndexLocal >= index): MeasureVisible knows
+     * them once the measured prefix passed the item; the other strategies always do.
+     */
+    IsItemMeasured(index: number): boolean;
     /** Pixel offset of item index from the top of the layout content (inside padding). */
     GetItemOffsetPixels(index: number): number;
     private ItemHeightPixels;

package/dist/controls/SkiaLayout.js

@@ -731,6 +731,11 @@ export class SkiaLayout extends SkiaControl {
             this.ChildrenFactory.ReleaseViewAt(index);
         return h;
     }
+    /**
+     * The item's offset and height are real, not estimated (C# LastMeasuredIndexLocal >= index): MeasureVisible knows
+     * them once the measured prefix passed the item; the other strategies always do.
+     */
+    IsItemMeasured(index) { return this.MeasureItemsStrategy !== "MeasureVisible" || index < this.mvMeasured; }
     /** Pixel offset of item index from the top of the layout content (inside padding). */
     GetItemOffsetPixels(index) {
         const scale = this.RenderingScale;
@@ -823,12 +828,10 @@ export class SkiaLayout extends SkiaControl {
             return;
         }
         const composing = this.IsRenderingWithComposition;
-        // inside a composite that redraws only some areas, a child entirely outside them is not even traversed
-        const culling = !composing && SkiaControl.CompositionCulling > 0;
         for (const v of this.GetOrderedSubviews()) {
-            if (composing ? !this.DirtyChildrenInternal.has(v) : culling && v.IsVisible && v.OutsideCompositionClip(ctx.Context.Canvas))
+            if (composing && !this.DirtyChildrenInternal.has(v))
                 continue;
-            v.Render(ctx);
+            v.Render(ctx); // a child entirely outside the clip skips itself
         }
     }
     GetCompositeChildren() { return this.IsTemplatedList || this.IsRecycledLayout ? [] : this.GetOrderedSubviews(); }

package/dist/controls/SkiaLottie.js

@@ -32,7 +32,9 @@ export class SkiaLottie extends AnimatedFramesRenderer {
     Animation;
     constructor() {
         super();
-        this.UseCache = "ImageDoubleBuffered";
+        // C# ImageDoubleBuffered pays off where a thread bakes the bitmap; on the web it is one offscreen pass per frame
+        // while playing, so the web engines default to Operations (drawnui-cross rule 3)
+        this.UseCache = "Operations";
     }
     get Source() { return this.source; }
     set Source(v) { if (this.source !== v) {

package/dist/controls/SkiaProgress.d.ts

@@ -36,5 +36,6 @@ export declare class SkiaProgress extends SkiaControl {
     get Ratio(): number;
     protected MeasureAbsolute(w: number, _h: number, scale: number): ScaledSize;
     protected Paint(ctx: DrawingContext): void;
-    protected DefaultAccessibilityLabel(): string | undefined;
+    /** Value between Min and Max, read as "65%"; the name is the app's AccessibilityLabel only (drawnui-cross 6c). */
+    get AccessibilityValue(): import("../core/Accessibility").AccessibilityValue;
 }

package/dist/controls/SkiaProgress.js

@@ -76,5 +76,8 @@ export class SkiaProgress extends SkiaControl {
         }
         paint.delete();
     }
-    DefaultAccessibilityLabel() { return `${Math.round(this.Ratio * 100)}%`; }
+    /** Value between Min and Max, read as "65%"; the name is the app's AccessibilityLabel only (drawnui-cross 6c). */
+    get AccessibilityValue() {
+        return { Now: this.value, Min: this.min, Max: this.max, Step: 0, Text: `${Math.round(this.Ratio * 100)}%` };
+    }
 }

package/dist/controls/SkiaScroll.d.ts

@@ -218,6 +218,18 @@ export declare class SkiaScroll extends SkiaControl {
      * templated layout (the recycled list is the scroll's only child; a header goes above the scroll or in Header).
      */
     ScrollToIndex(index: number, animate: boolean, option?: RelativePositionType): void;
+    /**
+     * An open ScrollToIndex (C# OrderedScrollToIndex, DrawnUi.Rust scroll_to_index): a row not measured yet is gone to by
+     * the sizes as they are estimated, and the order is aimed again every frame until the row has its real place and the
+     * viewport stands on it; an animated move goes on to a moved target in the time it has left, later corrections jump.
+     * A press, the wheel or another scroll drops it; while it is open LoadMore waits.
+     */
+    private indexOrder?;
+    private pursuing;
+    /** One step of the open order (C# ExecuteScrollToIndexOrder, Rust `pursue`), at the start of every paint. */
+    private PursueIndexOrder;
+    /** The offset (points) that puts item `index` where `option` says, by the sizes the list knows now; Exact = its place is measured. */
+    private AimIndex;
     private StopAnimators;
     /** DrawnUi DecelerationRatio: FrictionScrolled / 100, floored at 0.1 friction. */
     private get DecelerationRatio();