@gpuix/react@0.5.0

1. GPUIX apps now run in the browser. The same React tree renders through GPUI's browser platform on WebGPU, with a WebGL2 fallback. RetainedTree, GpuixView, styles, and text painting are shared with desktop, so events, selects, comboboxes, inputs, motion, and GPUI scroll gestures all work through a Wasm-to-JavaScript callback bridge. napi-rs stays the desktop bridge; wasm-bindgen starts gpui_web in the page.

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

   bun run web serves through Bun's frontend dev server, so an edit to a component module is a React Fast Refresh update instead of a page reload. useState survives, the GPUI canvas is never re-created, and the ~19 MB Wasm module is never re-fetched.

   Browser apps always expose the automation API on globalThis, so Playwright or Playwriter can drive them by evaluating in the page:

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

   Two rules for a browser entry, both learned the hard way: never call import.meta.hot.accept("./your-app", ...) in the entry file, because Bun runs the dependency-accept callback even when the module already self-accepted for Fast Refresh and the remount wipes every hook; and keep the @gpuix/native import out of any Refresh boundary, because the Wasm half is a singleton and WebGpuixRenderer::init fails with GPUIX web is already running.

   Browser-specific fixes that landed with it: the debug frame overlay works on Wasm (render(<App />, { debugFrameOverlay: 'full' })), macOS browsers get Option+Left / Option+Right word navigation in inputs, diagonal resize cursors point the right way, and GPUI Web's IME bridge is fully hidden so host input CSS can no longer unhide a stray text field at the top of the page.

   On iOS, touch pans emit scroll wheel events instead of mouse drags, so a swipe scrolls instead of selecting text. A tap does not start a selection, a long press followed by a drag still does, and a text input requests the software keyboard inside its tap handler so the keyboard opens on the composer and closes elsewhere.

2. New highlight prop — paint a background wash behind matched or explicitly given text ranges. This is what you need for Ctrl+F, agent citations, or LSP diagnostic tints. Put it on any element and it applies to that subtree, so the root searches the window and a container searches only that container.

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

   It reaches <text>, <code>, <markdown> and <diff> with no extra props, because every string GPUIX paints goes through the same funnel.

   useTextSearch owns the cursor and the count, so a find bar needs no effects:

   import { 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>

   field	meaning
   query	substring to match, case-insensitive by default
   caseSensitive	exact case only
   wholeWord	neither neighbour may be alphanumeric or _
   ranges	explicit [start, end) UTF-16 pairs
   color / activeColor	any CSS colour; defaults come from the theme
   activeIndex	which match gets activeColor, for a find cursor
   matchIndexOffset	matches before this subtree; only for virtualized content
   radius	corner radius of the wash, default 2

   Matches are non-overlapping and leftmost-first, and never cross a line, exactly like browser find. They do cross the several host nodes React creates for one interpolated line: <text>Hello {name}!</text> is three host text nodes and Hello Tommy still matches. activeIndex counts matches in paint order, so it means the same thing whether a match sits in a <text> or inside a <code> block.

   A <virtual-list> never builds off-screen rows, so the app supplies both numbers with the new findRanges export, which runs the same algorithm as the native matcher on a string you give it:

   import { 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),
     },
   })

   A highlight is a quad, so getPaintedText() cannot see it. renderer.getPaintedHighlights() reports the matched range in UTF-16 units plus the boxes it drew, one per visual row.

   Nothing resolves and nothing paints unless an element declares a highlight. A root-scoped query over a 1000-turn chat costs about 2ms per keystroke, and moving the find cursor only re-colours matches it already found.

3. <virtual-list> can mount a window of rows instead of all of them. The children form retains every child, so the first mount of a long transcript used to pay for every row. Pass itemCount with estimatedItemHeight and windowStart, then render only that slice; native keeps the full logical length for the scrollbar.

   const 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>
     )
   }

   onVisibleRange reports startIndex and endIndex after a scroll. TypeScript now requires estimatedItemHeight next to itemCount, and native ignores itemCount without it, because a row React has not mounted would otherwise measure as height 0 and collapse the scrollbar on a jump.

   There is deliberately no VirtualList wrapper component. The window is application state. A generic wrapper cannot know when to widen its own window, so it silently dropped rows whenever itemCount grew without a scroll, which is exactly what a filter does.

