drawnui-react 0.1.0-preview.1

package/dist/controls/SkiaSvg.js

@@ -0,0 +1,181 @@
+import { SkiaControl } from "../core/SkiaControl";
+import { Super } from "../core/Super";
+import { Colors, SKRect, ScaledSize } from "../core/Types";
+import { SkiaImage } from "./SkiaImage";
+/**
+ * Mirrors DrawnUi SkiaSvg. CanvasKit's npm build has no SVG renderer, so the browser decodes the
+ * SVG (HTMLImageElement) and it is rasterized at the exact pixel size it is displayed at, re-rasterized
+ * only when that size changes — crisp at any scale, one bitmap per size. TintColor recolors via SrcIn.
+ */
+export class SkiaSvg extends SkiaControl {
+    Aspect = "AspectFitFill";
+    HorizontalAlignment = "Center";
+    VerticalAlignment = "Center";
+    /** Transparent = keep the SVG's own colors. */
+    TintColor = Colors.Transparent;
+    Success;
+    Error;
+    IsLoading = false;
+    /** Where the scaled svg was drawn last frame, canvas pixels. */
+    DisplayRect = SKRect.Empty;
+    source = "";
+    svgString = "";
+    loadGeneration = 0;
+    element;
+    constructor() {
+        super();
+        this.UseCache = "Operations"; // DrawnUi default for SkiaSvg
+    }
+    intrinsic = { Width: 0, Height: 0 };
+    raster;
+    rasterKey = "";
+    /** URL of an .svg file (relative to the page or absolute). */
+    get Source() { return this.source; }
+    set Source(value) {
+        if (this.source === value)
+            return;
+        this.source = value;
+        this.svgString = "";
+        if (!value) {
+            this.Clear();
+            return;
+        }
+        const generation = ++this.loadGeneration;
+        this.IsLoading = true;
+        fetch(value)
+            .then((r) => { if (!r.ok)
+            throw new Error(`DrawnUi: ${r.status} loading svg '${value}'`); return r.text(); })
+            .then((text) => { if (generation === this.loadGeneration)
+            return this.Decode(text, value, generation); })
+            .catch((e) => { if (generation !== this.loadGeneration)
+            return; this.IsLoading = false; this.Error?.(this, e); });
+    }
+    /** Inline SVG markup; takes precedence over Source. */
+    get SvgString() { return this.svgString; }
+    set SvgString(value) {
+        if (this.svgString === value)
+            return;
+        this.svgString = value;
+        this.source = "";
+        if (!value) {
+            this.Clear();
+            return;
+        }
+        const generation = ++this.loadGeneration;
+        void this.Decode(value, "", generation);
+    }
+    Clear() {
+        this.loadGeneration++;
+        this.element = undefined;
+        this.intrinsic = { Width: 0, Height: 0 };
+        this.DropRaster();
+        this.IsLoading = false;
+        this.Update();
+    }
+    OnDisposing() { this.loadGeneration++; this.DropRaster(); }
+    DropRaster() {
+        this.raster?.delete();
+        this.raster = undefined;
+        this.rasterKey = "";
+    }
+    async Decode(svg, sourceName, generation) {
+        this.IsLoading = true;
+        // browsers refuse to rasterize an <img> SVG whose root has no xmlns (SkiaSharp's parser does not care)
+        if (!/<svg[^>]*\sxmlns\s*=/.test(svg))
+            svg = svg.replace(/<svg(?=[\s>])/, '<svg xmlns="http://www.w3.org/2000/svg"');
+        const url = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
+        try {
+            const img = new window.Image();
+            img.src = url;
+            await img.decode();
+            if (generation !== this.loadGeneration)
+                return;
+            this.element = img;
+            this.intrinsic = SkiaSvg.IntrinsicSize(img, svg);
+            this.DropRaster();
+            this.IsLoading = false;
+            this.Update();
+            this.Success?.(this, sourceName);
+        }
+        catch (e) {
+            if (generation !== this.loadGeneration)
+                return;
+            this.IsLoading = false;
+            this.Error?.(this, e instanceof Error ? e : new Error(String(e)));
+        }
+        finally {
+            URL.revokeObjectURL(url);
+        }
+    }
+    /** Natural size: the decoded image's, else the viewBox (SVGs without width/height decode as 0x0 or 300x150). */
+    static IntrinsicSize(img, svg) {
+        const vb = /viewBox\s*=\s*"([^"]+)"/i.exec(svg);
+        if (vb) {
+            const p = vb[1].trim().split(/[\s,]+/).map(Number);
+            if (p.length === 4 && p[2] > 0 && p[3] > 0)
+                return { Width: p[2], Height: p[3] };
+        }
+        return { Width: img.naturalWidth || 1, Height: img.naturalHeight || 1 };
+    }
+    /** Bitmap of the svg at exactly w x h pixels (cached until the size changes). */
+    GetRaster(w, h) {
+        const el = this.element;
+        if (!el || w < 1 || h < 1)
+            return undefined;
+        const key = `${w}x${h}`;
+        if (this.raster && this.rasterKey === key)
+            return this.raster;
+        this.DropRaster();
+        const surface = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(w, h) : Object.assign(document.createElement("canvas"), { width: w, height: h });
+        const ctx = surface.getContext("2d");
+        if (!ctx)
+            return undefined;
+        ctx.drawImage(el, 0, 0, w, h);
+        this.raster = Super.CK.MakeImageFromCanvasImageSource(surface);
+        this.rasterKey = key;
+        return this.raster;
+    }
+    MeasureAbsolute(widthConstraint, heightConstraint, scale) {
+        let w = widthConstraint, h = heightConstraint;
+        const { Width, Height } = this.intrinsic;
+        if (Width > 0 && Height > 0) {
+            const aspect = Width / Height;
+            if (!isFinite(w) && isFinite(h))
+                w = h * aspect;
+            else if (!isFinite(h) && isFinite(w))
+                h = w / aspect;
+        }
+        if (!isFinite(w) || !isFinite(h))
+            return ScaledSize.FromPixels(0, 0, scale);
+        return ScaledSize.FromPixels(w, h, scale);
+    }
+    Paint(ctx) {
+        const { Width, Height } = this.intrinsic;
+        if (!this.element || Width <= 0 || Height <= 0)
+            return;
+        const dest = ctx.Destination;
+        const scaled = SkiaImage.RescaleAspect(Width, Height, dest, this.Aspect);
+        const display = SkiaImage.CalculateDisplayRect(dest, Width * scaled.X, Height * scaled.Y, this.HorizontalAlignment, this.VerticalAlignment);
+        this.DisplayRect = display;
+        const raster = this.GetRaster(Math.round(display.Width), Math.round(display.Height));
+        if (!raster)
+            return;
+        const CK = Super.CK;
+        const canvas = ctx.Context.Canvas;
+        const overflows = display.Left < dest.Left || display.Top < dest.Top || display.Right > dest.Right || display.Bottom > dest.Bottom;
+        const saved = canvas.save();
+        if (overflows)
+            canvas.clipRect(CK.LTRBRect(dest.Left, dest.Top, dest.Right, dest.Bottom), CK.ClipOp.Intersect, true);
+        const paint = new CK.Paint();
+        paint.setAntiAlias(true);
+        const tint = Super.ParseColor(this.TintColor);
+        if (tint[3] > 0) {
+            const filter = CK.ColorFilter.MakeBlend(tint, CK.BlendMode.SrcIn);
+            paint.setColorFilter(filter);
+            filter.delete();
+        }
+        canvas.drawImageRectOptions(raster, CK.LTRBRect(0, 0, raster.width(), raster.height()), CK.LTRBRect(display.Left, display.Top, display.Right, display.Bottom), CK.FilterMode.Linear, CK.MipmapMode.None, paint);
+        paint.delete();
+        canvas.restoreToCount(saved);
+    }
+}

