drawnui-react 0.1.0-preview.2 → 0.1.0-preview.4

package/README.md

@@ -67,11 +67,13 @@ the showcase for other frameworks on this engine.
 
 ## Context menu (right click)
 
-A right click on the canvas normally opens the browser's own menu ("Save image as…"). Only the primary mouse
-button starts a gesture, as in DrawnUi.Blazor, so a right click never fires `Tapped`; to take it, handle
-`ContextMenu` on any control, exactly like `Tapped`:
+A right click on the canvas normally opens the browser's own menu ("Save image as…"). Every mouse button goes
+through the gesture pipeline as in DrawnUi.Net (`e.Parameters.Event.Pointer.Button` says which), so a right click is
+a `Tapped` with `Button` `"Right"` for games and custom controls; a handler that should act on the primary button only
+checks it. To take the browser menu request, handle `ContextMenu` on any control, exactly like `Tapped`:
 
 ```tsx
+<SkiaShape Tapped={(s, e) => { if ((e.Parameters.Event.Pointer?.Button ?? "Left") === "Left") open(); }} />
 <SkiaShape ContextMenu={(sender, e) => { openMyMenu(e.Location); return true; }} />
 <Canvas ContextMenu={(canvas, e) => true /* nothing hit: swallow the browser menu everywhere */} />
 ```

package/SKIPPED.md

@@ -9,7 +9,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 |---|---|---|
 | `UseCache` | partial | `None`, `Operations` / `OperationsFull` (SkPicture replay), `Image` (offscreen surface snapshot, GPU-backed on WebGL, nearest-sampled blit), `ImageDoubleBuffered` (`RenderObjectPrevious` kept and drawn when a new cache cannot be produced yet, `DrawPlaceholder(ctx)` hook when there is none; recording itself is synchronous — no background thread, same as DrawnUi.Blazor with `CanUseCacheDoubleBuffering = false`), `ImageComposite` / `ImageCompositeGPU` (per-child composite, see the `UseCache="ImageComposite"` row below). `GPU` resolves to `Image` and `ImageCompositeGPU` to `ImageComposite`: no separate GPU-only path. `Super.CacheEnabled`, `RenderObject`/`CachedObject`, `InvalidateCache`, `DestroyRenderingObject`, `Canvas.DisposeObject` (deleted after flush). Defaults per C#: `SkiaLabel`/`SkiaSvg` Operations, everything else None. Not ported: `CacheSharing`, `AllowCaching`, offscreen bake threads, cache validity by GRContext. |
 | Incremental invalidation | partial | `Measure` returns the previous size when `!NeedMeasure` and constraints+scale are unchanged; `Update()`/`InvalidateMeasure()` bubble up and stale every ancestor cache; `Repaint()` keeps caches. Arrange still runs per frame for the whole tree; no dirty regions, no `DirtyChildrenTracker`. Post-animators on a control nested INSIDE a cached ancestor are drawn only when that ancestor re-records. |
