drawnui-react 0.1.0-preview.1

package/dist/react/index.d.ts

@@ -0,0 +1,110 @@
+import { type CSSProperties, type FC, type ReactNode, type Ref } from "react";
+import { Canvas as CanvasView } from "../core/Canvas";
+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 { SkiaSwitch as SkiaSwitchCtrl } from "../controls/SkiaSwitch";
+import type { SkiaCheckbox as SkiaCheckboxCtrl } from "../controls/SkiaCheckbox";
+import type { SkiaRadioButton as SkiaRadioButtonCtrl } from "../controls/SkiaRadioButton";
+import type { SkiaProgress as SkiaProgressCtrl } from "../controls/SkiaProgress";
+import type { SkiaSlider as SkiaSliderCtrl } from "../controls/SkiaSlider";
+import type { SkiaCarousel as SkiaCarouselCtrl } from "../controls/SkiaCarousel";
+import type { SkiaShaderCarousel as SkiaShaderCarouselCtrl } from "../controls/SkiaShaderCarousel";
+import type { SkiaDrawer as SkiaDrawerCtrl } from "../controls/SkiaDrawer";
+import type { SkiaLayout as SkiaLayoutCtrl } from "../controls/SkiaLayout";
+import type { SkiaHotspot as SkiaHotspotCtrl } from "../controls/SkiaHotspot";
+import type { SkiaButton as SkiaButtonCtrl } from "../controls/SkiaButton";
+import type { SkiaImage as SkiaImageCtrl } from "../controls/SkiaImage";
+import type { SkiaImageTiles as SkiaImageTilesCtrl } from "../controls/SkiaImageTiles";
+import type { SkiaDecoratedGrid as SkiaDecoratedGridCtrl } from "../controls/SkiaDecoratedGrid";
+import type { SkiaScrollBar as SkiaScrollBarCtrl } from "../controls/SkiaScrollBar";
+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 type { SkiaSprite as SkiaSpriteCtrl } from "../controls/SkiaSprite";
+import type { SkiaSpriteSet as SkiaSpriteSetCtrl } from "../controls/SkiaSpriteSet";
+import type { SkiaLottie as SkiaLottieCtrl } from "../controls/SkiaLottie";
+import type { SkiaGif as SkiaGifCtrl } from "../controls/SkiaGif";
+import { SkiaScroll as SkiaScrollCtrl } from "../controls/SkiaScroll";
+import type { SkiaShape as SkiaShapeCtrl } from "../controls/SkiaShape";
+import type { Color, RenderingModeType } from "../core/Types";
+import type { GesturesMode } from "../core/Gestures";
+/** Public settable properties of a control become its JSX props, same PascalCase names as C#. */
+type PropsOf<T> = Partial<{
+    [K in keyof T as T[K] extends Function ? 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];
+}>;
+/** `ref` receives the engine control instance (react-reconciler getPublicInstance). */
+type LeafProps<T> = PropsOf<T> & {
+    ref?: Ref<T>;
+};
+type LayoutProps<T> = PropsOf<T> & {
+    children?: ReactNode;
+    ref?: Ref<T>;
+};
+/** Typed JSX tags resolved by the reconciler Registry. */
+export declare const SkiaLayout: FC<LayoutProps<SkiaLayoutCtrl>>;
+export declare const SkiaStack: FC<LayoutProps<SkiaLayoutCtrl>>;
+export declare const SkiaRow: FC<LayoutProps<SkiaLayoutCtrl>>;
+export declare const SkiaLayer: FC<LayoutProps<SkiaLayoutCtrl>>;
+export declare const SkiaWrap: FC<LayoutProps<SkiaLayoutCtrl>>;
+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>>;
+/** 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). */
+export declare const TextSpan: FC<LeafProps<TextSpanCtrl>>;
+export declare const SkiaHotspot: FC<LeafProps<SkiaHotspotCtrl>>;
+export declare const SkiaButton: FC<LeafProps<SkiaButtonCtrl>>;
+export declare const SkiaImage: FC<LeafProps<SkiaImageCtrl>>;
+/** Source repeated as TileWidth x TileHeight tiles over the box (C# SkiaImageTiles). */
+export declare const SkiaImageTiles: FC<LeafProps<SkiaImageTilesCtrl>>;
+export declare const SkiaSvg: FC<LeafProps<SkiaSvgCtrl>>;
+/** Blurs / tints what is painted beneath it (C# SkiaBackdrop); children draw first. */
+export declare const SkiaBackdrop: FC<LayoutProps<SkiaBackdropCtrl>>;
+/** Drawn text input (C# SkiaEditor): Text, PlaceholderText, MaxLines, IsPassword, ControlStyle, TextChanged / TextSubmitted. */
+export declare const SkiaEditor: FC<LeafProps<SkiaEditorCtrl>>;
+/** Spritesheet player (C# SkiaSprite): Source, Columns, Rows, FramesPerSecond, FrameSequence. */
+export declare const SkiaSprite: FC<LeafProps<SkiaSpriteCtrl>>;
+/** Stateful sprite switcher (C# SkiaSpriteSet): Define() per State through a ref. */
+export declare const SkiaSpriteSet: FC<LayoutProps<SkiaSpriteSetCtrl>>;
+export declare const SkiaLottie: FC<LeafProps<SkiaLottieCtrl>>;
+export declare const SkiaGif: FC<LeafProps<SkiaGifCtrl>>;
+export declare const SkiaScroll: FC<LayoutProps<SkiaScrollCtrl>>;
+/** Default scroll bar overlay (C# SkiaScrollBar); as a SkiaScroll child with Tag="ScrollBar" / "ScrollBarHorizontal". */
+export declare const SkiaScrollBar: FC<LayoutProps<SkiaScrollBarCtrl>>;
+/** Pull-to-refresh view base (C# RefreshIndicator); as a SkiaScroll child with Tag="RefreshIndicator", put the visuals inside. */
+export declare const RefreshIndicator: FC<LayoutProps<RefreshIndicatorCtrl>>;
+export declare const SkiaShape: FC<LayoutProps<SkiaShapeCtrl>>;
+export declare const SkiaFrame: FC<LayoutProps<SkiaShapeCtrl>>;
+export declare const SkiaSwitch: FC<LeafProps<SkiaSwitchCtrl>>;
+export declare const SkiaCheckbox: FC<LeafProps<SkiaCheckboxCtrl>>;
+export declare const SkiaRadioButton: FC<LeafProps<SkiaRadioButtonCtrl>>;
+export declare const SkiaProgress: FC<LeafProps<SkiaProgressCtrl>>;
+export declare const SkiaSlider: FC<LeafProps<SkiaSliderCtrl>>;
+export declare const SkiaCarousel: FC<LayoutProps<SkiaCarouselCtrl>>;
+/** Carousel whose slide changes are rendered by an SkSL transition (C# SkiaShaderCarousel); slides need UseCache="Image". */
+export declare const SkiaShaderCarousel: FC<LayoutProps<SkiaShaderCarouselCtrl>>;
+export declare const SkiaDrawer: FC<LayoutProps<SkiaDrawerCtrl>>;
+export interface CanvasProps {
+    BackgroundColor?: Color;
+    RenderingMode?: RenderingModeType;
+    /** Disabled (default) / Enabled / Lock, like DrawnUi Canvas.Gestures. */
+    Gestures?: GesturesMode;
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+    /** Receives the engine Canvas (FPS, FrameTime, RenderingScale...). */
+    ref?: Ref<CanvasView>;
+}
+/**
+ * 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 }: CanvasProps): import("react").JSX.Element;
+export type { SkiaControl };
+export * from "../index";
+export * from "./SkiaShell";

package/dist/react/index.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Canvas as CanvasView } from "../core/Canvas";
+import { SkiaScroll as SkiaScrollCtrl } from "../controls/SkiaScroll";
+import { createDrawnRoot } from "./reconciler";
+/** Typed JSX tags resolved by the reconciler Registry. */
+export const SkiaLayout = "SkiaLayout";
+export const SkiaStack = "SkiaStack";
+export const SkiaRow = "SkiaRow";
+export const SkiaLayer = "SkiaLayer";
+export const SkiaWrap = "SkiaWrap";
+export const SkiaGrid = "SkiaGrid";
+/** Grid drawing gradient separator lines in its spacing (C# SkiaDecoratedGrid). */
+export const SkiaDecoratedGrid = "SkiaDecoratedGrid";
+export const SkiaLabel = "SkiaLabel";
+/** 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). */
+export const TextSpan = "TextSpan";
+export const SkiaHotspot = "SkiaHotspot";
+export const SkiaButton = "SkiaButton";
+export const SkiaImage = "SkiaImage";
+/** Source repeated as TileWidth x TileHeight tiles over the box (C# SkiaImageTiles). */
+export const SkiaImageTiles = "SkiaImageTiles";
+export const SkiaSvg = "SkiaSvg";
+/** Blurs / tints what is painted beneath it (C# SkiaBackdrop); children draw first. */
+export const SkiaBackdrop = "SkiaBackdrop";
+/** Drawn text input (C# SkiaEditor): Text, PlaceholderText, MaxLines, IsPassword, ControlStyle, TextChanged / TextSubmitted. */
+export const SkiaEditor = "SkiaEditor";
+/** Spritesheet player (C# SkiaSprite): Source, Columns, Rows, FramesPerSecond, FrameSequence. */
+export const SkiaSprite = "SkiaSprite";
+/** Stateful sprite switcher (C# SkiaSpriteSet): Define() per State through a ref. */
+export const SkiaSpriteSet = "SkiaSpriteSet";
+export const SkiaLottie = "SkiaLottie";
+export const SkiaGif = "SkiaGif";
+export const SkiaScroll = "SkiaScroll";
+/** Default scroll bar overlay (C# SkiaScrollBar); as a SkiaScroll child with Tag="ScrollBar" / "ScrollBarHorizontal". */
+export const SkiaScrollBar = "SkiaScrollBar";
+/** Pull-to-refresh view base (C# RefreshIndicator); as a SkiaScroll child with Tag="RefreshIndicator", put the visuals inside. */
+export const RefreshIndicator = "RefreshIndicator";
+export const SkiaShape = "SkiaShape";
+export const SkiaFrame = "SkiaFrame";
+export const SkiaSwitch = "SkiaSwitch";
+export const SkiaCheckbox = "SkiaCheckbox";
+export const SkiaRadioButton = "SkiaRadioButton";
+export const SkiaProgress = "SkiaProgress";
+export const SkiaSlider = "SkiaSlider";
+export const SkiaCarousel = "SkiaCarousel";
+/** Carousel whose slide changes are rendered by an SkSL transition (C# SkiaShaderCarousel); slides need UseCache="Image". */
+export const SkiaShaderCarousel = "SkiaShaderCarousel";
+export const SkiaDrawer = "SkiaDrawer";
+/**
+ * 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 }) {
+    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;
+        view.current = v;
+        root.current = createDrawnRoot(v);
+        setEngine(v);
+        return () => { root.current?.unmount(); v.Dispose(); view.current = null; root.current = null; setEngine(null); };
+        // RenderingMode is read once at surface creation, like DrawnUi.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // After the effect above, so the handle resolves to the created view.
+    useImperativeHandle(viewRef, () => view.current, []);
+    useLayoutEffect(() => {
+        const v = view.current;
+        if (BackgroundColor !== undefined && v.BackgroundColor !== BackgroundColor) {
+            v.BackgroundColor = BackgroundColor;
+            v.Update();
+        }
+        v.Gestures = Gestures ?? "Disabled";
+        root.current.render(children);
+    });
+    // The drawn surface is aria-hidden; the overlay is the accessibility tree (DrawnUi.Blazor pattern).
+    return (_jsxs("div", { className: className, style: { position: "relative", ...style }, children: [_jsx("canvas", { ref: ref, "aria-hidden": true, style: { display: "block", width: "100%", height: "100%" } }), engine && _jsx(AccessibilityOverlay, { view: engine })] }));
+}
+const A11Y_CSS = `
+.drawnui-a11y-overlay{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none}
+.drawnui-a11y-node{position:absolute;margin:0;padding:0;border:0;background:transparent;color:transparent;overflow:hidden;white-space:nowrap;pointer-events:none;font:inherit;user-select:none;-webkit-user-select:none}
+.drawnui-a11y-node::selection,.drawnui-a11y-node *::selection{background:transparent;color:transparent}
+.drawnui-a11y-node:focus{outline:none}
+.drawnui-a11y-node:focus-visible{outline:3px solid rgba(13,110,253,.85);outline-offset:1px;border-radius:3px}
+.drawnui-a11y-text{overflow:visible}
+.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}
+`;
+/**
+ * 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.
+ */
+function AccessibilityOverlay({ view }) {
+    const [nodes, setNodes] = useState(() => view.AccessibilityManager.Snapshot);
+    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(); };
+    }, [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);
+    const hasNodes = nodes.length > 0;
+    useEffect(() => {
+        const el = overlayRef.current;
+        if (!el)
+            return;
+        const forward = (e) => { e.preventDefault(); view.Element.dispatchEvent(new WheelEvent("wheel", { deltaX: e.deltaX, deltaY: e.deltaY, deltaMode: e.deltaMode, clientX: e.clientX, clientY: e.clientY, ctrlKey: e.ctrlKey, shiftKey: e.shiftKey, bubbles: false, cancelable: true })); };
+        el.addEventListener("wheel", forward, { passive: false });
+        return () => el.removeEventListener("wheel", forward);
+    }, [view, hasNodes]);
+    // the browser lays the invisible lines out with its own shaping; stretch each line with letter-spacing to the drawn width
+    // so the selection highlight covers the drawn glyphs end to end
+    useLayoutEffect(() => {
+        const el = overlayRef.current;
+        if (!el)
+            return;
+        for (const span of el.querySelectorAll(".drawnui-a11y-text>span")) {
+            const want = parseFloat(span.dataset.w ?? "0"), n = (span.textContent ?? "").replace(/\n$/, "").length - 1;
+            span.style.letterSpacing = "0px";
+            if (want <= 0 || n <= 0)
+                continue;
+            const have = span.getBoundingClientRect().width;
+            if (Math.abs(have - want) > 0.5)
+                span.style.letterSpacing = `${(want - have) / n}px`;
+        }
+    }, [nodes]);
+    if (!hasNodes)
+        return null;
+    // the browser scrolls an overflow:hidden container to reveal a focused child; the overlay must stay pinned to the canvas
+    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 ? (
+                // 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)) : (
+                // 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));
+            })] }));
+}
+// One import for apps: React tags + every engine type (Colors, Thickness, Super, gestures, animators...).
+// The engine `Canvas` class is shadowed by the React <Canvas> above; reach it via "drawnui-react/core".
+export * from "../index";
+// React-level SkiaShell (routes, back nav bar, useShell())
+export * from "./SkiaShell";

