drawnui-react 0.1.0-preview.1

package/dist/controls/SkiaScrollBar.d.ts

@@ -0,0 +1,56 @@
+import type { Color, ScrollOrientation } from "../core/Types";
+import { SkiaLayout } from "./SkiaLayout";
+import { SkiaShape } from "./SkiaShape";
+/** C# ScrollBarVisibility flags: which axis a SkiaScroll shows a bar for (matched against its Orientation). */
+export type ScrollBarVisibility = "None" | "Vertical" | "Horizontal" | "Both";
+/** C# ScrollBarDock: edge the bar docks to, perpendicular to the scrolling axis. */
+export type ScrollBarDock = "End" | "Start";
+/**
+ * C# IScrollBar: a scroll bar indicator overlay for SkiaScroll; the scroll pushes its state here whenever the offset,
+ * content size or scrolling state change.
+ */
+export interface IScrollBar {
+    SetScrollProgress(orientation: ScrollOrientation, progress: number, thumbSizeRatio: number, overscrollPts: number, isScrolling: boolean): void;
+}
+/**
+ * Mirrors DrawnUi SkiaScrollBar: thin rounded thumb over an optional track, docked at the right edge for vertical
+ * scrolling or at the bottom edge for horizontal (`Dock`), auto-hides `HideDelaySecs` after scrolling stops
+ * (`AutoHide`), squashes on overscroll. Set through `SkiaScroll.ScrollBar` / `ScrollBarHorizontal`, or created by
+ * `ScrollBarsVisibility`.
+ */
+export declare class SkiaScrollBar extends SkiaLayout implements IScrollBar {
+    private dock;
+    get Dock(): ScrollBarDock;
+    set Dock(v: ScrollBarDock);
+    private thumbColor;
+    get ThumbColor(): Color;
+    set ThumbColor(v: Color);
+    private trackColor;
+    get TrackColor(): Color;
+    set TrackColor(v: Color);
+    private thickness;
+    /** Thickness of the bar in points. */
+    get Thickness(): number;
+    set Thickness(v: number);
+    private edgeMargin;
+    /** Distance in points from the docked edge. */
+    get EdgeMargin(): number;
+    set EdgeMargin(v: number);
+    /** Minimum thumb length in points. */
+    MinThumbSize: number;
+    /** Fade out after scrolling stops. */
+    AutoHide: boolean;
+    HideDelaySecs: number;
+    protected readonly thumb: SkiaShape;
+    protected readonly track: SkiaShape;
+    private hideTimer;
+    private hideAbort?;
+    private lastThumbLen;
+    private orientation;
+    constructor();
+    /** Docks track and thumb to the edge matching the current orientation (C# ApplyOrientation). */
+    protected ApplyOrientation(): void;
+    SetScrollProgress(orientation: ScrollOrientation, progress: number, thumbSizeRatio: number, overscrollPts: number, isScrolling: boolean): void;
+    private CancelHide;
+    protected OnDisposing(): void;
+}

package/dist/controls/SkiaScrollBar.js

