quickwin 1.0.0

package/lib/react-qw/components/Slider.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from 'react';
+import * as gui from 'gui';
+export const Slider = forwardRef(({ value, onChange, min = 0, max = 100, vertical = false, disabled, style }, ref) => {
+    const wrapperRef = useRef(null);
+    const sliderRef = useRef(null);
+    useEffect(() => {
+        const h = sliderRef.current;
+        if (!h)
+            return;
+        const lParam = (min & 0xFFFF) | ((max & 0xFFFF) << 16);
+        gui.SendMessage(h, 1030 /* gui.TbMsg.SETRANGE */, 0, lParam);
+        gui.SendMessage(h, 1029 /* gui.TbMsg.SETPOS */, 1, value);
+    }, [min, max]);
+    useEffect(() => {
+        const h = sliderRef.current;
+        if (!h)
+            return;
+        gui.SendMessage(h, 1029 /* gui.TbMsg.SETPOS */, 1, value);
+    }, [value]);
+    const tbStyle = 268435456 /* gui.WindowStyle.VISIBLE */ | 65536 /* gui.WindowStyle.TABSTOP */
+        | 1 /* gui.TrackBarStyle.AUTOTICKS */
+        | (vertical ? 2 /* gui.TrackBarStyle.VERT */ : 0);
+    return (_jsx("w", { type: "STATIC", ws: 268435456 /* gui.WindowStyle.VISIBLE */ | 33554432 /* gui.WindowStyle.CLIPCHILDREN */, style: style, ref: (h) => {
+            wrapperRef.current = h;
+            if (typeof ref === 'function')
+                ref(h);
+            else if (ref)
+                ref.current = h;
+        }, onEvent: (e) => {
+            if (e.msg === 132 /* gui.WmMsg.NCHITTEST */ ||
+                e.msg === 161 /* gui.WmMsg.NCLBUTTONDOWN */) {
+                return gui.DefWindowProc(e.hwnd, e.msg, e.wParam, e.lParam);
+            }
+            if (e.msg === 276 /* gui.WmMsg.HSCROLL */ || e.msg === 277 /* gui.WmMsg.VSCROLL */) {
+                const h = sliderRef.current;
+                if (!h)
+                    return 0;
+                const pos = gui.SendMessage(h, 1024 /* gui.TbMsg.GETPOS */, 0, 0);
+                onChange?.(pos);
+                return 0;
+            }
+            return;
+        }, children: _jsx("w", { type: "msctls_trackbar32", ws: tbStyle, disabled: disabled, ref: (h) => { sliderRef.current = h; } }) }));
+});

