@sybilion/uilib 1.3.0 → 1.3.1

package/dist/esm/components/ui/Chart/lightweight/quantileBandCustomSeries.js

@@ -0,0 +1,147 @@
+import { customSeriesDefaultOptions } from 'lightweight-charts';
+
+/** Catmull–Rom segment chain → cubic Béziers (matches curved line feel). */
+function appendCatmullRomBezierChain(ctx, pts, startWithMoveTo) {
+    if (pts.length < 2)
+        return;
+    if (pts.length === 2) {
+        if (startWithMoveTo)
+            ctx.moveTo(pts[0].x, pts[0].y);
+        ctx.lineTo(pts[1].x, pts[1].y);
+        return;
+    }
+    if (startWithMoveTo) {
+        ctx.moveTo(pts[0].x, pts[0].y);
+    }
+    for (let i = 0; i < pts.length - 1; i += 1) {
+        const p0 = pts[Math.max(0, i - 1)];
+        const p1 = pts[i];
+        const p2 = pts[i + 1];
+        const p3 = pts[Math.min(pts.length - 1, i + 2)];
+        const cp1x = p1.x + (p2.x - p0.x) / 6;
+        const cp1y = p1.y + (p2.y - p0.y) / 6;
+        const cp2x = p2.x - (p3.x - p1.x) / 6;
+        const cp2y = p2.y - (p3.y - p1.y) / 6;
+        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
+    }
+}
+class QuantileBandPaneRenderer {
+    getData;
+    getStyle;
+    isWhitespaceFn;
+    constructor(getData, getStyle, isWhitespaceFn) {
+        this.getData = getData;
+        this.getStyle = getStyle;
+        this.isWhitespaceFn = isWhitespaceFn;
+    }
+    draw(target, priceConverter) {
+        const pane = this.getData();
+        if (!pane?.bars?.length) {
+            return;
+        }
+        const style = this.getStyle();
+        const segments = [];
+        for (const bar of pane.bars) {
+            const d = bar.originalData;
+            if (this.isWhitespaceFn(d)) {
+                continue;
+            }
+            const p = d;
+            const yU = priceConverter(p.upper);
+            const yL = priceConverter(p.lower);
+            if (yU === null || yL === null) {
+                continue;
+            }
+            segments.push({ x: bar.x, yU, yL });
+        }
+        if (segments.length < 2) {
+            return;
+        }
+        target.useMediaCoordinateSpace(({ context }) => {
+            const opacity = typeof style.strokeOpacity === 'number'
+                ? style.strokeOpacity
+                : undefined;
+            const prevAlpha = context.globalAlpha;
+            const upper = segments.map(s => ({ x: s.x, y: s.yU }));
+            const lowerRev = segments
+                .map(s => ({ x: s.x, y: s.yL }))
+                .reverse();
+            context.beginPath();
+            appendCatmullRomBezierChain(context, upper, true);
+            const last = segments[segments.length - 1];
+            context.lineTo(last.x, last.yL);
+            appendCatmullRomBezierChain(context, lowerRev, false);
+            context.closePath();
+            context.fillStyle = style.fill;
+            context.fill();
+            const sw = style.strokeWidth;
+            if (sw > 0) {
+                if (opacity !== undefined)
+                    context.globalAlpha = opacity;
+                context.lineWidth = sw;
+                context.strokeStyle = style.stroke ?? style.fill;
+                if (style.strokeDasharray) {
+                    const parts = style.strokeDasharray
+                        .split(/[\s,]+/)
+                        .map(Number)
+                        .filter(n => Number.isFinite(n));
+                    if (parts.length)
+                        context.setLineDash(parts);
+                    else
+                        context.setLineDash([]);
+                }
+                else {
+                    context.setLineDash([]);
+                }
+                context.stroke();
+                context.setLineDash([]);
+            }
+            context.globalAlpha = prevAlpha;
+        });
+    }
+}
+class QuantileBandPaneView {
+    _paneData;
+    _style;
+    constructor(initialStyle) {
+        this._style = initialStyle;
+    }
+    updateStyle(style) {
+        this._style = style;
+    }
+    renderer() {
+        return new QuantileBandPaneRenderer(() => this._paneData, () => this._style, (d) => this.isWhitespace(d));
+    }
+    update(paneData, seriesOptions) {
+        this._paneData = paneData;
+        const c = seriesOptions.color;
+        if (typeof c === 'string') {
+            this._style = { ...this._style, fill: c };
+        }
+    }
+    priceValueBuilder(plotRow) {
+        if (this.isWhitespace(plotRow)) {
+            return [];
+        }
+        const p = plotRow;
+        return [p.lower, p.upper, (p.lower + p.upper) / 2];
+    }
+    isWhitespace(data) {
+        const row = data;
+        if (typeof row.lower !== 'number' ||
+            typeof row.upper !== 'number' ||
+            !Number.isFinite(row.lower) ||
+            !Number.isFinite(row.upper)) {
+            return true;
+        }
+        return false;
+    }
+    defaultOptions() {
+        return customSeriesDefaultOptions;
+    }
+    destroy() {
+        this._paneData = undefined;
+    }
+}
+
+export { QuantileBandPaneView };

