52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T34d1,"use client"; import { useLayoutEffect, useRef, useState } from "react"; /* * Notification Stack – notices stacked behind each other, in a single self-contained file. * Only the front card can be read; the others peek out below it. Dismissing the front card slides it away and * the next one moves up – one notice at a time. * The styles are injected below, so no extra files are needed. */ export type NoticePattern = "orbit" | "grid" | "rays"; export type Notice = { id: string; /** Small label in the pill, e.g. "Notice" */ badge?: string; title: string; text: string; action?: { label: string; href?: string; onClick?: () => void; external?: boolean }; /** Line art in the top-right corner */ pattern?: NoticePattern; }; export type NotificationStackProps = { notices: Notice[]; /** Called after a notice was dismissed */ onDismiss?: (notice: Notice) => void; className?: string; }; const PEEK = 12; // how far each card behind peeks out below the one in front, in px export function NotificationStack({ notices, onDismiss, className }: NotificationStackProps) { const [items, setItems] = useState(notices); const [leaving, setLeaving] = useState>(new Set()); // New notices from the parent join the stack; dismissed ones stay gone const removed = useRef(new Set()); const [given, setGiven] = useState(notices); if (notices !== given) { setGiven(notices); setItems(notices.filter((n) => !removed.current.has(n.id))); } const [heights, setHeights] = useState>({}); const refs = useRef(new Map()); const visible = items.filter((n) => !leaving.has(n.id)); const behind = Math.min(visible.length - 1, 2); // The front card's height sets the height of the stack useLayoutEffect(() => { const measure = () => { const next: Record = {}; // The full height, also for a card behind that is cut to the front card's height refs.current.forEach((el, id) => (next[id] = el.scrollHeight + el.offsetHeight - el.clientHeight)); setHeights(next); }; measure(); const ro = new ResizeObserver(measure); refs.current.forEach((el) => ro.observe(el)); return () => ro.disconnect(); }, [items]); const dismiss = (notice: Notice) => { setLeaving((s) => new Set(s).add(notice.id)); onDismiss?.(notice); window.setTimeout(() => { removed.current.add(notice.id); setItems((list) => list.filter((n) => n.id !== notice.id)); setLeaving((s) => { const next = new Set(s); next.delete(notice.id); return next; }); }, 320); }; const front = visible[0] ? heights[visible[0].id] ?? 0 : 0; return ( <>

