{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bidposition",
  "type": "registry:component",
  "title": "BidPosition",
  "description": "Componente Concorde BidPosition — un solo archivo, BidPosition.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/BidPosition.tsx",
      "type": "registry:file",
      "target": "components/BidPosition.tsx",
      "content": "\"use client\";\n\n/**\n * BidPosition — Generado por Concorde\n * Fuente: Figma VOYAGER · \"ConsolePositions\" (2934:14554) +\n *         \"Background+Border\" (3188:11944 live · 3188:11955 vault)\n *\n * Tabla de posiciones de pujas: card glass (white 28%→4% + backdrop-blur, radio 16, borde gradiente, sombra)\n * con header de columnas (PUESTO · USUARIO · BIDS, decodificado del SVG) y N\n * filas tipo pastilla en grid de 3 columnas:\n *   · 1ª posición  → live (naranja #FF9639→#BE3D00, borde gradiente, trofeo dorado)\n *   · resto        → vault (morado #19004A→#3B1782→#2E0F70, borde #99A1AF)\n * Colores/gradientes/sombras copiados tal cual del SVG. Texto = data (`positions`),\n * porque en el SVG los textos son glifos vectorizados (placeholder), no editables.\n */\n\nimport { useEffect, useLayoutEffect, useRef } from \"react\";\nimport type { JSX } from \"react\";\n\nexport interface BidPositionItem {\n  /**\n   * Identidad estable de la fila (p. ej. el id de usuario de la API/socket).\n   * Es lo que habilita la animación de reordenamiento: mientras el `id` se\n   * mantenga, la fila se desliza a su nueva posición en vez de re-montarse.\n   * Si se omite se usa el `name` (sin animación de reorden ante nombres iguales).\n   */\n  id?: string;\n  /** Usuario / nombre (columna central) */\n  name: string;\n  /** Nº de bids (columna derecha) */\n  value: string;\n  /** Override del ordinal (default: índice + \"°\") */\n  rank?: string;\n}\n\nexport interface BidPositionProps {\n  /** Encabezado columna izquierda (default \"PUESTO\") */\n  rankLabel?: string;\n  /** Encabezado columna central (default \"C.U.U.\") */\n  nameLabel?: string;\n  /** Encabezado columna derecha (default \"BIDS\") */\n  bidsLabel?: string;\n  /**\n   * Posiciones (la 1ª es live, el resto vault). Pensado para alimentarse en\n   * vivo desde una API/socket: pásalas como nuevo array en cada actualización\n   * y, si las filas traen `id`, los cambios de orden se animan automáticamente.\n   */\n  positions?: BidPositionItem[];\n  className?: string;\n}\n\nconst DEFAULT_POSITIONS: BidPositionItem[] = [\n  { id: \"u1\", name: \"JA8NEE\", value: \"2\" },\n  { id: \"u2\", name: \"BEKVS1\", value: \"1\" },\n  { id: \"u3\", name: \"KAHTH4\", value: \"1\" },\n  { id: \"u4\", name: \"KAHTH4\", value: \"1\" },\n  { id: \"u5\", name: \"KAHTH4\", value: \"1\" },\n];\n\nconst STYLE_ID = \"concorde-bidposition-styles\";\n\nconst BIDPOSITION_STYLES = `\n.pbidpos {\n  box-sizing: border-box;\n  width: 313px;\n  max-width: 100%;\n  border-radius: 16px;\n  border: 1.5px solid transparent;\n  /* GLASS oscuro: base navy (= el \"behind transparent areas\" #0A002E) + sheen\n     blanco (paint0: white 28%→4%) + backdrop-blur (Figma \"bg blur 40\" → 20px) */\n  background-image:\n    linear-gradient(127deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.07) 45%, rgba(255,255,255,0.03) 100%),\n    linear-gradient(160deg, rgba(28,13,82,0.93) 0%, rgba(14,3,56,0.95) 100%),\n    linear-gradient(125deg, rgba(255,255,255,0.9) 0%, rgba(244,172,89,0.7) 22%, rgba(132,96,229,0.7) 74.5%, rgba(255,255,255,0.9) 100%);\n  background-origin: border-box;\n  background-clip: padding-box, padding-box, border-box;\n  -webkit-backdrop-filter: blur(20px);\n  backdrop-filter: blur(20px);\n  box-shadow: rgba(10,0,46,0.6) 0px 12px 36px -4px, inset 0 1px 0 rgba(255,255,255,0.22);\n  padding: 0 16px 16px;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n/* 3 columnas fijas como el SVG: 78 · 143 · 58 (= 279) */\n.pbidpos__head,\n.pbidpos__row {\n  display: grid;\n  grid-template-columns: 78fr 143fr 58fr;\n  align-items: center;\n}\n.pbidpos__head {\n  padding: 14px 0 11px;\n  margin-bottom: 12px;\n  border-bottom: 1px solid #E1E3E2;\n}\n.pbidpos__head span {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: #ffffff;\n  white-space: nowrap;\n}\n.pbidpos__rows { display: flex; flex-direction: column; gap: 8px; }\n.pbidpos__row {\n  box-sizing: border-box;\n  height: 28px;\n  border-radius: 14px;\n  color: #ffffff;\n  will-change: transform;\n}\n@media (prefers-reduced-motion: reduce) {\n  .pbidpos__row { transition: none !important; transform: none !important; }\n}\n/* alineación por columna (idéntica en header y filas) */\n.pbidpos__c1 { text-align: center; }\n.pbidpos__c2 { text-align: left; padding-left: 12px; }\n.pbidpos__c3 { text-align: center; }\n.pbidpos__rank { font-size: 12px; font-weight: 700; }\n.pbidpos__value { font-size: 12px; font-weight: 700; white-space: nowrap; }\n.pbidpos__name {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  padding-left: 12px;\n}\n.pbidpos__nametext {\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.pbidpos__trophy { flex-shrink: 0; filter: drop-shadow(0 0 2px rgba(240,187,59,0.65)); }\n\n/* 1ª posición — live (naranja, borde gradiente) */\n.pbidpos__row--live {\n  border: 1px solid transparent;\n  background-image:\n    linear-gradient(180deg, #FF9639 0%, #EF852E 40%, #BE3D00 100%),\n    linear-gradient(120deg, #ffffff 0%, #F4AC59 22%, #8460E5 74.5%, #ffffff 100%);\n  background-origin: border-box;\n  background-clip: padding-box, border-box;\n}\n/* resto — vault (morado, borde gris) */\n.pbidpos__row--vault {\n  border: 1px solid #99A1AF;\n  background: linear-gradient(90deg, #19004A 0%, #3B1782 50%, #2E0F70 100%);\n}\n`;\n\nfunction Trophy(): JSX.Element {\n  return (\n    <svg className=\"pbidpos__trophy\" width=\"14\" height=\"14\" viewBox=\"177.5 80.3 12.5 12\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M187.471 81.1675H180.476V82.3333H178.145V84.0821C178.145 85.3698 179.188 86.4137 180.476 86.4137C180.935 87.6649 182.065 88.5465 183.391 88.6871V90.4941H181.642V91.66H186.305V90.4941H184.557V88.6871C185.882 88.5465 187.012 87.6649 187.471 86.4137C188.759 86.4137 189.803 85.3698 189.803 84.0821V82.3333H187.471V81.1675ZM180.476 85.2479C179.832 85.2479 179.31 84.7259 179.31 84.0821V83.4991H180.476V85.2479ZM188.637 84.0821C188.637 84.7259 188.115 85.2479 187.471 85.2479V83.4991H188.637V84.0821Z\"\n        fill=\"#FBC47D\"\n      />\n    </svg>\n  );\n}\n\nfunction keyOf(p: BidPositionItem, i: number): string {\n  return p.id ?? `${p.name}-${i}`;\n}\n\nexport default function BidPosition({\n  rankLabel = \"PUESTO\",\n  nameLabel = \"C.U.U.\",\n  bidsLabel = \"BIDS\",\n  positions = DEFAULT_POSITIONS,\n  className = \"\",\n}: BidPositionProps): JSX.Element {\n  // Inyección de estilos en cliente (el <style> SSR de abajo cubre el primer paint)\n  useEffect(function injectStyles() {\n    if (document.getElementById(STYLE_ID)) return;\n    const el = document.createElement(\"style\");\n    el.id = STYLE_ID;\n    el.textContent = BIDPOSITION_STYLES;\n    document.head.appendChild(el);\n  }, []);\n\n  // ── FLIP: anima el deslizamiento de cada fila a su nueva posición ───────────\n  // Usa offsetTop/offsetLeft (relativos al contenedor, NO al viewport) para que\n  // el scroll de la página no genere deltas falsos. Solo corre cuando cambian las\n  // posiciones (no en cada render ni al scrollear).\n  const rowRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const prevPos = useRef<Map<string, { top: number; left: number }>>(new Map());\n\n  useLayoutEffect(function flip() {\n    const refs = rowRefs.current;\n    const before = prevPos.current;\n    const after = new Map<string, { top: number; left: number }>();\n    refs.forEach(function measure(node, key) {\n      after.set(key, { top: node.offsetTop, left: node.offsetLeft });\n    });\n    refs.forEach(function play(node, key) {\n      const a = before.get(key);\n      const b = after.get(key);\n      if (!a || !b) return;\n      const dx = a.left - b.left;\n      const dy = a.top - b.top;\n      if (dx === 0 && dy === 0) return;\n      // 1) coloca la fila en su posición anterior, sin transición\n      node.style.transition = \"transform 0s\";\n      node.style.transform = `translate(${dx}px, ${dy}px)`;\n      // 2) fuerza reflow y deja que anime hasta su lugar real\n      void node.offsetWidth;\n      requestAnimationFrame(function release() {\n        node.style.transition = \"transform 0.5s cubic-bezier(0.22,1,0.36,1)\";\n        node.style.transform = \"\";\n      });\n    });\n    prevPos.current = after;\n  }, [positions]);\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: BIDPOSITION_STYLES }} />\n      <section className={`pbidpos ${className}`.trim()} aria-label=\"Posiciones\">\n        <div className=\"pbidpos__head\">\n          <span className=\"pbidpos__c1\">{rankLabel}</span>\n          <span className=\"pbidpos__c2\">{nameLabel}</span>\n          <span className=\"pbidpos__c3\">{bidsLabel}</span>\n        </div>\n        <div className=\"pbidpos__rows\">\n          {positions.map(function renderPos(p, i) {\n            const live = i === 0;\n            const k = keyOf(p, i);\n            return (\n              <div\n                key={k}\n                ref={function setRef(node) {\n                  if (node) rowRefs.current.set(k, node);\n                  else rowRefs.current.delete(k);\n                }}\n                className={`pbidpos__row ${live ? \"pbidpos__row--live\" : \"pbidpos__row--vault\"}`}\n              >\n                <span className=\"pbidpos__rank pbidpos__c1\">{p.rank ?? `${i + 1}°`}</span>\n                <span className=\"pbidpos__name\">\n                  <span className=\"pbidpos__nametext\">{p.name}</span>\n                  {live ? <Trophy /> : null}\n                </span>\n                <span className=\"pbidpos__value pbidpos__c3\">{p.value}</span>\n              </div>\n            );\n          })}\n        </div>\n      </section>\n    </>\n  );\n}\n"
    }
  ]
}