@trendr/core 0.2.11 → 0.4.1

package/src/diff-view.js

@@ -0,0 +1,238 @@
+import { jsx, jsxs } from '../jsx-runtime.js'
+import { createSignal } from './signal.js'
+import { useInput, useMouse, useLayout, useScrollDrag } from './hooks.js'
+import { sliceVisibleRange } from './wrap.js'
+import { computeDiff } from './diff-engine.js'
+
+const PALETTE = {
+  addBg: '#10301a', addGutterBg: '#0a2412', addIntraBg: '#1f6e34', addMarker: '#7ee787',
+  delBg: '#3a1417', delGutterBg: '#2c0e11', delIntraBg: '#86262c', delMarker: '#f47067',
+  lineNo: '#5c6370',
+  hunk: '#7aa2f7',
+  meta: '#5c6370',
+  fold: '#5c6370', foldBg: '#14161c',
+}
+
+const cpLength = (s) => {
+  let n = 0
+  for (const _ of s) n++
+  return n
+}
+
+function digits(rows, field) {
+  let max = 0
+  for (const r of rows) if (r[field] != null && r[field] > max) max = r[field]
+  return Math.max(1, String(max).length)
+}
+
+// splits a highlighted line into normal/hot segments around the changed ranges
+function intraSegments(ansiLine, plainLen, ranges) {
+  const segs = []
+  let pos = 0
+  for (const [start, end] of ranges) {
+    if (start > pos) segs.push({ text: sliceVisibleRange(ansiLine, pos, start), hot: false })
+    segs.push({ text: sliceVisibleRange(ansiLine, start, end), hot: true })
+    pos = end
+  }
+  if (pos < plainLen) segs.push({ text: sliceVisibleRange(ansiLine, pos, plainLen), hot: false })
+  return segs
+}
+
+export function Diff({
+  before,
+  after,
+  patch,
+  hunks,
+  language = 'text',
+  filename,
+  highlight,
+  wordDiff = true,
+  context = Infinity,
+  lineNumbers = true,
+  focused = true,
+  scrollOffset: offsetProp,
+  onScroll,
+  scrollbar = true,
+  colors,
+}) {
+  const palette = colors ? { ...PALETTE, ...colors } : PALETTE
+  const [offsetInternal, setOffsetInternal] = createSignal(0)
+  const layout = useLayout()
+
+  const offset = offsetProp ?? offsetInternal()
+  const setOffset = onScroll ?? setOffsetInternal
+
+  const { rows, stats } = computeDiff({ before, after, patch, hunks, wordDiff, context })
+
+  const wholeMode = hunks == null && patch == null
+  const hiCache = new Map()
+  const hiLines = (text) => {
+    if (hiCache.has(text)) return hiCache.get(text)
+    const lines = (highlight ? highlight(text, language) : text).split('\n')
+    hiCache.set(text, lines)
+    return lines
+  }
+  const beforeHi = wholeMode && highlight ? hiLines(before ?? '') : null
+  const afterHi = wholeMode && highlight ? hiLines(after ?? '') : null
+
+  const lineAnsi = (row) => {
+    if (!highlight) return row.text
+    if (wholeMode) {
+      if (row.type === 'del') return beforeHi[row.oldNo - 1] ?? row.text
+      if (row.newNo != null) return afterHi[row.newNo - 1] ?? row.text
+      return row.text
+    }
+    return hiLines(row.text)[0] ?? row.text
+  }
+
+  const oldW = digits(rows, 'oldNo')
+  const newW = digits(rows, 'newNo')
+
+  const headerH = filename ? 1 : 0
+  const h = Math.max(0, layout.height - headerH)
+  const maxOffset = Math.max(0, rows.length - h)
+  const clamp = (v) => Math.max(0, Math.min(maxOffset, v))
+  const clamped = clamp(offset)
+
+  useInput(({ key, ctrl }) => {
+    if (!focused || rows.length === 0) return
+    const pageH = h || 10
+    const half = Math.max(1, Math.floor(pageH / 2))
+    if (key === 'up' || key === 'k') setOffset(clamp(clamped - 1))
+    else if (key === 'down' || key === 'j') setOffset(clamp(clamped + 1))
+    else if (key === 'pageup' || (ctrl && key === 'b')) setOffset(clamp(clamped - pageH))
+    else if (key === 'pagedown' || (ctrl && key === 'f')) setOffset(clamp(clamped + pageH))
+    else if (ctrl && key === 'u') setOffset(clamp(clamped - half))
+    else if (ctrl && key === 'd') setOffset(clamp(clamped + half))
+    else if (key === 'home' || key === 'g') setOffset(0)
+    else if (key === 'end' || key === 'G') setOffset(maxOffset)
+  })
+
+  useMouse((event) => {
+    if (event.action !== 'scroll' || rows.length <= h) return
+    const { x, y } = event
+    if (x < layout.x || x >= layout.x + layout.width || y < layout.y || y >= layout.y + layout.height) return
+    if (event.direction !== 'up' && event.direction !== 'down') return
+    setOffset(clamp(clamped + (event.direction === 'up' ? -3 : 3)))
+    event.stopPropagation()
+  })
+
+  const hasBar = scrollbar && h > 0 && rows.length > h
+  const barW = hasBar ? 1 : 0
+  const thumbH = hasBar ? Math.max(1, Math.round((h / rows.length) * h)) : 0
+  const thumbStart = hasBar && maxOffset > 0 ? Math.round((clamped / maxOffset) * (h - thumbH)) : 0
+
+  useScrollDrag({
+    barX: hasBar ? layout.x + layout.width - 1 : null,
+    barY: layout.y + headerH + thumbStart,
+    thumbHeight: thumbH,
+    trackHeight: h,
+    maxOffset,
+    scrollOffset: clamped,
+    onScroll: (v) => setOffset(clamp(v)),
+  })
+
+  const renderGutter = (row) => {
+    const gutterBg = row.type === 'add' ? palette.addGutterBg : row.type === 'del' ? palette.delGutterBg : null
+    const markerColor = row.type === 'add' ? palette.addMarker : row.type === 'del' ? palette.delMarker : palette.lineNo
+    const marker = row.type === 'add' ? '+' : row.type === 'del' ? '-' : ' '
+    const children = []
+
+    if (lineNumbers) {
+      const oldStr = row.oldNo != null ? String(row.oldNo) : ''
+      const newStr = row.newNo != null ? String(row.newNo) : ''
+      children.push(jsx('text', {
+        style: { color: palette.lineNo, bg: gutterBg, overflow: 'nowrap' },
+        children: ` ${oldStr.padStart(oldW)} ${newStr.padStart(newW)} `,
+      }))
+    }
+    children.push(jsx('text', {
+      style: { color: markerColor, bg: gutterBg, bold: true, overflow: 'nowrap' },
+      children: `${marker} `,
+    }))
+    return children
+  }
+
+  const renderContent = (row) => {
+    const ansi = lineAnsi(row)
+    if (!row.intra || row.intra.length === 0) {
+      return [jsx('text', { style: { overflow: 'nowrap' }, children: ansi || ' ' })]
+    }
+    const intraBg = row.type === 'add' ? palette.addIntraBg : palette.delIntraBg
+    const plainLen = cpLength(row.text)
+    return intraSegments(ansi, plainLen, row.intra).map((seg, i) =>
+      jsx('text', {
+        key: i,
+        style: { overflow: 'nowrap', bg: seg.hot ? intraBg : null },
+        children: seg.text,
+      })
+    )
+  }
+
+  const renderRow = (row, key) => {
+    if (row.type === 'hunk' || row.type === 'meta' || row.type === 'fold') {
+      const color = row.type === 'hunk' ? palette.hunk : palette.meta
+      const text = row.type === 'fold' ? `··· ${row.text} ···` : row.text
+      return jsx('box', {
+        key,
+        style: { height: 1, paddingX: 1, bg: row.type === 'fold' ? palette.foldBg : null },
+        children: jsx('text', { style: { color, dim: row.type !== 'hunk', overflow: 'nowrap' }, children: text }),
+      })
+    }
+
+    const rowBg = row.type === 'add' ? palette.addBg : row.type === 'del' ? palette.delBg : null
+    return jsxs('box', {
+      key,
+      style: { flexDirection: 'row', height: 1, bg: rowBg },
+      children: [...renderGutter(row), ...renderContent(row)],
+    })
+  }
+
+  const visible = h > 0 ? rows.slice(clamped, clamped + h) : []
+  const bodyRows = visible.map((row, i) => renderRow(row, clamped + i))
+
+  let body
+  if (rows.length === 0) {
+    body = jsx('box', {
+      style: { flexGrow: 1, justifyContent: 'center', alignItems: 'center' },
+      children: jsx('text', { style: { color: palette.meta, dim: true }, children: 'No changes' }),
+    })
+  } else if (hasBar) {
+    const bar = []
+    for (let i = 0; i < h; i++) {
+      const isThumb = i >= thumbStart && i < thumbStart + thumbH
+      bar.push(jsx('text', {
+        key: i,
+        style: { color: isThumb ? palette.lineNo : palette.lineNo, dim: !isThumb },
+        children: isThumb ? '█' : '│',
+      }))
+    }
+    body = jsxs('box', {
+      style: { flexDirection: 'row', flexGrow: 1 },
+      children: [
+        jsx('box', { style: { flexDirection: 'column', flexGrow: 1 }, children: bodyRows }),
+        jsx('box', { style: { flexDirection: 'column', width: barW }, children: bar }),
+      ],
+    })
+  } else {
+    body = jsx('box', { style: { flexDirection: 'column', flexGrow: 1 }, children: bodyRows })
+  }
+
+  if (!filename) return body
+
+  return jsxs('box', {
+    style: { flexDirection: 'column', flexGrow: 1 },
+    children: [
+      jsxs('box', {
+        style: { flexDirection: 'row', paddingX: 1, height: 1 },
+        children: [
+          jsx('text', { style: { bold: true, overflow: 'nowrap' }, children: filename }),
+          jsx('box', { style: { flexGrow: 1 } }),
+          jsx('text', { style: { color: palette.addMarker, overflow: 'nowrap' }, children: `+${stats.additions}` }),
+          jsx('text', { style: { color: palette.delMarker, overflow: 'nowrap' }, children: ` -${stats.deletions}` }),
+        ],
+      }),
+      body,
+    ],
+  })
+}

