@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

package/dist/domain/components/timeframe/use-financial-date-range.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DateRangePicker } from '../../../primitives/index.js';
+import { endOfDay } from 'date-fns/endOfDay';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { getDate } from 'date-fns/getDate';
+import { getDaysInMonth } from 'date-fns/getDaysInMonth';
+import { getMonth } from 'date-fns/getMonth';
+import { getYear } from 'date-fns/getYear';
+import { isAfter } from 'date-fns/isAfter';
+import { startOfDay } from 'date-fns/startOfDay';
+import { startOfMonth } from 'date-fns/startOfMonth';
+import { subDays } from 'date-fns/subDays';
+import { fromZonedTime, toZonedTime } from 'date-fns-tz';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { PERIOD } from '../../constants/ranges';
+/**
+ * Converts a calendar range (wall date fields from the two Date instances) into
+ * UTC epoch ms boundaries in `timezone` (full month vs day span, end clamped to "yesterday" when still in the future).
+ */
+export const rangeDatesToFinancialMs = (range, timezone) => {
+    const [startDate, endDate] = range;
+    const startYear = getYear(startDate);
+    const startMonth = getMonth(startDate);
+    const startDay = getDate(startDate);
+    const endYear = getYear(endDate);
+    const endMonth = getMonth(endDate);
+    const endDay = getDate(endDate);
+    const startMonthDate = new Date(startYear, startMonth, 1);
+    const isFullMonth = startYear === endYear &&
+        startMonth === endMonth &&
+        startDay === 1 &&
+        endDay === getDaysInMonth(startMonthDate);
+    let startUtc;
+    let endUtc;
+    if (isFullMonth) {
+        const startInZone = startOfMonth(startMonthDate);
+        const endInZone = endOfMonth(startMonthDate);
+        startUtc = fromZonedTime(startInZone, timezone);
+        endUtc = fromZonedTime(endInZone, timezone);
+    }
+    else {
+        const startInZone = startOfDay(new Date(startYear, startMonth, startDay));
+        const endInZone = endOfDay(new Date(endYear, endMonth, endDay));
+        startUtc = fromZonedTime(startInZone, timezone);
+        endUtc = fromZonedTime(endInZone, timezone);
+    }
+    const now = new Date();
+    const nowInTargetZone = toZonedTime(now, timezone);
+    const nowInZone = startOfDay(nowInTargetZone);
+    const nowUtc = fromZonedTime(nowInZone, timezone);
+    const endDateUtc = fromZonedTime(startOfDay(new Date(endYear, endMonth, endDay)), timezone);
+    let finalEndUtc;
+    if (isAfter(endDateUtc, nowUtc)) {
+        const yesterdayInZone = endOfDay(subDays(nowInTargetZone, 1));
+        finalEndUtc = fromZonedTime(yesterdayInZone, timezone);
+    }
+    else {
+        finalEndUtc = endUtc;
+    }
+    return { start: startUtc.getTime(), end: finalEndUtc.getTime() };
+};
+/**
+ * Resolves the active financial date range (start/end) used by every reporting-section query.
+ *
+ * @category widgets
+ * @domain financial-reporting
+ * @kernelCapability financial-reporting
+ * @tier agent-ready
+ */
+export const useFinancialDateRange = (options) => {
+    const defaultPeriod = options?.defaultPeriod ?? PERIOD.DAILY;
+    const timezone = options?.timezone ?? 'UTC';
+    const [dateRange, setDateRange] = useState(null);
+    const applyWallRange = useCallback((dates, period) => {
+        const ms = rangeDatesToFinancialMs(dates, timezone);
+        if (!ms)
+            return;
+        setDateRange({
+            start: ms.start,
+            end: ms.end,
+            period,
+        });
+    }, [timezone]);
+    const handleRangeChange = useCallback((dates, rangeOptions) => {
+        if (!dates)
+            return;
+        const raw = rangeOptions?.period;
+        const period = raw === PERIOD.DAILY ||
+            raw === PERIOD.MONTHLY ||
+            raw === PERIOD.WEEKLY ||
+            raw === PERIOD.YEARLY
+            ? raw
+            : defaultPeriod;
+        applyWallRange(dates, period);
+    }, [applyWallRange, defaultPeriod]);
+    const seeded = useRef(false);
+    useEffect(() => {
+        if (seeded.current)
+            return;
+        seeded.current = true;
+        const now = new Date();
+        applyWallRange([startOfMonth(now), endOfMonth(now)], defaultPeriod);
+    }, [applyWallRange, defaultPeriod]);
+    const onDateRangeReset = useCallback(() => {
+        const now = new Date();
+        applyWallRange([startOfMonth(now), endOfMonth(now)], defaultPeriod);
+    }, [applyWallRange, defaultPeriod]);
+    const datePicker = useMemo(() => {
+        const selected = dateRange
+            ? {
+                from: toZonedTime(new Date(dateRange.start), timezone),
+                to: toZonedTime(new Date(dateRange.end), timezone),
+            }
+            : undefined;
+        const periodForPicker = dateRange?.period ?? defaultPeriod;
+        const onSelect = (next) => {
+            if (!next?.from)
+                return;
+            const from = startOfDay(next.from);
+            const to = endOfDay(next.to ?? next.from);
+            applyWallRange([from, to], periodForPicker);
+        };
+        return _jsx(DateRangePicker, { selected: selected, onSelect: onSelect });
+    }, [applyWallRange, dateRange, defaultPeriod, timezone]);
+    return {
+        dateRange,
+        handleRangeChange,
+        onDateRangeReset,
+        datePicker,
+    };
+};

