drawnui-react 0.1.0-preview.1

package/dist/controls/SkiaShape.js

@@ -0,0 +1,317 @@
+import { Super } from "../core/Super";
+import { Colors, CornerRadius, SKRect, SkiaBevel, SkiaShadow, 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 class SkiaShape extends SkiaLayout {
+    cornerRadius = CornerRadius.Zero;
+    /** Uniform number or per-corner CornerRadius, points. */
+    get CornerRadius() { return this.cornerRadius; }
+    set CornerRadius(v) { this.cornerRadius = typeof v === "number" ? new CornerRadius(v) : v; this.Update(); }
+    /** Points; a negative value means device pixels. 0 = no stroke. */
+    StrokeWidth = 0;
+    StrokeColor = Colors.Gray;
+    StrokeCap = "Round";
+    /** Gradient painted along the stroke instead of StrokeColor (C# StrokeGradient). */
+    StrokeGradient;
+    /** Raised (Bevel) or pressed-in (Emboss) edges, drawn with Bevel after the background (C# BevelType). */
+    BevelType = "None";
+    bevel;
+    /** Edge depth / colors / opacity; plain `{ Depth, LightColor, ShadowColor, Opacity }` literals accepted. */
+    get Bevel() { return this.bevel; }
+    set Bevel(v) { this.bevel = v ? SkiaBevel.From(v) : undefined; this.Update(); }
+    /** Hollow shape: the background is not filled, only the stroke (and children) are drawn. */
+    ClipBackgroundColor = false;
+    /** Polygon / Line vertices as ratios (0..1) of the shape rect. */
+    Points = [];
+    /** SVG path data for Type=Path, fitted and centered inside the rect. */
+    PathData;
+    shadows = [];
+    /** Drop shadows painted with the background (DrawnUi SkiaShape.Shadows); plain `{X, Y, Blur, Opacity, Color}` literals accepted. */
+    get Shadows() { return this.shadows; }
+    set Shadows(v) { this.shadows = (v ?? []).map(SkiaShadow.From); this.Update(); }
+    PaintsBackgroundWithoutColor() { return this.shadows.length > 0; }
+    /** C# MergeShadowMargin: spread = 3 * Blur * scale around the offset shadow. */
+    ComputeEffectsMargin(scale) {
+        const inner = super.ComputeEffectsMargin(scale);
+        let l = inner.Left, t = inner.Top, r = inner.Right, b = inner.Bottom;
+        for (const s of this.shadows) {
+            const spread = 3 * s.Blur * scale, dx = s.X * scale, dy = s.Y * scale;
+            l = Math.max(l, spread - dx);
+            t = Math.max(t, spread - dy);
+            r = Math.max(r, spread + dx);
+            b = Math.max(b, spread + dy);
+        }
+        return new Thickness(l, t, r, b);
+    }
+    /** C# CreateShadow: DropShadow (shape + shadow) or DropShadowOnly; a fully opaque Color takes the shadow's Opacity. */
+    static ShadowFilter(shadow, scale) {
+        const CK = Super.CK;
+        const c = Super.ParseColor(shadow.Color);
+        const color = c[3] >= 0.999 ? CK.Color4f(c[0], c[1], c[2], shadow.Opacity) : c;
+        const make = shadow.ShadowOnly ? CK.ImageFilter.MakeDropShadowOnly : CK.ImageFilter.MakeDropShadow;
+        return make(shadow.X * scale, shadow.Y * scale, shadow.Blur * scale, shadow.Blur * scale, color, null);
+    }
+    constructor() {
+        super();
+        this.Type = "Rectangle";
+        this.UseCache = "Operations";
+    }
+    // ---- geometry ----
+    StrokePixels(scale) {
+        if (this.StrokeWidth === 0 || this.StrokeColor === Colors.Transparent)
+            return 0;
+        return this.StrokeWidth > 0 ? this.StrokeWidth * scale : -this.StrokeWidth;
+    }
+    /** Rect the outline is drawn on: bounds deflated by half the stroke so the stroke stays inside. */
+    StrokeAwareRect(r, scale) {
+        const half = this.StrokePixels(scale) / 2;
+        return new SKRect(r.Left + half, r.Top + half, r.Right - half, r.Bottom - half);
+    }
+    UsesStroke() { return this.StrokeWidth !== 0 && this.StrokeColor !== Colors.Transparent; }
+    /** Builds the outline path for rect (canvas pixels). Caller deletes it. */
+    CreateShapePath(rect, scale) {
+        const CK = Super.CK;
+        const b = new CK.PathBuilder();
+        const type = this.Type;
+        if (type === "Circle") {
+            const d = Math.min(rect.Width, rect.Height);
+            const cx = rect.Left + rect.Width / 2, cy = rect.Top + rect.Height / 2;
+            b.addOval(CK.LTRBRect(cx - d / 2, cy - d / 2, cx + d / 2, cy + d / 2));
+        }
+        else if (type === "Ellipse") {
+            b.addOval(CK.LTRBRect(rect.Left, rect.Top, rect.Right, rect.Bottom));
+        }
+        else if (type === "Arc") {
+            b.addArc(CK.LTRBRect(rect.Left, rect.Top, rect.Right, rect.Bottom), this.Value1, this.Value2);
+        }
+        else if (type === "Polygon" || type === "Line") {
+            const pts = this.Points;
+            if (pts.length >= 2) {
+                const p = (i) => [Math.round(rect.Left + pts[i].X * rect.Width), Math.round(rect.Top + pts[i].Y * rect.Height)];
+                b.moveTo(...p(0));
+                for (let i = 1; i < pts.length; i++)
+                    b.lineTo(...p(i));
+                if (type === "Polygon")
+                    b.close();
+            }
+        }
+        else if (type === "Path" && this.PathData) {
+            const src = CK.Path.MakeFromSVGString(this.PathData);
+            if (src) {
+                const bounds = src.getBounds(); // [l, t, r, b]
+                const w = bounds[2] - bounds[0], h = bounds[3] - bounds[1];
+                const s = w > 0 && h > 0 ? Math.min(rect.Width / w, rect.Height / h) : 1;
+                const tx = rect.Left + (rect.Width - w * s) / 2 - bounds[0] * s;
+                const ty = rect.Top + (rect.Height - h * s) / 2 - bounds[1] * s;
+                b.addPath(src, s, 0, tx, 0, s, ty, 0, 0, 1); // addPath(path, 3x3 matrix)
+                src.delete();
+            }
+        }
+        else {
+            const c = this.cornerRadius;
+            if (c.TopLeft || c.TopRight || c.BottomLeft || c.BottomRight) {
+                const tl = c.TopLeft * scale, tr = c.TopRight * scale, br = c.BottomRight * scale, bl = c.BottomLeft * scale;
+                b.addRRect(Float32Array.of(rect.Left, rect.Top, rect.Right, rect.Bottom, tl, tl, tr, tr, br, br, bl, bl));
+            }
+            else {
+                b.addRect(CK.LTRBRect(rect.Left, rect.Top, rect.Right, rect.Bottom));
+            }
+        }
+        const path = b.detach();
+        b.delete();
+        return path;
+    }
+    /** Children live inside the stroke (full width) + Padding. */
+    ChildrenRect() {
+        const scale = this.RenderingScale;
+        const s = this.StrokePixels(scale);
+        const r = this.DrawingRect;
+        return new SKRect(r.Left + s, r.Top + s, r.Right - s, r.Bottom - s);
+    }
+    /** Clip for overlay effects (ripple) and children: the shape itself, inset by the stroke. */
+    CreateClip() {
+        return this.CreateShapePath(this.ChildrenRect(), this.RenderingScale);
+    }
+    // ---- layout ----
+    OnLayoutChanged() {
+        // Absolute layout of children inside the stroke-inset rect, then Padding (handled by base via DrawingRect).
+        const saved = this.DrawingRect;
+        this.DrawingRect = this.ChildrenRect();
+        super.OnLayoutChanged();
+        this.DrawingRect = saved;
+    }
+    // ---- paint ----
+    PaintBackground(ctx) {
+        const type = this.Type;
+        if (type === "Arc" || type === "Line")
+            return; // open shapes: stroke only
+        const CK = Super.CK;
+        const canvas = ctx.Context.Canvas;
+        const rect = this.StrokeAwareRect(ctx.Destination, ctx.Scale);
+        const path = this.CreateShapePath(rect, ctx.Scale);
+        // C# PaintWithShadowsInternal: the fill is drawn once per shadow with a drop-shadow filter; a hollow shape
+        // (ClipBackgroundColor) clips its own outline away so only the shadow outside remains
+        for (const shadow of this.shadows) {
+            const paint = this.CreateBackgroundPaint(rect);
+            if (this.ClipBackgroundColor)
+                paint.setColor(Super.ParseColor(this.StrokeColor === Colors.Transparent ? Colors.Black : this.StrokeColor));
+            const filter = SkiaShape.ShadowFilter(shadow, ctx.Scale);
+            paint.setImageFilter(filter);
+            const saved = canvas.save();
+            if (this.ClipBackgroundColor)
+                canvas.clipPath(path, CK.ClipOp.Difference, true);
+            canvas.drawPath(path, paint);
+            canvas.restoreToCount(saved);
+            filter.delete();
+            paint.delete();
+        }
+        if (!this.ClipBackgroundColor && (this.shadows.length === 0 || this.shadows.some((s) => s.ShadowOnly))) {
+            const paint = this.CreateBackgroundPaint(rect);
+            canvas.drawPath(path, paint);
+            paint.delete();
+        }
+        path.delete();
+    }
+    /** C# PaintBevelEffect: two stroked edge paths (top/left and bottom/right) in the light / shadow colors. */
+    PaintBevelEffect(ctx, rect, depth) {
+        const bevel = this.bevel;
+        if (this.BevelType === "None" || !bevel || depth <= 0)
+            return;
+        const CK = Super.CK;
+        const tl = new CK.PathBuilder(), br = new CK.PathBuilder();
+        const half = depth / 2;
+        const type = this.Type;
+        const arc = (b, l, t, r, bt, start, sweep) => b.addArc(CK.LTRBRect(l, t, r, bt), start, sweep);
+        if (type === "Rectangle") {
+            const c = this.cornerRadius, s = ctx.Scale;
+            const rTL = c.TopLeft * s, rTR = c.TopRight * s, rBR = c.BottomRight * s, rBL = c.BottomLeft * s;
+            if (rTL === 0 && rTR === 0 && rBR === 0 && rBL === 0) {
+                tl.moveTo(rect.Left, rect.Top + half);
+                tl.lineTo(rect.Right, rect.Top + half);
+                tl.moveTo(rect.Left + half, rect.Top);
+                tl.lineTo(rect.Left + half, rect.Bottom);
+                br.moveTo(rect.Left, rect.Bottom - half);
+                br.lineTo(rect.Right, rect.Bottom - half);
+                br.moveTo(rect.Right - half, rect.Top);
+                br.lineTo(rect.Right - half, rect.Bottom);
+            }
+            else {
+                if (rTL > half)
+                    arc(tl, rect.Left + half, rect.Top + half, rect.Left + 2 * rTL - half, rect.Top + 2 * rTL - half, 180, 90);
+                tl.moveTo(rect.Left + rTL, rect.Top + half);
+                tl.lineTo(rect.Right - rTR, rect.Top + half);
+                if (rTR > half)
+                    arc(tl, rect.Right - 2 * rTR + half, rect.Top + half, rect.Right - half, rect.Top + 2 * rTR - half, 270, 45);
+                if (rBL > half)
+                    arc(tl, rect.Left + half, rect.Bottom - 2 * rBL + half, rect.Left + 2 * rBL - half, rect.Bottom - half, 135, 45);
+                tl.moveTo(rect.Left + half, rect.Top + rTL);
+                tl.lineTo(rect.Left + half, rect.Bottom - rBL);
+                if (rTR > half)
+                    arc(br, rect.Right - 2 * rTR + half, rect.Top + half, rect.Right - half, rect.Top + 2 * rTR - half, 315, 45);
+                br.moveTo(rect.Right - half, rect.Top + rTR);
+                br.lineTo(rect.Right - half, rect.Bottom - rBR);
+                if (rBR > half)
+                    arc(br, rect.Right - 2 * rBR + half, rect.Bottom - 2 * rBR + half, rect.Right - half, rect.Bottom - half, 0, 90);
+                if (rBL > half)
+                    arc(br, rect.Left + half, rect.Bottom - 2 * rBL + half, rect.Left + 2 * rBL - half, rect.Bottom - half, 90, 45);
+                br.moveTo(rect.Left + rBL, rect.Bottom - half);
+                br.lineTo(rect.Right - rBR, rect.Bottom - half);
+            }
+        }
+        else if (type === "Circle" || type === "Ellipse") {
+            let l = rect.Left, t = rect.Top, r = rect.Right, b = rect.Bottom;
+            if (type === "Circle") {
+                const d = Math.min(rect.Width, rect.Height), cx = rect.Left + rect.Width / 2, cy = rect.Top + rect.Height / 2;
+                l = cx - d / 2;
+                r = cx + d / 2;
+                t = cy - d / 2;
+                b = cy + d / 2;
+            }
+            arc(tl, l + half, t + half, r - half, b - half, 135, 180);
+            arc(br, l + half, t + half, r - half, b - half, 315, 180);
+        }
+        else if (type === "Path" && this.PathData) {
+            // C# SKPathMeasure: first half of the outline is the light edge, second half the shadow edge
+            const path = this.CreateShapePath(rect, ctx.Scale);
+            const iter = new CK.ContourMeasureIter(path, false, 1);
+            const contour = iter.next();
+            if (contour) {
+                const len = contour.length();
+                const a = contour.getSegment(0, len / 2, true), b = contour.getSegment(len / 2, len, true);
+                tl.addPath(a);
+                br.addPath(b);
+                a.delete();
+                b.delete();
+                contour.delete();
+            }
+            iter.delete();
+            path.delete();
+        }
+        else if (type === "Polygon" && this.Points.length >= 3) {
+            const pts = this.Points, cx = rect.Left + rect.Width / 2, cy = rect.Top + rect.Height / 2;
+            const p = (i) => [rect.Left + pts[i].X * rect.Width, rect.Top + pts[i].Y * rect.Height];
+            for (let i = 0; i < pts.length; i++) {
+                const [x1, y1] = p(i), [x2, y2] = p((i + 1) % pts.length);
+                const mx = (x1 + x2) / 2, my = (y1 + y2) / 2;
+                const light = (mx <= cx && my <= cy) || (mx <= cx && my >= cy) || (mx >= cx && my <= cy);
+                const b = light ? tl : br;
+                b.moveTo(x1, y1);
+                b.lineTo(x2, y2);
+            }
+        }
+        const topLeft = tl.detach(), bottomRight = br.detach();
+        tl.delete();
+        br.delete();
+        const paint = new CK.Paint();
+        paint.setAntiAlias(true);
+        paint.setStyle(CK.PaintStyle.Stroke);
+        paint.setStrokeWidth(depth);
+        const withAlpha = (c) => { const f = Super.ParseColor(c); return Float32Array.of(f[0], f[1], f[2], bevel.Opacity); };
+        const light = withAlpha(bevel.LightColor), shadow = withAlpha(bevel.ShadowColor);
+        const canvas = ctx.Context.Canvas;
+        paint.setColor(this.BevelType === "Bevel" ? light : shadow);
+        canvas.drawPath(topLeft, paint);
+        paint.setColor(this.BevelType === "Bevel" ? shadow : light);
+        canvas.drawPath(bottomRight, paint);
+        paint.delete();
+        topLeft.delete();
+        bottomRight.delete();
+    }
+    Paint(ctx) {
+        const CK = Super.CK;
+        const canvas = ctx.Context.Canvas;
+        if (this.BevelType !== "None" && this.bevel)
+            this.PaintBevelEffect(ctx, this.StrokeAwareRect(ctx.Destination, ctx.Scale), this.bevel.Depth * ctx.Scale);
+        if (this.Views.length > 0) {
+            const clip = this.CreateClip();
+            const saved = canvas.save();
+            canvas.clipPath(clip, CK.ClipOp.Intersect, true);
+            super.Paint(ctx); // children
+            canvas.restoreToCount(saved);
+            clip.delete();
+        }
+        if (this.UsesStroke()) {
+            const rect = this.StrokeAwareRect(ctx.Destination, ctx.Scale);
+            const path = this.CreateShapePath(rect, ctx.Scale);
+            const paint = new CK.Paint();
+            paint.setAntiAlias(true);
+            paint.setStyle(CK.PaintStyle.Stroke);
+            paint.setStrokeWidth(Math.max(1, this.StrokePixels(ctx.Scale)));
+            paint.setColor(Super.ParseColor(this.StrokeColor));
+            if (this.StrokeGradient)
+                this.SetupGradient(paint, this.StrokeGradient, rect);
+            paint.setStrokeCap(this.StrokeCap === "Butt" ? CK.StrokeCap.Butt : this.StrokeCap === "Square" ? CK.StrokeCap.Square : CK.StrokeCap.Round);
+            paint.setStrokeJoin(this.StrokeCap === "Round" ? CK.StrokeJoin.Round : CK.StrokeJoin.Miter);
+            canvas.drawPath(path, paint);
+            paint.delete();
+            path.delete();
+        }
+    }
+}
+/** DrawnUi SkiaFrame = SkiaShape Type=Rectangle (alias, not a layout type). */
+export class SkiaFrame extends SkiaShape {
+}

package/dist/controls/SkiaSlider.d.ts

@@ -0,0 +1,74 @@
+import { type DrawingContext, SkiaControl } from "../core/SkiaControl";
+import type { GestureEventProcessingInfo, SkiaGesturesParameters } from "../core/Gestures";
+import { type PrebuiltControlStyle, type ResolvedControlStyle } from "../core/ControlStyle";
+import { type Color, ScaledSize, Thickness } from "../core/Types";
+/**
+ * Mirrors DrawnUi SkiaSlider: single or range (`EnableRange`) slider with Min/Max/Step, `Start`/`End` values,
+ * thumb drag, click-on-trail, per-style looks (Default / Cupertino / Material / Material3 / Windows).
+ * Track, selected trail and thumbs are painted directly; the C# thumb-position math (SliderHeight = thumb box) is kept.
+ */
+export declare class SkiaSlider extends SkiaControl {
+    static DefaultAccessibilityRole?: string;
+    ControlStyle: PrebuiltControlStyle;
+    Min: number;
+    Max: number;
+    Step: number;
+    EnableRange: boolean;
+    /** Minimum distance between the two thumbs, in value units. */
+    RangeMin: number;
+    ClickOnTrailEnabled: boolean;
+    RespondsToGestures: boolean;
+    IsPressed: boolean;
+    IsUserPanning: boolean;
+    /** Extra points around a thumb that still count as grabbing it (C# moreHotspotSize). */
+    MoreHotspotSize: number;
+    StartChanged?: (sender: SkiaSlider, value: number) => void;
+    EndChanged?: (sender: SkiaSlider, value: number) => void;
+    private start;
+    private end;
+    private sliderHeight?;
+    private thumbColor?;
+    private trackColor?;
+    private trackSelectedColor?;
+    private touchArea;
+    private lastTouchX;
+    /** Thumb positions in points from the left edge (C# StartThumbX / EndThumbX). */
+    StartThumbX: number;
+    EndThumbX: number;
+    constructor();
+    get UsingControlStyle(): ResolvedControlStyle;
+    get Start(): number;
+    set Start(v: number);
+    get End(): number;
+    set End(v: number);
+    /** Thumb box size in points (C# SliderHeight); unset = per style (35 default, 28 Cupertino, 20 Material/Windows, +8 in range mode). */
+    get SliderHeight(): number;
+    set SliderHeight(v: number);
+    get ThumbColor(): Color;
+    set ThumbColor(v: Color);
+    get TrackColor(): Color;
+    set TrackColor(v: Color);
+    get TrackSelectedColor(): Color;
+    set TrackSelectedColor(v: Color);
+    /** C# style builders: thumb diameter, track height, palette, thumb shadow. */
+    private Look;
+    /** Thumb shadows paint outside the box: the cache must include them. */
+    ComputeEffectsMargin(scale: number): Thickness;
+    private Clamp;
+    private get WidthPts();
+    private get TotalLength();
+    private PositionFromValue;
+    private ValueFromPosition;
+    private AdjustToStep;
+    private SyncThumbsFromValues;
+    private SetStartOffsetClamped;
+    private SetEndOffsetClamped;
+    /** C# RecalculateValues: positions -> stepped values, raising the *Changed callbacks. */
+    private RecalculateValues;
+    protected MeasureAbsolute(w: number, _h: number, scale: number): ScaledSize;
+    protected OnLayoutChanged(): void;
+    protected Paint(ctx: DrawingContext): void;
+    ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
+    protected DefaultAccessibilityCanInteract(): boolean;
+    protected DefaultAccessibilityLabel(): string | undefined;
+}

package/dist/controls/SkiaSlider.js

@@ -0,0 +1,243 @@
+import { SkiaControl } from "../core/SkiaControl";
+import { Super } from "../core/Super";
+import { ResolveControlStyle } from "../core/ControlStyle";
+import { Colors, ScaledSize, SkiaShadow, Thickness } from "../core/Types";
+import { SkiaShape } from "./SkiaShape";
+/**
+ * Mirrors DrawnUi SkiaSlider: single or range (`EnableRange`) slider with Min/Max/Step, `Start`/`End` values,
+ * thumb drag, click-on-trail, per-style looks (Default / Cupertino / Material / Material3 / Windows).
+ * Track, selected trail and thumbs are painted directly; the C# thumb-position math (SliderHeight = thumb box) is kept.
+ */
+export class SkiaSlider extends SkiaControl {
+    static DefaultAccessibilityRole = "slider";
+    ControlStyle = "Unset";
+    Min = 0;
+    Max = 100;
+    Step = 1;
+    EnableRange = false;
+    /** Minimum distance between the two thumbs, in value units. */
+    RangeMin = 0;
+    ClickOnTrailEnabled = true;
+    RespondsToGestures = true;
+    IsPressed = false;
+    IsUserPanning = false;
+    /** Extra points around a thumb that still count as grabbing it (C# moreHotspotSize). */
+    MoreHotspotSize = 10;
+    StartChanged;
+    EndChanged;
+    start = 0;
+    end = 0;
+    sliderHeight;
+    thumbColor;
+    trackColor;
+    trackSelectedColor;
+    touchArea = "Unknown";
+    lastTouchX = 0;
+    /** Thumb positions in points from the left edge (C# StartThumbX / EndThumbX). */
+    StartThumbX = 0;
+    EndThumbX = 0;
+    constructor() {
+        super();
+        this.HorizontalOptions = "Fill";
+        this.MinimumWidthRequest = 64;
+        this.UseCache = "ImageDoubleBuffered";
+    }
+    get UsingControlStyle() { return ResolveControlStyle(this.ControlStyle); }
+    get Start() { return this.start; }
+    set Start(v) { v = this.Clamp(v); if (this.start !== v) {
+        this.start = v;
+        this.StartChanged?.(this, v);
+        this.SyncThumbsFromValues();
+    } }
+    get End() { return this.end; }
+    set End(v) { v = this.Clamp(v); if (this.end !== v) {
+        this.end = v;
+        this.EndChanged?.(this, v);
+        this.SyncThumbsFromValues();
+        this.NotifyAccessibility();
+    } }
+    /** Thumb box size in points (C# SliderHeight); unset = per style (35 default, 28 Cupertino, 20 Material/Windows, +8 in range mode). */
+    get SliderHeight() { return this.sliderHeight ?? this.Look().thumb + (this.EnableRange && this.UsingControlStyle !== "Unset" ? 8 : 0); }
+    set SliderHeight(v) { this.sliderHeight = v; this.Update(); }
+    get ThumbColor() { return this.thumbColor ?? this.Look().thumbColor; }
+    set ThumbColor(v) { this.thumbColor = v; this.Update(); }
+    get TrackColor() { return this.trackColor ?? this.Look().track; }
+    set TrackColor(v) { this.trackColor = v; this.Update(); }
+    get TrackSelectedColor() { return this.trackSelectedColor ?? this.Look().selected; }
+    set TrackSelectedColor(v) { this.trackSelectedColor = v; this.Update(); }
+    /** C# style builders: thumb diameter, track height, palette, thumb shadow. */
+    Look() {
+        switch (this.UsingControlStyle) {
+            case "Cupertino": return { thumb: 28, trackH: 2, track: "#CCCCCC", selected: "#007AFF", thumbColor: Colors.White, shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 3, Opacity: 0.2, Color: Colors.Gray }) };
+            case "Material": return { thumb: 20, trackH: 4, track: "#E8EAED", selected: "#2196F3", thumbColor: "#2196F3", shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 2, Opacity: 0.3, Color: Colors.Black }) };
+            case "Material3": return { thumb: 20, trackH: 4, track: "#E6E0E9", selected: "#6750A4", thumbColor: "#6750A4", shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 2, Opacity: 0.3, Color: Colors.Black }) };
+            case "Windows": return { thumb: 20, trackH: 4, track: "#C6C6C6", selected: "#0078D4", thumbColor: "#0078D4", shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 2, Opacity: 0.25, Color: Colors.Black }) };
+            default: return { thumb: 35, trackH: 6, track: "#D7DBE0", selected: "#DC143C", thumbColor: "#DC143C", shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 3, Opacity: 0.25, Color: Colors.Black }) };
+        }
+    }
+    /** Thumb shadows paint outside the box: the cache must include them. */
+    ComputeEffectsMargin(scale) {
+        const s = this.Look().shadow;
+        const spread = 3 * s.Blur * scale;
+        return new Thickness(Math.max(0, spread - s.X * scale), Math.max(0, spread - s.Y * scale), spread + s.X * scale, spread + s.Y * scale);
+    }
+    Clamp(v) { return Math.max(this.Min, Math.min(this.Max, v)); }
+    get WidthPts() { return this.DrawingRect.Width / (this.RenderingScale || 1); }
+    get TotalLength() { return Math.max(0, this.WidthPts - this.SliderHeight); }
+    PositionFromValue(v) { return this.Max > this.Min ? ((v - this.Min) / (this.Max - this.Min)) * this.TotalLength : 0; }
+    ValueFromPosition(x) { const t = this.TotalLength; return t <= 0 ? this.Min : this.Min + (x / t) * (this.Max - this.Min); }
+    AdjustToStep(v) { return this.Step > 0 ? this.Min + Math.round((v - this.Min) / this.Step) * this.Step : v; }
+    SyncThumbsFromValues() {
+        this.StartThumbX = this.PositionFromValue(this.start);
+        this.EndThumbX = this.PositionFromValue(this.end);
+        this.Update();
+    }
+    SetStartOffsetClamped(x) {
+        const max = this.EnableRange ? this.EndThumbX - this.RangeMin / (this.Step || 1) : this.TotalLength;
+        this.StartThumbX = Math.max(0, Math.min(max, x));
+    }
+    SetEndOffsetClamped(x) {
+        const min = this.EnableRange ? this.StartThumbX + this.RangeMin / (this.Step || 1) : 0;
+        this.EndThumbX = Math.max(min, Math.min(this.TotalLength, x));
+    }
+    /** C# RecalculateValues: positions -> stepped values, raising the *Changed callbacks. */
+    RecalculateValues() {
+        if (this.EnableRange) {
+            const s = this.AdjustToStep(this.ValueFromPosition(this.StartThumbX));
+            if (s !== this.start) {
+                this.start = this.Clamp(s);
+                this.StartChanged?.(this, this.start);
+            }
+        }
+        const e = this.AdjustToStep(this.ValueFromPosition(this.EndThumbX));
+        if (e !== this.end) {
+            this.end = this.Clamp(e);
+            this.EndChanged?.(this, this.end);
+            this.NotifyAccessibility();
+        }
+        this.Update();
+    }
+    MeasureAbsolute(w, _h, scale) {
+        return ScaledSize.FromPixels(isFinite(w) ? w : 200 * scale, this.SliderHeight * scale, scale);
+    }
+    OnLayoutChanged() { this.StartThumbX = this.PositionFromValue(this.start); this.EndThumbX = this.PositionFromValue(this.end); }
+    Paint(ctx) {
+        const CK = Super.CK;
+        const look = this.Look();
+        const scale = ctx.Scale;
+        const d = ctx.Destination;
+        const H = this.SliderHeight * scale;
+        const cy = d.Top + d.Height / 2;
+        const trackH = look.trackH * scale, r = trackH / 2;
+        const thumb = look.thumb * scale;
+        const paint = new CK.Paint();
+        paint.setAntiAlias(true);
+        const canvas = ctx.Context.Canvas;
+        // track
+        paint.setColor(Super.ParseColor(this.TrackColor));
+        canvas.drawRRect(CK.RRectXY(CK.LTRBRect(d.Left, cy - r, d.Right, cy + r), r, r), paint);
+        // selected trail between thumb centers (from the left edge in single mode)
+        const endC = d.Left + this.EndThumbX * scale + H / 2;
+        const startC = this.EnableRange ? d.Left + this.StartThumbX * scale + H / 2 : d.Left;
+        paint.setColor(Super.ParseColor(this.TrackSelectedColor));
+        if (endC > startC)
+            canvas.drawRRect(CK.RRectXY(CK.LTRBRect(startC, cy - r, endC, cy + r), r, r), paint);
+        const drawThumb = (c) => {
+            const s = this.UsingControlStyle;
+            // the thumb's body carries the style shadow (C# SliderThumb shape Shadows)
+            const shadowed = (radius, color) => {
+                const filter = SkiaShape.ShadowFilter(look.shadow, scale);
+                paint.setImageFilter(filter);
+                paint.setColor(Super.ParseColor(color));
+                canvas.drawCircle(c, cy, radius, paint);
+                paint.setImageFilter(null);
+                filter.delete();
+            };
+            if (s === "Unset") {
+                const inner = thumb - 10 * scale; // C# Margin 5 around the accent circle
+                shadowed(inner / 2, this.ThumbColor);
+                paint.setColor(Super.ParseColor(Colors.White));
+                canvas.drawCircle(c, cy, 3 * scale, paint);
+            }
+            else if (s === "Windows") {
+                shadowed(thumb / 2, Colors.White);
+                paint.setStyle(CK.PaintStyle.Stroke);
+                paint.setStrokeWidth(scale);
+                paint.setColor(Super.ParseColor("#E5E5E5"));
+                canvas.drawCircle(c, cy, thumb / 2 - scale / 2, paint);
+                paint.setStyle(CK.PaintStyle.Fill);
+                paint.setColor(Super.ParseColor(this.ThumbColor));
+                canvas.drawCircle(c, cy, 5 * scale, paint);
+            }
+            else if (s === "Cupertino") {
+                shadowed(thumb / 2, this.ThumbColor);
+                paint.setStyle(CK.PaintStyle.Stroke);
+                paint.setStrokeWidth(0.5 * scale);
+                paint.setColor(Super.ParseColor("#CCCCCC"));
+                canvas.drawCircle(c, cy, thumb / 2, paint);
+                paint.setStyle(CK.PaintStyle.Fill);
+            }
+            else {
+                shadowed(thumb / 2, this.ThumbColor);
+            }
+        };
+        if (this.EnableRange)
+            drawThumb(startC);
+        drawThumb(endC);
+        paint.delete();
+    }
+    // ---- gestures (port of C# SkiaSlider.ProcessGestures, single pointer) ----
+    ProcessGestures(args, apply) {
+        if (!this.RespondsToGestures)
+            return super.ProcessGestures(args, apply);
+        const scale = this.RenderingScale || 1;
+        const localX = (apply.MappedLocation.X + apply.ChildOffset.X - this.DrawingRect.Left) / scale;
+        const H = this.SliderHeight, more = this.MoreHotspotSize;
+        if (args.Type === "Down") {
+            this.IsUserPanning = false;
+            if (this.EnableRange && localX >= this.StartThumbX - more && localX <= this.StartThumbX + H + more)
+                this.touchArea = "Start";
+            else if (localX >= this.EndThumbX - more && localX <= this.EndThumbX + H + more)
+                this.touchArea = "End";
+            else
+                this.touchArea = "Unknown";
+            this.IsPressed = true;
+            if (this.touchArea === "Unknown" && this.ClickOnTrailEnabled) {
+                const half = H / 2;
+                if (this.EnableRange && localX <= this.WidthPts / 2) {
+                    this.touchArea = "Start";
+                    this.SetStartOffsetClamped(localX - half);
+                }
+                else {
+                    this.touchArea = "End";
+                    this.SetEndOffsetClamped(localX - half);
+                }
+                this.RecalculateValues();
+            }
+            this.lastTouchX = this.touchArea === "Start" ? this.StartThumbX : this.EndThumbX;
+            return this;
+        }
+        if (args.Type === "Panning") {
+            if (this.touchArea === "Unknown")
+                return null;
+            this.IsUserPanning = true;
+            const maybe = this.lastTouchX + args.Event.Distance.Total.X / scale;
+            if (this.touchArea === "Start")
+                this.SetStartOffsetClamped(maybe);
+            else
+                this.SetEndOffsetClamped(maybe);
+            this.RecalculateValues();
+            return this;
+        }
+        if (args.Type === "Up") {
+            this.IsUserPanning = false;
+            this.IsPressed = false;
+            return null;
+        }
+        if (args.Type === "Tapped")
+            return this.touchArea !== "Unknown" ? this : null;
+        return super.ProcessGestures(args, apply);
+    }
+    DefaultAccessibilityCanInteract() { return this.RespondsToGestures; }
+    DefaultAccessibilityLabel() { return this.EnableRange ? `${this.start} – ${this.end}` : `${this.end}`; }
+}