{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "casement", "type": "registry:ui", "title": "Casement", "description": "A list or grid of dark-glass cards that morph into a centered overlay via a genuine shared-element FLIP — media, title, and action travel continuously, radii stay unsheared, the frame overshoots ~1% and settles, and body copy fades up only after it lands. Full dialog semantics with focus trap, Escape, and outside-click; reduced motion swaps instantly.", "dependencies": [ "motion" ], "registryDependencies": [ "https://crucibleui.com/r/use-reduced-motion.json" ], "files": [ { "path": "registry/default/cards/casement/casement.tsx", "type": "registry:ui", "target": "components/crucible/casement.tsx", "content": "\"use client\";\n\nimport { AnimatePresence, motion, type Transition } from \"motion/react\";\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\n/** A single expandable entry in a {@link Casement}. */\nexport interface CasementItem {\n /** Stable, unique id — drives the shared-element `layoutId`s and controlled state. */\n id: string;\n /** Headline shown collapsed and expanded — travels through the morph. */\n title: string;\n /** Secondary line under the title (artist, category, timestamp…). */\n meta?: string;\n /** Optional media URL. When omitted, a deterministic dark gradient stands in. */\n image?: string;\n /** Alt text for `image`. Decorative media should pass `\"\"`. */\n imageAlt?: string;\n /** Accent hex used to tint the placeholder gradient (and the media crossfade). */\n accent?: string;\n /** Label for the action control. @default \"View\" */\n action?: string;\n /** When set, the expanded action renders as a real link to this href. */\n actionHref?: string;\n /** Rich body copy revealed *after* the morph settles — never participates in the FLIP. */\n content?: React.ReactNode;\n}\n\nexport interface CasementProps {\n /** The cards to render. Each expands into a centered overlay on click. */\n items: CasementItem[];\n /** Collapsed arrangement. @default \"list\" */\n layout?: \"list\" | \"grid\";\n /** Controlled active id (`null` = closed). Omit for uncontrolled use. */\n activeId?: string | null;\n /** Initial active id in uncontrolled mode. @default null */\n defaultActiveId?: string | null;\n /** Fires whenever the active card changes (open with an id, close with `null`). */\n onActiveChange?: (id: string | null) => void;\n /** Called when a non-link action button is pressed in the expanded card. */\n onAction?: (item: CasementItem) => void;\n /** Backdrop dim opacity, 0–1. @default 0.62 */\n backdropOpacity?: number;\n /** Backdrop blur radius in px (the \"breath of blur\"). @default 8 */\n backdropBlur?: number;\n /** Expanded card max width in px. @default 460 */\n expandedMaxWidth?: number;\n /** Close when the backdrop is clicked. @default true */\n closeOnOutsideClick?: boolean;\n /** Close on the Escape key. @default true */\n closeOnEscape?: boolean;\n /** Morph the media through the FLIP. When false it crossfades instead. @default true */\n morphMedia?: boolean;\n /** Single cool accent hex for focus rings / hover. @default \"#93c5fd\" */\n accent?: string;\n /** Extra classes for the collapsed list/grid wrapper. */\n className?: string;\n}\n\n/** FNV-1a — deterministic so the placeholder gradient is identical across SSR/CSR. */\nfunction hashString(input: string): number {\n let h = 2166136261;\n for (let i = 0; i < input.length; i++) {\n h ^= input.charCodeAt(i);\n h = Math.imul(h, 16777619);\n }\n return h >>> 0;\n}\n\nfunction mediaBackground(item: CasementItem): string {\n if (item.accent) return `linear-gradient(140deg, ${item.accent} -12%, #0a0c11 118%)`;\n const h = hashString(item.id) % 360;\n return `linear-gradient(140deg, hsl(${h} 22% 33%) -12%, hsl(${(h + 32) % 360} 20% 11%) 118%)`;\n}\n\nconst FOCUSABLE =\n 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Casement — a list or grid of dark-glass cards where clicking one performs a\n * genuine shared-element morph: the media, title, and action travel continuously\n * from their collapsed seats into a centered overlay card. It overshoots ~1% and\n * settles like a sash meeting its frame, corner radii stay continuous through the\n * FLIP (no shearing), the backdrop dims and gains a breath of blur, siblings\n * recede, and body copy fades up only *after* the frame lands — kept crisp. Full\n * dialog semantics: focus moves in and traps, Escape and outside-click close,\n * focus returns to the originating card. Reduced motion swaps instantly with a\n * plain crossfade and no blur animation.\n */\nexport function Casement({\n items,\n layout = \"list\",\n activeId,\n defaultActiveId = null,\n onActiveChange,\n onAction,\n backdropOpacity = 0.62,\n backdropBlur = 8,\n expandedMaxWidth = 460,\n closeOnOutsideClick = true,\n closeOnEscape = true,\n morphMedia = true,\n accent = \"#93c5fd\",\n className,\n}: CasementProps) {\n const reducedMotion = useReducedMotion();\n const uid = React.useId().replace(/[:]/g, \"\");\n\n // --- controlled / uncontrolled active state ------------------------------\n const isControlled = activeId !== undefined;\n const [uncontrolled, setUncontrolled] = React.useState(defaultActiveId);\n const currentId = isControlled ? activeId! : uncontrolled;\n const activeItem = React.useMemo(\n () => items.find((it) => it.id === currentId) ?? null,\n [items, currentId]\n );\n\n const triggerRef = React.useRef(null);\n const dialogRef = React.useRef(null);\n const [landed, setLanded] = React.useState(false);\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => setMounted(true), []);\n\n const setActive = React.useCallback(\n (id: string | null) => {\n if (!isControlled) setUncontrolled(id);\n onActiveChange?.(id);\n },\n [isControlled, onActiveChange]\n );\n\n const open = React.useCallback(\n (id: string, node: HTMLButtonElement) => {\n triggerRef.current = node;\n setLanded(false);\n setActive(id);\n },\n [setActive]\n );\n\n const close = React.useCallback(() => {\n setActive(null);\n // Return focus to the card that opened this dialog, once React has committed.\n const el = triggerRef.current;\n requestAnimationFrame(() => el?.focus());\n }, [setActive]);\n\n // Reset the body-copy reveal whenever the active card changes. If the layout\n // animation never reports completion (e.g. opened on mount with nothing to\n // morph from), reveal the body anyway so it can never stay hidden.\n React.useEffect(() => {\n if (!activeItem) {\n setLanded(false);\n return;\n }\n const t = window.setTimeout(() => setLanded(true), 900);\n return () => window.clearTimeout(t);\n }, [activeItem]);\n\n // --- focus trap + Escape --------------------------------------------------\n React.useEffect(() => {\n if (!activeItem) return;\n const dialog = dialogRef.current;\n const raf = requestAnimationFrame(() => dialog?.focus());\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n if (closeOnEscape) {\n e.preventDefault();\n e.stopPropagation();\n close();\n }\n return;\n }\n if (e.key !== \"Tab\" || !dialog) return;\n const focusable = Array.from(\n dialog.querySelectorAll(FOCUSABLE)\n ).filter((el) => el.offsetParent !== null || el === document.activeElement);\n if (focusable.length === 0) {\n e.preventDefault();\n return;\n }\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n const active = document.activeElement;\n if (e.shiftKey) {\n if (active === first || active === dialog) {\n e.preventDefault();\n last.focus();\n }\n } else if (active === last) {\n e.preventDefault();\n first.focus();\n }\n };\n\n document.addEventListener(\"keydown\", onKeyDown, true);\n return () => {\n cancelAnimationFrame(raf);\n document.removeEventListener(\"keydown\", onKeyDown, true);\n };\n }, [activeItem, closeOnEscape, close]);\n\n // --- scroll lock (scrollbar-compensated, no layout jump) ------------------\n React.useEffect(() => {\n if (!activeItem) return;\n const { body, documentElement: html } = document;\n const gap = window.innerWidth - html.clientWidth;\n const prevOverflow = body.style.overflow;\n const prevPad = body.style.paddingRight;\n body.style.overflow = \"hidden\";\n if (gap > 0) body.style.paddingRight = `${gap}px`;\n return () => {\n body.style.overflow = prevOverflow;\n body.style.paddingRight = prevPad;\n };\n }, [activeItem]);\n\n // --- transitions ----------------------------------------------------------\n const morphTransition: Transition = reducedMotion\n ? { duration: 0 }\n : { type: \"spring\", stiffness: 330, damping: 30, mass: 0.9 };\n\n const idFor = (kind: string, itemId: string) => `${uid}-${kind}-${itemId}`;\n\n const isList = layout === \"list\";\n\n return (\n \n {/* Collapsed cells. The whole cell is a real button; the inner media /\n title / action are decorative shared elements that morph. */}\n \n {items.map((item) => {\n const isActive = item.id === currentId;\n return (\n open(item.id, e.currentTarget)}\n aria-haspopup=\"dialog\"\n aria-expanded={isActive}\n aria-label={`${item.title}${item.meta ? `, ${item.meta}` : \"\"} — expand`}\n transition={morphTransition}\n style={{ borderRadius: 16 }}\n // Hide the collapsed cell while it is the active (morphed) card so\n // the grid keeps its slot but nothing double-renders behind the dialog.\n animate={{ opacity: isActive ? 0 : 1 }}\n className={cn(\n \"group relative overflow-hidden border border-white/10 bg-white/[0.035] text-left outline-none\",\n \"transition-colors hover:border-white/20 hover:bg-white/[0.06]\",\n \"focus-visible:border-[var(--casement-accent)] focus-visible:ring-1 focus-visible:ring-[var(--casement-accent)]\",\n isList ? \"flex items-center gap-4 p-2.5\" : \"flex flex-col\"\n )}\n >\n \n \n \n {item.title}\n \n {item.meta ? (\n \n {item.meta}\n \n ) : null}\n \n \n {item.action ?? \"View\"}\n \n \n );\n })}\n \n\n {/* One overlay portal for the expanded card + backdrop. */}\n {mounted &&\n createPortal(\n \n {activeItem ? (\n \n {/* Backdrop: dims + a breath of blur. Reduced motion fades the\n dim only, with the blur applied statically (never animated). */}\n \n\n {/* Centering layer doubles as the outside-click catcher. */}\n {\n if (e.target === e.currentTarget && closeOnOutsideClick) close();\n }}\n >\n setLanded(true)}\n style={{\n borderRadius: 16,\n width: \"100%\",\n maxWidth: expandedMaxWidth,\n }}\n className=\"relative flex max-h-[86vh] flex-col overflow-hidden border border-white/10 bg-neutral-900/85 shadow-2xl shadow-black/60 outline-none ring-1 ring-white/[0.06] backdrop-blur-xl\"\n >\n {/* Header media — the same shared element, now full-bleed. */}\n
\n {morphMedia ? (\n \n ) : (\n \n )}\n\n \n \n \n \n \n
\n\n {/* Title + meta + action travel; body copy does not. */}\n
\n
\n \n {activeItem.title}\n \n {activeItem.meta ? (\n \n {activeItem.meta}\n \n ) : null}\n
\n\n {activeItem.actionHref ? (\n \n {activeItem.action ?? \"View\"}\n \n ) : (\n onAction?.(activeItem)}\n transition={morphTransition}\n className=\"shrink-0 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--casement-accent)]\"\n >\n {activeItem.action ?? \"View\"}\n \n )}\n
\n\n {activeItem.content ? (\n \n {activeItem.content}\n \n ) : null}\n \n \n \n ) : null}\n ,\n document.body\n )}\n \n );\n}\n" } ] }