{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notifications-carousel",
  "type": "registry:ui",
  "title": "Notifications Carousel",
  "description": "Vertical drum carousel with 3D cylinder rotation, proximity brightness, and spring snap.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/ruixenui/notifications-carousel.tsx",
      "content": "\"use client\";\n\nimport { useState, useRef, useCallback, useEffect } from \"react\";\nimport { motion, AnimatePresence, animate } from \"motion/react\";\n\n/**\n * Notifications Carousel — Rauno Freiberg craft.\n *\n * Vertical spring carousel. Center item is full brightness + draggable.\n * Adjacent items fade with proximity falloff. Vertical drag/scroll to navigate.\n * Horizontal swipe on focused item to dismiss. Tap to select.\n * Spring physics everywhere. Micro noise-burst audio on detent.\n */\n\n/* ── Audio singleton ── */\n\nlet _a: AudioContext | null = null;\nlet _b: AudioBuffer | null = null;\n\nfunction getCtx(): AudioContext {\n  if (!_a)\n    _a = new (window.AudioContext ||\n      (window as unknown as { webkitAudioContext: typeof AudioContext })\n        .webkitAudioContext)();\n  if (_a.state === \"suspended\") _a.resume();\n  return _a;\n}\n\nfunction getBuf(ac: AudioContext): AudioBuffer {\n  if (_b && _b.sampleRate === ac.sampleRate) return _b;\n  const len = Math.floor(ac.sampleRate * 0.003);\n  const buf = ac.createBuffer(1, len, ac.sampleRate);\n  const ch = buf.getChannelData(0);\n  for (let i = 0; i < len; i++)\n    ch[i] = (Math.random() * 2 - 1) * (1 - i / len) ** 4;\n  _b = buf;\n  return buf;\n}\n\nfunction tick(ref: React.MutableRefObject<number>) {\n  const now = performance.now();\n  if (now - ref.current < 30) return;\n  ref.current = now;\n  try {\n    const ac = getCtx();\n    const src = ac.createBufferSource();\n    const g = ac.createGain();\n    src.buffer = getBuf(ac);\n    g.gain.value = 0.07;\n    src.connect(g).connect(ac.destination);\n    src.start();\n  } catch {\n    /* silent */\n  }\n}\n\n/* ── Types ── */\n\ninterface CarouselItem {\n  id: string;\n  title: string;\n  body: string;\n  time: string;\n}\n\ninterface NotificationsCarouselProps {\n  items?: CarouselItem[];\n  onDismiss?: (id: string) => void;\n  onSelect?: (id: string) => void;\n  sound?: boolean;\n}\n\n/* ── Defaults ── */\n\nconst DEFAULTS: CarouselItem[] = [\n  {\n    id: \"1\",\n    title: \"Deployment complete\",\n    body: \"v2.4.1 deployed to production successfully\",\n    time: \"2m ago\",\n  },\n  {\n    id: \"2\",\n    title: \"Review requested\",\n    body: \"Alex requested your review on PR #482\",\n    time: \"8m ago\",\n  },\n  {\n    id: \"3\",\n    title: \"Build passed\",\n    body: \"Pipeline #846 completed in 3m 42s\",\n    time: \"24m ago\",\n  },\n  {\n    id: \"4\",\n    title: \"New comment\",\n    body: \"Sarah commented on your pull request\",\n    time: \"1h ago\",\n  },\n  {\n    id: \"5\",\n    title: \"Security alert\",\n    body: \"New login detected from San Francisco\",\n    time: \"2h ago\",\n  },\n  {\n    id: \"6\",\n    title: \"Invoice paid\",\n    body: \"Payment of $3,200 received from Acme\",\n    time: \"4h ago\",\n  },\n  {\n    id: \"7\",\n    title: \"Team invitation\",\n    body: \"You were invited to join Project Alpha\",\n    time: \"6h ago\",\n  },\n  {\n    id: \"8\",\n    title: \"Weekly report\",\n    body: \"Your weekly analytics summary is ready\",\n    time: \"1d ago\",\n  },\n];\n\n/* ── CSS ── */\n\nconst CSS = `.nc{--nc-bg:rgba(255,255,255,.72);--nc-border:rgba(0,0,0,.06);--nc-shadow:0 0 0 .5px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);--nc-ink:0,0,0;--nc-card:rgba(255,255,255,.55);--nc-card-hi:rgba(255,255,255,.85)}.dark .nc,[data-theme=\"dark\"] .nc{--nc-bg:rgba(30,30,32,.82);--nc-border:rgba(255,255,255,.06);--nc-shadow:0 0 0 .5px rgba(255,255,255,.04),0 2px 4px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.3);--nc-ink:255,255,255;--nc-card:rgba(255,255,255,.04);--nc-card-hi:rgba(255,255,255,.08)}.nc-row{cursor:grab;touch-action:none}.nc-row:active{cursor:grabbing}`;\n\n/* ── Constants ── */\n\nconst ROW_H = 68;\nconst GAP = 6;\nconst STEP = ROW_H + GAP;\nconst SPRING = { type: \"spring\" as const, stiffness: 400, damping: 32 };\nconst DISMISS_THRESHOLD = 80;\n\nfunction clamp(v: number, lo: number, hi: number) {\n  return Math.max(lo, Math.min(hi, v));\n}\n\n/* ── Component ── */\n\nexport function NotificationsCarousel({\n  items: ext,\n  onDismiss,\n  onSelect,\n  sound = true,\n}: NotificationsCarouselProps) {\n  const [internal, setInternal] = useState<CarouselItem[]>(\n    () => ext ?? DEFAULTS,\n  );\n  const items = ext ?? internal;\n  const [idx, setIdx] = useState(0);\n  const prevIdx = useRef(0);\n  const lastSound = useRef(0);\n  const scrollAccum = useRef(0);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dragStartY = useRef(0);\n  const dragStartIdx = useRef(0);\n\n  // Keep idx in bounds\n  const safeIdx = clamp(idx, 0, items.length - 1);\n\n  const go = useCallback(\n    (next: number) => {\n      const c = clamp(next, 0, items.length - 1);\n      if (c !== prevIdx.current && sound) tick(lastSound);\n      prevIdx.current = c;\n      setIdx(c);\n    },\n    [items.length, sound],\n  );\n\n  const dismiss = useCallback(\n    (id: string) => {\n      if (sound) tick(lastSound);\n      if (ext) {\n        onDismiss?.(id);\n      } else {\n        setInternal((p) => {\n          const next = p.filter((n) => n.id !== id);\n          // Adjust index if needed\n          const newIdx = Math.min(prevIdx.current, next.length - 1);\n          prevIdx.current = Math.max(0, newIdx);\n          setIdx(Math.max(0, newIdx));\n          return next;\n        });\n        onDismiss?.(id);\n      }\n    },\n    [ext, onDismiss, sound],\n  );\n\n  // Wheel navigation\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    const handler = (e: WheelEvent) => {\n      e.preventDefault();\n      scrollAccum.current += e.deltaY;\n      if (Math.abs(scrollAccum.current) >= 45) {\n        go(prevIdx.current + Math.sign(scrollAccum.current));\n        scrollAccum.current = 0;\n      }\n    };\n    el.addEventListener(\"wheel\", handler, { passive: false });\n    return () => el.removeEventListener(\"wheel\", handler);\n  }, [go]);\n\n  // Keyboard\n  useEffect(() => {\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowDown\" || e.key === \"ArrowRight\") {\n        e.preventDefault();\n        go(safeIdx + 1);\n      }\n      if (e.key === \"ArrowUp\" || e.key === \"ArrowLeft\") {\n        e.preventDefault();\n        go(safeIdx - 1);\n      }\n    };\n    const el = containerRef.current;\n    el?.addEventListener(\"keydown\", handler);\n    return () => el?.removeEventListener(\"keydown\", handler);\n  }, [go, safeIdx]);\n\n  const viewH = STEP * 5;\n\n  if (items.length === 0) {\n    return (\n      <div\n        className=\"nc\"\n        style={{ width: 360, padding: 32, textAlign: \"center\" }}\n      >\n        <style dangerouslySetInnerHTML={{ __html: CSS }} />\n        <p\n          style={{ fontSize: 13, color: `rgba(var(--nc-ink),.35)`, margin: 0 }}\n        >\n          No notifications\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"nc\"\n      style={{\n        width: 360,\n        background: \"var(--nc-bg)\",\n        border: \"1px solid var(--nc-border)\",\n        boxShadow: \"var(--nc-shadow)\",\n        borderRadius: 14,\n        backdropFilter: \"blur(16px)\",\n        WebkitBackdropFilter: \"blur(16px)\",\n        overflow: \"hidden\",\n      }}\n    >\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n\n      {/* Header */}\n      <div\n        style={{\n          padding: \"12px 16px 8px\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n        }}\n      >\n        <span\n          style={{\n            fontSize: 11,\n            fontWeight: 500,\n            color: `rgba(var(--nc-ink),.35)`,\n            letterSpacing: \"0.04em\",\n            textTransform: \"uppercase\",\n          }}\n        >\n          Notifications\n        </span>\n        <span\n          style={{\n            fontSize: 11,\n            fontWeight: 450,\n            color: `rgba(var(--nc-ink),.3)`,\n            fontVariantNumeric: \"tabular-nums\",\n          }}\n        >\n          {safeIdx + 1} / {items.length}\n        </span>\n      </div>\n\n      {/* Carousel viewport */}\n      <div\n        ref={containerRef}\n        tabIndex={0}\n        style={{\n          position: \"relative\",\n          height: viewH,\n          width: \"100%\",\n          outline: \"none\",\n          maskImage:\n            \"linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)\",\n          WebkitMaskImage:\n            \"linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)\",\n        }}\n        onPointerDown={(e) => {\n          dragStartY.current = e.clientY;\n          dragStartIdx.current = safeIdx;\n        }}\n        onPointerUp={(e) => {\n          const dy = e.clientY - dragStartY.current;\n          if (Math.abs(dy) > 20) {\n            go(dragStartIdx.current + (dy < 0 ? 1 : -1));\n          }\n        }}\n      >\n        <AnimatePresence mode=\"popLayout\">\n          {items.map((item, i) => {\n            const offset = i - safeIdx;\n            if (Math.abs(offset) > 3) return null;\n            const isFocused = i === safeIdx;\n            const dist = Math.abs(offset);\n            const prox = Math.max(0, 1 - dist / 3);\n            const titleA = 0.2 + prox * 0.68;\n            const bodyA = 0.12 + prox * 0.28;\n\n            return (\n              <CarouselRow\n                key={item.id}\n                item={item}\n                offset={offset}\n                isFocused={isFocused}\n                titleA={titleA}\n                bodyA={bodyA}\n                prox={prox}\n                viewH={viewH}\n                onDismiss={() => dismiss(item.id)}\n                onSelect={() => onSelect?.(item.id)}\n                sound={sound}\n                soundRef={lastSound}\n              />\n            );\n          })}\n        </AnimatePresence>\n      </div>\n\n      {/* Navigation dots */}\n      <div\n        style={{\n          display: \"flex\",\n          justifyContent: \"center\",\n          gap: 4,\n          padding: \"8px 16px 12px\",\n        }}\n      >\n        {items.map((_, i) => (\n          <button\n            key={i}\n            onClick={() => go(i)}\n            style={{\n              width: i === safeIdx ? 16 : 4,\n              height: 4,\n              borderRadius: 2,\n              border: \"none\",\n              padding: 0,\n              cursor: \"pointer\",\n              background: `rgba(var(--nc-ink),${i === safeIdx ? 0.4 : 0.12})`,\n              transition: \"width .25s cubic-bezier(.4,0,.2,1), background .2s\",\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/* ── Row sub-component ── */\n\nfunction CarouselRow({\n  item,\n  offset,\n  isFocused,\n  titleA,\n  bodyA,\n  prox,\n  viewH,\n  onDismiss,\n  onSelect,\n  sound,\n  soundRef,\n}: {\n  item: CarouselItem;\n  offset: number;\n  isFocused: boolean;\n  titleA: number;\n  bodyA: number;\n  prox: number;\n  viewH: number;\n  onDismiss: () => void;\n  onSelect: () => void;\n  sound: boolean;\n  soundRef: React.MutableRefObject<number>;\n}) {\n  const xRef = useRef(0);\n  const rowRef = useRef<HTMLDivElement>(null);\n  const zoneRef = useRef<HTMLDivElement>(null);\n  const passedRef = useRef(false);\n  const dragging = useRef(false);\n  const startX = useRef(0);\n\n  const y = viewH / 2 - ROW_H / 2 + offset * STEP;\n  const weight = Math.round(420 + prox * 120);\n\n  const paintZone = useCallback((dx: number) => {\n    const z = zoneRef.current;\n    if (!z) return;\n    const abs = Math.abs(dx);\n    const t = Math.min(1, abs / (DISMISS_THRESHOLD * 1.5));\n    if (dx < -10) {\n      z.style.background = `rgba(255,59,48,${t * 0.15})`;\n      z.style.opacity = \"1\";\n    } else if (dx > 10) {\n      z.style.background = `rgba(52,199,89,${t * 0.15})`;\n      z.style.opacity = \"1\";\n    } else {\n      z.style.opacity = \"0\";\n    }\n  }, []);\n\n  const onDown = useCallback(\n    (e: React.PointerEvent) => {\n      if (!isFocused) return;\n      e.stopPropagation();\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n      startX.current = e.clientX;\n      xRef.current = 0;\n      dragging.current = true;\n      passedRef.current = false;\n    },\n    [isFocused],\n  );\n\n  const onMove = useCallback(\n    (e: React.PointerEvent) => {\n      if (!dragging.current || !isFocused) return;\n      const dx = e.clientX - startX.current;\n      xRef.current = dx;\n      const row = rowRef.current;\n      if (row) row.style.transform = `translateX(${dx}px)`;\n      paintZone(dx);\n      if (!passedRef.current && Math.abs(dx) > DISMISS_THRESHOLD) {\n        passedRef.current = true;\n        if (sound) tick(soundRef);\n      }\n    },\n    [isFocused, paintZone, sound, soundRef],\n  );\n\n  const onUp = useCallback(() => {\n    if (!dragging.current) return;\n    dragging.current = false;\n    const dx = xRef.current;\n    const row = rowRef.current;\n\n    if (Math.abs(dx) > DISMISS_THRESHOLD) {\n      // Dismiss\n      const dir = Math.sign(dx);\n      if (row) {\n        animate(dx, dir * 400, {\n          type: \"spring\",\n          stiffness: 300,\n          damping: 30,\n          onUpdate: (v) => {\n            row.style.transform = `translateX(${v}px)`;\n            row.style.opacity = `${1 - Math.abs(v) / 400}`;\n          },\n          onComplete: onDismiss,\n        });\n      } else {\n        onDismiss();\n      }\n    } else {\n      // Snap back\n      if (row) {\n        animate(dx, 0, {\n          type: \"spring\",\n          stiffness: 500,\n          damping: 30,\n          onUpdate: (v) => {\n            row.style.transform = `translateX(${v}px)`;\n          },\n        });\n      }\n      paintZone(0);\n      if (Math.abs(dx) < 3) onSelect();\n    }\n  }, [onDismiss, onSelect, paintZone]);\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: y + 20 }}\n      animate={{ opacity: 1, y }}\n      exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.2 } }}\n      transition={SPRING}\n      style={{\n        position: \"absolute\",\n        left: 12,\n        right: 12,\n        height: ROW_H,\n      }}\n    >\n      {/* Action zone behind */}\n      <div\n        ref={zoneRef}\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          borderRadius: 10,\n          opacity: 0,\n          transition: \"background .06s\",\n          pointerEvents: \"none\",\n        }}\n      />\n\n      {/* Card */}\n      <div\n        ref={rowRef}\n        className={isFocused ? \"nc-row\" : undefined}\n        onPointerDown={onDown}\n        onPointerMove={onMove}\n        onPointerUp={onUp}\n        onLostPointerCapture={onUp}\n        style={{\n          position: \"relative\",\n          height: \"100%\",\n          padding: \"12px 14px\",\n          borderRadius: 10,\n          background: isFocused ? \"var(--nc-card-hi)\" : \"var(--nc-card)\",\n          border: `1px solid rgba(var(--nc-ink),${isFocused ? 0.06 : 0.03})`,\n          boxShadow: isFocused\n            ? \"0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03)\"\n            : \"none\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"center\",\n          gap: 3,\n          filter: `blur(${Math.max(0, (1 - prox) * 0.8)}px)`,\n          transition:\n            \"background .15s, border .15s, box-shadow .15s, filter .15s\",\n          willChange: \"transform\",\n          touchAction: \"none\",\n        }}\n      >\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n          <span\n            style={{\n              fontSize: 13,\n              fontWeight: weight,\n              color: `rgba(var(--nc-ink),${titleA})`,\n              letterSpacing: \"-0.01em\",\n              overflow: \"hidden\",\n              textOverflow: \"ellipsis\",\n              whiteSpace: \"nowrap\",\n              flex: 1,\n              transition: \"color .1s\",\n            }}\n          >\n            {item.title}\n          </span>\n          <span\n            style={{\n              fontSize: 11,\n              fontWeight: 400,\n              color: `rgba(var(--nc-ink),${bodyA})`,\n              flexShrink: 0,\n              fontVariantNumeric: \"tabular-nums\",\n            }}\n          >\n            {item.time}\n          </span>\n        </div>\n        <span\n          style={{\n            fontSize: 12,\n            fontWeight: 400,\n            color: `rgba(var(--nc-ink),${bodyA})`,\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n            transition: \"color .1s\",\n          }}\n        >\n          {item.body}\n        </span>\n\n        {/* Swipe hint for focused */}\n        {isFocused && (\n          <div\n            style={{\n              position: \"absolute\",\n              right: 14,\n              bottom: 6,\n              fontSize: 9,\n              fontWeight: 400,\n              color: `rgba(var(--nc-ink),.18)`,\n              letterSpacing: \"0.02em\",\n            }}\n          >\n            swipe to dismiss\n          </div>\n        )}\n      </div>\n    </motion.div>\n  );\n}\n\nexport default NotificationsCarousel;\n",
      "type": "registry:ui",
      "target": "components/ruixen/notifications-carousel.tsx"
    }
  ]
}