package/dist/domain/components/timeline-chart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './timeline-chart';
+export * from './timeline-chart.types';

package/dist/domain/components/timeline-chart/index.js

@@ -0,0 +1,2 @@
+export * from './timeline-chart';
+export * from './timeline-chart.types';

package/dist/domain/components/timeline-chart/timeline-bar.d.ts

@@ -0,0 +1,10 @@
+export type TimelineBarProps = {
+    fromTs: number;
+    toTs: number;
+    minTs: number;
+    maxTs: number;
+    color: string;
+    label: string;
+    rowLabel: string;
+};
+export declare const TimelineBar: import("react").MemoExoticComponent<({ fromTs, toTs, minTs, maxTs, color, label, rowLabel }: TimelineBarProps) => import("react").JSX.Element | null>;

package/dist/domain/components/timeline-chart/timeline-bar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { format } from 'date-fns/format';
+import { SimpleTooltip } from '../../../primitives/index.js';
+export const TimelineBar = memo(({ fromTs, toTs, minTs, maxTs, color, label, rowLabel }) => {
+    const range = maxTs - minTs;
+    if (range <= 0)
+        return null;
+    const leftPercent = ((fromTs - minTs) / range) * 100;
+    const widthPercent = Math.max(((toTs - fromTs) / range) * 100, 0.5);
+    const formatTime = (ts) => format(new Date(ts), 'dd-MM HH:mm');
+    const tooltipContent = (_jsxs("div", { className: "mdk-timeline-chart__tooltip", children: [_jsx("div", { className: "mdk-timeline-chart__tooltip-title", children: label }), _jsxs("div", { className: "mdk-timeline-chart__tooltip-row", children: [_jsx("span", { className: "mdk-timeline-chart__tooltip-label", children: "Row:" }), _jsx("span", { className: "mdk-timeline-chart__tooltip-value", children: rowLabel })] }), _jsxs("div", { className: "mdk-timeline-chart__tooltip-row", children: [_jsx("span", { className: "mdk-timeline-chart__tooltip-label", children: "From:" }), _jsx("span", { className: "mdk-timeline-chart__tooltip-value", children: formatTime(fromTs) })] }), _jsxs("div", { className: "mdk-timeline-chart__tooltip-row", children: [_jsx("span", { className: "mdk-timeline-chart__tooltip-label", children: "To:" }), _jsx("span", { className: "mdk-timeline-chart__tooltip-value", children: formatTime(toTs) })] })] }));
+    return (_jsx(SimpleTooltip, { content: tooltipContent, side: "top", children: _jsx("div", { className: "mdk-timeline-chart__bar", style: {
+                left: `${leftPercent}%`,
+                width: `${widthPercent}%`,
+                backgroundColor: color,
+            } }) }));
+});
+TimelineBar.displayName = 'TimelineBar';