package/dist/esm/components/ui/Chart/quantileBandConeChartData.js

@@ -0,0 +1,131 @@
+function isFiniteBandTuple(v) {
+    return (Array.isArray(v) &&
+        v.length === 2 &&
+        typeof v[0] === 'number' &&
+        typeof v[1] === 'number' &&
+        Number.isFinite(v[0]) &&
+        Number.isFinite(v[1]));
+}
+/**
+ * Matches ChartAreaInteractive `mode="intervals"`: cone / fan chart hand-off — collapse the
+ * interval to a point at the historical→forecast boundary, then expand along forecast anchors.
+ * (Same rules as `useQuantileBands`, without requiring `ForecastData` — reads tuples from each row.)
+ */
+function applyQuantileBandConeToChartData(chartData, bandKey) {
+    if (!chartData.length)
+        return chartData;
+    const originalBandByDate = new Map();
+    for (const p of chartData) {
+        const t = p[bandKey];
+        if (isFiniteBandTuple(t))
+            originalBandByDate.set(p.date, [t[0], t[1]]);
+    }
+    const forecastDateList = [...originalBandByDate.keys()].sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+    if (forecastDateList.length === 0)
+        return chartData;
+    const forecastDatesSet = new Set(forecastDateList);
+    const dateToQuantileIndex = new Map();
+    forecastDateList.forEach((d, i) => dateToQuantileIndex.set(d, i));
+    const clonedData = [...chartData];
+    const historicalPoints = clonedData.filter(p => p.historical !== undefined &&
+        p.historical !== null &&
+        typeof p.historical === 'number' &&
+        Number.isFinite(p.historical));
+    const lastHistoricalPoint = historicalPoints.length > 0
+        ? historicalPoints[historicalPoints.length - 1]
+        : null;
+    const lastHistoricalDate = lastHistoricalPoint?.date;
+    const lastHistoricalValue = lastHistoricalPoint?.historical;
+    const firstForecastDate = forecastDateList[0];
+    const firstForecastDateObj = firstForecastDate
+        ? new Date(firstForecastDate)
+        : null;
+    const lastHistoricalDateObj = lastHistoricalDate
+        ? new Date(lastHistoricalDate)
+        : null;
+    const hasGap = !!lastHistoricalDate &&
+        !!firstForecastDate &&
+        lastHistoricalValue !== undefined &&
+        firstForecastDateObj &&
+        lastHistoricalDateObj &&
+        firstForecastDateObj.getTime() > lastHistoricalDateObj.getTime();
+    const needsBridgePoint = !!lastHistoricalDate &&
+        !!firstForecastDate &&
+        lastHistoricalValue !== undefined &&
+        firstForecastDateObj &&
+        lastHistoricalDateObj &&
+        firstForecastDateObj.getTime() <= lastHistoricalDateObj.getTime();
+    let bridgePoint = null;
+    let pointBeforeForecast = null;
+    if (needsBridgePoint && historicalPoints.length > 0) {
+        bridgePoint =
+            firstForecastDateObj &&
+                lastHistoricalDateObj &&
+                firstForecastDateObj.getTime() === lastHistoricalDateObj.getTime()
+                ? lastHistoricalPoint
+                : [...historicalPoints]
+                    .reverse()
+                    .find(p => firstForecastDateObj &&
+                    new Date(p.date).getTime() < firstForecastDateObj.getTime()) || lastHistoricalPoint;
+        if (firstForecastDateObj) {
+            pointBeforeForecast =
+                historicalPoints.findLast(p => new Date(p.date).getTime() < firstForecastDateObj.getTime()) ?? null;
+        }
+    }
+    return clonedData.map(point => {
+        const newPoint = { ...point };
+        if (hasGap &&
+            point.date === lastHistoricalDate &&
+            lastHistoricalValue !== undefined) {
+            newPoint[bandKey] = [lastHistoricalValue, lastHistoricalValue];
+        }
+        const isBridgePointDate = needsBridgePoint &&
+            bridgePoint &&
+            bridgePoint.historical !== undefined &&
+            point.date === bridgePoint.date;
+        const isPointBeforeForecast = needsBridgePoint &&
+            pointBeforeForecast &&
+            pointBeforeForecast.historical !== undefined &&
+            point.date === pointBeforeForecast.date;
+        const isAlsoForecastDate = forecastDatesSet.has(point.date);
+        if (isPointBeforeForecast && !isAlsoForecastDate) {
+            newPoint[bandKey] = [
+                pointBeforeForecast.historical,
+                pointBeforeForecast.historical,
+            ];
+        }
+        else if (isBridgePointDate && !isAlsoForecastDate) {
+            newPoint[bandKey] = [
+                bridgePoint.historical,
+                bridgePoint.historical,
+            ];
+        }
+        if (forecastDatesSet.has(point.date)) {
+            const quantileIndex = dateToQuantileIndex.get(point.date);
+            if (quantileIndex !== undefined) {
+                const bandValues = originalBandByDate.get(point.date);
+                if (bandValues) {
+                    const isBridgePointDateForecast = needsBridgePoint &&
+                        bridgePoint &&
+                        point.date === bridgePoint.date &&
+                        bridgePoint.historical !== undefined;
+                    if (isBridgePointDateForecast && quantileIndex === 0) {
+                        newPoint[bandKey] = [
+                            bridgePoint.historical,
+                            bandValues[1],
+                        ];
+                    }
+                    else {
+                        newPoint[bandKey] = bandValues;
+                    }
+                }
+                else {
+                    delete newPoint[bandKey];
+                }
+            }
+        }
+        return newPoint;
+    });
+}
+
+export { applyQuantileBandConeToChartData };