package/dist/controls/SkiaSwitch.d.ts

@@ -0,0 +1,26 @@
+import { type Color } from "../core/Types";
+import { SkiaShape } from "./SkiaShape";
+import { SkiaToggle } from "./SkiaToggle";
+/**
+ * Mirrors DrawnUi SkiaSwitch: a `Frame` SkiaShape + a `Thumb` circle translated to the on/off end, with the
+ * Default / Cupertino / Material / Material3 / Windows looks and geometry of the C# style builders. Shadows omitted.
+ */
+export declare class SkiaSwitch extends SkiaToggle {
+    static AnimationSpeed: number;
+    static DefaultAccessibilityRole?: string;
+    Track: SkiaShape;
+    Thumb: SkiaShape;
+    private static readonly DefaultAccent;
+    private static readonly DefaultTrack;
+    private static readonly MaterialOutline;
+    protected StyleDefault(name: "ColorThumbOn" | "ColorFrameOn" | "ColorThumbOff" | "ColorFrameOff"): Color | undefined;
+    private SetContentSize;
+    protected CreateDefaultContent(): void;
+    /** C# GetThumbPosForOn: track width minus thumb width and margins, in points. */
+    private ThumbPosForOn;
+    ApplyProperties(): void;
+    private animating;
+    /** Moves the thumb to its resting position; animated once laid out, snapped otherwise (C# CanAnimate = LayoutReady && IsAnimated). */
+    private PositionThumb;
+    protected OnLayoutChanged(): void;
+}

