4e:I[707087,["/_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"],"RegistryDependencies"] 4f: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"] 50:T15b2,"use client"; import type { ComponentProps, ReactNode } from "react"; import type { MetricCardProps } from "@/components/metric-card/metric-card"; import { MetricCard } from "@/components/metric-card/metric-card"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export interface UsageMetric extends Pick< MetricCardProps, "label" | "value" | "delta" | "comparisonLabel" | "trend" | "format" | "unit" > { /** Stable id, e.g. "compute_unit_seconds". */ id: string; /** Locked behind a paid plan; renders the gate instead of the value. */ gated?: boolean; } export type UsagePanelProps = Omit, "children"> & { /** The per-project metrics, in display order. */ metrics: UsageMetric[]; /** Billing period readout, e.g. "Jul 1 – Jul 18". */ period?: string; /** * Header filter slot, e.g. a DateRangePicker. Renders right-aligned; * takes the period readout's place when both are set. */ filter?: ReactNode; /** * Metering-lag notice: when consumption data trails real time, say * so, e.g. "metered through 21:40 UTC". Renders as a quiet footer. */ meteredThrough?: string; /** Renders the upgrade action on gated metrics. */ onUpgrade?: () => void; /** Skeletons every card. */ isLoading?: boolean; /** Panel-level failure rendered above the grid. */ error?: string | null; /** Extra content after the footer, e.g. a link to invoices. */ footer?: ReactNode; }; /* ───────────────────────────────────────────────────────── * PANEL STORYBOARD * * entrance cards rise one at a time, 60ms apart, in * metric order — MetricCard's own entrance * rhythm, orchestrated * rest a mono header row (usage · period) over the * MetricCard grid; the cards do the talking * gated a locked metric keeps the card frame but * holds its voice: mono "available on a paid * plan" where the value would be, with a quiet * upgrade action — the gate is an invitation, * not a wall * lag when metering trails real time, a mono footer * says exactly how far — never pretend the * numbers are live * loading every card skeletons through MetricCard * error the house error line above the grid; cards * hold their last values * ───────────────────────────────────────────────────────── */ const CARD_STAGGER_MS = 60; const RISE = "fill-mode-backwards fade-in-0 slide-in-from-bottom-2 animate-in duration-500 motion-reduce:animate-none"; /** The locked metric: same frame, held voice, an invitation. */ const GatedCard = ({ label, onUpgrade, }: { label: string; onUpgrade?: () => void; }) => (

{label}

available on a paid plan

{onUpgrade ? ( ) : null}

); export const UsagePanel = ({ className, error = null, filter, footer, isLoading = false, meteredThrough, metrics, onUpgrade, period, ...props }: UsagePanelProps) => (

usage

{filter ?? (period ? ( {period} ) : null)}

{error ? (

error {error}

) : null}

{metrics.map(({ gated, id, ...metric }, index) => (

{gated ? ( ) : ( )}

))}

{meteredThrough ? (

{meteredThrough}

) : null} {footer}

); 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/button.json","https://ui.neon.com/r/metric-card.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/usage-panel/usage-panel.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]