{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "server-rack",
  "type": "registry:component",
  "title": "Server Rack",
  "description": "A rack of humming units with blinking status lights – hover one and it slides forward, its bezel gliding off to show the drives inside.",
  "categories": [
    "illustration",
    "Objects"
  ],
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/devl/server-rack.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion, useInView, useReducedMotion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ServerRackHue = \"sky\" | \"emerald\" | \"amber\" | \"violet\" | \"rose\" | \"orange\" | \"indigo\" | \"teal\";\n\nconst hues: Record<ServerRackHue, string> = {\n  sky: \"[--hue:var(--color-sky-500)]\",\n  emerald: \"[--hue:var(--color-emerald-500)]\",\n  amber: \"[--hue:var(--color-amber-500)]\",\n  violet: \"[--hue:var(--color-violet-500)]\",\n  rose: \"[--hue:var(--color-rose-500)]\",\n  orange: \"[--hue:var(--color-orange-500)]\",\n  indigo: \"[--hue:var(--color-indigo-500)]\",\n  teal: \"[--hue:var(--color-teal-500)]\",\n};\n\nexport interface ServerRackUnit {\n  name: string;\n  kind?: \"switch\" | \"server\" | \"storage\";\n  drives?: number;\n  detail?: string;\n  temp?: number;\n  status?: \"healthy\" | \"degraded\";\n  failing?: number;\n}\n\nexport interface ServerRackProps {\n  units?: ServerRackUnit[];\n  label?: string;\n  hue?: ServerRackHue;\n  autoPeek?: boolean;\n  className?: string;\n}\n\nconst defaultUnits: ServerRackUnit[] = [\n  { name: \"edge-sw-01\", kind: \"switch\" },\n  { name: \"app-01\", kind: \"server\", drives: 4, detail: \"4 × 1.9 TB NVMe\", temp: 34 },\n  { name: \"app-02\", kind: \"server\", drives: 4, detail: \"4 × 1.9 TB NVMe\", temp: 36 },\n  { name: \"vault-01\", kind: \"storage\", drives: 12, detail: \"12 × 16 TB\", temp: 39 },\n  { name: \"vault-02\", kind: \"storage\", drives: 12, detail: \"12 × 16 TB\", temp: 41, status: \"degraded\", failing: 6 },\n];\n\nconst pull = { type: \"spring\", stiffness: 380, damping: 32 } as const;\n\nfunction blink(seed: number) {\n  const d = 1.1 + ((seed * 37) % 17) / 10;\n  return {\n    animate: { opacity: [1, 0.25, 1, 1, 0.35, 1] },\n    transition: {\n      duration: d,\n      delay: ((seed * 53) % 11) / 10,\n      ease: \"linear\" as const,\n      repeat: Number.POSITIVE_INFINITY,\n      times: [0, 0.12, 0.24, 0.6, 0.7, 0.8],\n    },\n  };\n}\n\nfunction Led({ className, seed, still }: { className: string; seed?: number; still?: boolean }) {\n  const anim = seed === undefined || still ? null : blink(seed);\n  return (\n    <motion.span\n      aria-hidden\n      className={cn(\"size-1.5 shrink-0 rounded-full shadow-[0_0_6px_currentColor]\", className)}\n      {...(anim ?? {})}\n    />\n  );\n}\n\nfunction Drives({ count, failing, seed, still }: { count: number; failing?: number; seed: number; still: boolean }) {\n  const cols = 4;\n  const rows = Math.ceil(count / cols);\n  return (\n    <div\n      className=\"grid size-full gap-[3px] p-[3px]\"\n      style={{ gridTemplateColumns: `repeat(${cols}, 1fr)`, gridTemplateRows: `repeat(${rows}, 1fr)` }}\n    >\n      {Array.from({ length: count }, (_, i) => (\n        <div\n          className=\"flex min-h-0 items-center gap-1 rounded-[3px] border border-foreground/10 bg-(--bay) px-1 shadow-[inset_0_1px_0_--theme(--color-white/6%)]\"\n          key={i}\n        >\n          <Led\n            className={i === failing ? \"bg-warning text-warning\" : \"bg-(--hue) text-(--hue)\"}\n            seed={i === failing ? undefined : seed * 13 + i}\n            still={still}\n          />\n          <span className=\"h-[3px] flex-1 rounded-full bg-foreground/12\" />\n          <span className=\"h-full max-h-2.5 w-[3px] rounded-full bg-foreground/15\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction Faceplate({ unit, index, still }: { unit: ServerRackUnit; index: number; still: boolean }) {\n  if (unit.kind === \"switch\") {\n    return (\n      <div className=\"flex h-full items-center gap-2 px-2.5\">\n        <span className=\"w-16 shrink-0 truncate font-mono text-[9px] text-muted-foreground\">{unit.name}</span>\n        <div className=\"grid flex-1 grid-cols-12 gap-[3px]\">\n          {Array.from({ length: 12 }, (_, i) => (\n            <div\n              className=\"relative flex h-3 items-start justify-center rounded-[2px] bg-(--bay) ring-1 ring-foreground/10 ring-inset\"\n              key={i}\n            >\n              {i % 5 !== 3 && (\n                <Led className=\"mt-[2px] size-[3px] bg-(--hue) text-(--hue) shadow-none\" seed={index * 20 + i} still={still} />\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n  return (\n    <div className=\"flex h-full items-center gap-2 px-2.5\">\n      <span className=\"w-16 shrink-0 truncate font-mono text-[9px] text-muted-foreground\">{unit.name}</span>\n      <div\n        className=\"h-[calc(100%-10px)] flex-1 rounded-[3px] bg-[repeating-linear-gradient(90deg,var(--slit)_0_1.5px,transparent_1.5px_4.5px)] opacity-80\"\n      />\n      <div className=\"flex shrink-0 items-center gap-1\">\n        <Led className=\"bg-success text-success\" />\n        <Led className=\"bg-(--hue) text-(--hue)\" seed={index * 7} still={still} />\n        <Led\n          className={unit.status === \"degraded\" ? \"bg-warning text-warning\" : \"bg-foreground/15 text-transparent shadow-none\"}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction useCalmMotion() {\n  const prefers = useReducedMotion();\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n  return mounted && !!prefers;\n}\n\nexport function ServerRack({\n  units = defaultUnits,\n  label = \"rack-a3\",\n  hue = \"sky\",\n  autoPeek = true,\n  className,\n}: ServerRackProps) {\n  const reduce = useCalmMotion();\n  const root = useRef<HTMLDivElement>(null);\n  const inView = useInView(root);\n  const [hovered, setHovered] = useState<number | null>(null);\n  const [pinned, setPinned] = useState<number | null>(null);\n  const [peek, setPeek] = useState<number | null>(null);\n  const [inside, setInside] = useState(false);\n\n  const openable = units.map((u, i) => (u.kind === \"switch\" ? -1 : i)).filter((i) => i >= 0);\n  const interacting = inside || hovered !== null || pinned !== null;\n\n  useEffect(() => {\n    if (!autoPeek || !inView || interacting || openable.length === 0) {\n      setPeek(null);\n      return;\n    }\n    let step = 0;\n    let timer: ReturnType<typeof setTimeout>;\n    const tick = (open: boolean) => {\n      if (open) {\n        setPeek(openable[(openable.length - 1 + step) % openable.length]);\n        step += 2;\n        timer = setTimeout(() => tick(false), 2600);\n      } else {\n        setPeek(null);\n        timer = setTimeout(() => tick(true), 2200);\n      }\n    };\n    timer = setTimeout(() => tick(true), 1400);\n    return () => clearTimeout(timer);\n  }, [autoPeek, inView, interacting, openable.length]);\n\n  const open = hovered ?? pinned ?? peek;\n  const active = open === null ? null : units[open];\n  const totalDrives = units.reduce((n, u) => n + (u.kind === \"switch\" ? 0 : (u.drives ?? 0)), 0);\n  const degraded = units.filter((u) => u.status === \"degraded\").length;\n\n  return (\n    <div\n      ref={root}\n      className={cn(\n        \"relative w-full max-w-[440px] overflow-hidden rounded-2xl border bg-card p-4 shadow-xs/5 sm:p-6\",\n        \"[--bay:color-mix(in_oklab,var(--color-foreground)_9%,var(--color-card))] [--plate:color-mix(in_oklab,var(--color-foreground)_3%,var(--color-card))] [--rack:color-mix(in_oklab,var(--color-foreground)_7%,var(--color-card))] [--slit:color-mix(in_oklab,var(--color-foreground)_16%,transparent)]\",\n        hues[hue],\n        className,\n      )}\n    >\n      <div\n        aria-hidden\n        className=\"dot-grid pointer-events-none absolute inset-0 opacity-50 [mask-image:radial-gradient(closest-side,black,transparent)]\"\n      />\n\n      <div className=\"relative mx-auto w-full max-w-[280px]\">\n        <div\n          className=\"relative rounded-xl border bg-(--rack) px-5 py-3 shadow-[inset_0_1px_0_--theme(--color-white/8%)]\"\n          onPointerEnter={(e) => e.pointerType === \"mouse\" && setInside(true)}\n          onPointerLeave={() => {\n            setInside(false);\n            setHovered(null);\n          }}\n        >\n          {[\"left-1.5\", \"right-1.5\"].map((side) => (\n            <div\n              aria-hidden\n              className={cn(\n                \"absolute inset-y-2 w-2 rounded-[3px] bg-(--plate) bg-[radial-gradient(circle,var(--slit)_1.2px,transparent_1.6px)] bg-size-[8px_9px] bg-center ring-1 ring-foreground/8\",\n                side,\n              )}\n              key={side}\n            />\n          ))}\n          <ul aria-label={`${label} units`} className=\"relative flex flex-col gap-1\">\n            {units.map((unit, i) => {\n              const canOpen = unit.kind !== \"switch\";\n              const isOpen = open === i;\n              const tall = unit.kind === \"storage\";\n              const still = !!reduce || !inView;\n              const body = (\n                <div className=\"absolute inset-0 overflow-hidden rounded-[inherit]\">\n                  <div aria-hidden className=\"absolute inset-0 rounded-[inherit] bg-(--rack)\">\n                    {canOpen && (\n                      <Drives count={unit.drives ?? 4} failing={unit.failing} seed={i} still={still || !isOpen} />\n                    )}\n                  </div>\n                  <motion.div\n                    animate={isOpen ? (reduce ? { opacity: 0 } : { opacity: 1, x: \"101%\" }) : { opacity: 1, x: 0 }}\n                    aria-hidden\n                    className=\"absolute inset-0 rounded-[inherit] border border-foreground/10 bg-(--plate) shadow-[inset_0_1px_0_--theme(--color-white/10%)]\"\n                    initial={false}\n                    transition={reduce ? { duration: 0.15 } : pull}\n                  >\n                    <Faceplate index={i} still={still} unit={unit} />\n                  </motion.div>\n                </div>\n              );\n              return (\n                <motion.li\n                  animate={\n                    isOpen && !reduce\n                      ? { scale: 1.035, y: -1, boxShadow: \"0 8px 18px -8px rgb(0 0 0 / 0.4)\" }\n                      : { scale: 1, y: 0, boxShadow: \"0 0 0 0 rgb(0 0 0 / 0)\" }\n                  }\n                  className={cn(\"relative rounded-[5px]\", tall ? \"h-14\" : \"h-[26px]\", isOpen ? \"z-10\" : \"z-0\")}\n                  initial={false}\n                  key={unit.name}\n                  transition={pull}\n                >\n                  {canOpen ? (\n                    <button\n                      aria-expanded={isOpen}\n                      aria-label={`${unit.name}${unit.detail ? `, ${unit.detail}` : \"\"}: ${isOpen ? \"hide\" : \"show\"} drives`}\n                      className=\"absolute inset-0 cursor-pointer rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-(--rack)\"\n                      onBlur={() => setPinned((p) => (p === i ? null : p))}\n                      onClick={() => setPinned((p) => (p === i ? null : i))}\n                      onFocus={(e) => e.currentTarget.matches(\":focus-visible\") && setPinned(i)}\n                      onPointerEnter={(e) => e.pointerType === \"mouse\" && setHovered(i)}\n                      onPointerLeave={(e) => e.pointerType === \"mouse\" && setHovered((h) => (h === i ? null : h))}\n                      type=\"button\"\n                    >\n                      {body}\n                    </button>\n                  ) : (\n                    <div className=\"absolute inset-0 rounded-[inherit]\">{body}</div>\n                  )}\n                </motion.li>\n              );\n            })}\n          </ul>\n        </div>\n        <div aria-hidden className=\"flex justify-between px-4\">\n          <span className=\"h-1.5 w-6 rounded-b-[3px] bg-foreground/15\" />\n          <span className=\"h-1.5 w-6 rounded-b-[3px] bg-foreground/15\" />\n        </div>\n\n        <div className=\"relative mt-3 h-5 overflow-hidden\" aria-live=\"polite\">\n          <AnimatePresence initial={false} mode=\"popLayout\">\n            <motion.div\n              animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n              className=\"absolute inset-0 flex items-center justify-between gap-3 text-xs\"\n              exit={{ opacity: 0, y: reduce ? 0 : -8, filter: reduce ? \"blur(0px)\" : \"blur(2px)\" }}\n              initial={{ opacity: 0, y: reduce ? 0 : 8, filter: reduce ? \"blur(0px)\" : \"blur(2px)\" }}\n              key={active?.name ?? \"summary\"}\n              transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}\n            >\n              <span className=\"flex min-w-0 items-center gap-1.5\">\n                <span className=\"shrink-0 whitespace-nowrap font-medium font-mono text-foreground\">{active?.name ?? label}</span>\n                <span className=\"truncate text-muted-foreground tabular-nums\">\n                  {active\n                    ? [active.detail, active.temp !== undefined ? `${active.temp} °C` : null].filter(Boolean).join(\" · \")\n                    : `${units.length} units · ${totalDrives} drives`}\n                </span>\n              </span>\n              <span\n                className={cn(\n                  \"flex shrink-0 items-center gap-1.5 font-medium\",\n                  (active ? active.status === \"degraded\" : degraded > 0) ? \"text-warning-foreground\" : \"text-success-foreground\",\n                )}\n              >\n                <span\n                  className={cn(\n                    \"size-1.5 rounded-full\",\n                    (active ? active.status === \"degraded\" : degraded > 0) ? \"bg-warning\" : \"bg-success\",\n                  )}\n                />\n                {active\n                  ? active.status === \"degraded\"\n                    ? active.failing !== undefined\n                      ? \"Rebuilding\"\n                      : \"Degraded\"\n                    : \"Healthy\"\n                  : degraded > 0\n                    ? `${degraded} degraded`\n                    : \"All healthy\"}\n              </span>\n            </motion.div>\n          </AnimatePresence>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}