package/dist/controls/SkiaSwitch.js

@@ -0,0 +1,147 @@
+import { Colors, SkiaShadow, Thickness } from "../core/Types";
+import { Easing } from "../core/Easing";
+import { SkiaShape } from "./SkiaShape";
+import { SkiaToggle } from "./SkiaToggle";
+/**
+ * Mirrors DrawnUi SkiaSwitch: a `Frame` SkiaShape + a `Thumb` circle translated to the on/off end, with the
+ * Default / Cupertino / Material / Material3 / Windows looks and geometry of the C# style builders. Shadows omitted.
+ */
+export class SkiaSwitch extends SkiaToggle {
+    static AnimationSpeed = 200;
+    static DefaultAccessibilityRole = "switch";
+    Track;
+    Thumb;
+    static DefaultAccent = "#DC143C"; // Crimson
+    static DefaultTrack = "#D7DBE0";
+    static MaterialOutline = "#79747E";
+    StyleDefault(name) {
+        const s = this.UsingControlStyle;
+        const table = {
+            Unset: { ColorFrameOn: SkiaSwitch.DefaultAccent, ColorFrameOff: SkiaSwitch.DefaultTrack },
+            Cupertino: { ColorFrameOff: "#E5E5E5", ColorFrameOn: "#30D158", ColorThumbOff: Colors.White, ColorThumbOn: Colors.White },
+            Material: { ColorFrameOff: "#9E9E9E", ColorFrameOn: "#2196F3", ColorThumbOff: Colors.White, ColorThumbOn: Colors.White },
+            Material3: { ColorFrameOff: "#E6E0E9", ColorFrameOn: "#6750A4", ColorThumbOff: SkiaSwitch.MaterialOutline, ColorThumbOn: Colors.White },
+            Windows: { ColorFrameOff: "#767676", ColorFrameOn: "#0078D7", ColorThumbOff: "#767676", ColorThumbOn: Colors.White },
+        };
+        return table[s]?.[name];
+    }
+    SetContentSize(w, h) {
+        if (this.WidthRequest < 0)
+            this.WidthRequest = w;
+        if (this.HeightRequest < 0)
+            this.HeightRequest = h;
+    }
+    CreateDefaultContent() {
+        const frame = new SkiaShape();
+        frame.Tag = "Frame";
+        frame.Type = "Rectangle";
+        frame.HorizontalOptions = "Fill";
+        frame.VerticalOptions = "Fill";
+        const thumb = new SkiaShape();
+        thumb.Tag = "Thumb";
+        thumb.Type = "Circle";
+        thumb.HorizontalOptions = "Start";
+        thumb.VerticalOptions = "Fill";
+        thumb.LockRatio = -1;
+        thumb.UseCache = "Operations";
+        switch (this.usingStyle) {
+            case "Cupertino":
+                this.SetContentSize(51, 31);
+                frame.CornerRadius = 100;
+                thumb.Margin = new Thickness(2);
+                thumb.Shadows = [new SkiaShadow({ X: 0, Y: 3, Blur: 3, Opacity: 0.1, Color: Colors.Black })];
+                break;
+            case "Material":
+                this.SetContentSize(46, 28);
+                frame.CornerRadius = 7;
+                frame.HeightRequest = 15;
+                frame.VerticalOptions = "Center";
+                thumb.Margin = Thickness.Zero;
+                thumb.Shadows = [new SkiaShadow({ X: 1, Y: 1, Blur: 3, Opacity: 0.1, Color: Colors.Black })];
+                break;
+            case "Material3":
+                this.SetContentSize(52, 32);
+                frame.CornerRadius = 16;
+                frame.StrokeWidth = 2;
+                frame.StrokeColor = SkiaSwitch.MaterialOutline;
+                thumb.Margin = new Thickness(4);
+                thumb.WidthRequest = 24;
+                thumb.LockRatio = 1;
+                thumb.VerticalOptions = "Center";
+                thumb.Shadows = [new SkiaShadow({ X: 1, Y: 1, Blur: 3, Opacity: 0.1, Color: Colors.Black })];
+                break;
+            case "Windows":
+                this.SetContentSize(48, 22);
+                frame.CornerRadius = 12;
+                frame.StrokeWidth = 2.5;
+                frame.StrokeColor = "#767676";
+                thumb.Margin = new Thickness(5.5);
+                break;
+            default:
+                this.SetContentSize(46, 28);
+                frame.CornerRadius = 20;
+                thumb.Margin = new Thickness(2);
+                break;
+        }
+        this.Track = frame;
+        this.Thumb = thumb;
+        this.AddSubView(frame);
+        this.AddSubView(thumb);
+    }
+    /** C# GetThumbPosForOn: track width minus thumb width and margins, in points. */
+    ThumbPosForOn() {
+        const scale = this.RenderingScale || 1;
+        const trackW = this.Track.DrawingRect.Width / scale + this.Track.Margin.HorizontalThickness;
+        const thumbW = (this.Thumb.DrawingRect.Width > 0 ? this.Thumb.DrawingRect.Width / scale : this.Thumb.WidthRequest > 0 ? this.Thumb.WidthRequest : this.HeightRequest - this.Thumb.Margin.VerticalThickness);
+        return trackW - thumbW - this.Thumb.Margin.HorizontalThickness;
+    }
+    ApplyProperties() {
+        if (!this.contentCreated)
+            return;
+        const on = this.IsToggled;
+        const s = this.usingStyle;
+        this.Thumb.BackgroundColor = on ? this.ColorThumbOn : this.ColorThumbOff;
+        if (on) {
+            this.Track.BackgroundColor = this.ColorFrameOn;
+            if (s === "Windows" || s === "Material3")
+                this.Track.StrokeColor = this.ColorFrameOn;
+        }
+        else if (s === "Windows") {
+            this.Track.BackgroundColor = Colors.Transparent;
+            this.Track.StrokeColor = this.ColorFrameOff;
+        }
+        else if (s === "Material3") {
+            this.Track.BackgroundColor = this.ColorFrameOff;
+            this.Track.StrokeColor = SkiaSwitch.MaterialOutline;
+        }
+        else {
+            this.Track.BackgroundColor = this.ColorFrameOff;
+        }
+        this.Track.Update();
+        this.Thumb.Update();
+        this.PositionThumb();
+    }
+    animating = false;
+    /** Moves the thumb to its resting position; animated once laid out, snapped otherwise (C# CanAnimate = LayoutReady && IsAnimated). */
+    PositionThumb() {
+        if (this.Thumb.DrawingRect.Width <= 0)
+            return; // not laid out yet: OnLayoutChanged snaps it
+        const target = this.IsToggled ? this.ThumbPosForOn() : 0;
+        if (this.IsAnimated && Math.abs(this.Thumb.TranslationX - target) > 0.5) {
+            this.animating = true;
+            void this.Thumb.TranslateToAsync(target, 0, SkiaSwitch.AnimationSpeed, Easing.CubicOut).catch(() => { }).finally(() => { this.animating = false; });
+        }
+        else {
+            this.Thumb.TranslationX = target;
+            this.Thumb.RepaintComposition();
+        }
+    }
+    OnLayoutChanged() {
+        super.OnLayoutChanged();
+        if (!this.contentCreated || this.animating)
+            return;
+        const target = this.IsToggled ? this.ThumbPosForOn() : 0;
+        if (Math.abs(this.Thumb.TranslationX - target) > 0.5)
+            this.Thumb.TranslationX = target;
+    }
+}

