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

package/dist/react/index.d.ts

@@ -31,9 +31,17 @@ 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#. */
+/**
+ * Public settable properties of a control become its JSX props, same PascalCase names as C#.
+ *
+ * Function-typed members split in two: a METHOD (`Update(): void`) is not a prop and is dropped,
+ * while an EVENT is declared optional (`Tapped?: (sender, e) => void`) and is exactly the thing a
+ * caller passes in JSX. Optionality is the discriminator; without it every handler was missing
+ * from the props type, so `<SkiaButton Tapped={…} />` worked at runtime but failed to typecheck
+ * and never appeared in completion.
+ */
 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];
+    [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];
 }>;
 /** `ref` receives the engine control instance (react-reconciler getPublicInstance). */
 type LeafProps<T> = PropsOf<T> & {
@@ -92,19 +100,29 @@ 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;
     className?: string;
     /** Receives the engine Canvas (FPS, FrameTime, RenderingScale...). */
     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 }: 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

@@ -49,22 +49,40 @@ 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";
+/**
+ * One-shot, at the first Canvas mount: removes the HTML the `drawnUiStatic` Vite plugin generated for crawlers
+ * (`[data-drawnui-static]`, placed after the mount element). A querySelectorAll once per page, never again; an
+ * app built without the plugin finds nothing.
+ */
+let staticRemoved = false;
+function removeStaticContent() {
+    if (staticRemoved || typeof document === "undefined")
+        return;
+    staticRemoved = true;
+    for (const el of document.querySelectorAll("[data-drawnui-static]"))
+        el.remove();
+}
 /**
  * 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 }) {
+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);
+        removeStaticContent(); // the constructor drew frame 1: the crawlable block (drawnUiStatic) is duplicate content from here on
         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
@@ -78,6 +96,9 @@ export function Canvas({ BackgroundColor, RenderingMode, Gestures, children, sty
             v.Update();
         }
         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).

package/dist/react/reconciler.js

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

package/dist/vite/index.d.ts

@@ -0,0 +1,74 @@
+import type { Plugin } from "vite";
+export interface DrawnUiStaticOptions {
+    /**
+     * Pages to generate, as URL hashes / paths appended to the site root ("" = the root page, "#/shapes"...).
+     * Default: the root page plus every page a button on the root page navigates to (discovered by clicking it
+     * in the headless browser and reading the new location).
+     */
+    routes?: string[];
+    /** Id of the element the app mounts into; the generated HTML is placed right after it (or at `<!-- drawnui-static -->` if present). Default "root". */
+    container?: string;
+    /** Chrome executable. Default: the installed Google Chrome (playwright-core `channel: "chrome"`), or $CHROME_PATH. */
+    executablePath?: string;
+    /** Milliseconds the accessibility tree must stay unchanged before a page is read (the engine rebuilds it at most every 300 ms). Default 800. */
+    settleMs?: number;
+    /** Text of the generated top heading. Default: the document <title>. */
+    heading?: string;
+    /** Look of the block: `style` (CSS, default DEFAULT_STATIC_STYLE, `false` = none). */
+    render?: RenderStaticOptions;
+}
+/** One accessible control as read from the running app (the engine's accessibility snapshot, exposed as DOM). */
+export interface StaticNode {
+    Role: string;
+    Label: string;
+    Hint?: string;
+    Href?: string;
+}
+/**
+ * Generates visible, semantic HTML for crawlers and AI agents from the app's own accessibility tree, at build time.
+ *
+ * After `vite build` it serves the build (`vite preview`), opens it in headless Chrome, lets the engine measure,
+ * arrange and draw, reads the accessibility snapshot of every page (root + the pages its buttons open, or the
+ * `routes` you list) and writes ordinary HTML into `dist/index.html`: a heading becomes a heading, a button becomes
+ * a link to the page it opened, a label becomes a paragraph, a form control becomes a list item naming it. The
+ * overlay's own markup (transparent text over an `aria-hidden` canvas) is deliberately NOT copied — in a static
+ * file that reads as hidden text; this output is plain flow content, nothing hidden, nothing collapsed.
+ *
+ * Placement: right AFTER the mount element (`#root` by default), or wherever you put `<!-- drawnui-static -->` in
+ * index.html. With the usual layout (the mount element filling the viewport) it sits below the fold: a visitor
+ * sees the app area loading, the text is a scroll away and genuinely visible. Removal: the first `<Canvas>` that
+ * mounts removes every `[data-drawnui-static]` element once its engine has drawn frame 1 (one querySelectorAll,
+ * nothing in the frame loop; an app built without the plugin finds nothing). If the app never boots it stays.
+ * Removing it only shrinks the document below the fold; the mount element keeps its size, so nothing above the
+ * fold moves — except that a page which scrolled only because of the block loses its scrollbar (classic scrollbars
+ * on Windows/Linux then give the canvas those ~15 px back — set `html { scrollbar-gutter: stable }` so the
+ * canvas has the same width before and after boot; the demo does). If the mount element is a box inside a longer page, your own content below it moves
+ * up by the block's height when it goes; place the marker comment at the end of the body to avoid that.
+ *
+ * Two things to know:
+ * - Verify with `curl` or view-source, not DevTools after boot: the app removed it.
+ * - Crawlers that do not run JavaScript (GPTBot, ClaudeBot, CCBot, curl, link previews) read this HTML.
+ *   Googlebot renders JavaScript: it sees the booted page, i.e. the accessibility overlay (roles, labels, text).
+ *   Both come from the same accessibility tree, so they cannot drift — but a control without an
+ *   `AccessibilityRole` is invisible to both.
+ *
+ * Needs `playwright-core` (dev dependency of your app) and a Chrome to drive; GitHub's ubuntu runners have one.
+ * Usage: `plugins: [react(), drawnUiStatic()]`.
+ */
+export declare function drawnUiStatic(options?: DrawnUiStaticOptions): Plugin;
+/**
+ * Default look of the generated block, shipped inline so every app gets a calm "loading its contents" page out of
+ * the box. Everything inherits the page's font and text color (set `body { color }` for a dark site); surfaces are
+ * translucent so they read on light and dark backgrounds. Override by styling `.drawnui-static` (your stylesheet
+ * comes later in the document and wins), or pass `style: false` to ship no default style at all.
+ */
+export declare const DEFAULT_STATIC_STYLE = "\n.drawnui-static{max-width:820px;margin:0 auto;padding:32px 24px 48px;line-height:1.5;color:inherit}\n.drawnui-static h1{font-size:28px;font-weight:600;margin:0 0 4px}\n.drawnui-static h2{font-size:20px;font-weight:600;margin:28px 0 8px}\n.drawnui-static h3{font-size:16px;font-weight:600;margin:16px 0 4px;opacity:.9}\n.drawnui-static p{margin:0 0 8px;opacity:.85}\n.drawnui-static ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}\n.drawnui-static li{padding:10px 14px;border-radius:8px;background:rgba(128,128,128,.14)}\n.drawnui-static li a{color:inherit;text-decoration:none;display:block}\n.drawnui-static li b{font-weight:600;margin-right:6px}\n";
+export interface RenderStaticOptions {
+    /** CSS placed before the block; `false` ships none. Default DEFAULT_STATIC_STYLE. */
+    style?: string | false;
+}
+/**
+ * Accessibility nodes -> visible semantic HTML: one <section> per page (id = route), roles map to ordinary elements.
+ * Everything is open flow content; the block and its <style> carry data-drawnui-static so the app can remove them.
+ */
+export declare function renderStatic(heading: string, pages: Map<string, StaticNode[]>, options?: RenderStaticOptions): string;

