{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "order-book",
  "title": "Order Book",
  "description": "A real-time order book display with bid/ask levels, depth visualization, mid-price, and spread indicator.",
  "files": [
    {
      "path": "src/registry/sol/order-book.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ninterface OrderBookProps {\n  bids: {\n    price: number;\n    size: number;\n  }[];\n  asks: {\n    price: number;\n    size: number;\n  }[];\n  className?: string;\n}\n\nconst formatSize = (value: number) => {\n  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(2)}M`;\n  if (value >= 1_000) return `${(value / 1_000).toFixed(0)}K`;\n  return value.toFixed(0);\n};\n\nconst OrderBook = ({ bids, asks, className }: OrderBookProps) => {\n  if (bids.length === 0 && asks.length === 0) return null;\n\n  const highestBid = bids[0]?.price ?? 0;\n  const lowestAsk = asks[0]?.price ?? 0;\n  const midPrice =\n    bids.length > 0 && asks.length > 0\n      ? (highestBid + lowestAsk) / 2\n      : highestBid || lowestAsk;\n  const spread = lowestAsk - highestBid;\n  const spreadPercent = highestBid > 0 ? (spread / highestBid) * 100 : 0;\n\n  let cumulativeBidSize = 0;\n  const bidTotals = bids.map((bid) => {\n    cumulativeBidSize += bid.size;\n    return cumulativeBidSize;\n  });\n\n  let cumulativeAskSize = 0;\n  const askTotals = asks.map((ask) => {\n    cumulativeAskSize += ask.size;\n    return cumulativeAskSize;\n  });\n\n  const maxTotal = Math.max(\n    bidTotals[bidTotals.length - 1] || 0,\n    askTotals[askTotals.length - 1] || 0,\n  );\n\n  const reversedAsks = [...asks].reverse();\n  const reversedAskTotals = [...askTotals].reverse();\n\n  return (\n    <div\n      className={cn(\n        \"w-full flex flex-col overflow-hidden rounded-lg border bg-card text-card-foreground\",\n        className,\n      )}\n    >\n      {/* Column headers */}\n      <div className=\"grid grid-cols-3 px-3 py-2 text-xs text-muted-foreground border-b\">\n        <span>Price</span>\n        <span className=\"text-right\">Size</span>\n        <span className=\"text-right\">Total</span>\n      </div>\n\n      {/* Asks (reversed so lowest ask is at bottom, near spread) */}\n      <div className=\"flex flex-col overflow-auto\">\n        {reversedAsks.map((ask, i) => {\n          const total = reversedAskTotals[i];\n          const depth = maxTotal > 0 ? (total / maxTotal) * 100 : 0;\n          return (\n            <div key={`ask-${ask.price}`} className=\"relative\">\n              <div\n                className=\"absolute right-0 top-0 bottom-0 bg-red-400/10\"\n                style={{ width: `${depth}%` }}\n              />\n              <div className=\"relative grid grid-cols-3 px-3 py-1 text-xs\">\n                <span className=\"text-red-400 font-medium tabular-nums\">\n                  {ask.price.toFixed(2)}\n                </span>\n                <span className=\"text-right text-muted-foreground tabular-nums\">\n                  {formatSize(ask.size)}\n                </span>\n                <span className=\"text-right text-muted-foreground tabular-nums\">\n                  {formatSize(total)}\n                </span>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Spread / mid price */}\n      <div className=\"grid grid-cols-3 px-3 py-2 border-y\">\n        <span className=\"text-lg font-semibold text-emerald-500 tabular-nums\">\n          {midPrice.toFixed(2)}\n        </span>\n        <span className=\"text-right text-xs text-muted-foreground self-center\">\n          Spread\n        </span>\n        <span className=\"text-right text-xs text-muted-foreground self-center tabular-nums\">\n          {spread.toFixed(2)} ({spreadPercent.toFixed(3)}%)\n        </span>\n      </div>\n\n      {/* Bids */}\n      <div className=\"flex flex-col overflow-auto\">\n        {bids.map((bid, i) => {\n          const total = bidTotals[i];\n          const depth = maxTotal > 0 ? (total / maxTotal) * 100 : 0;\n          return (\n            <div key={`bid-${bid.price}`} className=\"relative\">\n              <div\n                className=\"absolute right-0 top-0 bottom-0 bg-emerald-500/10\"\n                style={{ width: `${depth}%` }}\n              />\n              <div className=\"relative grid grid-cols-3 px-3 py-1 text-xs\">\n                <span className=\"text-emerald-500 font-medium tabular-nums\">\n                  {bid.price.toFixed(2)}\n                </span>\n                <span className=\"text-right text-muted-foreground tabular-nums\">\n                  {formatSize(bid.size)}\n                </span>\n                <span className=\"text-right text-muted-foreground tabular-nums\">\n                  {formatSize(total)}\n                </span>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport type { OrderBookProps };\nexport { OrderBook };\n",
      "type": "registry:component",
      "target": "components/sol/order-book.tsx"
    }
  ],
  "type": "registry:component"
}