package/dist/esm/components/ui/ChartAreaInteractive/overlays/useQuantileBands.js

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { applyQuantileBandConeToChartData } from '../../Chart/quantileBandConeChartData.js';
 
 /**
  * Hook to transform chart data and create quantile band configuration
@@ -12,128 +13,29 @@ function useQuantileBands({ color, chartData, selectedForecastId, forecastData,
         const forecastDataForSelected = forecastData[selectedForecastId];
         const allQuantilesData = forecastDataForSelected.allQuantiles;
         const clonedData = [...chartData];
-        // Get forecast dates to map quantile array indices correctly
         const forecastDates = forecastDataForSelected.dates || [];
         const forecastDatesSet = new Set(forecastDates);
-        // Find the last historical point for connection
-        const historicalPoints = clonedData.filter(point => point.historical !== undefined);
-        const lastHistoricalPoint = historicalPoints.length > 0
-            ? historicalPoints[historicalPoints.length - 1]
-            : null;
-        const lastHistoricalDate = lastHistoricalPoint?.date;
-        const lastHistoricalValue = lastHistoricalPoint?.historical;
-        // Get first forecast date
-        const firstForecastDate = forecastDates[0];
-        const firstForecastDateObj = firstForecastDate
-            ? new Date(firstForecastDate)
-            : null;
-        const lastHistoricalDateObj = lastHistoricalDate
-            ? new Date(lastHistoricalDate)
-            : null;
-        // Check if there's a gap between historical and forecast data (forecast starts after historical)
-        const hasGap = lastHistoricalDate &&
-            firstForecastDate &&
-            lastHistoricalValue !== undefined &&
-            firstForecastDateObj &&
-            lastHistoricalDateObj &&
-            firstForecastDateObj.getTime() > lastHistoricalDateObj.getTime();
-        // Check if forecast starts before or at last historical point (need bridge point)
-        const needsBridgePoint = lastHistoricalDate &&
-            firstForecastDate &&
-            lastHistoricalValue !== undefined &&
-            firstForecastDateObj &&
-            lastHistoricalDateObj &&
-            firstForecastDateObj.getTime() <= lastHistoricalDateObj.getTime();
-        // Find bridge point when forecast starts before or at last historical point
-        let bridgePoint = null;
-        let pointBeforeForecast = null;
-        if (needsBridgePoint && historicalPoints.length > 0) {
-            // Find the last historical point before or at the first forecast date
-            // If dates are equal, use lastHistoricalPoint; otherwise find the point before
-            bridgePoint =
-                firstForecastDateObj &&
-                    lastHistoricalDateObj &&
-                    firstForecastDateObj.getTime() === lastHistoricalDateObj.getTime()
-                    ? lastHistoricalPoint
-                    : [...historicalPoints]
-                        .reverse()
-                        .find(p => firstForecastDateObj &&
-                        new Date(p.date).getTime() < firstForecastDateObj.getTime()) || lastHistoricalPoint;
-            // Find the actual point BEFORE the first forecast date for connection
-            if (firstForecastDateObj) {
-                pointBeforeForecast = [...historicalPoints].findLast(p => new Date(p.date).getTime() < firstForecastDateObj.getTime());
-            }
-        }
-        // Create a map from date to quantile array index
         const dateToQuantileIndex = new Map();
         forecastDates.forEach((date, index) => {
             dateToQuantileIndex.set(date, index);
         });
-        const result = clonedData.map(point => {
+        const withRawBands = clonedData.map(point => {
             const newPoint = { ...point };
-            // If there's a gap and this is the last historical point, add band data for connection
-            if (hasGap &&
-                point.date === lastHistoricalDate &&
-                lastHistoricalValue !== undefined) {
-                // Set zero-width band at the last historical value for visual connection
-                newPoint[bandKey] = [lastHistoricalValue, lastHistoricalValue];
-            }
-            // If forecast starts before or at last historical point, add bridge point connection
-            // Set connection band at the point BEFORE the first forecast date (if exists)
-            const isBridgePointDate = needsBridgePoint &&
-                bridgePoint &&
-                bridgePoint.historical !== undefined &&
-                point.date === bridgePoint.date;
-            const isPointBeforeForecast = needsBridgePoint &&
-                pointBeforeForecast &&
-                pointBeforeForecast.historical !== undefined &&
-                point.date === pointBeforeForecast.date;
-            const isAlsoForecastDate = forecastDatesSet.has(point.date);
-            // Set zero-width connection band at the point BEFORE forecast starts
-            if (isPointBeforeForecast && !isAlsoForecastDate) {
-                newPoint[bandKey] = [
-                    pointBeforeForecast.historical,
-                    pointBeforeForecast.historical,
-                ];
-            }
-            else if (isBridgePointDate && !isAlsoForecastDate) {
-                // Fallback: if no point before forecast, use bridge point
-                newPoint[bandKey] = [
-                    bridgePoint.historical,
-                    bridgePoint.historical,
-                ];
-            }
-            // Only update band data for forecast dates
             if (forecastDatesSet.has(point.date)) {
                 const quantileIndex = dateToQuantileIndex.get(point.date);
                 if (quantileIndex !== undefined) {
                     const bandValues = getBandValues(point.date, quantileIndex, allQuantilesData);
                     if (bandValues) {
-                        // If this is also the bridge point (forecast starts at same date as last historical),
-                        // start the band from the historical value for smooth connection
-                        const isBridgePointDate = needsBridgePoint &&
-                            bridgePoint &&
-                            point.date === bridgePoint.date &&
-                            bridgePoint.historical !== undefined;
-                        if (isBridgePointDate && quantileIndex === 0) {
-                            // Start from historical value, expand to forecast upper bound
-                            newPoint[bandKey] = [bridgePoint.historical, bandValues[1]];
-                        }
-                        else {
-                            newPoint[bandKey] = bandValues;
-                        }
+                        newPoint[bandKey] = bandValues;
                     }
                     else {
-                        // Remove band data if values don't exist
                         delete newPoint[bandKey];
                     }
                 }
             }
-            // For non-forecast dates, preserve existing band data if it exists
-            // This ensures continuity of the band visualization
             return newPoint;
         });
-        return result;
+        return applyQuantileBandConeToChartData(withRawBands, bandKey);
     }, [chartData, selectedForecastId, forecastData, bandKey, getBandValues]);
     const quantileBands = useMemo(() => {
         if (!selectedForecastId || !forecastData[selectedForecastId]) {

package/dist/esm/components/widgets/DriverCard/DriverPerformanceChart.js

@@ -17,6 +17,10 @@ import '../../ui/TextShimmer/TextShimmer.js';
 import '@phosphor-icons/react';
 import '../../ui/AnalysesSelector/AnalysesSelector.styl.js';
 import '../../ui/Chart/components/CustomChartLegend/CustomChartLegend.styl.js';
+import '../../ui/ChartAreaInteractive/ChartLines.js';
+import '../../ui/Skeleton/Skeleton.styl.js';
+import 'lightweight-charts';
+import '../../ui/Chart/lightweight/LightweightForecastChart.styl.js';
 import { ChartEmptyState } from '../../ui/Chart/components/ChartEmptyState/ChartEmptyState.js';
 import S from './DriverPerformanceChart.styl.js';
 import { generateDriverChartData } from './driverPerformanceChartData.js';

package/dist/esm/index.js

@@ -103,6 +103,7 @@ export { SignInPage } from './components/widgets/SignInPage/SignInPage.js';
 export { ChartTooltipItem } from './components/ui/Chart/components/ChartTooltipItem.js';
 export { ChartLegendItem } from './components/ui/Chart/components/ChartLegendItem.js';
 export { CustomChartLegend } from './components/ui/Chart/components/CustomChartLegend/CustomChartLegend.js';
+export { LightweightForecastChart } from './components/ui/Chart/lightweight/LightweightForecastChart.js';
 export { ChartEmptyState } from './components/ui/Chart/components/ChartEmptyState/ChartEmptyState.js';
 export { ChartContainer, ChartStyle } from './components/ui/Chart/components/ChartContainer.js';
 export { ChartTooltipContent } from './components/ui/Chart/components/ChartTooltipContent.js';

package/dist/esm/types/src/components/ui/Chart/Chart.d.ts

@@ -10,4 +10,5 @@ export { ChartTooltipItem } from './components/ChartTooltipItem';
 export { ChartLegendItem } from './components/ChartLegendItem';
 export { CustomChartLegend } from './components/CustomChartLegend/CustomChartLegend';
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, BaseChartWrapper, };
+export { LightweightForecastChart, type LightweightForecastChartProps, } from './lightweight/LightweightForecastChart';
 export { ChartEmptyState, type ChartEmptyStateProps, type ChartEmptyStatusTone, } from './components/ChartEmptyState/ChartEmptyState';

package/dist/esm/types/src/components/ui/Chart/lightweight/LightweightForecastChart.d.ts

@@ -0,0 +1,26 @@
+import type { ChartConfig } from '#uilib/components/ui/Chart/Chart.types';
+import type { QuantileBandConfig } from '#uilib/components/ui/Chart/chartForecastVisualization.types';
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
+export interface LightweightForecastChartProps {
+    chartData: ChartDataPoint[];
+    forecastData?: ForecastItemData[];
+    quantileBands?: QuantileBandConfig[];
+    chartConfig?: ChartConfig;
+    historicalLineColor?: string;
+    isDarkTheme: boolean;
+    height?: number;
+    className?: string;
+    hiddenSeries?: Set<string>;
+    onLegendClick?: (data: unknown, index: number, event: unknown) => void;
+    disableForecastHistoricalBridge?: boolean;
+    forecastLineStyle?: 'dashed' | 'solid';
+    formatDate?: (value: string, detailed?: boolean) => string;
+    formatNumber?: (value: number) => string;
+    loading?: boolean;
+    error?: string | null;
+    noDataMessage?: string;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+}
+export declare function LightweightForecastChart(props: LightweightForecastChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chart/lightweight/chartTime.d.ts

@@ -0,0 +1,5 @@
+import type { UTCTimestamp } from 'lightweight-charts';
+/**
+ * Parse `YYYY-MM-DD` dates as UTC midnight → Lightweight Charts unix seconds.
+ */
+export declare function chartDateToUtcTimestamp(dateStr: string): UTCTimestamp;