package/lib/react-qw/components/Tab.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect, useState } from 'react';
+import * as gui from 'gui';
+import * as ffi from 'ffi';
+function textToUtf16(s) {
+    const buf = new ArrayBuffer((s.length + 1) * 2);
+    const dv = new DataView(buf);
+    for (let i = 0; i < s.length; i++)
+        dv.setUint16(i * 2, s.charCodeAt(i), true);
+    return buf;
+}
+function readI32(ptr, offset) {
+    return ffi.readByte(ptr + offset) | (ffi.readByte(ptr + offset + 1) << 8) |
+        (ffi.readByte(ptr + offset + 2) << 16) | (ffi.readByte(ptr + offset + 3) << 24);
+}
+export const Tab = forwardRef(({ tabs, selectedIndex: controlledIndex, defaultSelectedIndex = 0, onChange, style }, ref) => {
+    const [internalIndex, setInternalIndex] = useState(defaultSelectedIndex);
+    const isControlled = controlledIndex !== undefined;
+    const sel = isControlled ? controlledIndex : internalIndex;
+    const tabHwnd = useRef(null);
+    useEffect(() => {
+        const h = tabHwnd.current;
+        if (!h)
+            return;
+        gui.SendMessage(h, 4873 /* gui.TcMsg.DELETEALLITEMS */, 0, 0);
+        for (let i = 0; i < tabs.length; i++) {
+            const titleBuf = textToUtf16(tabs[i].title);
+            const tci = new ArrayBuffer(40);
+            const dv = new DataView(tci);
+            dv.setUint32(0, 1 /* gui.TcItemFlag.TEXT */, true);
+            dv.setBigUint64(16, BigInt(ffi.bufferPtr(titleBuf)), true);
+            dv.setInt32(24, tabs[i].title.length + 1, true);
+            const tciPtr = ffi.bufferPtr(tci);
+            gui.SendMessage(h, 4926 /* gui.TcMsg.INSERTITEMW */, i, tciPtr);
+        }
+        gui.SendMessage(h, 4876 /* gui.TcMsg.SETCURSEL */, sel, 0);
+    }, [tabs]);
+    useEffect(() => {
+        const h = tabHwnd.current;
+        if (h)
+            gui.SendMessage(h, 4876 /* gui.TcMsg.SETCURSEL */, sel, 0);
+    }, [sel]);
+    return (_jsxs("w", { type: "STATIC", ws: 268435456 /* gui.WindowStyle.VISIBLE */ | 33554432 /* gui.WindowStyle.CLIPCHILDREN */, style: { ...style, flexDirection: 'column', alignItems: 'stretch' }, ref: ref, onEvent: (e) => {
+            if (e.msg === 78 /* gui.WmMsg.NOTIFY */) {
+                const h = tabHwnd.current;
+                if (!h)
+                    return;
+                const code = readI32(e.lParam, 16);
+                // SysTabControl32 在 comctl32 v6 下不发标准的 TCN_SELCHANGE (-550),
+                // 收到 NM_CLICK (-2) 或 TCN_SELCHANGING (-551) 时读实际选中项
+                if (code === -552 /* gui.TcNotifyCode.SELCHANGING */ || code === -2 /* gui.SysLinkNotifyCode.CLICK */) {
+                    const newSel = gui.SendMessage(h, 4875 /* gui.TcMsg.GETCURSEL */, 0, 0);
+                    if (newSel !== sel) {
+                        if (!isControlled)
+                            setInternalIndex(newSel);
+                        onChange?.(newSel);
+                    }
+                }
+            }
+        }, children: [_jsx("w", { type: "SysTabControl32", ws: 268435456 /* gui.WindowStyle.VISIBLE */ | 32768 /* gui.TabStyle.FOCUSNEVER */, style: { height: 20 }, ref: tabHwnd }), _jsx("w", { type: "STATIC", ws: 268435456 /* gui.WindowStyle.VISIBLE */ | 33554432 /* gui.WindowStyle.CLIPCHILDREN */, style: { flexGrow: 1, flexDirection: 'column', alignItems: 'stretch' }, children: tabs[sel]?.content })] }));
+});

package/lib/react-qw/components/Tooltip.js

