@a4ui/core 0.11.1 → 0.13.0

package/src/ui/Tooltip.tsx

@@ -0,0 +1,42 @@
+// Hover/focus tooltip on Kobalte's Tooltip primitive. `children` is the trigger.
+import { Tooltip as KTooltip } from '@kobalte/core/tooltip'
+import type { JSX, ParentProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface TooltipProps extends ParentProps {
+  /** Content shown inside the tooltip popover. */
+  content: JSX.Element
+  /** Applied to the tooltip popover (`KTooltip.Content`), not the trigger. */
+  class?: string
+}
+
+/**
+ * Hover/focus tooltip, built on Kobalte's Tooltip primitive. `children` is
+ * the trigger element; `content` is rendered in a portal on hover/focus.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Delete this item">
+ *   <IconButton icon={<TrashIcon />} aria-label="Delete" />
+ * </Tooltip>
+ * ```
+ */
+export function Tooltip(props: TooltipProps): JSX.Element {
+  return (
+    <KTooltip>
+      <KTooltip.Trigger class="inline-flex">{props.children}</KTooltip.Trigger>
+      <KTooltip.Portal>
+        <KTooltip.Content
+          class={cn(
+            'z-50 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs text-card-foreground shadow-md',
+            props.class,
+          )}
+        >
+          <KTooltip.Arrow />
+          {props.content}
+        </KTooltip.Content>
+      </KTooltip.Portal>
+    </KTooltip>
+  )
+}

package/src/ui/Tour.tsx

@@ -0,0 +1,197 @@
+// Guided product tour / coachmarks. Spotlights one target element at a time by
+// drawing a highlight box over its bounding rect and dimming everything else
+// with the classic huge-spreading box-shadow trick (a single element casts a
+// 9999px shadow over the whole viewport, leaving only the target lit). A tooltip
+// Card floats near the target with Back/Next controls. Rendered through a
+// `Portal` into the body so it escapes any overflow/stacking context. All DOM
+// reads are guarded — a missing target just centers the tooltip and skips the
+// highlight.
+import type { JSX } from 'solid-js'
+import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
+import { Portal } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+import { Button } from './Button'
+
+/** A single stop in a {@link Tour}. */
+export interface TourStep {
+  /** CSS selector for the element to highlight. */
+  target: string
+  title: string
+  description?: string
+}
+
+export interface TourProps {
+  steps: TourStep[]
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Called after the last step's "Done" (in addition to `onOpenChange(false)`). */
+  onFinish?: () => void
+}
+
+interface Rect {
+  top: number
+  left: number
+  width: number
+  height: number
+}
+
+/**
+ * Guided coachmark tour: walks the user through a sequence of on-page targets,
+ * spotlighting each one and explaining it in a floating tooltip. Theme-agnostic —
+ * the dimmer uses `--background` so it adapts to light/dark automatically.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false)
+ * <Tour
+ *   open={open()}
+ *   onOpenChange={setOpen}
+ *   onFinish={() => markTourSeen()}
+ *   steps={[
+ *     { target: '#new-btn', title: 'Create', description: 'Start a new record here.' },
+ *     { target: '#search', title: 'Search', description: 'Find anything fast.' },
+ *   ]}
+ * />
+ * ```
+ */
+export function Tour(props: TourProps): JSX.Element {
+  const [index, setIndex] = createSignal(0)
+  const [rect, setRect] = createSignal<Rect | null>(null)
+
+  const step = () => props.steps[index()]
+  const isLast = () => index() >= props.steps.length - 1
+  const isFirst = () => index() === 0
+
+  // Reset to the first step every time the tour is (re)opened.
+  createEffect(() => {
+    if (props.open) setIndex(0)
+  })
+
+  const measure = () => {
+    const current = step()
+    if (!props.open || !current) {
+      setRect(null)
+      return
+    }
+    const el = document.querySelector(current.target)
+    const box = el?.getBoundingClientRect()
+    setRect(box ? { top: box.top, left: box.left, width: box.width, height: box.height } : null)
+  }
+
+  // Recompute on step change / open toggle.
+  createEffect(() => {
+    // Touch reactive deps so this reruns when they change.
+    void index()
+    void props.open
+    measure()
+  })
+
+  onMount(() => {
+    const onReflow = () => measure()
+    window.addEventListener('resize', onReflow)
+    window.addEventListener('scroll', onReflow, true)
+    onCleanup(() => {
+      window.removeEventListener('resize', onReflow)
+      window.removeEventListener('scroll', onReflow, true)
+    })
+  })
+
+  const finish = () => {
+    props.onOpenChange(false)
+    props.onFinish?.()
+  }
+
+  const next = () => {
+    if (isLast()) finish()
+    else setIndex((i) => i + 1)
+  }
+
+  const back = () => {
+    if (!isFirst()) setIndex((i) => i - 1)
+  }
+
+  // Position the tooltip just below the target (falling back to above if the
+  // target sits low in the viewport), or dead-center when there's no target.
+  const tooltipStyle = (): JSX.CSSProperties => {
+    const box = rect()
+    if (!box) {
+      return {
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      }
+    }
+    const gap = 12
+    const below = box.top + box.height + gap
+    const placeBelow = below < window.innerHeight - 160
+    return {
+      position: 'fixed',
+      top: placeBelow ? `${below}px` : `${box.top - gap}px`,
+      left: `${Math.max(gap, box.left)}px`,
+      transform: placeBelow ? undefined : 'translateY(-100%)',
+    }
+  }
+
+  return (
+    <Show when={props.open && step()}>
+      <Portal>
+        {/* Spotlight highlight: only rendered when the target was found. The huge
+            spreading box-shadow dims the rest of the viewport. */}
+        <Show
+          when={rect()}
+          fallback={
+            <div
+              class="fixed inset-0 z-[100]"
+              style={{ 'background-color': 'hsl(var(--background) / 0.7)' }}
+              aria-hidden="true"
+            />
+          }
+        >
+          {(box) => (
+            <div
+              class="pointer-events-none fixed z-[100] rounded-lg ring-2 ring-primary"
+              style={{
+                top: `${box().top - 4}px`,
+                left: `${box().left - 4}px`,
+                width: `${box().width + 8}px`,
+                height: `${box().height + 8}px`,
+                'box-shadow': '0 0 0 9999px hsl(var(--background) / 0.7)',
+              }}
+              aria-hidden="true"
+            />
+          )}
+        </Show>
+
+        {/* Tooltip card */}
+        <div
+          role="dialog"
+          aria-label={step()?.title}
+          class="bg-glass z-[101] max-w-xs rounded-lg border border-border p-4 text-card-foreground shadow-2xl"
+          style={tooltipStyle()}
+        >
+          <p class="font-semibold leading-none tracking-tight">{step()?.title}</p>
+          <Show when={step()?.description}>
+            <p class="mt-2 text-sm text-muted-foreground">{step()?.description}</p>
+          </Show>
+          <div class="mt-4 flex items-center justify-between gap-3">
+            <span class="text-xs text-muted-foreground tabular-nums">
+              {index() + 1} / {props.steps.length}
+            </span>
+            <div class="flex items-center gap-2">
+              <Show when={!isFirst()}>
+                <Button variant="ghost" class={cn('px-2.5 py-1.5')} onClick={back}>
+                  Back
+                </Button>
+              </Show>
+              <Button class="px-2.5 py-1.5" onClick={next}>
+                {isLast() ? 'Done' : 'Next'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Portal>
+    </Show>
+  )
+}

package/src/ui/Transfer.tsx

@@ -0,0 +1,112 @@
+import type { JSX } from 'solid-js'
+import { createSignal, For } from 'solid-js'
+import { ChevronLeft, ChevronRight } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+import { Button } from './Button'
+
+/** A single option shown in either pane of a {@link Transfer}. */
+export interface TransferItem {
+  value: string
+  label: string
+}
+
+export interface TransferProps {
+  /** Full pool of options; membership in `selected` decides which pane each lands in. */
+  items: TransferItem[]
+  /** Values currently in the right ("selected") pane. */
+  selected: string[]
+  /** Called with the next selected-value array whenever items are moved across. */
+  onChange: (selected: string[]) => void
+  /** Pane headers, `[availableTitle, selectedTitle]`. Defaults to `['Available', 'Selected']`. */
+  titles?: [string, string]
+  class?: string
+}
+
+/**
+ * Dual-list picker: two side-by-side panes let the user shuttle items between
+ * an "available" pool and a "selected" set. Tick rows in either pane, then use
+ * the middle chevrons to move the ticked items across; `onChange` receives the
+ * updated array of selected values.
+ *
+ * @example
+ * ```tsx
+ * const [picked, setPicked] = createSignal<string[]>(['a'])
+ * <Transfer
+ *   items={[{ value: 'a', label: 'Apple' }, { value: 'b', label: 'Banana' }]}
+ *   selected={picked()}
+ *   onChange={setPicked}
+ *   titles={['Fruits', 'Basket']}
+ * />
+ * ```
+ */
+export function Transfer(props: TransferProps): JSX.Element {
+  const [checked, setChecked] = createSignal<Set<string>>(new Set())
+
+  const titles = () => props.titles ?? ['Available', 'Selected']
+  const available = () => props.items.filter((item) => !props.selected.includes(item.value))
+  const chosen = () => props.items.filter((item) => props.selected.includes(item.value))
+
+  const toggle = (value: string) => {
+    const next = new Set(checked())
+    if (next.has(value)) next.delete(value)
+    else next.add(value)
+    setChecked(next)
+  }
+
+  const moveRight = () => {
+    const moving = available().filter((item) => checked().has(item.value))
+    if (moving.length === 0) return
+    props.onChange([...props.selected, ...moving.map((item) => item.value)])
+    setChecked(new Set<string>())
+  }
+
+  const moveLeft = () => {
+    const remove = new Set(
+      chosen()
+        .filter((item) => checked().has(item.value))
+        .map((item) => item.value),
+    )
+    if (remove.size === 0) return
+    props.onChange(props.selected.filter((value) => !remove.has(value)))
+    setChecked(new Set<string>())
+  }
+
+  const pane = (title: string, rows: () => TransferItem[]) => (
+    <div class="flex min-w-0 flex-1 flex-col rounded-lg border border-border">
+      <div class="border-b border-border px-3 py-2 text-sm font-medium text-foreground">{title}</div>
+      <ul class="max-h-64 flex-1 overflow-y-auto p-1">
+        <For each={rows()}>
+          {(item) => (
+            <li>
+              <label class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground hover:bg-muted">
+                <input
+                  type="checkbox"
+                  class="h-4 w-4 rounded border-input accent-primary"
+                  checked={checked().has(item.value)}
+                  onChange={() => toggle(item.value)}
+                />
+                <span class="min-w-0 truncate">{item.label}</span>
+              </label>
+            </li>
+          )}
+        </For>
+      </ul>
+    </div>
+  )
+
+  return (
+    <div class={cn('flex items-stretch gap-3', props.class)}>
+      {pane(titles()[0], available)}
+      <div class="flex flex-col items-center justify-center gap-2">
+        <Button variant="outline" class="px-2" onClick={moveRight} aria-label="Move to selected">
+          <ChevronRight class="h-4 w-4" />
+        </Button>
+        <Button variant="outline" class="px-2" onClick={moveLeft} aria-label="Move to available">
+          <ChevronLeft class="h-4 w-4" />
+        </Button>
+      </div>
+      {pane(titles()[1], chosen)}
+    </div>
+  )
+}

package/src/ui/Tree.tsx

@@ -0,0 +1,100 @@
+// Hierarchical, expandable tree view with per-node chevron toggles.
+import { ChevronRight } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createSignal, For, Show } from 'solid-js'
+import { cn } from '../lib/cn'
+
+/** A single node in a {@link Tree}; nodes may nest via `children`. */
+export interface TreeNode {
+  /** Unique identifier; used to track expanded state. */
+  id: string
+  /** Text shown in the node's row. */
+  label: string
+  /** Optional icon rendered before the label. */
+  icon?: JSX.Element
+  /** Child nodes revealed when this node is expanded. */
+  children?: TreeNode[]
+}
+
+export interface TreeProps {
+  nodes: TreeNode[]
+  /** Ids of nodes expanded on first render. */
+  defaultExpanded?: string[]
+  class?: string
+}
+
+/**
+ * Accessible, indented tree view. Nodes with children render a chevron that
+ * rotates when expanded; clicking a row toggles its subtree. Expanded state is
+ * tracked internally, seeded from `defaultExpanded`.
+ *
+ * @example
+ * ```tsx
+ * <Tree
+ *   defaultExpanded={['src']}
+ *   nodes={[
+ *     {
+ *       id: 'src',
+ *       label: 'src',
+ *       children: [
+ *         { id: 'index', label: 'index.ts' },
+ *         { id: 'ui', label: 'ui', children: [{ id: 'tree', label: 'Tree.tsx' }] },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export function Tree(props: TreeProps): JSX.Element {
+  const [expanded, setExpanded] = createSignal<Set<string>>(new Set(props.defaultExpanded ?? []))
+
+  const toggle = (id: string) =>
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+
+  const Node = (nodeProps: { node: TreeNode; depth: number }): JSX.Element => {
+    const hasChildren = () => (nodeProps.node.children?.length ?? 0) > 0
+    const isExpanded = () => expanded().has(nodeProps.node.id)
+
+    return (
+      <li role="treeitem" aria-expanded={hasChildren() ? isExpanded() : undefined}>
+        <div
+          class="flex items-center gap-1.5 rounded-md px-2 py-1 text-sm text-foreground hover:bg-muted cursor-pointer"
+          style={{ 'padding-left': `${nodeProps.depth * 1 + 0.5}rem` }}
+          onClick={() => hasChildren() && toggle(nodeProps.node.id)}
+        >
+          <Show when={hasChildren()} fallback={<span class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />}>
+            <ChevronRight
+              class={cn(
+                'h-3.5 w-3.5 shrink-0 transition-transform duration-200',
+                isExpanded() && 'rotate-90',
+              )}
+              aria-hidden="true"
+            />
+          </Show>
+          <Show when={nodeProps.node.icon}>
+            <span class="shrink-0">{nodeProps.node.icon}</span>
+          </Show>
+          <span class="truncate">{nodeProps.node.label}</span>
+        </div>
+        <Show when={hasChildren() && isExpanded()}>
+          <ul role="group">
+            <For each={nodeProps.node.children}>
+              {(child) => <Node node={child} depth={nodeProps.depth + 1} />}
+            </For>
+          </ul>
+        </Show>
+      </li>
+    )
+  }
+
+  return (
+    <ul role="tree" class={cn('text-foreground', props.class)}>
+      <For each={props.nodes}>{(node) => <Node node={node} depth={0} />}</For>
+    </ul>
+  )
+}

package/src/ui/TreeSelect.tsx

@@ -0,0 +1,151 @@
+// Select-styled trigger that opens a tree popover; leaf clicks pick a value.
+import { ChevronDown, ChevronRight } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createSignal, For, onCleanup, onMount, Show } from 'solid-js'
+import { cn } from '../lib/cn'
+import { type TreeNode } from './Tree'
+
+export interface TreeSelectProps {
+  /** Hierarchical options; the same shape consumed by {@link Tree}. */
+  nodes: TreeNode[]
+  /** Id of the currently selected leaf node. */
+  value?: string
+  /** Fired when a leaf is picked, with its id and the node itself. */
+  onChange: (value: string, node: TreeNode) => void
+  /** Text shown when no value is selected. */
+  placeholder?: string
+  class?: string
+}
+
+/** Depth-first search for the node whose `id` matches `value`. */
+function findNode(nodes: TreeNode[], value: string): TreeNode | undefined {
+  for (const node of nodes) {
+    if (node.id === value) return node
+    if (node.children) {
+      const found = findNode(node.children, value)
+      if (found) return found
+    }
+  }
+  return undefined
+}
+
+/**
+ * A dropdown that pairs a {@link Select}-styled trigger with a {@link Tree} in a
+ * popover panel. Clicking a branch toggles its subtree; clicking a leaf calls
+ * `onChange` and closes the panel. The trigger shows the selected leaf's label
+ * (found by walking `nodes`) or a muted `placeholder`. Closes on outside click.
+ *
+ * @example
+ * ```tsx
+ * const [dept, setDept] = createSignal<string>()
+ * <TreeSelect
+ *   placeholder="Pick a team"
+ *   value={dept()}
+ *   onChange={(id) => setDept(id)}
+ *   nodes={[
+ *     {
+ *       id: 'eng',
+ *       label: 'Engineering',
+ *       children: [
+ *         { id: 'fe', label: 'Frontend' },
+ *         { id: 'be', label: 'Backend' },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export function TreeSelect(props: TreeSelectProps): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+  const [expanded, setExpanded] = createSignal<Set<string>>(new Set())
+  let root!: HTMLDivElement
+
+  const selected = () => (props.value ? findNode(props.nodes, props.value) : undefined)
+
+  const toggle = (id: string) =>
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+
+  const select = (node: TreeNode) => {
+    props.onChange(node.id, node)
+    setOpen(false)
+  }
+
+  const onDocClick = (ev: MouseEvent) => {
+    if (root && !root.contains(ev.target as Node)) setOpen(false)
+  }
+  onMount(() => document.addEventListener('click', onDocClick))
+  onCleanup(() => document.removeEventListener('click', onDocClick))
+
+  const Node = (nodeProps: { node: TreeNode; depth: number }): JSX.Element => {
+    const hasChildren = () => (nodeProps.node.children?.length ?? 0) > 0
+    const isExpanded = () => expanded().has(nodeProps.node.id)
+    const isSelected = () => props.value === nodeProps.node.id
+
+    return (
+      <li
+        role="treeitem"
+        aria-expanded={hasChildren() ? isExpanded() : undefined}
+        aria-selected={!hasChildren() ? isSelected() : undefined}
+      >
+        <div
+          class={cn(
+            'flex items-center gap-1.5 rounded-md px-2 py-1 text-sm text-foreground hover:bg-muted cursor-pointer',
+            isSelected() && 'bg-accent text-accent-foreground',
+          )}
+          style={{ 'padding-left': `${nodeProps.depth * 1 + 0.5}rem` }}
+          onClick={() => (hasChildren() ? toggle(nodeProps.node.id) : select(nodeProps.node))}
+        >
+          <Show when={hasChildren()} fallback={<span class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />}>
+            <ChevronRight
+              class={cn(
+                'h-3.5 w-3.5 shrink-0 transition-transform duration-200',
+                isExpanded() && 'rotate-90',
+              )}
+              aria-hidden="true"
+            />
+          </Show>
+          <Show when={nodeProps.node.icon}>
+            <span class="shrink-0">{nodeProps.node.icon}</span>
+          </Show>
+          <span class="truncate">{nodeProps.node.label}</span>
+        </div>
+        <Show when={hasChildren() && isExpanded()}>
+          <ul role="group">
+            <For each={nodeProps.node.children}>
+              {(child) => <Node node={child} depth={nodeProps.depth + 1} />}
+            </For>
+          </ul>
+        </Show>
+      </li>
+    )
+  }
+
+  return (
+    <div ref={root} class={cn('relative', props.class)}>
+      <button
+        type="button"
+        aria-haspopup="tree"
+        aria-expanded={open()}
+        onClick={() => setOpen((v) => !v)}
+        class="flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition-colors a4-field"
+      >
+        <Show when={selected()} fallback={<span class="text-muted-foreground">{props.placeholder}</span>}>
+          <span class="truncate">{selected()!.label}</span>
+        </Show>
+        <ChevronDown class="h-4 w-4 shrink-0 opacity-50" aria-hidden="true" />
+      </button>
+      <Show when={open()}>
+        <div class="z-50 mt-1 w-full rounded-md border border-border bg-card p-2 shadow-md absolute">
+          <ul role="tree" class="text-foreground">
+            <For each={props.nodes}>{(node) => <Node node={node} depth={0} />}</For>
+          </ul>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/ui/VirtualList.tsx

@@ -0,0 +1,81 @@
+// Virtualized list: only the visible rows (+ overscan) live in the DOM, so a
+// list of any length renders and scrolls instantly. Wraps @tanstack/solid-virtual
+// with the remeasureAfterLayout fix (the virtualizer otherwise caches a 0×0
+// viewport when the scroll container isn't laid out at mount and never renders
+// a row). The consumer owns the scroll container's HEIGHT — pass it via `class`
+// (e.g. "h-[65vh]"); a fixed/constrained height is required for virtualization.
+import { createVirtualizer } from '@tanstack/solid-virtual'
+import { For, type Accessor, type JSX } from 'solid-js'
+import { createSignal } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { remeasureAfterLayout } from '../lib/virtual'
+
+interface VirtualListProps<T> {
+  /** The full data set. Only the visible slice is rendered. */
+  each: T[]
+  /** Estimated row size in px — a number, or a per-index function. */
+  estimateSize: number | ((index: number) => number)
+  /** Rows to render beyond the viewport on each side. Default 10. */
+  overscan?: number
+  /** Scroll-container classes. MUST constrain height (e.g. "h-[65vh]"). */
+  class?: string
+  /** Row renderer. `index` is an accessor so it stays reactive as rows recycle. */
+  children: (item: T, index: Accessor<number>) => JSX.Element
+}
+
+/**
+ * Virtualized list built on `@tanstack/solid-virtual` — renders only the
+ * visible rows (plus `overscan`) so lists of any length mount and scroll
+ * instantly. The scroll container's height MUST be constrained via `class`
+ * (e.g. `"h-[65vh]"`); virtualization requires a fixed viewport to measure
+ * against.
+ *
+ * @example
+ * ```tsx
+ * <VirtualList each={rows()} estimateSize={40} class="h-[65vh]">
+ *   {(row, index) => <div>{index()}: {row.name}</div>}
+ * </VirtualList>
+ * ```
+ */
+export function VirtualList<T>(props: VirtualListProps<T>): JSX.Element {
+  const [scrollEl, setScrollEl] = createSignal<HTMLElement>()
+  const virt = createVirtualizer({
+    get count() {
+      return props.each.length
+    },
+    getScrollElement: () => scrollEl() ?? null,
+    estimateSize: (i) =>
+      typeof props.estimateSize === 'function' ? props.estimateSize(i) : props.estimateSize,
+    get overscan() {
+      return props.overscan ?? 10
+    },
+  })
+  // eslint-disable-next-line solid/reactivity -- scrollEl is read inside the helper's onMount (a tracked scope)
+  remeasureAfterLayout(scrollEl, setScrollEl)
+
+  return (
+    <div ref={setScrollEl} class={cn('overflow-auto', props.class)}>
+      {/* Full-height spacer so the scrollbar reflects the whole list; each row is
+          absolutely positioned at its computed offset. */}
+      <div style={{ position: 'relative', width: '100%', height: `${virt.getTotalSize()}px` }}>
+        <For each={virt.getVirtualItems()}>
+          {(vi) => (
+            <div
+              style={{
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                width: '100%',
+                height: `${vi.size}px`,
+                transform: `translateY(${vi.start}px)`,
+              }}
+            >
+              {props.children(props.each[vi.index], () => vi.index)}
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}