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:T2008,"use client"; import type { ReactNode } from "react"; /* * Change Summary – what moved since last time, one metric per row, in a gray tray with a white card, in a single self-contained file. * The styles are injected below, so no extra files are needed. */ export type MetricChange = { label: string; /** What happened, in words, e.g. "Up 6.1% to 18.2K" */ change: string; /** good: green arrow · bad: red arrow · neutral: gray dash */ tone?: "good" | "bad" | "neutral"; /** Direction of the arrow – defaults to up for good, down for bad */ direction?: "up" | "down"; }; export type ChangeSummaryProps = { title?: string; /** Small text on the right of the heading, e.g. "This week" */ period?: string; icon?: ReactNode; changes: MetricChange[]; className?: string; }; export function ChangeSummary({ title = "What's changed", period, icon, changes, className }: ChangeSummaryProps) { return ( <>

{icon ?? } {title} {period && ( {period} )}

{changes.length > 0 && (

{c.label}: {c.change}

)}

); } /* ---------- Icons ---------- */ const ChangesIcon = () => ( ); const ArrowIcon = ({ down }: { down?: boolean }) => ( ); const DashIcon = () => ( ); /* ---------- Styles ---------- */ const css = /* css */ ` .ui-cs { --ui-cs-tray: #f0f0f0; --ui-cs-card: #ffffff; --ui-cs-line: #f0f0f0; --ui-cs-ink: #171717; --ui-cs-muted: #737373; --ui-cs-accent: #2f6bff; --ui-cs-ease: cubic-bezier(0.22, 1, 0.36, 1); box-sizing: border-box; width: 100%; max-width: 480px; container-type: inline-size; /* Like the Chat Composer: a gray tray with the heading, the white card sits on top of it */ background: var(--ui-cs-tray); /* The gray tray frames the white card on every side */ padding: 6px; border-radius: 22px; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ui-cs-ink); -webkit-font-smoothing: antialiased; } .ui-cs *, .ui-cs *::before, .ui-cs *::after { box-sizing: border-box; } .ui-cs__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px 10px; font-size: 14px; line-height: 20px; } .ui-cs__title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: var(--ui-cs-accent); } .ui-cs__icon { display: grid; place-items: center; flex: none; width: 16px; height: 16px; overflow: hidden; } /* A custom icon – an image too – fits the 16px tile */ .ui-cs__icon > :is(img, svg) { display: block; width: 16px; height: 16px; object-fit: contain; } .ui-cs__title-text { min-width: 0; overflow-wrap: anywhere; } /* The period shortens before it squeezes the title */ .ui-cs__period { flex: 0 1 auto; min-width: 0; max-width: 50%; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; color: var(--ui-cs-muted); } .ui-cs__card { margin: 0; overflow: hidden; background: var(--ui-cs-card); border: 1px solid #e5e5e5; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .ui-cs__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 16px; min-height: 52px; padding: 0 20px; animation: ui-cs-in 520ms var(--ui-cs-ease) both; transition: background-color 140ms ease; } .ui-cs__row + .ui-cs__row { border-top: 1px solid var(--ui-cs-line); } .ui-cs__row:hover { background: #fafafa; } .ui-cs__label { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: anywhere; text-align: start; } .ui-cs__change { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 14px; line-height: 20px; color: var(--ui-cs-muted); } /* The change keeps its numbers: it wraps up to three lines instead of being cut off */ .ui-cs__text { display: -webkit-box; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; text-align: start; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* Narrow: each metric stacks above its change, so the text wraps instead of being cut off */ @container (max-width: 400px) { .ui-cs__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 11px 16px; } .ui-cs__label { white-space: normal; } .ui-cs__change { align-items: flex-start; } } .ui-cs__trend { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; } .ui-cs__trend[data-tone="good"] { background: #edfaf3; color: #1f8a4c; } .ui-cs__trend[data-tone="bad"] { background: #fff0f0; color: #e5484d; } .ui-cs__trend[data-tone="neutral"] { background: #f5f5f5; color: #8f8f8f; } @keyframes ui-cs-in { from { opacity: 0; transform: translateY(4px); } } @media (prefers-reduced-motion: reduce) { .ui-cs__row { animation: none; } } /* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. */ :where(.dark, [data-theme="dark"]) .ui-cs { --ui-cs-tray: #161618; --ui-cs-card: #232326; --ui-cs-line: rgba(255, 255, 255, 0.08); --ui-cs-ink: #ededed; --ui-cs-muted: #8f8f8f; --ui-cs-accent: #6b95ff; } :where(.dark, [data-theme="dark"]) .ui-cs__card { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } :where(.dark, [data-theme="dark"]) .ui-cs__row:hover { background: #2a2a2d; } :where(.dark, [data-theme="dark"]) .ui-cs__trend[data-tone="good"] { background: rgba(31, 138, 76, 0.18); color: #3fbf74; } :where(.dark, [data-theme="dark"]) .ui-cs__trend[data-tone="bad"] { background: rgba(229, 72, 77, 0.16); color: #f2777b; } :where(.dark, [data-theme="dark"]) .ui-cs__trend[data-tone="neutral"] { background: #2a2a2d; color: #8f8f8f; } `; 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/change-summary/change-summary.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]