@@ -0,0 +1,55 @@
+import { useRef, useEffect, Children, cloneElement } from 'react';
+import * as gui from 'gui';
+import * as ffi from 'ffi';
+const TTTOOLINFO_CBSIZE = 64;
+function setQword(dv, offset, val) {
+    dv.setUint32(offset, val & 0xFFFFFFFF, true);
+    dv.setUint32(offset + 4, Math.floor(val / 0x100000000), true);
+}
+function buildToolInfo(hTarget, text) {
+    const textOff = TTTOOLINFO_CBSIZE;
+    const textLen = (text.length + 1) * 2;
+    const buf = new ArrayBuffer(TTTOOLINFO_CBSIZE + textLen);
+    const dv = new DataView(buf);
+    dv.setUint32(0, TTTOOLINFO_CBSIZE, true);
+    dv.setUint32(4, 16 /* gui.TtToolFlag.SUBCLASS */ | 1 /* gui.TtToolFlag.IDISHWND */, true);
+    setQword(dv, 8, hTarget);
+    setQword(dv, 16, hTarget);
+    for (let i = 0; i < text.length; i++)
+        dv.setUint16(textOff + i * 2, text.charCodeAt(i), true);
+    dv.setUint16(textOff + text.length * 2, 0, true);
+    const bufPtr = ffi.bufferPtr(buf);
+    setQword(dv, 48, bufPtr + textOff);
+    return buf;
+}
+function Tooltip({ text, children, balloon }) {
+    const childRef = useRef(null);
+    const hTTRef = useRef(null);
+    useEffect(() => {
+        const hTarget = childRef.current;
+        if (!hTarget)
+            return;
+        const hTT = gui.CreateWindow('tooltips_class32', '', -2147483648 /* gui.WindowStyle.POPUP */ | 1 /* gui.TooltipStyle.ALWAYSTIP */ | 2 /* gui.TooltipStyle.NOPREFIX */
+            | (balloon ? 64 /* gui.TooltipStyle.BALLOON */ : 0), 0, 0, 0, 0, hTarget, null);
+        if (!hTT)
+            return;
+        hTTRef.current = hTT;
+        gui.SetWindowPos(hTT, -1 /* gui.SetWindowPosHwnd.TOPMOST */, 0, 0, 0, 0, 2 /* gui.SetWindowPosFlag.SWP_NOMOVE */ | 1 /* gui.SetWindowPosFlag.SWP_NOSIZE */ | 16 /* gui.SetWindowPosFlag.SWP_NOACTIVATE */);
+        const ti = buildToolInfo(hTarget, text);
+        const tiPtr = ffi.bufferPtr(ti);
+        gui.SendMessage(hTT, 1074 /* gui.TtMsg.ADDTOOLW */, 0, tiPtr);
+        gui.SendMessage(hTT, 1048 /* gui.TtMsg.SETMAXTIPWIDTH */, 0, 400);
+        gui.SendMessage(hTT, 1025 /* gui.TtMsg.ACTIVATE */, 1, 0);
+        return () => {
+            if (hTT) {
+                const ti2 = buildToolInfo(hTarget, text);
+                gui.SendMessage(hTT, 1075 /* gui.TtMsg.DELTOOLW */, 0, ffi.bufferPtr(ti2));
+                gui.DestroyWindow(hTT);
+            }
+            hTTRef.current = null;
+        };
+    }, [text, balloon]);
+    const child = Children.only(children);
+    return cloneElement(child, { ref: childRef });
+}
+export { Tooltip };

