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

package/dist/react/SkiaShell.js

@@ -389,6 +389,12 @@ export const SkiaShell = forwardRef(function SkiaShell({ Routes, children, NavBa
                 prev ? prev.TranslateToAsync(-dir * w, 0, TabsAnimationSpeed, TabsEasing) : Promise.resolve(),
             ]), TabsAnimationSpeed + 500);
         }
+        // the tab left stays mounted (its state kept): hidden first, then back in place for its next turn
+        if (prev) {
+            prev.IsVisible = false;
+            prev.TranslationX = 0;
+            prev.TranslationY = 0;
+        }
         setTabTransition(null);
     }, [hasTabs, Tabs, AnimateTabs, TabsAnimationSpeed]);
     // popstate: the browser popped OUR last entry (back) — or moved forward to a hash we can rebuild
@@ -405,7 +411,13 @@ export const SkiaShell = forwardRef(function SkiaShell({ Routes, children, NavBa
         }
         const onPop = () => {
             const depth = window.history.state?.[HISTORY_KEY] ?? 0;
-            if (depth < history.current.length) {
+            const target = parseHash();
+            // a Back lands on one of OUR entries: its hash is the stack it was pushed with (the first N pages, N = the page
+            // entries below it). A typed hash or a plain <a href="#/route"> makes a new entry with no state (depth 0):
+            // that is a navigation to the hash, not a Back to the root
+            const pagesBelow = history.current.slice(0, depth).filter((k) => k === "page").length;
+            const back = depth < history.current.length && target.join("/") === live.current.stack.slice(0, pagesBelow).join("/");
+            if (back) {
                 // back: unwind our entries down to depth
                 void (async () => {
                     while (history.current.length > depth) {
@@ -441,9 +453,8 @@ export const SkiaShell = forwardRef(function SkiaShell({ Routes, children, NavBa
                 })();
             }
             else {
-                // forward (depth grew), or the same depth with another hash = a plain <a href="#/route"> link or a typed hash:
+                // forward (depth grew), or another hash = a plain <a href="#/route"> link or a typed hash:
                 // the hash names the pages, rebuild the stack without animation (overlays cannot be restored)
-                const target = parseHash();
                 if (depth === history.current.length && target.join("/") === live.current.stack.join("/"))
                     return;
                 history.current = target.map(() => "page");
@@ -466,28 +477,36 @@ export const SkiaShell = forwardRef(function SkiaShell({ Routes, children, NavBa
     const transitioning = transitions > 0 || leaving !== null;
     const rootBottom = hasTabs ? TabBarHeight + insets.Bottom : 0;
     const navTop = NavBarHeight + insets.Top;
-    const rootNode = hasTabs ? RenderRoute(Tabs[selectedTab]?.route ?? "") : children;
+    // every tab keeps its root and its pages mounted (state, scroll positions), only the selected one shows (C# tab
+    // views, DrawnUi.Rust "tabs keep their stacks")
+    const tabIndexes = hasTabs ? Tabs.map((_, i) => i) : [0];
     const entering = tabTransition ? { TranslationX: tabTransition.dir * 0.75 * (typeof window !== "undefined" ? window.innerWidth : 0), Opacity: 0.001, ZIndex: 1 } : {};
-    return (_jsx(ShellContext.Provider, { value: nav, children: _jsxs(SkiaLayer, { VerticalOptions: "Fill", children: [tabTransition && (_jsx(SkiaLayer, { VerticalOptions: "Fill", Margin: new Thickness(0, 0, 0, rootBottom), ZIndex: 0, BackgroundColor: PageBackgroundColor, ref: (c) => { if (c)
-                        tabRoots.current.set(tabTransition.from, c); }, children: RenderRoute(Tabs[tabTransition.from]?.route ?? "") }, `tab-leaving-${tabTransition.from}`)), _jsx(SkiaLayer, { VerticalOptions: "Fill", Margin: new Thickness(0, 0, 0, rootBottom), IsVisible: visiblePages.length === 0 || transitioning, BackgroundColor: hasTabs ? PageBackgroundColor : undefined, ...entering, ref: (c) => { if (c)
-                        tabRoots.current.set(selectedTab, c); }, children: rootNode }, hasTabs ? `tab-${selectedTab}` : "root"), visiblePages.map((r, i) => (_jsxs(PageHost, { route: r, speed: PagesAnimationSpeed, visible: r === topRoute || transitioning, background: PageBackgroundColor, bottom: rootBottom, register: (c) => { if (c)
+    return (_jsx(ShellContext.Provider, { value: nav, children: _jsxs(SkiaLayer, { VerticalOptions: "Fill", children: [tabIndexes.map((t) => {
+                    const selected = t === selectedTab;
+                    return (_jsx(SkiaLayer, { VerticalOptions: "Fill", Margin: new Thickness(0, 0, 0, rootBottom), BackgroundColor: hasTabs ? PageBackgroundColor : undefined, IsVisible: selected ? visiblePages.length === 0 || transitioning : tabTransition?.from === t, ZIndex: 0, ...(selected ? entering : {}), ref: (c) => { if (c)
+                            tabRoots.current.set(t, c); }, children: hasTabs ? RenderRoute(Tabs[t]?.route ?? "") : children }, hasTabs ? `tab-${t}` : "root"));
+                }), tabIndexes.flatMap((t) => (t === selectedTab ? visiblePages : stacks[t] ?? []).map((r, i) => (_jsxs(PageHost, { route: r, speed: PagesAnimationSpeed, active: t === selectedTab, visible: t === selectedTab && (r === topRoute || transitioning), background: PageBackgroundColor, bottom: rootBottom, register: (c) => { if (c)
                         pageCtrls.current.set(r, c);
                     else
-                        pageCtrls.current.delete(r); }, children: [_jsx(SkiaLayer, { VerticalOptions: "Fill", Margin: new Thickness(0, navTop, 0, 0), children: RenderRoute(r) }), _jsxs(SkiaLayer, { HeightRequest: navTop, BackgroundColor: NavBarColor, Padding: new Thickness(0, insets.Top, 0, 0), children: [_jsx(SkiaButton, { Text: "\u2039  Back", BackgroundColor: "#00000000", TextColor: "#6EA8FE", FontSize: 16, VerticalOptions: "Center", Margin: new Thickness(8, 0), ApplyEffect: "Ripple", Tapped: () => void GoBackAsync(), AccessibilityRole: "button", AccessibilityLabel: "Back" }), _jsx(SkiaLabel, { Text: Titles?.[RouteName(r)] ?? RouteName(r), FontSize: 18, FontFamily: "FontTextBold", TextColor: Colors.White, HorizontalOptions: "Fill", HorizontalTextAlignment: "Center", VerticalOptions: "Center", MaxLines: 1, Margin: new Thickness(96, 0), AccessibilityRole: "heading" }), _jsx(SkiaButton, { Text: "Home", BackgroundColor: "#00000000", TextColor: "#6EA8FE", FontSize: 16, HorizontalOptions: "End", VerticalOptions: "Center", Margin: new Thickness(0, 0, 8, 0), ApplyEffect: "Ripple", Tapped: () => void PopToRootAsync(), AccessibilityRole: "button", AccessibilityLabel: "Home" }), _jsx(SkiaLayer, { HeightRequest: 1, VerticalOptions: "End", BackgroundColor: "#343A40" })] })] }, `${selectedTab}:${r}#${i}`))), hasTabs && (_jsxs(SkiaLayer, { HeightRequest: TabBarHeight + insets.Bottom, VerticalOptions: "End", BackgroundColor: TabBarColor, ZIndex: ShellDefaults.ZIndexModals - 1, BlockGesturesBelow: true, Padding: new Thickness(0, 0, 0, insets.Bottom), children: [_jsx(SkiaLayer, { HeightRequest: 1, BackgroundColor: "#343A40" }), _jsx(SkiaGrid, { ColumnDefinitions: Tabs.map(() => "*").join(","), HorizontalOptions: "Fill", VerticalOptions: "Fill", children: Tabs.map((t, i) => (_jsxs(SkiaLayer, { Column: i, HorizontalOptions: "Fill", VerticalOptions: "Fill", AnimationTapped: "Ripple", Tapped: () => void SelectTabAsync(i), AccessibilityRole: "button", AccessibilityLabel: t.title, children: [_jsx(SkiaLabel, { Text: t.title, FontSize: 13, FontFamily: i === selectedTab ? "FontTextBold" : undefined, TextColor: i === selectedTab ? ShellDefaults.TabSelectedColor : ShellDefaults.TabColor, HorizontalOptions: "Center", VerticalOptions: "Center", AccessibilityRole: "presentation" }), i === selectedTab && _jsx(SkiaShape, { Type: "Rectangle", HeightRequest: 3, WidthRequest: 36, CornerRadius: 2, BackgroundColor: ShellDefaults.TabSelectedColor, HorizontalOptions: "Center", VerticalOptions: "End" })] }, t.route))) })] })), modals.map((m) => m.node), popups.map((p) => p.node), toasts.map((t) => t.node)] }) }));
+                        pageCtrls.current.delete(r); }, children: [_jsx(SkiaLayer, { VerticalOptions: "Fill", Margin: new Thickness(0, navTop, 0, 0), children: RenderRoute(r) }), _jsxs(SkiaLayer, { HeightRequest: navTop, BackgroundColor: NavBarColor, Padding: new Thickness(0, insets.Top, 0, 0), children: [_jsx(SkiaButton, { Text: "\u2039  Back", BackgroundColor: "#00000000", TextColor: "#6EA8FE", FontSize: 16, VerticalOptions: "Center", Margin: new Thickness(8, 0), ApplyEffect: "Ripple", Tapped: () => void GoBackAsync(), AccessibilityRole: "button", AccessibilityLabel: "Back" }), _jsx(SkiaLabel, { Text: Titles?.[RouteName(r)] ?? RouteName(r), FontSize: 18, FontFamily: "FontTextBold", TextColor: Colors.White, HorizontalOptions: "Fill", HorizontalTextAlignment: "Center", VerticalOptions: "Center", MaxLines: 1, Margin: new Thickness(96, 0), AccessibilityRole: "heading" }), _jsx(SkiaButton, { Text: "Home", BackgroundColor: "#00000000", TextColor: "#6EA8FE", FontSize: 16, HorizontalOptions: "End", VerticalOptions: "Center", Margin: new Thickness(0, 0, 8, 0), ApplyEffect: "Ripple", Tapped: () => void PopToRootAsync(), AccessibilityRole: "button", AccessibilityLabel: "Home" }), _jsx(SkiaLayer, { HeightRequest: 1, VerticalOptions: "End", BackgroundColor: "#343A40" })] })] }, `${t}:${r}#${i}`)))), hasTabs && (_jsxs(SkiaLayer, { HeightRequest: TabBarHeight + insets.Bottom, VerticalOptions: "End", BackgroundColor: TabBarColor, ZIndex: ShellDefaults.ZIndexModals - 1, BlockGesturesBelow: true, Padding: new Thickness(0, 0, 0, insets.Bottom), children: [_jsx(SkiaLayer, { HeightRequest: 1, BackgroundColor: "#343A40" }), _jsx(SkiaGrid, { ColumnDefinitions: Tabs.map(() => "*").join(","), HorizontalOptions: "Fill", VerticalOptions: "Fill", children: Tabs.map((t, i) => (_jsxs(SkiaLayer, { Column: i, HorizontalOptions: "Fill", VerticalOptions: "Fill", AnimationTapped: "Ripple", Tapped: () => void SelectTabAsync(i), AccessibilityRole: "button", AccessibilityLabel: t.title, children: [_jsx(SkiaLabel, { Text: t.title, FontSize: 13, FontFamily: i === selectedTab ? "FontTextBold" : undefined, TextColor: i === selectedTab ? ShellDefaults.TabSelectedColor : ShellDefaults.TabColor, HorizontalOptions: "Center", VerticalOptions: "Center", AccessibilityRole: "presentation" }), i === selectedTab && _jsx(SkiaShape, { Type: "Rectangle", HeightRequest: 3, WidthRequest: 36, CornerRadius: 2, BackgroundColor: ShellDefaults.TabSelectedColor, HorizontalOptions: "Center", VerticalOptions: "End" })] }, t.route))) })] })), modals.map((m) => m.node), popups.map((p) => p.node), toasts.map((t) => t.node)] }) }));
 });
 /** A pushed page: slides in from the right on mount (C# SkiaViewSwitcher PushView), covers what is below. */
-function PageHost({ route, speed, visible, background, bottom, register, children }) {
+function PageHost({ route, speed, active, visible, background, bottom, register, children }) {
     const ctrl = useRef(null);
+    // slides in once, when pushed; a page of another tab stays mounted and is registered only while its tab is selected
     useEffect(() => {
         const c = ctrl.current;
-        if (!c)
-            return;
-        register(c);
-        if (speed > 0) {
+        if (c && speed > 0) {
             c.TranslationX = CanvasWidthPts(c);
             void c.TranslateToAsync(0, 0, speed);
         }
-        return () => register(null);
     }, [route]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        const c = ctrl.current;
+        if (!c || !active)
+            return;
+        register(c);
+        return () => register(null);
+    }, [route, active]); // eslint-disable-line react-hooks/exhaustive-deps
     return (_jsx(SkiaLayer, { ref: (c) => { ctrl.current = c; }, VerticalOptions: "Fill", HorizontalOptions: "Fill", Margin: new Thickness(0, 0, 0, bottom), BackgroundColor: background, IsVisible: visible, BlockGesturesBelow: true, children: children }));
 }

package/dist/react/index.d.ts

@@ -4,6 +4,7 @@ import type { SkiaControl } from "../core/SkiaControl";
 import type { SkiaLabel as SkiaLabelCtrl } from "../controls/SkiaLabel";
 import type { TextSpan as TextSpanCtrl } from "../controls/TextSpan";
 import type { SkiaRichLabel as SkiaRichLabelCtrl } from "../controls/SkiaRichLabel";
+import type { SkiaLabelFps as SkiaLabelFpsCtrl } from "../controls/SkiaLabelFps";
 import type { SkiaSwitch as SkiaSwitchCtrl } from "../controls/SkiaSwitch";
 import type { SkiaCheckbox as SkiaCheckboxCtrl } from "../controls/SkiaCheckbox";
 import type { SkiaRadioButton as SkiaRadioButtonCtrl } from "../controls/SkiaRadioButton";
@@ -22,7 +23,7 @@ import type { SkiaScrollBar as SkiaScrollBarCtrl } from "../controls/SkiaScrollB
 import type { RefreshIndicator as RefreshIndicatorCtrl } from "../controls/RefreshIndicator";
 import type { SkiaSvg as SkiaSvgCtrl } from "../controls/SkiaSvg";
 import type { SkiaBackdrop as SkiaBackdropCtrl } from "../controls/SkiaBackdrop";
-import type { SkiaEditor as SkiaEditorCtrl } from "../controls/SkiaEditor";
+import { SkiaEditor as SkiaEditorCtrl } from "../controls/SkiaEditor";
 import type { SkiaSprite as SkiaSpriteCtrl } from "../controls/SkiaSprite";
 import type { SkiaSpriteSet as SkiaSpriteSetCtrl } from "../controls/SkiaSpriteSet";
 import type { SkiaLottie as SkiaLottieCtrl } from "../controls/SkiaLottie";
@@ -41,7 +42,7 @@ import type { GesturesMode } from "../core/Gestures";
  * and never appeared in completion.
  */
 type PropsOf<T> = Partial<{
-    [K in keyof T as T[K] extends Function ? (undefined extends T[K] ? K : never) : K extends "Children" | "Views" | "Parent" | "Spans" | "GridStructure" | "AccessibilityId" | "IsAccessibilityElement" | "HasTransform" | "RenderTransformMatrix" | "RenderObjectPrevious" | "LastMeasuredIndex" | "ItemsInsertedAtStart" | "UsingControlStyle" | "Track" | "Thumb" | "FrameOn" | "FrameOff" | "ViewCheckOn" | "ViewOn" | "ViewText" | "Ratio" | "StartThumbX" | "EndThumbX" | "SnapPoints" | "CurrentPosition" | "CurrentSnap" | "ContentOffsetBounds" | "InTransition" | "CanAnimate" | "MaxIndex" | "ChildrenTotal" | "IsAtStart" | "IsAtEnd" | "ScrollProgress" | "ScrollAmount" | "TransitionProgress" | "LastIndex" | "ChildrenCount" | "Horizontal" | "Animator" | "Animation" | "IsPlaying" | "PlayWhenAvailable" | "TotalFrames" | "HasEffects" | "IsDisposed" | "Label" | "IsMultiline" | "HasSelection" | "LayoutVersion" | "LinesCount" | "MeasuredLineHeight" | "Focused" | "SpriteSheet" | "FrameWidth" | "FrameHeight" | "DurationMs" | "FrameDurationMs" | "CurrentSprite" | "Rects" | "HasTapHandler" | "HasDecorations" | "LinesCount" | "Superview" | "DrawingRect" | "MeasuredSize" | "RenderingScale" | "NeedMeasure" | "_superview" | "HitBoxAuto" | "TotalDown" | "TotalTapped" | "TouchDown" | "PostAnimators" | "LoadedSource" | "IsLoading" | "DisplayRect" | "AspectScale" | "Content" | "ContentSize" | "ContentOffsetBounds" | "OverscrollDistance" | "OverScrolled" | "IsUserPanning" | "IsUserFocused" | "IsScrolling" | "IsTemplated" | "FirstVisibleIndex" | "LastVisibleIndex" | "DebugString" | "ChildrenFactory" | "ContextIndex" | "RenderObject" | "UsingCacheType" | "TransitionEffect" | "TransitionFromIndex" | "TransitionToIndex" | "EffectPostRenderers" | "CachedImage" | "ImageBitmap" | "ShouldSubmitOnEnter" | "Header" | "Footer" | "RefreshIndicator" | "ScrollBar" | "ScrollBarHorizontal" | "IsRunning" | "VisibleRatio" | "CurrentIndex" | "LastCompositeRecord" | "DirtyChildrenInternal" | "IsRenderingWithComposition" ? never : K]: T[K];
+    [K in keyof T as T[K] extends Function ? (undefined extends T[K] ? K : never) : K extends "Children" | "Views" | "Parent" | "Spans" | "GridStructure" | "AccessibilityId" | "IsAccessibilityElement" | "HasTransform" | "RenderTransformMatrix" | "RenderObjectPrevious" | "LastMeasuredIndex" | "ItemsInsertedAtStart" | "UsingControlStyle" | "Track" | "Thumb" | "FrameOn" | "FrameOff" | "ViewCheckOn" | "ViewOn" | "ViewText" | "Ratio" | "StartThumbX" | "EndThumbX" | "SnapPoints" | "CurrentPosition" | "CurrentSnap" | "ContentOffsetBounds" | "InTransition" | "CanAnimate" | "MaxIndex" | "ChildrenTotal" | "IsAtStart" | "IsAtEnd" | "ScrollProgress" | "ScrollAmount" | "TransitionProgress" | "LastIndex" | "ChildrenCount" | "Horizontal" | "Animator" | "Animation" | "IsPlaying" | "PlayWhenAvailable" | "TotalFrames" | "HasEffects" | "IsDisposed" | "Label" | "IsMultiline" | "HasSelection" | "LayoutVersion" | "LinesCount" | "MeasuredLineHeight" | "Focused" | "SpriteSheet" | "FrameWidth" | "FrameHeight" | "DurationMs" | "FrameDurationMs" | "CurrentSprite" | "Rects" | "HasTapHandler" | "HasDecorations" | "LinesCount" | "Superview" | "DrawingRect" | "MeasuredSize" | "RenderingScale" | "NeedMeasure" | "_superview" | "HitBoxAuto" | "TotalDown" | "TotalTapped" | "TouchDown" | "PostAnimators" | "LoadedSource" | "IsLoading" | "DisplayRect" | "AspectScale" | "Content" | "ContentSize" | "ContentOffsetBounds" | "OverscrollDistance" | "OverScrolled" | "IsUserPanning" | "IsUserFocused" | "IsScrolling" | "IsTemplated" | "FirstVisibleIndex" | "LastVisibleIndex" | "DebugString" | "ChildrenFactory" | "ContextIndex" | "RenderObject" | "UsingCacheType" | "TransitionEffect" | "TransitionFromIndex" | "TransitionToIndex" | "EffectPostRenderers" | "CachedImage" | "ImageBitmap" | "ShouldSubmitOnEnter" | "Header" | "Footer" | "RefreshIndicator" | "ScrollBar" | "ScrollBarHorizontal" | "IsRunning" | "VisibleRatio" | "CurrentIndex" | "LastCompositeRecord" | "DirtyChildrenInternal" | "IsRenderingWithComposition" | "IsHovered" ? never : K]: T[K];
 }>;
 /** `ref` receives the engine control instance (react-reconciler getPublicInstance). */
 type LeafProps<T> = PropsOf<T> & {
@@ -61,6 +62,8 @@ export declare const SkiaGrid: FC<LayoutProps<SkiaLayoutCtrl>>;
 /** Grid drawing gradient separator lines in its spacing (C# SkiaDecoratedGrid). */
 export declare const SkiaDecoratedGrid: FC<LayoutProps<SkiaDecoratedGridCtrl>>;
 export declare const SkiaLabel: FC<LayoutProps<SkiaLabelCtrl>>;
+/** Canvas FPS counter (C# SkiaLabelFps); its value changes only on frames running animators request anyway. */
+export declare const SkiaLabelFps: FC<LeafProps<SkiaLabelFpsCtrl>>;
 /** Markdown label (C# SkiaRichLabel): Text is markdown, rendered as spans; LinkTapped for [text](url). */
 export declare const SkiaRichLabel: FC<LeafProps<SkiaRichLabelCtrl>>;
 /** Child of <SkiaLabel>: a styled fragment (C# TextSpan). */
@@ -100,7 +103,11 @@ export declare const SkiaDrawer: FC<LayoutProps<SkiaDrawerCtrl>>;
 export interface CanvasProps {
     BackgroundColor?: Color;
     RenderingMode?: RenderingModeType;
-    /** Disabled (default) / Enabled / Lock, like DrawnUi Canvas.Gestures. */
+    /**
+     * Disabled (default) / Enabled / Lock, like DrawnUi Canvas.Gestures. Enabled shares input with the page like MAUI's
+     * Enabled inside a native scroll view: a touch pan along an axis the page can scroll scrolls the page, and the wheel
+     * scrolls it unless a control used the wheel. A page that cannot scroll keeps every touch. Lock keeps all input.
+     */
     Gestures?: GesturesMode;
     children?: ReactNode;
     style?: CSSProperties;
@@ -109,12 +116,16 @@ export interface CanvasProps {
     ref?: Ref<CanvasView>;
     /** Context-menu request (right click / long press / Menu key) no control handled; return true to suppress the browser menu. */
     ContextMenu?: CanvasView["ContextMenu"];
+    /** DrawnView.WillFirstTimeDraw: once, right before the first frame is drawn, with its drawing context. */
+    WillFirstTimeDraw?: CanvasView["WillFirstTimeDraw"];
+    /** DrawnView.WasDrawn: after every drawn frame. */
+    WasDrawn?: CanvasView["WasDrawn"];
 }
 /**
  * Mirrors DrawnUi Canvas: the bridge between the DOM (react-dom) and the drawn tree (DrawnUi reconciler).
  * Requires Super.UseDrawnUi()...BuildAsync() to have completed.
  */
-export declare function Canvas({ BackgroundColor, RenderingMode, Gestures, children, style, className, ref: viewRef, ContextMenu }: CanvasProps): import("react").JSX.Element;
+export declare function Canvas({ BackgroundColor, RenderingMode, Gestures, children, style, className, ref: viewRef, ContextMenu, WillFirstTimeDraw, WasDrawn }: CanvasProps): import("react").JSX.Element;
 export type { SkiaControl };
 export * from "../index";
 export * from "./SkiaShell";

package/dist/react/index.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { SkiaAccessibilityManager } from "../core/Accessibility";
+import { TextInputProxy } from "../core/TextInputProxy";
 import { Canvas as CanvasView } from "../core/Canvas";
+import { SkiaEditor as SkiaEditorCtrl } from "../controls/SkiaEditor";
 import { SkiaScroll as SkiaScrollCtrl } from "../controls/SkiaScroll";
 import { createDrawnRoot } from "./reconciler";
 /** Typed JSX tags resolved by the reconciler Registry. */
@@ -13,6 +16,8 @@ export const SkiaGrid = "SkiaGrid";
 /** Grid drawing gradient separator lines in its spacing (C# SkiaDecoratedGrid). */
 export const SkiaDecoratedGrid = "SkiaDecoratedGrid";
 export const SkiaLabel = "SkiaLabel";
+/** Canvas FPS counter (C# SkiaLabelFps); its value changes only on frames running animators request anyway. */
+export const SkiaLabelFps = "SkiaLabelFps";
 /** Markdown label (C# SkiaRichLabel): Text is markdown, rendered as spans; LinkTapped for [text](url). */
 export const SkiaRichLabel = "SkiaRichLabel";
 /** Child of <SkiaLabel>: a styled fragment (C# TextSpan). */
@@ -66,15 +71,19 @@ function removeStaticContent() {
  * Mirrors DrawnUi Canvas: the bridge between the DOM (react-dom) and the drawn tree (DrawnUi reconciler).
  * Requires Super.UseDrawnUi()...BuildAsync() to have completed.
  */
-export function Canvas({ BackgroundColor, RenderingMode, Gestures, children, style, className, ref: viewRef, ContextMenu }) {
+export function Canvas({ BackgroundColor, RenderingMode, Gestures, children, style, className, ref: viewRef, ContextMenu, WillFirstTimeDraw, WasDrawn }) {
     const ref = useRef(null);
     const view = useRef(null);
     const root = useRef(null);
     const [engine, setEngine] = useState(null);
     useLayoutEffect(() => {
-        const v = new CanvasView(ref.current);
-        if (RenderingMode)
-            v.RenderingMode = RenderingMode;
+        // the engine draws frame 1 inside its constructor: the draw events and the rendering mode must be on it before that
+        const v = new CanvasView(ref.current, (c) => {
+            if (RenderingMode)
+                c.RenderingMode = RenderingMode;
+            c.WillFirstTimeDraw = WillFirstTimeDraw;
+            c.WasDrawn = WasDrawn;
+        });
         view.current = v;
         root.current = createDrawnRoot(v);
         setEngine(v);
@@ -93,6 +102,8 @@ export function Canvas({ BackgroundColor, RenderingMode, Gestures, children, sty
         }
         v.Gestures = Gestures ?? "Disabled";
         v.ContextMenu = ContextMenu;
+        v.WillFirstTimeDraw = WillFirstTimeDraw;
+        v.WasDrawn = WasDrawn;
         root.current.render(children);
     });
     // The drawn surface is aria-hidden; the overlay is the accessibility tree (DrawnUi.Blazor pattern).
@@ -108,19 +119,74 @@ const A11Y_CSS = `
 .drawnui-a11y-text>span{position:absolute;white-space:pre;color:transparent;user-select:text;-webkit-user-select:text;pointer-events:auto;cursor:text;line-height:1;font-kerning:none;font-feature-settings:"kern" 0,"liga" 0,"calt" 0;text-rendering:geometricPrecision}
 .drawnui-a11y-text>span::selection{background:rgba(110,168,254,.55);color:transparent}
 `;
+const NAVIGATION_KEYS = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"]);
 /**
- * Invisible ARIA elements mirroring the accessible drawn controls, positioned over the canvas.
- * Improvement over DrawnUi.Blazor: `pointer-events:none`, so hover and every pointer gesture still reach the canvas —
- * keyboard (Tab / Enter / Space) and screen-reader activation arrive as DOM events and are routed back as a Tapped.
+ * Invisible ARIA elements mirroring the accessible drawn controls, positioned over the canvas (the DrawnUi.Blazor
+ * overlay). Improvement over DrawnUi.Blazor: `pointer-events:none`, so hover and every pointer gesture still reach the
+ * canvas. Keyboard and screen-reader input arrive as DOM events: Enter / Space activate (a Tapped), the navigation keys
+ * go to the focused control and then to its arrow-key group; a group is one Tab stop (roving tabindex).
  */
+/** aria-valuenow / min / max / valuetext of a range control (drawnui-cross 6c); a slider reads as horizontal. */
+function valueAttributes(n) {
+    const v = n.Value;
+    if (!v)
+        return undefined;
+    return { "aria-valuenow": v.Now, "aria-valuemin": v.Min, "aria-valuemax": v.Max, "aria-valuetext": v.Text || undefined, "aria-orientation": n.Role === "slider" ? "horizontal" : undefined };
+}
 function AccessibilityOverlay({ view }) {
     const [nodes, setNodes] = useState(() => view.AccessibilityManager.Snapshot);
+    // keyboard focus moved by the manager (arrow keys in a group): focus that node's element once it is rendered
+    const [focusRequest, setFocusRequest] = useState();
+    // the Tab stop of a group moves with keyboard focus: re-render on focus
+    const [, setFocusTick] = useState(0);
     useEffect(() => {
         const mgr = view.AccessibilityManager;
         setNodes(mgr.Snapshot);
         const off = mgr.OnChanged(() => setNodes(mgr.Snapshot));
         const offLive = mgr.OnLiveRegionUpdated(() => { mgr.ForceRebuildOnNextFrame(); view.Update(); });
-        return () => { off(); offLive(); };
+        const offFocus = mgr.OnKeyboardFocusRequested((node) => { setNodes(mgr.Snapshot); setFocusRequest({ id: node.AccessibilityId }); });
+        return () => { off(); offLive(); offFocus(); };
+    }, [view]);
+    const elementOf = (id) => overlayRef.current?.querySelector(`[data-a11y-id="${id}"]`) ?? undefined;
+    useLayoutEffect(() => {
+        if (!focusRequest)
+            return;
+        setFocusRequest(undefined);
+        elementOf(focusRequest.id)?.focus({ preventScroll: true });
+    }, [focusRequest]);
+    // the focused node went away (its page or popup closed): the focus goes to the first Tab stop on screen in reading
+    // order instead of falling back to the page (drawnui-cross 6c refocus); a focus the user moved away stays away
+    const focusedId = useRef(0);
+    useLayoutEffect(() => {
+        const id = focusedId.current;
+        if (!id || nodes.some((n) => n.Id === id))
+            return;
+        focusedId.current = 0;
+        const active = document.activeElement;
+        if (active && active !== document.body)
+            return;
+        const box = overlayRef.current?.getBoundingClientRect();
+        const first = nodes.find((n) => n.CanInteract && view.AccessibilityManager.IsTabStop(n.Source)
+            && (!box || (n.Rect.Bottom > 0 && n.Rect.Top < box.height && n.Rect.Right > 0 && n.Rect.Left < box.width)));
+        if (first)
+            elementOf(first.Id)?.focus({ preventScroll: true });
+    }, [nodes]);
+    // Tab / Shift+Tab in a text field leave it for the next node, also after a click into it: DOM focus goes to the
+    // field's own element (without taking the caret again) and the browser's Tab moves on from there
+    const tabbingOut = useRef(0);
+    useEffect(() => {
+        const onKey = (e) => {
+            const editor = SkiaEditorCtrl.Focused;
+            if (e.key !== "Tab" || !editor || editor.Superview !== view || !TextInputProxy.IsProxyTarget(e.target))
+                return;
+            const el = elementOf(editor.AccessibilityId);
+            if (!el)
+                return;
+            tabbingOut.current = editor.AccessibilityId;
+            el.focus({ preventScroll: true });
+        };
+        document.addEventListener("keydown", onKey, true);
+        return () => document.removeEventListener("keydown", onKey, true);
     }, [view]);
     // selectable text spans take pointer events: the wheel over them is re-dispatched to the canvas so drawn scrolls keep working
     const overlayRef = useRef(null);
@@ -155,15 +221,36 @@ function AccessibilityOverlay({ view }) {
     const pin = (e) => { e.currentTarget.scrollTop = 0; e.currentTarget.scrollLeft = 0; };
     return (_jsxs("div", { className: "drawnui-a11y-overlay", onScroll: pin, ref: overlayRef, children: [_jsx("style", { children: A11Y_CSS }), nodes.map((n) => {
                 const pos = { left: n.Rect.Left, top: n.Rect.Top, width: n.Rect.Width, height: n.Rect.Height };
-                const activate = () => n.Source.OnAccessibilityActivated();
-                return n.CanInteract ? (_jsx("div", { role: n.Role, "aria-label": n.Label, title: n.Hint, "aria-pressed": n.Role === "button" ? n.IsPressed : undefined, "aria-checked": n.Role === "switch" || n.Role === "checkbox" || n.Role === "radio" ? n.IsPressed : undefined, "aria-live": n.Live, tabIndex: 0, className: "drawnui-a11y-node", style: { ...pos, fontSize: 0, userSelect: "none" }, onClick: activate, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        activate();
-                    } }, onFocus: (e) => { pin({ currentTarget: e.currentTarget.parentElement }); SkiaScrollCtrl.EnsureVisible(n.Source); n.Source.OnAccessibilityFocused(true); n.Source.NotifyAccessibilityFocused(true); }, onBlur: () => { n.Source.OnAccessibilityFocused(false); n.Source.NotifyAccessibilityFocused(false); }, children: n.Label }, n.Id)) : n.TextLines ? (
+                const activate = () => SkiaAccessibilityManager.Activate(n.Source);
+                return n.CanInteract ? (_jsx("div", { "data-a11y-id": n.Id, role: n.Role, "aria-label": n.Label, title: n.Hint, ...valueAttributes(n), "aria-pressed": n.Role === "button" ? n.IsPressed : undefined, "aria-checked": n.Role === "switch" || n.Role === "checkbox" || n.Role === "radio" ? n.IsPressed : undefined, "aria-live": n.Live, tabIndex: view.AccessibilityManager.IsTabStop(n.Source) ? 0 : -1, className: "drawnui-a11y-node", style: { ...pos, fontSize: 0, userSelect: "none" }, onClick: activate, onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            activate();
+                        }
+                        else if (NAVIGATION_KEYS.has(e.key) && SkiaAccessibilityManager.Key(n.Source, e.key))
+                            e.preventDefault();
+                    }, onFocus: (e) => {
+                        focusedId.current = n.Id;
+                        pin({ currentTarget: e.currentTarget.parentElement });
+                        SkiaScrollCtrl.EnsureVisible(n.Source); // inside every enclosing scroll
+                        if (tabbingOut.current === n.Id)
+                            tabbingOut.current = 0; // leaving a text field: it keeps no caret
+                        else
+                            n.Source.OnAccessibilityFocused(true); // a text field takes the caret, as after a click
+                        n.Source.NotifyAccessibilityFocused(true);
+                        setFocusTick((t) => t + 1);
+                    }, onBlur: (e) => {
+                        if (e.currentTarget.isConnected && focusedId.current === n.Id)
+                            focusedId.current = 0; // moved away on purpose
+                        if (TextInputProxy.IsProxyTarget(e.relatedTarget))
+                            return; // a text field moved DOM focus to its own input
+                        n.Source.OnAccessibilityFocused(false);
+                        n.Source.NotifyAccessibilityFocused(false);
+                    }, children: n.Label }, n.Id)) : n.TextLines ? (
                 // AccessibilityTextSelectable: one positioned span per drawn line, in the drawn font, so the browser selects and copies it like HTML
-                _jsx("div", { role: n.Role, title: n.Hint, "aria-live": n.Live, className: "drawnui-a11y-node drawnui-a11y-text", style: pos, children: n.TextLines.map((l, i) => (_jsxs("span", { "data-w": l.Width, style: { left: l.Left, top: l.Top, height: l.Height, fontFamily: l.FontFamily, fontWeight: l.FontWeight, fontSize: l.FontSize, lineHeight: `${l.Height}px` }, children: [l.Text, i < n.TextLines.length - 1 ? "\n" : ""] }, i))) }, n.Id)) : (
+                _jsx("div", { role: n.Role, title: n.Hint, "aria-disabled": n.Disabled || undefined, "aria-live": n.Live, className: "drawnui-a11y-node drawnui-a11y-text", style: pos, children: n.TextLines.map((l, i) => (_jsxs("span", { "data-w": l.Width, style: { left: l.Left, top: l.Top, height: l.Height, fontFamily: l.FontFamily, fontWeight: l.FontWeight, fontSize: l.FontSize, lineHeight: `${l.Height}px` }, children: [l.Text, i < n.TextLines.length - 1 ? "\n" : ""] }, i))) }, n.Id)) : (
                 // static text is exposed as real (transparent) text content; aria-label only for roles that need a name
-                _jsx("div", { role: n.Role, "aria-label": n.Role === "text" ? undefined : n.Label, title: n.Hint, "aria-live": n.Live, className: "drawnui-a11y-node", style: pos, children: n.Label }, n.Id));
+                _jsx("div", { role: n.Role, "aria-label": n.Role === "text" ? undefined : n.Label, title: n.Hint, ...valueAttributes(n), "aria-disabled": n.Disabled || undefined, "aria-live": n.Live, className: "drawnui-a11y-node", style: pos, children: n.Label }, n.Id));
             })] }));
 }
 // One import for apps: React tags + every engine type (Colors, Thickness, Super, gestures, animators...).

package/dist/react/reconciler.js

@@ -1,9 +1,11 @@
 import { createContext } from "react";
 import Reconciler from "react-reconciler";
 import { ConcurrentRoot, DefaultEventPriority } from "react-reconciler/constants";
+import { SkiaControl } from "../core/SkiaControl";
 import { SkiaLabel } from "../controls/SkiaLabel";
 import { TextSpan } from "../controls/TextSpan";
 import { SkiaRichLabel } from "../controls/SkiaRichLabel";
+import { SkiaLabelFps } from "../controls/SkiaLabelFps";
 import { SkiaSwitch } from "../controls/SkiaSwitch";
 import { SkiaCheckbox } from "../controls/SkiaCheckbox";
 import { SkiaRadioButton } from "../controls/SkiaRadioButton";
@@ -31,18 +33,20 @@ import { SkiaScroll } from "../controls/SkiaScroll";
 import { SkiaFrame, SkiaShape } from "../controls/SkiaShape";
 /** JSX tag name -> engine class. Add a control here to expose it to React. */
 export const Registry = {
-    SkiaLayout, SkiaStack, SkiaRow, SkiaLayer, SkiaWrap, SkiaGrid, SkiaDecoratedGrid, SkiaBackdrop, SkiaEditor, SkiaSprite, SkiaSpriteSet, SkiaLabel, SkiaRichLabel, TextSpan, SkiaHotspot, SkiaButton, SkiaImage, SkiaImageTiles, SkiaSvg, SkiaLottie, SkiaGif, SkiaScroll, SkiaScrollBar, RefreshIndicator, SkiaShape, SkiaFrame,
+    SkiaLayout, SkiaStack, SkiaRow, SkiaLayer, SkiaWrap, SkiaGrid, SkiaDecoratedGrid, SkiaBackdrop, SkiaEditor, SkiaSprite, SkiaSpriteSet, SkiaLabel, SkiaLabelFps, SkiaRichLabel, TextSpan, SkiaHotspot, SkiaButton, SkiaImage, SkiaImageTiles, SkiaSvg, SkiaLottie, SkiaGif, SkiaScroll, SkiaScrollBar, RefreshIndicator, SkiaShape, SkiaFrame,
     SkiaSwitch, SkiaCheckbox, SkiaRadioButton, SkiaProgress, SkiaSlider, SkiaCarousel, SkiaShaderCarousel, SkiaDrawer,
 };
 const SKIP = new Set(["children", "key", "ref"]);
 /** Props that change how the subtree is composited, not what it contains: repaint, keep caches (DrawnUi RedrawCanvas). */
-const REPAINT_ONLY = new Set(["TranslationX", "TranslationY", "Rotation", "ScaleX", "ScaleY", "Scale", "SkewX", "SkewY", "AnchorX", "AnchorY", "Opacity"]);
+const REPAINT_ONLY = new Set(["TranslationX", "TranslationY", "TranslationZ", "Rotation", "RotationX", "RotationY", "RotationZ", "ScaleX", "ScaleY", "Scale", "SkewX", "SkewY", "AnchorX", "AnchorY", "Opacity"]);
+/** Props that change only how a control looks, never its size (C# NeedDraw): an ImageComposite above redraws only its area. */
+const isDrawOnly = (k) => k.endsWith("Color") || k === "FillGradient" || k === "StrokeGradient";
 /**
  * Assigns changed props straight onto the control (same names as the C# properties).
  * Handler props (functions) are swapped without invalidating: inline arrows change identity every render.
  */
 function applyProps(inst, prev, next) {
-    let changed = false, repaint = false;
+    let changed = false, repaint = false, layout = false;
     for (const k in next) {
         if (SKIP.has(k) || (prev && prev[k] === next[k]))
             continue;
@@ -51,23 +55,36 @@ function applyProps(inst, prev, next) {
             continue;
         if (REPAINT_ONLY.has(k))
             repaint = true;
-        else
+        else {
             changed = true;
+            if (!isDrawOnly(k))
+                layout = true;
+        }
     }
     if (prev)
         for (const k in prev)
             if (!SKIP.has(k) && !(k in next)) {
                 inst[k] = new inst.constructor()[k];
-                changed = true;
+                changed = layout = true;
             }
-    if (changed && prev)
-        inst.Update();
+    if (changed && prev) {
+        if (layout || !(inst instanceof SkiaControl))
+            inst.Update();
+        else
+            inst.UpdateDraw();
+    }
     else if (repaint && prev)
         inst.RepaintComposition?.();
 }
 let currentUpdatePriority = DefaultEventPriority;
 const noop = () => { };
 const hostContext = {};
+function appendChild(parent, child) {
+    if (parent instanceof SkiaLayout)
+        return parent.InsertChild(child);
+    child.IsChildrenItem = true;
+    parent.AddSubView(child);
+}
 // Record<string, unknown> absorbs members that react-reconciler 0.33 reads but @types 0.32 does not declare yet.
 const hostConfig = {
     supportsMutation: true,
@@ -85,18 +102,23 @@ const hostConfig = {
         if (!ctor)
             throw new Error(`DrawnUi: unknown control <${type}>`);
         const inst = new ctor();
+        // ConfigureStyles defaults first, the JSX props below override them (a TextSpan is not a control, it has none)
+        inst.ApplyInitialStyles?.(true);
         applyProps(inst, null, props);
         return inst;
     },
     createTextInstance(text) {
         throw new Error(`DrawnUi: raw text "${text}" is not allowed, use <SkiaLabel Text="..." />`);
     },
-    appendInitialChild: (parent, child) => parent.AddSubView(child),
-    appendChild: (parent, child) => parent.AddSubView(child),
+    // JSX children are the app's children (C# IsChildrenItem): a layout keeps them in JSX order inside the slots they
+    // occupy, so its own parts keep their place; an existing child passed again is a move
+    appendInitialChild: (parent, child) => appendChild(parent, child),
+    appendChild: (parent, child) => appendChild(parent, child),
     insertBefore: (parent, child, before) => {
-        const index = parent instanceof SkiaLayout ? parent.Views.indexOf(before)
-            : parent instanceof SkiaLabel ? parent.Spans.indexOf(before) : 0;
-        parent.InsertSubView(index, child);
+        if (parent instanceof SkiaLayout)
+            return parent.InsertChild(child, before);
+        child.IsChildrenItem = true;
+        parent.InsertSubView(parent instanceof SkiaLabel ? parent.Spans.indexOf(before) : 0, child);
     },
     removeChild: (parent, child) => parent.RemoveSubView(child),
     appendChildToContainer: (canvas, child) => { canvas.Content = child; },

package/dist/vite/index.d.ts

@@ -1,4 +1,13 @@
 import type { Plugin } from "vite";
+/**
+ * Versioned addresses for the files of the public folder (fonts, images, sprites, shaders, Lottie, favicon). Their
+ * names never change, and a browser or CDN may keep them for hours, so after a publish a returning visitor could
+ * get new code with an old file. On build every public file gets a short content hash: index.html receives the map
+ * as `globalThis.DrawnUiAssetStamps` (read by `Super.ResolveAssetUrl`, which every engine loader fetches through)
+ * and its own `href` / `src` links to public files get `?v=<hash>`. A changed file gets a new address, an unchanged
+ * one keeps its address and stays cached. Bundled files (hashed names) need nothing. The dev server is left alone.
+ */
+export declare function drawnUiAssetStamps(): Plugin;
 export interface DrawnUiStaticOptions {
     /**
      * Pages to generate, as URL hashes / paths appended to the site root ("" = the root page, "#/shapes"...).

package/dist/vite/index.js

@@ -1,9 +1,42 @@
 /**
- * Vite helpers for DrawnUi.React apps: `import { drawnUiStatic } from "drawnui-react/vite"`.
+ * Vite helpers for DrawnUi.React apps: `import { drawnUiStatic, drawnUiAssetStamps } from "drawnui-react/vite"`.
  * Build-time only; the runtime bundle never imports this module and the frame loop knows nothing about it.
  */
-import { readFileSync, writeFileSync } from "node:fs";
-import { resolve } from "node:path";
+import { createHash } from "node:crypto";
+import { readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+/**
+ * Versioned addresses for the files of the public folder (fonts, images, sprites, shaders, Lottie, favicon). Their
+ * names never change, and a browser or CDN may keep them for hours, so after a publish a returning visitor could
+ * get new code with an old file. On build every public file gets a short content hash: index.html receives the map
+ * as `globalThis.DrawnUiAssetStamps` (read by `Super.ResolveAssetUrl`, which every engine loader fetches through)
+ * and its own `href` / `src` links to public files get `?v=<hash>`. A changed file gets a new address, an unchanged
+ * one keeps its address and stays cached. Bundled files (hashed names) need nothing. The dev server is left alone.
+ */
+export function drawnUiAssetStamps() {
+    let stamps = {};
+    return {
+        name: "drawnui-asset-stamps",
+        apply: "build",
+        configResolved(config) {
+            const dir = config.publicDir;
+            if (!dir)
+                return;
+            for (const rel of readdirSync(dir, { recursive: true })) {
+                const file = join(dir, rel);
+                if (statSync(file).isFile())
+                    stamps[rel.replace(/\\/g, "/")] = createHash("sha256").update(readFileSync(file)).digest("hex").slice(0, 10);
+            }
+        },
+        transformIndexHtml(html) {
+            const stamped = html.replace(/\b(href|src)="([^"?#:]+)"/g, (m, attr, url) => {
+                const v = stamps[url.replace(/^\.?\//, "")];
+                return v ? `${attr}="${url}?v=${v}"` : m;
+            });
+            return { html: stamped, tags: [{ tag: "script", children: `globalThis.DrawnUiAssetStamps=${JSON.stringify(stamps)}`, injectTo: "head-prepend" }] };
+        },
+    };
+}
 /**
  * Generates visible, semantic HTML for crawlers and AI agents from the app's own accessibility tree, at build time.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.2",
+  "version": "0.1.0-preview.21",
   "description": "DrawnUi for React: the DrawnUi (.NET) drawn-UI engine in TypeScript on CanvasKit (Skia WASM). Same controls, same PascalCase API as DrawnUi.Net.",
   "license": "MIT",
   "author": "Nick Kovalsky (AppoMobi)",
@@ -53,6 +53,32 @@
     "typecheck": "tsc --noEmit",
     "build": "tsc --noEmit && node dev/build-samples.mjs",
     "sync:skills": "node dev/sync-skills.mjs",
+    "check:recycling": "node dev/check.mjs dev/check-recycling.ts",
+    "check:keyboard": "node dev/check.mjs dev/check-keyboard.ts",
+    "check:wheel": "node dev/check.mjs dev/check-wheel.ts",
+    "check:children": "node dev/check.mjs dev/check-children.tsx",
+    "check:composite": "node dev/check.mjs dev/check-composite.tsx",
+    "check:hover": "node dev/check.mjs dev/check-hover.ts",
+    "check:grid-label": "node dev/check.mjs dev/check-grid-label.ts",
+    "check:snap": "node dev/check.mjs dev/check-snap.ts",
+    "check:game": "node dev/check.mjs dev/check-game.ts",
+    "check:animation": "node dev/check.mjs dev/check-animation.ts",
+    "check:shape": "node dev/check.mjs dev/check-shape.ts",
+    "check:label": "node dev/check.mjs dev/check-label.ts",
+    "check:image": "node dev/check.mjs dev/check-image.ts",
+    "check:longpress": "node dev/check.mjs dev/check-longpress.ts",
+    "check:hidden": "node dev/check.mjs dev/check-hidden.ts",
+    "check:shell": "node dev/check.mjs dev/check-shell.tsx",
+    "check:wheel-routing": "node dev/check.mjs dev/check-wheel-routing.ts",
+    "check:velocity": "node dev/check.mjs dev/check-velocity.ts",
+    "check:scroll-index": "node dev/check.mjs dev/check-scroll-index.ts",
+    "check:culling": "node dev/check.mjs dev/check-culling.ts",
+    "check:responds": "node dev/check.mjs dev/check-responds.ts",
+    "check:3d": "node dev/check.mjs dev/check-3d.ts",
+    "check:gesture-owner": "node dev/check.mjs dev/check-gesture-owner.ts",
+    "check:shader-cache": "node dev/check.mjs dev/check-shader-cache.ts",
+    "check:shader-content": "node dev/check.mjs dev/check-shader-content.ts",
+    "check:backdrop": "node dev/check.mjs dev/check-backdrop.ts",
     "site:extras": "node dev/site-extras.mjs dist/demo",
     "build:lib": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json",
     "prepublishOnly": "npm run build:lib",
@@ -65,8 +91,12 @@
     "vite": ">=5"
   },
   "peerDependenciesMeta": {
-    "playwright-core": { "optional": true },
-    "vite": { "optional": true }
+    "playwright-core": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
   },
   "dependencies": {
     "canvaskit-wasm": "^0.42.0",