{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "relay-wheel",
  "title": "Relay Wheel",
  "description": "Scrolls a one-line sideways row on a vertical mouse wheel until its end, then lets the page scroll.",
  "files": [
    {
      "path": "src/lib/constella/relay-wheel.ts",
      "content": "// A mouse wheel sends only deltaY, which a sideways scroller ignores; React's onWheel is passive.\nfunction relayWheel(row: HTMLDivElement) {\n  const onWheel = (event: WheelEvent) => {\n    if (event.ctrlKey || Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {\n      return;\n    }\n    const sign = getComputedStyle(row).direction === \"rtl\" ? -1 : 1;\n    const travelled = row.scrollLeft * sign;\n    const atEdge =\n      event.deltaY > 0\n        ? travelled >= row.scrollWidth - row.clientWidth - 1\n        : travelled < 1;\n    if (atEdge) {\n      return;\n    }\n    event.preventDefault();\n    row.scrollBy({ left: event.deltaY * sign });\n  };\n  row.addEventListener(\"wheel\", onWheel, { passive: false });\n  return () => {\n    row.removeEventListener(\"wheel\", onWheel);\n  };\n}\n\nexport { relayWheel };\n",
      "type": "registry:lib"
    }
  ],
  "docs": "A ref callback for the element that scrolls sideways: `ref={relayWheel}`. In an effect, call it with the element and run what it returns on cleanup. Only for a one-line strip with nothing to read past it; a block with height, like a table or code, keeps the page's scroll.",
  "type": "registry:lib"
}