package/lib/react-qw/components/TreeView.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect, useState } from 'react';
+import * as gui from 'gui';
+import * as ffi from 'ffi';
+function textToUtf16(s) {
+    const buf = new ArrayBuffer((s.length + 1) * 2);
+    const dv = new DataView(buf);
+    for (let i = 0; i < s.length; i++)
+        dv.setUint16(i * 2, s.charCodeAt(i), true);
+    return buf;
+}
+function readI32(ptr, offset) {
+    return ffi.readByte(ptr + offset) | (ffi.readByte(ptr + offset + 1) << 8) |
+        (ffi.readByte(ptr + offset + 2) << 16) | (ffi.readByte(ptr + offset + 3) << 24);
+}
+function bufPtr(buf) {
+    return ffi.bufferPtr(buf);
+}
+function setPtr(dv, offset, ptr) {
+    dv.setUint32(offset, ptr & 0xFFFFFFFF, true);
+    dv.setUint32(offset + 4, Math.floor(ptr / 0x100000000), true);
+}
+function buildTvItem(textPtr, cChildren) {
+    let mask = 1 /* gui.TvIfFlag.TEXT */;
+    if (cChildren > 0)
+        mask |= 64 /* gui.TvIfFlag.CHILDREN */;
+    const buf = new ArrayBuffer(56);
+    const dv = new DataView(buf);
+    dv.setUint32(0, mask, true); // mask (offset 0)
+    setPtr(dv, 8, 0); // hItem
+    dv.setUint32(16, 0, true); // state
+    dv.setUint32(20, 0, true); // stateMask
+    setPtr(dv, 24, textPtr); // pszText
+    dv.setInt32(32, 260, true); // cchTextMax
+    dv.setInt32(36, 0, true); // iImage
+    dv.setInt32(40, 0, true); // iSelectedImage
+    dv.setInt32(44, cChildren, true); // cChildren
+    setPtr(dv, 48, 0); // lParam
+    return buf;
+}
+function buildTvInsertStruct(hParent, hInsertAfter, itemBuf) {
+    const buf = new ArrayBuffer(72);
+    const dv = new DataView(buf);
+    setPtr(dv, 0, hParent); // hParent (offset 0)
+    setPtr(dv, 8, hInsertAfter); // hInsertAfter (offset 8)
+    const src = new DataView(itemBuf);
+    for (let i = 0; i < 56; i += 4)
+        dv.setUint32(16 + i, src.getUint32(i, true), true);
+    return buf;
+}
+function insertItems(hTree, nodes, parentHandle, hItemMap, keyMap) {
+    for (const node of nodes) {
+        const cChildren = node.children && node.children.length > 0 ? 1 : 0;
+        const textBuf = textToUtf16(node.label);
+        const itemBuf = buildTvItem(bufPtr(textBuf), cChildren);
+        const tvins = buildTvInsertStruct(parentHandle, -65536 /* gui.TvInsertAfter.ROOT */, itemBuf);
+        const hItem = gui.SendMessage(hTree, 4402 /* gui.TvMsg.INSERTITEMW */, 0, bufPtr(tvins));
+        hItemMap.set(hItem, node);
+        if (node.key)
+            keyMap.set(node.key, hItem);
+        if (node.children && node.children.length > 0) {
+            insertItems(hTree, node.children, hItem, hItemMap, keyMap);
+            gui.SendMessage(hTree, 4354 /* gui.TvMsg.EXPAND */, 2 /* gui.TvExpandCmd.EXPAND */, hItem);
+        }
+    }
+}
+function deleteAllItems(hTree) {
+    const n = gui.SendMessage(hTree, 4357 /* gui.TvMsg.GETCOUNT */, 0, 0);
+    if (n > 0)
+        gui.SendMessage(hTree, 4353 /* gui.TvMsg.DELETEITEM */, 1, -65536 /* gui.TvInsertAfter.ROOT */);
+}
+const TreeView = forwardRef(function TreeViewInner({ data, onSelect, defaultSelectedKey, selectedKey: controlledKey, style }, ref) {
+    const [internalKey, setInternalKey] = useState(defaultSelectedKey ?? null);
+    const isControlled = controlledKey !== undefined;
+    const selKey = isControlled ? controlledKey : internalKey;
+    const tvRef = useRef(null);
+    const hItemMapRef = useRef(new Map());
+    const keyMapRef = useRef(new Map());
+    const onChangeRef = useRef(onSelect);
+    onChangeRef.current = onSelect;
+    const tvWs = 268435456 /* gui.WindowStyle.VISIBLE */ | 8388608 /* gui.WindowStyle.BORDER */ | 2097152 /* gui.WindowStyle.VSCROLL */
+        | 65536 /* gui.WindowStyle.TABSTOP */
+        | 2 /* gui.TreeViewStyle.HASLINES */
+        | 1 /* gui.TreeViewStyle.HASBUTTONS */
+        | 4 /* gui.TreeViewStyle.LINESATROOT */
+        | 32 /* gui.TreeViewStyle.SHOWSELALWAYS */;
+    useEffect(() => {
+        const h = tvRef.current;
+        if (!h)
+            return;
+        deleteAllItems(h);
+        hItemMapRef.current.clear();
+        keyMapRef.current.clear();
+        if (data && data.length > 0)
+            insertItems(h, data, -65536 /* gui.TvInsertAfter.ROOT */, hItemMapRef.current, keyMapRef.current);
+    }, [data]);
+    useEffect(() => {
+        const h = tvRef.current;
+        if (!h)
+            return;
+        gui.SendMessage(h, 4396 /* gui.TvMsg.SETEXTENDEDSTYLE */, 0, 4 /* gui.TvExStyle.DOUBLEBUFFER */);
+    }, []);
+    useEffect(() => {
+        if (selKey == null)
+            return;
+        const h = tvRef.current;
+        if (!h)
+            return;
+        const hItem = keyMapRef.current.get(selKey);
+        if (hItem !== undefined)
+            gui.SendMessage(h, 4363 /* gui.TvMsg.SELECTITEM */, 9 /* gui.TvGnRelative.CARET */, hItem);
+    }, [selKey]);
+    return (_jsx("w", { type: "STATIC", ws: 268435456 /* gui.WindowStyle.VISIBLE */ | 33554432 /* gui.WindowStyle.CLIPCHILDREN */, style: { ...style, flexDirection: 'column', alignItems: 'stretch' }, ref: ref, onEvent: (e) => {
+            if (e.msg === 78 /* gui.WmMsg.NOTIFY */) {
+                const code = readI32(e.lParam, 16);
+                if (code === -451 /* gui.TvNotifyCode.SELCHANGEDW */) {
+                    const h = tvRef.current;
+                    if (!h)
+                        return;
+                    const hCaret = gui.SendMessage(h, 4362 /* gui.TvMsg.GETNEXTITEM */, 9 /* gui.TvGnRelative.CARET */, 0);
+                    const node = hItemMapRef.current.get(hCaret) ?? null;
+                    const key = node?.key ?? null;
+                    if (!isControlled)
+                        setInternalKey(key);
+                    onChangeRef.current?.(node);
+                }
+            }
+        }, children: _jsx("w", { type: "SysTreeView32", ws: tvWs, style: { flexGrow: 1 }, ref: (h) => { tvRef.current = h; } }) }));
+});
+export { TreeView };