package/src/diff.js

@@ -102,9 +102,9 @@ function writeReset() {
 }
 
 function writeChar(ch) {
-  ensure(4)
+  ensure(ch.length * 4)
   const code = ch.charCodeAt(0)
-  if (code < 0x80) {
+  if (code < 0x80 && ch.length === 1) {
     buf[pos++] = code
   } else {
     pos += buf.write(ch, pos)

package/src/dropdown.js

@@ -0,0 +1,147 @@
+import { jsx } from '../jsx-runtime.js'
+import { useMouse, useLayout, useTheme } from './hooks.js'
+import { registerOverlay, registerHook } from './renderer.js'
+
+export function followCursor(cursor, scroll, visibleCount, len) {
+  let next = scroll
+  if (cursor < next) next = cursor
+  else if (cursor >= next + visibleCount) next = cursor - visibleCount + 1
+  return Math.max(0, Math.min(next, len - visibleCount))
+}
+
+export function placeDropdown({ anchorTop, itemCount, maxVisible, termH }) {
+  const anchorY = anchorTop + 1
+  const spaceBelow = termH - anchorY - 2
+  const spaceAbove = anchorTop - 2
+  let direction = 'down'
+  let maxRows = Math.min(itemCount, maxVisible)
+  if (spaceBelow >= maxRows) {
+    maxRows = Math.min(maxRows, spaceBelow)
+  } else if (spaceAbove > spaceBelow) {
+    direction = 'up'
+    maxRows = Math.min(maxRows, spaceAbove)
+  } else {
+    maxRows = Math.min(maxRows, spaceBelow)
+  }
+  return { direction, visibleCount: Math.max(1, maxRows) }
+}
+
+export function overlayDropdown({ x, y, termW, termH, dropdown }) {
+  registerOverlay(jsx('box', {
+    style: { width: termW, height: termH },
+    children: jsx('box', {
+      style: { position: 'absolute', top: Math.max(0, y), left: x },
+      children: dropdown,
+    }),
+  }), { fullscreen: true })
+}
+
+export function Dropdown({ items, cursor, scroll, visibleCount, width, onSubmit, onClose, onCursorChange, renderRow, style: s }) {
+  const { muted = 'gray' } = useTheme()
+  const layout = useLayout()
+  const drag = registerHook(() => ({ active: false, startY: 0, startCursor: 0 }))
+  const scrollable = items.length > visibleCount
+
+  useMouse((event) => {
+    if (event.action === 'release') {
+      if (drag.active) drag.active = false
+      return
+    }
+
+    if (event.action === 'drag' && drag.active) {
+      const thumbH = Math.max(1, Math.round((visibleCount / items.length) * visibleCount))
+      const dy = event.y - drag.startY
+      const travel = Math.max(1, visibleCount - thumbH)
+      const ratio = (items.length - 1) / travel
+      const idx = Math.max(0, Math.min(items.length - 1, Math.round(drag.startCursor + dy * ratio)))
+      onCursorChange(idx)
+      event.stopPropagation()
+      return
+    }
+
+    // layout not yet computed - consume event but don't act
+    if (layout.width === 0 || layout.height === 0) {
+      event.stopPropagation()
+      return
+    }
+
+    const { x, y } = event
+    const boxRight = layout.x + width
+    const inside = x >= layout.x && x < boxRight && y >= layout.y && y < layout.y + layout.height
+
+    if (event.action === 'scroll') {
+      if (!inside) return
+      if (event.direction !== 'up' && event.direction !== 'down') return
+      if (event.direction === 'up') onCursorChange(Math.max(0, cursor - 1))
+      else onCursorChange(Math.min(items.length - 1, cursor + 1))
+      event.stopPropagation()
+      return
+    }
+
+    if (event.action !== 'press' || event.button !== 'left') return
+
+    if (!inside) {
+      onClose()
+      event.stopPropagation()
+      return
+    }
+
+    if (scrollable && x >= boxRight - 4) {
+      const maxSc = items.length - visibleCount
+      const thumbH = Math.max(1, Math.round((visibleCount / items.length) * visibleCount))
+      const thumbStart = maxSc > 0 ? Math.round((scroll / maxSc) * (visibleCount - thumbH)) : 0
+      const barY = layout.y + 1 + thumbStart
+      if (y >= barY && y < barY + thumbH) {
+        drag.active = true
+        drag.startY = y
+        drag.startCursor = cursor
+      }
+      event.stopPropagation()
+      return
+    }
+
+    const relY = y - layout.y - 1
+    if (relY >= 0 && relY < visibleCount) {
+      const clickedIdx = relY + scroll
+      if (clickedIdx >= 0 && clickedIdx < items.length) {
+        onSubmit(items[clickedIdx], clickedIdx)
+        event.stopPropagation()
+      }
+    }
+  })
+
+  const visible = items.slice(scroll, scroll + visibleCount)
+  const thumbH = scrollable ? Math.max(1, Math.round((visibleCount / items.length) * visibleCount)) : 0
+  const maxSc = items.length - visibleCount
+  const thumbStart = scrollable && maxSc > 0 ? Math.round((scroll / maxSc) * (visibleCount - thumbH)) : 0
+
+  const children = visible.map((item, vi) => {
+    const i = vi + scroll
+    const content = renderRow(item, { index: i, isCursor: i === cursor })
+    if (!scrollable) return jsx('box', { key: i, style: { flexDirection: 'row' }, children: content })
+    const barIsThumb = vi >= thumbStart && vi < thumbStart + thumbH
+    return jsx('box', {
+      key: i,
+      style: { flexDirection: 'row' },
+      children: [
+        content,
+        jsx('text', {
+          style: { color: barIsThumb ? s.accent : muted, dim: !barIsThumb },
+          children: ' ' + (barIsThumb ? '█' : '│'),
+        }),
+      ],
+    })
+  })
+
+  return jsx('box', {
+    style: {
+      flexDirection: 'column',
+      border: s.border,
+      borderColor: s.borderColor,
+      height: visibleCount + 2,
+      width,
+      bg: s.bg,
+    },
+    children,
+  })
+}

package/src/focus.js

@@ -27,39 +27,89 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
       current,
       setCurrent,
       stack: [],
-      initialized: false,
+      gen: 0,
     }
   })
 