@@ -0,0 +1,158 @@
+import { Colors, Thickness } from "../core/Types";
+import { SkiaLayout } from "./SkiaLayout";
+import { SkiaShape } from "./SkiaShape";
+/**
+ * Mirrors DrawnUi SkiaScrollBar: thin rounded thumb over an optional track, docked at the right edge for vertical
+ * scrolling or at the bottom edge for horizontal (`Dock`), auto-hides `HideDelaySecs` after scrolling stops
+ * (`AutoHide`), squashes on overscroll. Set through `SkiaScroll.ScrollBar` / `ScrollBarHorizontal`, or created by
+ * `ScrollBarsVisibility`.
+ */
+export class SkiaScrollBar extends SkiaLayout {
+    dock = "End";
+    get Dock() { return this.dock; }
+    set Dock(v) { if (this.dock !== v) {
+        this.dock = v;
+        this.ApplyOrientation();
+    } }
+    thumbColor = "#66888888";
+    get ThumbColor() { return this.thumbColor; }
+    set ThumbColor(v) { if (this.thumbColor !== v) {
+        this.thumbColor = v;
+        this.thumb.BackgroundColor = v;
+        this.thumb.InvalidateCache();
+        this.RepaintComposition();
+    } }
+    trackColor = Colors.Transparent;
+    get TrackColor() { return this.trackColor; }
+    set TrackColor(v) { if (this.trackColor !== v) {
+        this.trackColor = v;
+        this.track.BackgroundColor = v;
+        this.track.InvalidateCache();
+        this.RepaintComposition();
+    } }
+    thickness = 4;
+    /** Thickness of the bar in points. */
+    get Thickness() { return this.thickness; }
+    set Thickness(v) { if (this.thickness !== v) {
+        this.thickness = v;
+        this.ApplyOrientation();
+    } }
+    edgeMargin = 2;
+    /** Distance in points from the docked edge. */
+    get EdgeMargin() { return this.edgeMargin; }
+    set EdgeMargin(v) { if (this.edgeMargin !== v) {
+        this.edgeMargin = v;
+        this.ApplyOrientation();
+    } }
+    /** Minimum thumb length in points. */
+    MinThumbSize = 32;
+    /** Fade out after scrolling stops. */
+    AutoHide = true;
+    HideDelaySecs = 1;
+    thumb = new SkiaShape();
+    track = new SkiaShape();
+    hideTimer = 0;
+    hideAbort;
+    lastThumbLen = -1;
+    orientation = "Vertical";
+    constructor() {
+        super();
+        this.Type = "Absolute";
+        this.UseCache = "Operations";
+        this.HorizontalOptions = "Fill";
+        this.VerticalOptions = "Fill";
+        this.InputTransparent = true; // display only, gestures pass through
+        this.Opacity = 0; // hidden until the first scroll
+        this.track.Type = "Rectangle";
+        this.track.BackgroundColor = this.trackColor;
+        this.track.UseCache = "Operations";
+        this.thumb.Type = "Rectangle";
+        this.thumb.BackgroundColor = this.thumbColor;
+        this.thumb.UseCache = "Operations";
+        this.AddSubView(this.track);
+        this.AddSubView(this.thumb);
+        this.ApplyOrientation();
+    }
+    /** Docks track and thumb to the edge matching the current orientation (C# ApplyOrientation). */
+    ApplyOrientation() {
+        const radius = this.thickness / 2, dockStart = this.dock === "Start";
+        const dockOptions = dockStart ? "Start" : "End";
+        if (this.orientation === "Horizontal") {
+            const margin = dockStart ? new Thickness(0, this.edgeMargin, 0, 0) : new Thickness(0, 0, 0, this.edgeMargin);
+            this.track.HorizontalOptions = "Fill";
+            this.track.VerticalOptions = dockOptions;
+            this.track.HeightRequest = this.thickness;
+            this.track.WidthRequest = -1;
+            this.track.Margin = margin;
+            this.track.CornerRadius = radius;
+            this.thumb.HorizontalOptions = "Start";
+            this.thumb.VerticalOptions = dockOptions;
+            this.thumb.HeightRequest = this.thickness;
+            this.thumb.Margin = margin;
+            this.thumb.CornerRadius = radius;
+        }
+        else {
+            const margin = dockStart ? new Thickness(this.edgeMargin, 0, 0, 0) : new Thickness(0, 0, this.edgeMargin, 0);
+            this.track.HorizontalOptions = dockOptions;
+            this.track.VerticalOptions = "Fill";
+            this.track.WidthRequest = this.thickness;
+            this.track.HeightRequest = -1;
+            this.track.Margin = margin;
+            this.track.CornerRadius = radius;
+            this.thumb.HorizontalOptions = dockOptions;
+            this.thumb.VerticalOptions = "Start";
+            this.thumb.WidthRequest = this.thickness;
+            this.thumb.Margin = margin;
+            this.thumb.CornerRadius = radius;
+        }
+        this.lastThumbLen = -1;
+        this.InvalidateMeasure();
+    }
+    SetScrollProgress(orientation, progress, thumbSizeRatio, overscrollPts, isScrolling) {
+        if (orientation !== this.orientation) {
+            this.orientation = orientation;
+            this.ApplyOrientation();
+        }
+        if (thumbSizeRatio >= 1) {
+            this.CancelHide();
+            this.Opacity = 0;
+            this.RepaintComposition();
+            return;
+        } // content fits: nothing to indicate
+        const track = orientation === "Horizontal" ? this.MeasuredSize.Units.Width : this.MeasuredSize.Units.Height;
+        if (track <= 0)
+            return;
+        let thumbLen = Math.max(this.MinThumbSize, track * thumbSizeRatio);
+        if (overscrollPts !== 0)
+            thumbLen = Math.max(this.MinThumbSize / 2, thumbLen - Math.abs(overscrollPts)); // squash on bounce
+        const travel = track - thumbLen;
+        const offset = Math.max(0, Math.min(1, progress)) * travel;
+        if (Math.abs(thumbLen - this.lastThumbLen) > 0.5) {
+            this.lastThumbLen = thumbLen;
+            if (orientation === "Horizontal")
+                this.thumb.WidthRequest = thumbLen;
+            else
+                this.thumb.HeightRequest = thumbLen;
+            this.thumb.InvalidateMeasure();
+        }
+        if (orientation === "Horizontal")
+            this.thumb.TranslationX = offset;
+        else
+            this.thumb.TranslationY = offset;
+        this.CancelHide();
+        this.Opacity = 1;
+        if (this.AutoHide && !isScrolling) {
+            this.hideTimer = window.setTimeout(() => { this.hideTimer = 0; this.hideAbort = new AbortController(); void this.FadeToAsync(0, 250, undefined, this.hideAbort.signal); }, this.HideDelaySecs * 1000);
+        }
+        this.RepaintComposition();
+    }
+    CancelHide() {
+        if (this.hideTimer) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = 0;
+        }
+        this.hideAbort?.abort();
+        this.hideAbort = undefined;
+    }
+    OnDisposing() { this.CancelHide(); super.OnDisposing(); }
+}

