quickwin 1.0.0

package/lib/polyfill.ts

@@ -0,0 +1,171 @@
+import * as os from 'os'
+import './url.js'
+import './text-codec.js'
+
+
+declare global {
+    interface Console {
+        error: (...args: unknown[]) => void
+    }
+
+    var window: typeof globalThis
+
+    type TimerId = os.TimerId
+    function setTimeout<P extends unknown[]>(fn: (...argsf: P) => void, ms?: number, ...argsr: P): TimerId
+    function clearTimeout(id: TimerId): void
+
+    function btoa(data: string): string
+    function atob(data: string): string
+
+    interface SubtleCrypto {
+        digest(algorithm: 'SHA-1', data: ArrayBuffer | Uint8Array): Promise<ArrayBuffer>
+    }
+
+    interface Crypto {
+        getRandomValues<T extends ArrayBufferView>(array: T): T
+        subtle: SubtleCrypto
+    }
+
+    var crypto: Crypto
+}
+
+// 1. window — triggers Emscripten browser path
+if (typeof globalThis.window === 'undefined')
+    globalThis.window = globalThis
+
+// 2. setTimeout polyfill — bridge to os.setTimeout
+if (typeof globalThis.setTimeout === 'undefined') {
+    globalThis.setTimeout = ((fn, ms, ...args) => {
+        return os.setTimeout(() => fn(...args), ms ?? 0)
+    }) satisfies typeof setTimeout
+}
+
+// 2b. clearTimeout polyfill — bridge to os.clearTimeout
+if (typeof globalThis.clearTimeout === 'undefined') {
+    globalThis.clearTimeout = os.clearTimeout
+}
+
+// 3. console.error polyfill — QuickJS only has console.log
+if (typeof console.error === 'undefined') {
+    console.error = (...args: unknown[]) => { console.log(...args) }
+}
+
+
+// ── SHA-1 ──
+
+function sha1Bytes(bytes: number[]): ArrayBuffer {
+    const len = bytes.length
+    const ml = len * 8
+
+    bytes.push(0x80)
+    while (bytes.length % 64 !== 56) { bytes.push(0) }
+    bytes.push(0)
+    bytes.push(0)
+    bytes.push(0)
+    bytes.push(0)
+    bytes.push((ml >>> 24) & 0xFF)
+    bytes.push((ml >>> 16) & 0xFF)
+    bytes.push((ml >>> 8) & 0xFF)
+    bytes.push(ml & 0xFF)
+
+    let h0 = 0x67452301, h1 = 0xEFCDAB89
+    let h2 = 0x98BADCFE, h3 = 0x10325476, h4 = 0xC3D2E1F0
+    const rotl = (x: number, n: number): number => ((x << n) | (x >>> (32 - n))) >>> 0
+
+    for (let i = 0; i < bytes.length; i += 64) {
+        const w: number[] = []
+        for (let t = 0; t < 16; t++) {
+            w[t] = (bytes[i + 4 * t]! << 24) | (bytes[i + 4 * t + 1]! << 16) |
+                (bytes[i + 4 * t + 2]! << 8) | bytes[i + 4 * t + 3]!
+        }
+        for (let t = 16; t < 80; t++) {
+            w[t] = rotl(w[t - 3]! ^ w[t - 8]! ^ w[t - 14]! ^ w[t - 16]!, 1)
+        }
+
+        let a = h0, b = h1, c = h2, d = h3, e = h4
+        for (let t = 0; t < 80; t++) {
+            let f: number, k: number
+            if (t < 20) { f = (b & c) | (~b & d); k = 0x5A827999 }
+            else if (t < 40) { f = b ^ c ^ d; k = 0x6ED9EBA1 }
+            else if (t < 60) { f = (b & c) | (b & d) | (c & d); k = 0x8F1BBCDC }
+            else { f = b ^ c ^ d; k = 0xCA62C1D6 }
+            const temp = (rotl(a, 5) + f + e + k + w[t]!) >>> 0
+            e = d; d = c; c = rotl(b, 30); b = a; a = temp
+        }
+        h0 = (h0 + a) >>> 0; h1 = (h1 + b) >>> 0
+        h2 = (h2 + c) >>> 0; h3 = (h3 + d) >>> 0; h4 = (h4 + e) >>> 0
+    }
+
+    const result = new Uint8Array(20)
+    const w32 = (off: number, v: number) => {
+        result[off] = (v >>> 24) & 0xFF; result[off + 1] = (v >>> 16) & 0xFF
+        result[off + 2] = (v >>> 8) & 0xFF; result[off + 3] = v & 0xFF
+    }
+    w32(0, h0); w32(4, h1); w32(8, h2); w32(12, h3); w32(16, h4)
+    return result.buffer
+}
+
+// ── Base64 ──
+
+const B64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+
+function b64Encode(data: Uint8Array): string {
+    let r = ''
+    for (let i = 0; i < data.length; i += 3) {
+        const b0 = data[i]!, b1 = i + 1 < data.length ? data[i + 1]! : 0, b2 = i + 2 < data.length ? data[i + 2]! : 0
+        r += B64[b0 >> 2]! + B64[((b0 & 3) << 4) | (b1 >> 4)]!
+        r += i + 1 < data.length ? B64[((b1 & 15) << 2) | (b2 >> 6)]! : '='
+        r += i + 2 < data.length ? B64[b2 & 63]! : '='
+    }
+    return r
+}
+
+function b64Decode(str: string): Uint8Array {
+    str = str.replace(/[^A-Za-z0-9+/=]/g, '')
+    const bytes: number[] = []
+    for (let i = 0; i < str.length; i += 4) {
+        const c0 = B64.indexOf(str[i]!), c1 = B64.indexOf(str[i + 1]!)
+        const c2 = B64.indexOf(str[i + 2]!), c3 = B64.indexOf(str[i + 3]!)
+        bytes.push((c0 << 2) | (c1 >> 4))
+        if (c2 >= 0) bytes.push(((c1 & 15) << 4) | (c2 >> 2))
+        if (c3 >= 0) bytes.push(((c2 & 3) << 6) | c3)
+    }
+    return new Uint8Array(bytes)
+}
+
+// ── btoa / atob ──
+
+if (typeof globalThis.btoa === 'undefined') {
+    globalThis.btoa = (data: string): string => {
+        const bytes = new Uint8Array(data.length)
+        for (let i = 0; i < data.length; i++) bytes[i] = data.charCodeAt(i) & 0xFF
+        return b64Encode(bytes)
+    }
+}
+
+if (typeof globalThis.atob === 'undefined') {
+    globalThis.atob = (data: string): string => {
+        const bytes = b64Decode(data)
+        let r = ''
+        for (let i = 0; i < bytes.length; i++) r += String.fromCharCode(bytes[i]!)
+        return r
+    }
+}
+
+if (typeof globalThis.crypto === 'undefined') {
+    globalThis.crypto = {
+        getRandomValues: <T extends ArrayBufferView>(array: T): T => {
+            const view = new Uint8Array(array.buffer, array.byteOffset, array.byteLength)
+            for (let i = 0; i < view.length; i++) view[i] = (Math.random() * 256) | 0
+            return array
+        },
+        subtle: {
+            digest: (algorithm: string, data: ArrayBuffer | Uint8Array): Promise<ArrayBuffer> => {
+                if (algorithm.toUpperCase() !== 'SHA-1')
+                    return Promise.reject(new Error('Digest: ' + algorithm + ' not supported'))
+                const bytes = data instanceof Uint8Array ? Array.from(data) : Array.from(new Uint8Array(data))
+                return Promise.resolve(sha1Bytes(bytes))
+            }
+        }
+    }
+}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+export const Button = forwardRef(({ children, onClick, style, disabled }, ref) => {
+    return (_jsx("w", { type: "BUTTON", text: children != null ? (Array.isArray(children) ? children.join('') : String(children)) : '', ws: 268435456 /* gui.WindowStyle.VISIBLE */, style: style, disabled: disabled, ref: ref, onEvent: (e) => {
+            if (e.msg === 514 /* gui.WmMsg.LBUTTONUP */)
+                onClick?.();
+        } }));
+});

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useRef } from 'react';
+import * as gui from 'gui';
+export const CheckBox = forwardRef(({ checked: controlledChecked, defaultChecked = false, onChange, label, style, disabled }, ref) => {
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const isControlled = controlledChecked !== undefined;
+    const displayChecked = isControlled ? controlledChecked : internalChecked;
+    const cbRef = useRef(null);
+    useEffect(() => {
+        const h = cbRef.current;
+        if (!h)
+            return;
+        gui.SendMessage(h, 241 /* gui.ButtonMsg.SETCHECK */, displayChecked ? 1 /* gui.ButtonCheckState.CHECKED */ : 0 /* gui.ButtonCheckState.UNCHECKED */, 0);
+    }, [displayChecked]);
+    return (_jsx("w", { type: "BUTTON", text: label ?? '', ws: 268435456 /* gui.WindowStyle.VISIBLE */ | 3 /* gui.ButtonStyle.AUTOCHECKBOX */, style: style, disabled: disabled, ref: (h) => {
+            cbRef.current = h;
+            if (typeof ref === 'function')
+                ref(h);
+            else if (ref)
+                ref.current = h;
+        }, onEvent: (e) => {
+            if (e.msg === 514 /* gui.WmMsg.LBUTTONUP */) {
+                const newChecked = gui.SendMessage(e.hwnd, 240 /* gui.ButtonMsg.GETCHECK */, 0, 0) !== 0;
+                if (newChecked !== displayChecked) {
+                    if (!isControlled)
+                        setInternalChecked(newChecked);
+                    onChange?.(newChecked);
+                }
+            }
+        } }));
+});

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect, useState } from 'react';
+import * as gui from 'gui';
+export const ComboBox = forwardRef(({ items, selectedIndex: controlledIndex, defaultSelectedIndex = -1, onChange, style }, ref) => {
+    const [internalIndex, setInternalIndex] = useState(defaultSelectedIndex);
+    const isControlled = controlledIndex !== undefined;
+    const sel = isControlled ? controlledIndex : internalIndex;
+    const cbRef = useRef(null);
+    const cbWs = 268435456 /* gui.WindowStyle.VISIBLE */ | 8388608 /* gui.WindowStyle.BORDER */
+        | 3 /* gui.ComboBoxStyle.DROPDOWNLIST */ | 512 /* gui.ComboBoxStyle.HASSTRINGS */;
+    useEffect(() => {
+        const h = cbRef.current;
+        if (!h)
+            return;
+        gui.SendMessage(h, 331 /* gui.ComboBoxMsg.RESETCONTENT */, 0, 0);
+        for (const item of items)
+            gui.SendMessage(h, 323 /* gui.ComboBoxMsg.ADDSTRING */, 0, item);
+        if (sel >= 0 && sel < items.length)
+            gui.SendMessage(h, 334 /* gui.ComboBoxMsg.SETCURSEL */, sel, 0);
+    }, [items]);
+    useEffect(() => {
+        const h = cbRef.current;
+        if (h)
+            gui.SendMessage(h, 334 /* gui.ComboBoxMsg.SETCURSEL */, sel, 0);
+    }, [sel]);
+    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 !== 273 /* gui.WmMsg.COMMAND */)
+                return;
+            const code = (e.wParam >> 16) & 0xFFFF;
+            if (code === 1 /* gui.CbnCode.SELCHANGE */) {
+                const h = cbRef.current;
+                if (!h)
+                    return;
+                const newSel = gui.SendMessage(h, 327 /* gui.ComboBoxMsg.GETCURSEL */, 0, 0);
+                if (newSel !== sel && newSel >= 0) {
+                    if (!isControlled)
+                        setInternalIndex(newSel);
+                    onChange?.(newSel);
+                }
+            }
+        }, children: _jsx("w", { type: "COMBOBOX", ws: cbWs, style: { flexGrow: 1 }, ref: (h) => { cbRef.current = h; } }) }));
+});

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