package/dist/domain/components/timeline-chart/timeline-chart.d.ts

@@ -0,0 +1,24 @@
+import type { TimelineChartData, TimelineChartProps } from './timeline-chart.types';
+import './timeline-chart.scss';
+export declare const emptyTimelineChartData: TimelineChartData;
+/**
+ * Discrete-event timeline chart (e.g. miner state over time) with a category
+ * legend. Supports streaming updates via `newData`.
+ *
+ * @category charts
+ * @kernelCapability device-telemetry
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <TimelineChart
+ *   initialData={initialData}
+ *   newData={liveTail}
+ *   range={{ start, end }}
+ *   title="Miner state"
+ *   height={240}
+ * />
+ * ```
+ * @tier agent-ready
+ */
+export declare const TimelineChart: import("react").MemoExoticComponent<({ initialData, newData, skipUpdates, range, axisTitleText, isLoading, title, height, }: TimelineChartProps) => import("react").JSX.Element>;

package/dist/domain/components/timeline-chart/timeline-chart.example.d.ts

@@ -0,0 +1 @@
+export declare const TimelineChartExample: () => import("react").JSX.Element;

package/dist/domain/components/timeline-chart/timeline-chart.example.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for TimelineChart.
+ */
+import { TimelineChart } from '@tetherto/mdk-react-devkit';
+const NOW = Date.now();
+const HOUR = 60 * 60 * 1000;
+const mockTimelineData = {
+    labels: ['miner-01', 'miner-02', 'miner-03'],
+    datasets: [
+        {
+            label: 'miner-01',
+            data: [
+                { x: [NOW - 6 * HOUR, NOW - 4 * HOUR], y: 'miner-01', mode: 'normal' },
+                { x: [NOW - 4 * HOUR, NOW - HOUR], y: 'miner-01', mode: 'boost' },
+            ],
+        },
+        {
+            label: 'miner-02',
+            data: [{ x: [NOW - 6 * HOUR, NOW], y: 'miner-02', mode: 'normal' }],
+        },
+    ],
+};
+export const TimelineChartExample = () => {
+    return (_jsx(TimelineChart, { initialData: mockTimelineData, range: { min: NOW - 6 * HOUR, max: NOW }, title: "Miner activity", height: 240 }));
+};

package/dist/domain/components/timeline-chart/timeline-chart.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState } from 'react';
+import { ChartContainer } from '../../../primitives/index.js';
+import { TimelineLegend } from './timeline-legend';
+import { TimelineVisualization } from './timeline-visualization';
+const DEFAULT_AXIS_TITLES = { x: 'Time', y: '' };
+export const emptyTimelineChartData = { labels: [], datasets: [] };
+/**
+ * Discrete-event timeline chart (e.g. miner state over time) with a category
+ * legend. Supports streaming updates via `newData`.
+ *
+ * @category charts
+ * @kernelCapability device-telemetry
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <TimelineChart
+ *   initialData={initialData}
+ *   newData={liveTail}
+ *   range={{ start, end }}
+ *   title="Miner state"
+ *   height={240}
+ * />
+ * ```
+ * @tier agent-ready
+ */
+export const TimelineChart = memo(({ initialData, newData, skipUpdates = false, range, axisTitleText = DEFAULT_AXIS_TITLES, isLoading = false, title, height, }) => {
+    const [chartData, setChartData] = useState(initialData);
+    useEffect(() => {
+        setChartData(initialData);
+    }, [initialData]);
+    useEffect(() => {
+        if (skipUpdates || !newData)
+            return;
+        setChartData((prevData) => {
+            const mergedLabels = new Set([...prevData.labels, ...newData.labels]);
+            return {
+                labels: Array.from(mergedLabels),
+                datasets: [...prevData.datasets, ...newData.datasets],
+            };
+        });
+    }, [newData, skipUpdates]);
+    const isEmpty = !isLoading && chartData.labels.length === 0;
+    return (_jsx("div", { className: "mdk-timeline-chart", style: height ? { height } : undefined, children: _jsxs(ChartContainer, { title: title, loading: isLoading, empty: isEmpty, emptyMessage: "No timeline data available", children: [_jsx(TimelineLegend, { datasets: chartData.datasets }), _jsx(TimelineVisualization, { chartData: chartData, range: range, axisTitleText: axisTitleText })] }) }));
+});
+TimelineChart.displayName = 'TimelineChart';