4. A prepended row is visible again. A list is anchored on a row, not a pixel offset, so inserting rows above the viewport used to slide the viewport down by the height of the new rows. A todo list or a feed that prepends the newest item never showed it.

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

   A browser anchors the same way and suppresses it at scrollTop: 0. A top-aligned list that is scrolled to the very top now stays at the top across a mutation. Scrolled anywhere else, the rows under the pointer still do not move. A history pane that loads older pages while the user reads should keep using alignment="bottom".

5. Automation can drag, hover, wheel, and hold modifiers. The protocol already carried the events, but nothing exposed them, so a drag or a pan could not be driven from a test.

   await 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 })

   Call	What it does
   locator.hover()	Moves the pointer to the center, so hover styles and tooltips fire
   locator.wheel(dx, dy)	One wheel event over the center
   locator.dragBy(dx, dy) / locator.dragTo(target)	Press, travel, release
   locator.center()	The center of the last painted bounds
   app.mouse.move / down / up / click / wheel / drag	Raw pointer input in window coordinates

   A drag sends interpolated moves, not one jump, because snapping, live previews, and per-move commits only appear when the pointer travels. Every mouse call takes modifiers in the same hyphenated syntax as press('cmd-a'), so cmd-wheel zoom, shift-click range selection, and alt-drag duplication are testable. launch() can now scroll a live app, textContent() concatenates descendants like DOM textContent, and click({ button }) really sends that button. Mouse input, locator bounds, and clock controls also work against a live app on Windows, Linux, and FreeBSD.

6. <input> and <textarea> are reachable from the locator API.

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

   bounds() and click() threw Element has no painted bounds, because a custom element paints itself and the editor never attached the automation bounds tracker; the only workaround was a hard-coded pixel coordinate. In the browser, fill() and press() threw GPUI browser input is unavailable: the client looked for input[data-gpui-input], and zed-industries/zed#63201 replaced that element with a <textarea>. It now matches the attribute alone, exported as IME_MIRROR_SELECTOR.

   <img>, <svg>, <anchored>, <diff> and <markdown> do register painted bounds now too, so a testId on <markdown> no longer returns null, and TestRenderer.findByTestId() resolves it from the retained tree.

7. macOS apps have a menu bar, so ⌘Q, ⌘H, ⌥⌘H, ⌘M and ⌘W work. GPUI never calls NSApplication.setMainMenu:, so NSApp.mainMenu stayed nil, macOS painted nothing next to the Apple menu, and there was no way to quit a GPUIX app from the keyboard.

   Apple    <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)
   

   New appName window option for the name inside Hide X and Quit X. It defaults to title.

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

   appName does not set the title of the application menu: macOS takes that from the executable, so bun app.tsx shows bun. Only a real .app bundle changes it. There is no Edit menu on purpose, because AppKit consumes a menu key equivalent before the window sees it and ⌘C would be taken away from text selection and from <input>.

8. Pointer capture, like HTML. onMouseMove and onMouseUp continue after the pointer leaves the element that received onMouseDown, matching setPointerCapture. A clip, resizer, or slider keeps receiving events without a full-window overlay.

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

   Capture is armed only when the same node listens for down and move. A node with only onMouseDown / onMouseUp does not capture, and a release outside still cancels the click, as in the DOM.

9. The wheel reaches an ancestor scroller from under an absolutely positioned child, like a browser. Absolute and fixed boxes used BlockMouse, which ended the hit test, so a timeline clip or a graph node swallowed a pan gesture. Every filled or positioned div now uses BlockMouseExceptScroll: clicks and hovers stop, the wheel passes through.

   <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>

   Set pointerEvents: "auto" on the rare element that must swallow the wheel too, such as a modal backdrop. <anchored> still occludes by default. An absolutely positioned box still takes clicks with no background, exactly like an empty positioned div in a browser, so a wrapper that only carries a scroll offset should set pointerEvents: "none".