package/dist/controls/SkiaShaderCarousel.d.ts

@@ -0,0 +1,67 @@
+import type { DrawingContext } from "../core/SkiaControl";
+import { type GestureEventProcessingInfo, SKPoint, type SkiaGesturesParameters } from "../core/Gestures";
+import { ShaderTransitionEffect } from "../core/SkiaEffect";
+import type { ScaledSize } from "../core/Types";
+import type { SkiaControl } from "../core/SkiaControl";
+import { SkiaCarousel } from "./SkiaCarousel";
+/**
+ * Mirrors DrawnUi SkiaShaderCarousel: slides never move, an attached `ShaderTransitionEffect` blends the cached
+ * images of the outgoing and incoming slides (`TransitionShader` url of a gl-transitions style `transition(vec2 uv)`
+ * SkSL, or `TransitionShaderCode`, optionally a custom `TransitionTemplate`). Slides MUST be cached with
+ * `UseCache="Image"` (the effect samples their caches). One gesture moves at most one slide; a swipe during a running
+ * transition wraps it up within `InterruptedTransitionMs` first. The carousel itself is cached as Image so the
+ * overlapping slides are never shown directly.
+ */
+export declare class SkiaShaderCarousel extends SkiaCarousel {
+    /** Url of the transition .sksl (fetched, wrapped by the adapter template). Can change at any time. */
+    get TransitionShader(): string;
+    set TransitionShader(v: string);
+    /** Raw SkSL alternative to TransitionShader. */
+    get TransitionShaderCode(): string;
+    set TransitionShaderCode(v: string);
+    /** Url of a custom template replacing the embedded gl-transitions adapter. */
+    get TransitionTemplate(): string;
+    set TransitionTemplate(v: string);
+    /** Wrap-up time of a transition interrupted by a new swipe, ms (0 = instant). */
+    InterruptedTransitionMs: number;
+    /** The effect rendering the transition (extra uniforms, OnCompilationError). Created by CreateTransitionEffect. */
+    readonly TransitionEffect: ShaderTransitionEffect;
+    /** Index the current transition starts from, -1 before the first layout. */
+    get TransitionFromIndex(): number;
+    /** Index the current transition goes to (0 after the last slide when looped). */
+    get TransitionToIndex(): number;
+    FromToChanged?: (sender: SkiaShaderCarousel) => void;
+    private retrySetup;
+    private lastProgress;
+    private initialized;
+    private indexFrom;
+    private indexTo;
+    private indexFromLast;
+    private indexToLast;
+    private wasWrapped;
+    private wasInTransitionAtDown;
+    private inGestureRelease;
+    private gestureOrigin;
+    private gestureFrom;
+    private pendingTarget?;
+    constructor();
+    /** Factory for the transition effect; override for a subclass with extra uniforms. */
+    protected CreateTransitionEffect(): ShaderTransitionEffect;
+    protected OnFromToChanged(): void;
+    Render(ctx: DrawingContext): void;
+    /** Points the effect at the from/to views; false when a view does not exist yet (retried after the next render). */
+    protected SetupFromTo(): boolean;
+    protected MeasureAbsolute(w: number, h: number, scale: number): ScaledSize;
+    protected OnChildrenInitialized(): void;
+    protected OnScrollProgressChanged(): void;
+    /** Slides never move: the transition effect renders the change (C# AnimateVisibleChild no-op). */
+    protected SlideOffset(_offset: SKPoint): SKPoint;
+    ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
+    /**
+     * Gesture targeting (C#): one gesture moves at most one slide from the slide it started on; a flick moves one slide
+     * in its direction, a slow drag snaps within one step of the origin; a swipe that interrupted a running transition
+     * first wraps that transition up within InterruptedTransitionMs, then the new one plays.
+     */
+    protected ScrollToOffset(targetOffset: SKPoint, velocity: SKPoint, animate: boolean): boolean;
+    protected OnTransitionChanged(): void;
+}