package/lib/react-qw/components/index.js

@@ -0,0 +1,16 @@
+export { Button } from './Button.js';
+export { CheckBox } from './CheckBox.js';
+export { ComboBox } from './ComboBox.js';
+export { DateTimePicker } from './DateTimePicker.js';
+export { Input } from './Input.js';
+export { Link } from './Link.js';
+export { ListBox } from './ListBox.js';
+export { ListView, makeColorBlock } from './ListView.js';
+export { ProgressBar } from './ProgressBar.js';
+export { RadioButton } from './RadioButton.js';
+export { ScrollView } from './ScrollView.js';
+export { Slider } from './Slider.js';
+export { Tab } from './Tab.js';
+export { Tooltip } from './Tooltip.js';
+export { TreeView } from './TreeView.js';
+export { PathPicker } from './PathPicker.js';

package/lib/react-qw/components/index.ts

@@ -0,0 +1,17 @@
+export { Button, type ButtonProps } from './Button.js'
+export { CheckBox, type CheckBoxProps } from './CheckBox.js'
+export { ComboBox, type ComboBoxProps } from './ComboBox.js'
+export { DateTimePicker, type DateTimePickerProps } from './DateTimePicker.js'
+export { Input, type InputProps } from './Input.js'
+export { Link, type LinkProps } from './Link.js'
+export { ListBox, type ListBoxProps } from './ListBox.js'
+export { ListView, makeColorBlock, type ListViewProps, type Column, type CellStyle, type Align } from './ListView.js'
+export { ProgressBar, type ProgressBarProps } from './ProgressBar.js'
+export { RadioButton, type RadioButtonProps } from './RadioButton.js'
+export { ScrollView, type ScrollViewProps } from './ScrollView.js'
+export { Slider, type SliderProps } from './Slider.js'
+export { Tab, type TabProps } from './Tab.js'
+export { Tooltip, type TooltipProps } from './Tooltip.js'
+export { TreeView, type TreeViewProps, type TreeNode } from './TreeView.js'
+export { PathPicker, type PathPickerProps } from './PathPicker.js'
+

package/lib/react-qw/index.js