10. <code> is a bare surface. It paints glyphs only: no fill, no border, no radius, no padding, no language header. style is the surface, exactly like a <div>, so the card look belongs to your app instead of to the element.

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

    fontFamily, fontSize, fontWeight, lineHeight and color in style now beat the theme, and one resolver feeds the div text style, every TextRun, and the fixed row height. style.lineHeight used to be dropped and clip tall glyphs; it re-sizes the rows instead.

    Migration: showHeader is gone. Render your own header in a wrapper. Five theme.metrics fields only ever styled that card and moved to the mdCode* group, where they still tune the <markdown> fenced block:

    Before	After
    codePaddingX / codePaddingY	mdCodePaddingX / mdCodePaddingY
    codeRadius	mdCodeRadius
    codeHeaderPaddingY	mdCodeHeaderPaddingY
    codeHeaderTextSize	mdCodeHeaderTextSize

    <markdown> keeps its card: a document renderer owns its layout, a primitive does not.

11. Syntax highlighting moved from Tree-sitter to Syntect, with Oniguruma on native. There is no Tree-sitter runtime and no per-language C grammar in the binary. Language detection is unchanged (fence tag, then path, then shebang), and token classes stay HighlightKind values rather than baked-in colours, so a theme change recolours existing spans without a reparse.

    Syntect compiles every TextMate regex of a grammar the first time that grammar is used, on the frame thread, inside a paint. The engine decides how expensive that is:

    grammar	fancy-regex, first use	Oniguruma, first use
    TypeScript	~133ms	~12ms
    Markdown	~39ms	~1.7ms
    Rust	~17ms	~1.6ms

    The chat example mount for 1000 turns goes from about 240ms to about 130ms, and the worst scroll frame from about 17ms to about 6ms. The browser Wasm build keeps the pure-Rust fancy-regex engine, because Oniguruma is a C library. Token colours can shift a little versus Tree-sitter, because Syntect scopes are not the old capture names.

12. A large mount is 4x faster and the retained tree is 5x smaller. applyBatch used to build a serde_json::Value tree, deep-clone every style payload out of it, and parse the clone a second time, so each style was allocated three times. The batch now deserializes straight from its JSON bytes into typed ops, and styles are shared by content: a 10,000-turn chat sends 59,320 setStyle ops carrying 90 distinct styles, and every element gets the same Arc.

    Measured on a 10,000-turn chat, 221,764 ops:

    	before	after
    parse and apply	127.1 ms	30.1 ms
    heap churn	900.5 MB	104.0 MB
    allocations	1,476,196	186,090
    retained tree	224.5 MB	42.6 MB
    bytes per element	3116 B	592 B

    A 5,000-row chat also stops rebuilding virtual-list focus maps on every GPUI frame, so sidebar motion and caret blink no longer pay that cost per tick, and custom-element props are only re-parsed when a retained value actually changes. getAutomationTree() stops serializing style, events, and custom props, which took a 5k-row tree from about 110ms to about 22ms, so getByTestId().click() is no longer dominated by encoding unused style maps.

13. The install is about 8x smaller. @gpuix/native packed every platform binary into the main tarball through a *.node glob, on top of the six per-platform packages that optionalDependencies already resolves. A hello-world install paid for all of it:

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

    Only the loader, the types, the browser entry, and the Wasm build ship in the main package now. Nothing changes at runtime.

14. Fixed Windows x64 native binding failing to load with ERR_DLOPEN_FAILED. The published .node statically imported TaskDialogIndirect from comctl32 v6 and u_strlen from icuuc.dll. Node and Bun do not activate comctl32 v6, so Windows resolved the old comctl32 and LoadLibrary failed before any JS ran.

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

15. Every CSS cursor keyword GPUI can paint is supported, not just pointer and default. Resize and drag cursors are what tell a user that an edge can be trimmed or a clip can be grabbed; until now col-resize was silently dropped.

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

    Group	Keywords
    Pointing	default, auto, pointer, context-menu, not-allowed, no-drop
    Text	text, vertical-text, crosshair
    Dragging	grab, grabbing, move, all-scroll, alias, copy
    Resizing	col-resize, row-resize, ew-resize, ns-resize, nwse-resize, nesw-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize

    cursor is a typed union, so an editor completes the list. An unlisted keyword is ignored, like any other invalid style value.