package/dist/domain/components/timeline-chart/timeline-chart.types.d.ts

@@ -0,0 +1,56 @@
+export type TimelineChartDataPoint = {
+    x: [number, number];
+    y: string | undefined;
+};
+export type TimelineChartDataset = {
+    label: string;
+    data: TimelineChartDataPoint[];
+    borderColor?: string[];
+    backgroundColor?: string[];
+    color?: string;
+};
+export type TimelineChartData = {
+    /** Row labels, one row each; a data point lands in the row whose label equals its `y`. Nothing renders when empty */
+    labels: string[];
+    /** Bar series; each dataset's `label` is its tooltip title and legend entry */
+    datasets: TimelineChartDataset[];
+};
+export type ChartRange = {
+    /** Left edge of the time axis (`Date` or epoch ms); without a range the axis spans the data */
+    min: Date | number;
+    /** Right edge of the time axis (`Date` or epoch ms) */
+    max: Date | number;
+};
+export type AxisTitleText = {
+    /** Title under the time axis; hidden when empty */
+    x: string;
+    /** Title beside the row labels; hidden when empty */
+    y: string;
+};
+export type TimelineChartProps = {
+    /** Initial timeline data */
+    initialData: TimelineChartData;
+    /** Streaming updates appended to the initial data */
+    newData?: TimelineChartData;
+    /**
+     * Ignore `newData`
+     * @default false
+     */
+    skipUpdates?: boolean;
+    /** Visible time window */
+    range?: ChartRange;
+    /**
+     * Axis title strings
+     * @default { x: "Time", y: "" }
+     */
+    axisTitleText?: AxisTitleText;
+    /**
+     * Show loader
+     * @default false
+     */
+    isLoading?: boolean;
+    /** Chart title */
+    title?: string;
+    /** Chart pixel height */
+    height?: number;
+};

package/dist/domain/components/timeline-chart/timeline-chart.types.js

@@ -0,0 +1 @@
+export {};

package/dist/domain/components/timeline-chart/timeline-legend.d.ts

@@ -0,0 +1,5 @@
+import type { TimelineChartDataset } from './timeline-chart.types';
+export type TimelineLegendProps = {
+    datasets: TimelineChartDataset[];
+};
+export declare const TimelineLegend: import("react").MemoExoticComponent<({ datasets }: TimelineLegendProps) => import("react").JSX.Element | null>;

package/dist/domain/components/timeline-chart/timeline-legend.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+export const TimelineLegend = memo(({ datasets }) => {
+    const uniqueLabels = useMemo(() => {
+        const labelsMap = new Map();
+        for (const dataset of datasets) {
+            if (!labelsMap.has(dataset.label)) {
+                const color = dataset.color ||
+                    dataset.backgroundColor?.[0] ||
+                    dataset.borderColor?.[0] ||
+                    'var(--mdk-color-primary)';
+                labelsMap.set(dataset.label, color);
+            }
+        }
+        return Array.from(labelsMap.entries());
+    }, [datasets]);
+    if (uniqueLabels.length === 0)
+        return null;
+    return (_jsx("div", { className: "mdk-timeline-chart__legend", children: uniqueLabels.map(([label, color]) => (_jsxs("div", { className: "mdk-timeline-chart__legend-item", children: [_jsx("span", { className: "mdk-timeline-chart__legend-color", style: { backgroundColor: color } }), _jsx("span", { className: "mdk-timeline-chart__legend-label", children: label })] }, label))) }));
+});
+TimelineLegend.displayName = 'TimelineLegend';

