quickwin 1.0.2 → 1.1.0

package/examples/test_gallery.tsx

@@ -1,285 +1,285 @@
-import '../lib/polyfill.js'
-import * as gui from 'gui'
-import { useState } from 'react'
-import {
-  render, Button, Input, CheckBox, ProgressBar, ComboBox, Tab,
-  ListView, type Column, ListBox, ScrollView, RadioButton, Slider,
-  TreeView, type TreeNode, DateTimePicker, Link, Tooltip, PathPicker,
-} from '../lib/react-qw/index.js'
-
-
-gui.RegisterClass('Gallery', (hwnd, msg, wParam, lParam) => {
-  if (!hwnd) return gui.DefWindowProc(hwnd, msg, wParam, lParam)
-  if (msg === gui.WmMsg.DESTROY) {
-    gui.PostQuitMessage(0)
-    return 0
-  }
-  return gui.DefWindowProc(hwnd, msg, wParam, lParam)
-})
-
-const VISIBLE = gui.WindowStyle.VISIBLE
-const CLIPCHILDREN = gui.WindowStyle.CLIPCHILDREN
-
-interface Fruit {
-  name: string
-  color: string
-  origin: string
-}
-
-const treeData: TreeNode[] = [
-  {
-    key: 'fruits', label: 'Fruits',
-    children: [
-      { key: 'apple', label: 'Apple' },
-      { key: 'banana', label: 'Banana' },
-      { key: 'cherry', label: 'Cherry' },
-    ],
-  },
-  {
-    key: 'veggies', label: 'Vegetables',
-    children: [
-      { key: 'carrot', label: 'Carrot' },
-      { key: 'broccoli', label: 'Broccoli' },
-    ],
-  },
-  {
-    key: 'meats', label: 'Meats',
-    children: [
-      { key: 'chicken', label: 'Chicken' },
-      { key: 'beef', label: 'Beef' },
-      { key: 'pork', label: 'Pork' },
-    ],
-  },
-]
-
-function App({ svW, svH }: { svW: number; svH: number }) {
-  const [count, setCount] = useState(0)
-  const [disabled, setDisabled] = useState(true)
-  const [inputText, setInputText] = useState('')
-  const [checkA, setCheckA] = useState(true)
-  const [checkB, setCheckB] = useState(false)
-  const [progress, setProgress] = useState(30)
-  const [lbSel, setLbSel] = useState(0)
-  const [cbSel, setCbSel] = useState(-1)
-  const [radio, setRadio] = useState('a')
-  const [sliderVal, setSliderVal] = useState(50)
-  const [treeSel, setTreeSel] = useState<TreeNode | null>(null)
-  const [dtDate, setDtDate] = useState<Date | null>(new Date())
-  const [pickerPath, setPickerPath] = useState('')
-  const [listData, setListData] = useState<Fruit[]>([
-    { name: 'Apple', color: 'Red', origin: 'China' },
-    { name: 'Banana', color: 'Yellow', origin: 'Philippines' },
-    { name: 'Cherry', color: 'Dark Red', origin: 'USA' },
-    { name: 'Date', color: 'Brown', origin: 'Middle East' },
-    { name: 'Elderberry', color: 'Purple', origin: 'Europe' },
-    { name: 'Fig', color: 'Purple', origin: 'Turkey' },
-    { name: 'Grape', color: 'Green', origin: 'Italy' },
-  ])
-  const [listCols, setListCols] = useState<Column<Fruit>[]>([
-    { name: 'Name', dataIndex: 'name' },
-    { name: 'Color', dataIndex: 'color' },
-    { name: 'Origin', dataIndex: 'origin' },
-  ])
-  const lbItems = listData.map(f => f.name)
-  const cbItems = ['Red', 'Green', 'Blue', 'Yellow', 'Purple', 'Orange']
-
-  return (
-      <ScrollView style={{width:svW, height:svH}} contentHeight={1600}>
-      <w type="STATIC" ws={VISIBLE | CLIPCHILDREN | gui.WindowStyle.BORDER} style={{flexDirection:'column', gap:8, alignSelf:'stretch', flexGrow:1, padding:8}}>
-      {/* ===== 三列上半区 ===== */}
-      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:10, height:345}}>
-
-        {/* --- 左列: Buttons + CheckBoxes --- */}
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text="Buttons" style={{height:24}} />
-          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:30}}>
-            <Tooltip text="Click to increment counter" balloon>
-              <Button onClick={() => setCount(c => c + 1)} style={{flexGrow:1}}>
-                {`Clicked ${count} times`}
-              </Button>
-            </Tooltip>
-            <Button onClick={() => setCount(0)} style={{width:70}}>
-              Reset
-            </Button>
-          </w>
-          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:30}}>
-            <Button onClick={() => setDisabled(d => !d)} style={{flexGrow:1}}>
-              {`Toggle disabled (${String(disabled)})`}
-            </Button>
-            <Button disabled={disabled} style={{width:80}}>
-              Disabled
-            </Button>
-          </w>
-          <w type="STATIC" ws={VISIBLE} text="CheckBoxes" style={{height:24}} />
-          <CheckBox checked={checkA} onChange={setCheckA} label={`Option A (${String(checkA)})`} style={{height:26}} />
-          <CheckBox checked={checkB} onChange={setCheckB} label={`Option B (${String(checkB)})`} style={{height:26}} />
-          <CheckBox label="Disabled checkbox" disabled style={{height:26}} />
-          <w type="STATIC" ws={VISIBLE} text={`RadioButtons (${radio})`} style={{height:24}} />
-          <RadioButton checked={radio === 'a'} onChange={() => setRadio('a')} label="Option A" style={{height:24}} />
-          <RadioButton checked={radio === 'b'} onChange={() => setRadio('b')} label="Option B" style={{height:24}} />
-          <RadioButton checked={radio === 'c'} onChange={() => setRadio('c')} label="Option C" style={{height:24}} />
-        </w>
-
-        {/* --- 中列: Input + ProgressBar --- */}
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text="Input" style={{height:24}} />
-          <Input value={inputText} onChange={setInputText} placeholder="Type here..." style={{height:28}} />
-          <Input placeholder="Password" password style={{height:28}} />
-          <Input value="Read only" readonly style={{height:28}} />
-          <w type="STATIC" ws={VISIBLE} text="ProgressBar" style={{height:24}} />
-          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:24}}>
-            <ProgressBar value={progress} max={100} smooth style={{flexGrow:1}} />
-            <w type="STATIC" ws={VISIBLE} text={`${progress}%`} style={{width:40}} />
-          </w>
-          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:30}}>
-            <Button onClick={() => setProgress(p => Math.min(100, p + 10))} style={{flexGrow:1}}>
-              +10
-            </Button>
-            <Button onClick={() => setProgress(p => Math.max(0, p - 10))} style={{flexGrow:1}}>
-              -10
-            </Button>
-            <Button onClick={() => setProgress(0)} style={{width:50}}>
-              0
-            </Button>
-          </w>
-          <w type="STATIC" ws={VISIBLE} text={`Slider (${sliderVal})`} style={{height:24}} />
-          <Slider value={sliderVal} onChange={setSliderVal} min={0} max={100} style={{height:30}} />
-        </w>
-
-        {/* --- 右列: ListBox + ComboBox --- */}
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text={`ListBox (sel=${lbSel >= 0 ? lbItems[lbSel] : 'none'})`} style={{height:24}} />
-          <ListBox items={lbItems} selectedIndex={lbSel} onChange={(i) => setLbSel(i)} style={{flexGrow:1}} />
-          <w type="STATIC" ws={VISIBLE} text="ComboBox" style={{height:24}} />
-          <ComboBox items={cbItems} selectedIndex={cbSel} onChange={(i) => setCbSel(i)} style={{height:26}} />
-          <w type="STATIC" ws={VISIBLE}
-            text={cbSel >= 0 ? `Selected: ${cbItems[cbSel]}` : '(none selected)'}
-            style={{height:24}} />
-        </w>
-      </w>
-
-      {/* ===== Auto-Size ===== */}
-      <w type="STATIC" ws={VISIBLE} text="Auto-Size" style={{height:24}} />
-      <w type="STATIC" ws={VISIBLE | CLIPCHILDREN | gui.WindowStyle.BORDER} style={{flexDirection:'column', gap:6, alignSelf:'stretch', flexGrow:1}}>
-        <w type="STATIC" ws={VISIBLE} text="Buttons (auto width)" style={{height:24}} />
-        <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:30}}>
-          <Button style={{width:'auto', height:30}}>OK</Button>
-          <Button style={{width:'auto', height:30}}>Cancel</Button>
-          <Button style={{width:'auto', height:30}}>A very long button text</Button>
-        </w>
-        <w type="STATIC" ws={VISIBLE} text="Statics (auto width)" style={{height:24}} />
-        <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:24}}>
-          <w type="STATIC" ws={VISIBLE | gui.WindowStyle.BORDER} text="Short" style={{width:'auto', height:24}} />
-          <w type="STATIC" ws={VISIBLE | gui.WindowStyle.BORDER} text="A much longer label" style={{width:'auto', height:24}} />
-        </w>
-        <w type="STATIC" ws={VISIBLE} text="Mixed auto + fixed" style={{height:24}} />
-        <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:30}}>
-          <Button style={{width:150, height:30}}>Fixed 150</Button>
-          <Button style={{width:'auto', height:30}}>Auto</Button>
-        </w>
-      </w>
-
-      {/* ===== Tab Demo ===== */}
-      <w type="STATIC" ws={VISIBLE} text="Tab" style={{height:24}} />
-      <Tab
-        tabs={[
-          { title: 'Counter', content: (
-            <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6}}>
-              <w type="STATIC" ws={VISIBLE} text={`Count: ${count}`} style={{height:24}} />
-              <Button onClick={() => setCount(c => c + 1)} style={{width:80}}>+1</Button>
-            </w>
-          )},
-          { title: 'Typing', content: (
-            <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6}}>
-              <Input value={inputText} onChange={setInputText} placeholder="Type here..." style={{height:28}} />
-              <w type="STATIC" ws={VISIBLE} text={inputText ? `You typed: ${inputText}` : '(empty)'} style={{height:24}} />
-            </w>
-          )},
-        ]}
-        style={{height:120}}
-      />
-
-      {/* ===== DateTimePicker ===== */}
-      <w type="STATIC" ws={VISIBLE} text={`DateTimePicker (${dtDate ? `${dtDate.getFullYear()}-${String(dtDate.getMonth()+1).padStart(2,'0')}-${String(dtDate.getDate()).padStart(2,'0')}` : 'none'})`} style={{height:24}} />
-      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:28}}>
-        <DateTimePicker value={dtDate} onChange={setDtDate} style={{flexGrow:1}} />
-        <DateTimePicker value={dtDate} onChange={setDtDate} format="long" style={{flexGrow:1}} />
-        <DateTimePicker value={dtDate} onChange={setDtDate} format="time" style={{flexGrow:1}} />
-      </w>
-
-      {/* ===== SysLink ===== */}
-      <w type="STATIC" ws={VISIBLE} text="SysLink" style={{height:24}} />
-      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:28}}>
-        <Link href="https://example.com" onClick={(url) => console.log('Link clicked:', url)} style={{flexGrow:1}}>
-          Example Link
-        </Link>
-        <Link href="https://github.com" onClick={(url) => console.log('Link clicked:', url)} style={{flexGrow:1}} />
-      </w>
-
-      {/* ===== PathPicker ===== */}
-      <w type="STATIC" ws={VISIBLE} text="PathPicker" style={{height:24}} />
-      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'column', gap:6, height:130}}>
-        <PathPicker type="file" title="Select a file" style={{height:28}} />
-        <PathPicker type="folder" title="Select a folder" style={{height:28}} />
-        <PathPicker type="file" value={pickerPath} onChange={setPickerPath} title="Controlled" style={{height:28}} />
-        <w type="STATIC" ws={VISIBLE} text={pickerPath ? `Selected: ${pickerPath}` : '(none)'} style={{height:20}} />
-      </w>
-
-      {/* ===== 下半区: ListView + ScrollView + TreeView ===== */}
-      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:400}}>
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:4, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text={`ListView (${listData.length} items)`} style={{height:24}} />
-          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', flexGrow:1}}>
-            <ListView<Fruit>
-              columns={listCols}
-              data={listData}
-              style={{flexGrow:1}}
-            />
-            <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, width:100}}>
-              <Button onClick={() => setListData(d => [...d, { name: 'NewItem ' + String(listData.length + 1), color: '', origin: '' }])} style={{height:28}}>
-                Add
-              </Button>
-              <Button onClick={() => setListCols(cols => [...cols, { name: 'Col' + (listCols.length + 1), dataIndex: 'name' as keyof Fruit }])} style={{height:28}}>
-                +Column
-              </Button>
-            </w>
-          </w>
-        </w>
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:4, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text="ScrollView (scrollable)" style={{height:24}} />
-          <ScrollView style={{flexGrow:1}} contentWidth={500} contentHeight={560}>
-            {Array.from({ length: 20 }, (_, i) => (
-              <w type="STATIC" ws={VISIBLE}
-                key={i}
-                text={`Item ${i + 1} - ${i === 0 ? 'here is a line so wide that the horizontal scrollbar appears for demonstration' : ''}`}
-                style={{width: i === 0 ? 500 : 200, height:28}}
-              />
-            ))}
-          </ScrollView>
-        </w>
-        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:4, flexGrow:1}}>
-          <w type="STATIC" ws={VISIBLE} text={`TreeView (sel=${treeSel?.label ?? 'none'})`} style={{height:24}} />
-          <TreeView data={treeData} onSelect={setTreeSel} style={{flexGrow:1}} />
-        </w>
-      </w>
-      </w>
-    </ScrollView>
-  )
-}
-
-const hwnd = gui.CreateWindow(
-  'Gallery', 'Component Gallery',
-  gui.WindowStyle.OVERLAPPEDWINDOW,
-  100, 100, 1400, 1200, null, null
-)
-
-if (hwnd) {
-  const cr = gui.GetClientRect(hwnd)!
-  const scale = gui.GetScaleFactor()
-  const svW = Math.round((cr.right - cr.left) / scale)
-  const svH = Math.round((cr.bottom - cr.top) / scale)
-  render(<App svW={svW} svH={svH} />, hwnd)
-  setTimeout(() => {
-    gui.ShowWindow(hwnd)
-  }, 0)
-}
+import '../lib/polyfill.js'
+import * as gui from 'gui'
+import { useState } from 'react'
+import {
+  render, Button, Input, CheckBox, ProgressBar, ComboBox, Tab,
+  ListView, type Column, ListBox, ScrollView, RadioButton, Slider,
+  TreeView, type TreeNode, DateTimePicker, Link, Tooltip, PathPicker,
+} from '../lib/react-qw/index.js'
+
+
+gui.RegisterClass('Gallery', (hwnd, msg, wParam, lParam) => {
+  if (!hwnd) return gui.DefWindowProc(hwnd, msg, wParam, lParam)
+  if (msg === gui.WmMsg.DESTROY) {
+    gui.PostQuitMessage(0)
+    return 0
+  }
+  return gui.DefWindowProc(hwnd, msg, wParam, lParam)
+})
+
+const VISIBLE = gui.WindowStyle.VISIBLE
+const CLIPCHILDREN = gui.WindowStyle.CLIPCHILDREN
+
+interface Fruit {
+  name: string
+  color: string
+  origin: string
+}
+
+const treeData: TreeNode[] = [
+  {
+    key: 'fruits', label: 'Fruits',
+    children: [
+      { key: 'apple', label: 'Apple' },
+      { key: 'banana', label: 'Banana' },
+      { key: 'cherry', label: 'Cherry' },
+    ],
+  },
+  {
+    key: 'veggies', label: 'Vegetables',
+    children: [
+      { key: 'carrot', label: 'Carrot' },
+      { key: 'broccoli', label: 'Broccoli' },
+    ],
+  },
+  {
+    key: 'meats', label: 'Meats',
+    children: [
+      { key: 'chicken', label: 'Chicken' },
+      { key: 'beef', label: 'Beef' },
+      { key: 'pork', label: 'Pork' },
+    ],
+  },
+]
+
+function App({ svW, svH }: { svW: number; svH: number }) {
+  const [count, setCount] = useState(0)
+  const [disabled, setDisabled] = useState(true)
+  const [inputText, setInputText] = useState('')
+  const [checkA, setCheckA] = useState(true)
+  const [checkB, setCheckB] = useState(false)
+  const [progress, setProgress] = useState(30)
+  const [lbSel, setLbSel] = useState(0)
+  const [cbSel, setCbSel] = useState(-1)
+  const [radio, setRadio] = useState('a')
+  const [sliderVal, setSliderVal] = useState(50)
+  const [treeSel, setTreeSel] = useState<TreeNode | null>(null)
+  const [dtDate, setDtDate] = useState<Date | null>(new Date())
+  const [pickerPath, setPickerPath] = useState('')
+  const [listData, setListData] = useState<Fruit[]>([
+    { name: 'Apple', color: 'Red', origin: 'China' },
+    { name: 'Banana', color: 'Yellow', origin: 'Philippines' },
+    { name: 'Cherry', color: 'Dark Red', origin: 'USA' },
+    { name: 'Date', color: 'Brown', origin: 'Middle East' },
+    { name: 'Elderberry', color: 'Purple', origin: 'Europe' },
+    { name: 'Fig', color: 'Purple', origin: 'Turkey' },
+    { name: 'Grape', color: 'Green', origin: 'Italy' },
+  ])
+  const [listCols, setListCols] = useState<Column<Fruit>[]>([
+    { name: 'Name', dataIndex: 'name' },
+    { name: 'Color', dataIndex: 'color' },
+    { name: 'Origin', dataIndex: 'origin' },
+  ])
+  const lbItems = listData.map(f => f.name)
+  const cbItems = ['Red', 'Green', 'Blue', 'Yellow', 'Purple', 'Orange']
+
+  return (
+      <ScrollView style={{width:svW, height:svH}} contentHeight={1600}>
+      <w type="STATIC" ws={VISIBLE | CLIPCHILDREN | gui.WindowStyle.BORDER} style={{flexDirection:'column', gap:8, alignSelf:'stretch', flexGrow:1, padding:8}}>
+      {/* ===== 三列上半区 ===== */}
+      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:10, height:345}}>
+
+        {/* --- 左列: Buttons + CheckBoxes --- */}
+        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, flexGrow:1}}>
+          <w type="STATIC" ws={VISIBLE} text="Buttons" style={{height:24}} />
+          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:30}}>
+            <Tooltip text="Click to increment counter" balloon>
+              <Button onClick={() => setCount(c => c + 1)} style={{flexGrow:1}}>
+                {`Clicked ${count} times`}
+              </Button>
+            </Tooltip>
+            <Button onClick={() => setCount(0)} style={{width:70}}>
+              Reset
+            </Button>
+          </w>
+          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:30}}>
+            <Button onClick={() => setDisabled(d => !d)} style={{flexGrow:1}}>
+              {`Toggle disabled (${String(disabled)})`}
+            </Button>
+            <Button disabled={disabled} style={{width:80}}>
+              Disabled
+            </Button>
+          </w>
+          <w type="STATIC" ws={VISIBLE} text="CheckBoxes" style={{height:24}} />
+          <CheckBox checked={checkA} onChange={setCheckA} label={`Option A (${String(checkA)})`} style={{height:26}} />
+          <CheckBox checked={checkB} onChange={setCheckB} label={`Option B (${String(checkB)})`} style={{height:26}} />
+          <CheckBox label="Disabled checkbox" disabled style={{height:26}} />
+          <w type="STATIC" ws={VISIBLE} text={`RadioButtons (${radio})`} style={{height:24}} />
+          <RadioButton checked={radio === 'a'} onChange={() => setRadio('a')} label="Option A" style={{height:24}} />
+          <RadioButton checked={radio === 'b'} onChange={() => setRadio('b')} label="Option B" style={{height:24}} />
+          <RadioButton checked={radio === 'c'} onChange={() => setRadio('c')} label="Option C" style={{height:24}} />
+        </w>
+
+        {/* --- 中列: Input + ProgressBar --- */}
+        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, flexGrow:1}}>
+          <w type="STATIC" ws={VISIBLE} text="Input" style={{height:24}} />
+          <Input value={inputText} onChange={setInputText} placeholder="Type here..." style={{height:28}} />
+          <Input placeholder="Password" password style={{height:28}} />
+          <Input value="Read only" readonly style={{height:28}} />
+          <w type="STATIC" ws={VISIBLE} text="ProgressBar" style={{height:24}} />
+          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:24}}>
+            <ProgressBar value={progress} max={100} smooth style={{flexGrow:1}} />
+            <w type="STATIC" ws={VISIBLE} text={`${progress}%`} style={{width:40}} />
+          </w>
+          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:30}}>
+            <Button onClick={() => setProgress(p => Math.min(100, p + 10))} style={{flexGrow:1}}>
+              +10
+            </Button>
+            <Button onClick={() => setProgress(p => Math.max(0, p - 10))} style={{flexGrow:1}}>
+              -10
+            </Button>
+            <Button onClick={() => setProgress(0)} style={{width:50}}>
+              0
+            </Button>
+          </w>
+          <w type="STATIC" ws={VISIBLE} text={`Slider (${sliderVal})`} style={{height:24}} />
+          <Slider value={sliderVal} onChange={setSliderVal} min={0} max={100} style={{height:30}} />
+        </w>
+
+        {/* --- 右列: ListBox + ComboBox --- */}
+        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, flexGrow:1}}>
+          <w type="STATIC" ws={VISIBLE} text={`ListBox (sel=${lbSel >= 0 ? lbItems[lbSel] : 'none'})`} style={{height:24}} />
+          <ListBox items={lbItems} selectedIndex={lbSel} onChange={(i) => setLbSel(i)} style={{flexGrow:1}} />
+          <w type="STATIC" ws={VISIBLE} text="ComboBox" style={{height:24}} />
+          <ComboBox items={cbItems} selectedIndex={cbSel} onChange={(i) => setCbSel(i)} style={{height:26}} />
+          <w type="STATIC" ws={VISIBLE}
+            text={cbSel >= 0 ? `Selected: ${cbItems[cbSel]}` : '(none selected)'}
+            style={{height:24}} />
+        </w>
+      </w>
+
+      {/* ===== Auto-Size ===== */}
+      <w type="STATIC" ws={VISIBLE} text="Auto-Size" style={{height:24}} />
+      <w type="STATIC" ws={VISIBLE | CLIPCHILDREN | gui.WindowStyle.BORDER} style={{flexDirection:'column', gap:6, alignSelf:'stretch', flexGrow:1}}>
+        <w type="STATIC" ws={VISIBLE} text="Buttons (auto width)" style={{height:24}} />
+        <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:30}}>
+          <Button style={{width:'auto', height:30}}>OK</Button>
+          <Button style={{width:'auto', height:30}}>Cancel</Button>
+          <Button style={{width:'auto', height:30}}>A very long button text</Button>
+        </w>
+        <w type="STATIC" ws={VISIBLE} text="Statics (auto width)" style={{height:24}} />
+        <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:24}}>
+          <w type="STATIC" ws={VISIBLE | gui.WindowStyle.BORDER} text="Short" style={{width:'auto', height:24}} />
+          <w type="STATIC" ws={VISIBLE | gui.WindowStyle.BORDER} text="A much longer label" style={{width:'auto', height:24}} />
+        </w>
+        <w type="STATIC" ws={VISIBLE} text="Mixed auto + fixed" style={{height:24}} />
+        <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:30}}>
+          <Button style={{width:150, height:30}}>Fixed 150</Button>
+          <Button style={{width:'auto', height:30}}>Auto</Button>
+        </w>
+      </w>
+
+      {/* ===== Tab Demo ===== */}
+      <w type="STATIC" ws={VISIBLE} text="Tab" style={{height:24}} />
+      <Tab
+        tabs={[
+          { title: 'Counter', content: (
+            <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6}}>
+              <w type="STATIC" ws={VISIBLE} text={`Count: ${count}`} style={{height:24}} />
+              <Button onClick={() => setCount(c => c + 1)} style={{width:80}}>+1</Button>
+            </w>
+          )},
+          { title: 'Typing', content: (
+            <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6}}>
+              <Input value={inputText} onChange={setInputText} placeholder="Type here..." style={{height:28}} />
+              <w type="STATIC" ws={VISIBLE} text={inputText ? `You typed: ${inputText}` : '(empty)'} style={{height:24}} />
+            </w>
+          )},
+        ]}
+        style={{height:120}}
+      />
+
+      {/* ===== DateTimePicker ===== */}
+      <w type="STATIC" ws={VISIBLE} text={`DateTimePicker (${dtDate ? `${dtDate.getFullYear()}-${String(dtDate.getMonth()+1).padStart(2,'0')}-${String(dtDate.getDate()).padStart(2,'0')}` : 'none'})`} style={{height:24}} />
+      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:28}}>
+        <DateTimePicker value={dtDate} onChange={setDtDate} style={{flexGrow:1}} />
+        <DateTimePicker value={dtDate} onChange={setDtDate} format="long" style={{flexGrow:1}} />
+        <DateTimePicker value={dtDate} onChange={setDtDate} format="time" style={{flexGrow:1}} />
+      </w>
+
+      {/* ===== SysLink ===== */}
+      <w type="STATIC" ws={VISIBLE} text="SysLink" style={{height:24}} />
+      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:8, alignItems:'stretch', height:28}}>
+        <Link href="https://example.com" onClick={(url) => console.log('Link clicked:', url)} style={{flexGrow:1}}>
+          Example Link
+        </Link>
+        <Link href="https://github.com" onClick={(url) => console.log('Link clicked:', url)} style={{flexGrow:1}} />
+      </w>
+
+      {/* ===== PathPicker ===== */}
+      <w type="STATIC" ws={VISIBLE} text="PathPicker" style={{height:24}} />
+      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'column', gap:6, height:130}}>
+        <PathPicker type="file" title="Select a file" style={{height:28}} />
+        <PathPicker type="folder" title="Select a folder" style={{height:28}} />
+        <PathPicker type="file" value={pickerPath} onChange={setPickerPath} title="Controlled" style={{height:28}} />
+        <w type="STATIC" ws={VISIBLE} text={pickerPath ? `Selected: ${pickerPath}` : '(none)'} style={{height:20}} />
+      </w>
+
+      {/* ===== 下半区: ListView + ScrollView + TreeView ===== */}
+      <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', height:400}}>
+        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:4, flexGrow:1}}>
+          <w type="STATIC" ws={VISIBLE} text={`ListView (${listData.length} items)`} style={{height:24}} />
+          <w type="STATIC" ws={VISIBLE} style={{flexDirection:'row', gap:6, alignItems:'stretch', flexGrow:1}}>
+            <ListView<Fruit>
+              columns={listCols}
+              data={listData}
+              style={{flexGrow:1}}
+            />
+            <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:6, width:100}}>
+              <Button onClick={() => setListData(d => [...d, { name: 'NewItem ' + String(listData.length + 1), color: '', origin: '' }])} style={{height:28}}>
+                Add
+              </Button>
+              <Button onClick={() => setListCols(cols => [...cols, { name: 'Col' + (listCols.length + 1), dataIndex: 'name' as keyof Fruit }])} style={{height:28}}>
+                +Column
+              </Button>
+            </w>
+          </w>
+        </w>
+        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:4, flexGrow:1}}>
+          <w type="STATIC" ws={VISIBLE} text="ScrollView (scrollable)" style={{height:24}} />
+          <ScrollView style={{flexGrow:1}} contentWidth={500} contentHeight={560}>
+            {Array.from({ length: 20 }, (_, i) => (
+              <w type="STATIC" ws={VISIBLE}
+                key={i}
+                text={`Item ${i + 1} - ${i === 0 ? 'here is a line so wide that the horizontal scrollbar appears for demonstration' : ''}`}
+                style={{width: i === 0 ? 500 : 200, height:28}}
+              />
+            ))}
+          </ScrollView>
+        </w>
+        <w type="STATIC" ws={VISIBLE | CLIPCHILDREN} style={{flexDirection:'column', gap:4, flexGrow:1}}>
+          <w type="STATIC" ws={VISIBLE} text={`TreeView (sel=${treeSel?.label ?? 'none'})`} style={{height:24}} />
+          <TreeView data={treeData} onSelect={setTreeSel} style={{flexGrow:1}} />
+        </w>
+      </w>
+      </w>
+    </ScrollView>
+  )
+}
+
+const hwnd = gui.CreateWindow(
+  'Gallery', 'Component Gallery',
+  gui.WindowStyle.OVERLAPPEDWINDOW,
+  100, 100, 1400, 1200, null, null
+)
+
+if (hwnd) {
+  const cr = gui.GetClientRect(hwnd)!
+  const scale = gui.GetScaleFactor()
+  const svW = Math.round((cr.right - cr.left) / scale)
+  const svH = Math.round((cr.bottom - cr.top) / scale)
+  render(<App svW={svW} svH={svH} />, hwnd)
+  setTimeout(() => {
+    gui.ShowWindow(hwnd)
+  }, 0)
+}