package/dist/esm/types/src/components/ui/Chart/lightweight/lightweightForecastChart.helpers.d.ts

@@ -0,0 +1,13 @@
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { ChartOptions, DeepPartial, LineData, UTCTimestamp } from 'lightweight-charts';
+import type { QuantileBandCustomData } from './quantileBandCustomSeries';
+export declare function buildLightweightChartOptions(args: {
+    isDarkTheme: boolean;
+    width: number;
+    height: number;
+    autoSize?: boolean;
+}): DeepPartial<ChartOptions>;
+export declare function buildHistoricalLineData(rows: ChartDataPoint[]): LineData<UTCTimestamp>[];
+export declare function buildForecastLineData(rows: ChartDataPoint[], forecastKey: string): LineData<UTCTimestamp>[];
+export declare function buildQuantileBandCustomData(rows: ChartDataPoint[], bandKey: string): QuantileBandCustomData[];
+export declare function findNearestChartRow(rows: ChartDataPoint[], time: UTCTimestamp): ChartDataPoint | null;

package/dist/esm/types/src/components/ui/Chart/lightweight/quantileBandCustomSeries.d.ts

@@ -0,0 +1,24 @@
+import type { CustomData, CustomSeriesOptions, CustomSeriesWhitespaceData, ICustomSeriesPaneRenderer, ICustomSeriesPaneView, PaneRendererCustomData, UTCTimestamp } from 'lightweight-charts';
+export interface QuantileBandCustomData extends CustomData<UTCTimestamp> {
+    lower: number;
+    upper: number;
+}
+export type QuantileBandStyle = {
+    fill: string;
+    stroke?: string;
+    strokeWidth: number;
+    strokeDasharray?: string;
+    strokeOpacity?: number;
+};
+export declare class QuantileBandPaneView implements ICustomSeriesPaneView<UTCTimestamp, QuantileBandCustomData, CustomSeriesOptions> {
+    private _paneData;
+    private _style;
+    constructor(initialStyle: QuantileBandStyle);
+    updateStyle(style: QuantileBandStyle): void;
+    renderer(): ICustomSeriesPaneRenderer;
+    update(paneData: PaneRendererCustomData<UTCTimestamp, QuantileBandCustomData>, seriesOptions: CustomSeriesOptions): void;
+    priceValueBuilder(plotRow: QuantileBandCustomData): number[];
+    isWhitespace(data: QuantileBandCustomData | CustomSeriesWhitespaceData<UTCTimestamp>): data is CustomSeriesWhitespaceData<UTCTimestamp>;
+    defaultOptions(): CustomSeriesOptions;
+    destroy(): void;
+}