package/dist/vite/index.js

@@ -0,0 +1,204 @@
+/**
+ * Vite helpers for DrawnUi.React apps: `import { drawnUiStatic } 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";
+/**
+ * Generates visible, semantic HTML for crawlers and AI agents from the app's own accessibility tree, at build time.
+ *
+ * After `vite build` it serves the build (`vite preview`), opens it in headless Chrome, lets the engine measure,
+ * arrange and draw, reads the accessibility snapshot of every page (root + the pages its buttons open, or the
+ * `routes` you list) and writes ordinary HTML into `dist/index.html`: a heading becomes a heading, a button becomes
+ * a link to the page it opened, a label becomes a paragraph, a form control becomes a list item naming it. The
+ * overlay's own markup (transparent text over an `aria-hidden` canvas) is deliberately NOT copied — in a static
+ * file that reads as hidden text; this output is plain flow content, nothing hidden, nothing collapsed.
+ *
+ * Placement: right AFTER the mount element (`#root` by default), or wherever you put `<!-- drawnui-static -->` in
+ * index.html. With the usual layout (the mount element filling the viewport) it sits below the fold: a visitor
+ * sees the app area loading, the text is a scroll away and genuinely visible. Removal: the first `<Canvas>` that
+ * mounts removes every `[data-drawnui-static]` element once its engine has drawn frame 1 (one querySelectorAll,
+ * nothing in the frame loop; an app built without the plugin finds nothing). If the app never boots it stays.
+ * Removing it only shrinks the document below the fold; the mount element keeps its size, so nothing above the
+ * fold moves — except that a page which scrolled only because of the block loses its scrollbar (classic scrollbars
+ * on Windows/Linux then give the canvas those ~15 px back — set `html { scrollbar-gutter: stable }` so the
+ * canvas has the same width before and after boot; the demo does). If the mount element is a box inside a longer page, your own content below it moves
+ * up by the block's height when it goes; place the marker comment at the end of the body to avoid that.
+ *
+ * Two things to know:
+ * - Verify with `curl` or view-source, not DevTools after boot: the app removed it.
+ * - Crawlers that do not run JavaScript (GPTBot, ClaudeBot, CCBot, curl, link previews) read this HTML.
+ *   Googlebot renders JavaScript: it sees the booted page, i.e. the accessibility overlay (roles, labels, text).
+ *   Both come from the same accessibility tree, so they cannot drift — but a control without an
+ *   `AccessibilityRole` is invisible to both.
+ *
+ * Needs `playwright-core` (dev dependency of your app) and a Chrome to drive; GitHub's ubuntu runners have one.
+ * Usage: `plugins: [react(), drawnUiStatic()]`.
+ */
+export function drawnUiStatic(options = {}) {
+    const container = options.container ?? "root";
+    const settleMs = options.settleMs ?? 800;
+    let config;
+    return {
+        name: "drawnui-static",
+        apply: "build",
+        configResolved(c) { config = c; },
+        async closeBundle() {
+            const file = resolve(config.root, config.build.outDir, "index.html");
+            const html = readFileSync(file, "utf8");
+            const marker = "<!-- drawnui-static -->";
+            const slot = html.includes(marker) ? marker : new RegExp(`<div\\b[^>]*\\bid="${container}"[^>]*>\\s*</div>`).exec(html)?.[0];
+            if (!slot) {
+                config.logger.warn(`drawnui-static: neither ${marker} nor an empty <div id="${container}"> in ${file}, nothing generated`);
+                return;
+            }
+            const { preview } = await import("vite");
+            const server = await preview({ configFile: config.configFile, root: config.root, mode: config.mode, logLevel: "warn", preview: { port: 0, strictPort: false, open: false } });
+            const origin = server.resolvedUrls?.local[0]?.replace(/\/$/, "") ?? "";
+            const base = config.base.replace(/\/$/, "");
+            const { chromium } = await import("playwright-core");
+            const browser = await chromium.launch(options.executablePath ?? process.env.CHROME_PATH ? { executablePath: options.executablePath ?? process.env.CHROME_PATH } : { channel: "chrome" });
+            try {
+                const page = await browser.newPage({ viewport: { width: 1280, height: 900 } });
+                const errors = [];
+                page.on("pageerror", (e) => errors.push(String(e)));
+                const url = (route) => `${origin}${base}/${route}`;
+                // the engine rebuilds the accessibility snapshot at most every 300 ms and only after a drawn frame:
+                // wait until the overlay has stopped changing
+                const readTree = async () => {
+                    let last = "", stableSince = Date.now(), started = Date.now();
+                    for (;;) {
+                        const nodes = await page.evaluate(() => [...document.querySelectorAll(".drawnui-a11y-node")].map((e) => ({
+                            Role: e.getAttribute("role") ?? "", Label: e.getAttribute("aria-label") ?? e.textContent ?? "", Hint: e.getAttribute("title") ?? undefined,
+                        })));
+                        const key = JSON.stringify(nodes);
+                        if (key !== last) {
+                            last = key;
+                            stableSince = Date.now();
+                        }
+                        else if (nodes.length && Date.now() - stableSince >= settleMs)
+                            return nodes;
+                        if (Date.now() - started > 20000)
+                            return nodes;
+                        await page.waitForTimeout(150);
+                    }
+                };
+                await page.goto(url(""));
+                const root = await readTree();
+                const pages = new Map([["", root]]);
+                if (options.routes) {
+                    for (const r of options.routes) {
+                        if (r === "")
+                            continue;
+                        await page.goto(url(r));
+                        pages.set(r, await readTree());
+                    }
+                }
+                else {
+                    // a button becomes a link to wherever it takes the user: click it, read the new location, come back
+                    for (let i = 0; i < root.length; i++) {
+                        if (root[i].Role !== "button")
+                            continue;
+                        await page.goto(url(""));
+                        await readTree();
+                        // activate through the overlay node (routed to the control as a Tapped), so buttons below the fold work too
+                        const activated = await page.evaluate((i) => { const el = document.querySelectorAll(".drawnui-a11y-node")[i]; if (!el)
+                            return false; el.click(); return true; }, i);
+                        if (!activated)
+                            continue;
+                        await page.waitForTimeout(400);
+                        const route = await page.evaluate(() => location.hash);
+                        if (!route || pages.has(route))
+                            continue;
+                        root[i].Href = route;
+                        pages.set(route, await readTree());
+                    }
+                }
+                if (errors.length)
+                    config.logger.warn(`drawnui-static: page errors while generating: ${errors.join("; ")}`);
+                const heading = options.heading ?? /<title>([^<]*)<\/title>/.exec(html)?.[1] ?? "";
+                const markup = renderStatic(heading, pages, options.render);
+                writeFileSync(file, html.replace(slot, () => (slot === marker ? markup : `${slot}\n${markup}`)));
+                config.logger.info(`drawnui-static: ${pages.size} page(s), ${[...pages.values()].reduce((n, p) => n + p.length, 0)} nodes after #${container} in ${file}`);
+            }
+            finally {
+                await browser.close();
+                await server.close();
+            }
+        },
+    };
+}
+const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+/**
+ * Default look of the generated block, shipped inline so every app gets a calm "loading its contents" page out of
+ * the box. Everything inherits the page's font and text color (set `body { color }` for a dark site); surfaces are
+ * translucent so they read on light and dark backgrounds. Override by styling `.drawnui-static` (your stylesheet
+ * comes later in the document and wins), or pass `style: false` to ship no default style at all.
+ */
+export const DEFAULT_STATIC_STYLE = `
+.drawnui-static{max-width:820px;margin:0 auto;padding:32px 24px 48px;line-height:1.5;color:inherit}
+.drawnui-static h1{font-size:28px;font-weight:600;margin:0 0 4px}
+.drawnui-static h2{font-size:20px;font-weight:600;margin:28px 0 8px}
+.drawnui-static h3{font-size:16px;font-weight:600;margin:16px 0 4px;opacity:.9}
+.drawnui-static p{margin:0 0 8px;opacity:.85}
+.drawnui-static ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
+.drawnui-static li{padding:10px 14px;border-radius:8px;background:rgba(128,128,128,.14)}
+.drawnui-static li a{color:inherit;text-decoration:none;display:block}
+.drawnui-static li b{font-weight:600;margin-right:6px}
+`;
+/**
+ * Accessibility nodes -> visible semantic HTML: one <section> per page (id = route), roles map to ordinary elements.
+ * Everything is open flow content; the block and its <style> carry data-drawnui-static so the app can remove them.
+ */
+export function renderStatic(heading, pages, options = {}) {
+    const style = options.style === undefined ? DEFAULT_STATIC_STYLE : options.style;
+    const out = [];
+    if (style)
+        out.push(`<style data-drawnui-static>${style}</style>`);
+    out.push(`<div class="drawnui-static" data-drawnui-static>`);
+    if (heading)
+        out.push(`<h1>${esc(heading)}</h1>`);
+    for (const [route, nodes] of pages) {
+        const titleNode = nodes.find((n) => n.Role === "heading" && n.Label.trim());
+        const title = titleNode?.Label.trim() ?? route.replace(/^#\/?/, "");
+        const id = route ? ` id="${esc(route.replace(/^#\/?/, ""))}"` : "";
+        out.push(`<section${id}>`);
+        if (route)
+            out.push(`<h2>${esc(title)}</h2>`);
+        let list = [];
+        const flush = () => { if (list.length) {
+            out.push(`<ul>${list.join("")}</ul>`);
+            list = [];
+        } };
+        for (const n of nodes) {
+            const label = n.Label.trim();
+            if (!label || (n === titleNode && route))
+                continue;
+            const hint = n.Hint?.trim();
+            switch (n.Role) {
+                case "heading":
+                    flush();
+                    out.push(route ? `<h3>${esc(label)}</h3>` : `<h2>${esc(label)}</h2>`);
+                    break;
+                case "button":
+                case "link":
+                case "tab":
+                case "menuitem":
+                    list.push(`<li>${n.Href ? `<a href="${esc(n.Href)}"><b>${esc(label)}</b>` : `<b>${esc(label)}</b>`}${hint ? ` ${esc(hint)}` : ""}${n.Href ? "</a>" : ""}</li>`);
+                    break;
+                case "text":
+                case "status":
+                case "alert":
+                    flush();
+                    out.push(`<p>${esc(label)}</p>`);
+                    break;
+                case "img": break;
+                default: list.push(`<li>${esc(label)}${hint ? ` — ${esc(hint)}` : ""} <small>(${esc(n.Role)})</small></li>`);
+            }
+        }
+        flush();
+        out.push(`</section>`);
+    }
+    out.push(`</div>`);
+    return out.join("\n");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.1",
+  "version": "0.1.0-preview.11",
   "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)",
@@ -12,7 +12,16 @@
   "bugs": {
     "url": "https://github.com/DrawnUi/DrawnUi.React/issues"
   },
-  "keywords": ["drawnui", "skia", "canvaskit", "react", "canvas", "ui", "drawn-ui", "react-reconciler"],
+  "keywords": [
+    "drawnui",
+    "skia",
+    "canvaskit",
+    "react",
+    "canvas",
+    "ui",
+    "drawn-ui",
+    "react-reconciler"
+  ],
   "type": "module",
   "main": "./dist/react/index.js",
   "module": "./dist/react/index.js",
@@ -26,21 +35,42 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.js"
+    },
     "./package.json": "./package.json"
   },
-  "files": ["dist", "README.md", "LICENSE", "SKIPPED.md", "PARITY.md"],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "SKIPPED.md"
+  ],
   "sideEffects": false,
   "scripts": {
     "dev": "vite samples/demo",
     "typecheck": "tsc --noEmit",
     "build": "tsc --noEmit && node dev/build-samples.mjs",
+    "sync:skills": "node dev/sync-skills.mjs",
+    "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",
     "preview": "vite preview samples/demo"
   },
   "peerDependencies": {
+    "playwright-core": ">=1.40",
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "vite": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "playwright-core": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
   },
   "dependencies": {
     "canvaskit-wasm": "^0.42.0",
@@ -52,6 +82,7 @@
     "@types/react-dom": "^19.2.0",
     "@types/react-reconciler": "^0.32.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "playwright-core": "^1.62.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "typescript": "^5.9.0",