51: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"] 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:T85b6,"use client"; import { Tooltip } from "@base-ui/react/tooltip"; import { motion, useReducedMotion } from "motion/react"; import { type ComponentPropsWithoutRef, type CSSProperties, forwardRef, type KeyboardEvent, type ReactNode, useEffect, useId, useMemo, useRef, useState, } from "react"; import { cn } from "@/lib/sona-utils"; export interface ActivityGraphDatum { /** Calendar date represented by this record. */ date: Date | string; /** Non-negative activity recorded for the date. */ value: number; /** Optional accessible label for the record. */ label?: string; /** Optional domain data retained for selection callbacks. */ metadata?: unknown; } export interface ActivityGraphValueContext { /** Calendar date represented by the active cell. */ date: Date; /** Combined activity record for the active date, when one exists. */ item: ActivityGraphDatum | undefined; /** Combined numeric value for the active date. */ value: number; /** Normalized visual intensity from zero to the configured level count. */ level: number; } export interface ActivityGraphProps extends Omit, "children" | "defaultValue"> { /** Dated activity records displayed in the graph. */ data: ActivityGraphDatum[]; /** * Inclusive first date displayed by the graph. * @default 364 days before endDate */ startDate?: Date | string; /** * Inclusive last date displayed by the graph. * @default latest data date or today */ endDate?: Date | string; /** * Number of non-empty color intensity levels. * @default 4 */ levels?: number; /** * Maximum number of calendar days rendered. * @default 366 */ maxDays?: number; /** * First day of each visual week: Sunday, Monday, or Saturday. * @default 0 */ weekStartsOn?: 0 | 1 | 6; /** * Controlled selected date. * @default undefined */ value?: Date | string | null; /** * Initially selected date for uncontrolled usage. * @default undefined */ defaultValue?: Date | string | null; /** * Called when a date is selected. * @default undefined */ onValueChange?: (date: Date, item: ActivityGraphDatum | undefined) => void; /** * Called when a selected date is activated with pointer or keyboard. * @default undefined */ onCellSelect?: (item: ActivityGraphDatum | undefined, date: Date) => void; /** * Custom content shown for the currently explored date. * @default undefined */ renderValue?: (context: ActivityGraphValueContext) => ReactNode; /** * Shows the active date and value above the graph. * @default true */ showValue?: boolean; /** * Shows an anchored tooltip when a date cell is hovered or focused. * @default false */ showTooltip?: boolean; /** * Delay before the first tooltip opens, in milliseconds. * @default 400 */ tooltipDelay?: number; /** * Custom content rendered inside the optional cell tooltip. * @default undefined */ renderTooltip?: (context: ActivityGraphValueContext) => ReactNode; /** * Custom colors for non-empty intensity levels, ordered from low to high. * @default undefined */ colors?: string[]; /** * Custom color for dates without activity. * @default undefined */ emptyColor?: string; /** * Shows month labels above the graph. * @default true */ showMonthLabels?: boolean; /** * Shows abbreviated weekday labels beside the graph. * @default true */ showWeekdayLabels?: boolean; /** * Shows the intensity legend below the graph. * @default true */ showLegend?: boolean; /** * Accessible description for a date without activity. * @default "No activity" */ emptyLabel?: string; /** * Accessible name for the interactive graph. * @default "Activity graph" */ ariaLabel?: string; /** * Additional classes for the scrollable graph region. * @default undefined */ gridClassName?: string; /** * Additional classes applied to every date cell. * @default undefined */ cellClassName?: string; /** * Additional classes for the optional tooltip surface. * @default undefined */ tooltipClassName?: string; /** * Additional classes for the intensity legend. * @default undefined */ legendClassName?: string; } interface NormalizedCell { date: Date; key: string; item: ActivityGraphDatum | undefined; value: number; level: number; } type TooltipDirection = "up" | "right" | "down" | "left" | "none"; const DAY_MS = 86_400_000; const DEFAULT_MAX_DAYS = 366; const levelClasses = [ "bg-[var(--activity-graph-level-1)]", "bg-[var(--activity-graph-level-2)]", "bg-[var(--activity-graph-level-3)]", "bg-[var(--activity-graph-level-4)]", "bg-[var(--activity-graph-level-5)]", "bg-[var(--activity-graph-level-6)]", ] as const; const tokenStyle = { "--activity-graph-empty": "color-mix(in oklab, var(--muted) 76%, var(--background))", "--activity-graph-level-1": "color-mix(in oklab, var(--primary) 24%, var(--background))", "--activity-graph-level-2": "color-mix(in oklab, var(--primary) 42%, var(--background))", "--activity-graph-level-3": "color-mix(in oklab, var(--primary) 62%, var(--background))", "--activity-graph-level-4": "color-mix(in oklab, var(--primary) 82%, var(--background))", "--activity-graph-level-5": "color-mix(in oklab, var(--primary) 91%, var(--background))", "--activity-graph-level-6": "var(--primary)", "--activity-graph-focus-ring": "var(--ring)", "--activity-graph-label": "var(--foreground)", "--activity-graph-muted-label": "var(--muted-foreground)", "--activity-graph-tooltip-surface": "color-mix(in oklab, var(--popover) 94%, transparent)", "--activity-graph-tooltip-foreground": "var(--popover-foreground)", "--activity-graph-cell-size": "0.75rem", "--activity-graph-cell-gap": "0.25rem", "--activity-graph-cell-radius": "0.1875rem", } as CSSProperties; const dateFormatter = new Intl.DateTimeFormat("en", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC", }); const monthFormatter = new Intl.DateTimeFormat("en", { month: "short", timeZone: "UTC", }); const weekdayFormatter = new Intl.DateTimeFormat("en", { weekday: "narrow", timeZone: "UTC", }); function toUtcDate(value: Date | string): Date | null { if (value instanceof Date) { if (Number.isNaN(value.getTime())) return null; return new Date( Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()), ); } const calendarDate = /^(\d{4})-(\d{2})-(\d{2})/.exec(value.trim()); if (calendarDate) { const year = Number(calendarDate[1]); const month = Number(calendarDate[2]) - 1; const day = Number(calendarDate[3]); const date = new Date(Date.UTC(year, month, day)); return date.getUTCFullYear() === year && date.getUTCMonth() === month && date.getUTCDate() === day ? date : null; } const parsed = new Date(value); if (Number.isNaN(parsed.getTime())) return null; return new Date( Date.UTC(parsed.getFullYear(), parsed.getMonth(), parsed.getDate()), ); } function dateKey(date: Date) { return date.toISOString().slice(0, 10); } function addDays(date: Date, amount: number) { return new Date(date.getTime() + amount * DAY_MS); } function startOfWeek(date: Date, weekStartsOn: 0 | 1 | 6) { const offset = (date.getUTCDay() - weekStartsOn + 7) % 7; return addDays(date, -offset); } function endOfWeek(date: Date, weekStartsOn: 0 | 1 | 6) { return addDays(startOfWeek(date, weekStartsOn), 6); } function clampDate(date: Date, start: Date, end: Date) { if (date < start) return start; if (date > end) return end; return date; } function getWeekdayLabels( weekStartsOn: 0 | 1 | 6, formatter: Intl.DateTimeFormat, ) { const sunday = new Date(Date.UTC(2026, 0, 4)); return Array.from({ length: 7 }, (_, index) => { const day = (weekStartsOn + index) % 7; return { key: `weekday-${day}`, day, label: formatter.format(addDays(sunday, day)), }; }); } const ActivityGraph = forwardRef( function ActivityGraph( { data, startDate, endDate, levels = 4, maxDays = DEFAULT_MAX_DAYS, weekStartsOn = 0, value, defaultValue, onValueChange, onCellSelect, renderValue, showValue = true, showTooltip = false, tooltipDelay = 400, renderTooltip, colors, emptyColor, showMonthLabels = true, showWeekdayLabels = true, showLegend = true, emptyLabel = "No activity", ariaLabel = "Activity graph", className, style, gridClassName, cellClassName, tooltipClassName, legendClassName, ...rootProps }, forwardedRef, ) { const layoutId = useId(); const shouldReduceMotion = useReducedMotion(); const safeLevels = Number.isFinite(levels) ? Math.min(6, Math.max(1, Math.round(levels))) : 4; const safeMaxDays = Number.isFinite(maxDays) ? Math.max(1, Math.round(maxDays)) : DEFAULT_MAX_DAYS; const tooltipHandle = useMemo( () => Tooltip.createHandle(), [], ); const resolvedTokenStyle = useMemo(() => { const style = { ...tokenStyle, } as CSSProperties & Record<`--activity-graph-${string}`, string>; colors?.slice(0, 6).forEach((color, index) => { style[`--activity-graph-level-${index + 1}`] = color; }); if (emptyColor) style["--activity-graph-empty"] = emptyColor; return style; }, [colors, emptyColor]); const model = useMemo(() => { const records = new Map(); for (const datum of data) { const date = toUtcDate(datum.date); if (!date) continue; const key = dateKey(date); const previous = records.get(key); const nextValue = Math.max(0, Number.isFinite(datum.value) ? datum.value : 0) + (previous?.value ?? 0); records.set(key, { ...datum, date, value: nextValue, label: previous ? undefined : datum.label, metadata: datum.metadata ?? previous?.metadata, }); } const dataDates = [...records.keys()].sort(); const latestDataDate = dataDates.at(-1); const fallbackEnd = (latestDataDate ? toUtcDate(latestDataDate) : null) ?? toUtcDate(new Date()) ?? new Date(0); const requestedEnd = endDate ? toUtcDate(endDate) : null; const resolvedEnd = requestedEnd ?? fallbackEnd; const requestedStart = startDate ? toUtcDate(startDate) : null; const resolvedStart = requestedStart ?? addDays(resolvedEnd, -364); const orderedStart = resolvedStart <= resolvedEnd ? resolvedStart : resolvedEnd; const rangeEnd = resolvedStart <= resolvedEnd ? resolvedEnd : resolvedStart; const rangeStart = new Date( Math.max( orderedStart.getTime(), addDays(rangeEnd, -(safeMaxDays - 1)).getTime(), ), ); const gridStart = startOfWeek(rangeStart, weekStartsOn); const gridEnd = endOfWeek(rangeEnd, weekStartsOn); const nonZeroValues = [...records.entries()] .filter( ([key]) => key >= dateKey(rangeStart) && key <= dateKey(rangeEnd), ) .map(([, item]) => item.value) .filter((itemValue) => itemValue > 0) .sort((a, b) => a - b); const levelByValue = new Map(); nonZeroValues.forEach((itemValue, index) => { if (levelByValue.has(itemValue)) return; levelByValue.set( itemValue, Math.max( 1, Math.min( safeLevels, Math.ceil(((index + 1) / nonZeroValues.length) * safeLevels), ), ), ); }); const getLevel = (itemValue: number) => { if (itemValue <= 0) return 0; return levelByValue.get(itemValue) ?? 1; }; const cells: NormalizedCell[] = []; for ( let current = gridStart; current <= gridEnd; current = addDays(current, 1) ) { const key = dateKey(current); const item = records.get(key); const inRange = current >= rangeStart && current <= rangeEnd; const itemValue = inRange ? (item?.value ?? 0) : 0; cells.push({ date: current, key, item: inRange ? item : undefined, value: itemValue, level: getLevel(itemValue), }); } const weeks = Array.from( { length: Math.ceil(cells.length / 7) }, (_, index) => cells.slice(index * 7, index * 7 + 7), ); const monthMap = new Map([ [0, monthFormatter.format(rangeStart)], ]); for (const [weekIndex, week] of weeks.entries()) { const firstOfMonth = week.find( (cell) => cell.date.getUTCDate() === 1 && cell.date >= rangeStart && cell.date <= rangeEnd, ); if (firstOfMonth) { monthMap.set(weekIndex, monthFormatter.format(firstOfMonth.date)); } } const monthCandidates = [...monthMap].map(([weekIndex, label]) => ({ label, weekIndex, })); const months = monthCandidates.filter((month, index) => { if (index === 0) return true; const nextMonth = monthCandidates[index + 1]; return !nextMonth || nextMonth.weekIndex - month.weekIndex >= 2; }); const rangeStartIndex = cells.findIndex( (cell) => cell.key === dateKey(rangeStart), ); const rangeEndIndex = cells.findIndex( (cell) => cell.key === dateKey(rangeEnd), ); return { cells, weeks, months, rangeStart, rangeEnd, rangeStartIndex, rangeEndIndex, }; }, [data, endDate, safeLevels, safeMaxDays, startDate, weekStartsOn]); const controlledDate = value !== undefined && value !== null ? toUtcDate(value) : null; const controlledKey = value !== undefined ? controlledDate ? dateKey(clampDate(controlledDate, model.rangeStart, model.rangeEnd)) : null : undefined; const initialDate = defaultValue !== undefined && defaultValue !== null ? toUtcDate(defaultValue) : null; const [internalKey, setInternalKey] = useState(() => initialDate ? dateKey(clampDate(initialDate, model.rangeStart, model.rangeEnd)) : null, ); const [focusedKey, setFocusedKey] = useState(null); const [lastFocusedKey, setLastFocusedKey] = useState(() => dateKey(model.rangeEnd), ); const [hoveredKey, setHoveredKey] = useState(null); const [keyboardNavigation, setKeyboardNavigation] = useState(false); const [tooltipDirection, setTooltipDirection] = useState("none"); const previousHoveredIndex = useRef(null); const cellRefs = useRef(new Map()); const scrollAreaRef = useRef(null); const internalDate = internalKey ? toUtcDate(internalKey) : null; const resolvedInternalKey = internalDate ? dateKey(clampDate(internalDate, model.rangeStart, model.rangeEnd)) : null; const selectedKey = controlledKey !== undefined ? controlledKey : resolvedInternalKey; const rovingKey = model.cells.some((cell) => cell.key === lastFocusedKey) ? lastFocusedKey : (selectedKey ?? dateKey(model.rangeEnd)); const activeKey = keyboardNavigation ? (focusedKey ?? selectedKey) : (hoveredKey ?? focusedKey ?? selectedKey); const activeCell = activeKey ? model.cells.find((cell) => cell.key === activeKey) : undefined; const rovingIndex = model.cells.findIndex((cell) => cell.key === rovingKey); useEffect(() => { const scrollArea = scrollAreaRef.current; if (!scrollArea || model.weeks.length === 0) return; scrollArea.scrollLeft = scrollArea.scrollWidth; }, [model.weeks.length]); const selectCell = (cell: NormalizedCell, activate = false) => { const clamped = clampDate(cell.date, model.rangeStart, model.rangeEnd); const key = dateKey(clamped); const item = model.cells.find((candidate) => candidate.key === key)?.item; if (value === undefined) setInternalKey(key); onValueChange?.(clamped, item); if (activate) onCellSelect?.(item, clamped); }; const handleKeyDown = ( event: KeyboardEvent, index: number, ) => { let nextIndex = index; const rowIndex = index % 7; if (event.key === "ArrowLeft") nextIndex = index - 7; else if (event.key === "ArrowRight") nextIndex = index + 7; else if (event.key === "ArrowUp") nextIndex = rowIndex === 0 ? index : index - 1; else if (event.key === "ArrowDown") nextIndex = rowIndex === 6 ? index : index + 1; else if (event.key === "Home") { if (event.metaKey || event.ctrlKey) { nextIndex = model.rangeStartIndex; } else { nextIndex = model.cells.findIndex( (cell, candidateIndex) => candidateIndex >= model.rangeStartIndex && candidateIndex % 7 === rowIndex && cell.date <= model.rangeEnd, ); } } else if (event.key === "End") { if (event.metaKey || event.ctrlKey) { nextIndex = model.rangeEndIndex; } else { for ( let candidateIndex = model.rangeEndIndex; candidateIndex >= model.rangeStartIndex; candidateIndex -= 1 ) { if (candidateIndex % 7 === rowIndex) { nextIndex = candidateIndex; break; } } } } else if (event.key === "Enter" || event.key === " ") { event.preventDefault(); selectCell(model.cells[index], true); return; } else { return; } event.preventDefault(); const boundedIndex = nextIndex >= model.rangeStartIndex && nextIndex <= model.rangeEndIndex ? nextIndex : index; const nextCell = model.cells[boundedIndex]; setKeyboardNavigation(true); setHoveredKey(null); setFocusedKey(nextCell.key); setLastFocusedKey(nextCell.key); requestAnimationFrame(() => { cellRefs.current.get(nextCell.key)?.focus(); }); }; const weekdayLabels = useMemo( () => getWeekdayLabels(weekStartsOn, weekdayFormatter), [weekStartsOn], ); const activeContext: ActivityGraphValueContext | undefined = activeCell ? { date: activeCell.date, item: activeCell.item, value: activeCell.value, level: activeCell.level, } : undefined; const tooltipContentOffset = tooltipDirection === "left" ? { x: -4, y: 0 } : tooltipDirection === "right" ? { x: 4, y: 0 } : tooltipDirection === "up" ? { x: 0, y: -4 } : tooltipDirection === "down" ? { x: 0, y: 4 } : { x: 0, y: 0 }; const totalActivity = model.cells.reduce( (total, cell) => total + cell.value, 0, ); const summaryId = `${layoutId}-summary`; return (

{totalActivity} total activities from{" "} {dateFormatter.format(model.rangeStart)} to{" "} {dateFormatter.format(model.rangeEnd)}.

{showValue && (

{activeContext && renderValue ? ( renderValue(activeContext) ) : activeContext ? ( <> {dateFormatter.format(activeContext.date)} {activeContext.value === 0 ? emptyLabel : `${activeContext.value} ${activeContext.value === 1 ? "activity" : "activities"}`} ) : ( {totalActivity} total{" "} {totalActivity === 1 ? "activity" : "activities"} )}

)}

{showMonthLabels && ( )}

{showWeekdayLabels && ( )} {/* biome-ignore lint/a11y/useSemanticElements: the interactive calendar uses ARIA grid navigation rather than table navigation */}

{ previousHoveredIndex.current = null; setHoveredKey(null); setTooltipDirection("none"); }} > {model.cells.map((cell, index) => { const outsideRange = cell.date < model.rangeStart || cell.date > model.rangeEnd; const isSelected = cell.key === selectedKey; const label = cell.item?.label ?? (cell.value === 0 ? emptyLabel : `${cell.value} ${cell.value === 1 ? "activity" : "activities"}`); if (outsideRange) { return ( ); } return ( } role="gridcell" aria-rowindex={(index % 7) + 1} aria-colindex={Math.floor(index / 7) + 1} aria-label={`${dateFormatter.format(cell.date)}: ${label}`} aria-current={isSelected ? "date" : undefined} aria-selected={isSelected} tabIndex={index === rovingIndex ? 0 : -1} ref={(node: HTMLButtonElement | null) => { if (node) cellRefs.current.set(cell.key, node); else cellRefs.current.delete(cell.key); }} data-slot="activity-graph-cell" data-activity-graph={layoutId} data-date={cell.key} onPointerEnter={(event) => { if (event.pointerType === "touch") return; const previousIndex = previousHoveredIndex.current; if (previousIndex === null) { setTooltipDirection("none"); } else { const horizontalDelta = Math.floor(index / 7) - Math.floor(previousIndex / 7); const verticalDelta = (index % 7) - (previousIndex % 7); if ( Math.abs(horizontalDelta) >= Math.abs(verticalDelta) ) { setTooltipDirection( horizontalDelta < 0 ? "left" : "right", ); } else { setTooltipDirection( verticalDelta < 0 ? "up" : "down", ); } } previousHoveredIndex.current = index; setKeyboardNavigation(false); setHoveredKey(cell.key); }} onPointerDown={() => setKeyboardNavigation(false)} onClick={() => selectCell(cell, true)} onFocus={() => { setFocusedKey(cell.key); setLastFocusedKey(cell.key); }} onBlur={() => setFocusedKey(null)} onKeyDown={(event) => handleKeyDown(event, index)} className={cn( "relative isolate rounded-[var(--activity-graph-cell-radius)] outline-none transition-[filter,box-shadow] duration-150 before:absolute before:inset-[calc(var(--activity-graph-cell-gap)/-2)] before:content-[''] hover:brightness-110", "focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-[var(--activity-graph-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background", "active:scale-[0.96]", isSelected && "z-[1] ring-1 ring-[var(--activity-graph-focus-ring)] ring-offset-1 ring-offset-background", cell.level === 0 ? "bg-[var(--activity-graph-empty)]" : levelClasses[cell.level - 1], cellClassName, )} > ); })}

{showLegend && (

Less

)}

{({ payload }) => ( {payload && ( {renderTooltip ? ( renderTooltip(payload) ) : (

{dateFormatter.format(payload.date)} {payload.item?.label ?? (payload.value === 0 ? emptyLabel : `${payload.value} ${payload.value === 1 ? "activity" : "activities"}`)}

)} )} )} ); }, ); export default ActivityGraph; 50:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@sona-ui","registryDependencies":["@sona-ui/sona-utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/sonaui/activity-graph/activity-graph.tsx","content":"$53","type":"registry:ui","target":"components/ui/activity-graph/activity-graph.tsx"}],"className":"h-[70svh] min-h-80"}]]}]