package/dist/controls/SkiaToggle.d.ts

@@ -0,0 +1,50 @@
+import type { SkiaControl } from "../core/SkiaControl";
+import type { GestureEventProcessingInfo, SkiaGesturesParameters } from "../core/Gestures";
+import { type PrebuiltControlStyle, type ResolvedControlStyle } from "../core/ControlStyle";
+import { type Color, type ScaledSize } from "../core/Types";
+import { SkiaLayout } from "./SkiaLayout";
+/**
+ * Mirrors DrawnUi SkiaToggle: base of SkiaSwitch / SkiaCheckbox / SkiaRadioButton. Tapped flips IsToggled,
+ * `Toggled` reports user changes, `ControlStyle` selects the look the default content is built with (once, at first
+ * measure, like C# CreateDefaultContent). Colors left unset take the style defaults (C# SetStyleDefault).
+ */
+export declare abstract class SkiaToggle extends SkiaLayout {
+    ControlStyle: PrebuiltControlStyle;
+    /** Fires on every IsToggled change; C# fires only on user/external changes, not on DefaultValue application. */
+    Toggled?: (sender: SkiaToggle, value: boolean) => void;
+    DefaultValue: boolean;
+    IsAnimated: boolean;
+    RespondsToGestures: boolean;
+    private isToggled;
+    private colorThumbOn?;
+    private colorFrameOn?;
+    private colorThumbOff?;
+    private colorFrameOff?;
+    protected contentCreated: boolean;
+    protected usingStyle: ResolvedControlStyle;
+    constructor();
+    get UsingControlStyle(): ResolvedControlStyle;
+    get IsToggled(): boolean;
+    set IsToggled(v: boolean);
+    get ColorThumbOn(): Color;
+    set ColorThumbOn(v: Color);
+    get ColorFrameOn(): Color;
+    set ColorFrameOn(v: Color);
+    get ColorThumbOff(): Color;
+    set ColorThumbOff(v: Color);
+    get ColorFrameOff(): Color;
+    set ColorFrameOff(v: Color);
+    /** Per-style color defaults (C# SetStyleDefault); undefined = the SkiaToggle default. */
+    protected StyleDefault(_name: "ColorThumbOn" | "ColorFrameOn" | "ColorThumbOff" | "ColorFrameOff"): Color | undefined;
+    protected OnToggledChanged(): void;
+    /** Builds the look once (C# CreateDefaultContent) — subclasses add their views here. */
+    protected abstract CreateDefaultContent(): void;
+    /** Pushes IsToggled + colors into the views (C# ApplyProperties). */
+    abstract ApplyProperties(): void;
+    /** Content (and the size requests the style sets) must exist before Measure reads WidthRequest/HeightRequest. */
+    Measure(widthConstraint: number, heightConstraint: number, scale: number): ScaledSize;
+    protected DefaultAccessibilityCanInteract(): boolean;
+    get AccessibilityIsPressed(): boolean | undefined;
+    set AccessibilityIsPressed(_v: boolean | undefined);
+    ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
+}

