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:T23a8,"use client"; import type { ReactNode } from "react"; /* * Change Summary (Clean) – what moved since last time, one metric per row, in a single self-contained file. * Clean style: no tray – one white card with hairline shadows. The heading is the first row of the card, * each metric sits under a 0.5px line with a small tinted trend mark and quiet gray text. * 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: thin lines, round caps ---------- */ const ChangesIcon = () => ( ); const ArrowIcon = ({ down }: { down?: boolean }) => ( ); const DashIcon = () => ( ); /* ---------- Styles ---------- */ const css = /* css */ ` /* Colors and motion as variables – override them on .ui-csc */ .ui-csc { --ui-csc-card: #ffffff; --ui-csc-ink: rgba(0, 0, 0, 0.88); --ui-csc-strong: #000000; --ui-csc-text: rgba(0, 0, 0, 0.61); --ui-csc-muted: rgba(0, 0, 0, 0.45); --ui-csc-icon: rgba(0, 0, 0, 0.447); --ui-csc-line: rgba(0, 0, 0, 0.06); --ui-csc-wash: rgba(0, 0, 0, 0.015); --ui-csc-good: #1a9a52; --ui-csc-good-fill: rgba(26, 154, 82, 0.08); --ui-csc-bad: #e5484d; --ui-csc-bad-fill: rgba(229, 72, 77, 0.08); --ui-csc-neutral-fill: rgba(0, 0, 0, 0.04); /* Strokes are shadows: a 0.5px hairline plus a soft lift */ --ui-csc-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px -1px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05); --ui-csc-ease: cubic-bezier(0.22, 1, 0.36, 1); box-sizing: border-box; width: 100%; max-width: 480px; container-type: inline-size; overflow: hidden; border-radius: 10px; background: var(--ui-csc-card); box-shadow: var(--ui-csc-shadow); font-family: "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--ui-csc-ink); -webkit-font-smoothing: antialiased; } .ui-csc *, .ui-csc *::before, .ui-csc *::after { box-sizing: border-box; } :where(.ui-csc) svg { display: block; flex: none; } /* Heading row: icon + title, the period on the right */ .ui-csc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 16px; } .ui-csc__title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; white-space: nowrap; color: var(--ui-csc-strong); } .ui-csc__icon { display: grid; place-items: center; flex: none; width: 16px; height: 16px; overflow: hidden; color: var(--ui-csc-icon); } /* A custom icon – an image too – fits the 16px tile */ .ui-csc__icon > :is(img, svg) { width: 16px; height: 16px; object-fit: contain; } .ui-csc__title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* The period shortens before it pushes the title out */ .ui-csc__period { flex: 0 1 auto; min-width: 0; max-width: 50%; overflow: hidden; font-size: 12px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; color: var(--ui-csc-muted); } /* One row per metric, each under a hairline */ .ui-csc__list { margin: 0; } .ui-csc__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 16px; min-height: 48px; padding: 0 16px; border-top: 0.5px solid var(--ui-csc-line); animation: ui-csc-in 520ms var(--ui-csc-ease) both; transition: background-color 140ms ease; } .ui-csc__row:hover { background: var(--ui-csc-wash); } .ui-csc__label { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: anywhere; text-align: start; color: var(--ui-csc-ink); } .ui-csc__change { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--ui-csc-text); } /* The change keeps its numbers: it wraps up to three lines instead of being cut off */ .ui-csc__text { display: -webkit-box; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; text-align: start; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* Trend mark: a small tinted square, no strokes */ .ui-csc__trend { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 5px; } .ui-csc__trend[data-tone="good"] { background: var(--ui-csc-good-fill); color: var(--ui-csc-good); } .ui-csc__trend[data-tone="bad"] { background: var(--ui-csc-bad-fill); color: var(--ui-csc-bad); } .ui-csc__trend[data-tone="neutral"] { background: var(--ui-csc-neutral-fill); color: var(--ui-csc-icon); } /* Narrow: each metric stacks above its change, so the text wraps instead of being cut off */ @container (max-width: 400px) { .ui-csc__head { padding: 0 14px; } .ui-csc__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 14px; } .ui-csc__label { white-space: normal; } .ui-csc__change { align-items: flex-start; } } /* Touch screens: a little more room per row */ @media (pointer: coarse) { .ui-csc__row { min-height: 52px; } } @keyframes ui-csc-in { from { opacity: 0; transform: translateY(4px); } } @media (prefers-reduced-motion: reduce) { .ui-csc__row { animation: none; transition: none; } } /* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. */ :where(.dark, [data-theme="dark"]) .ui-csc { --ui-csc-card: #1c1c1e; --ui-csc-ink: rgba(255, 255, 255, 0.9); --ui-csc-strong: #ffffff; --ui-csc-text: rgba(255, 255, 255, 0.62); --ui-csc-muted: rgba(255, 255, 255, 0.46); --ui-csc-icon: rgba(255, 255, 255, 0.5); --ui-csc-line: rgba(255, 255, 255, 0.08); --ui-csc-wash: rgba(255, 255, 255, 0.025); --ui-csc-good: #3ec27a; --ui-csc-good-fill: rgba(62, 194, 122, 0.14); --ui-csc-bad: #f2777b; --ui-csc-bad-fill: rgba(229, 72, 77, 0.14); --ui-csc-neutral-fill: rgba(255, 255, 255, 0.08); --ui-csc-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.4); } `; 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-clean/change-summary-clean.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]