package/dist/react/reconciler.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+import type { Canvas } from "../core/Canvas";
+import { SkiaControl } from "../core/SkiaControl";
+import { TextSpan } from "../controls/TextSpan";
+/** Anything React can mount: controls, plus TextSpan (a SkiaLabel child that is not a control, as in C#). */
+type HostInstance = SkiaControl | TextSpan;
+/** JSX tag name -> engine class. Add a control here to expose it to React. */
+export declare const Registry: Record<string, new () => HostInstance>;
+/** Creates a React root whose container is an engine Canvas. */
+export declare function createDrawnRoot(canvas: Canvas): {
+    render(children: ReactNode): void;
+    unmount(): void;
+};
+export {};

package/dist/react/reconciler.js

@@ -0,0 +1,160 @@
+import { createContext } from "react";
+import Reconciler from "react-reconciler";
+import { ConcurrentRoot, DefaultEventPriority } from "react-reconciler/constants";
+import { SkiaLabel } from "../controls/SkiaLabel";
+import { TextSpan } from "../controls/TextSpan";
+import { SkiaRichLabel } from "../controls/SkiaRichLabel";
+import { SkiaSwitch } from "../controls/SkiaSwitch";
+import { SkiaCheckbox } from "../controls/SkiaCheckbox";
+import { SkiaRadioButton } from "../controls/SkiaRadioButton";
+import { SkiaProgress } from "../controls/SkiaProgress";
+import { SkiaSlider } from "../controls/SkiaSlider";
+import { SkiaCarousel } from "../controls/SkiaCarousel";
+import { SkiaShaderCarousel } from "../controls/SkiaShaderCarousel";
+import { SkiaDrawer } from "../controls/SkiaDrawer";
+import { SkiaGrid, SkiaLayer, SkiaLayout, SkiaRow, SkiaStack, SkiaWrap } from "../controls/SkiaLayout";
+import { SkiaHotspot } from "../controls/SkiaHotspot";
+import { SkiaButton } from "../controls/SkiaButton";
+import { SkiaImage } from "../controls/SkiaImage";
+import { SkiaImageTiles } from "../controls/SkiaImageTiles";
+import { SkiaDecoratedGrid } from "../controls/SkiaDecoratedGrid";
+import { SkiaScrollBar } from "../controls/SkiaScrollBar";
+import { RefreshIndicator } from "../controls/RefreshIndicator";
+import { SkiaSvg } from "../controls/SkiaSvg";
+import { SkiaBackdrop } from "../controls/SkiaBackdrop";
+import { SkiaEditor } from "../controls/SkiaEditor";
+import { SkiaSprite } from "../controls/SkiaSprite";
+import { SkiaSpriteSet } from "../controls/SkiaSpriteSet";
+import { SkiaLottie } from "../controls/SkiaLottie";
+import { SkiaGif } from "../controls/SkiaGif";
+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,
+    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"]);
+/**
+ * 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;
+    for (const k in next) {
+        if (SKIP.has(k) || (prev && prev[k] === next[k]))
+            continue;
+        inst[k] = next[k];
+        if (typeof next[k] === "function")
+            continue;
+        if (REPAINT_ONLY.has(k))
+            repaint = true;
+        else
+            changed = true;
+    }
+    if (prev)
+        for (const k in prev)
+            if (!SKIP.has(k) && !(k in next)) {
+                inst[k] = new inst.constructor()[k];
+                changed = true;
+            }
+    if (changed && prev)
+        inst.Update();
+    else if (repaint && prev)
+        inst.RepaintComposition?.();
+}
+let currentUpdatePriority = DefaultEventPriority;
+const noop = () => { };
+const hostContext = {};
+// Record<string, unknown> absorbs members that react-reconciler 0.33 reads but @types 0.32 does not declare yet.
+const hostConfig = {
+    supportsMutation: true,
+    supportsPersistence: false,
+    supportsHydration: false,
+    isPrimaryRenderer: false,
+    warnsIfNotActing: false,
+    noTimeout: -1,
+    scheduleTimeout: setTimeout,
+    cancelTimeout: clearTimeout,
+    supportsMicrotasks: true,
+    scheduleMicrotask: queueMicrotask,
+    createInstance(type, props) {
+        const ctor = Registry[type];
+        if (!ctor)
+            throw new Error(`DrawnUi: unknown control <${type}>`);
+        const inst = new ctor();
+        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),
+    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);
+    },
+    removeChild: (parent, child) => parent.RemoveSubView(child),
+    appendChildToContainer: (canvas, child) => { canvas.Content = child; },
+    insertInContainerBefore: (canvas, child) => { canvas.Content = child; },
+    removeChildFromContainer: (canvas, child) => { if (canvas.Content === child)
+        canvas.Content = undefined; },
+    clearContainer: (canvas) => { canvas.Content = undefined; },
+    commitUpdate: (inst, _type, prev, next) => applyProps(inst, prev, next),
+    commitTextUpdate: noop,
+    commitMount: noop,
+    finalizeInitialChildren: () => false,
+    shouldSetTextContent: () => false,
+    resetTextContent: noop,
+    hideInstance: (inst) => { inst.IsVisible = false; inst.Update(); },
+    unhideInstance: (inst) => { inst.IsVisible = true; inst.Update(); },
+    hideTextInstance: noop,
+    unhideTextInstance: noop,
+    getRootHostContext: () => hostContext,
+    getChildHostContext: (ctx) => ctx,
+    getPublicInstance: (inst) => inst,
+    prepareForCommit: () => null,
+    resetAfterCommit: noop,
+    preparePortalMount: noop,
+    getInstanceFromNode: () => null,
+    beforeActiveInstanceBlur: noop,
+    afterActiveInstanceBlur: noop,
+    prepareScopeUpdate: noop,
+    getInstanceFromScope: () => null,
+    // React deleted the element: free the engine resources (C# Dispose); children are disposed by their parent first
+    detachDeletedInstance: (inst) => { inst.Dispose?.(); },
+    setCurrentUpdatePriority: (p) => { currentUpdatePriority = p; },
+    getCurrentUpdatePriority: () => currentUpdatePriority,
+    resolveUpdatePriority: () => currentUpdatePriority || DefaultEventPriority,
+    shouldAttemptEagerTransition: () => false,
+    trackSchedulerEvent: noop,
+    resolveEventType: () => null,
+    resolveEventTimeStamp: () => -1.1,
+    requestPostPaintCallback: noop,
+    maySuspendCommit: () => false,
+    maySuspendCommitOnUpdate: () => false,
+    maySuspendCommitInSyncRender: () => false,
+    preloadInstance: () => true,
+    startSuspendingCommit: noop,
+    suspendInstance: noop,
+    suspendOnActiveViewTransition: noop,
+    waitForCommitToBeReady: () => null,
+    getSuspendedCommitReason: () => null,
+    resetFormInstance: noop,
+    NotPendingTransition: null,
+    HostTransitionContext: createContext(null),
+};
+const reconciler = Reconciler(hostConfig);
+const onError = (e) => console.error("DrawnUi.React:", e);
+/** Creates a React root whose container is an engine Canvas. */
+export function createDrawnRoot(canvas) {
+    const container = reconciler.createContainer(canvas, ConcurrentRoot, null, false, null, "", onError, onError, onError, noop, null);
+    return {
+        render(children) { reconciler.updateContainer(children, container, null, null); },
+        unmount() { reconciler.updateContainer(null, container, null, null); },
+    };
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "drawnui-react",
+  "version": "0.1.0-preview.1",
+  "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)",
+  "homepage": "https://helloreact.drawnui.net",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DrawnUi/DrawnUi.React.git"
+  },
+  "bugs": {
+    "url": "https://github.com/DrawnUi/DrawnUi.React/issues"
+  },
+  "keywords": ["drawnui", "skia", "canvaskit", "react", "canvas", "ui", "drawn-ui", "react-reconciler"],
+  "type": "module",
+  "main": "./dist/react/index.js",
+  "module": "./dist/react/index.js",
+  "types": "./dist/react/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./core": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": ["dist", "README.md", "LICENSE", "SKIPPED.md", "PARITY.md"],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite samples/demo",
+    "typecheck": "tsc --noEmit",
+    "build": "tsc --noEmit && node dev/build-samples.mjs",
+    "build:lib": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build:lib",
+    "preview": "vite preview samples/demo"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "canvaskit-wasm": "^0.42.0",
+    "react-reconciler": "^0.33.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@types/react-reconciler": "^0.32.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.0",
+    "vite": "^7.0.0"
+  }
+}