@@ -0,0 +1,73 @@
+import * as gui from 'gui';
+import reconciler, { scaleFactor, instancesByHwnd, forceFlexLayout } from './reconciler.js';
+const noop = () => { };
+let defaultClassRegistered = false;
+const DEFAULT_CLASS = '_QuickWinDefault';
+const rootMap = new Map();
+function ensureDefaultClass() {
+    if (defaultClassRegistered)
+        return DEFAULT_CLASS;
+    gui.RegisterClass(DEFAULT_CLASS, (hwnd, msg, wParam, lParam) => {
+        const entry = rootMap.get(hwnd);
+        if (msg === 2 /* gui.WmMsg.DESTROY */ && entry) {
+            rootMap.delete(hwnd);
+            reconciler.updateContainer(null, entry.root, null, () => {
+                instancesByHwnd.delete(hwnd);
+            });
+        }
+        const result = entry?.onEvent?.({ hwnd, msg, wParam, lParam });
+        if (typeof result === 'number')
+            return result;
+        if (msg === 5 /* gui.WmMsg.SIZE */)
+            forceFlexLayout(hwnd);
+        return gui.DefWindowProc(hwnd, msg, wParam, lParam);
+    });
+    defaultClassRegistered = true;
+    return DEFAULT_CLASS;
+}
+export function createRoot(container) {
+    let hwnd;
+    if (typeof container === 'object') {
+        const cfg = container;
+        const className = ensureDefaultClass();
+        const ws = (cfg.ws ?? 0) | 13565952 /* gui.WindowStyle.OVERLAPPEDWINDOW */;
+        const w = (cfg.width ?? 800) * scaleFactor;
+        const h = (cfg.height ?? 600) * scaleFactor;
+        const [sw, sh] = gui.GetScreenSize();
+        const x = cfg.x === undefined ? ((sw - w) / 2) | 0
+            : cfg.x === -2147483648 /* gui.CreatePos.USEDEFAULT */ ? -2147483648 /* gui.CreatePos.USEDEFAULT */ : cfg.x * scaleFactor;
+        const y = cfg.y === undefined ? ((sh - h) / 2) | 0
+            : cfg.y === -2147483648 /* gui.CreatePos.USEDEFAULT */ ? -2147483648 /* gui.CreatePos.USEDEFAULT */ : cfg.y * scaleFactor;
+        const hwin = gui.CreateWindow(className, cfg.text || '', ws, x, y, w, h, null, null);
+        if (!hwin)
+            throw new Error('CreateWindow failed');
+        hwnd = hwin;
+        if (!cfg.noShowWindow)
+            gui.ShowWindow(hwnd);
+    }
+    else {
+        hwnd = container;
+    }
+    const root = reconciler.createContainer(hwnd, 0, null, false, null, '', noop, noop, noop, noop);
+    const rootInst = { hwnd, type: '_root', props: { type: '_root', style: { flexDirection: 'column', alignItems: 'stretch' } }, children: [] };
+    instancesByHwnd.set(hwnd, rootInst);
+    if (typeof container === 'object')
+        rootMap.set(hwnd, { root, onEvent: container.onEvent });
+    return {
+        hwnd,
+        render(element) {
+            reconciler.updateContainer(element, root, null, noop);
+        },
+        unmount() {
+            reconciler.updateContainer(null, root, null, noop);
+        }
+    };
+}
+export * from './components/index.js';
+export function render(element, containerOrConfig, _callback) {
+    if (containerOrConfig == null) {
+        throw new Error('render() requires a window handle or RootWindowConfig as second argument');
+    }
+    const root = createRoot(containerOrConfig);
+    root.render(element);
+}

package/lib/react-qw/index.ts

