@hanzo/ui 5.7.1 → 8.0.0

package/src/product/Metric.tsx

@@ -0,0 +1,253 @@
+'use client'
+
+/**
+ * Console metric primitives — the ONE shared set of stat tiles, panels, legend
+ * rows, util bars, and "real action or honest-disabled" buttons that every
+ * resource console (GPUs, Kubernetes, Containers, Training, Tasks) renders.
+ *
+ * These were first written for the GPU surface; promoted here so a sibling
+ * product never reaches into `gpus/` for shell chrome (separation of concerns).
+ * `gpus/charts.tsx` now re-exports them, so there is exactly one definition.
+ *
+ * Honest by construction: a `MetricCard` shows the pre-formatted `value` the
+ * caller passes (an absent metric is an em-dash, never a fabricated number); a
+ * `Sparkline`/`MiniBars` with no real series renders nothing; a `HintButton`
+ * with no `onPress` is visibly disabled with a tooltip saying WHY. Inline SVG is
+ * the house pattern (see ui/Loader, ui/HanzoMark); style props use the v5
+ * shorthand set.
+ */
+import type { ReactElement, ReactNode } from 'react'
+import { Button, Card, Text, XStack, YStack } from '@hanzo/gui'
+
+/** Distinct, theme-neutral series colors (mid-saturation reads on dark + light). */
+export const SERIES = ['#6ea8fe', '#7ee787', '#f0a868', '#c792ea', '#56d4c4', '#e879a6', '#d6c15a', '#8b9bb4'] as const
+export const colorForIndex = (i: number): string => SERIES[i % SERIES.length]
+const TRACK = 'rgba(128,128,128,0.18)'
+
+/** Tone for a utilization/temperature value (green calm → red hot). */
+export function utilColor(pct: number): string {
+  if (pct >= 90) return '#e5534b'
+  if (pct >= 70) return '#f0a868'
+  return '#7ee787'
+}
+
+/**
+ * A single-series sparkline over real points. Renders nothing meaningful for <2
+ * points (the caller shows `—` instead). The y-range is the data's own min/max.
+ */
+export function Sparkline({
+  points,
+  width = 104,
+  height = 30,
+  color = SERIES[0],
+}: {
+  points: number[]
+  width?: number
+  height?: number
+  color?: string
+}): ReactElement | null {
+  if (!points || points.length < 2) return null
+  const min = Math.min(...points)
+  const max = Math.max(...points)
+  const span = max - min || 1
+  const stepX = width / (points.length - 1)
+  const y = (v: number) => height - 2 - ((v - min) / span) * (height - 4)
+  const d = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${(i * stepX).toFixed(1)},${y(p).toFixed(1)}`).join(' ')
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} role="img" aria-label="trend">
+      <path d={d} fill="none" stroke={color} strokeWidth={1.5} strokeLinejoin="round" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+/** A small vertical-bar chart (e.g. cost per day). One bar per real datum. */
+export function MiniBars({
+  bars,
+  width = 320,
+  height = 96,
+  color = SERIES[0],
+}: {
+  bars: { label: string; value: number }[]
+  width?: number
+  height?: number
+  color?: string
+}): ReactElement | null {
+  if (!bars.length) return null
+  const max = Math.max(...bars.map((b) => b.value), 1)
+  const gap = 4
+  const bw = (width - gap * (bars.length - 1)) / bars.length
+  return (
+    <svg width="100%" height={height} viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" role="img" aria-label="bars">
+      {bars.map((b, i) => {
+        const h = Math.max(1, (b.value / max) * (height - 2))
+        return (
+          <rect key={b.label + i} x={i * (bw + gap)} y={height - h} width={bw} height={h} rx={2} fill={color} opacity={0.85}>
+            <title>{`${b.label}: ${b.value}`}</title>
+          </rect>
+        )
+      })}
+    </svg>
+  )
+}
+
+/**
+ * A thin horizontal bar (0–100). By default the fill tones by value (green→red,
+ * for utilization/temperature). Pass a fixed `color` for a neutral meter like
+ * training PROGRESS, where a high value is good, not "hot".
+ */
+export function UtilBar({ value, width = 120, color }: { value: number; width?: number; color?: string }): ReactElement {
+  const v = Math.max(0, Math.min(100, value))
+  return (
+    <svg width={width} height={8} viewBox={`0 0 ${width} 8`} role="img" aria-label={`${Math.round(v)}%`}>
+      <rect x={0} y={1} width={width} height={6} rx={3} fill={TRACK} />
+      <rect x={0} y={1} width={(v / 100) * width} height={6} rx={3} fill={color ?? utilColor(v)} />
+    </svg>
+  )
+}
+
+/** A legend row: color swatch + label + value. */
+export function LegendDot({ color, label, value }: { color: string; label: string; value?: ReactNode }) {
+  return (
+    <XStack items="center" gap="$2" justify="space-between">
+      <XStack items="center" gap="$2">
+        <YStack width={10} height={10} rounded="$1" bg={color as never} />
+        <Text fontSize="$2" color="$color11">
+          {label}
+        </Text>
+      </XStack>
+      {value != null ? (
+        <Text fontSize="$2" color="$color12" fontWeight="600">
+          {value}
+        </Text>
+      ) : null}
+    </XStack>
+  )
+}
+
+/**
+ * One overview metric tile. `value` is pre-formatted by the caller (so an absent
+ * metric is an honest `—`, never a fabricated number). The sparkline only appears
+ * when the caller has a REAL series; the delta only when a real comparison exists.
+ */
+export function MetricCard({
+  icon,
+  label,
+  value,
+  caption,
+  spark,
+  sparkColor,
+  delta,
+}: {
+  icon: ReactElement
+  label: string
+  value: string
+  caption?: string
+  spark?: number[]
+  sparkColor?: string
+  delta?: { pct: number }
+}) {
+  const up = delta ? delta.pct >= 0 : false
+  return (
+    <Card p="$3.5" gap="$2" borderWidth={1} borderColor="$borderColor" flex={1} minW={172}>
+      <XStack items="center" gap="$2" justify="space-between">
+        <XStack items="center" gap="$2">
+          {icon}
+          <Text fontSize="$2" color="$color11" fontWeight="600">
+            {label}
+          </Text>
+        </XStack>
+        {delta ? (
+          <Text fontSize="$1" color={up ? '#7ee787' : '#e5534b'}>
+            {up ? '▲' : '▼'} {Math.abs(delta.pct)}%
+          </Text>
+        ) : null}
+      </XStack>
+      <XStack items="flex-end" justify="space-between" gap="$2">
+        <Text fontSize="$8" fontWeight="900" color="$color12" numberOfLines={1}>
+          {value}
+        </Text>
+        {spark && spark.length >= 2 ? <Sparkline points={spark} color={sparkColor ?? SERIES[0]} /> : null}
+      </XStack>
+      {caption ? (
+        <Text fontSize="$1" color="$color10" numberOfLines={1}>
+          {caption}
+        </Text>
+      ) : null}
+    </Card>
+  )
+}
+
+/**
+ * A button that is either a real action (onPress) or HONESTLY disabled with a
+ * native tooltip explaining why (the action has no backend yet). One way to
+ * render the "real route or honest-disabled" affordance the consoles use.
+ */
+export function HintButton({
+  icon,
+  iconAfter,
+  children,
+  onPress,
+  disabled,
+  hint,
+  theme,
+}: {
+  icon?: ReactElement
+  iconAfter?: ReactElement
+  children: ReactNode
+  onPress?: () => void
+  disabled?: boolean
+  /** Native tooltip text (shown on hover) — say WHY it is disabled. */
+  hint?: string
+  theme?: 'light'
+}) {
+  const btn = (
+    <Button
+      size="$2"
+      theme={theme}
+      icon={icon}
+      iconAfter={iconAfter}
+      disabled={disabled}
+      onPress={disabled ? undefined : onPress}
+    >
+      {children}
+    </Button>
+  )
+  if (!hint) return btn
+  return (
+    <span title={hint} style={{ display: 'inline-flex' }}>
+      {btn}
+    </span>
+  )
+}
+
+/**
+ * A titled panel wrapper used across the consoles (chart + list cards). `grow`
+ * (default true) sets `flex={1}` so panels SHARE width in a ROW; pass `grow={false}`
+ * inside a vertical rail (a column YStack) so each panel sizes to its content and
+ * stacks — flex-grow in a column with no fixed height collapses them onto each other.
+ */
+export function Panel({
+  title,
+  right,
+  children,
+  minW = 280,
+  grow = true,
+}: {
+  title: string
+  right?: ReactNode
+  children: ReactNode
+  minW?: number
+  grow?: boolean
+}) {
+  return (
+    <Card p="$4" gap="$3" borderWidth={1} borderColor="$borderColor" flex={grow ? 1 : undefined} minW={minW} width={grow ? undefined : '100%'}>
+      <XStack items="center" justify="space-between" gap="$2">
+        <Text fontSize="$4" fontWeight="800" color="$color12">
+          {title}
+        </Text>
+        {right}
+      </XStack>
+      {children}
+    </Card>
+  )
+}

package/src/product/PageHeader.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { Text, XStack, YStack } from '@hanzo/gui'
+
+/** Section title + optional subtitle and right-aligned actions. */
+export function PageHeader({
+  title,
+  subtitle,
+  actions,
+}: {
+  title: string
+  subtitle?: string
+  actions?: ReactNode
+}) {
+  return (
+    <XStack justify="space-between" items="flex-start" gap="$4">
+      <YStack gap="$1">
+        <Text fontSize="$7" fontWeight="800">
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text fontSize="$3" color="$color11">
+            {subtitle}
+          </Text>
+        ) : null}
+      </YStack>
+      {actions ? <XStack gap="$2">{actions}</XStack> : null}
+    </XStack>
+  )
+}

package/src/product/PrimaryButton.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+/**
+ * Primary button — the one white, high-emphasis action for the console.
+ *
+ * Monochrome brand: `theme="light"` flips the button to the light theme inside
+ * the dark console, giving a white fill with a near-black label and icon — no
+ * hue accent. Use it for the single primary action in a view (sign in, save,
+ * get started). Secondary and destructive actions use the default neutral
+ * `Button`.
+ */
+import type { ComponentProps } from 'react'
+import { Button } from '@hanzo/gui'
+
+export function PrimaryButton(props: ComponentProps<typeof Button>) {
+  return <Button theme="light" {...props} />
+}

package/src/product/ProductIcon.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+/**
+ * ProductIcon — the Linear-style product tile: a rounded-square block filled with
+ * the product's accent color, with the product glyph knocked out in near-white so
+ * it reads "cut out" of the color. This is the ONE way a product icon renders in
+ * the console chrome (sidebar nav, command palette, product overview header) — a
+ * bare tinted glyph is replaced everywhere by this tile.
+ *
+ * Prop-driven and pure: the accent hex is resolved by the caller (registry-curated
+ * → per-user override → stable hash, via `useProductColors().colorOf`) and passed
+ * in as `color`, so this component owns only the look, never the palette. With no
+ * color it falls back to a tasteful neutral chip ($color12 fill + $color1 glyph) —
+ * never a random hue — matching the first-party `ProviderLogo` mark, so first-party
+ * marks and product tiles read as one family.
+ *
+ * The knock-out is the same technique the color-swatch button uses (a raw-hex
+ * `backgroundColor` fill + a `#ffffff` glyph) so an arbitrary product accent tints
+ * cleanly outside Gui's token palette, in the ONE sanctioned place.
+ */
+import { XStack } from '@hanzo/gui'
+
+import { asColor, type IconLike } from './color'
+
+export function ProductIcon({
+  icon: Icon,
+  color,
+  size = 24,
+}: {
+  icon: IconLike
+  /** The product's resolved accent hex (e.g. `#5E6AD2`). Omit for the neutral chip. */
+  color?: string
+  size?: number
+}) {
+  const radius = Math.round(size * 0.28)
+  const glyph = Math.round(size * 0.58)
+  const tinted = typeof color === 'string' && color.trim() !== ''
+
+  // Accent tile — product color fill + near-white glyph (the Linear "cut out").
+  if (tinted) {
+    return (
+      <XStack
+        width={size}
+        height={size}
+        items="center"
+        justify="center"
+        rounded={radius}
+        style={{ backgroundColor: color }}
+      >
+        <Icon size={glyph} color={asColor('#ffffff')} />
+      </XStack>
+    )
+  }
+
+  // No accent — a tasteful neutral chip (consistent with ProviderLogo's mark).
+  return (
+    <XStack width={size} height={size} items="center" justify="center" rounded={radius} bg="$color12">
+      <Icon size={glyph} color="$color1" />
+    </XStack>
+  )
+}

package/src/product/ProviderLogo.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+/**
+ * ProviderLogo — a small provider/model avatar resolved from a provider NAME
+ * alone (no external logo URLs, no network). Self-contained and prop-driven so
+ * it lifts cleanly into `@hanzo/ui` for hanzo.ai / @hanzo/dev / the desktop app.
+ *
+ * Resolution order:
+ *   1. First-party — Zen renders the real ensō mark, Hanzo the real block-H mark
+ *      (same geometry as @zenlm/logo / @hanzo/logo), knocked out of a filled
+ *      rounded tile so our own models read distinctly and on-brand.
+ *   2. A known provider → its mapped @hanzogui/lucide-icons-2 glyph.
+ *   3. Otherwise → a stable initials chip (1–2 letters from the name).
+ *
+ * Honest by construction: we never claim an official brand logo we don't ship —
+ * unknown providers get clean initials, not a guessed icon. Colors are @hanzo/gui
+ * theme tokens so the mark themes with the shell.
+ */
+import { Text, XStack, useTheme } from '@hanzo/gui'
+import { Boxes, Server, Globe, Cpu } from '@hanzogui/lucide-icons-2'
+
+type IconCmp = typeof Globe
+
+/** Curated, extendable provider→glyph map (lowercased keys). Brand-neutral avatars. */
+const KNOWN: Record<string, IconCmp> = {
+  openrouter: Globe,
+  nvidia: Cpu,
+}
+
+const isFirstParty = (provider: string): boolean => {
+  const p = provider.trim().toLowerCase()
+  return p === 'hanzo' || p === 'zen'
+}
+
+/** The Zen ensō mark — identical geometry to @zenlm/logo (svg/zen-enso.svg). */
+function EnsoMark({ size, color }: { size: number; color: string }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true">
+      <path d="M66.22 83.26 A37 37 0 1 1 85.57 60.20" fill="none" stroke={color} strokeWidth={11} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+/** The Hanzo block-H mark — identical geometry to @hanzo/logo (app/icon.svg). */
+const HANZO_PATHS = [
+  'M22.21 67V44.6369H0V67H22.21Z',
+  'M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z',
+  'M22.21 0H0V22.3184H22.21V0Z',
+  'M66.7198 0H44.5098V22.3184H66.7198V0Z',
+  'M66.7198 67V44.6369H44.5098V67H66.7198Z',
+]
+function HanzoHMark({ size, color }: { size: number; color: string }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 67 67" aria-hidden="true">
+      {HANZO_PATHS.map((d) => (
+        <path key={d} d={d} fill={color} />
+      ))}
+    </svg>
+  )
+}
+
+/** 1–2 uppercase initials from a provider name: words→first letters, else first 2 chars. */
+export function providerInitials(provider: string): string {
+  const name = provider.trim()
+  if (!name) return '•'
+  const words = name.split(/[\s/_-]+/).filter(Boolean)
+  if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase()
+  return name.slice(0, 2).toUpperCase()
+}
+
+export function ProviderLogo({ provider, size = 24 }: { provider: string; size?: number }) {
+  const theme = useTheme()
+  const radius = Math.round(size * 0.28)
+  const iconSize = Math.round(size * 0.56)
+
+  // First-party (Zen/Hanzo) — the real brand mark knocked out of a filled tile.
+  if (isFirstParty(provider)) {
+    const fg = theme.color1?.get() ?? '#000000' // cut-out mark: the tile's contrast color
+    const markSize = Math.round(size * 0.66)
+    const isZen = provider.trim().toLowerCase() === 'zen'
+    return (
+      <XStack width={size} height={size} items="center" justify="center" rounded={radius} bg="$color12">
+        {isZen ? <EnsoMark size={markSize} color={fg} /> : <HanzoHMark size={Math.round(size * 0.56)} color={fg} />}
+      </XStack>
+    )
+  }
+
+  // A known provider with a curated, brand-neutral glyph.
+  const Known = KNOWN[provider.trim().toLowerCase()]
+  if (Known) {
+    return (
+      <XStack
+        width={size}
+        height={size}
+        items="center"
+        justify="center"
+        rounded={radius}
+        bg="$color3"
+        borderWidth={1}
+        borderColor="$borderColor"
+      >
+        <Known size={iconSize} color="$color11" />
+      </XStack>
+    )
+  }
+
+  // Otherwise — a clean, stable initials chip (no fabricated brand logo).
+  return (
+    <XStack
+      width={size}
+      height={size}
+      items="center"
+      justify="center"
+      rounded={radius}
+      bg="$color3"
+      borderWidth={1}
+      borderColor="$borderColor"
+    >
+      <Text fontSize={Math.round(size * 0.4)} fontWeight="800" color="$color11">
+        {providerInitials(provider)}
+      </Text>
+    </XStack>
+  )
+}
+
+/** A generic fallback mark for an unspecified provider (used sparingly). */
+export function GenericLogo({ size = 24 }: { size?: number }) {
+  return (
+    <XStack width={size} height={size} items="center" justify="center" rounded={Math.round(size * 0.28)} bg="$color3" borderWidth={1} borderColor="$borderColor">
+      <Server size={Math.round(size * 0.56)} color="$color11" />
+    </XStack>
+  )
+}
+
+// Boxes is re-exported as the conventional "custom model" mark for callers that
+// render a non-provider tile next to ProviderLogo (keeps the icon source single).
+export { Boxes as CustomModelMark }

package/src/product/Reorder.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+
+import { rowShift, targetIndex } from './Reorder'
+
+describe('targetIndex', () => {
+  it('rounds travel to the nearest row and clamps to range', () => {
+    // rowH=44, from=2, drag down 100px → +2.27 → +2 → index 4
+    expect(targetIndex(2, 100, 44, 6)).toBe(4)
+    // drag up 100px → −2 → index 0
+    expect(targetIndex(2, -100, 44, 6)).toBe(0)
+    // clamp at the ends
+    expect(targetIndex(5, 999, 44, 6)).toBe(5)
+    expect(targetIndex(0, -999, 44, 6)).toBe(0)
+    // sub-half-row travel stays put
+    expect(targetIndex(3, 20, 44, 6)).toBe(3)
+  })
+
+  it('is a safe no-op for degenerate inputs', () => {
+    expect(targetIndex(2, 100, 0, 6)).toBe(2)
+    expect(targetIndex(2, 100, 44, 0)).toBe(2)
+  })
+})
+
+describe('rowShift — displacement of siblings during a drag', () => {
+  const rowH = 44
+  it('the dragged row follows the pointer', () => {
+    expect(rowShift(2, 2, 4, 90, rowH)).toBe(90)
+  })
+  it('rows between from and to (dragging down) move up by one row', () => {
+    // from=1 → to=3: rows 2,3 shift up
+    expect(rowShift(2, 1, 3, 90, rowH)).toBe(-rowH)
+    expect(rowShift(3, 1, 3, 90, rowH)).toBe(-rowH)
+    expect(rowShift(4, 1, 3, 90, rowH)).toBe(0)
+  })
+  it('rows between to and from (dragging up) move down by one row', () => {
+    // from=4 → to=2: rows 2,3 shift down
+    expect(rowShift(2, 4, 2, -90, rowH)).toBe(rowH)
+    expect(rowShift(3, 4, 2, -90, rowH)).toBe(rowH)
+    expect(rowShift(1, 4, 2, -90, rowH)).toBe(0)
+  })
+})

package/src/product/Reorder.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+/**
+ * Reorder — a tiny pointer-driven drag-to-reorder list. No dependency: it uses
+ * Pointer Events (so it works with mouse AND touch) and CSS transforms, matching
+ * the shell's transform-driven motion. Rows are a FIXED height (all pinned rows
+ * are), which keeps the "where does it drop?" math exact and pure (`targetIndex`)
+ * and the reflow buttery — the lifted row follows the pointer 1:1 while its
+ * displaced siblings ease into place.
+ *
+ * The list is controlled: `onReorder(from, to)` fires once on drop; the parent
+ * owns the data (here, the account-backed pins model). `renderItem` gets a
+ * `handle` to spread on the drag affordance so the rest of the row stays
+ * interactive (tap to open, etc.).
+ */
+import { useCallback, useRef, useState, type ReactNode } from 'react'
+import { YStack } from '@hanzo/gui'
+
+/** Final index for a drag: start + rounded rows travelled, clamped. PURE. */
+export function targetIndex(from: number, dy: number, rowH: number, count: number): number {
+  if (rowH <= 0 || count <= 0) return from
+  const raw = from + Math.round(dy / rowH)
+  return Math.max(0, Math.min(raw, count - 1))
+}
+
+/** Vertical shift for row `i` during a drag from `from`→`to` (the dragged row
+ *  follows the pointer; rows between them make room). PURE. */
+export function rowShift(i: number, from: number, to: number, dy: number, rowH: number): number {
+  if (i === from) return dy
+  if (from < to && i > from && i <= to) return -rowH
+  if (from > to && i < from && i >= to) return rowH
+  return 0
+}
+
+export type DragHandle = { onPointerDown: (e: { clientY?: number; pointerId?: number; nativeEvent?: { clientY?: number } }) => void }
+
+export function Reorder<T>({
+  items,
+  keyOf,
+  rowHeight = 44,
+  onReorder,
+  renderItem,
+}: {
+  items: T[]
+  keyOf: (t: T) => string
+  rowHeight?: number
+  onReorder: (from: number, to: number) => void
+  renderItem: (item: T, handle: DragHandle, dragging: boolean) => ReactNode
+}) {
+  const [drag, setDrag] = useState<{ from: number; dy: number } | null>(null)
+  const startRef = useRef<{ from: number; startY: number } | null>(null)
+
+  const to = drag ? targetIndex(drag.from, drag.dy, rowHeight, items.length) : -1
+
+  const begin = useCallback(
+    (index: number) =>
+      (e: { clientY?: number; pointerId?: number; nativeEvent?: { clientY?: number } }) => {
+        const startY = e.clientY ?? e.nativeEvent?.clientY ?? 0
+        startRef.current = { from: index, startY }
+        setDrag({ from: index, dy: 0 })
+
+        const move = (ev: PointerEvent) => {
+          if (!startRef.current) return
+          setDrag({ from: startRef.current.from, dy: ev.clientY - startRef.current.startY })
+        }
+        const end = () => {
+          const s = startRef.current
+          window.removeEventListener('pointermove', move)
+          window.removeEventListener('pointerup', end)
+          window.removeEventListener('pointercancel', end)
+          startRef.current = null
+          setDrag((d) => {
+            if (s && d) {
+              const t = targetIndex(s.from, d.dy, rowHeight, items.length)
+              if (t !== s.from) onReorder(s.from, t)
+            }
+            return null
+          })
+        }
+        window.addEventListener('pointermove', move)
+        window.addEventListener('pointerup', end)
+        window.addEventListener('pointercancel', end)
+      },
+    [items.length, rowHeight, onReorder],
+  )
+
+  return (
+    <YStack>
+      {items.map((item, i) => {
+        const dragging = drag?.from === i
+        const shift = drag && to >= 0 ? rowShift(i, drag.from, to, drag.dy, rowHeight) : 0
+        return (
+          <YStack
+            key={keyOf(item)}
+            height={rowHeight}
+            justify="center"
+            className="hz-drag-item"
+            style={{
+              transform: `translateY(${shift}px)`,
+              zIndex: dragging ? 2 : 1,
+              ...(dragging ? { transition: 'none', boxShadow: '0 8px 24px rgba(0,0,0,0.28)' } : null),
+            }}
+          >
+            {renderItem(item, { onPointerDown: begin(i) }, dragging)}
+          </YStack>
+        )
+      })}
+    </YStack>
+  )
+}