package/dist/controls/SkiaShaderCarousel.js

@@ -0,0 +1,246 @@
+import { SKPoint } from "../core/Gestures";
+import { ShaderTransitionEffect } from "../core/SkiaEffect";
+import { SkiaCarousel } from "./SkiaCarousel";
+/**
+ * Mirrors DrawnUi SkiaShaderCarousel: slides never move, an attached `ShaderTransitionEffect` blends the cached
+ * images of the outgoing and incoming slides (`TransitionShader` url of a gl-transitions style `transition(vec2 uv)`
+ * SkSL, or `TransitionShaderCode`, optionally a custom `TransitionTemplate`). Slides MUST be cached with
+ * `UseCache="Image"` (the effect samples their caches). One gesture moves at most one slide; a swipe during a running
+ * transition wraps it up within `InterruptedTransitionMs` first. The carousel itself is cached as Image so the
+ * overlapping slides are never shown directly.
+ */
+export class SkiaShaderCarousel extends SkiaCarousel {
+    /** Url of the transition .sksl (fetched, wrapped by the adapter template). Can change at any time. */
+    get TransitionShader() { return this.TransitionEffect.ShaderSource; }
+    set TransitionShader(v) { this.TransitionEffect.ShaderSource = v ?? ""; }
+    /** Raw SkSL alternative to TransitionShader. */
+    get TransitionShaderCode() { return this.TransitionEffect.ShaderCode; }
+    set TransitionShaderCode(v) { this.TransitionEffect.ShaderCode = v ?? ""; }
+    /** Url of a custom template replacing the embedded gl-transitions adapter. */
+    get TransitionTemplate() { return this.TransitionEffect.ShaderTemplate; }
+    set TransitionTemplate(v) { this.TransitionEffect.ShaderTemplate = v ?? ""; }
+    /** Wrap-up time of a transition interrupted by a new swipe, ms (0 = instant). */
+    InterruptedTransitionMs = 50;
+    /** The effect rendering the transition (extra uniforms, OnCompilationError). Created by CreateTransitionEffect. */
+    TransitionEffect;
+    /** Index the current transition starts from, -1 before the first layout. */
+    get TransitionFromIndex() { return this.indexFrom; }
+    /** Index the current transition goes to (0 after the last slide when looped). */
+    get TransitionToIndex() { return this.indexTo; }
+    FromToChanged;
+    retrySetup = false;
+    lastProgress = 0;
+    initialized = false;
+    indexFrom = -1;
+    indexTo = -1;
+    indexFromLast = -1;
+    indexToLast = -1;
+    wasWrapped = false;
+    // gesture targeting
+    wasInTransitionAtDown = false;
+    inGestureRelease = false;
+    gestureOrigin = SKPoint.Empty;
+    gestureFrom = SKPoint.Empty;
+    pendingTarget;
+    constructor() {
+        super();
+        this.RecyclingTemplate = "Disabled"; // the effect samples specific cells: every index keeps its own view
+        this.UseCache = "Image";
+        this.TransitionEffect = this.CreateTransitionEffect();
+        this.VisualEffects = [this.TransitionEffect];
+    }
+    /** Factory for the transition effect; override for a subclass with extra uniforms. */
+    CreateTransitionEffect() { return new ShaderTransitionEffect(); }
+    OnFromToChanged() { this.FromToChanged?.(this); }
+    Render(ctx) {
+        super.Render(ctx);
+        if (this.retrySetup && !this.initialized && this.indexFrom >= 0 && this.indexTo >= 0 && this.indexTo <= this.MaxIndex) {
+            this.initialized = this.SetupFromTo();
+            if (this.initialized) {
+                this.TransitionEffect.Progress = this.lastProgress;
+                this.TransitionEffect.Update();
+            }
+        }
+    }
+    /** Points the effect at the from/to views; false when a view does not exist yet (retried after the next render). */
+    SetupFromTo() {
+        this.indexToLast = this.indexTo;
+        this.indexFromLast = this.indexFrom;
+        const viewFrom = this.GetExistingView(this.indexFrom);
+        const viewTo = this.GetExistingView(this.indexTo);
+        if (!viewFrom || !viewTo) {
+            this.retrySetup = true;
+            this.Repaint();
+            return false;
+        }
+        this.retrySetup = false;
+        this.TransitionEffect.ControlFrom = viewFrom;
+        this.TransitionEffect.ControlTo = viewTo;
+        return true;
+    }
+    MeasureAbsolute(w, h, scale) {
+        this.initialized = false;
+        return super.MeasureAbsolute(w, h, scale);
+    }
+    OnChildrenInitialized() {
+        this.indexFrom = -1;
+        this.indexTo = -1;
+        this.indexFromLast = -1;
+        this.indexToLast = -1;
+        this.initialized = false;
+        super.OnChildrenInitialized();
+    }
+    OnScrollProgressChanged() {
+        if (this.IsLooped && this.MaxIndex > 0) {
+            const slides = this.MaxIndex + 1;
+            let scaled = this.ScrollProgress * this.MaxIndex;
+            if (scaled < 0 || scaled > this.MaxIndex) {
+                // beyond the real strip: a true wrap only when panning, snapping to a virtual anchor, or continuing a wrap
+                // already shown; otherwise it is spring overshoot at an edge — clamp instead of flashing the far slide
+                let wrap = this.IsUserPanning || this.wasWrapped;
+                if (!wrap) {
+                    const anchor = this.GetVirtualAnchor(this.CurrentSnap);
+                    wrap = scaled < 0 ? anchor.Id === -1 : anchor.Id === -2;
+                }
+                this.wasWrapped = wrap;
+                scaled = wrap ? ((scaled % slides) + slides) % slides : Math.max(0, Math.min(this.MaxIndex, scaled));
+            }
+            else
+                this.wasWrapped = false;
+            const currentIndex = Math.floor(scaled);
+            const progress = scaled - currentIndex;
+            if (this.indexFrom !== currentIndex || !this.initialized) {
+                this.indexFrom = currentIndex;
+                this.indexTo = (currentIndex + 1) % slides;
+                if (!this.initialized || this.indexToLast !== this.indexTo || this.indexFromLast !== this.indexFrom)
+                    this.initialized = this.SetupFromTo();
+                this.OnFromToChanged();
+            }
+            this.lastProgress = progress;
+            this.TransitionEffect.Progress = progress;
+            this.TransitionEffect.Update();
+            return;
+        }
+        const sp = this.ScrollProgress;
+        if (!this.initialized || (sp >= 0 && sp <= 1)) { // ignore bouncing
+            let currentIndex = 0;
+            if (sp > 0)
+                currentIndex = Math.floor(this.MaxIndex * sp);
+            let progress = this.TransitionProgress;
+            if (this.indexFrom !== currentIndex || !this.initialized) {
+                if (currentIndex < this.MaxIndex) {
+                    this.indexTo = currentIndex + 1;
+                    this.indexFrom = currentIndex;
+                    if (!this.initialized || this.indexToLast !== this.indexTo || this.indexFromLast !== this.indexFrom)
+                        this.initialized = this.SetupFromTo();
+                }
+                else
+                    progress = 1;
+                this.OnFromToChanged();
+            }
+            this.lastProgress = progress;
+            this.TransitionEffect.Progress = progress;
+            this.TransitionEffect.Update();
+        }
+    }
+    /** Slides never move: the transition effect renders the change (C# AnimateVisibleChild no-op). */
+    SlideOffset(_offset) { return SKPoint.Empty; }
+    ProcessGestures(args, apply) {
+        if (args.Type === "Down") {
+            const interrupted = this.InTransition;
+            const result = super.ProcessGestures(args, apply);
+            // read after base: Down may have normalized a looped virtual position; while phase 1 is still wrapping up,
+            // the real origin is the pending phase-2 slide
+            this.wasInTransitionAtDown = interrupted;
+            this.gestureOrigin = this.pendingTarget ?? this.CurrentSnap;
+            this.gestureFrom = this.CurrentPosition;
+            this.pendingTarget = undefined;
+            return result;
+        }
+        if (args.Type === "Up") {
+            this.inGestureRelease = true;
+            try {
+                return super.ProcessGestures(args, apply);
+            }
+            finally {
+                this.inGestureRelease = false;
+            }
+        }
+        return super.ProcessGestures(args, apply);
+    }
+    /**
+     * Gesture targeting (C#): one gesture moves at most one slide from the slide it started on; a flick moves one slide
+     * in its direction, a slow drag snaps within one step of the origin; a swipe that interrupted a running transition
+     * first wraps that transition up within InterruptedTransitionMs, then the new one plays.
+     */
+    ScrollToOffset(targetOffset, velocity, animate) {
+        if (!this.inGestureRelease || !animate || this.SnapPoints.length < 2)
+            return super.ScrollToOffset(targetOffset, velocity, animate);
+        const axis = (p) => (this.IsVertical ? p.Y : p.X);
+        const step = new SKPoint(this.SnapPoints[1].X - this.SnapPoints[0].X, this.SnapPoints[1].Y - this.SnapPoints[0].Y);
+        const stepAxis = axis(step);
+        if (stepAxis !== 0) {
+            const vel = axis(velocity);
+            const disp = axis(this.CurrentPosition) - axis(this.gestureFrom);
+            let k;
+            if (Math.abs(vel) >= 100)
+                k = Math.sign(vel) * Math.sign(stepAxis);
+            else
+                k = Math.max(-1, Math.min(1, Math.round(disp / stepAxis)));
+            let capped = new SKPoint(this.gestureOrigin.X + step.X * k, this.gestureOrigin.Y + step.Y * k);
+            if (!this.IsLooped) {
+                const first = this.SnapPoints[0], last = this.SnapPoints[this.SnapPoints.length - 1];
+                const lo = new SKPoint(Math.min(first.X, last.X), Math.min(first.Y, last.Y)), hi = new SKPoint(Math.max(first.X, last.X), Math.max(first.Y, last.Y));
+                capped = new SKPoint(Math.max(lo.X, Math.min(hi.X, capped.X)), Math.max(lo.Y, Math.min(hi.Y, capped.Y)));
+            }
+            targetOffset = capped; // looped: may be the virtual slot past the edge, the base wraps it
+        }
+        if (!this.wasInTransitionAtDown)
+            return super.ScrollToOffset(targetOffset, velocity, animate);
+        this.wasInTransitionAtDown = false;
+        // the pan may already have carried the position PAST the interrupted transition's destination toward the new
+        // target: wrapping it up would animate backward first. Only run phase 1 while that destination is still ahead.
+        const toOrigin = axis(this.gestureOrigin) - axis(this.CurrentPosition);
+        const toTarget = axis(targetOffset) - axis(this.CurrentPosition);
+        const same = targetOffset.X === this.gestureOrigin.X && targetOffset.Y === this.gestureOrigin.Y;
+        if (!same && (toOrigin === 0 || Math.sign(toOrigin) !== Math.sign(toTarget)))
+            return super.ScrollToOffset(targetOffset, velocity, animate);
+        this.pendingTarget = same ? undefined : targetOffset;
+        if (this.InterruptedTransitionMs <= 0) {
+            super.ScrollToOffset(this.gestureOrigin, SKPoint.Empty, false);
+            const instant = this.pendingTarget;
+            if (instant) {
+                this.pendingTarget = undefined;
+                return super.ScrollToOffset(instant, velocity, true);
+            }
+            return true;
+        }
+        // phase 1: finish the interrupted transition fast; LinearSpeedMs (ms per slide) scaled to the remaining distance
+        const cell = this.IsVertical ? this.CellSize.H : this.CellSize.W;
+        const remaining = Math.abs(toOrigin);
+        const keep = this.LinearSpeedMs;
+        this.LinearSpeedMs = remaining > 0 && cell > 0 ? (this.InterruptedTransitionMs * cell) / remaining : keep;
+        let started;
+        try {
+            started = super.ScrollToOffset(this.gestureOrigin, SKPoint.Empty, true);
+        }
+        finally {
+            this.LinearSpeedMs = keep;
+        }
+        const next = this.pendingTarget;
+        if (!started && next) {
+            this.pendingTarget = undefined;
+            return super.ScrollToOffset(next, velocity, true);
+        }
+        return started;
+    }
+    OnTransitionChanged() {
+        super.OnTransitionChanged();
+        // phase 2: the interrupted transition is wrapped up, now go where the swipe pointed
+        const next = this.pendingTarget;
+        if (!this.InTransition && next) {
+            this.pendingTarget = undefined;
+            this.ScrollToOffset(next, SKPoint.Empty, true);
+        }
+    }
+}