package/dist/esm/types/src/components/ui/Chart/quantileBandConeChartData.d.ts

@@ -0,0 +1,7 @@
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+/**
+ * Matches ChartAreaInteractive `mode="intervals"`: cone / fan chart hand-off — collapse the
+ * interval to a point at the historical→forecast boundary, then expand along forecast anchors.
+ * (Same rules as `useQuantileBands`, without requiring `ForecastData` — reads tuples from each row.)
+ */
+export declare function applyQuantileBandConeToChartData(chartData: ChartDataPoint[], bandKey: string): ChartDataPoint[];

package/dist/esm/types/src/docs/pages/LightweightChartPage.d.ts

@@ -0,0 +1 @@
+export default function LightweightChartPage(): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -100,6 +100,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@vimeo/player": "^2.29.3",
     "classnames": "^2.3.2",
+    "lightweight-charts": "^5.0.9",
     "lucide-react": "^0.546.0",
     "motion": "^12.23.12",
     "recharts": "^3.2.1",
@@ -130,7 +131,7 @@
   },
   "devDependencies": {
     "@auth0/auth0-react": "^2.3.1",
-    "@sybilion/platform-sdk": "file:../sdk",
+    "@sybilion/platform-sdk": "file:../platform-sdk",
     "@babel/core": "^7.20.12",
     "@babel/preset-typescript": "^7.21.0",
     "@homecode/ui": "^4.30.6",

package/src/components/ui/Chart/Chart.tsx

@@ -21,6 +21,10 @@ export {
   ChartStyle,
   BaseChartWrapper,
 };
+export {
+  LightweightForecastChart,
+  type LightweightForecastChartProps,
+} from './lightweight/LightweightForecastChart';
 export {
   ChartEmptyState,
   type ChartEmptyStateProps,

package/src/components/ui/Chart/lightweight/LightweightForecastChart.styl

@@ -0,0 +1,25 @@
+.root
+  display flex
+  flex-direction column
+  gap 12px
+  width 100%
+
+.shell
+  position relative
+  width 100%
+
+.host
+  display block
+  width 100%
+  box-sizing border-box
+
+  :global(#tv-attr-logo)
+    display none
+
+.tooltipMove
+  position absolute
+  z-index 5
+  pointer-events none
+
+.footer
+  width 100%

package/src/components/ui/Chart/lightweight/LightweightForecastChart.styl.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'footer': string;
+  'host': string;
+  'root': string;
+  'shell': string;
+  'tooltipMove': string;
+}
+export const cssExports: CssExports;
+export default cssExports;