{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "event-scheduler",
  "type": "registry:ui",
  "title": "Event Scheduler",
  "description": "Inline timeline scheduler — tap a time, type a title, press Enter. Spring animations, sorted list, sound feedback.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/event-scheduler.tsx",
      "content": "\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Event Scheduler — inline timeline creation.\n *\n * Today's events at a glance. Tap a time, type a title,\n * press Enter. The event springs into the list. Delete\n * with a tap. No forms, no modals, no dropdowns.\n *\n * The schedule is the interface.\n */\n\n/* ── Types ── */\n\nexport interface SchedulerEvent {\n  id: string;\n  title: string;\n  hour: number;\n  minute: number;\n}\n\nexport interface EventSchedulerProps {\n  events?: SchedulerEvent[];\n  onAdd?: (event: SchedulerEvent) => void;\n  onRemove?: (id: string) => void;\n  sound?: boolean;\n}\n\n/* ── Constants ── */\n\nconst HOURS = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];\nconst MINUTES = [0, 15, 30, 45];\n\n/* ── Helpers ── */\n\nfunction fmtHour(h: number): string {\n  if (h === 0 || h === 12) return \"12\";\n  return h > 12 ? String(h - 12) : String(h);\n}\n\nfunction fmtPeriod(h: number): string {\n  return h >= 12 ? \"pm\" : \"am\";\n}\n\nfunction fmtTime(h: number, m: number): string {\n  return `${fmtHour(h)}:${String(m).padStart(2, \"0\")} ${fmtPeriod(h)}`;\n}\n\nfunction sortKey(e: SchedulerEvent): number {\n  return e.hour * 60 + e.minute;\n}\n\n/* ── Audio ── */\n\nlet _ctx: AudioContext | null = null;\nlet _buf: AudioBuffer | null = null;\n\nfunction audioCtx() {\n  if (!_ctx) {\n    _ctx = new (window.AudioContext ||\n      (window as unknown as { webkitAudioContext: typeof AudioContext })\n        .webkitAudioContext)();\n  }\n  if (_ctx.state === \"suspended\") _ctx.resume();\n  return _ctx;\n}\n\nfunction ensureBuf(ac: AudioContext): AudioBuffer {\n  if (_buf && _buf.sampleRate === ac.sampleRate) return _buf;\n  const rate = ac.sampleRate;\n  const len = Math.floor(rate * 0.003);\n  const buf = ac.createBuffer(1, len, rate);\n  const ch = buf.getChannelData(0);\n  for (let i = 0; i < len; i++) {\n    const t = i / len;\n    ch[i] = (Math.random() * 2 - 1) * (1 - t) ** 4;\n  }\n  _buf = buf;\n  return buf;\n}\n\nfunction playTick(last: React.MutableRefObject<number>) {\n  const now = performance.now();\n  if (now - last.current < 80) return;\n  last.current = now;\n  try {\n    const ac = audioCtx();\n    const buf = ensureBuf(ac);\n    const src = ac.createBufferSource();\n    const gain = ac.createGain();\n    src.buffer = buf;\n    src.playbackRate.value = 1.15;\n    gain.gain.value = 0.03;\n    src.connect(gain);\n    gain.connect(ac.destination);\n    src.start();\n  } catch {\n    /* silent */\n  }\n}\n\n/* ── Component ── */\n\nexport function EventScheduler({\n  events: initialEvents = [],\n  onAdd,\n  onRemove,\n  sound = true,\n}: EventSchedulerProps) {\n  const [events, setEvents] = useState<SchedulerEvent[]>(\n    [...initialEvents].sort((a, b) => sortKey(a) - sortKey(b)),\n  );\n  const [title, setTitle] = useState(\"\");\n  const [selHour, setSelHour] = useState(10);\n  const [selMinute, setSelMinute] = useState(0);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const lastSound = useRef(0);\n\n  function tick() {\n    if (sound) playTick(lastSound);\n  }\n\n  function handleAdd() {\n    const trimmed = title.trim();\n    if (!trimmed) return;\n    tick();\n    const ev: SchedulerEvent = {\n      id: `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,\n      title: trimmed,\n      hour: selHour,\n      minute: selMinute,\n    };\n    setEvents([...events, ev].sort((a, b) => sortKey(a) - sortKey(b)));\n    onAdd?.(ev);\n    setTitle(\"\");\n    inputRef.current?.focus();\n    /* Scroll the new event into view after render */\n    requestAnimationFrame(() => {\n      const el = listRef.current?.querySelector(`[data-eid=\"${ev.id}\"]`);\n      if (el) {\n        el.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n      }\n    });\n  }\n\n  function handleRemove(id: string) {\n    tick();\n    setEvents((prev) => prev.filter((e) => e.id !== id));\n    onRemove?.(id);\n  }\n\n  const today = new Date();\n  const dateStr = today.toLocaleDateString(\"en-US\", {\n    weekday: \"short\",\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return (\n    <div\n      className=\"rounded-[14px] border border-neutral-200 bg-neutral-50 overflow-hidden dark:border-neutral-800 dark:bg-neutral-950\"\n      style={{\n        maxWidth: 380,\n        width: \"100%\",\n      }}\n    >\n      {/* Header */}\n      <div\n        style={{\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          alignItems: \"baseline\",\n          padding: \"20px 20px 14px\",\n        }}\n      >\n        <span\n          className=\"text-neutral-900 dark:text-neutral-100\"\n          style={{\n            fontSize: 15,\n            fontWeight: 590,\n            letterSpacing: \"-0.01em\",\n          }}\n        >\n          Today\n        </span>\n        <span\n          className=\"text-neutral-400 dark:text-neutral-600\"\n          style={{\n            fontSize: 12,\n          }}\n        >\n          {dateStr}\n        </span>\n      </div>\n\n      {/* Event list */}\n      <div\n        ref={listRef}\n        style={{\n          padding: \"0 20px\",\n          minHeight: 48,\n          maxHeight: 200,\n          overflowY: \"auto\",\n          scrollbarWidth: \"none\",\n          maskImage:\n            \"linear-gradient(to bottom, transparent, black 8px, black calc(100% - 8px), transparent)\",\n          WebkitMaskImage:\n            \"linear-gradient(to bottom, transparent, black 8px, black calc(100% - 8px), transparent)\",\n        }}\n      >\n        {events.length === 0 && (\n          <div\n            className=\"text-neutral-300 dark:text-neutral-700\"\n            style={{\n              fontSize: 13,\n              padding: \"8px 0 14px\",\n            }}\n          >\n            Nothing scheduled\n          </div>\n        )}\n\n        <AnimatePresence mode=\"popLayout\">\n          {events.map((event) => (\n            <motion.div\n              key={event.id}\n              data-eid={event.id}\n              layout\n              initial={{ opacity: 0, y: -8 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, x: -16 }}\n              transition={{ type: \"spring\", damping: 25, stiffness: 350 }}\n              className=\"border-b border-neutral-100 dark:border-neutral-800/50\"\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 14,\n                padding: \"10px 0\",\n              }}\n            >\n              {/* Time */}\n              <span\n                className=\"text-neutral-400 dark:text-neutral-600\"\n                style={{\n                  fontSize: 12,\n                  fontWeight: 500,\n                  minWidth: 58,\n                  flexShrink: 0,\n                  fontVariantNumeric: \"tabular-nums\",\n                }}\n              >\n                {fmtTime(event.hour, event.minute)}\n              </span>\n\n              {/* Title */}\n              <span\n                className=\"text-neutral-600 dark:text-neutral-400\"\n                style={{\n                  fontSize: 13,\n                  fontWeight: 450,\n                  flex: 1,\n                  overflow: \"hidden\",\n                  textOverflow: \"ellipsis\",\n                  whiteSpace: \"nowrap\",\n                }}\n              >\n                {event.title}\n              </span>\n\n              {/* Delete */}\n              <motion.button\n                whileTap={{ scale: 0.85 }}\n                onClick={() => handleRemove(event.id)}\n                className=\"text-neutral-200 dark:text-neutral-800 hover:text-red-500 dark:hover:text-red-400\"\n                style={{\n                  background: \"transparent\",\n                  border: \"none\",\n                  cursor: \"pointer\",\n                  padding: \"2px 0\",\n                  fontSize: 14,\n                  lineHeight: 1,\n                  transition: \"color 0.15s\",\n                }}\n              >\n                ×\n              </motion.button>\n            </motion.div>\n          ))}\n        </AnimatePresence>\n      </div>\n\n      {/* Creation zone */}\n      <div\n        className=\"border-t border-neutral-200 dark:border-neutral-800\"\n        style={{\n          marginTop: 4,\n          padding: \"14px 20px 16px\",\n        }}\n      >\n        {/* Input row */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 10,\n          }}\n        >\n          <input\n            ref={inputRef}\n            value={title}\n            onChange={(e) => setTitle(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\") {\n                e.preventDefault();\n                handleAdd();\n              }\n            }}\n            placeholder=\"New event…\"\n            className=\"text-neutral-600 dark:text-neutral-400 placeholder:text-neutral-400 dark:placeholder:text-neutral-600\"\n            style={{\n              flex: 1,\n              background: \"transparent\",\n              border: \"none\",\n              outline: \"none\",\n              fontSize: 13,\n              fontWeight: 400,\n              fontFamily: \"inherit\",\n            }}\n          />\n          <motion.button\n            whileTap={{ scale: 0.9 }}\n            onClick={handleAdd}\n            className={cn(\n              \"transition-colors duration-150\",\n              title.trim()\n                ? \"text-neutral-500 dark:text-neutral-500\"\n                : \"text-neutral-200 dark:text-neutral-800\",\n            )}\n            style={{\n              background: \"transparent\",\n              border: \"none\",\n              cursor: title.trim() ? \"pointer\" : \"default\",\n              fontSize: 13,\n              fontWeight: 500,\n              padding: \"4px 0\",\n            }}\n          >\n            Add\n          </motion.button>\n        </div>\n\n        {/* Selected time hint */}\n        <div\n          className=\"text-neutral-300 dark:text-neutral-700\"\n          style={{\n            fontSize: 11,\n            marginTop: 10,\n            marginBottom: 6,\n            fontVariantNumeric: \"tabular-nums\",\n          }}\n        >\n          {fmtTime(selHour, selMinute)}\n        </div>\n\n        {/* Hours */}\n        <div\n          style={{\n            display: \"flex\",\n            gap: 1,\n            overflowX: \"auto\",\n            scrollbarWidth: \"none\",\n          }}\n        >\n          {HOURS.map((h) => (\n            <button\n              key={h}\n              onClick={() => {\n                tick();\n                setSelHour(h);\n              }}\n              className={cn(\n                \"transition-colors duration-150\",\n                selHour === h\n                  ? \"bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300\"\n                  : \"bg-transparent text-neutral-300 dark:text-neutral-700\",\n              )}\n              style={{\n                padding: \"5px 7px\",\n                borderRadius: 6,\n                fontSize: 11,\n                fontWeight: 500,\n                fontVariantNumeric: \"tabular-nums\",\n                cursor: \"pointer\",\n                border: \"none\",\n                flexShrink: 0,\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {fmtHour(h)}\n              <span style={{ fontSize: 9, marginLeft: 1, opacity: 0.6 }}>\n                {fmtPeriod(h)}\n              </span>\n            </button>\n          ))}\n        </div>\n\n        {/* Minutes */}\n        <div\n          style={{\n            display: \"flex\",\n            gap: 1,\n            marginTop: 3,\n          }}\n        >\n          {MINUTES.map((m) => (\n            <button\n              key={m}\n              onClick={() => {\n                tick();\n                setSelMinute(m);\n              }}\n              className={cn(\n                \"transition-colors duration-150\",\n                selMinute === m\n                  ? \"bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300\"\n                  : \"bg-transparent text-neutral-300 dark:text-neutral-700\",\n              )}\n              style={{\n                padding: \"5px 8px\",\n                borderRadius: 6,\n                fontSize: 11,\n                fontWeight: 500,\n                fontVariantNumeric: \"tabular-nums\",\n                cursor: \"pointer\",\n                border: \"none\",\n              }}\n            >\n              :{String(m).padStart(2, \"0\")}\n            </button>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default EventScheduler;\n",
      "type": "registry:ui",
      "target": "components/ruixen/event-scheduler.tsx"
    }
  ]
}