+  // items and groups re-register every frame like hooks. entries that were
+  // not re-registered during the previous frame are swept here, at the start
+  // of the next one, and input handling only ever considers current-gen
+  // entries so unmounted items drop out of the tab order immediately
+  sweep()
+
+  function sweep() {
+    const prevGen = state.gen
+    state.gen = prevGen + 1
+    if (prevGen === 0) return
+
+    const stale = state.items.filter(i => i.gen < prevGen)
+    if (stale.length > 0) {
+      state.items = state.items.filter(i => i.gen >= prevGen)
+      for (const it of stale) {
+        const g = state.groups.get(it.name)
+        if (g) {
+          for (const sub of g.items) state.nameToParent.delete(sub)
+          state.groups.delete(it.name)
+        }
+      }
+    }
+
+    if (state.items.length > 0 && !isRegistered(state.current())) {
+      state.setCurrent(resolveLeaf(state.items[0].name) ?? null)
+    }
+  }
+
+  function isRegistered(name) {
+    if (name == null) return false
+    if (state.nameToParent.has(name)) return true
+    return state.items.some(i => i.name === name)
+  }
+
   function resolveLeaf(name) {
     const g = state.groups.get(name)
     if (g) return g.items[g.subIdx]
     return name
   }
 
+  function liveItems() {
+    return state.items.filter(i => i.gen === state.gen)
+  }
+
   function item(name) {
-    if (!state.items.find(i => i.name === name)) {
-      state.items.push({ name, type: 'item' })
-    }
-    if (!state.initialized && !state.current()) {
-      state.setCurrent(name)
-      state.initialized = true
-    }
+    const existing = state.items.find(i => i.name === name)
+    if (existing) existing.gen = state.gen
+    else state.items.push({ name, type: 'item', gen: state.gen })
+    if (state.current() == null) state.setCurrent(name)
   }
 