@@ -0,0 +1,90 @@
+import * as gui from 'gui'
+import React from 'react'
+import reconciler, { scaleFactor, instancesByHwnd, forceFlexLayout, type Instance } from './reconciler.js'
+
+const noop = () => { }
+
+export interface RootWindowConfig {
+  text?: string
+  ws?: number
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  noShowWindow?: boolean
+  onEvent?: (e: { hwnd: gui.HWND; msg: number; wParam: number; lParam: number }) => number | void
+}
+
+let defaultClassRegistered = false
+const DEFAULT_CLASS = '_QuickWinDefault'
+const rootMap = new Map<gui.HWND, { root: ReturnType<typeof reconciler.createContainer>, onEvent?: RootWindowConfig['onEvent'] }>()
+
+function ensureDefaultClass() {
+  if (defaultClassRegistered) return DEFAULT_CLASS
+  gui.RegisterClass(DEFAULT_CLASS, (hwnd, msg, wParam, lParam) => {
+    const entry = rootMap.get(hwnd)
+    if (msg === gui.WmMsg.DESTROY && entry) {
+      rootMap.delete(hwnd)
+      reconciler.updateContainer(null, entry.root, null, () => {
+        instancesByHwnd.delete(hwnd)
+      })
+    }
+    const result = entry?.onEvent?.({ hwnd, msg, wParam, lParam })
+    if (typeof result === 'number') return result
+    if (msg === gui.WmMsg.SIZE) forceFlexLayout(hwnd)
+    return gui.DefWindowProc(hwnd, msg, wParam, lParam)
+  })
+  defaultClassRegistered = true
+  return DEFAULT_CLASS
+}
+
+export function createRoot(container: gui.HWND | RootWindowConfig) {
+  let hwnd: gui.HWND
+  if (typeof container === 'object') {
+    const cfg = container
+    const className = ensureDefaultClass()
+    const ws = (cfg.ws ?? 0) | gui.WindowStyle.OVERLAPPEDWINDOW
+    const w = (cfg.width ?? 800) * scaleFactor
+    const h = (cfg.height ?? 600) * scaleFactor
+    const [sw, sh] = gui.GetScreenSize()
+    const x = cfg.x === undefined ? ((sw - w) / 2) | 0
+      : cfg.x === gui.CreatePos.USEDEFAULT ? gui.CreatePos.USEDEFAULT
+      : cfg.x * scaleFactor
+    const y = cfg.y === undefined ? ((sh - h) / 2) | 0
+      : cfg.y === gui.CreatePos.USEDEFAULT ? gui.CreatePos.USEDEFAULT
+      : cfg.y * scaleFactor
+    const hwin = gui.CreateWindow(className, cfg.text || '', ws, x, y, w, h, null, null)
+    if (!hwin) throw new Error('CreateWindow failed')
+    hwnd = hwin
+    if (!cfg.noShowWindow) gui.ShowWindow(hwnd)
+  } else {
+    hwnd = container
+  }
+  const root = reconciler.createContainer(
+    hwnd, 0, null, false, null, '',
+    noop, noop, noop, noop,
+  )
+  const rootInst: Instance = { hwnd, type: '_root', props: { type: '_root', style: { flexDirection: 'column', alignItems: 'stretch' } }, children: [] }
+  instancesByHwnd.set(hwnd, rootInst)
+  if (typeof container === 'object')
+    rootMap.set(hwnd, { root, onEvent: container.onEvent })
+  return {
+    hwnd,
+    render(element: React.ReactNode) {
+      reconciler.updateContainer(element, root, null, noop)
+    },
+    unmount() {
+      reconciler.updateContainer(null, root, null, noop)
+    }
+  }
+}
+
+export * from './components/index.js'
+
+export function render(element: React.ReactNode, containerOrConfig?: gui.HWND | RootWindowConfig | null, _callback?: () => void) {
+  if (containerOrConfig == null) {
+    throw new Error('render() requires a window handle or RootWindowConfig as second argument')
+  }
+  const root = createRoot(containerOrConfig)
+  root.render(element)
+}

package/lib/react-qw/jsx.d.ts

@@ -0,0 +1,34 @@
+import type { HWND } from 'gui'
+
+interface WStyle {
+  width?: number | 'auto'; height?: number | 'auto'
+  flexDirection?: 'row' | 'column'
+  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
+  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch'
+  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch'
+  gap?: number
+  padding?: number
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  flexGrow?: number
+}
+
+interface WEvent {
+  hwnd: HWND; msg: number; wParam: number; lParam: number
+}
+interface WOnEventObj {
+  fn: (e: WEvent & {callOldWndProc: () => number}) => number
+}
+interface WIntrinsicProps {
+  key?: string | number; type: string; text?: string; ws?: number
+  disabled?: boolean; visible?: boolean; hidden?: boolean; style?: WStyle
+  onEvent?: ((e: WEvent) => number | void) | WOnEventObj
+  children?: React.ReactNode
+  ref?: React.Ref<HWND>
+}
+declare module 'react' {
+  namespace JSX { interface IntrinsicElements { w: WIntrinsicProps } }
+}
+export type { WEvent, WIntrinsicProps, WStyle }

