intable 0.0.5 → 0.0.7

package/packages/intable/src/hooks/index.ts

@@ -0,0 +1,200 @@
+import { $PROXY, batch, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, mergeProps, on, onCleanup, untrack, type Signal } from 'solid-js'
+import { $RAW, createMutable } from 'solid-js/store'
+import { createEventListener, createEventListenerMap } from '@solid-primitives/event-listener'
+import { createPointerListeners } from '@solid-primitives/pointer'
+import { access, type Many, type MaybeAccessor, } from '@solid-primitives/utils'
+import { makePersisted, storageSync } from '@solid-primitives/storage'
+import { createMutationObserver } from '@solid-primitives/mutation-observer'
+import { isFunction, isPromise, mapValues } from 'es-toolkit'
+import { castArray } from 'es-toolkit/compat'
+import { createKeybindingsHandler } from 'tinykeys'
+import { unFn } from '../utils'
+
+interface UseMoveOptions {
+  preventDefault?: boolean
+  start?(
+    e: PointerEvent,
+    move: (cb: MoveCB) => void,
+    end: (cb: EndCb) => void
+  ): void,
+}
+
+type MoveCB = (e: PointerEvent, o: { sx: number, sy: number, ox: number, oy: number }) => void
+type EndCb = (e: PointerEvent) => void
+
+export function usePointerDrag(el: MaybeAccessor<HTMLElement | undefined>, options: UseMoveOptions) {
+  options = mergeProps({ preventDefault: true } as UseMoveOptions, options)
+  
+  createPointerListeners({
+    target: el,
+    passive: false,
+    onDown(e) {
+      options.preventDefault && e.preventDefault()
+      const [sx, sy] = [e.x, e.y]
+
+      let move: MoveCB | void
+      let end: EndCb | void
+      options.start?.(e, (cb) => move = cb, (cb) => end = cb)
+      
+      createRoot(dispose => {
+        createPointerListeners({
+          target: document,
+          onMove(e) {
+            const [ox, oy] = [e.x - sx, e.y - sy]
+            move?.(e, { sx, sy, ox, oy })
+          },
+          onUp() {
+            end?.(e)
+            dispose()
+            move = void 0
+            end = void 0
+          }
+        })
+        // fix: does't cb onUp when drop
+        createEventListenerMap(document, {
+          drop: dispose
+        })
+      })
+    }
+  })
+}
+
+export function model(el: any, value: () => [() => string, (v: string) => any]) {
+  const [field, setField] = value()
+  createRenderEffect(() => (el.value = field()))
+  el.addEventListener("input", (e) => setField((e.target as HTMLInputElement).value))
+}
+
+export function toSignle<T extends Record<string, any>>(state: T, k: keyof T) {
+  return [() => state[k], v => state[k] = v]
+}
+
+export function useDark() {
+  const get = v => v == 'dark' || (prefersDark() && !v), set = v => v ? 'dark' : 'light'
+  const prefersDark = () => window.matchMedia("(prefers-color-scheme: dark)").matches
+  const dark = makePersisted(createSignal(prefersDark()), { name: 'color-schema', storage: localStorage, sync: storageSync, serialize: set, deserialize: get })
+  createEffect(() => document.documentElement.classList[dark[0]() ? 'add' : 'remove']('dark'))
+  createEffect(() =>  window.dispatchEvent(new StorageEvent('storage', { key: 'color-schema', newValue: set(dark[0]()) })))
+  return dark
+}
+
+export function useMemoAsync<T>(fn: (prev?: T) => Promise<T> | T, init?: Awaited<T>) {
+  const REJECT = Symbol()
+  const [val, setVal] = createSignal(init)
+  createComputed(async () => {
+    const ret = fn(untrack(val))
+    const v = ret instanceof Promise ? await new Promise((resolve) => {
+      ret.then(resolve)
+      onCleanup(() => resolve(REJECT))
+    }) : ret
+    v == REJECT || setVal(() => v)
+  })
+  return val
+}
+
+export function useSignle2<T>(v: T | (() => T), opt?: { before?: (v: T) => Promise<T | void> | T }) {
+  const state = createSignal(isFunction(v) ? void 0 : v)
+  const before = v => {
+    const v2 = opt?.before?.(v)
+    return isPromise(v2) ? v2.then(v3 => v3 === void 0 ? v : v3) : v2 ?? v
+  }
+  
+  const val = useMemoAsync(() => before(state[0]() as T))
+
+  if (isFunction(v)) {
+    const fned = useMemoAsync(() => before(v()))
+    createComputed(() => state[1](fned()))
+  }
+
+  return [val, state[1]] as Signal<T>
+}
+
+const $MEMO = Symbol()
+
+type Reactive<T extends object> = { [K in keyof T]: T[K] extends () => infer V ? V : T[K] }
+export function toReactive<T extends object>(fn: (() => T) | T): Reactive<T> {
+  const v = () => unFn(fn)
+  const trueFn = () => true
+  const get = k => (e => typeof e == 'function' && $MEMO in e ? e() : e)(v()[k])
+  return new Proxy(Object.create(null), {
+    get: (o, k, r) => k == $PROXY ? r : k == $RAW ? r : (v => typeof v == 'function' && $MEMO in v ? v() : v)(v()[k]),
+    set: trueFn,
+    defineProperty: (o, k, attributes) => Object.defineProperty(v(), k, attributes),
+    deleteProperty: trueFn,
+    getPrototypeOf: () => Object.getPrototypeOf(v()),
+    has: (o, p) => p == $PROXY || p in v(),
+    ownKeys: (o) => Object.keys(v()),
+    getOwnPropertyDescriptor: (o, k) => ({ enumerable: true, configurable: true, get() { return get(k) }, set: trueFn }),
+  })
+}
+
+export function useMemo<T>(fn: () => T) {
+  const ret = createMemo(fn)
+  ret[$MEMO] = 1
+  return ret
+}
+
+export function useHover(el: MaybeAccessor<Many<HTMLElement | undefined>>) {
+  const [hover, setHover] = createSignal(false)
+  createEventListener(el, 'pointerenter', () => setHover(true))
+  createEventListener(el, 'pointerleave', () => setHover(false))
+  return hover
+}
+
+export function useMouseDown(el: MaybeAccessor<Many<HTMLElement | undefined>>) {
+  const [down, setDown] = createSignal(false)
+  createEventListener(el, 'pointerdown', () => setDown(true))
+  createEventListener(document.body, 'pointerup', () => setDown(false))
+  return down
+}
+
+export function useClicked(el: MaybeAccessor<Many<HTMLElement | undefined>>) {
+  const [clicked, setClicked] = createSignal(false)
+  const els = () => castArray(access(el))
+  createEventListener(() => els().map(e => e?.getRootNode()), 'click', e => setClicked(els().some(el => el?.contains(e.target))))
+  return clicked
+}
+
+export function useMutation<T>(initial: MaybeAccessor<Node | Node[]>, options: MutationObserverInit, cb: () => T) {
+  const ret = createSignal<T>(cb())
+  createMutationObserver(initial, options, ms => ret[1](cb() as any))
+  return ret[0]
+}
+
+export function useTinykeys(el: MaybeAccessor<HTMLElement | undefined>, handlers) {
+  createEventListener(el, 'keydown', createKeybindingsHandler({
+    ...mapValues(handlers, cb => e => {
+      e.preventDefault()
+      cb(e)
+    })
+  }))
+}
+
+export function useHistory([val, setVal]) {
+  let bool = 1
+  const state = createMutable({ index: -1, history: [] as any[] })
+  const clear = () => (state.index = 0, state.history = [val()])
+  const canUndo = () => state.index > 0
+  const canRedo = () => state.index < state.history.length - 1
+  const undo = () => canUndo() && ((bool = 0) || setVal(state.history[--state.index]))
+  const redo = () => canRedo() && ((bool = 0) || setVal(state.history[++state.index]))
+  createRenderEffect(on(val, ret => {
+    if (ret == null) return // todo
+    if (!bool) return bool = 1
+    if (canRedo()) state.history = state.history.slice(0, state.index + 1)
+    state.history[++state.index] = ret
+  }))
+  return { undo, redo, clear, get index() { return state.index }, get history() { return state.history } }
+}
+
+export function useMemoState(fn) {
+  const state = createMutable({})
+  createComputed(() => {
+    const val = fn()
+    untrack(() => batch(() => {
+      for (const k in state) k in val || (delete state[k])
+      Object.assign(state, val)
+    }))
+  })
+  return state
+}