16. Colour strings accept the full csscolorparser grammar across styles, themes, pseudo-states, selection colours, SVG tint, borders, and shadows: modern RGB/HSL/HWB, HSV, LAB/LCH, OKLab/OKLCH, named colours, transparent, alpha, none, and limited relative-colour forms. TypeScript types are unchanged.

17. More style properties reach the GPU. Per-side border widths and one structured boxShadow with offset, blur, spread, and colour are new. Per-corner radii, flexBasis, and alignContent were already declared in the public style type but never applied; they work now.

18. New onAuxClick for the non-primary mouse buttons. onClick never fired for a right or middle click, so the isRightClick field it documents could never be true and a context menu had no event to hang on. onClick stays primary-only, like the DOM.

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

    onMouseDown and onMouseUp still see every button through event.button: 0 left, 1 middle, 2 right.

19. Window geometry hooks are pull-based. useWindowSize() seeded state with a hardcoded 800x600 and read the renderer once from an effect, so a first read before the platform window had a size kept 800x600 forever, and a resize was never observed at all. It samples every 100 ms now and only rerenders when the numbers change.

    New getWindowInsets() and useWindowInsets() report system and software-keyboard geometry, so a composer can stay above the iOS keyboard instead of hiding behind it:

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

    Field	Meaning
    ime	Edges covered by the software keyboard
    safeArea	Edges covered by notches, status bars, home indicators
    effective	Per-edge max of the two, the region content should avoid
    keyboardTop	Y coordinate where the keyboard starts
    keyboardVisible	ime.bottom > 0
    visibleHeight	Window height minus the effective top and bottom

    Both hooks take the same option, because Safari fires visualViewport events in bursts while the keyboard animates and iOS reports stale values on some of them:

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

20. One diagonal gesture scrolls both axes, and position: "fixed" lays out. overflow: "scroll" moved only one axis per wheel event, because GPUI zeroes the smaller of the two deltas by default.

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

    A flex column stretches its children to the cross axis, so rows in a two-axis container still need to state a width, or there is nothing to pan on X. position: "fixed" blocked hits like absolute but stayed in normal flow, so a box drifted when its siblings changed; it now lays out like absolute.

21. Text selection starts from the empty space before the glyphs. A press in parent padding, a code gutter, or the empty start of a line clamps to the nearest text on that row, instead of requiring the mouse-down to land inside the tight text box.

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

    A press above or below every line still does not start a selection, so a composer or titlebar cannot claim the nearest paragraph, and userSelect: "none" now also blocks the start.

    Copying across interpolated text is fixed too. <text>Hello {name}!</text> is three painted runs of one line, and selecting across them used to copy them joined with newlines. Runs now carry the parent host element they belong to, so the same selection yields Hello Tommy!, while <code>, <diff> and <markdown> keep one line per line.

22. Fixed key on every GPUIX element. A list built with .map() failed to typecheck, so any real app broke on the first tsc run:

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

    key lives on Props now, next to ref. It cannot live on JSX.IntrinsicAttributes, because TypeScript 5 ignores that member for intrinsic elements. Every element prop type extends Props, so <div>, <text>, <img>, <svg>, <canvas>, <input>, <textarea>, <anchored>, <code>, <diff>, <markdown> and <virtual-list> accept key again, and so do motion.div, Select, Combobox and Tooltip. @gpuix/react/jsx-dev-runtime types also match the runtime file now: they re-exported jsx and jsxs from react/jsx-dev-runtime, which exports only jsxDEV.

23. Abandoned concurrent renders stay out of the native mutation queue. React may throw away a Suspense render. GPUIX waits until commit before it creates native elements, so fallback text paints and abandoned text does not. Unchanged click handlers also stay registered across rerenders, because the whole handler map is no longer cleared before every update.

24. Each React root owns its event handler map. Two createTestRoot() trees can both start at id 1 without overwriting each other's handlers, and a remount on the same native renderer keeps allocating new ids, so a late event from the old tree cannot hit a new handler that reused id 1.

    Migration: resetIdCounter() is gone, and handleGpuixEvent needs the renderer that produced the event:

    handleGpuixEvent(event, renderer)

