drawnui-react 0.1.0-preview.1 → 0.1.0-preview.3

package/README.md

@@ -1,10 +1,12 @@
 # DrawnUi.React
 
-Prototype of the [DrawnUi](https://drawnui.net) engine rewritten in TypeScript on top of
+[DrawnUi](https://drawnui.net) engine ptototype for React, TypeScript on top of
 [CanvasKit](https://skia.org/docs/user/modules/canvaskit/) (Skia for the browser), composed with React
 through a custom `react-reconciler` renderer.
 
-Goal: the same API surface and semantics as DrawnUi (.NET) — same control names, same PascalCase
+Check out latest playbook: [helloreact.drawnui.net](https://helloreact.drawnui.net/) 👈
+
+*Work in progress*: the goal is same API surface and semantics as DrawnUi (.NET) — same control names, same PascalCase
 property names, same measure/arrange/paint contract — so knowledge and docs transfer 1:1.
 
 ```tsx
@@ -20,17 +22,31 @@ await Super.UseDrawnUi()
 </Canvas>
 ```
 
-## Layout
+## Install
+
+```
+npm i drawnui-react@preview react react-dom
+```
 
-- `src/` — the library, imported by samples as `drawnui-react` (React tags + all engine types) or `drawnui-react/core` (engine only).
-  - `src/core` — `Super` (startup, CanvasKit, fonts), `SkiaControl` (measure/arrange/render/gestures), `Canvas` (host, surface, frame loop, input), animators, value types.
-  - `src/controls` — `SkiaLayout` (+ `SkiaStack`/`SkiaRow`/`SkiaLayer`), `SkiaLabel`, `SkiaHotspot`, `SkiaButton`.
-  - `src/react` — reconciler host config + typed JSX tags + `<Canvas>` bridge component.
-- `samples/demo/` — the deployed demo: root menu + pages (`pages/ImagesPage.tsx`, `SvgPage.tsx`, `CellsPage.tsx` with `ContactCell.ts`) navigated by the React-level `SkiaShell`.
-- `samples/<name>/` — one folder per sample: `index.html`, `main.tsx`, two-line `vite.config.ts` (`defineSample`). Shared assets (fonts) in `samples/public`.
-- `dev/build-samples.mjs` — builds every sample into `dist/<name>/` + a `dist/index.html` list; used by the Pages workflow.
+`drawnui-react` = React tags + every engine type, `drawnui-react/core` = the engine only. Ships ES modules + `.d.ts`;
+CanvasKit's `.wasm` is referenced with a `?url` import, so use Vite (or any bundler that understands `?url`) and
+put your fonts under `public/fonts`. Preview releases carry the `preview` dist-tag (the first publish also became `latest`, as npm always does).
 
-What is intentionally missing: see [SKIPPED.md](SKIPPED.md).
+## Run
+
+```
+npm install
+npm run dev              # samples/demo at http://localhost:5173
+npx vite samples/<name>  # any other sample
+npm run build            # typecheck + build all samples into dist/<name>/
+```
+
+## Skills for AI agents
+
+`skills/drawnui-react/SKILL.md` teaches an agent this library (install, startup, composition rules, scroll / shell
+extras, caching, effects, accessibility). Save it under `~/.claude/skills/drawnui-react/SKILL.md` or fetch it from
+the demo site: https://helloreact.drawnui.net/skills/drawnui-react/SKILL.md — `llms.txt` / `llms-full.txt` at the
+site root point to it. Pair it with the DrawnUI framework skill from https://drawnui.net/llms.txt.
 
 ## Where React ends and DrawnUi begins
 
@@ -49,6 +65,25 @@ accessibility all live in the engine and would work identically under Vue, Svelt
 That is also why the demo pages describe DrawnUi features, not React ones: the same pages are meant to be reused as
 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…"). 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 */} />
+```
+
+The request is routed like a tap: deepest visible control under the point first (through transforms), then its
+parents, then the `Canvas` prop. The first handler returning `true` takes it and the browser menu is suppressed;
+with no handler the browser menu shows as before. `e` carries `Location` (points on the canvas), `Pixels`, `Local`
+(pixels inside the handling control), `Source` (`"mouse"`, `"touch"` for a long press, `"keyboard"` for the Menu
+key) and `Native` (the DOM event, for modifiers). Web-only: DrawnUi.Net has no mouse buttons.
+
 ## Accessibility
 
 Same model as DrawnUi.Blazor: the `<canvas>` is `aria-hidden`, an invisible DOM overlay mirrors every
@@ -68,25 +103,48 @@ label readable and every button focusable without touching each control.
 The overlay has `pointer-events: none`, so hover and all pointer gestures still reach the canvas — the
 Blazor "accessible control loses hover" limitation does not apply.
 
-## Run
+Text selection (React extension, opt-in): `AccessibilityTextSelectable` on a `SkiaLabel` renders its laid-out lines
+as real, invisible DOM text in the overlay — one span per drawn line, in the same font (registered fonts are also
+installed as CSS `FontFace`s) and stretched to the drawn line width — with pointer events on. The browser then
+selects, copies (Ctrl+C / context menu) and reads it like an HTML paragraph, and the wheel over it still scrolls the
+drawn content. It is off by default and must stay off on anything gesture-driven (buttons, carousels, drawers): the
+selectable text owns the pointer, so taps and pans under it never reach the drawn control. Everything else in the
+overlay is `user-select: none`, so select-all only highlights opted-in text.
 
-```
-npm install
-npm run dev              # samples/demo at http://localhost:5173
-npx vite samples/<name>  # any other sample
-npm run build            # typecheck + build all samples into dist/<name>/
-```
+## Crawlers and AI agents: static HTML from the accessibility tree
 
-## Publishing
+A drawn app serves `<div id="root"></div>`; a crawler that does not run JavaScript sees nothing. The
+`drawnUiStatic` Vite plugin fixes that at build time, from the app itself:
 
-Every push to `master` runs `.github/workflows/deploy.yml`: build `samples/demo`, deploy `dist/demo`
-to the Cloudflare Pages project `helloreact-drawnui` → **https://helloreact.drawnui.net**.
-
-Repository secrets used by the workflow:
-
-| Secret | What it is | Where to get it |
-|---|---|---|
-| `CLOUDFLARE_API_TOKEN` | Cloudflare API token with **Account → Cloudflare Pages → Edit** (deploy needs nothing else). | dash.cloudflare.com → My Profile → API Tokens → Create Token → "Edit Cloudflare Workers" template or custom with the Pages permission; copy the value once. Set with `gh secret set CLOUDFLARE_API_TOKEN --repo DrawnUi/DrawnUi.React` (paste the value on stdin). |
-| `CLOUDFLARE_ACCOUNT_ID` | The Cloudflare account that owns the Pages project. | dash.cloudflare.com → any zone → Overview → right column "Account ID", or `npx wrangler whoami`. `gh secret set CLOUDFLARE_ACCOUNT_ID --repo DrawnUi/DrawnUi.React`. |
+```ts
+// vite.config.ts
+import { drawnUiStatic } from "drawnui-react/vite";
+export default defineConfig({ plugins: [react(), drawnUiStatic()] });
+```
 
-Adding another published sample = one more `wrangler pages deploy dist/<name> --project-name <project>` step and a Pages project + custom domain for it.
+After `vite build` it serves the build, opens it in headless Chrome (`playwright-core`, your dev dependency; GitHub's
+ubuntu runners ship a Chrome), lets the engine draw, reads the accessibility snapshot of the root page and of every
+page a root button opens (or the `routes` you list), and writes ordinary visible HTML into `dist/index.html`: a
+heading is a heading, a button is a link to the page it opened, a label is a paragraph. The overlay's own markup
+(transparent text over the canvas) is never copied — in a static file it would read as hidden text. Nothing is
+hand-written, so it cannot drift from what the canvas draws.
+
+Where it lands: right after the mount element (`#root`), or wherever you put `<!-- drawnui-static -->` in
+`index.html`. With the mount element filling the viewport that is below the fold: a visitor sees the app area
+loading, the text is a scroll away, genuinely visible, nothing collapsed or hidden. The first `<Canvas>` that mounts
+removes it once its engine has drawn frame 1 (one `querySelectorAll`, nothing in the frame loop, nothing to pay for
+an app built without the plugin). If the app never boots it stays. The mount element keeps its size, so nothing
+above the fold moves; a page that scrolled only because of the block loses its scrollbar (classic scrollbars give
+the canvas those ~15 px back — `html { scrollbar-gutter: stable }` keeps the gutter if you prefer). If the mount
+element is a box inside a longer page, put the marker at the end of the body so your own content does not move.
+Look: a default stylesheet ships with the block (inherits your `body` font and color, translucent surfaces); override
+by styling `.drawnui-static` or pass `render: { style: false }`.
+
+Two things to know. Check it with `curl` or view-source, not DevTools after boot. And crawlers that do not run
+JavaScript (GPTBot, ClaudeBot, CCBot, link previews) read this HTML, while Googlebot renders JavaScript and sees the
+booted page, i.e. the accessibility overlay; both come from the same tree, and a control without an
+`AccessibilityRole` is invisible to both.
+
+## Development
+
+Repo layout, build scripts, skill sync and how the demo / npm package are published: [dev/DEVELOPMENT.md](dev/DEVELOPMENT.md).

package/SKIPPED.md

@@ -7,10 +7,10 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 
 | Area | Status | Notes |
 |---|---|---|
-| `UseCache` | partial | `None`, `Operations` (SkPicture replay), `Image` (offscreen surface snapshot, GPU-backed on WebGL, nearest-sampled blit). `ImageDoubleBuffered` keeps `RenderObjectPrevious` and draws it when a new cache cannot be produced yet, `DrawPlaceholder(ctx)` hook when nothing exists (recording itself is synchronous — no background thread, same as DrawnUi.Blazor with `CanUseCacheDoubleBuffering = false`). `GPU`, `ImageComposite`, `ImageCompositeGPU` accepted but resolve to `Image` (no per-child composite, no dedicated GPU 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`, `RenderObjectPrevious` fallback, offscreen bake threads, `DrawPlaceholder`, cache validity by GRContext. |
+| `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. |
-| Gestures: `LongPressing`, `Pointer` (hover), multi-touch pinch, velocity, `SoftLock`, `AddGestures` attached props, `OnGestures` delegate, transform-aware mapping (`HasTransform`, cache offsets `TranslateInputCoords`) | skipped | Enum members exist for parity, never produced. `ChildOffset` is always zero (no caches/transforms yet). |
+| 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. 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`. |
 | `Left` / `Top` | ported (as a translate) | Same paint-time offset in points, but folded into the render matrix (a `canvas.translate`, hit-testing follows) for every control, cached or not; C# applies them only when blitting a cache. |
@@ -29,8 +29,8 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | `HorizontalFillRatio`/`VerticalFillRatio` | ported | Applied at arrange like C# `DefineAvailableSize` (the Fill box is scaled, alignment stays inside the full box); measure is not affected (C# passes `useModifiers=false` there too). |
 | `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. |
-| Styles / `ConfigureStyles` | skipped | |
+| `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` | 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 | |
@@ -48,9 +48,11 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 |---|---|---|
 | `RenderingMode` | partial | `Accelerated` (WebGL) with automatic fallback to software; read once at first surface creation. |
 | `Gestures` param | ported | Enabled applies `touch-action:none; user-select:none`; Lock also blocks `touchmove` default. |
+| Mouse cursor over interactive controls (Blazor `Canvas.razor` `.xaml-a11y-interactive { cursor: pointer }`) | ported (differently) | The overlay here is `pointer-events: none`, so `Canvas.UpdateCursor` hit-tests mouse moves with no active pointer against the accessibility snapshot rects (`CanInteract` = has `Tapped`, buttons, links) and asks each hit control `WantsPointerCursor(x, y)` (default `AccessibilityCanInteract`; `SkiaLabel` also answers for its tappable `TextSpan`s), setting the canvas element's `cursor` only when the answer changes. Touch pointers do nothing. Engine hover (`IsHovered` / `OnHover`, `TouchActionResult.Pointer`) stays skipped, see Gestures. |
+| `ContextMenu` (right click / long press / Menu key, React extension) | ported (web-only) | `SkiaControl.ContextMenu` / `Canvas.ContextMenu` handlers with `ContextMenuEventArgs` (`Location` points, `Pixels`, `Local` px in the control, `Source`, `Native`); the DOM `contextmenu` event is routed like a tap (`ProcessContextMenu`: visible non-transparent children top-most first through `TransformPointToLocalSpace`, then the control, then the canvas). `true` = handled, browser menu suppressed; nothing handled = browser menu. Not in DrawnUi.Net. |
 | Keyboard, focus (`FocusedChild`) | skipped | |
-| FPS / rendering stats (`Super.EnableRenderingStats`, `SkiaLabelFps`) | skipped | |
-| Insets / safe areas | skipped | N/A in browser for now. |
+| Rendering stats | partial | `Canvas.FPS` (frames drawn over the last second) and `Canvas.FrameTime` (ms of the last measure + arrange + render, GPU flush excluded) are computed every frame and reachable from React through the `<Canvas>` ref. Not ported: the `SkiaLabelFps` control, `Super.EnableRenderingStats`. |
+| Insets / safe areas | ported | `Super.Insets` measures `env(safe-area-inset-*)` off a probe element (once, and again on resize / orientation), `Super.OnInsetsChanged` notifies; `SkiaShell` pads its nav and tab bars with them. Not ported: the C# per-page `IgnoreSafeArea` / MAUI inset plumbing. |
 
 ## Controls
 
@@ -90,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
 
@@ -99,9 +101,10 @@ 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. |
 | React context bridging across the `<Canvas>` boundary | skipped | Contexts from the DOM tree are not visible inside the drawn tree. |
 | Refs to engine controls from JSX | skipped | `getPublicInstance` returns the control, `ref` not wired/typed. |
 | Fluent code-behind API (`.Assign`, `.OnTapped`, `.ObserveProperty`) | skipped | Engine classes are plain TS classes; React is the composition layer. |

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/SkiaLabel.d.ts

@@ -155,6 +155,8 @@ export declare class SkiaLabel extends SkiaControl {
     protected FillGradientPaintsBackground(): boolean;
     protected Paint(ctx: DrawingContext): void;
     ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
+    /** Pointer cursor over a tappable span (the label itself may not be tappable). */
+    WantsPointerCursor(x: number, y: number): boolean;
     /** Return null to not consume the tap. */
     protected OnSpanTapped(span: TextSpan, args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
 }

package/dist/controls/SkiaLabel.js

@@ -572,6 +572,15 @@ export class SkiaLabel extends SkiaControl {
         }
         return super.ProcessGestures(args, apply);
     }
+    /** Pointer cursor over a tappable span (the label itself may not be tappable). */
+    WantsPointerCursor(x, y) {
+        if (super.WantsPointerCursor(x, y))
+            return true;
+        for (const span of this.Spans)
+            if (span.HasTapHandler && span.HitIsInside(x, y))
+                return true;
+        return false;
+    }
     /** Return null to not consume the tap. */
     OnSpanTapped(span, args, apply) {
         span.FireTap(new ControlTappedEventArgs(this, args, apply));

package/dist/core/Canvas.d.ts

@@ -3,7 +3,7 @@ import type { SkiaControl } from "./SkiaControl";
 import type { AnimatorBase } from "./Animators";
 import { SkiaAccessibilityManager } from "./Accessibility";
 import { type Color, type RenderingModeType } from "./Types";
-import { type GesturesMode, SkiaGesturesParameters, TouchActionEventArgs } from "./Gestures";
+import { ContextMenuEventArgs, type GesturesMode, 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.
@@ -66,6 +66,18 @@ export declare class Canvas {
     FrameIndex: number;
     /** On-screen surface (SkiaBackdrop snapshots it). */
     get Surface(): Surface | undefined;
+    /**
+     * A picture of what is on screen right now, as PNG bytes (C# DrawnView.TakeScreenShot).
+     *
+     * The on-screen canvas cannot simply be read: an accelerated surface lives in a WebGL drawing
+     * buffer the browser clears after compositing, so both `canvas.toDataURL()` and a snapshot of
+     * the live surface come back blank. The content is therefore drawn once more into an offscreen
+     * RASTER surface, which can be read back anywhere.
+     *
+     * This is a still picture, not a frame of the loop: animators are not ticked and the frame
+     * counters do not move, so taking one never changes what the next real frame shows.
+     */
+    TakeScreenShot(): Uint8Array | null;
     Dispose(): void;
     private gestures;
     get Gestures(): GesturesMode;
@@ -76,6 +88,19 @@ export declare class Canvas {
     private readonly pendingGestures;
     private readonly onPointer;
     private readonly preventTouch;
+    /** Called when no control handled a context-menu request; return true to suppress the browser's canvas menu. */
+    ContextMenu?: (sender: Canvas, e: ContextMenuEventArgs) => boolean | void;
+    /** DOM contextmenu (right click / long press / Menu key) -> ContextMenuEventArgs routed through the tree like a tap. */
+    private readonly onContextMenu;
+    private cursorPointer;
+    /**
+     * DrawnUi.Blazor shows `cursor: pointer` over interactive controls through its overlay elements; here the overlay
+     * is pointer-events:none, so the mouse position is tested against the accessibility snapshot (the accessible
+     * controls' rects in points, already sorted and rate-limited), each hit control answering WantsPointerCursor
+     * (itself tappable, or a tappable span of a label), and the canvas element's cursor is switched only when the
+     * answer changes. Mouse moves only, no work without a mouse and none in the frame loop.
+     */
+    private UpdateCursor;
     /** Mouse wheel -> TouchActionResult.Wheel (page scroll suppressed while gestures are enabled). */
     private readonly onWheel;
     private AttachInput;

package/dist/core/Canvas.js

@@ -1,7 +1,7 @@
 import { Super } from "./Super";
 import { SkiaAccessibilityManager } from "./Accessibility";
 import { Colors, SKRect } from "./Types";
-import { 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.
@@ -179,6 +179,50 @@ export class Canvas {
     FrameIndex = 0;
     /** On-screen surface (SkiaBackdrop snapshots it). */
     get Surface() { return this.surface; }
+    /**
+     * A picture of what is on screen right now, as PNG bytes (C# DrawnView.TakeScreenShot).
+     *
+     * The on-screen canvas cannot simply be read: an accelerated surface lives in a WebGL drawing
+     * buffer the browser clears after compositing, so both `canvas.toDataURL()` and a snapshot of
+     * the live surface come back blank. The content is therefore drawn once more into an offscreen
+     * RASTER surface, which can be read back anywhere.
+     *
+     * This is a still picture, not a frame of the loop: animators are not ticked and the frame
+     * counters do not move, so taking one never changes what the next real frame shows.
+     */
+    TakeScreenShot() {
+        const CK = Super.CK;
+        const w = this.Element.width, h = this.Element.height;
+        if (!CK || !w || !h)
+            return null;
+        const surface = CK.MakeSurface(w, h);
+        if (!surface)
+            return null;
+        try {
+            const canvas = surface.getCanvas();
+            canvas.clear(Super.ParseColor(this.BackgroundColor));
+            const root = this.content;
+            if (root) {
+                const scale = this.RenderingScale;
+                root.Measure(w, h, scale);
+                root.Arrange(new SKRect(0, 0, w, h), root.WidthRequest, root.HeightRequest, scale);
+                root.Render({ Context: { Canvas: canvas, Surface: surface }, Destination: new SKRect(0, 0, w, h), Scale: scale });
+            }
+            surface.flush();
+            const image = surface.makeImageSnapshot();
+            if (!image)
+                return null;
+            try {
+                return image.encodeToBytes();
+            }
+            finally {
+                image.delete();
+            }
+        }
+        finally {
+            surface.delete();
+        }
+    }
     Dispose() {
         this.disposed = true;
         this.Gestures = "Disabled";
@@ -216,8 +260,13 @@ export class Canvas {
                     e.type === "pointercancel" ? "Cancelled" : undefined;
         if (!type)
             return;
-        if (type === "Moved" && !this.activeTouchIds.has(e.pointerId))
-            return; // hover not ported (TouchActionResult.Pointer)
+        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; // 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 {
@@ -231,9 +280,59 @@ 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();
+    /** Called when no control handled a context-menu request; return true to suppress the browser's canvas menu. */
+    ContextMenu;
+    /** DOM contextmenu (right click / long press / Menu key) -> ContextMenuEventArgs routed through the tree like a tap. */
+    onContextMenu = (e) => {
+        const rect = this.Element.getBoundingClientRect();
+        const scale = this.RenderingScale;
+        const x = e.clientX - rect.left, y = e.clientY - rect.top;
+        const pointerType = e.pointerType;
+        const source = pointerType === "touch" || pointerType === "pen" ? "touch" : pointerType === "mouse" || e.button === 2 ? "mouse" : "keyboard";
+        const args = new ContextMenuEventArgs(new SKPoint(x, y), new SKPoint(x * scale, y * scale), source, e);
+        let handled = this.content?.ProcessContextMenu(args.Pixels, args) ?? false;
+        if (!handled && this.ContextMenu)
+            handled = this.ContextMenu(this, args) === true;
+        if (handled)
+            e.preventDefault();
+    };
+    cursorPointer = false;
+    /**
+     * DrawnUi.Blazor shows `cursor: pointer` over interactive controls through its overlay elements; here the overlay
+     * is pointer-events:none, so the mouse position is tested against the accessibility snapshot (the accessible
+     * controls' rects in points, already sorted and rate-limited), each hit control answering WantsPointerCursor
+     * (itself tappable, or a tappable span of a label), and the canvas element's cursor is switched only when the
+     * answer changes. Mouse moves only, no work without a mouse and none in the frame loop.
+     */
+    UpdateCursor(x, y) {
+        let hit = false;
+        const scale = this.RenderingScale;
+        for (const n of this.AccessibilityManager.Snapshot) {
+            if (x < n.Rect.Left || x >= n.Rect.Right || y < n.Rect.Top || y >= n.Rect.Bottom)
+                continue;
+            // the control decides (whole control, or a tappable span of a label); point in pixels relative to the control's
+            // origin, taken from the snapshot rect (already carries the scroll / cache offset; a rotated control gets its bbox)
+            if (n.Source.WantsPointerCursor((x - n.Rect.Left) * scale, (y - n.Rect.Top) * scale)) {
+                hit = true;
+                break;
+            }
+        }
+        if (hit !== this.cursorPointer) {
+            this.cursorPointer = hit;
+            this.Element.style.cursor = hit ? "pointer" : "";
+        }
+    }
     /** Mouse wheel -> TouchActionResult.Wheel (page scroll suppressed while gestures are enabled). */
     onWheel = (e) => {
         e.preventDefault();
@@ -253,6 +352,7 @@ export class Canvas {
         el.style.userSelect = "none";
         for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
             el.addEventListener(t, this.onPointer);
+        el.addEventListener("contextmenu", this.onContextMenu);
         el.addEventListener("wheel", this.onWheel, { passive: false });
         if (this.gestures === "Lock")
             el.addEventListener("touchmove", this.preventTouch, { passive: false });
@@ -263,6 +363,7 @@ export class Canvas {
         el.style.userSelect = "";
         for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
             el.removeEventListener(t, this.onPointer);
+        el.removeEventListener("contextmenu", this.onContextMenu);
         el.removeEventListener("wheel", this.onWheel);
         el.removeEventListener("touchmove", this.preventTouch);
         this.activeTouchIds.clear();

package/dist/core/Gestures.d.ts

@@ -9,7 +9,7 @@ export declare class SKPoint {
 }
 /** Raw platform action (subset of TouchActionType). */
 export type TouchActionType = "Pressed" | "Moved" | "Released" | "Cancelled" | "Wheel" | "Pointer";
-/** Recognized gesture (TouchActionResult). LongPressing/Wheel/Pointer/Touch declared for parity, not produced yet. */
+/** Recognized gesture (TouchActionResult). LongPressing/Pointer/Touch declared for parity, not produced yet. */
 export type TouchActionResult = "Touch" | "Down" | "Up" | "Tapped" | "LongPressing" | "Panning" | "Wheel" | "Pointer";
 export type GesturesMode = "Disabled" | "Enabled" | "Lock";
 export type LockTouch = "Disabled" | "Enabled" | "PassNone" | "PassTap" | "PassTapAndLongPress";
@@ -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;
@@ -66,6 +80,33 @@ export declare class SkiaGesturesInfo {
     constructor(Args: SkiaGesturesParameters, Info: GestureEventProcessingInfo);
 }
 /** DrawnUi ControlTappedEventArgs. */
+/** Where a context-menu request came from: right click, long press (Android fires contextmenu), or the keyboard Menu key. */
+export type ContextMenuSource = "mouse" | "touch" | "keyboard";
+/**
+ * Arguments of SkiaControl.ContextMenu / Canvas.ContextMenu: a browser `contextmenu` request on the canvas (right
+ * click, long press on touch, the Menu key). Handlers return true to take it: the browser's own menu ("Save image")
+ * is then suppressed; otherwise it shows as usual.
+ */
+export declare class ContextMenuEventArgs {
+    /** Point on the canvas, in points (CSS px). */
+    Location: SKPoint;
+    /** Same point in pixels (canvas space). */
+    Pixels: SKPoint;
+    Source: ContextMenuSource;
+    /** The DOM event: modifiers, target, preventDefault if you need it yourself. */
+    Native: MouseEvent;
+    /** Deepest control under the point that had a ContextMenu handler (set while routing). */
+    Control?: SkiaControl;
+    /** Point inside Control, in pixels relative to its DrawingRect origin (set while routing). */
+    Local: SKPoint;
+    constructor(
+    /** Point on the canvas, in points (CSS px). */
+    Location: SKPoint, 
+    /** Same point in pixels (canvas space). */
+    Pixels: SKPoint, Source: ContextMenuSource, 
+    /** The DOM event: modifiers, target, preventDefault if you need it yourself. */
+    Native: MouseEvent);
+}
 export declare class ControlTappedEventArgs {
     Control: SkiaControl;
     Parameters: SkiaGesturesParameters;