package/dist/controls/SkiaToggle.js

@@ -0,0 +1,71 @@
+import { ResolveControlStyle } from "../core/ControlStyle";
+import { Colors } from "../core/Types";
+import { SkiaLayout } from "./SkiaLayout";
+/**
+ * Mirrors DrawnUi SkiaToggle: base of SkiaSwitch / SkiaCheckbox / SkiaRadioButton. Tapped flips IsToggled,
+ * `Toggled` reports user changes, `ControlStyle` selects the look the default content is built with (once, at first
+ * measure, like C# CreateDefaultContent). Colors left unset take the style defaults (C# SetStyleDefault).
+ */
+export class SkiaToggle extends SkiaLayout {
+    ControlStyle = "Unset";
+    /** Fires on every IsToggled change; C# fires only on user/external changes, not on DefaultValue application. */
+    Toggled;
+    DefaultValue = false;
+    IsAnimated = true;
+    RespondsToGestures = true;
+    isToggled = false;
+    colorThumbOn;
+    colorFrameOn;
+    colorThumbOff;
+    colorFrameOff;
+    contentCreated = false;
+    usingStyle = "Unset";
+    constructor() {
+        super();
+        this.Type = "Absolute";
+    }
+    get UsingControlStyle() { return this.contentCreated ? this.usingStyle : ResolveControlStyle(this.ControlStyle); }
+    get IsToggled() { return this.isToggled; }
+    set IsToggled(v) {
+        if (this.isToggled === v)
+            return;
+        this.isToggled = v;
+        this.OnToggledChanged();
+    }
+    // C# defaults: thumb White / frame Red (on), thumb White / frame DarkGray (off); styles override the unset ones
+    get ColorThumbOn() { return this.colorThumbOn ?? this.StyleDefault("ColorThumbOn") ?? Colors.White; }
+    set ColorThumbOn(v) { this.colorThumbOn = v; this.ApplyProperties(); }
+    get ColorFrameOn() { return this.colorFrameOn ?? this.StyleDefault("ColorFrameOn") ?? Colors.Red; }
+    set ColorFrameOn(v) { this.colorFrameOn = v; this.ApplyProperties(); }
+    get ColorThumbOff() { return this.colorThumbOff ?? this.StyleDefault("ColorThumbOff") ?? Colors.White; }
+    set ColorThumbOff(v) { this.colorThumbOff = v; this.ApplyProperties(); }
+    get ColorFrameOff() { return this.colorFrameOff ?? this.StyleDefault("ColorFrameOff") ?? Colors.DarkGray; }
+    set ColorFrameOff(v) { this.colorFrameOff = v; this.ApplyProperties(); }
+    /** Per-style color defaults (C# SetStyleDefault); undefined = the SkiaToggle default. */
+    StyleDefault(_name) { return undefined; }
+    OnToggledChanged() {
+        this.ApplyProperties();
+        this.Toggled?.(this, this.isToggled);
+        this.NotifyAccessibility();
+    }
+    /** Content (and the size requests the style sets) must exist before Measure reads WidthRequest/HeightRequest. */
+    Measure(widthConstraint, heightConstraint, scale) {
+        if (!this.contentCreated) {
+            this.contentCreated = true;
+            this.usingStyle = ResolveControlStyle(this.ControlStyle);
+            this.CreateDefaultContent();
+            this.ApplyProperties();
+        }
+        return super.Measure(widthConstraint, heightConstraint, scale);
+    }
+    DefaultAccessibilityCanInteract() { return this.RespondsToGestures; }
+    get AccessibilityIsPressed() { return this.isToggled; }
+    set AccessibilityIsPressed(_v) { }
+    ProcessGestures(args, apply) {
+        if (args.Type === "Tapped" && this.RespondsToGestures) {
+            this.IsToggled = !this.IsToggled;
+            return this;
+        }
+        return super.ProcessGestures(args, apply);
+    }
+}