25. Native <markdown> wraps in flex columns. A markdown node in a flex row kept its max-content width, so a long paragraph or list item blew past the parent. The root and each text block shrink with min-width: 0 now, and a fenced block inside <markdown> matches <code>: long lines scroll on X and leave the vertical wheel on the parent.

    <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>

26. The test renderer runs on Windows through GPUI's DirectX renderer: TestGpuixRenderer, createTestRoot(), native input simulation, and PNG screenshot capture. A live window can call captureScreenshot() there too. Linux stays unavailable until GPUI ships its pending wgpu headless renderer.

    The test app also releases its custom elements before the GPUI app goes away. <input> keeps a GPUI entity handle, and GPUI's leak detector panics if one outlives the app, which killed the whole vitest worker on Windows after every test in the file had already passed. createTestRoot({ width, height }) does not size the window on Windows yet: it opens at the display size. Tracked in #21.

    createTestRoot() can also size the offscreen window, which was always 1280x800. That is wide enough to keep a centered maxWidth column at its cap, so any layout that only changes below a breakpoint was invisible to the suite.

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

27. New getDebugFrameOverlayStats() so tests and apps can read the same draw times the on-screen overlay shows.

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

    p90Ms is the overlay 10% line and p99Ms is the 1% line: the slow tail, not the fast frames.

    On macOS, THROTTLE=utility restarts a run under taskpolicy -c utility, which pins work to E-cores as an M1/M2 Air CPU proxy. background and maintenance are slower. GPU and RAM stay on the host machine, so this is not Chrome 6x, and it should not be set in CI.

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

28. A Quickstart and a todo starter app. The README described the architecture and the mutation protocol before it ever said how to install the packages, and never mentioned jsxImportSource, which is required: without it TypeScript falls back to DOM types and <virtual-list>, <markdown>, <code> and style.hover all fail.

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

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

    example-app/ is a complete todo app in one file, with scripts already wired:

    Script	What it does
    bun run dev	Desktop app with hot remount
    bun run build	Standalone binary in dist/todo
    bun run web:dev	Browser build served with isolation headers
    bun run screenshot	Drives the app through the automation client
    bun run test	Vitest against the GPU test renderer
    bun run typecheck	tsc --noEmit

    It shows <virtual-list>, a native <input>, motion.div, tinted <svg> icons, native hover and active, and testId automation hooks. Copy the folder, change @gpuix/react from workspace:^ to a version range, and run bun install.

29. A video-editor timeline example, to answer whether GPUIX can carry a real editing surface. It drags clips between tracks, trims both edges with snapping, scrubs a playhead, marquee-selects, zooms under the pointer, and pans on both axes with a frozen ruler and a frozen track column.

    cd examples && bun --hot timeline.tsx

    Two patterns in it are worth copying. React owns the scroll offset: a native overflow: "scroll" grid cannot drive a frozen header, because GPUI moves the grid on the wheel frame and the onScroll callback arrives a frame later, so the two tear apart during a fast pan. A drag needs no overlay: each clip and trim handle listens for onMouseDown, onMouseMove and onMouseUp, which arms pointer capture, so a release past the window edge still ends the gesture, while an overlay mounted on the press cannot arm anything.

    A pannable surface also has to cull. On 3,259 clips across 26 tracks, one wheel frame costs 7.7ms culled and 92ms with memo alone.

30. GitHub releases include a standalone chat example executable for each platform. No Node, Bun, or Rust install is required.

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

    macOS may block the unsigned binary the first time: right-click the file, choose Open, and confirm. On Windows, download example-chat-x86_64-pc-windows-msvc.exe and double-click it.

31. @gpuix/native and @gpuix/react are published as Apache-2.0. Both packages declare license: Apache-2.0 and ship the license text in the npm tarball. GPUI itself is Apache-2.0, so this matches the native dependency.

32. Smaller fixes: destroyElement no longer leaves a dangling child id on the parent or skips invalidating the parent chain, so a cache keyed on the subtree revision cannot serve text that left the tree; automation calls after close() are rejected and shutdown is idempotent across the in-process and SSE backends.

---

Closes #1, #2 (Windows native binding failed to load) and #20 (mouse move and up were dropped after a mouse-down rerender).

Known gap: createTestRoot({ width, height }) does not size the window on Windows yet, tracked in #21.