Changelog

12345678910111213141516171819import { AnimatePresence, motion } from '@gpuix/react'

function Toast({ show }: { show: boolean }) {
  return (
    <AnimatePresence>
      {show ? (
        <motion.div
          key="toast"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
        >
          <text>Saved</text>
        </motion.div>
      ) : null}
    </AnimatePresence>
  )
}

12345678const img = useRef<ImgInstance>(null)

useLayoutEffect(() => {
  img.current?.setImage(pngBuffer)
  img.current?.setImagePixels(800, 80, rgbaBytes)
}, [pngBuffer, rgbaBytes])

return <img ref={img} style={{ width: 800, height: 80 }} />

12345const renderer = useGpuixRequired()

renderer.minimizeWindow?.()
renderer.zoomWindow?.()
renderer.toggleFullscreen?.()

12345const paths = await renderer.promptForPaths({
  files: true,
  multiple: true,
  prompt: 'Attach',
})

12345render(<App />, {
  onSelectionChange(event) {
    setCopied(event.value ?? '')
  },
})

1bun add --exact @gpuix/react @gpuix/native react

12345678<div
  role="button"
  aria-label="Delete note"
  aria-id="notes.delete"
  onClick={remove}
>
  Delete
</div>

1234567891011121314151617const models = [
  { value: 'sonnet', label: 'Sonnet' },
  { value: 'opus', label: 'Opus', disabled: true },
]

