4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T3556,import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { SERIES_COLORS, createLivelineEngine, resolveSeriesPalettes, resolveTheme, type LivelineEngine, type LivelineEngineConfig, type LivelineOptions, type Momentum, } from '../lib/liveline'; import styles from './liveline.module.scss'; const defaultFormatValue = (value: number) => value.toFixed(2); const defaultFormatTime = (time: number) => { const date = new Date(time * 1000); return [date.getHours(), date.getMinutes(), date.getSeconds()].map((part) => part.toString().padStart(2, '0')).join(':'); }; export interface LivelineProps extends LivelineOptions, Omit, keyof LivelineOptions | 'children'> { /** Styles the engine's chart surface; style sizes the complete widget, including controls. */ surfaceStyle?: React.CSSProperties; surfaceClassName?: string; } function setIndicator(bar: HTMLDivElement | null, button: HTMLButtonElement | undefined, setState: React.Dispatch>) { if (!bar || !button) return; const barRect = bar.getBoundingClientRect(); const buttonRect = button.getBoundingClientRect(); setState({ left: buttonRect.left - barRect.left, width: buttonRect.width }); } const Liveline = React.forwardRef( ( { data, value, series: seriesProp, theme = 'dark', color = '#3b82f6', window: windowSecs = 30, grid = true, badge = true, momentum = true, fill = true, scrub = true, loading = false, paused = false, emptyText, exaggerate = false, degen, badgeTail = true, badgeVariant = 'default', showValue = false, valueMomentumColor = false, windows, onWindowChange, windowStyle = 'default', tooltipY = 14, tooltipOutline = true, orderbook, referenceLine, formatValue = defaultFormatValue, formatTime = defaultFormatTime, lerpSpeed = 0.08, padding: paddingOverride, onHover, cursor = 'crosshair', pulse = true, mode = 'line', candles, candleWidth, liveCandle, lineMode, lineData, lineValue, onModeChange, onSeriesToggle, seriesToggleCompact = false, lineWidth, className = '', style, surfaceStyle, surfaceClassName = '', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, ...rootProps }, forwardedRef, ) => { const rootRef = useRef(null); const surfaceRef = useRef(null); const canvasRef = useRef(null); const valueRef = useRef(null); const engineRef = useRef(null); const windowBarRef = useRef(null); const windowButtonRefs = useRef(new Map()); const modeBarRef = useRef(null); const modeButtonRefs = useRef(new Map()); const [windowIndicator, setWindowIndicator] = useState<{ left: number; width: number } | null>(null); const [modeIndicator, setModeIndicator] = useState<{ left: number; width: number } | null>(null); const [hiddenSeries, setHiddenSeries] = useState>(() => new Set()); const [activeWindowSecs, setActiveWindowSecs] = useState(windows?.[0]?.secs ?? windowSecs); const lastSeriesRef = useRef(seriesProp); useLayoutEffect(() => { if (seriesProp?.length) lastSeriesRef.current = seriesProp; }, [seriesProp]); const isMultiSeries = Boolean(seriesProp?.length); const shownSeries = (seriesProp?.length ? seriesProp : lastSeriesRef.current) ?? []; const showSeriesControls = shownSeries.length > 1; const effectiveWindowSecs = windows?.length ? activeWindowSecs : windowSecs; const activeMode = mode === 'candle' && lineMode ? 'line' : mode; const isDark = theme === 'dark'; const activeColor = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.55)'; const inactiveColor = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.22)'; const defaultRight = badge ? 80 : grid ? 54 : 12; const padding = { top: paddingOverride?.top ?? 12, right: paddingOverride?.right ?? defaultRight, bottom: paddingOverride?.bottom ?? 28, left: paddingOverride?.left ?? 12, }; const palette = { ...resolveTheme(color, theme), ...(lineWidth == null ? {} : { lineWidth }) }; const seriesPalettes = seriesProp?.length ? resolveSeriesPalettes(seriesProp, theme) : null; const multiSeries = seriesProp?.map((series, index) => ({ id: series.id, data: series.data, value: series.value, palette: seriesPalettes?.get(series.id) ?? resolveTheme(series.color || SERIES_COLORS[index % SERIES_COLORS.length], theme), label: series.label, })); const config: LivelineEngineConfig = { data, value, palette, windowSecs: effectiveWindowSecs, lerpSpeed, showGrid: grid, showBadge: isMultiSeries ? false : badge, showMomentum: isMultiSeries ? false : momentum !== false, momentumOverride: typeof momentum === 'string' ? (momentum as Momentum) : undefined, showFill: isMultiSeries ? false : fill, referenceLine, formatValue, formatTime, padding, onHover, showPulse: pulse, scrub, exaggerate, degenOptions: isMultiSeries || !degen ? undefined : typeof degen === 'object' ? degen : {}, badgeTail, badgeVariant, tooltipY, tooltipOutline, valueMomentumColor, valueElement: showValue ? valueRef.current : undefined, orderbookData: orderbook, loading, paused, emptyText, mode, candles, candleWidth, liveCandle, lineMode, lineData, lineValue, multiSeries, isMultiSeries, hiddenSeriesIds: hiddenSeries, }; const initialConfigRef = useRef(config); const initialShowValueRef = useRef(showValue); useLayoutEffect(() => { setIndicator(windowBarRef.current, windowButtonRefs.current.get(activeWindowSecs), setWindowIndicator); }, [activeWindowSecs, windows]); useEffect(() => { setActiveWindowSecs((current) => { if (!windows?.length) return windowSecs; return windows.some((option) => option.secs === current) ? current : windows[0].secs; }); }, [windows, windowSecs]); useEffect(() => { if (!seriesProp?.length) { setHiddenSeries((current) => (current.size ? new Set() : current)); return; } const ids = new Set(seriesProp.map((series) => series.id)); setHiddenSeries((current) => { const next = new Set([...current].filter((id) => ids.has(id))); if (next.size === ids.size) next.delete(seriesProp[0].id); return next.size === current.size && [...next].every((id) => current.has(id)) ? current : next; }); }, [seriesProp]); useLayoutEffect(() => { if (onModeChange) setIndicator(modeBarRef.current, modeButtonRefs.current.get(activeMode), setModeIndicator); }, [activeMode, onModeChange]); useEffect(() => { const container = surfaceRef.current; const canvas = canvasRef.current; if (!container || !canvas) return; const engine = createLivelineEngine({ container, canvas }, { ...initialConfigRef.current, valueElement: initialShowValueRef.current ? valueRef.current : undefined }); engineRef.current = engine; return () => { engine.destroy(); if (engineRef.current === engine) engineRef.current = null; }; }, []); useEffect(() => { engineRef.current?.update({ ...config, valueElement: showValue ? valueRef.current : undefined }); }); function setRootRef(element: HTMLDivElement | null) { rootRef.current = element; if (typeof forwardedRef === 'function') forwardedRef(element); else if (forwardedRef) forwardedRef.current = element; } function toggleSeries(id: string) { if (!isMultiSeries) return; const next = new Set(hiddenSeries); const visible = next.has(id); if (visible) next.delete(id); else { if ((seriesProp?.length ?? 0) - next.size <= 1) return; next.add(id); } setHiddenSeries(next); onSeriesToggle?.(id, visible); } const summary = ariaLabel ?? `Live chart, current value ${formatValue(value)}`; const hasControls = Boolean(windows?.length || onModeChange || showSeriesControls); return (

{showValue && } {hasControls && (

{Boolean(windows?.length) && (

{windowStyle !== 'text' && windowIndicator && ( )} {windows?.map((option) => { const active = option.secs === activeWindowSecs; return ( ); })}

)} {onModeChange && (

{windowStyle !== 'text' && modeIndicator && ( )} {(['line', 'candle'] as const).map((item) => { const active = activeMode === item; return ( ); })}

)} {showSeriesControls && (

{shownSeries.map((series, index) => { const visible = !hiddenSeries.has(series.id); const label = series.label ?? series.id; return ( ); })}

)}

); }, ); Liveline.displayName = 'Liveline'; export { Liveline }; 4f:T9ec,import React, { useEffect, useRef, useState } from 'react'; import styles from './liveline.module.scss'; export interface LivelineTransitionProps { /** Key of the active child to display. Must match a child's `key` prop. */ active: string; /** Chart elements with unique `key` props. */ children: React.ReactElement | React.ReactElement[]; /** Cross-fade duration in milliseconds. */ duration?: number; className?: string; style?: React.CSSProperties; } function prefersReducedMotion() { return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; } const LivelineTransition = React.forwardRef(({ active, children, duration = 300, className = '', style }, ref) => { const childArray = Array.isArray(children) ? children : [children]; const [mounted, setMounted] = useState>(() => new Set([active])); const [visible, setVisible] = useState(active); const initializedRef = useRef(false); useEffect(() => { if (!initializedRef.current) { initializedRef.current = true; return; } if (prefersReducedMotion()) { setMounted(new Set([active])); setVisible(active); return; } setMounted((current) => new Set([...current, active])); let secondFrame = 0; const firstFrame = requestAnimationFrame(() => { secondFrame = requestAnimationFrame(() => setVisible(active)); }); const timer = window.setTimeout(() => { setMounted(new Set([active])); setVisible(active); }, duration + 50); return () => { cancelAnimationFrame(firstFrame); cancelAnimationFrame(secondFrame); clearTimeout(timer); }; }, [active, duration]); return (

{childArray.map((child) => { const key = String(child.key ?? ''); if (!mounted.has(key)) return null; const isActive = key === visible; return (

{child}

); })}

); }); LivelineTransition.displayName = 'LivelineTransition'; export { LivelineTransition }; 50:T104b,.root { display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: 100%; height: 100%; min-width: 0; min-height: 0; } .value { grid-row: 1; display: block; padding-top: 4px; margin-bottom: 8px; font-family: 'SF Mono', Menlo, monospace; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: #111; transition: color 0.3s; } .root[data-theme='dark'] .value { color: rgba(255, 255, 255, 0.85); } .controls { grid-row: 2; display: flex; max-width: 100%; min-width: 0; align-items: center; gap: 6px; padding-right: 4px; margin-bottom: 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: thin; } .controlGroup { position: relative; display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; border-radius: 6px; background: rgba(0, 0, 0, 0.02); transition: opacity 0.4s; } .root[data-theme='dark'] .controlGroup { background: rgba(255, 255, 255, 0.03); } .controlGroup[data-style='rounded'] { padding: 3px; border-radius: 999px; } .root .controlGroup[data-style='text'] { gap: 4px; padding: 0; background: transparent; } .controlGroup[data-visible='false'] { pointer-events: none; opacity: 0; } .indicator { pointer-events: none; position: absolute; top: 2px; height: calc(100% - 4px); border-radius: 4px; background: rgba(0, 0, 0, 0.035); transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .root[data-theme='dark'] .indicator { background: rgba(255, 255, 255, 0.06); } .controlGroup[data-style='rounded'] .indicator { top: 3px; height: calc(100% - 6px); border-radius: 999px; } .control { position: relative; z-index: 1; display: inline-flex; min-width: 0; align-items: center; gap: 4px; padding: 3px 8px; border: 0; border-radius: 4px; background: transparent; color: rgba(0, 0, 0, 0.22); font: 400 11px/16px system-ui, -apple-system, sans-serif; white-space: nowrap; cursor: pointer; transition: opacity 0.2s, color 0.2s, background 0.15s; } .controlGroup[data-style='rounded'] .control { border-radius: 999px; } .controlGroup[data-style='text'] .control { padding: 2px 6px; } .root[data-theme='dark'] .control { color: rgba(255, 255, 255, 0.25); } .control[data-active] { font-weight: 600; color: rgba(0, 0, 0, 0.55); } .root[data-theme='dark'] .control[data-active] { color: rgba(255, 255, 255, 0.7); } .control:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; } .controlGroup[data-style] .iconControl { padding: 5px 7px; } .compactControl { padding: 5px 7px; gap: 0; } .controlGroup[data-style='text'] .compactControl { padding: 2px 4px; } .controlGroup:not([data-style='text']) [data-slot='liveline-window-control'] { padding: 3px 10px; } .root [data-slot='liveline-series-control'] { font-weight: 500; } .swatch { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; transition: opacity 0.2s; } .root [data-slot='liveline-series-control']:not([data-active]), .root [data-slot='liveline-series-control']:not([data-active]) .swatch { opacity: 0.4; } .root [data-slot='liveline-series-control'][data-active] { background: rgba(0, 0, 0, 0.035); } .root[data-theme='dark'] [data-slot='liveline-series-control'][data-active] { background: rgba(255, 255, 255, 0.06); } .root .controlGroup[data-style='text'] [data-slot='liveline-series-control'][data-active] { background: transparent; } .compactControl .swatch { width: 8px; height: 8px; } .surface { position: relative; grid-row: 3; width: 100%; height: 100%; min-width: 0; min-height: 0; touch-action: pan-y; } .canvas { display: block; } .transition { position: relative; width: 100%; height: 100%; } .transitionLayer { pointer-events: none; position: absolute; inset: 0; opacity: 0; transition-property: opacity; transition-timing-function: ease; } .transitionLayer[data-active] { pointer-events: auto; opacity: 1; } @media (prefers-reduced-motion: reduce) { .value, .indicator, .control, .controlGroup, .transitionLayer { transition-duration: 0.01ms !important; } } 4b:["$","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,["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/liveline-core","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/liveline/liveline.tsx","content":"$4e","type":"registry:ui","target":"components/ui/liveline/liveline.tsx"},{"path":"packages/react/src/components/liveline/liveline-transition.tsx","content":"$4f","type":"registry:ui","target":"components/ui/liveline/liveline-transition.tsx"},{"path":"packages/styles/scss/components/liveline.module.scss","content":"$50","type":"registry:file","target":"components/ui/liveline/liveline.module.scss"},{"path":"packages/react/src/components/liveline/index.ts","content":"export { Liveline, type LivelineProps } from './liveline';\nexport { LivelineTransition, type LivelineTransitionProps } from './liveline-transition';\nexport type {\n\tBadgeVariant,\n\tCandlePoint,\n\tDegenOptions,\n\tHoverPoint,\n\tLivelineOptions,\n\tLivelinePoint,\n\tLivelineSeries,\n\tMomentum,\n\tOrderbookData,\n\tPadding,\n\tReferenceLine,\n\tThemeMode,\n\tWindowOption,\n\tWindowStyle,\n} from '../lib/liveline';\n","type":"registry:ui","target":"components/ui/liveline/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]