package/packages/intable/src/hooks/useDir.ts

@@ -0,0 +1,78 @@
+import { createEffect, mergeProps } from 'solid-js'
+import { createEventListener } from '@solid-primitives/event-listener'
+import { createPointerList } from '@solid-primitives/pointer'
+import { access, type MaybeAccessor } from '@solid-primitives/utils'
+import { createMutationObserver } from '@solid-primitives/mutation-observer'
+
+interface UseDirOptions {
+  ref: MaybeAccessor<HTMLElement | undefined>,
+  list?: MaybeAccessor<HTMLElement | undefined>,
+  loop?: boolean
+  options?: EventListenerOptions
+  defaultFirst?: boolean
+}
+
+export function useDir(options: UseDirOptions) {
+  options = mergeProps({ loop: true }, options)
+  const list = () => access(options.list) ?? access(options.ref)
+  const ref = () => access(options.ref) ?? access(options.list)
+
+  createEffect(() => {
+    if (ref().tabIndex > -1) return
+    ref().tabIndex = 0
+  })
+
+  createEventListener(ref, 'keydown', e => {
+    if (!['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key)) return
+
+    e.stopPropagation()
+    e.preventDefault()
+
+    let hover = list()?.querySelector('.hover')
+    
+    if (e.key == 'Enter') {
+      hover?.click()
+      return
+    }
+
+    let index = (
+      e.key == 'ArrowDown' ? hover ? +hover?.getAttribute('data-index')! + 1 : 0 :
+      e.key == 'ArrowUp' ? hover ? +hover?.getAttribute('data-index')! - 1 : -1 :
+      0
+    )
+
+    const el = list()?.querySelector(`[data-index='${index}']`)
+    if (!el) {
+      if (options.loop) {
+        hover?.classList.remove('hover')
+        index >= 0
+          ? list()?.querySelector(`[data-index='0']`)?.classList.add('hover')
+          : [...list()?.querySelectorAll(`[data-index]`)].at(-1)?.classList.add('hover')
+      }
+    } else {
+      // list()?.querySelector(`[data-index=0]`)!
+      hover?.classList.remove('hover')
+      el.classList.add('hover')
+    }
+  }, options.options)
+
+  createEffect(() => {
+    if (!options.defaultFirst) return
+    const el = list()
+    if (!el) return
+    const hover = () => {
+      if (el.querySelector('.hover')) return
+      el.querySelector(`[data-index]`)?.classList.add('hover')
+    }
+    createMutationObserver(el, { childList: true }, hover)
+    hover()
+  })
+
+  createEventListener(list, 'mouseover', () => {
+    list()?.querySelector('.hover')?.classList.remove('hover')
+  })
+}
+
+export function VDir(el: HTMLElement, options) {
+  useDir({ ...options(), list: el })
+}

package/packages/intable/src/hooks/useSelector.ts

@@ -0,0 +1,91 @@
+import { createSignal, createMemo, createSelector } from 'solid-js'
+import { log, toArr } from '../utils'
+
+interface UseSelectorOpt<T> {
+  value?: T
+  onChange?: (v: T) => void
+  multiple?: boolean
+  selectable?: (v) => boolean
+}
+
+class SingleSet implements Set<any> {
+  #value: any
+  constructor(value) { this.#value = Array.from(value || [])[0] }
+  add(value) { this.#value = value; return this }
+  clear() { this.#value = undefined }
+  delete(value) { if (this.#value === value) { this.#value = undefined; return true } return false }
+  forEach(callbackfn) { if (this.#value !== undefined) callbackfn.call(this, this.#value, this.#value, this) }
+  has(value) { return this.#value === value }
+  get size() { return this.#value !== undefined ? 1 : 0 }
+  entries() { return this.values() }
+  keys() { return this.values() }
+  values() { return this.#value !== undefined ? [[this.#value, this.#value]].entries() : [].entries() }
+  [Symbol.iterator]() { return this.values()[Symbol.iterator]() }
+  [Symbol.toStringTag] = 'SingleSet'
+}
+
+export function useSelector<T = any>(opt: UseSelectorOpt<T>) {
+  const { value: initialValue, onChange, multiple = false, selectable } = opt
+
+  const Set2 = (multiple ? Set : SingleSet) as SetConstructor
+  
+  const [selected, setSelected] = createSignal(new Set2(toArr(initialValue)))
+
+  // 检查是否包含某个值
+  const has = createSelector<Set<any>, any>(selected, (a, b) => b.has(a as T))
+
+  // 检查值是否可选择
+  const isSelectable = (v: T): boolean => {
+    return selectable ? selectable(v) : true
+  }
+
+  // 清空选择
+  const clear = () => {
+    setSelected(new Set2())
+    onChange?.(value())
+  }
+
+  // 设置选择
+  const set = (v: T) => {
+    if (!isSelectable(v)) return
+    setSelected(new Set2(toArr(v)))
+    onChange?.(value())
+  }
+
+  // 添加选择
+  const add = (v: T) => {
+    if (!isSelectable(v)) return
+    const newSet = new Set2(selected())
+    newSet.add(v)
+    setSelected(newSet)
+    onChange?.(value())
+  }
+
+  // 删除选择
+  const del = (v: T) => {
+    const newSet = new Set2(selected())
+    newSet.delete(v)
+    setSelected(newSet)
+    onChange?.(value())
+  }
+
+  // 切换选择状态
+  const toggle = (v: T) => {
+    has(v) ? del(v) : add(v)
+  }
+
+  // 使用 createMemo 优化 selected 的计算
+  const value = createMemo(() => {
+    return (multiple ? Array.from(selected()) : Array.from(selected())[0]) as T
+  })
+
+  return {
+    clear,
+    set,
+    has,
+    add,
+    del,
+    toggle,
+    get value() { return value() }
+  }
+}

package/packages/intable/src/hooks/useSort.tsx

@@ -0,0 +1,118 @@
+import { createMutable, reconcile } from 'solid-js/store'
+import { mergeProps, Portal } from 'solid-js/web'
+
+import { createEventListener, createEventListenerMap } from '@solid-primitives/event-listener'
+import { access, type MaybeAccessor } from '@solid-primitives/utils'
+import { findAsync, log } from '../utils'
+
+type Awaitable<T> = T | Promise<T>;
+
+interface UseSortOption {
+  enable?: boolean
+  guideLine: any
+  draggable: (el: HTMLElement) => Awaitable<boolean>
+  dragover: (el: HTMLElement) => boolean
+  children: (el: HTMLElement) => HTMLElement[]
+  dragend: () => void
+}
+
+export const useSort = (el: MaybeAccessor<HTMLElement | undefined>, opt: UseSortOption) => {
+  opt = mergeProps({ enable: true } as UseSortOption, opt)
+  let count = 0
+
+  createEventListenerMap(() => opt.enable ? access(el) : void 0, {
+    async pointerdown(e) {
+      const _c = count
+      const drag = await findAsync(e.composedPath(), e => e instanceof HTMLElement && opt.draggable(e))
+      if (_c != count) return
+      if (!drag) return
+      e.stopPropagation()
+      state.drag = drag
+      state.drag?.setAttribute('draggable', 'true')
+    },
+    pointerup() {
+      count++
+      dragend()
+    },
+    pointermove() {
+      count++
+    },
+    dragstart(e) {
+      e.dataTransfer!.setDragImage(document.createElement('img'), 0, 0)
+    },
+    dragover(e) {
+      if (!state.drag) return
+      const aa = e.composedPath().filter(e => e instanceof HTMLElement)
+      const over = state.over = aa.find(e => opt.dragover(e)) ?? state.over
+      if (!over) return
+      e.preventDefault()
+      e.stopPropagation()
+      // 
+      const children = opt.children(over) as HTMLElement[]
+      if (children) {
+        let i = 0, d = Infinity, s = ''
+        children.forEach((el, ii) => {
+          const display = getComputedStyle(el).display
+          const __ = ['table-cell', 'inline'].some(e => display.includes(e))
+          const rect = el.getBoundingClientRect()
+          if (__) {
+            let dd = Math.sqrt((e.clientX - rect.x) ** 2 + (e.clientY - rect.y + rect.height / 2) ** 2)
+            if (dd < d) (i = ii, d = dd, s = 'l')
+            dd = Math.sqrt((e.clientX - rect.right) ** 2 + (e.clientY - rect.y + rect.height / 2) ** 2)
+            if (dd < d) (i = ii, d = dd, s = 'r')
+          } else {
+            let dd = Math.sqrt((e.clientY - rect.y) ** 2 + (e.clientX - rect.x + rect.width / 2) ** 2)
+            if (dd < d) (i = ii, d = dd, s = 't')
+            dd = Math.sqrt((e.clientY - rect.bottom) ** 2 + (e.clientX - rect.x + rect.width / 2) ** 2)
+            if (dd < d) (i = ii, d = dd, s = 'b')
+          }
+        })
+  
+        const rect1 = children[i].getBoundingClientRect()
+        const x = s == 'l' || s == 'r', y = s == 't' || s == 'b'
+        const size = 3
+        state.style = {
+          width: `${y ? rect1.width : size}px`,
+          height: `${y ? size : rect1.height}px`,
+          translate: `${y ? rect1.x : (s == 'l' ? rect1.x : rect1.right) - size / 2}px ${x ? rect1.y : (s == 't' ? rect1.y : rect1.bottom) - size / 2}px`
+        }
+        state.rel = children[i]
+        state.type = s == 'l' || s == 't' ? 'before' : 'after'
+      } else {
+        const rect1 = over.getBoundingClientRect()
+        state.style = {
+          width: rect1.width,
+          height: rect1.height,
+          translate: `${rect1.x}px ${rect1.y}px`
+        }
+        state.rel = over
+        state.type = 'inner'
+      }
+    },
+    dragend() {
+      dragend()
+    },
+  })
+
+  function dragend() {
+    state.drag?.removeAttribute('draggable')
+    if (state.drag && state.rel) opt.dragend?.()
+    reconcile({})(state)
+  }
+
+  const state = createMutable({
+    style: void 0 as any,
+    drag: void 0 as any,
+    over: void 0 as any,
+    rel: void 0 as any,
+    type: ''
+  })
+
+  ;(<>{state.style && 
+    <Portal mount={access(el)}>
+      <div {...opt.guideLine} style={state.style} />
+    </Portal>
+  }</>)
+
+  return state
+}

package/packages/intable/src/hooks/useVirtualizer.ts

@@ -0,0 +1,180 @@
+import { createElementSize } from '@solid-primitives/resize-observer'
+import { createScrollPosition } from '@solid-primitives/scroll'
+import { keyBy, uniqBy } from 'es-toolkit'
+import { createComputed, createMemo, createSignal, mergeProps, untrack } from 'solid-js'
+
+/**
+ * Fenwick Tree (Binary Indexed Tree)
+ * O(log n) point-update and prefix-sum query.
+ * Used to compute virtual item positions without rebuilding the full items array.
+ */
+class FenwickTree {
+  n: number
+  tree: Float64Array
+  constructor(n: number) {
+    this.n = n
+    this.tree = new Float64Array(n + 1)
+  }
+  /** O(log n) add delta to index i (0-based) */
+  add(i: number, delta: number) {
+    for (i += 1; i <= this.n; i += i & -i) this.tree[i] += delta
+  }
+  /** O(log n) prefix sum [0..i] inclusive (0-based) */
+  sum(i: number): number {
+    let s = 0
+    for (i += 1; i > 0; i -= i & -i) s += this.tree[i]
+    return s
+  }
+  /** Total sum of all elements */
+  total(): number {
+    return this.n > 0 ? this.sum(this.n - 1) : 0
+  }
+  /**
+   * O(log n) find the 0-based index of the element "containing" offset.
+   * Returns smallest i where prefix_sum(0..i) > target.
+   */
+  findByOffset(target: number): number {
+    let i = 0
+    for (let pw = 1 << Math.floor(Math.log2(this.n || 1)); pw > 0; pw >>= 1) {
+      if (i + pw <= this.n && this.tree[i + pw] <= target) {
+        i += pw
+        target -= this.tree[i]
+      }
+    }
+    return Math.min(i, this.n - 1)
+  }
+  /** O(n) build from a sizes array (more efficient than n individual adds) */
+  static build(values: number[]): FenwickTree {
+    const n = values.length
+    const ft = new FenwickTree(n)
+    for (let i = 0; i < n; i++) {
+      ft.tree[i + 1] += values[i]
+      const j = i + 1 + ((i + 1) & -(i + 1))
+      if (j <= n) ft.tree[j] += ft.tree[i + 1]
+    }
+    return ft
+  }
+}
+
+interface VirtualizerOptions {
+  enable?: boolean
+  overscan?: number
+  batch?: number
+  getScrollElement: () => Element
+  horizontal?: boolean
+  count: number
+  estimateSize: (i: number) => number
+  extras?: (startIdx: number, endIdx: number) => number[]
+  indexAttribute?: string
+  rangeExtractor?: (range: any) => number[]
+}
+
+export function useVirtualizer(opt: VirtualizerOptions) {
+  opt = mergeProps({ overscan: 0, batch: 0, enable: true }, opt)
+  const scrollSize = createElementSize(opt.getScrollElement)
+  const pos = createScrollPosition(opt.getScrollElement)
+  const scrollPos = createMemo(() => opt.horizontal ? pos.x : pos.y)
+  const viewSize = createMemo(() => opt.horizontal ? scrollSize.width : scrollSize.height)
+
+  // Plain (non-reactive) sizes array + Fenwick tree.
+  // Avoids O(n) full-rebuild on every resizeItem call.
+  const sizes: number[] = []
+  let tree = new FenwickTree(0)
+
+  // Version signal: bumped by resizeItem; triggers start/end/items recompute.
+  const [v, bumpV] = createSignal(undefined, { equals: false })
+
+  // Grow when count increases; shrink when it decreases.
+  createComputed(() => {
+    const { count } = opt
+    untrack(() => {
+      if (count === sizes.length) return
+      if (count > sizes.length) {
+        for (let i = sizes.length; i < count; i++) sizes.push(opt.estimateSize(i))
+      } else {
+        sizes.length = count
+      }
+      // O(n) rebuild of Fenwick tree preserving measured sizes
+      tree = FenwickTree.build(sizes.slice(0, count))
+      bumpV()
+    })
+  })
+
+  type Item = { start: number; end: number; index: number }
+  /** Compute item geometry directly from Fenwick tree — no array needed. */
+  const getItem = (i: number): Item => ({
+    index: i,
+    start: i > 0 ? tree.sum(i - 1) : 0,
+    end: tree.sum(i),
+  })
+
+  const startIdx = createMemo((prev: number) => {
+    v()
+    const { batch: batchSize, overscan = 0 } = opt
+    let i = tree.findByOffset(scrollPos()) - overscan
+    if (batchSize) {
+      if (i > prev) i = i <= prev + batchSize ? prev : (i > prev + batchSize * 2 ? i : prev + batchSize)
+        else i -= batchSize
+    }
+    return Math.max(i, 0)
+  }, 0)
+
+  const endIdx = createMemo((prev: number) => {
+    v()
+    const { batch: batchSize, overscan = 0 } = opt
+    let i = tree.findByOffset(scrollPos() + viewSize()) + overscan
+    if (batchSize) {
+      if (i < prev) i = i >= prev - batchSize ? prev : (i < prev - batchSize * 2 ? i : prev - batchSize)
+      else i += batchSize
+    }
+    return Math.min(i, opt.count - 1)
+  }, 0)
+
+  const items2 = createMemo(() => {
+    v()
+    if (!opt.enable) {
+      return Array.from({ length: opt.count }, (_, i) => getItem(i))
+    }
+    let arr: Item[] = []
+    for (let i = startIdx(); i <= endIdx(); i++) arr.push(getItem(i))
+    if (opt.extras) {
+      arr.push(...(opt.extras(startIdx(), endIdx())?.map(i => getItem(i)) || []))
+      arr = uniqBy(arr, e => e.index).sort((a, b) => a.index - b.index)
+    }
+    return arr
+  })
+
+  return {
+    options: opt,
+    startIdx,
+    endIdx,
+    getTotalSize: () => (v(), tree.total()),
+    resizeItem: (i: number, newSize: number) => {
+      const old = sizes[i] ?? 0
+      if (old === newSize) return
+      // Scroll-position correction to prevent jitter when items above viewport resize
+      if (i < startIdx()) {
+        const el = opt.getScrollElement()
+        const scroll = opt.horizontal ? el.scrollLeft : el.scrollTop
+        if (scroll !== 0) {
+          opt.horizontal
+            ? (el.scrollLeft += newSize - old)
+            : (el.scrollTop += newSize - old)
+        }
+      }
+      tree.add(i, newSize - old)
+      sizes[i] = newSize
+      bumpV()
+    },
+    getVirtualItems: items2,
+    getVirtualItem: (() => {
+      const keyed = createMemo(() => {
+        v()
+        const map: Record<number, Item> = {}
+        for (const item of items2()) map[item.index] = item
+        return map
+      })
+      return (i: number) => keyed()[i]
+    })()
+  }
+}