<Select items={models} value={model} onValueChange={setModel}>
  <SelectTrigger>
    <SelectValue placeholder="Select a model" />
  </SelectTrigger>
  <SelectContent>
    {models.map((item) => (
      <SelectItem key={item.value} value={item.value}>
        {item.label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

123<SelectItem value="opus" asChild>
  <MenuRow>Claude Opus 4.6</MenuRow>
</SelectItem>

123456<div
  onFileDrop={(event) => openFiles(event.paths ?? [])}
  style={{ width: 400, height: 300 }}
>
  <text>Drop files here</text>
</div>

1234567import { checkUpdate } from '@gpuix/native'

const update = await checkUpdate('0.1.0', {
  endpoints: ['https://github.com/OWNER/REPO/releases/latest'],
  pubkey: '<public key from cargo packager signer generate>',
})
if (update) await update.downloadAndInstall()

12345678910111213render(<Bar />, {
  appId: 'my-panel',
  height: 34,
  windowBackground: 'opaque',
  focus: false,
  layerShell: {
    namespace: 'my-panel',
    layer: 'top',
    anchor: ['top', 'left', 'right'],
    exclusiveZone: 34,
    keyboardInteractivity: 'none',
  },
})

12345<img
  src="https://example.com/avatar.png"
  objectFit="cover"
  style={{ width: 48, height: 48, borderRadius: 24 }}
/>

123<text style={{ color: '#3b82f6', textDecoration: 'underline' }}>
  Learn more
</text>

1234567891011121314<div
  style={{
    background: {
      type: 'linear-gradient',
      angle: 90,
      stops: [
        { color: '#7c3aed', position: 0 },
        { color: '#06b6d4', position: 1 },
      ],
      colorSpace: 'oklab',
    },
    borderRadius: 12,
  }}
/>

123const src = `data:image/png;base64,${Buffer.from(pngBytes).toString('base64')}`

<img src={src} style={{ width: 240, height: 140 }} />

1234567render(<App />, {
  onKeyDown(event, renderer) {
    if (event.key !== 'tab') return
    if (event.modifiers?.shift) renderer.focusPrevious?.()
    else renderer.focusNext?.()
  },
})

12345import { TestGpuixRenderer, hasTestGpuixRenderer } from '@gpuix/native'

if (hasTestGpuixRenderer()) {
  const renderer = new TestGpuixRenderer()
}

1234render(<App />, {
  titlebarTransparent: true,
  windowBackground: 'blurred',
})

123456<text style={{ padding: 8, hover: { color: '#f38ba8' } }} onClick={select}>
  {label}
</text>

<img src={avatar} onClick={openProfile} />
<anchored side="bottom" onMouseLeave={close}>{items}</anchored>

1234render(<App />, {
  title: 'Notes',
  focus: process.env.GPUIX_BACKGROUND !== '1',
})

1234567const app = await launch({
  command: 'bun',
  args: ['app.tsx'],
  env: { GPUIX_BACKGROUND: '1' },
})
await app.getByTestId('composer').fill('hello gpuix')
await app.getByTestId('composer').press('enter')

12renderer.scrollToItem(listId, index, offsetInItem)
const top = renderer.getListScrollTop(listId)

12345const renderer: NativeRenderer = {
  applyBatch(json) {
    return nativeTransport.applyBatch(json)
  },
}

12tar -xzf example-chat-aarch64-apple-darwin.tar.gz
./example-chat-aarch64-apple-darwin

12Test Files  1 skipped (1)
     Tests  6 skipped (6)

12bun run web       # build the Wasm if it is missing, then serve with HMR
bun run web:wasm  # only cargo + wasm-bindgen

123await globalThis.gpuix.getByTestId('send').click()
await globalThis.gpuix.getByTestId('composer').fill('hello')
await globalThis.gpuix.clock.fastForward(200)

123<div highlight={{ query: 'fox' }}>
  <text>the quick brown fox</text>
</div>

1234567891011import { useTextSearch } from '@gpuix/react'

const search = useTextSearch({ query })

<text>{search.total === 0 ? 'No results' : `${search.active + 1}/${search.total}`}</text>
<div onClick={search.previous}><text>↑</text></div>
<div onClick={search.next}><text>↓</text></div>

<div {...search.props} style={{ flex: 1 }}>
  <Transcript />
</div>

1234567891011121314import { findRanges, useTextSearch } from '@gpuix/react'

const perRow = useMemo(
  () => rows.map((row) => findRanges({ text: row.text, query }).length),
  [rows, query],
)

const search = useTextSearch({
  query,
  matches: {
    total: perRow.reduce((n, count) => n + count, 0),
    indexOffset: perRow.slice(0, windowStart).reduce((n, count) => n + count, 0),
  },
})

1234567891011121314151617181920const WINDOW = 40

function Transcript({ turns }: { turns: Turn[] }) {
  const [start, setStart] = useState(0)
  const end = Math.min(turns.length, start + WINDOW)
  return (
    <virtual-list
      itemCount={turns.length}
      windowStart={start}
      estimatedItemHeight={220}
      onVisibleRange={(event) =>
        setStart(Math.max(0, Math.floor(event.startIndex ?? 0) - WINDOW / 4))
      }
    >
      {turns.slice(start, end).map((turn) => (
        <ChatTurn key={turn.id} turn={turn} />
      ))}
    </virtual-list>
  )
}

1234567scrolled down                          pinned to the top
┌──────────────────┐                   ┌──────────────────┐
│ new row  (above) │  ◄── inserted     │ new row          │  ◄── inserted, visible
├──────────────────┤                   ├──────────────────┤
│ ░░ viewport ░░░░ │  stays put        │ ░░ viewport ░░░░ │  follows the insert
│ ░░░░░░░░░░░░░░░░ │                   │ ░░░░░░░░░░░░░░░░ │
└──────────────────┘                   └──────────────────┘

12345678await app.getByTestId('clip-7').dragBy(120, 0, { steps: 6 })
await app.getByTestId('clip-7-trim-end').dragTo(app.getByTestId('clip-8'))
await app.getByTestId('canvas').wheel(0, 120, { modifiers: 'cmd' })
await app.getByTestId('row-3').hover()

await app.mouse.drag({ x: 240, y: 500 }, { x: 700, y: 620 })
await app.mouse.wheel({ x: 700, y: 600 }, -140, 0)
await app.mouse.down({ x: 100, y: 100 }, { button: 2 })

12await app.getByTestId('composer').click()
await app.getByTestId('composer').fill('hello gpuix')

123456Apple    <executable>             Window
         ├ Services               ├ (AppKit window tiling)
         ├ Hide <appName>   ⌘H    ├ Minimize          ⌘M
         ├ Hide Others     ⌥⌘H    ├ Zoom
         ├ Show All               ├ Close Window      ⌘W
         └ Quit <appName>   ⌘Q    └ (open windows)

1render(<App />, { title: 'Todo', appName: 'Todo' })

12345<div
  onMouseDown={(e) => startDrag(e)}
  onMouseMove={(e) => moveDrag(e)}
  onMouseUp={() => endDrag()}
/>

1234<div style={{ position: 'relative' }} onScroll={pan}>
  {/* the wheel over this clip now pans the surface behind it */}
  <div style={{ position: 'absolute', left: 240, width: 120, backgroundColor: '#38455C' }} />
</div>

123456789101112<code
  code={source}
  language="typescript"
  showLineNumbers
  style={{
    padding: 12,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#ffffff1f',
    backgroundColor: '#ffffff09',
  }}
/>

1234node_modules                       254M
├── @gpuix/native                  185M  ◄── all six binaries, unused
├── @gpuix/native-darwin-arm64      23M  ◄── the one that loads
└── @gpuix/react                   544K

1bun -e "require('@gpuix/native'); console.log('OK')"

12<div style={{ cursor: 'grab', active: { cursor: 'grabbing' } }} />
<div style={{ cursor: 'col-resize' }} />

123456<div
  onClick={() => select(item)}
  onAuxClick={(event) => {
    if (event.isRightClick) openContextMenu(event.x, event.y)
  }}
/>

1234567const { keyboardTop, keyboardVisible, ime } = useWindowInsets()

return (
  <div style={{ paddingBottom: ime.bottom }}>
    {keyboardVisible ? `Keyboard starts at ${keyboardTop}px` : 'Keyboard closed'}
  </div>
)

123useWindowInsets()                      // 100ms, the default
useWindowInsets({ intervalMs: 250 })   // slower
useWindowInsets({ intervalMs: false }) // read once, never poll

123<div style={{ width: 260, height: 220, overflow: 'scroll' }}>
  {/* one diagonal swipe now pans on X and Y together */}
</div>

123  [padding] hello world
      ^
      press here, drag right  →  "hello world"

12error TS2322: Type '{ key: string; ... }' is not assignable to type 'Props'.
  Property 'key' does not exist on type 'Props'.

1handleGpuixEvent(event, renderer)

1234567<div style={{ display: 'flex', flexDirection: 'row', width: 280 }}>
  <div style={{ width: 40, flexShrink: 0 }} />
  <markdown
    source="- a long sentence that must wrap in the remaining column"
    style={{ flexGrow: 1 }}
  />
</div>

123const narrow = createTestRoot({ width: 640, height: 480 })
createTestRoot({ width: 640 })  // 640 x 800
createTestRoot({ width: 0 })    // throws: must be a positive, finite number

1234renderer.resetDebugFrameOverlayStats()
// ... scroll or click ...
const stats = renderer.getDebugFrameOverlayStats()
// stats.currentMs, stats.p90Ms, stats.p99Ms, stats.maxMs, stats.frames, stats.samples

12THROTTLE=utility bun run test chat.perf.test.tsx
THROTTLE=utility bun --hot chat.tsx

12bun add @gpuix/react react
bun add -d @types/react typescript

1{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@gpuix/react" } }

1cd examples && bun --hot timeline.tsx

12chmod +x example-chat-aarch64-apple-darwin
./example-chat-aarch64-apple-darwin

123456789import { motion } from '@gpuix/react'

<motion.div
  initial={{ width: 0, opacity: 0 }}
  animate={{ width: 260, opacity: 1 }}
  transition={{ duration: 0.2, ease: 'easeOut' }}
>
  Sidebar content
</motion.div>

12345678import { connectTest } from '@gpuix/react/automation'

const app = await connectTest(renderer)
await app.getByTestId('inc').click()
await app.getByText('Count: 1').waitFor()
await app.getByTestId('composer').fill('hello gpuix')
await app.getByTestId('composer').press('enter')
await app.captureFrames('review/sidebar', [0, 150, 300])

123456import { launch } from '@gpuix/react/automation'

const app = await launch({ command: 'bun', args: ['examples/chat.tsx'] })
await app.getByTestId('composer').fill('hello')
await app.screenshot({ path: 'live.png' })
await app.close()

1234567891011<div
  style={{
    display: 'grid',
    gridTemplateColumns: 3,
    gridColumnMin: 'max-content',
    rowGap: 1,
    columnGap: 1,
  }}
>
  {cells}
</div>

1234567891011import { render } from '@gpuix/react'

render(<App />, {
  title: 'Waku',
  width: 1180,
  height: 820,
  titlebarTransparent: true,
  windowBackground: 'blurred',
  trafficLightX: 16,
  trafficLightY: 17,
})

12345678const [open, setOpen] = useState(false)

<diff
  patch={unifiedPatch}
  wordDiff
  maxLines={open ? undefined : 24}
  onShowMore={() => setOpen(true)}
/>

1render(<App />, { title: 'My App', debugFrameOverlay: 'full' })

1234<div style={{ display: 'flex', flexDirection: 'column' }}>
  <text>drag from here</text>
  <code code={'and into this code block'} language="ts" />
</div>

123<code code={source} language="typescript" showLineNumbers />
<diff patch={unifiedPatch} wordDiff collapsedPaths={['pnpm-lock.yaml']} />
<markdown source={readme} onLinkClick={(e) => open(e.value)} />

1<textarea value={draft} minRows={1} maxRows={8} onChange={(e) => setDraft(e.value ?? '')} onSubmit={send} />

12import { render } from '@gpuix/react'
render(<App />, { title: 'My App', width: 800, height: 600 })

12345678910import * as SelectPrimitive from '@gpuix/react/select'

<SelectPrimitive.Root value={model} onValueChange={setModel}>
  <SelectPrimitive.Trigger>
    <SelectPrimitive.Value placeholder="Select a model" />
  </SelectPrimitive.Trigger>
  <SelectPrimitive.Content>
    <SelectPrimitive.Item value="sonnet">Sonnet</SelectPrimitive.Item>
  </SelectPrimitive.Content>
</SelectPrimitive.Root>

123<virtual-list alignment="bottom" followTail estimatedItemHeight={180}>
  {messages.map((message) => <Message key={message.id} message={message} />)}
</virtual-list>

1<svg src="/absolute/path/to/search.svg" style={{ width: 16, height: 16, color: '#b4b4b4' }} />

12import { startFrameLoop } from '@gpuix/react'
startFrameLoop(renderer)