package/dist/domain/components/timeline-chart/timeline-row.d.ts

@@ -0,0 +1,8 @@
+import type { TimelineChartDataset } from './timeline-chart.types';
+export type TimelineRowProps = {
+    rowLabel: string;
+    datasets: TimelineChartDataset[];
+    minTs: number;
+    maxTs: number;
+};
+export declare const TimelineRow: import("react").MemoExoticComponent<({ rowLabel, datasets, minTs, maxTs }: TimelineRowProps) => import("react").JSX.Element>;

package/dist/domain/components/timeline-chart/timeline-row.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { TimelineBar } from './timeline-bar';
+export const TimelineRow = memo(({ rowLabel, datasets, minTs, maxTs }) => {
+    const bars = useMemo(() => {
+        const result = [];
+        for (const dataset of datasets) {
+            for (let i = 0; i < dataset.data.length; i++) {
+                const point = dataset.data[i];
+                if (point && point.y === rowLabel) {
+                    const color = dataset.color ||
+                        dataset.backgroundColor?.[i] ||
+                        dataset.borderColor?.[i] ||
+                        'var(--mdk-color-primary)';
+                    result.push({
+                        fromTs: point.x[0],
+                        toTs: point.x[1],
+                        color,
+                        label: dataset.label,
+                    });
+                }
+            }
+        }
+        return result.sort((a, b) => a.fromTs - b.fromTs);
+    }, [datasets, rowLabel]);
+    return (_jsxs("div", { className: "mdk-timeline-chart__row", children: [_jsx("div", { className: "mdk-timeline-chart__row-label", title: rowLabel, children: rowLabel }), _jsx("div", { className: "mdk-timeline-chart__row-track", children: bars.map((bar, index) => (_jsx(TimelineBar, { fromTs: bar.fromTs, toTs: bar.toTs, minTs: minTs, maxTs: maxTs, color: bar.color, label: bar.label, rowLabel: rowLabel }, `${bar.fromTs}-${bar.toTs}-${index}`))) })] }));
+});
+TimelineRow.displayName = 'TimelineRow';

package/dist/domain/components/timeline-chart/timeline-visualization.d.ts

@@ -0,0 +1,7 @@
+import type { AxisTitleText, ChartRange, TimelineChartData } from './timeline-chart.types';
+export type TimelineVisualizationProps = {
+    chartData: TimelineChartData;
+    range?: ChartRange;
+    axisTitleText: AxisTitleText;
+};
+export declare const TimelineVisualization: import("react").MemoExoticComponent<({ chartData, range, axisTitleText }: TimelineVisualizationProps) => import("react").JSX.Element | null>;