{items.map((notice) => { const i = visible.findIndex((n) => n.id === notice.id); const gone = i === -1; const depth = Math.max(0, i); // Only the cards that can show are rendered – a long list stays light if (!gone && depth > 3) return null; const isBehind = !gone && depth > 0; // Cards behind are lined up on the front card's bottom edge, a little lower and smaller each // A card behind that is taller than the front one is cut to its height, so it never peeks out above const y = gone || depth === 0 ? 0 : front - Math.min(heights[notice.id] ?? front, front) + Math.min(depth, 2) * PEEK; const scale = gone ? 1 : 1 - Math.min(depth, 2) * 0.05; return (

{ if (el) refs.current.set(notice.id, el); else refs.current.delete(notice.id); }} className="ui-ns__card" data-depth={gone ? undefined : depth} data-leaving={gone || undefined} aria-labelledby={`${notice.id}-title`} aria-hidden={isBehind || undefined} inert={isBehind || gone} style={{ zIndex: gone ? 10 : 10 - depth, transform: gone ? undefined : `translateY(${y}px) scale(${scale})`, opacity: depth > 2 ? 0 : undefined, maxHeight: isBehind && front ? front : undefined, }} >

{notice.badge ? ( {notice.badge} ) : ( )}

{notice.title}

{notice.text}

{notice.action && (notice.action.href ? ( {notice.action.label} {notice.action.external && } ) : ( ))}

); })}

); } /** Quiet line art for the top-right corner – fades out towards the text */ function Pattern({ kind }: { kind: NoticePattern }) { return ( ); } const CloseIcon = () => ( ); const ArrowIcon = () => ( ); /* ---------- Styles ---------- */ const css = /* css */ ` .ui-ns { --ui-ns-card: #ffffff; --ui-ns-line: #e5e5e5; --ui-ns-ink: #171717; --ui-ns-muted: #737373; --ui-ns-art: #e3e3e3; --ui-ns-accent: #2f6bff; --ui-ns-ease: cubic-bezier(0.22, 1, 0.36, 1); position: relative; box-sizing: border-box; width: 100%; max-width: 380px; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ui-ns-ink); -webkit-font-smoothing: antialiased; transition: height 460ms var(--ui-ns-ease); } .ui-ns *, .ui-ns *::before, .ui-ns *::after { box-sizing: border-box; } .ui-ns__card { position: absolute; top: 0; left: 0; right: 0; overflow: hidden; background: var(--ui-ns-card); border: 1px solid var(--ui-ns-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.035); transform-origin: 50% 100%; transition: transform 460ms var(--ui-ns-ease), opacity 300ms ease, box-shadow 300ms ease; } /* Cards behind show only their edge */ .ui-ns__card > * { transition: opacity 260ms ease; } .ui-ns__card:not([data-depth="0"]) > * { opacity: 0; } .ui-ns__card[data-leaving] { opacity: 0; transform: translateX(40px) scale(0.98) !important; transition: transform 320ms var(--ui-ns-ease), opacity 240ms ease; } .ui-ns__pattern { position: absolute; top: 0; right: 0; width: 220px; height: 160px; stroke: var(--ui-ns-art); stroke-width: 1; pointer-events: none; /* Only the top-right corner, fading out towards the text */ -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 20%, transparent 70%); mask-image: radial-gradient(120% 110% at 100% 0%, #000 20%, transparent 70%); } .ui-ns__dot { fill: #d4d4d4; stroke: none; } .ui-ns__fill { fill: #f5f5f5; } .ui-ns__body { position: relative; padding: 18px 20px 20px; } .ui-ns__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin-bottom: 14px; } .ui-ns__badge { padding: 2px 9px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-ns-line); font-size: 11px; font-weight: 500; line-height: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: #525252; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ui-ns__close { display: grid; flex: none; place-items: center; width: 28px; height: 28px; margin: -2px -6px 0 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ui-ns-muted); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } .ui-ns__close:hover { background: rgba(0, 0, 0, 0.05); color: var(--ui-ns-ink); } .ui-ns__title { margin: 0; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -0.01em; text-align: start; overflow-wrap: anywhere; } .ui-ns__text { margin: 6px 0 0; max-width: 34ch; font-size: 14px; line-height: 21px; color: var(--ui-ns-muted); text-align: start; overflow-wrap: anywhere; white-space: pre-line; } .ui-ns__btn { display: inline-flex; align-items: center; gap: 8px; /* Grows with a long label instead of leaving the card */ min-height: 32px; max-width: 100%; margin-top: 16px; padding: 6px 12px; border: 0; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--ui-ns-line), 0 1px 2px rgba(0, 0, 0, 0.04); font: inherit; font-size: 13px; font-weight: 500; color: var(--ui-ns-ink); text-align: start; overflow-wrap: anywhere; text-decoration: none; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; } .ui-ns__btn:hover { background: #f7f7f7; } .ui-ns__btn:active { transform: scale(0.98); } .ui-ns__btn svg { flex: none; color: var(--ui-ns-muted); } .ui-ns button:focus-visible, .ui-ns a:focus-visible { outline: 2px solid var(--ui-ns-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .ui-ns, .ui-ns__card, .ui-ns__card > * { transition: none; } } /* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. */ :where(.dark, [data-theme="dark"]) .ui-ns { --ui-ns-card: #232326; --ui-ns-line: rgba(255, 255, 255, 0.1); --ui-ns-ink: #ededed; --ui-ns-muted: #8f8f8f; --ui-ns-art: rgba(255, 255, 255, 0.08); } :where(.dark, [data-theme="dark"]) .ui-ns__card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); } :where(.dark, [data-theme="dark"]) .ui-ns__dot { fill: rgba(255, 255, 255, 0.22); } :where(.dark, [data-theme="dark"]) .ui-ns__fill { fill: rgba(255, 255, 255, 0.04); } :where(.dark, [data-theme="dark"]) .ui-ns__badge { background: #2a2a2d; color: #c4c4c4; } :where(.dark, [data-theme="dark"]) .ui-ns__close:hover { background: rgba(255, 255, 255, 0.06); } :where(.dark, [data-theme="dark"]) .ui-ns__btn { background: #2a2a2d; box-shadow: 0 0 0 1px var(--ui-ns-line), 0 1px 2px rgba(0, 0, 0, 0.4); } :where(.dark, [data-theme="dark"]) .ui-ns__btn:hover { background: #313135; } `; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/notification-stack/notification-stack.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]