package/dist/controls/SkiaShape.d.ts

@@ -0,0 +1,63 @@
+import type { Path } from "canvaskit-wasm";
+import { type DrawingContext } from "../core/SkiaControl";
+import { type BevelType, type Color, CornerRadius, SKRect, type ShapeType, SkiaBevel, type SkiaGradient, SkiaShadow, type SkiaPoint, type StrokeCap, Thickness } from "../core/Types";
+import { SkiaLayout } from "./SkiaLayout";
+/**
+ * Mirrors DrawnUi SkiaShape: a SkiaLayout (Absolute) that paints a geometric background, strokes its outline
+ * INSIDE its bounds (the rect is deflated by half the stroke, so the outer stroke edge sits on DrawingRect),
+ * and clips its children to the stroke-inset shape. Cached as Operations by default, like DrawnUi.
+ */
+export declare class SkiaShape extends SkiaLayout {
+    /** Rectangle | Circle | Ellipse | Arc | Path | Polygon | Line (Squricle/Custom draw as Rectangle). Layout is always Absolute. */
+    Type: ShapeType;
+    private cornerRadius;
+    /** Uniform number or per-corner CornerRadius, points. */
+    get CornerRadius(): CornerRadius | number;
+    set CornerRadius(v: CornerRadius | number);
+    /** Points; a negative value means device pixels. 0 = no stroke. */
+    StrokeWidth: number;
+    StrokeColor: Color;
+    StrokeCap: StrokeCap;
+    /** Gradient painted along the stroke instead of StrokeColor (C# StrokeGradient). */
+    StrokeGradient?: SkiaGradient;
+    /** Raised (Bevel) or pressed-in (Emboss) edges, drawn with Bevel after the background (C# BevelType). */
+    BevelType: BevelType;
+    private bevel?;
+    /** Edge depth / colors / opacity; plain `{ Depth, LightColor, ShadowColor, Opacity }` literals accepted. */
+    get Bevel(): SkiaBevel | Partial<SkiaBevel> | undefined;
+    set Bevel(v: SkiaBevel | Partial<SkiaBevel> | undefined);
+    /** Hollow shape: the background is not filled, only the stroke (and children) are drawn. */
+    ClipBackgroundColor: boolean;
+    /** Polygon / Line vertices as ratios (0..1) of the shape rect. */
+    Points: SkiaPoint[];
+    /** SVG path data for Type=Path, fitted and centered inside the rect. */
+    PathData?: string;
+    private shadows;
+    /** Drop shadows painted with the background (DrawnUi SkiaShape.Shadows); plain `{X, Y, Blur, Opacity, Color}` literals accepted. */
+    get Shadows(): (SkiaShadow | Partial<SkiaShadow>)[];
+    set Shadows(v: (SkiaShadow | Partial<SkiaShadow>)[] | undefined);
+    protected PaintsBackgroundWithoutColor(): boolean;
+    /** C# MergeShadowMargin: spread = 3 * Blur * scale around the offset shadow. */
+    ComputeEffectsMargin(scale: number): Thickness;
+    /** C# CreateShadow: DropShadow (shape + shadow) or DropShadowOnly; a fully opaque Color takes the shadow's Opacity. */
+    static ShadowFilter(shadow: SkiaShadow, scale: number): import("canvaskit-wasm").ImageFilter;
+    constructor();
+    private StrokePixels;
+    /** Rect the outline is drawn on: bounds deflated by half the stroke so the stroke stays inside. */
+    private StrokeAwareRect;
+    private UsesStroke;
+    /** Builds the outline path for rect (canvas pixels). Caller deletes it. */
+    protected CreateShapePath(rect: SKRect, scale: number): Path;
+    /** Children live inside the stroke (full width) + Padding. */
+    private ChildrenRect;
+    /** Clip for overlay effects (ripple) and children: the shape itself, inset by the stroke. */
+    CreateClip(): Path;
+    protected OnLayoutChanged(): void;
+    protected PaintBackground(ctx: DrawingContext): void;
+    /** C# PaintBevelEffect: two stroked edge paths (top/left and bottom/right) in the light / shadow colors. */
+    private PaintBevelEffect;
+    protected Paint(ctx: DrawingContext): void;
+}
+/** DrawnUi SkiaFrame = SkiaShape Type=Rectangle (alias, not a layout type). */
+export declare class SkiaFrame extends SkiaShape {
+}