package/dist/domain/components/timeline-chart/timeline-visualization.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { format } from 'date-fns/format';
+import { subWeeks } from 'date-fns/subWeeks';
+import { TimelineRow } from './timeline-row';
+export const TimelineVisualization = memo(({ chartData, range, axisTitleText }) => {
+    const { minTs, maxTs, timeLabels } = useMemo(() => {
+        let min;
+        let max;
+        if (range) {
+            min = typeof range.min === 'number' ? range.min : range.min.getTime();
+            max = typeof range.max === 'number' ? range.max : range.max.getTime();
+        }
+        else {
+            min = Infinity;
+            max = -Infinity;
+            for (const dataset of chartData.datasets) {
+                for (const point of dataset.data) {
+                    if (point.x[0] < min)
+                        min = point.x[0];
+                    if (point.x[1] > max)
+                        max = point.x[1];
+                }
+            }
+            if (!Number.isFinite(min)) {
+                const now = new Date();
+                min = subWeeks(now, 1).getTime();
+                max = now.getTime() + 60 * 1000;
+            }
+        }
+        const labels = [];
+        if (max > min) {
+            const steps = 6;
+            const stepSize = (max - min) / steps;
+            for (let i = 0; i <= steps; i++) {
+                const ts = min + stepSize * i;
+                labels.push(format(new Date(ts), 'dd-MM HH:mm'));
+            }
+        }
+        return { minTs: min, maxTs: max, timeLabels: labels };
+    }, [chartData, range]);
+    if (chartData.labels.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "mdk-timeline-chart__visualization", children: [axisTitleText.y && (_jsx("div", { className: "mdk-timeline-chart__y-axis-title", children: axisTitleText.y })), _jsxs("div", { className: "mdk-timeline-chart__content", children: [_jsx("div", { className: "mdk-timeline-chart__rows", children: chartData.labels.map((label) => (_jsx(TimelineRow, { rowLabel: label, datasets: chartData.datasets, minTs: minTs, maxTs: maxTs }, label))) }), _jsxs("div", { className: "mdk-timeline-chart__time-axis", children: [_jsx("div", { className: "mdk-timeline-chart__time-axis-labels", children: timeLabels.map((label, index) => (_jsx("span", { className: "mdk-timeline-chart__time-label", children: label }, index))) }), axisTitleText.x && (_jsx("div", { className: "mdk-timeline-chart__x-axis-title", children: axisTitleText.x }))] })] })] }));
+});
+TimelineVisualization.displayName = 'TimelineVisualization';

package/dist/domain/components/widget-top-row/alarm-info.d.ts

@@ -0,0 +1,12 @@
+import type { JSX, ReactNode } from 'react';
+import type { AlertRecord } from '../../types/alerts';
+export type AlarmInfoItem = AlertRecord;
+export type AlarmInfoProps = {
+    title: string;
+    icon: ReactNode;
+    items?: AlarmInfoItem[];
+};
+export declare function AlarmInfo({ title, icon, items }: AlarmInfoProps): JSX.Element | null;
+export declare namespace AlarmInfo {
+    var displayName: string;
+}

package/dist/domain/components/widget-top-row/alarm-info.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _isArray from 'lodash/isArray';
+import _isEmpty from 'lodash/isEmpty';
+import _map from 'lodash/map';
+import _split from 'lodash/split';
+import { SimpleTooltip } from '../../../primitives/index.js';
+import { useTimezoneFormatter } from '@tetherto/mdk-react-adapter';
+import { getAlertsDescription } from '../alerts/alerts-utils';
+export const AlarmInfo = ({ title, icon, items }) => {
+    const { getFormattedDate } = useTimezoneFormatter();
+    if (_isEmpty(items)) {
+        return null;
+    }
+    const alertsArray = _isArray(items) ? items : [];
+    const tooltipContent = (_jsxs(_Fragment, { children: [_jsx("h4", { className: "mdk-widget-top-row__alarm-info-title", children: `${title} issues` }), _map(_split(getAlertsDescription(alertsArray, getFormattedDate), '\n\n'), (line, index) => (_jsx("div", { children: line }, index)))] }));
+    return (_jsx(SimpleTooltip, { content: tooltipContent, children: _jsx("div", { className: "mdk-widget-top-row__alarm-info-icon", children: icon }) }));
+};
+AlarmInfo.displayName = 'AlarmInfo';

package/dist/domain/components/widget-top-row/index.d.ts