-| Gestures core: `Canvas.Gestures` (Disabled/Enabled/Lock), `ProcessGestures(args, apply)`, `ConsumeGestures`, `Tapped`/`ChildTapped`, `InputTransparent`, `BlockGesturesBelow`, `LockChildrenGestures`, `HitBoxAuto`/`HitIsInside`/`IsGestureForChild`, `SkiaGesturesParameters`/`GestureEventProcessingInfo`/`SkiaGesturesInfo`/`ControlTappedEventArgs` | ported | Pointer events -> per-pointer `OnTouchAction` state machine (port of DrawnUi.Blazor) -> Down/Panning/Tapped/Up, queued and processed at frame start. Tap slop = 16pt like AppoMobi TouchEffect. Only the primary mouse button starts a gesture (right / middle clicks are ignored, like DrawnUi.Blazor). |
+| Gestures core: `Canvas.Gestures` (Disabled/Enabled/Lock), `ProcessGestures(args, apply)`, `ConsumeGestures`, `Tapped`/`ChildTapped`, `InputTransparent`, `BlockGesturesBelow`, `LockChildrenGestures`, `HitBoxAuto`/`HitIsInside`/`IsGestureForChild`, `SkiaGesturesParameters`/`GestureEventProcessingInfo`/`SkiaGesturesInfo`/`ControlTappedEventArgs` | ported | Pointer events -> per-pointer `OnTouchAction` state machine (port of DrawnUi.Blazor) -> Down/Panning/Tapped/Up, queued and processed at frame start. Tap slop = 16pt like AppoMobi TouchEffect. The control that consumes a gesture keeps receiving it until it lets go (DrawnUi `Canvas.HadInput`, one pointer here instead of C#'s set): without it a drag handle, a slider thumb or a held button stops getting `Panning` the moment the finger leaves its box, and a control that stops consuming hands routing straight back to the tree (a button whose press turns into a scroll pan). Every mouse button is delivered (`Event.Pointer`: `Button`, `ButtonNumber`, `DeviceType`, `PressedButtons`, the AppoMobi.Gestures PointerData): a right click is Down / Up / Tapped with `Button` "Right" plus a `ContextMenu`; handlers that must be primary-only check `e.Parameters.Event.Pointer?.Button`. |
 | Gestures: `LongPressing`, `Pointer` (hover), multi-touch pinch, `SoftLock`, `AddGestures` attached props, `OnGestures` delegate | skipped | The enum members exist for parity and are never produced; there is no pinch member at all. Ported instead of skipped: velocity (`Gestures.ts` fills `Distance.Velocity` per move, the scroll / snapping physics run on it) and transform-aware mapping — a child receives the point through the inverse `RenderTransformMatrix` (`TransformPointToLocalSpace`), so rotated / scaled / translated controls hit-test correctly. `ChildOffset` stays zero because that inverse matrix replaces the C# cache-offset math (`TranslateInputCoords`), not because transforms are missing. `Wheel` IS produced (`Canvas.onWheel`). |
 | C# multi-subscriber `event`s | changed shape | One callback per event prop (`Tapped={fn}`), same names. `Command*` (ICommand) variants not ported. |
 | `Opacity`, `TranslationX/Y`, `Rotation`, `ScaleX/Y` (+`Scale`), `SkewX/Y`, `AnchorX/Y`, `HasTransform`, `RenderTransformMatrix`, `TransformPointToLocalSpace` | ported | Same matrix order as C# `ApplyTransforms` (pivot → rotation → scale/skew → translation), opacity = `saveLayer` alpha over the subtree, gestures mapped through the inverse matrix (`IsGestureForChild`, child receives the local point), accessibility rect = transformed bounds. Animations: `AnimateAsync`, `AnimateRangeAsync`, `FadeToAsync`, `ScaleToAsync`, `TranslateToAsync`, `RotateToAsync` as Promises with `AbortSignal` (one running per kind, like the C# per-property cancellation). Not ported: `RotationX/Y/Z`, `TranslationZ`, `Perspective1/2`, `CameraAngle`, `LinkTransforms`, `AddTranslationX/Y`, `UseTranslation*` overrides, `CustomizeLayerPaint`, `SkipRenderingOutOfBounds`. |
@@ -30,7 +30,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | `ZIndex` | ported | Static children of a layout are drawn in ZIndex order (stable for equal values), gestures go to the top-most first; the sorted list is cached until a child or a ZIndex changes (C# `GetOrderedSubviews`). Templated cells keep index order. |
 | `FillGradient`, `SkiaShape.StrokeGradient` | ported | `SkiaGradient` as a plain object: `Type` Linear (Start/End ratios or CSS `Angle`), Circular / Conical (radius = half the smaller side), Oval (radial scaled to the box), Sweep (around the center, `Value1`/`Value2` angles), `ColorPositions`, `TileMode`, `Light` (< 1 darker, > 1 lighter — HSL lightness, C# uses `MakeDarker/MakeLighter`, exact curve unverified), `Opacity`, `BlendMode`; C# `SetupGradient` paint setup (white base); shaders cached per gradient object and rect (C# `Version` cache: a new React literal replaces the old shaders). `SkiaLabel.FillGradient` paints the glyphs (`GradientByLines` default true = per line bounds, false = the text block) and the background only when `BackgroundColor` is set, like the C# label override. `SkiaLabel` text stroke (`StrokeColor`, `StrokeWidth` points, `StrokeGradient`) and drop shadow (`DropShadowColor`, `DropShadowSize`, `DropShadowOffsetX/Y`) in the C# order shadow → stroke → fill, measurement inflated by stroke × 2 and shadow size + offset like C#. Not ported: `Background` MAUI brushes, `FillBlendMode`. |
 | `SkiaShell` | partial (React-level) | `Routes` (route -> JSX page factory), `GoToAsync(route, animated)` / `GoBackAsync(animated)` / `PopToRootAsync` with the SkiaViewSwitcher slide (`PagesAnimationSpeed` 200 ms, pushed pages opaque over the page below, lower pages hidden when idle), `NavigationStack`, `CanGoBack`, `Route`, nav bar with Back + title, `useShell()`; `OpenPopupAsync(content, { animated, closeWhenBackgroundTapped, showOverlay, backgroundColor })` (C# PopupWrapper: dimmed backdrop, scale 0.5→1 + fade over `PopupsAnimationSpeed`, tap outside the content closes), `ClosePopupAsync`, `CloseAllPopups`; `PushModalAsync(content, { useGestures, animated, freezeBackground })` (C# ModalWrapper: full-screen `SkiaDrawer` FromBottom HeaderSize 0, drag-to-close with `useGestures`), `PopModalAsync`; `ShowToast(text | content, ms)` (C# layout: bottom banner, slide + fade 300/250 ms, `ShellDefaults.Toast*`), `CloseAllToasts`; `PopupsCount`/`ModalsCount`/`ToastsCount`; `ShellDefaults` = the C# statics (`PopupBackgroundColor`, `PopupsBackgroundBlur`, `PopupsAnimationSpeed`, `PopupsCancelAnimationsAfterMs`, `ZIndex*`, `Toast*`, tab colors); popups/modals sit on a `SkiaBackdrop` (blur + tint); `Tabs` (C# SkiaViewSwitcher tabs: bottom tab bar, per-tab page stacks, `SelectedTab`, `SelectTabAsync`, `PopTabToRootAsync`); `GoBackAsync` follows C# `GoBackDefault` (top popup, then modal, then page); React extension `UseBrowserHistory` (default true): pages in the URL hash `#/a/b`, one history entry per page / popup / modal, browser Back unwinds in the same order, deep links restore the page stack. Not ported: engine-level shell / `NavigationLayout` view switcher, frozen-screenshot backgrounds, `pixelsScaleInFrom`, `Navigating`/`Navigated`/`RouteChanged` events, `RegisterRoute` by type with arguments, `IHandleGoBack`, insets, `PushAsync(page instance)`; `AnimateTabs` + `TabsAnimationSpeed` (150) ported with the C# SelectLeftTab/SelectRightTab slide (0.75 width, fade, back-ease 0.55) — only the tab roots animate, pages pushed inside the leaving tab drop instantly. Browser history: a `popstate` at the same depth with another hash (a plain `<a href="#/route">` link, a typed hash) rebuilds the stack like a forward navigation. |
-| Styles / `ConfigureStyles` | skipped | |
+| Styles / `ConfigureStyles` | ported | `Super.UseDrawnUi().ConfigureStyles(styles => styles.AddStyle({ TargetType, ApplyToDerivedTypes, Setters }))`, the C# `Style` shape with the `Setter` list written as a plain object (`Setters: { FontFamily: "FontText" }`) because controls hold plain properties instead of BindableProperty. Per-class resolution cached, base-type styles applied furthest-first so the nearest wins, exact type last (C# `ResolveStylesForType`). Applied by the reconciler between `new` and the JSX props, so props override; a control built in code-behind is styled on its first `Measure` and keeps values that differ from its class defaults (the React stand-in for C# `ExplicitPropertiesSet`, which needs BindableProperty). Not ported: `BasedOn`, `Class`, `Triggers`, `Behaviors`, the per-control `Style` property, `ConditionalStyle`. |
 | Animators core: `AnimatorBase` / `SkiaValueAnimator` / `RenderingAnimator` (`IOverlayEffect`), `Canvas.RegisterAnimator`/`AnimatingControls`, `PostAnimators` + `ExecutePostAnimators`, `Easing` (Linear/Cubic*) | ported | Frame-driven: a running animator keeps frames coming, idle canvas draws nothing. |
 | Touch feedback: `AnimationTapped="Ripple"` + `TouchEffectColor` + `AnimationTappedSpeed` on any control, `SkiaButton.ApplyEffect="Ripple"` (on Down), `PlayRippleAnimation`, `RippleAnimator`, `ClipEffects`/`CreateClip` | ported | Same numbers as C#: 500ms CubicIn, radius 300pt, opacity 0.20 fading over 1.15x progress. |
 | `Shimmer` touch animation, `ShimmerAnimator`, `ClippedEffectsWith`, `TransformView`, `DelayCallbackMs`, `removePrevious`, `Pause`/`Resume`, `UseInterpolator`, spring/deceleration timing, `AnimateExtensions` (`FadeToAsync`, `TranslateToAsync`, ...) | skipped | |
@@ -61,7 +61,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | `SkiaLayout` Absolute / Column / Row (+ `SkiaStack`, `SkiaRow`, `SkiaLayer`) | ported | `Spacing`, `Padding`, `Children`/`Views`, `AddSubView`/`RemoveSubView`/`InsertSubView`. |
 | `SkiaLayout` templated (Column only): `ItemsSource` (array), `ItemTemplate` (factory `() => SkiaControl`), `RecyclingTemplate` Enabled/Disabled, `MeasureItemsStrategy` `MeasureFirst` (uniform, O(1) for 100k items) / `MeasureAll`, `ChildrenFactory` (ViewsAdapter pool: `GetOrCreateViewForIndex`, `ReleaseViewAt`), `FirstVisibleIndex`/`LastVisibleIndex`, `DebugString`, `ApplyItemsSource`, `VirtualisationInflated`, `BindingContext`/`ContextIndex` on every control, `SkiaDynamicDrawnCell.SetContent` | ported | Cells realized/bound/arranged/drawn only for the visible viewport (+inflation) each frame. |
 | `LoadMoreCommand` / `LoadMoreTopCommand` / `LoadMoreOffset` / `LoadMoreTopOffset` | ported | Callbacks instead of ICommand. Bottom fires once per content extent when within the offset of the end (or when the content underfills the viewport), re-arms when the content grows or the user moves away (>offset+100 pt, >2 s) — C# CheckNeedToLoadMore. Top arms only after the offset left the top edge, fires when it comes back. Not ported: opposite-direction cooldown (`IsOppositeLoadMoreBlocked`), `IInsideViewport.ShouldTriggerLoadMore`. |
-| Structure-preserving `ItemsSource` updates | ported (array diff) | C# listens to `ObservableCollection` Add/Insert; React apps replace the array, so the setter detects **append** (old is a prefix: measured heights kept, tail measured lazily) and **prepend** (old is a suffix: view indices shifted without rebinding, new head measured synchronously up to 200 items, `ItemsInsertedAtStart(px)` lets the `SkiaScroll` move its offset so visible rows stay put — C# head-insert rebase). Any other change rebuilds the structure (heights re-measured, offset kept). Not ported: removals/moves in place, `Replace`. |
+| Structure-preserving `ItemsSource` updates | ported (array diff) | C# listens to `ObservableCollection` Add/Insert; React apps replace the array, so the setter detects **append** (old is a prefix: measured heights kept, tail measured lazily) and **prepend** (old is a suffix: view indices shifted without rebinding, new head measured synchronously up to 200 items, `ItemsInsertedAtStart(px)` lets the `SkiaScroll` move its offset so visible rows stay put — C# head-insert rebase). and **reorder** (same items permuted, the C# `ObservableCollection.Move` case: contexts rebound, the index-keyed measured heights permuted with their items, nothing re-measured, extent and scroll offset unchanged). Any other change rebuilds the structure (heights re-measured, offset kept). Not ported: removals in place, `Replace`. |
 | Templated Row/Grid/Wrap, `Split`, `ItemTemplateSelector`, `ItemTemplatePoolSize`/`ReserveTemplates`, `UsePreparedViews`, `SkiaCachedStack`, measure memo | skipped | |
 | `ItemsSourceWindow` / `WindowSourceThreshold` (built-in window over huge sources) | not needed | The C# window bounds pipeline work (structures, pools, measures) for `MeasureFirst`/`MeasureAll` over big collections. React `MeasureVisible` measures on demand and keeps only visible cells realized, so the pipeline is already O(visible); memory of the array itself belongs to the app (paginate with `LoadMore*`). Revisit only if `MeasureAll` over 100k+ items becomes a requirement. |
 | `MeasureItemsStrategy="MeasureVisible"` + background measurement | ported | Initial pass measures enough items to fill the viewport (≥ `BackgroundMeasurementBatchSize`), content extent = exact prefix + average × remaining (C# MeasureList estimate), visible cells measured on demand and laid out with their real heights, the prefix grows in `requestIdleCallback` slices (time-budgeted, then one `InvalidateMeasure`), `LastMeasuredIndex`, `DebugString` shows `measured n/N`. Not ported: cancellation/`_pendingStructureChanges` interplay, `UsePreparedViews`, windowed sources, anchor correction when an estimate above the viewport changes (content may shift by the delta). |
@@ -92,7 +92,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 |---|---|---|
 | `Super.UseDrawnUi().ConfigureFonts(f => f.AddFont(src, alias)).BuildAsync()` | ported | Same shape as DrawnUi.Net/OpenTK. |
 | `AddFont(src, alias, weight)`, font fallback, emoji | skipped | |
-| `PreloadAssets`, `ConfigureStyles` | skipped | |
+| `PreloadAssets` | skipped | `ConfigureStyles` is ported, see the Engine table. |
 
 ## React layer
 
@@ -101,7 +101,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | Custom `react-reconciler` renderer, PascalCase props mapped 1:1 to control properties | ported | |
 | `SkiaToggle` / `SkiaSwitch` / `SkiaCheckbox` / `SkiaRadioButton` | ported | Same names: `IsToggled`, `Toggled`, `DefaultValue`, `IsAnimated`, `RespondsToGestures`, `ColorThumbOn/Off`, `ColorFrameOn/Off` (+ `ColorCheckOn`), `ControlStyle` with the Default / Cupertino / Material / Material3 / Windows looks and geometry of the C# style builders (`Frame`/`Thumb`, `FrameOff`/`FrameOn`/`ViewCheckOn`, `On` ring + `Text`), thumb animated with `TranslateToAsync` (`AnimationSpeed` 200 ms), radio groups by `GroupName` or parent. Not ported: `CommandToggled`/`CommandTapped`, hover (`CheckHovered`), `TransformView` hotspot (the toggle itself takes the tap), `Platform` style resolves from the browser UA. |
 | `SkiaProgress` / `SkiaSlider` | ported (painted, not composed) | `Value`/`Min`/`Max`, `TrackColor`/`ProgressColor`; slider `Min`/`Max`/`Step`/`Start`/`End`/`EnableRange`/`RangeMin`/`SliderHeight`/`ThumbColor`/`TrackColor`/`TrackSelectedColor`/`ClickOnTrailEnabled`/`StartChanged`/`EndChanged`, `StartThumbX`/`EndThumbX`, the C# position<->value math (`SliderHeight` = thumb box, `Step` rounding, `RangeMin` clamps), drag + click-on-trail + per-style looks (track heights, thumb sizes, palettes, Material3 gap + stop dot). Track/trail/thumbs are painted directly instead of child shapes (`SliderTrail`/`SliderThumb` not exposed). Not ported: `Orientation` Vertical, `Invert`, `ValueStringFormat`/`MinMaxStringFormat` + `StartDesc`/`EndDesc`, `IgnoreWrongDirection`, `AvailableWidthAdjustment`, `Trail*Offset`, `Cupertino*` sizing props, hover. |
-| `SkiaButton.ControlStyle` | ported | Cupertino / Material / Material3 / Windows accent, corner radius, font size/weight and minimum height from the C# style builders, applied only when the user left `BackgroundColor`/`CornerRadius`(8)/`FontSize`(15)/`MinimumHeightRequest` unset; default look is now the C# Crimson accent. Not ported: `Background` brushes, pressed-state shadow changes. |
+| `SkiaButton.ControlStyle` | ported | Cupertino / Material / Material3 / Windows accent, corner radius, font size/weight and minimum content size from the C# style builders, applied only when the user left `BackgroundColor`/`CornerRadius`(8)/`FontSize`(15)/`MinimumWidthRequest`/`MinimumHeightRequest` unset; default look is now the C# Crimson accent. `SetDefaultMinimumContentSize` is mirrored for BOTH axes (every C# style passes width 100, heights 41/36/40/40/32) and for the default `Unset` style too, skipped on a `Fill` axis or when a `WidthRequest`/`HeightRequest` is set, so short captions clamp to 100pt as in C#; the C# value adds `Margins` because it compares against a margin-inclusive size, here Measure applies it margin-exclusive and adds the margin after. Not ported: `Background` brushes, pressed-state shadow changes. |
 | `SkiaButton.FontFamilyFallback` | React extension | Pass-through to the inner label so icon-glyph buttons render with `AddSymbols()` faces. |
 | Accessibility (`ISkiaAccessibilityNode` + `SkiaAccessibilityManager` + Blazor ARIA overlay) | ported | `AccessibilityRole/Label/Hint/CanInteract/IsPressed/Live`, `Aria` constants, `IsAccessibilityElement`, `GetAccessibilityPixelRect`, `NotifyAccessibility`, `OnAccessibilityActivated` (synthetic Tapped), `OnAccessibilityFocused`, snapshot rate-limited by `MinUpdateIntervalMs`, top-left reading order, `SkiaButton` hides its inner label. Extensions: per-class `DefaultAccessibilityRole`, label/interaction defaults derived from text / `Tapped`, `pointer-events:none` overlay, detached/off-canvas nodes pruned at rebuild (no explicit unregister on removal). Not ported: `WithAccessibility*` fluent helpers, `FocusChanged` event consumers, UIA/AT-SPI (browser only), `aria-level` for headings. |
 | Static HTML for crawlers (`drawnui-react/vite` `drawnUiStatic()`, React extension) | ported | Build-time only: after `vite build` the plugin serves the build, opens it in headless Chrome (`playwright-core`, optional peer), reads the accessibility snapshot of the root page and of every page a root button opens (or `routes`), and writes visible semantic HTML (heading → heading, button → `<a href="#/route">`, text → paragraph, other controls → list items; `img` and `presentation` dropped) after the mount element or at `<!-- drawnui-static -->`, with `DEFAULT_STATIC_STYLE` (`render.style` to override / disable). Runtime: the first `<Canvas>` mount removes every `[data-drawnui-static]` element right after its engine drew frame 1 (`removeStaticContent`, one querySelectorAll, nothing in the frame loop). Not in DrawnUi.Net (Blazor sites hand-write static SEO content, see the drawnui-blazor notes). Not done: per-route documents (pages live in the hash, one URL), `<title>` / meta per page, sitemap entries. |

package/dist/controls/SkiaButton.d.ts

@@ -44,7 +44,10 @@ export declare class SkiaButton extends SkiaLayout {
     /** The button's own BackgroundColor/CornerRadius/Stroke are the frame's; the button itself paints nothing. */
     protected PaintBackground(): void;
     get UsingControlStyle(): ResolvedControlStyle;
-    /** C# Create*StyleContent defaults: accent, corner radius, font size/weight, minimum content size. */
+    /**
+     * C# Create*StyleContent defaults: accent, corner radius, font size/weight, minimum content size.
+     * Every C# style calls SetDefaultMinimumContentSize(100, minH), so the width floor is 100 everywhere.
+     */
     private static Look;
     protected MeasureAbsolute(w: number, h: number, scale: number): ScaledSize;
     /** The frame sits under the padding box: arrange children in the full rect, the label centered inside padding. */

package/dist/controls/SkiaButton.js

@@ -49,6 +49,11 @@ export class SkiaButton extends SkiaLayout {
         this.label.VerticalOptions = "Center";
         this.AddSubView(this.frame);
         this.AddSubView(this.label);
+        // C# ButtonLabel is styled when the button builds its content, and ApplyProperties then overwrites FontFamily with
+        // the button's own (empty by default) value, which the style no longer touches. Same order here: style the caption
+        // now, MeasureAbsolute below pushes SkiaButton.FontFamily over it every measure.
+        this.frame.ApplyInitialStyles(true);
+        this.label.ApplyInitialStyles(true);
     }
     /** Set to `Aria.RoleButton` to expose every button (React extension). */
     static DefaultAccessibilityRole;
@@ -57,14 +62,17 @@ export class SkiaButton extends SkiaLayout {
     /** The button's own BackgroundColor/CornerRadius/Stroke are the frame's; the button itself paints nothing. */
     PaintBackground() { }
     get UsingControlStyle() { return ResolveControlStyle(this.ControlStyle); }
-    /** C# Create*StyleContent defaults: accent, corner radius, font size/weight, minimum content size. */
+    /**
+     * C# Create*StyleContent defaults: accent, corner radius, font size/weight, minimum content size.
+     * Every C# style calls SetDefaultMinimumContentSize(100, minH), so the width floor is 100 everywhere.
+     */
     static Look(s) {
         switch (s) {
-            case "Cupertino": return { bg: "#007AFF", radius: 8, font: 17, weight: 600, minH: 36, shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 2, Opacity: 0.2, Color: Colors.Black }) };
-            case "Material": return { bg: "#2196F3", radius: 4, font: 14, weight: 0, minH: 40, shadow: new SkiaShadow({ X: 0, Y: 2, Blur: 4, Opacity: 0.3, Color: Colors.Black }) };
-            case "Material3": return { bg: "#6750A4", radius: 20, font: 14, weight: 0, minH: 40 };
-            case "Windows": return { bg: "#0078D7", radius: 4, font: 15, weight: 500, minH: 32, shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 1, Opacity: 0.2, Color: Colors.Black }) };
-            default: return { bg: "#DC143C", radius: 8, font: 15, weight: 0, minH: 41 };
+            case "Cupertino": return { bg: "#007AFF", radius: 8, font: 17, weight: 600, minW: 100, minH: 36, shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 2, Opacity: 0.2, Color: Colors.Black }) };
+            case "Material": return { bg: "#2196F3", radius: 4, font: 14, weight: 0, minW: 100, minH: 40, shadow: new SkiaShadow({ X: 0, Y: 2, Blur: 4, Opacity: 0.3, Color: Colors.Black }) };
+            case "Material3": return { bg: "#6750A4", radius: 20, font: 14, weight: 0, minW: 100, minH: 40 };
+            case "Windows": return { bg: "#0078D7", radius: 4, font: 15, weight: 500, minW: 100, minH: 32, shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 1, Opacity: 0.2, Color: Colors.Black }) };
+            default: return { bg: "#DC143C", radius: 8, font: 15, weight: 0, minW: 100, minH: 41 };
         }
     }
     MeasureAbsolute(w, h, scale) {
@@ -75,7 +83,12 @@ export class SkiaButton extends SkiaLayout {
         this.frame.StrokeWidth = this.StrokeWidth;
         if (this.frame.Shadows[0] !== look.shadow)
             this.frame.Shadows = look.shadow ? [look.shadow] : [];
-        if (this.MinimumHeightRequest < 0 && this.UsingControlStyle !== "Unset")
+        // C# SetDefaultMinimumContentSize(100, minH) from the style builder: a style default only where the app left the
+        // size unset, skipped on a Fill axis. C# adds Margins because it compares the minimum against a margin-inclusive
+        // size; here Measure applies it to the margin-excluded size and adds the margin after, so the plain value is used.
+        if (this.WidthRequest < 0 && this.MinimumWidthRequest < 0 && this.HorizontalOptions !== "Fill")
+            this.MinimumWidthRequest = look.minW;
+        if (this.HeightRequest < 0 && this.MinimumHeightRequest < 0 && this.VerticalOptions !== "Fill")
             this.MinimumHeightRequest = look.minH;
         this.label.Text = this.Text;
         this.label.TextColor = this.TextColor;

package/dist/controls/SkiaLayout.d.ts

@@ -70,6 +70,16 @@ export declare class SkiaLayout extends SkiaControl {
      * anything else rebuilds. Returns false when a full rebuild is needed.
      */
     private ApplyIncrementalChange;
+    /**
+     * Same items in another order — a drag-to-reorder, or any code writing a permuted array. DrawnUi handles the
+     * matching `ObservableCollection.Move` by keeping the structure and only rebinding the contexts, because its
+     * arrange re-flows each row from its bound view (`HandleStructurePreservingMove` / `ApplyMoveChange`, 2026-09-08).
+     * The measured heights here are index-keyed and authoritative, so they travel with their items instead: nothing is
+     * remeasured, the extent cannot change, and the scroll keeps its offset. Rebuilding instead would reset
+     * `MeasureVisible` to "exact for the first screen, estimated after" and throw a scrolled list back towards the top.
+     * Returns false when the two arrays are not a permutation of each other, so a real content change still rebuilds.
+     */
+    private ApplyReorderChange;
     /** Factory creating one cell (DrawnUi DataTemplate). Cells receive the item as BindingContext. */
     get ItemTemplate(): (() => SkiaControl) | undefined;
     set ItemTemplate(value: (() => SkiaControl) | undefined);

package/dist/controls/SkiaLayout.js

@@ -87,7 +87,11 @@ export class SkiaLayout extends SkiaControl {
      */
     ApplyIncrementalChange(old, items) {
         const n = items.length, o = old.length;
-        if (n <= o || o === 0)
+        if (o === 0)
+            return false;
+        if (n === o)
+            return this.ApplyReorderChange(old, items);
+        if (n < o)
             return false;
         const k = n - o;
         const scale = this.RenderingScale, gap = this.Spacing * scale, w = this.measuredWidthPx;
@@ -143,6 +147,65 @@ export class SkiaLayout extends SkiaControl {
         }
         return false;
     }
+    /**
+     * Same items in another order — a drag-to-reorder, or any code writing a permuted array. DrawnUi handles the
+     * matching `ObservableCollection.Move` by keeping the structure and only rebinding the contexts, because its
+     * arrange re-flows each row from its bound view (`HandleStructurePreservingMove` / `ApplyMoveChange`, 2026-09-08).
+     * The measured heights here are index-keyed and authoritative, so they travel with their items instead: nothing is
+     * remeasured, the extent cannot change, and the scroll keeps its offset. Rebuilding instead would reset
+     * `MeasureVisible` to "exact for the first screen, estimated after" and throw a scrolled list back towards the top.
+     * Returns false when the two arrays are not a permutation of each other, so a real content change still rebuilds.
+     */
+    ApplyReorderChange(old, items) {
+        const n = items.length;
+        if (this.MeasureItemsStrategy === "MeasureAll" && this.itemHeights.length !== n)
+            return false;
+        if (this.MeasureItemsStrategy === "MeasureVisible" && this.mvHeights.length !== n)
+            return false;
+        const moved = [];
+        for (let i = 0; i < n; i++)
+            if (old[i] !== items[i])
+                moved.push(i);
+        if (moved.length === 0) {
+            this.ChildrenFactory.UpdateItems(items);
+            return true;
+        } // same order, new array reference
+        // every slot that changed must hold an item that was in one of those slots before, otherwise this is not a reorder
+        const free = new Map();
+        for (const i of moved) {
+            const q = free.get(old[i]);
+            if (q)
+                q.push(i);
+            else
+                free.set(old[i], [i]);
+        }
+        const from = new Int32Array(n);
+        for (let i = 0; i < n; i++)
+            from[i] = i;
+        for (const i of moved) {
+            const q = free.get(items[i]);
+            if (!q || q.length === 0)
+                return false;
+            from[i] = q.shift();
+        }
+        if (this.MeasureItemsStrategy === "MeasureAll") {
+            const was = this.itemHeights;
+            this.itemHeights = Array.from({ length: n }, (_, i) => was[from[i]]);
+        }
+        else if (this.MeasureItemsStrategy === "MeasureVisible") {
+            const was = this.mvHeights, heights = new Float64Array(n);
+            for (let i = 0; i < n; i++)
+                heights[i] = was[from[i]];
+            this.mvHeights = heights;
+            // an item that was never measured can land inside the exact prefix: rebuild it over the leading measured run
+            this.mvPrefix = new Float64Array(n + 1);
+            this.mvMeasured = 0;
+            this.MvExtendPrefix(this.Spacing * this.RenderingScale);
+        }
+        // MeasureFirst has one height for every row, so a reorder is a pure rebind there (same as the C# note).
+        this.ChildrenFactory.UpdateItems(items);
+        return true;
+    }
     /** Factory creating one cell (DrawnUi DataTemplate). Cells receive the item as BindingContext. */
     get ItemTemplate() { return this.itemTemplate; }
     set ItemTemplate(value) {

package/dist/core/Canvas.d.ts

@@ -109,6 +109,15 @@ export declare class Canvas {
     OnTouchAction(args: TouchActionEventArgs): void;
     private OnGestureEvent;
     private ProcessPendingGestures;
+    /**
+     * The control that consumed the current gesture keeps it until it lets go (DrawnUi Canvas.HadInput). Without this a
+     * gesture is re-routed by the pointer position on every event, so anything the finger drags away from — a drag
+     * handle, a slider thumb, a button being held — stops receiving Panning the moment the pointer leaves its box.
+     * Single pointer, which is what the web gives us here; C# keeps a set for multi-touch.
+     */
+    private gestureOwner;
+    /** DrawnUi IsSavedGesture: the types replayed to the owner instead of being routed again. */
+    private static IsSavedGesture;
     /** Entry into the control tree, same shape as DrawnUi Canvas.ProcessGestures. */
     protected ProcessGestures(root: SkiaControl, args: SkiaGesturesParameters): SkiaControl | null;
 }

package/dist/core/Canvas.js

@@ -1,7 +1,7 @@
 import { Super } from "./Super";
 import { SkiaAccessibilityManager } from "./Accessibility";
 import { Colors, SKRect } from "./Types";
-import { ContextMenuEventArgs, GestureEventProcessingInfo, SKPoint, SkiaGesturesParameters, TouchActionEventArgs, } from "./Gestures";
+import { ContextMenuEventArgs, GestureEventProcessingInfo, PointerData, SKPoint, SkiaGesturesParameters, TouchActionEventArgs, } from "./Gestures";
 /**
  * Mirrors DrawnUi Canvas (DrawnView): hosts one Content control on an HTML canvas element,
  * owns RenderingScale (devicePixelRatio), the surface, the on-demand frame loop and raw input.
@@ -260,17 +260,13 @@ export class Canvas {
                     e.type === "pointercancel" ? "Cancelled" : undefined;
         if (!type)
             return;
-        // only the primary mouse button is a touch (DrawnUi.Blazor): right / middle buttons never start a gesture, and
-        // their Up / Cancel (pointer never pressed here) is ignored too, so a right click cannot end as a Tapped
-        if (type === "Pressed" && e.pointerType === "mouse" && e.button !== 0)
-            return;
         if (type === "Moved" && !this.activeTouchIds.has(e.pointerId)) {
             if (e.pointerType === "mouse")
                 this.UpdateCursor(e.offsetX, e.offsetY);
             return;
         } // hover not ported (TouchActionResult.Pointer)
         if ((type === "Released" || type === "Cancelled") && !this.activeTouchIds.has(e.pointerId))
-            return;
+            return; // Up of a pointer that never pressed here
         // Capture so Up outside the element still arrives; throws for synthetic events (tests) — harmless.
         if (type === "Pressed") {
             try {
@@ -284,6 +280,14 @@ export class Canvas {
         args.Type = type;
         args.Scale = this.RenderingScale;
         args.Location = new SKPoint((e.clientX - rect.left) * this.RenderingScale, (e.clientY - rect.top) * this.RenderingScale);
+        // every mouse button is delivered with its PointerData (AppoMobi.Gestures): a right click is a Down / Up / Tapped
+        // with Button "Right" for games and custom controls, and a ContextMenu on top
+        const pd = new PointerData();
+        pd.Button = e.button === 0 ? "Left" : e.button === 1 ? "Middle" : e.button === 2 ? "Right" : e.button === 3 ? "XButton1" : e.button === 4 ? "XButton2" : "Extended";
+        pd.ButtonNumber = e.button === 1 ? 3 : e.button === 2 ? 2 : e.button + 1;
+        pd.DeviceType = e.pointerType === "touch" ? "Touch" : e.pointerType === "pen" ? "Pen" : "Mouse";
+        pd.PressedButtons = e.buttons;
+        args.Pointer = pd;
         this.OnTouchAction(args);
     };
     preventTouch = (e) => e.preventDefault();
@@ -418,8 +422,35 @@ export class Canvas {
         for (const args of batch)
             this.ProcessGestures(root, args);
     }
+    /**
+     * The control that consumed the current gesture keeps it until it lets go (DrawnUi Canvas.HadInput). Without this a
+     * gesture is re-routed by the pointer position on every event, so anything the finger drags away from — a drag
+     * handle, a slider thumb, a button being held — stops receiving Panning the moment the pointer leaves its box.
+     * Single pointer, which is what the web gives us here; C# keeps a set for multi-touch.
+     */
+    gestureOwner = null;
+    /** DrawnUi IsSavedGesture: the types replayed to the owner instead of being routed again. */
+    static IsSavedGesture(type) {
+        return type === "Panning" || type === "Wheel" || type === "Up";
+    }
     /** Entry into the control tree, same shape as DrawnUi Canvas.ProcessGestures. */
     ProcessGestures(root, args) {
-        return root.ProcessGestures(args, new GestureEventProcessingInfo(args.Event.Location, SKPoint.Empty, SKPoint.Empty, null));
+        const info = () => new GestureEventProcessingInfo(args.Event.Location, SKPoint.Empty, SKPoint.Empty, null);
+        if (args.Type === "Down")
+            this.gestureOwner = null;
+        else if (this.gestureOwner && Canvas.IsSavedGesture(args.Type)) {
+            const owner = this.gestureOwner;
+            const alive = !!owner.Superview && owner.IsVisible && !owner.InputTransparent;
+            const consumed = alive ? owner.OnSkiaGestureEvent(args, info()) : null;
+            if (consumed) {
+                // it still wants the gesture: nobody else sees this one (C# skips the tree pass for a saved gesture)
+                this.gestureOwner = args.Type === "Up" ? null : consumed;
+                return consumed;
+            }
+            this.gestureOwner = null; // it let go (a button whose press turned into a pan): route normally again
+        }
+        const consumed = root.ProcessGestures(args, info());
+        this.gestureOwner = consumed && args.Type !== "Up" ? consumed : null;
+        return consumed;
     }
 }

package/dist/core/Gestures.d.ts

@@ -21,9 +21,23 @@ export declare class DistanceInfo {
     Total: SKPoint;
     Velocity: SKPoint;
 }
+/** AppoMobi.Gestures MouseButton: which button pressed / released (DOM button 0..4). */
+export type MouseButton = "Left" | "Middle" | "Right" | "XButton1" | "XButton2" | "Extended";
+export type PointerDeviceType = "Mouse" | "Touch" | "Pen";
+/** AppoMobi.Gestures PointerData: the device and button behind a Down / Up / Tapped (every button is delivered). */
+export declare class PointerData {
+    Button: MouseButton;
+    /** 1 = Left, 2 = Right, 3 = Middle, 4+ = extended, like AppoMobi.Gestures. */
+    ButtonNumber: number;
+    DeviceType: PointerDeviceType;
+    /** DOM `buttons` bitmask of the buttons held (1 left, 2 right, 4 middle, 8 back, 16 forward). */
+    PressedButtons: number;
+}
 /** AppoMobi.Gestures TouchActionEventArgs. */
 export declare class TouchActionEventArgs {
     Id: number;
+    /** Device and button of this event (mouse, pen, touch); undefined for wheel. */
+    Pointer?: PointerData;
     Type: TouchActionType;
     /** Pixels. */
     Location: SKPoint;

package/dist/core/Gestures.js

@@ -18,9 +18,20 @@ export class DistanceInfo {
     Total = SKPoint.Empty;
     Velocity = SKPoint.Empty;
 }
+/** AppoMobi.Gestures PointerData: the device and button behind a Down / Up / Tapped (every button is delivered). */
+export class PointerData {
+    Button = "Left";
+    /** 1 = Left, 2 = Right, 3 = Middle, 4+ = extended, like AppoMobi.Gestures. */
+    ButtonNumber = 1;
+    DeviceType = "Mouse";
+    /** DOM `buttons` bitmask of the buttons held (1 left, 2 right, 4 middle, 8 back, 16 forward). */
+    PressedButtons = 0;
+}
 /** AppoMobi.Gestures TouchActionEventArgs. */
 export class TouchActionEventArgs {
     Id = 0;
+    /** Device and button of this event (mouse, pen, touch); undefined for wheel. */
+    Pointer;
     Type = "Pressed";
     /** Pixels. */
     Location = SKPoint.Empty;

package/dist/core/SkiaControl.d.ts

@@ -191,6 +191,13 @@ export declare class SkiaControl {
     ConsumeGestures?: (sender: SkiaControl, e: SkiaGesturesInfo) => void;
     Parent?: SkiaControl;
     /** Containers override; a leaf control cannot host children. */
+    private styledInitially;
+    /**
+     * C# ApplyInitialStyles: takes the property defaults registered with `ConfigureStyles` for this control's class.
+     * The reconciler calls it with `atConstruction` right after `new`, before the JSX props, so props win; a control
+     * built in code-behind is styled on its first measure and keeps whatever the code already set.
+     */
+    ApplyInitialStyles(atConstruction?: boolean): void;
     AddSubView(_control: SkiaControl): void;
     InsertSubView(_index: number, control: SkiaControl): void;
     RemoveSubView(_control: SkiaControl): void;

package/dist/core/SkiaControl.js

@@ -1,4 +1,5 @@
 import { Super } from "./Super";
+import { SkiaStyles } from "./Styles";
 import { Colors, SKRect, ScaledSize, Thickness } from "./Types";
 import { RippleAnimator, SkiaValueAnimator } from "./Animators";
 import { Easing } from "./Easing";
@@ -250,6 +251,17 @@ export class SkiaControl {
     // ---- tree ----
     Parent;
     /** Containers override; a leaf control cannot host children. */
+    styledInitially = false;
+    /**
+     * C# ApplyInitialStyles: takes the property defaults registered with `ConfigureStyles` for this control's class.
+     * The reconciler calls it with `atConstruction` right after `new`, before the JSX props, so props win; a control
+     * built in code-behind is styled on its first measure and keeps whatever the code already set.
+     */
+    ApplyInitialStyles(atConstruction = false) {
+        this.styledInitially = true;
+        if (!SkiaStyles.IsEmpty)
+            SkiaStyles.Apply(this, atConstruction);
+    }
     AddSubView(_control) { throw new Error(`DrawnUi: ${this.constructor.name} cannot host children`); }
     InsertSubView(_index, control) { this.AddSubView(control); }
     RemoveSubView(_control) { }
@@ -271,6 +283,8 @@ export class SkiaControl {
      * this is what keeps a cached tree from re-measuring text every frame.
      */
     Measure(widthConstraint, heightConstraint, scale) {
+        if (!this.styledInitially)
+            this.ApplyInitialStyles(false);
         if (!this.NeedMeasure && this.RenderingScale === scale
             && Object.is(this.lastWidthConstraint, widthConstraint) && Object.is(this.lastHeightConstraint, heightConstraint)) {
             return this.MeasuredSize;

package/dist/core/Styles.d.ts

@@ -0,0 +1,51 @@
+import type { SkiaControl } from "./SkiaControl";
+/**
+ * Mirrors DrawnUi.Net `Style` (SharedNet/Internals/Core/Style.cs): a set of property defaults for one control type,
+ * registered once at startup through `Super.UseDrawnUi().ConfigureStyles(...)`.
+ *
+ * The C# `Setters` list of `Setter { Property, Value }` becomes a plain object here, because React controls are
+ * classes with plain properties instead of BindableProperty: `Setters: { FontFamily: "FontText", FontSize: 14 }`.
+ */
+export interface Style {
+    /** The control class the style targets, e.g. `SkiaLabel`. */
+    TargetType: Function;
+    /** Also style classes deriving from TargetType (C# Style.ApplyToDerivedTypes). Default false. */
+    ApplyToDerivedTypes?: boolean;
+    /** Property defaults, by property name. Anything the app sets itself wins over these. */
+    Setters: Record<string, unknown>;
+}
+/** Mirrors DrawnUi.Net `IStylesCollection` / `StylesCollection`: the startup registry, static like the C# one. */
+export declare class StylesCollection {
+    /** Every style registered through ConfigureStyles, in registration order (C# StylesCollection.Styles). */
+    static readonly Styles: Style[];
+    AddStyle(style: Style): StylesCollection;
+}
+/**
+ * Applies registered styles to controls. Port of the C# `SkiaControl` styles partial
+ * (SharedNet/Draw/SkiaControl.NetShared.cs) with one difference forced by the language: C# knows which properties the
+ * app set explicitly (BindableProperty + ExplicitPropertiesSet) and skips those; here a property counts as "not set by
+ * the app" while it still equals the value the control's own constructor left, captured once per class.
+ */
+export declare class SkiaStyles {
+    private static readonly resolved;
+    private static readonly defaults;
+    /** True while no style is registered: lets Measure skip the whole feature at zero cost. */
+    static get IsEmpty(): boolean;
+    /** C# InvalidateStylesCache: drop the per-type resolution after the registry changed. */
+    static InvalidateStylesCache(): void;
+    /**
+     * Setters that apply to a control class: the exact-type style plus every ApplyToDerivedTypes style of a base class,
+     * furthest base first so a nearer style overrides it, exact type last (C# sorts by inheritance distance).
+     */
+    private static For;
+    /** The values a freshly constructed control of this class carries, for the properties a style touches. */
+    private static SnapshotDefaults;
+    /**
+     * C# ApplyInitialStyles: applies the registered defaults to one control. `atConstruction` is true when nothing has
+     * touched the control yet (the reconciler calls it between `new` and the JSX props), so every setter applies and the
+     * pre-style values are kept as this class's defaults; a control styled later only gets the properties that still
+     * hold those defaults, which is how an explicit assignment wins — the C# ExplicitPropertiesSet rule without
+     * property accessors.
+     */
+    static Apply(control: SkiaControl, atConstruction: boolean): void;
+}

package/dist/core/Styles.js

@@ -0,0 +1,92 @@
+/** Mirrors DrawnUi.Net `IStylesCollection` / `StylesCollection`: the startup registry, static like the C# one. */
+export class StylesCollection {
+    /** Every style registered through ConfigureStyles, in registration order (C# StylesCollection.Styles). */
+    static Styles = [];
+    AddStyle(style) {
+        StylesCollection.Styles.push(style);
+        SkiaStyles.InvalidateStylesCache();
+        return this;
+    }
+}
+/**
+ * Applies registered styles to controls. Port of the C# `SkiaControl` styles partial
+ * (SharedNet/Draw/SkiaControl.NetShared.cs) with one difference forced by the language: C# knows which properties the
+ * app set explicitly (BindableProperty + ExplicitPropertiesSet) and skips those; here a property counts as "not set by
+ * the app" while it still equals the value the control's own constructor left, captured once per class.
+ */
+export class SkiaStyles {
+    static resolved = new Map();
+    static defaults = new Map();
+    /** True while no style is registered: lets Measure skip the whole feature at zero cost. */
+    static get IsEmpty() { return StylesCollection.Styles.length === 0; }
+    /** C# InvalidateStylesCache: drop the per-type resolution after the registry changed. */
+    static InvalidateStylesCache() { SkiaStyles.resolved.clear(); SkiaStyles.defaults.clear(); }
+    /**
+     * Setters that apply to a control class: the exact-type style plus every ApplyToDerivedTypes style of a base class,
+     * furthest base first so a nearer style overrides it, exact type last (C# sorts by inheritance distance).
+     */
+    static For(type) {
+        let hit = SkiaStyles.resolved.get(type);
+        if (hit)
+            return hit;
+        const inherited = [];
+        let exact;
+        for (const style of StylesCollection.Styles) {
+            if (style.TargetType === type) {
+                exact = style;
+                continue;
+            }
+            if (!style.ApplyToDerivedTypes)
+                continue;
+            let distance = 0;
+            for (let base = Object.getPrototypeOf(type); base; base = Object.getPrototypeOf(base)) {
+                distance++;
+                if (base === style.TargetType) {
+                    inherited.push({ Distance: distance, Style: style });
+                    break;
+                }
+            }
+        }
+        inherited.sort((a, b) => b.Distance - a.Distance);
+        const setters = {};
+        for (const i of inherited)
+            Object.assign(setters, i.Style.Setters);
+        if (exact)
+            Object.assign(setters, exact.Setters);
+        hit = { Setters: setters, Empty: Object.keys(setters).length === 0 };
+        SkiaStyles.resolved.set(type, hit);
+        return hit;
+    }
+    /** The values a freshly constructed control of this class carries, for the properties a style touches. */
+    static SnapshotDefaults(type, sample, keys) {
+        if (SkiaStyles.defaults.has(type))
+            return;
+        const known = {};
+        for (const key of keys)
+            known[key] = sample[key];
+        SkiaStyles.defaults.set(type, known);
+    }
+    /**
+     * C# ApplyInitialStyles: applies the registered defaults to one control. `atConstruction` is true when nothing has
+     * touched the control yet (the reconciler calls it between `new` and the JSX props), so every setter applies and the
+     * pre-style values are kept as this class's defaults; a control styled later only gets the properties that still
+     * hold those defaults, which is how an explicit assignment wins — the C# ExplicitPropertiesSet rule without
+     * property accessors.
+     */
+    static Apply(control, atConstruction) {
+        const type = control.constructor;
+        const resolved = SkiaStyles.For(type);
+        if (resolved.Empty)
+            return;
+        const keys = Object.keys(resolved.Setters);
+        const target = control;
+        if (atConstruction)
+            SkiaStyles.SnapshotDefaults(type, control, keys);
+        const defaults = atConstruction ? undefined : SkiaStyles.defaults.get(type);
+        for (const key of keys) {
+            // no snapshot for this class (nothing of it ever went through the reconciler): apply as a plain default
+            if (!defaults || Object.is(target[key], defaults[key]))
+                target[key] = resolved.Setters[key];
+        }
+    }
+}

package/dist/core/Super.d.ts

@@ -1,4 +1,5 @@
 import { Thickness } from "./Types";
+import { StylesCollection } from "./Styles";
 import type { CanvasKit, Font, Typeface } from "canvaskit-wasm";
 /** Mirrors DrawnUi.Net IFontCollection: fonts.AddFont(source, alias[, weight]), plus the Blazor-head AddSymbols/AddEmojis. */
 export declare class FontCollection {
@@ -16,10 +17,16 @@ export declare class FontCollection {
     /** Registers a face under an alias; weight 100..900 lets FontWeight / FontAttributes=Bold pick the right file. */
     AddFont(source: string, alias: string, weight?: number): FontCollection;
 }
-/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).BuildAsync(). */
+/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).ConfigureStyles(...).BuildAsync(). */
 export declare class DrawnUiBuilder {
     private readonly fonts;
     ConfigureFonts(configure: (fonts: FontCollection) => void): DrawnUiBuilder;
+    /**
+     * Mirrors DrawnUi.Net ConfigureStyles: property defaults per control type, applied to every control unless the app
+     * sets that property itself. The usual one, same as the .NET Blazor / Fiddle hosts:
+     * `styles.AddStyle({ TargetType: SkiaLabel, ApplyToDerivedTypes: true, Setters: { FontFamily: "FontText" } })`.
+     */
+    ConfigureStyles(configure: (styles: StylesCollection) => void): DrawnUiBuilder;
     /** Loads CanvasKit + registered fonts. Must complete before the first Canvas is created. */
     BuildAsync(): Promise<void>;
 }
@@ -39,6 +46,8 @@ export declare class Super {
     static readonly Fonts: Map<string, Map<number, Typeface>>;
     /** First registered font, or CanvasKit's built-in one. */
     static DefaultTypeface?: Typeface;
+    /** CanvasKit's built-in face: what an empty FontFamily resolves to, like C# SKTypeface.CreateDefault(). */
+    static SkiaDefaultTypeface?: Typeface;
     private static readonly fontCache;
     static UseDrawnUi(): DrawnUiBuilder;
     /** Master switch: false makes every control render uncached (DrawnUi Super.CacheEnabled). */

package/dist/core/Super.js

@@ -1,4 +1,5 @@
 import { Thickness } from "./Types";
+import { StylesCollection } from "./Styles";
 // the "full" build: same API plus Skottie (SkiaLottie) and the paragraph module; +0.9 MB raw over the default build
 import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit.js";
 import wasmUrl from "canvaskit-wasm/bin/full/canvaskit.wasm?url";
@@ -22,13 +23,22 @@ export class FontCollection {
         return this;
     }
 }
-/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).BuildAsync(). */
+/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).ConfigureStyles(...).BuildAsync(). */
 export class DrawnUiBuilder {
     fonts = new FontCollection();
     ConfigureFonts(configure) {
         configure(this.fonts);
         return this;
     }
+    /**
+     * Mirrors DrawnUi.Net ConfigureStyles: property defaults per control type, applied to every control unless the app
+     * sets that property itself. The usual one, same as the .NET Blazor / Fiddle hosts:
+     * `styles.AddStyle({ TargetType: SkiaLabel, ApplyToDerivedTypes: true, Setters: { FontFamily: "FontText" } })`.
+     */
+    ConfigureStyles(configure) {
+        configure(new StylesCollection());
+        return this;
+    }
     /** Loads CanvasKit + registered fonts. Must complete before the first Canvas is created. */
     async BuildAsync() {
         Super.CK = await CanvasKitInit({ locateFile: () => wasmUrl });
@@ -61,7 +71,8 @@ export class DrawnUiBuilder {
             if (!Super.DefaultFontAlias)
                 Super.DefaultFontAlias = f.Alias;
         }
-        Super.DefaultTypeface ??= Super.CK.Typeface.GetDefault() ?? undefined;
+        Super.SkiaDefaultTypeface ??= Super.CK.Typeface.GetDefault() ?? undefined;
+        Super.DefaultTypeface ??= Super.SkiaDefaultTypeface;
     }
 }
 /** Mirrors DrawnUi static Super: global engine state. */
@@ -105,6 +116,8 @@ export class Super {
     static Fonts = new Map();
     /** First registered font, or CanvasKit's built-in one. */
     static DefaultTypeface;
+    /** CanvasKit's built-in face: what an empty FontFamily resolves to, like C# SKTypeface.CreateDefault(). */
+    static SkiaDefaultTypeface;
     static fontCache = new Map();
     static UseDrawnUi() { return new DrawnUiBuilder(); }
     /** Master switch: false makes every control render uncached (DrawnUi Super.CacheEnabled). */
@@ -145,7 +158,11 @@ export class Super {
     }
     /** Nearest registered weight of the alias (empty alias = the first registered family); reports the weight actually used. */
     static ResolveTypeface(alias, weight) {
-        const weights = Super.Fonts.get(alias || Super.DefaultFontAlias);
+        // No family: the Skia built-in face, like C# SkiaFontManager.GetFont("") -> SKTypeface.CreateDefault(). An app that
+        // wants its own font everywhere registers it as a style default (ConfigureStyles), exactly as the .NET hosts do.
+        if (!alias)
+            return { Typeface: Super.SkiaDefaultTypeface ?? Super.DefaultTypeface ?? null, Weight: 400 };
+        const weights = Super.Fonts.get(alias);
         const target = weight > 0 ? weight : 400;
         if (weights && weights.size > 0) {
             if (weights.has(target))

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./core/Types";
 export * from "./core/Gestures";
+export * from "./core/Styles";
 export * from "./core/Easing";
 export * from "./core/Animators";
 export * from "./core/ScrollAnimators";

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from "./core/Types";
 export * from "./core/Gestures";
+export * from "./core/Styles";
 export * from "./core/Easing";
 export * from "./core/Animators";
 export * from "./core/ScrollAnimators";

package/dist/react/reconciler.js

@@ -85,6 +85,8 @@ const hostConfig = {
         if (!ctor)
             throw new Error(`DrawnUi: unknown control <${type}>`);
         const inst = new ctor();
+        // ConfigureStyles defaults first, the JSX props below override them (a TextSpan is not a control, it has none)
+        inst.ApplyInitialStyles?.(true);
         applyProps(inst, null, props);
         return inst;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.2",
+  "version": "0.1.0-preview.4",
   "description": "DrawnUi for React: the DrawnUi (.NET) drawn-UI engine in TypeScript on CanvasKit (Skia WASM). Same controls, same PascalCase API as DrawnUi.Net.",
   "license": "MIT",
   "author": "Nick Kovalsky (AppoMobi)",
@@ -65,8 +65,12 @@
     "vite": ">=5"
   },
   "peerDependenciesMeta": {
-    "playwright-core": { "optional": true },
-    "vite": { "optional": true }
+    "playwright-core": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
   },
   "dependencies": {
     "canvaskit-wasm": "^0.42.0",