package/lib/react-qw/layout.js

@@ -0,0 +1,82 @@
+const DEFAULT_W = 100;
+const DEFAULT_H = 30;
+export function calculateFlexLayout(flex, parentW, parentH, children) {
+    const dir = flex.flexDirection || 'column';
+    const gap = flex.gap ?? 0;
+    const justify = flex.justifyContent || 'flex-start';
+    const align = flex.alignItems || 'stretch';
+    const isRow = dir === 'row';
+    const n = children.length;
+    const mainSize = isRow ? 'w' : 'h';
+    const crossSize = isRow ? 'h' : 'w';
+    const mainPos = isRow ? 'x' : 'y';
+    const crossPos = isRow ? 'y' : 'x';
+    const mainDim = isRow ? 'width' : 'height';
+    const crossDim = isRow ? 'height' : 'width';
+    const pt = flex.paddingTop ?? flex.padding ?? 0;
+    const pr = flex.paddingRight ?? flex.padding ?? 0;
+    const pb = flex.paddingBottom ?? flex.padding ?? 0;
+    const pl = flex.paddingLeft ?? flex.padding ?? 0;
+    const mainPadding = isRow ? pl + pr : pt + pb;
+    const crossPadding = isRow ? pt + pb : pl + pr;
+    const parentMain = (isRow ? parentW : parentH) - mainPadding;
+    const parentCross = (isRow ? parentH : parentW) - crossPadding;
+    const sizes = children.map(c => ({
+        w: typeof c.style.width === 'number' ? c.style.width : DEFAULT_W,
+        h: typeof c.style.height === 'number' ? c.style.height : DEFAULT_H,
+    }));
+    const flexGrows = children.map(c => c.style.flexGrow ?? 0);
+    const totalGrow = flexGrows.reduce((s, g) => s + g, 0);
+    const baseMain = sizes.reduce((s, c) => s + c[mainSize], 0);
+    let freeGrow = parentMain - baseMain - Math.max(0, n - 1) * gap;
+    if (totalGrow > 0 && freeGrow > 0) {
+        for (let i = 0; i < n; i++) {
+            sizes[i][mainSize] += freeGrow * flexGrows[i] / totalGrow;
+        }
+    }
+    const totalMain = sizes.reduce((s, c) => s + c[mainSize], 0);
+    const free = parentMain - totalMain - Math.max(0, n - 1) * gap;
+    let offset = 0, extraGap = 0;
+    if (justify === 'flex-end')
+        offset = free;
+    else if (justify === 'center')
+        offset = Math.max(0, free / 2);
+    else if (justify === 'space-between' && n > 1)
+        extraGap = free / (n - 1);
+    else if (justify === 'space-around') {
+        extraGap = free / n;
+        offset = extraGap / 2;
+    }
+    else if (justify === 'space-evenly') {
+        extraGap = free / (n + 1);
+        offset = extraGap;
+    }
+    let cursor = offset;
+    return sizes.map((sz, i) => {
+        const childCrossBase = sz[crossSize];
+        const childAlign = children[i].style.alignSelf ?? 'auto';
+        const effectiveAlign = childAlign === 'auto' ? align : childAlign;
+        let childMain = sz[mainSize];
+        let childCross = childCrossBase;
+        const res = { x: 0, y: 0, width: 0, height: 0 };
+        res[mainPos] = cursor;
+        res[crossPos] = 0;
+        res[mainDim] = childMain;
+        res[crossDim] = childCross;
+        if (effectiveAlign === 'stretch') {
+            const hasExplicitCross = typeof children[i].style[crossDim] === 'number';
+            if (!hasExplicitCross) {
+                res[crossDim] = parentCross;
+                res[crossPos] = 0;
+            }
+        }
+        else if (effectiveAlign === 'flex-end') {
+            res[crossPos] = parentCross - childCross;
+        }
+        else if (effectiveAlign === 'center') {
+            res[crossPos] = Math.max(0, (parentCross - childCross) / 2);
+        }
+        cursor += childMain + gap + extraGap;
+        return res;
+    });
+}