@@ -0,0 +1,30 @@
+import type { ErrorWithTimestamp } from '../../../primitives/index.js';
+import type { AlarmInfoItem } from './alarm-info';
+import type { JSX, ReactNode } from 'react';
+/** One alarm category badge: a title, an icon, and the alerts behind it. */
+export type WidgetAlarmGroup = {
+    /** Category label; the tooltip heading reads `<title> issues` */
+    title: string;
+    /** Badge icon */
+    icon: ReactNode;
+    /** Active alerts in this category; the badge is hidden when empty */
+    items?: AlarmInfoItem[];
+};
+export type WidgetTopRowProps = {
+    /** Widget title */
+    title: string;
+    /** Power reading; rendered in kilo-units */
+    power?: number;
+    /** Power unit (e.g. `"kW"`) */
+    unit?: string;
+    /** Error tooltip content; replaces power */
+    statsErrorMessage?: string | ErrorWithTimestamp[] | null;
+    /** Alarm category badges, in display order. Categories with no items render nothing. */
+    alarms?: WidgetAlarmGroup[];
+    /** Additional class names */
+    className?: string;
+};
+export declare function WidgetTopRow({ title, power, unit, statsErrorMessage, alarms, className, }: WidgetTopRowProps): JSX.Element;
+export declare namespace WidgetTopRow {
+    var displayName: string;
+}

package/dist/domain/components/widget-top-row/index.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _map from 'lodash/map';
+import { cn, formatErrors, formatNumber, SimpleTooltip, unitToKilo } from '../../../primitives/index.js';
+import { useTimezoneFormatter } from '@tetherto/mdk-react-adapter';
+import { AlarmInfo } from './alarm-info';
+/**
+ * Compact header row used at the top of container / miner widgets — shows the
+ * title, one badge per alarm category you pass, and the current power reading
+ * (or an error tooltip).
+ *
+ * @category widgets
+ * @kernelCapability device-telemetry
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <WidgetTopRow
+ *   title="Container A"
+ *   power={power}
+ *   unit="kW"
+ *   alarms={[{ title: 'Pressure', icon: <PressureAlarmIcon />, items: pressureAlerts }]}
+ * />
+ * ```
+ * @tier agent-ready
+ */
+export const WidgetTopRow = ({ title, power, unit, statsErrorMessage, alarms, className, }) => {
+    const { getFormattedDate } = useTimezoneFormatter();
+    const powerLabel = power ? (_jsxs(_Fragment, { children: [formatNumber(unitToKilo(power)), "\u00A0", _jsx("span", { children: unit })] })) : null;
+    return (_jsx("div", { className: cn('mdk-widget-top-row', className), children: _jsxs("div", { className: "mdk-widget-top-row__inner", children: [_jsx("div", { className: "mdk-widget-top-row__title", children: title }), _map(alarms, (group) => (_jsx(AlarmInfo, { title: group.title, icon: group.icon, items: group.items }, group.title))), _jsx("div", { className: "mdk-widget-top-row__power", children: statsErrorMessage ? (_jsx(SimpleTooltip, { content: formatErrors(statsErrorMessage, getFormattedDate), children: _jsx("span", { children: "-" }) })) : (powerLabel) })] }) }));
+};
+WidgetTopRow.displayName = 'WidgetTopRow';

package/dist/domain/components/widget-top-row/widget-top-row.example.d.ts

@@ -0,0 +1 @@
+export declare const WidgetTopRowExample: () => import("react").JSX.Element;

package/dist/domain/components/widget-top-row/widget-top-row.example.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for WidgetTopRow.
+ */
+import { TemperatureAlarmIcon, WidgetTopRow } from '@tetherto/mdk-react-devkit';
+export const WidgetTopRowExample = () => {
+    return (_jsx(WidgetTopRow, { title: "Container 03", power: 31_500, unit: "kW", alarms: [
+            {
+                title: 'Liquid',
+                icon: _jsx(TemperatureAlarmIcon, {}),
+                items: [
+                    {
+                        severity: 'critical',
+                        name: 'inlet_overheating',
+                        description: 'Inlet > 78°C',
+                        createdAt: Date.now() - 5 * 60 * 1000,
+                    },
+                ],
+            },
+        ] }));
+};

package/dist/domain/constants/actions.d.ts