package/dist/controls/SnappingLayout.d.ts

@@ -0,0 +1,78 @@
+import { SKPoint } from "../core/Gestures";
+import { Easing } from "../core/Easing";
+import { Spring, VelocityAccumulator } from "../core/ScrollAnimators";
+import { SKRect } from "../core/Types";
+import type { DrawingContext } from "../core/SkiaControl";
+import { SkiaLayout } from "./SkiaLayout";
+/**
+ * Mirrors DrawnUi SnappingLayout: a layout whose content position snaps to `SnapPoints` (points). Base of
+ * SkiaCarousel and SkiaDrawer: nearest/next anchor selection by velocity, spring (Bounces) or linear snap
+ * animation, rubber-band clamping, `Scrolled` / `TransitionChanged` / `Stopped` callbacks.
+ */
+export declare abstract class SnappingLayout extends SkiaLayout {
+    Animated: boolean;
+    RespondsToGestures: boolean;
+    IgnoreWrongDirection: boolean;
+    Bounces: boolean;
+    RubberDamping: number;
+    AutoVelocityMultiplyPts: number;
+    RubberEffect: number;
+    /** Fraction of a snap step a drag must cover before it counts as a direction (C# SnapDistanceRatio). */
+    SnapDistanceRatio: number;
+    SnapPoints: SKPoint[];
+    /** Current content offset, points (C# CurrentPosition). */
+    CurrentPosition: SKPoint;
+    /** Anchor the content rests on or travels to (C# CurrentSnap). */
+    CurrentSnap: SKPoint;
+    ContentOffsetBounds: SKRect;
+    IsUserPanning: boolean;
+    IsUserFocused: boolean;
+    Scrolled?: (sender: SnappingLayout, position: SKPoint) => void;
+    TransitionChanged?: (sender: SnappingLayout, inTransition: boolean) => void;
+    Stopped?: (sender: SnappingLayout, position: SKPoint) => void;
+    private inTransition;
+    get InTransition(): boolean;
+    protected set InTransition(v: boolean);
+    protected OnTransitionChanged(): void;
+    protected readonly velocityAccumulator: VelocityAccumulator;
+    private readonly springX;
+    private readonly springY;
+    private readonly range;
+    private rangeFrom;
+    private rangeTo;
+    /** Easing of the linear (non-bouncing) snap. */
+    protected SnapEasing: Easing;
+    constructor();
+    private stoppingSilently;
+    private OnAnimationStopped;
+    protected OnDisposing(): void;
+    protected get IsSnapAnimating(): boolean;
+    protected StopSnapAnimators(): void;
+    /** C# SnappingLayout.Render: the transition state follows the position every frame. */
+    Render(ctx: DrawingContext): void;
+    ClampOffset(x: number, y: number, rubber: boolean): SKPoint;
+    /** C# GetContentOffsetBounds: the extent covered by the snap points. */
+    protected BoundsFromSnapPoints(): SKRect;
+    protected static Dist(a: SKPoint, b: SKPoint): number;
+    FindNearestAnchor(current: SKPoint): SKPoint;
+    /** Anchor used as the origin of a snap decision (C# FindNearestAnchorInternal; a looped carousel maps virtual anchors here). */
+    protected FindNearestAnchorInternal(current: SKPoint, _velocity: SKPoint): SKPoint;
+    /** The closest anchor lying in the direction of the velocity (dot product), else the origin. */
+    SelectNextAnchor(origin: SKPoint, velocity: SKPoint): SKPoint;
+    ScrollToNearestAnchor(location: SKPoint, velocity: SKPoint): void;
+    get CanAnimate(): boolean;
+    protected GetAutoVelocity(displacement: SKPoint): SKPoint;
+    protected ScaleSnapVelocity(velocity: SKPoint): SKPoint;
+    protected CreateSnapSpring(): Spring;
+    protected SpringVelocity(velocity: SKPoint): SKPoint;
+    /** Seconds of the linear snap (C# SnappingLayout: 0.3 s scaled by distance, or 0.1–0.8 s from the velocity). */
+    protected GetSnapDurationSeconds(_start: SKPoint, _end: SKPoint, velocity: SKPoint, displacement: SKPoint): number;
+    /** C# ScrollToOffset: spring when Bounces, else a linear animation with the duration from GetSnapDurationSeconds. */
+    protected ScrollToOffset(target: SKPoint, velocity: SKPoint, animate: boolean): boolean;
+    /** Subclasses move their content here; base records the position and reports (C# ApplyPosition). */
+    ApplyPosition(position: SKPoint): void;
+    /** C# SkiaCarousel.CheckTransitionEnded: never "ended" while a snap animator still runs (the position may touch the target early). */
+    CheckTransitionEnded(): boolean;
+    /** Subclasses translate CurrentSnap into their own state (SelectedIndex, IsOpen). */
+    UpdateReportedPosition(): void;
+}