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

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,23 @@ 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…"). 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`:
+
+```tsx
+<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 +101,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. Only the primary mouse button starts a gesture (right / middle clicks are ignored, like DrawnUi.Blazor). |
+| 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,7 +29,7 @@ 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. |
+| `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 | |
 | 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. |
@@ -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
 
@@ -102,6 +104,7 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | `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.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/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, 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,17 @@ 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)
+        // 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;
         // Capture so Up outside the element still arrives; throws for synthetic events (tests) — harmless.
         if (type === "Pressed") {
             try {
@@ -234,6 +287,48 @@ export class Canvas {
         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 +348,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 +359,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";
@@ -66,6 +66,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;

package/dist/core/Gestures.js

@@ -91,7 +91,33 @@ export class SkiaGesturesInfo {
         this.Info = Info;
     }
 }
-/** DrawnUi ControlTappedEventArgs. */
+/**
+ * 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 class ContextMenuEventArgs {
+    Location;
+    Pixels;
+    Source;
+    Native;
+    /** Deepest control under the point that had a ContextMenu handler (set while routing). */
+    Control;
+    /** Point inside Control, in pixels relative to its DrawingRect origin (set while routing). */
+    Local = SKPoint.Empty;
+    constructor(
+    /** Point on the canvas, in points (CSS px). */
+    Location, 
+    /** Same point in pixels (canvas space). */
+    Pixels, Source, 
+    /** The DOM event: modifiers, target, preventDefault if you need it yourself. */
+    Native) {
+        this.Location = Location;
+        this.Pixels = Pixels;
+        this.Source = Source;
+        this.Native = Native;
+    }
+}
 export class ControlTappedEventArgs {
     Control;
     Parameters;

package/dist/core/SkiaControl.d.ts

@@ -3,7 +3,7 @@ import { type Color, type LayoutOptions, SKRect, ScaledSize, type SkiaCacheType,
 import { type IOverlayEffect } from "./Animators";
 import { Easing } from "./Easing";
 import type { Canvas } from "./Canvas";
-import { ControlTappedEventArgs, GestureEventProcessingInfo, type LockTouch, SKPoint, SkiaGesturesInfo, SkiaGesturesParameters } from "./Gestures";
+import { ContextMenuEventArgs, ControlTappedEventArgs, GestureEventProcessingInfo, type LockTouch, SKPoint, SkiaGesturesInfo, SkiaGesturesParameters } from "./Gestures";
 import { type CachedTexture, type IPostRendererEffect, type SkiaEffect } from "./SkiaEffect";
 /** Mirrors DrawnUi DrawingContext: ctx.Context.Canvas / Surface, ctx.Destination (pixels), ctx.Scale. */
 export interface DrawingContext {
@@ -180,6 +180,12 @@ export declare class SkiaControl {
     /** Clip overlay effects to the control's shape (CreateClip). */
     ClipEffects: boolean;
     Tapped?: (sender: SkiaControl, e: ControlTappedEventArgs) => void;
+    /**
+     * Context-menu request over this control (right click, long press on touch, Menu key). Return true to handle it:
+     * the browser's own canvas menu is suppressed. Routed deepest child first, then parents, then Canvas.ContextMenu.
+     * Not in DrawnUi.Net (a web concept).
+     */
+    ContextMenu?: (sender: SkiaControl, e: ContextMenuEventArgs) => boolean | void;
     ChildTapped?: (sender: SkiaControl, e: ControlTappedEventArgs) => void;
     /** Raw gesture hook: set e.Consumed = true to stop propagation (not for Up). */
     ConsumeGestures?: (sender: SkiaControl, e: SkiaGesturesInfo) => void;
@@ -235,6 +241,11 @@ export declare class SkiaControl {
     get AccessibilityCanInteract(): boolean;
     set AccessibilityCanInteract(v: boolean);
     protected DefaultAccessibilityCanInteract(): boolean;
+    /**
+     * Whether the mouse at this point (pixels, relative to DrawingRect's origin) is over something tappable, for the
+     * host's pointer cursor. Default: the control as a whole (AccessibilityCanInteract); SkiaLabel adds its tappable spans.
+     */
+    WantsPointerCursor(_x: number, _y: number): boolean;
     /** aria-pressed for toggles; undefined = not a toggle. */
     get AccessibilityIsPressed(): boolean | undefined;
     set AccessibilityIsPressed(v: boolean | undefined);
@@ -370,6 +381,11 @@ export declare class SkiaControl {
     get HitBoxAuto(): SKRect;
     HitIsInside(x: number, y: number): boolean;
     IsGestureForChild(child: SkiaControl, point: SKPoint): boolean;
+    /**
+     * Routes a context-menu request like a tap: visible, non-transparent children under the point first (top-most
+     * first, each in its own transformed space), then this control's ContextMenu handler. True = handled.
+     */
+    ProcessContextMenu(point: SKPoint, e: ContextMenuEventArgs): boolean;
     /** Children that may receive gestures, top-most LAST (layouts return their Views). */
     protected GetGestureListeners(): readonly SkiaControl[];
     private static readonly NoListeners;

package/dist/core/SkiaControl.js

@@ -238,6 +238,12 @@ export class SkiaControl {
     ClipEffects = true;
     // ---- gesture events (single handler each; C# events map to one callback prop) ----
     Tapped;
+    /**
+     * Context-menu request over this control (right click, long press on touch, Menu key). Return true to handle it:
+     * the browser's own canvas menu is suppressed. Routed deepest child first, then parents, then Canvas.ContextMenu.
+     * Not in DrawnUi.Net (a web concept).
+     */
+    ContextMenu;
     ChildTapped;
     /** Raw gesture hook: set e.Consumed = true to stop propagation (not for Up). */
     ConsumeGestures;
@@ -388,6 +394,11 @@ export class SkiaControl {
         this.AccessibilityChanged();
     } }
     DefaultAccessibilityCanInteract() { return !!this.Tapped; }
+    /**
+     * Whether the mouse at this point (pixels, relative to DrawingRect's origin) is over something tappable, for the
+     * host's pointer cursor. Default: the control as a whole (AccessibilityCanInteract); SkiaLabel adds its tappable spans.
+     */
+    WantsPointerCursor(_x, _y) { return this.AccessibilityCanInteract; }
     /** aria-pressed for toggles; undefined = not a toggle. */
     get AccessibilityIsPressed() { return this.accessibilityIsPressed; }
     set AccessibilityIsPressed(v) { if (this.accessibilityIsPressed !== v) {
@@ -1079,6 +1090,25 @@ export class SkiaControl {
         const local = child.TransformPointToLocalSpace(point);
         return child.HitIsInside(local.X, local.Y);
     }
+    /**
+     * Routes a context-menu request like a tap: visible, non-transparent children under the point first (top-most
+     * first, each in its own transformed space), then this control's ContextMenu handler. True = handled.
+     */
+    ProcessContextMenu(point, e) {
+        const listeners = this.GetGestureListeners();
+        for (let i = listeners.length - 1; i >= 0; i--) {
+            const listener = listeners[i];
+            if (!listener.IsVisible || listener.InputTransparent || !this.IsGestureForChild(listener, point))
+                continue;
+            if (listener.ProcessContextMenu(listener.TransformPointToLocalSpace(point), e))
+                return true;
+        }
+        if (!this.ContextMenu)
+            return false;
+        e.Control = this;
+        e.Local = new SKPoint(point.X - this.DrawingRect.Left, point.Y - this.DrawingRect.Top);
+        return this.ContextMenu(this, e) === true;
+    }
     /** Children that may receive gestures, top-most LAST (layouts return their Views). */
     GetGestureListeners() { return SkiaControl.NoListeners; }
     static NoListeners = [];

package/dist/core/Types.d.ts

@@ -134,9 +134,14 @@ export type DrawImageAlignment = "Start" | "Center" | "End";
 /** MAUI/DrawnUi ScrollOrientation. */
 export type ScrollOrientation = "Vertical" | "Horizontal" | "Both" | "Neither";
 /**
- * DrawnUi SkiaCacheType. Operations = recorded draw commands (SkPicture) replayed each frame;
+ * DrawnUi SkiaCacheType. Operations / OperationsFull = recorded draw commands (SkPicture) replayed each frame.
  * Image = offscreen surface snapshot blitted each frame (GPU-backed when the canvas is WebGL).
- * GPU / ImageDoubleBuffered / ImageComposite / ImageCompositeGPU are accepted and currently resolve to Image.
+ * ImageDoubleBuffered = an Image cache that keeps the previous one and draws it — or DrawPlaceholder when there is
+ * none — while a new one cannot be produced yet.
+ * ImageComposite / ImageCompositeGPU = an Image cache whose offscreen surface survives between records: when only
+ * children changed, their old and new bounds plus the siblings those overlap are erased and only those children are
+ * painted again.
+ * GPU resolves to Image and ImageCompositeGPU to ImageComposite; the browser has no separate GPU-only path.
  */
 export type SkiaCacheType = "None" | "Operations" | "OperationsFull" | "Image" | "ImageDoubleBuffered" | "ImageComposite" | "ImageCompositeGPU" | "GPU";
 /** DrawnUi GradientType (Conical accepted, drawn as Circular). */