@@ -0,0 +1,30 @@
+export declare const ACTION_TYPES: {
+    readonly SWITCH_CONTAINER: 'switchContainer';
+    readonly SWITCH_COOLING_SYSTEM: 'switchCoolingSystem';
+    readonly SET_TANK_ENABLED: 'setTankEnabled';
+    readonly SET_AIR_EXHAUST_ENABLED: 'setAirExhaustEnabled';
+    readonly RESET_COOLING_SYSTEM: 'resetCoolingSystem';
+    readonly SET_LIQUID_SUPPLY_TEMPERATURE: 'setLiquidSupplyTemperature';
+    readonly SET_TEMPERATURE_SETTINGS: 'setTemperatureSettings';
+    readonly SET_COOLING_FAN_THRESHOLD: 'setCoolingFanThreshold';
+    readonly SWITCH_SOCKET: 'switchSocket';
+    readonly RESET_ALARM: 'resetAlarm';
+    readonly RESET_CONTAINER: 'resetContainer';
+    readonly EMERGENCY_STOP: 'emergencyStop';
+    readonly MAINTENANCE: 'maintenance';
+    readonly REBOOT: 'reboot';
+    readonly SET_POWER_MODE: 'setPowerMode';
+    readonly SETUP_FREQUENCY_SPEED: 'setUpfreqSpeed';
+    readonly SET_LED: 'setLED';
+    readonly SETUP_POOLS: 'setupPools';
+    readonly REGISTER_THING: 'registerThing';
+    readonly UPDATE_THING: 'updateThing';
+    readonly FORGET_THINGS: 'forgetThings';
+    readonly RACK_REBOOT: 'rackReboot';
+    readonly REGISTER_POOL_CONFIG: 'registerConfig';
+    readonly UPDATE_POOL_CONFIG: 'updateConfig';
+};
+export declare const MINER_ACTIONS: readonly ["reboot", "setPowerMode", "setLED", "setupPools"];
+export type ActionTypeKey = keyof typeof ACTION_TYPES;
+export type ActionTypeValue = (typeof ACTION_TYPES)[ActionTypeKey];
+export type MinerActionValue = (typeof MINER_ACTIONS)[number];

package/dist/domain/constants/actions.js

@@ -0,0 +1,37 @@
+export const ACTION_TYPES = {
+    // Container actions
+    SWITCH_CONTAINER: 'switchContainer',
+    SWITCH_COOLING_SYSTEM: 'switchCoolingSystem',
+    SET_TANK_ENABLED: 'setTankEnabled',
+    SET_AIR_EXHAUST_ENABLED: 'setAirExhaustEnabled',
+    RESET_COOLING_SYSTEM: 'resetCoolingSystem',
+    SET_LIQUID_SUPPLY_TEMPERATURE: 'setLiquidSupplyTemperature',
+    SET_TEMPERATURE_SETTINGS: 'setTemperatureSettings',
+    SET_COOLING_FAN_THRESHOLD: 'setCoolingFanThreshold',
+    SWITCH_SOCKET: 'switchSocket',
+    RESET_ALARM: 'resetAlarm',
+    RESET_CONTAINER: 'resetContainer',
+    EMERGENCY_STOP: 'emergencyStop',
+    MAINTENANCE: 'maintenance',
+    // Miner actions
+    REBOOT: 'reboot',
+    SET_POWER_MODE: 'setPowerMode',
+    SETUP_FREQUENCY_SPEED: 'setUpfreqSpeed',
+    SET_LED: 'setLED',
+    SETUP_POOLS: 'setupPools',
+    // Thing actions
+    REGISTER_THING: 'registerThing',
+    UPDATE_THING: 'updateThing',
+    FORGET_THINGS: 'forgetThings',
+    // Rack actions
+    RACK_REBOOT: 'rackReboot',
+    // Pool Manager
+    REGISTER_POOL_CONFIG: 'registerConfig',
+    UPDATE_POOL_CONFIG: 'updateConfig',
+};
+export const MINER_ACTIONS = [
+    ACTION_TYPES.REBOOT,
+    ACTION_TYPES.SET_POWER_MODE,
+    ACTION_TYPES.SET_LED,
+    ACTION_TYPES.SETUP_POOLS,
+];