-  function group(name, { items: subItems, navigate = 'both', wrap = false } = {}) {
-    if (!state.items.find(i => i.name === name)) {
-      state.items.push({ name, type: 'group' })
+  function group(name, { items: subItems = [], navigate = 'both', wrap = false } = {}) {
+    const existing = state.items.find(i => i.name === name)
+    if (existing) existing.gen = state.gen
+    else state.items.push({ name, type: 'group', gen: state.gen })
+
+    let g = state.groups.get(name)
+    if (!g) {
+      g = { items: [], navigate, wrap, subIdx: 0 }
+      state.groups.set(name, g)
     }
-    if (!state.groups.has(name)) {
-      state.groups.set(name, { items: subItems, navigate, wrap, subIdx: 0 })
-      for (const sub of subItems) {
-        state.nameToParent.set(sub, name)
-      }
+
+    const prevFocused = g.items[g.subIdx]
+    for (const sub of g.items) {
+      if (!subItems.includes(sub)) state.nameToParent.delete(sub)
     }
-    if (!state.initialized && !state.current()) {
+    g.items = subItems.slice()
+    g.navigate = navigate
+    g.wrap = wrap
+    for (const sub of subItems) state.nameToParent.set(sub, name)
+
+    const keep = subItems.indexOf(prevFocused)
+    g.subIdx = keep >= 0 ? keep : Math.min(g.subIdx, Math.max(0, subItems.length - 1))
+
+    const cur = state.current()
+    if (cur == null && subItems.length > 0) {
       state.setCurrent(subItems[0])
-      state.initialized = true
+    } else if (cur === prevFocused && keep === -1 && subItems.length > 0) {
+      state.setCurrent(subItems[g.subIdx])
     }
   }
 
@@ -95,14 +145,15 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
     return state.current()
   }
 
-  function findTopLevel(cur) {
+  function findTopLevel(cur, items) {
     const parent = state.nameToParent.get(cur)
-    if (parent) return state.items.findIndex(i => i.name === parent)
-    return state.items.findIndex(i => i.name === cur)
+    if (parent) return items.findIndex(i => i.name === parent)
+    return items.findIndex(i => i.name === cur)
   }
 
   useInput((event) => {
-    if (state.items.length === 0) return
+    const items = liveItems()
+    if (items.length === 0) return
 
     const { key } = event
     const cur = state.current()
@@ -110,12 +161,20 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
     if (state.stack.length > 0) return
 
     if (cycle === 'tab' && (key === 'tab' || key === 'shift-tab')) {
-      const idx = findTopLevel(cur)
-      if (idx === -1) return
       const dir = key === 'tab' ? 1 : -1
-      const next = (idx + dir + state.items.length) % state.items.length
-      const nextItem = state.items[next]
-      state.setCurrent(resolveLeaf(nextItem.name))
+      const len = items.length
+      const idx = findTopLevel(cur, items)
+      const start = idx === -1 ? (dir === 1 ? -1 : 0) : idx
+      for (let step = 1; step <= len; step++) {
+        const next = ((start + dir * step) % len + len) % len
+        const leaf = resolveLeaf(items[next].name)
+        if (leaf === undefined) continue
+        if (leaf !== cur) {
+          state.setCurrent(leaf)
+          event.stopPropagation()
+        }
+        return
+      }
       return
     }
 
@@ -136,13 +195,16 @@ export function useFocus({ initial, cycle = 'tab' } = {}) {
 
     if (g.wrap) {
       const next = (idx + dir + len) % len
+      if (next === idx) return
       g.subIdx = next
       state.setCurrent(g.items[next])
+      event.stopPropagation()
     } else {
       const next = idx + dir
       if (next < 0 || next >= len) return
       g.subIdx = next
       state.setCurrent(g.items[next])
+      event.stopPropagation()
     }
   })
 

package/src/hooks.js

@@ -1,17 +1,13 @@
-import { onCleanup, createSignal as rawCreateSignal, createSignalRaw } from './signal.js'
-import { getContext, getTheme, getCursor, registerHook, getInstanceLayout, getFrameStats } from './renderer.js'
+import { onCleanup, createSignalRaw } from './signal.js'
+import { getContext, getTheme, getCursor, registerHook, getInstanceLayout, getFrameStats, getCurrentHookOwner } from './renderer.js'
 import { setTitle } from './ansi.js'
 
-export function useState(initial) {
-  return registerHook(() => rawCreateSignal(initial))
-}
-
 export function useInput(handler) {
   const ref = registerHook(() => {
     const ctx = getContext()
     if (!ctx) throw new Error('useInput must be called within a mounted component')
     const state = { current: handler }
-    const unsub = ctx.input.onKey((event) => state.current(event))
+    const unsub = ctx.input.onKey((event) => state.current(event), getCurrentHookOwner())
     onCleanup(unsub)
     return state
   })
@@ -23,7 +19,7 @@ export function useMouse(handler) {
     const ctx = getContext()
     if (!ctx) throw new Error('useMouse must be called within a mounted component')
     const state = { current: handler }
-    const unsub = ctx.input.onMouse((event) => state.current(event))
+    const unsub = ctx.input.onMouse((event) => state.current(event), getCurrentHookOwner())
     onCleanup(unsub)
     return state
   })
@@ -45,13 +41,19 @@ export function useResize(handler) {
 }
 
 export function useInterval(fn, ms) {
-  const ref = registerHook(() => {
-    const state = { current: fn }
-    const id = setInterval(() => state.current(), ms)
-    onCleanup(() => clearInterval(id))
-    return state
+  const state = registerHook(() => {
+    const s = { current: fn, ms: undefined, id: null }
+    onCleanup(() => {
+      if (s.id !== null) clearInterval(s.id)
+    })
+    return s
   })
-  ref.current = fn
+  state.current = fn
+  if (state.ms !== ms) {
+    if (state.id !== null) clearInterval(state.id)
+    state.ms = ms
+    state.id = ms == null ? null : setInterval(() => state.current(), ms)
+  }
 }
 
 export function useLayout() {
@@ -81,17 +83,30 @@ export function useFrameStats() {
 export function useTitle(title) {
   const ctx = getContext()
   if (!ctx) throw new Error('useTitle must be called within a mounted component')
-  ctx.stream.write(setTitle(title))
+  const state = registerHook(() => ({ last: undefined }))
+  if (state.last !== title) {
+    state.last = title
+    ctx.stream.write(setTitle(title))
+  }
 }
 
 export function useTimeout(fn, ms) {
-  const ref = registerHook(() => {
-    const state = { current: fn }
-    const id = setTimeout(() => state.current(), ms)
-    onCleanup(() => clearTimeout(id))
-    return state
+  const state = registerHook(() => {
+    const s = { current: fn, ms: undefined, id: null }
+    onCleanup(() => {
+      if (s.id !== null) clearTimeout(s.id)
+    })
+    return s
   })
-  ref.current = fn
+  state.current = fn
+  if (state.ms !== ms) {
+    if (state.id !== null) clearTimeout(state.id)
+    state.ms = ms
+    state.id = ms == null ? null : setTimeout(() => {
+      state.id = null
+      state.current()
+    }, ms)
+  }
 }
 
 export function useScrollDrag({ barX, barY, thumbHeight, trackHeight, maxOffset, scrollOffset, onScroll }) {
@@ -183,21 +198,24 @@ export function useAsync(fn, { immediate = false } = {}) {
     const [error, setError] = createSignalRaw(null)
     let generation = 0
 
-    function run(...args) {
+    const s = { status, data, error, fn }
+
+    s.run = (...args) => {
       const gen = ++generation
       setStatus('loading')
       setData(null)
       setError(null)
-      fn(...args).then(
+      s.fn(...args).then(
         result => { if (gen === generation) { setData(result); setStatus('success') } },
         err => { if (gen === generation) { setError(err); setStatus('error') } },
       )
     }
 
-    if (immediate) run()
+    if (immediate) s.run()
 
-    return { status, data, error, run }
+    return s
   })
 
+  state.fn = fn
   return state
 }