@@ -0,0 +1,96 @@
+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 readI16(ptr, offset) {
+    return ffi.readByte(ptr + offset) | (ffi.readByte(ptr + offset + 1) << 8);
+}
+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 dateToSysTimeBuf(d) {
+    const buf = new ArrayBuffer(16);
+    const dv = new DataView(buf);
+    dv.setUint16(0, d.getFullYear(), true);
+    dv.setUint16(2, d.getMonth() + 1, true);
+    dv.setUint16(4, 0, true); // wDayOfWeek (ignored on set)
+    dv.setUint16(6, d.getDate(), true);
+    dv.setUint16(8, d.getHours(), true);
+    dv.setUint16(10, d.getMinutes(), true);
+    dv.setUint16(12, d.getSeconds(), true);
+    dv.setUint16(14, d.getMilliseconds(), true);
+    return buf;
+}
+const DateTimePicker = forwardRef(function DateTimePicker({ value, onChange, defaultValue, format = 'short', allowNone, updown, style }, ref) {
+    const [internalDate, setInternalDate] = useState(defaultValue ?? null);
+    const isControlled = value !== undefined;
+    const effectiveDate = isControlled ? value : internalDate;
+    const dpRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    let dpStyle = 268435456 /* gui.WindowStyle.VISIBLE */ | 8388608 /* gui.WindowStyle.BORDER */;
+    if (format === 'long')
+        dpStyle |= 4 /* gui.DtStyle.LONGDATEFORMAT */;
+    else if (format === 'time')
+        dpStyle |= 9 /* gui.DtStyle.TIMEFORMAT */;
+    if (updown)
+        dpStyle |= 1 /* gui.DtStyle.UPDOWN */;
+    if (allowNone)
+        dpStyle |= 2 /* gui.DtStyle.SHOWNONE */;
+    useEffect(() => {
+        const h = dpRef.current;
+        if (!h)
+            return;
+        const d = effectiveDate;
+        if (d) {
+            const buf = dateToSysTimeBuf(d);
+            gui.SendMessage(h, 4098 /* gui.DtMsg.SETSYSTEMTIME */, 0 /* gui.DtFlag.GDT_VALID */, bufPtr(buf));
+        }
+        else {
+            gui.SendMessage(h, 4098 /* gui.DtMsg.SETSYSTEMTIME */, 1 /* gui.DtFlag.GDT_NONE */, 0);
+        }
+    }, [effectiveDate]);
+    useEffect(() => {
+        const h = dpRef.current;
+        if (!h)
+            return;
+        gui.InvalidateRect(h, null, true);
+        // 发送 WM_SIZE 让控件（尤其是 DTS_UPDOWN）重新布局内部子窗口
+        const cr = gui.GetClientRect(h);
+        if (cr) {
+            const w = cr.right - cr.left;
+            const hh = cr.bottom - cr.top;
+            gui.SendMessage(h, 5 /* gui.WmMsg.SIZE */, 0, (hh << 16) | w);
+        }
+    }, []);
+    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 === -759 /* gui.DtNotifyCode.DATETIMECHANGE */) {
+                    const dwFlags = readI32(e.lParam, 24);
+                    if (dwFlags === 1 /* gui.DtFlag.GDT_NONE */) {
+                        if (!isControlled)
+                            setInternalDate(null);
+                        onChangeRef.current?.(null);
+                    }
+                    else {
+                        const year = readI16(e.lParam, 28);
+                        const month = readI16(e.lParam, 30);
+                        const day = readI16(e.lParam, 34);
+                        const hour = readI16(e.lParam, 36);
+                        const min = readI16(e.lParam, 38);
+                        const sec = readI16(e.lParam, 40);
+                        const d = new Date(year, month - 1, day, hour, min, sec);
+                        if (!isControlled)
+                            setInternalDate(d);
+                        onChangeRef.current?.(d);
+                    }
+                }
+            }
+        }, children: _jsx("w", { type: "SysDateTimePick32", ws: dpStyle, style: { flexGrow: 1 }, ref: (h) => { dpRef.current = h; } }) }));
+});
+export { DateTimePicker };

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } 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;
+}
+export const Input = forwardRef(({ value: controlledValue, defaultValue = '', onChange, placeholder, password, multiline, readonly, number, disabled, style }, ref) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const displayValue = isControlled ? controlledValue : internalValue;
+    const inputRef = useRef(null);
+    let ws = 268435456 /* gui.WindowStyle.VISIBLE */ | 8388608 /* gui.WindowStyle.BORDER */;
+    if (multiline)
+        ws |= 4 /* gui.EditStyle.MULTILINE */ | 64 /* gui.EditStyle.AUTOVSCROLL */ | 2097152 /* gui.WindowStyle.VSCROLL */;
+    if (readonly)
+        ws |= 2048 /* gui.EditStyle.READONLY */;
+    if (number)
+        ws |= 8192 /* gui.EditStyle.NUMBER */;
+    if (password)
+        ws |= 32 /* gui.EditStyle.PASSWORD */ | 128 /* gui.EditStyle.AUTOHSCROLL */;
+    useEffect(() => {
+        const h = inputRef.current;
+        if (!h || !placeholder)
+            return;
+        const buf = textToUtf16(placeholder);
+        gui.SendMessage(h, 5377 /* gui.EditMsg.SETCUEBANNER */, 1, ffi.bufferPtr(buf));
+    }, [placeholder]);
+    return (_jsx("w", { type: "EDIT", text: displayValue, ws: ws, style: style, disabled: disabled, ref: (h) => {
+            inputRef.current = h;
+            if (typeof ref === 'function')
+                ref(h);
+            else if (ref)
+                ref.current = h;
+        }, onEvent: (e) => {
+            if (e.msg === 258 /* gui.WmMsg.CHAR */) {
+                const h = inputRef.current;
+                if (!h)
+                    return;
+                const newText = gui.GetWindowText(h);
+                if (!isControlled)
+                    setInternalValue(newText);
+                onChange?.(newText);
+            }
+        } }));
+});

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from 'react';
+import * as gui from 'gui';
+import * as ffi from 'ffi';
+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 readUtf16(ptr, offset, maxWords) {
+    const chars = [];
+    for (let i = 0; i < maxWords; i++) {
+        const lo = ffi.readByte(ptr + offset + i * 2);
+        const hi = ffi.readByte(ptr + offset + i * 2 + 1);
+        const code = (hi << 8) | lo;
+        if (code === 0)
+            break;
+        chars.push(String.fromCharCode(code));
+    }
+    return chars.join('');
+}
+const Link = forwardRef(function Link({ href, children, onClick, style }, ref) {
+    const displayText = children != null ? String(children) : (href ?? '');
+    const linkText = href ? `<A HREF="${href}">${displayText}</A>` : displayText;
+    const linkRef = useRef(null);
+    const onClickRef = useRef(onClick);
+    onClickRef.current = onClick;
+    useEffect(() => {
+        const h = linkRef.current;
+        if (!h)
+            return;
+        gui.InvalidateRect(h, null, true);
+    }, [linkText]);
+    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 === -2 /* gui.SysLinkNotifyCode.CLICK */ || code === -4 /* gui.SysLinkNotifyCode.RETURN */) {
+                    const url = readUtf16(e.lParam, 136, 2048);
+                    onClickRef.current?.(url);
+                }
+            }
+        }, children: _jsx("w", { type: "SysLink", ws: 268435456 /* gui.WindowStyle.VISIBLE */ | 65536 /* gui.WindowStyle.TABSTOP */, text: linkText, style: { flexGrow: 1 }, ref: (h) => { linkRef.current = h; } }) }));
+});
+export { Link };

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect, useState, useImperativeHandle } from 'react';
+import * as gui from 'gui';
+export const ListBox = forwardRef(({ items, selectedIndex: controlledIndex, defaultSelectedIndex = -1, onChange, style, sort, scrollToBottom }, ref) => {
+    const [internalIndex, setInternalIndex] = useState(defaultSelectedIndex);
+    const isControlled = controlledIndex !== undefined;
+    const sel = isControlled ? controlledIndex : internalIndex;
+    const lbRef = useRef(null);
+    useImperativeHandle(ref, () => lbRef.current);
+    const lbWs = 268435456 /* gui.WindowStyle.VISIBLE */ | 8388608 /* gui.WindowStyle.BORDER */ | 2097152 /* gui.WindowStyle.VSCROLL */
+        | 64 /* gui.ListBoxStyle.HASSTRINGS */ | 1 /* gui.ListBoxStyle.NOTIFY */ | 256 /* gui.ListBoxStyle.NOINTEGRALHEIGHT */
+        | (sort ? 2 /* gui.ListBoxStyle.SORT */ : 0);
+    useEffect(() => {
+        const h = lbRef.current;
+        if (!h)
+            return;
+        gui.SendMessage(h, 388 /* gui.LbMsg.RESETCONTENT */, 0, 0);
+        for (const item of items)
+            gui.SendMessage(h, 384 /* gui.LbMsg.ADDSTRING */, 0, item);
+        if (sel >= 0 && sel < items.length)
+            gui.SendMessage(h, 390 /* gui.LbMsg.SETCURSEL */, sel, 0);
+        if (scrollToBottom && items.length > 0)
+            gui.SendMessage(h, 407 /* gui.LbMsg.SETTOPINDEX */, items.length - 1, 0);
+    }, [items]);
+    useEffect(() => {
+        const h = lbRef.current;
+        if (h)
+            gui.SendMessage(h, 390 /* gui.LbMsg.SETCURSEL */, sel, 0);
+    }, [sel]);
+    return (_jsx("w", { type: "STATIC", ws: 268435456 /* gui.WindowStyle.VISIBLE */ | 33554432 /* gui.WindowStyle.CLIPCHILDREN */, style: { ...style, flexDirection: 'column', alignItems: 'stretch' }, onEvent: (e) => {
+            if (e.msg !== 273 /* gui.WmMsg.COMMAND */)
+                return;
+            const code = (e.wParam >> 16) & 0xFFFF;
+            if (code === 1 /* gui.LbnCode.SELCHANGE */) {
+                const h = lbRef.current;
+                if (!h)
+                    return;
+                const newSel = gui.SendMessage(h, 392 /* gui.LbMsg.GETCURSEL */, 0, 0);
+                if (newSel !== sel && newSel >= 0) {
+                    if (!isControlled)
+                        setInternalIndex(newSel);
+                    onChange?.(newSel);
+                }
+            }
+        }, children: _jsx("w", { type: "LISTBOX", ws: lbWs, style: { flexGrow: 1 }, ref: (h) => {
+                lbRef.current = h;
+            } }) }));
+});