@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/dist/domain/components/data-box/generic-data-box/generic-data-box.d.ts

@@ -0,0 +1,40 @@
+import type { ReactElement } from 'react';
+import type { DataRowItem } from '../data-row/data-row';
+import './generic-data-box.scss';
+type DataItem = {
+    /** Alternative unit field */
+    unit?: string;
+} & DataRowItem;
+type GenericDataBoxProps = {
+    /**
+     * Array of data items to display
+     * @default []
+     */
+    data?: DataItem[];
+    /** Fallback value when value is undefined */
+    fallbackValue?: unknown;
+};
+/**
+ * Reusable labelled stat box used by container summary panels for one-off numeric values.
+ *
+ * Displays a table of label-value-unit rows.
+ *
+ * @example
+ * ```tsx
+ * import { UNITS } from '@tetherto/mdk-react-devkit'
+ *
+ * <GenericDataBox
+ *   data={[
+ *     { label: 'Temperature', value: 45, units: UNITS.TEMPERATURE_C },
+ *     { label: 'Pressure', value: 2.5, units: UNITS.PRESSURE_BAR, isHighlighted: true },
+ *     { label: 'Status', value: 'Running', color: 'green' }
+ *   ]}
+ * />
+ * ```
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const GenericDataBox: ({ data, fallbackValue }: GenericDataBoxProps) => ReactElement;
+export {};

package/dist/domain/components/data-box/generic-data-box/generic-data-box.example.d.ts

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

package/dist/domain/components/data-box/generic-data-box/generic-data-box.example.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GenericDataBox } from '@tetherto/mdk-react-devkit';
+export const GenericDataBoxExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(GenericDataBox, { data: [
+            { label: 'Temperature', value: 45, units: '°C' },
+            { label: 'Pressure', value: 2.5, units: 'bar', isHighlighted: true },
+            { label: 'Status', value: 'Running', color: 'green' },
+        ] }) }));

package/dist/domain/components/data-box/generic-data-box/generic-data-box.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DataRow } from '../data-row/data-row';
+/**
+ * Reusable labelled stat box used by container summary panels for one-off numeric values.
+ *
+ * Displays a table of label-value-unit rows.
+ *
+ * @example
+ * ```tsx
+ * import { UNITS } from '@tetherto/mdk-react-devkit'
+ *
+ * <GenericDataBox
+ *   data={[
+ *     { label: 'Temperature', value: 45, units: UNITS.TEMPERATURE_C },
+ *     { label: 'Pressure', value: 2.5, units: UNITS.PRESSURE_BAR, isHighlighted: true },
+ *     { label: 'Status', value: 'Running', color: 'green' }
+ *   ]}
+ * />
+ * ```
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const GenericDataBox = ({ data = [], fallbackValue }) => {
+    return (_jsx("div", { className: "mdk-generic-data-box", children: data.map((item, index) => (_jsx(DataRow, { label: item.label, value: item.value ?? fallbackValue, units: item.units || item.unit, isHighlighted: item.isHighlighted, color: item.color, flash: item.flash }, `${item.label}-${item.value}-${index}`))) }));
+};

package/dist/domain/components/data-box/index.d.ts

@@ -0,0 +1 @@
+export * from './generic-data-box/generic-data-box';

package/dist/domain/components/data-box/index.js

@@ -0,0 +1 @@
+export * from './generic-data-box/generic-data-box';

package/dist/domain/components/device-explorer/columns/column-constants.d.ts

@@ -0,0 +1,4 @@
+export declare const CELL_MIN_WIDTH = 120;
+export declare const ERROR_MESSAGES: {
+    ERR_THING_CONNECTION_FAILURE: string;
+};

package/dist/domain/components/device-explorer/columns/column-constants.js

@@ -0,0 +1,4 @@
+export const CELL_MIN_WIDTH = 120;
+export const ERROR_MESSAGES = {
+    ERR_THING_CONNECTION_FAILURE: 'No Connection',
+};

package/dist/domain/components/device-explorer/columns/miner-columns.d.ts

@@ -0,0 +1,8 @@
+import { type DataTableColumnDef } from '../../../../primitives/index.js';
+import type { DeviceExplorerDeviceData } from '../types';
+/** What the default miner columns need from the host. */
+export type MinerColumnsParams = {
+    /** Date formatter from the host's timezone setup (e.g. `useTimezoneFormatter().getFormattedDate`) */
+    getFormattedDate: (date: Date) => string;
+};
+export declare const getMinerColumns: ({ getFormattedDate, }: MinerColumnsParams) => DataTableColumnDef<DeviceExplorerDeviceData>[];

package/dist/domain/components/device-explorer/columns/miner-columns.js

@@ -0,0 +1,276 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, FALLBACK, formatMacAddress, formatNumber, formatValueUnit, mhsToThs, PowerIcon, SimpleTooltip, UNITS, } from '../../../../primitives/index.js';
+import { DeviceCardColText } from '../components/device-card-col-text/device-card-col-text';
+import { formatPowerConsumption, getHashrateString, getMinerName, getOnOffText, getPowerModeColor, isMinerOffline, } from '../../../utils/device-utils';
+import { MAINTENANCE_CONTAINER } from '../../../constants/container-constants';
+import { MinerStatusIndicator } from '../components/mining-status-indicator/mining-status-indicator';
+import { formatDistanceStrict } from 'date-fns/formatDistanceStrict';
+import _isUndefined from 'lodash/isUndefined';
+import { CELL_MIN_WIDTH, ERROR_MESSAGES } from './column-constants';
+export const getMinerColumns = ({ getFormattedDate, }) => [
+    {
+        header: 'Code',
+        accessorKey: 'shortCode',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => _jsx(DeviceCardColText, { children: info.getValue() }),
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${getMinerName(a?.type || '')}`.localeCompare(`${getMinerName(b?.type || '')}`);
+        },
+    },
+    {
+        header: 'Container',
+        accessorKey: 'container',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const containerName = info.getValue();
+            const deviceRecord = info.row.original;
+            const { err, error } = deviceRecord;
+            return (_jsxs("div", { children: [containerName === MAINTENANCE_CONTAINER ? (_jsx(DeviceCardColText, { style: {
+                            color: 'var(--mdk-color-warning)',
+                        }, children: "Maintenance" })) : (_jsx(DeviceCardColText, { children: containerName })), Boolean(error || err) && (_jsx(DeviceCardColText, { style: { color: 'var(--mdk-button-danger-bg)' }, children: (err
+                            ? ERROR_MESSAGES[err] || err
+                            : error || err) }))] }));
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.info?.container}`.localeCompare(`${b?.info?.container}`);
+        },
+    },
+    {
+        header: 'POS',
+        id: 'position',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const deviceRecord = info.row.original;
+            return _jsx(DeviceCardColText, { children: deviceRecord.info?.pos });
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.info?.pos}`.localeCompare(`${b?.info?.pos}`);
+        },
+    },
+    {
+        header: 'SN',
+        accessorKey: 'serialNum',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => _jsx(DeviceCardColText, { children: info.getValue() }),
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.info?.serialNum}`.localeCompare(`${b?.info?.serialNum}`);
+        },
+    },
+    {
+        header: 'MAC',
+        accessorKey: 'macAddress',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const macAddress = info.getValue();
+            return (_jsx(DeviceCardColText, { children: macAddress ? formatMacAddress(macAddress) : '-' }));
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.info?.macAddress}`.localeCompare(`${b?.info?.macAddress}`);
+        },
+    },
+    {
+        header: 'IP',
+        id: 'ip',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const { address } = info.row.original;
+            return _jsx(DeviceCardColText, { children: address });
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.address}`.localeCompare(`${b?.address}`);
+        },
+    },
+    {
+        header: 'Status',
+        id: 'status',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const { stats, alerts } = info.row.original;
+            const alertsArray = Array.isArray(alerts) ? alerts : [];
+            const statsForIndicator = stats;
+            return (_jsxs("div", { className: "mdk-device-explorer__table__cell--type-status", children: [_jsx(MinerStatusIndicator, { stats: statsForIndicator, alerts: alertsArray, getFormattedDate: getFormattedDate }), _jsx("div", { className: "mdk-device-explorer__table__cell--type-status__value", children: String(stats?.status || '') })] }));
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.stats?.status}`.localeCompare(`${b?.stats?.status}`);
+        },
+    },
+    {
+        header: 'Power Mode',
+        id: 'powerMode',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const { error, err, device } = info.row.original;
+            const power_mode = device?.last?.snap?.config?.power_mode;
+            const showNil = error || err || (device && isMinerOffline(device));
+            return showNil ? (_jsx(DeviceCardColText, { children: "-" })) : (_jsxs("div", { className: "mdk-device-explorer__table__cell--type-power-mode", children: [_jsx("div", { className: "mdk-device-explorer__table__cell--type-power-mode__icon", style: {
+                            color: getPowerModeColor(power_mode) ?? 'inherit',
+                        }, children: _jsx(PowerIcon, {}) }), _jsx("div", { className: "mdk-device-explorer__table__cell--type-power-mode__value", children: power_mode })] }));
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return a?.config?.power_mode?.localeCompare(b?.config?.power_mode || '') || 0;
+        },
+    },
+    {
+        header: 'Elapsed',
+        id: 'elapsedTime',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const { error, stats, err, device } = info.row.original;
+            return error || err || (device && isMinerOffline(device)) ? (_jsx(DeviceCardColText, { children: "-" })) : (_jsx(DeviceCardColText, { children: stats?.uptime_ms
+                    ? formatDistanceStrict(new Date(Date.now() - (stats.uptime_ms ?? 0)), new Date(), {
+                        addSuffix: true,
+                    })
+                    : '-' }));
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.stats?.uptime_ms}`.localeCompare(`${b?.stats?.uptime_ms}`);
+        },
+    },
+    {
+        header: 'Consumption',
+        id: 'consumption',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const { error, stats, err, device } = info.row.original;
+            const power_w = stats?.power_w ?? 0;
+            const { value, unit } = formatPowerConsumption(power_w);
+            const displayValue = unit === UNITS.POWER_KW
+                ? formatNumber(value ?? 0, {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                })
+                : (value ?? 0);
+            return error || err || (device && isMinerOffline(device)) ? (_jsx(DeviceCardColText, { children: "-" })) : (_jsx(DeviceCardColText, { children: power_w > 0 ? `${displayValue} ${unit}` : '-' }));
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.stats?.power_w}`.localeCompare(`${b?.stats?.power_w}`);
+        },
+    },
+    {
+        header: 'Hashrate',
+        id: 'hashrate',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const { error, stats, err, device } = info.row.original;
+            const hashRate = stats?.hashrate_mhs?.t_5m ?? 0;
+            const formattedHashRate = getHashrateString(hashRate);
+            return error || err || (device && isMinerOffline(device)) ? (_jsx(DeviceCardColText, { children: "-" })) : (_jsx(DeviceCardColText, { children: _jsx("div", { className: "mdk-device-explorer__table__cell--type-hash-rate", children: stats?.hashrate_mhs ? formattedHashRate : '-' }) }));
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.stats?.hashrate_mhs?.t_5m}`.localeCompare(`${b?.stats?.hashrate_mhs?.t_5m}`);
+        },
+    },
+    {
+        header: 'Efficiency',
+        id: 'efficiency',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const { error, stats, err, device } = info.row.original;
+            const hashRate = stats?.hashrate_mhs?.t_5m;
+            return error || err || (device && isMinerOffline(device)) ? (_jsx("div", { className: "mdk-device-explorer__table__cell--type-efficiency", children: "-" })) : (_jsx("div", { className: "mdk-device-explorer__table__cell--type-efficiency", children: !stats?.power_w || !hashRate || hashRate <= 0
+                    ? '-'
+                    : formatValueUnit(stats?.power_w / mhsToThs(hashRate), UNITS.EFFICIENCY_W_PER_TH_S) }));
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            const aPower = a?.stats?.power_w ?? 0;
+            const aHash = mhsToThs(a?.stats?.hashrate_mhs?.t_5m ?? 0);
+            const bPower = b?.stats?.power_w ?? 0;
+            const bHash = mhsToThs(b?.stats?.hashrate_mhs?.t_5m ?? 0);
+            const aEfficiency = aHash > 0 ? aPower / aHash : 0;
+            const bEfficiency = bHash > 0 ? bPower / bHash : 0;
+            return `${aEfficiency}`.localeCompare(`${bEfficiency}`);
+        },
+    },
+    {
+        header: 'Pool Hashrate',
+        id: 'poolHashrate',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const { error, stats, err, isPoolStatsEnabled, device } = info.row.original;
+            const isEmpty = !isPoolStatsEnabled ||
+                !stats?.poolHashrate ||
+                error ||
+                err ||
+                (device && isMinerOffline(device));
+            const content = isEmpty ? ('-') : (_jsx("div", { className: "mdk-device-explorer__table__cell--type-hash-rate", children: _jsx(SimpleTooltip, { content: "Pool Hashrate", children: _jsx("span", { children: stats?.poolHashrate }) }) }));
+            return _jsx("div", { className: "mdk-device-explorer__table__cell--type-hash-rate", children: content });
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.stats?.poolHashrate}`.localeCompare(`${b?.stats?.poolHashrate}`);
+        },
+    },
+    {
+        header: 'FW Version',
+        id: 'fwVersion',
+        minSize: CELL_MIN_WIDTH,
+        size: 180,
+        cell: (info) => {
+            const { error, config, err, device } = info.row.original;
+            return error || err || (device && isMinerOffline(device)) ? (_jsx(DeviceCardColText, { children: "-" })) : (_jsx(DeviceCardColText, { children: config?.firmware_ver || '-' }));
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.config?.firmware_ver}`.localeCompare(`${b?.config?.firmware_ver}`);
+        },
+    },
+    {
+        header: 'LED',
+        id: 'ledStatus',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const { error, config, err, device } = info.row.original;
+            const isError = error || err || (device && isMinerOffline(device)) || _isUndefined(config?.led_status);
+            return isError ? (_jsx(DeviceCardColText, { children: "-" })) : (_jsx(DeviceCardColText, { children: _jsx("div", { className: cn('mdk-device-explorer__table__cell--type-led', {
+                        'mdk-device-explorer__table__cell--type-led--value-on': config?.led_status,
+                    }), children: getOnOffText(config?.led_status) }) }));
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.config?.led_status}`.localeCompare(`${b?.config?.led_status}`);
+        },
+    },
+    {
+        header: 'Max Temp',
+        id: 'temperature',
+        minSize: CELL_MIN_WIDTH,
+        cell: (info) => {
+            const { error, stats, err, device } = info.row.original;
+            return error || err || (device && isMinerOffline(device)) ? (_jsx(DeviceCardColText, { children: "-" })) : (_jsx(DeviceCardColText, { children: stats?.temperature_c?.max
+                    ? `${stats?.temperature_c?.max} ${UNITS.TEMPERATURE_C}`
+                    : FALLBACK }));
+        },
+        sortingFn: (rowA, rowB) => {
+            const a = rowA.original;
+            const b = rowB.original;
+            return `${a?.stats?.temperature_c?.max}`.localeCompare(`${b?.stats?.temperature_c?.max}`);
+        },
+    },
+];

package/dist/domain/components/device-explorer/components/device-card-col-text/device-card-col-text.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties, JSX } from 'react';
+import type React from 'react';
+export type DeviceCardColTextProps = {
+    style?: CSSProperties;
+    children: React.ReactNode;
+};
+export declare const DeviceCardColText: ({ style, children }: DeviceCardColTextProps) => JSX.Element;

package/dist/domain/components/device-explorer/components/device-card-col-text/device-card-col-text.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DeviceCardColText = ({ style, children }) => {
+    return (_jsx("div", { style: style, className: "mdk-device-card-col-text", children: children }));
+};

package/dist/domain/components/device-explorer/components/mining-status-indicator/mining-status-indicator.d.ts

@@ -0,0 +1,14 @@
+import type { UnknownRecord } from '../../../../../primitives/index.js';
+import type { AlertRecord } from '../../types';
+import type { JSX } from 'react';
+export type MinerStats = {
+    status?: string;
+    [key: string]: unknown;
+};
+export type MinerStatusIndicatorProps = {
+    stats?: MinerStats | UnknownRecord;
+    alerts?: AlertRecord[];
+    hideTooltip?: boolean;
+    getFormattedDate: (date: Date) => string;
+};
+export declare const MinerStatusIndicator: ({ stats, alerts, hideTooltip, getFormattedDate, }: MinerStatusIndicatorProps) => JSX.Element;

package/dist/domain/components/device-explorer/components/mining-status-indicator/mining-status-indicator.js

@@ -0,0 +1,39 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { AlertTriangleIcon, ErrorStatusIcon, formatErrors, MiningStatusIcon, OfflineStatusIcon, SimpleTooltip, SleepStatusIcon, } from '../../../../../primitives/index.js';
+import { getAlertsString } from '../../../alerts/alerts-utils';
+import _isObject from 'lodash/isObject';
+import { StatusLabel } from '../status-label/status-label';
+import { MinerStatuses } from '../../../../constants/device-constants';
+const MinerStatusIcon = ({ status = '' }) => {
+    switch (status) {
+        case MinerStatuses.ALERT:
+            return (_jsx("div", { className: "mdk-mining-status-indicator--alert", children: _jsx(AlertTriangleIcon, {}) }));
+        case MinerStatuses.MINING:
+            return (_jsx(StatusLabel, { children: _jsx(MiningStatusIcon, { width: 14, height: 14 }) }));
+        case MinerStatuses.SLEEPING:
+            return (_jsx(StatusLabel, { status: "sleep", children: _jsx(SleepStatusIcon, { width: 14, height: 14 }) }));
+        case MinerStatuses.OFFLINE:
+            return (_jsx(StatusLabel, { status: "offline", children: _jsx(OfflineStatusIcon, { width: 14, height: 14 }) }));
+        case MinerStatuses.ERROR:
+            return (_jsx(StatusLabel, { status: "offline", children: _jsx(ErrorStatusIcon, { width: 14, height: 14 }) }));
+        default:
+            return _jsx(_Fragment, {});
+    }
+};
+export const MinerStatusIndicator = ({ stats, alerts = [], hideTooltip = false, getFormattedDate, }) => {
+    // Convert unknown[] to AlertRecord[] if needed
+    const alertsTyped = Array.isArray(alerts)
+        ? alerts.filter((alert) => _isObject(alert) &&
+            alert !== null &&
+            'severity' in alert &&
+            'createdAt' in alert &&
+            'name' in alert &&
+            'description' in alert)
+        : [];
+    const errors = getAlertsString(alertsTyped, getFormattedDate);
+    const status = alertsTyped?.length ? MinerStatuses.ALERT : String(stats?.status || '');
+    const iconContent = (_jsx("div", { className: "mdk-mining-status-indicator", children: _jsx(MinerStatusIcon, { status: status }) }));
+    return !hideTooltip ? (_jsx(SimpleTooltip, { content: errors !== null
+            ? `Miner Status : ${stats?.status}\n${formatErrors(errors, getFormattedDate)}`
+            : `Miner Status : ${stats?.status}`, children: iconContent })) : (iconContent);
+};

package/dist/domain/components/device-explorer/components/status-label/status-label.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+export type StatusLabelProps = {
+    status?: 'error' | 'sleep' | 'offline';
+    children: React.ReactNode;
+};
+export declare const StatusLabel: ({ status, children }: StatusLabelProps) => JSX.Element;

package/dist/domain/components/device-explorer/components/status-label/status-label.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../../../../primitives/index.js';
+export const StatusLabel = ({ status, children }) => {
+    return (_jsx("div", { className: cn('mdk-device-explorer__status-label', {
+            'mdk-device-explorer__status-label--error': status === 'error',
+            'mdk-device-explorer__status-label--offline': status === 'offline',
+            'mdk-device-explorer__status-label--sleep': status === 'sleep',
+        }), children: children }));
+};

package/dist/domain/components/device-explorer/device-explorer-table.d.ts

@@ -0,0 +1,18 @@
+import type { DataTableColumnDef, DataTableRowSelectionState, DataTableSortingState } from '../../../primitives/index.js';
+import type { DeviceExplorerDeviceData } from './types';
+import type { JSX } from 'react';
+export type DeviceExplorerTableProps = {
+    /** Rows */
+    data: DeviceExplorerDeviceData[];
+    /** Table columns. Defaults to the miner columns ({@link getMinerColumns}). */
+    columns?: DataTableColumnDef<DeviceExplorerDeviceData>[];
+    selections: DataTableRowSelectionState;
+    onSelectionsChange: (selections: DataTableRowSelectionState) => void;
+    /** Date formatter from the host's timezone setup; used by the default miner columns */
+    getFormattedDate: (date: Date) => string;
+    sorting: DataTableSortingState;
+    onSortingChange: (sorting: DataTableSortingState) => void;
+    /** Called when a row is clicked (e.g. to open the device's detail page). */
+    onRowClick?: (device: DeviceExplorerDeviceData) => void;
+};
+export declare const DeviceExplorerTable: ({ data, columns: providedColumns, selections, onSelectionsChange, getFormattedDate, sorting, onSortingChange, onRowClick, }: DeviceExplorerTableProps) => JSX.Element;

package/dist/domain/components/device-explorer/device-explorer-table.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DataTable } from '../../../primitives/index.js';
+import { useMemo } from 'react';
+import { getMinerColumns } from './columns/miner-columns';
+export const DeviceExplorerTable = ({ data, columns: providedColumns, selections, onSelectionsChange, getFormattedDate, sorting, onSortingChange, onRowClick, }) => {
+    const columns = useMemo(() => providedColumns ?? getMinerColumns({ getFormattedDate }), [providedColumns, getFormattedDate]);
+    return (_jsx(DataTable, { data: data, columns: columns, enableRowSelection: true, 
+        // Key rows by the device id (not the default row index) so a selection —
+        // and any `?thing=<id>` deep-link that maps onto it — survives sorting and
+        // filtering, and so the host can resolve a selected row back to its thing.
+        getRowId: (row) => row.id, selections: selections, onSelectionsChange: onSelectionsChange, wrapperClassName: "mdk-device-explorer__table", sorting: sorting, onSortingChange: onSortingChange, onRowClick: onRowClick }));
+};

package/dist/domain/components/device-explorer/device-explorer-toolbar.d.ts

@@ -0,0 +1,17 @@
+import type { CascaderValue, LocalFilters } from '../../../primitives/index.js';
+import type { DeviceExplorerFilterOption, DeviceExplorerSearchOption } from './types';
+import type { JSX } from 'react';
+export type DeviceExplorerToolbarProps = {
+    /** Controlled filter values */
+    filters: LocalFilters;
+    /** Filter category definitions */
+    filterOptions: DeviceExplorerFilterOption[];
+    onFiltersChange: (value: CascaderValue[]) => void;
+    /** Searchable column definitions */
+    searchOptions: DeviceExplorerSearchOption[];
+    /** Active search-tag chips */
+    searchTags: string[];
+    /** Setter for search tags */
+    onSearchTagsChange: (tags: string[]) => void;
+};
+export declare const DeviceExplorerToolbar: ({ filters, filterOptions, onFiltersChange, searchOptions, searchTags, onSearchTagsChange, }: DeviceExplorerToolbarProps) => JSX.Element;

package/dist/domain/components/device-explorer/device-explorer-toolbar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListViewFilter, TagInput } from '../../../primitives/index.js';
+export const DeviceExplorerToolbar = ({ filters, filterOptions, onFiltersChange, searchOptions, searchTags, onSearchTagsChange, }) => {
+    const showFilter = filterOptions.length > 0;
+    return (_jsxs("div", { className: "mdk-device-explorer__toolbar", children: [showFilter && (_jsx(ListViewFilter, { localFilters: filters, options: filterOptions, onChange: onFiltersChange, className: "mdk-device-explorer__toolbar__filter" })), _jsx(TagInput, { allowCustomTags: true, placeholder: "Search", options: searchOptions, onTagsChange: onSearchTagsChange, value: searchTags, variant: "search", className: "mdk-device-explorer__toolbar__search" })] }));
+};

package/dist/domain/components/device-explorer/device-explorer.d.ts

@@ -0,0 +1,47 @@
+import type { DataTableRowSelectionState, LocalFilters } from '../../../primitives/index.js';
+import type { DeviceExplorerTableProps } from './device-explorer-table';
+import type { DeviceExplorerToolbarProps } from './device-explorer-toolbar';
+import type { JSX } from 'react';
+type OmittedToolbarProps = 'onFiltersChange' | 'filters';
+type OptionalToolbarProps = 'filters';
+type ForwardedToolbarProps = {
+    /** Setter for filters */
+    onFiltersChange: (value: LocalFilters) => void;
+} & Omit<DeviceExplorerToolbarProps, OmittedToolbarProps> & Partial<Pick<DeviceExplorerToolbarProps, OptionalToolbarProps>>;
+type OmittedTableProps = 'selections' | 'onSelectionsChange' | 'sorting' | 'onSortingChange';
+type OptionalTableProps = 'onSortingChange';
+type ForwardedTableProps = Partial<Pick<DeviceExplorerTableProps, OptionalTableProps>> & Omit<DeviceExplorerTableProps, OmittedTableProps>;
+export type DeviceExplorerProps = {
+    /** Additional class names */
+    className?: string;
+    /** Controlled row-selection state */
+    selectedDevices?: DataTableRowSelectionState;
+    /** Setter for row selection */
+    onSelectedDevicesChange?: (selections: DataTableRowSelectionState) => void;
+} & ForwardedToolbarProps & ForwardedTableProps;
+/**
+ * Device explorer: filter + search toolbar over a sortable, selectable device
+ * table. Shows the miner columns by default; pass `columns` to change them
+ * (spread `getMinerColumns(...)` to extend the default set). Designed to be
+ * controlled by URL state in the host app.
+ *
+ * @category tables
+ * @kernelCapability device-management
+ * @domain device-management
+ *
+ * @example
+ * ```tsx
+ * <DeviceExplorer
+ *   data={devices}
+ *   filterOptions={filterOptions}
+ *   searchOptions={searchOptions}
+ *   searchTags={searchTags}
+ *   onSearchTagsChange={setSearchTags}
+ *   onFiltersChange={setFilters}
+ *   getFormattedDate={(date) => formatDate(date)}
+ * />
+ * ```
+ * @tier agent-ready
+ */
+export declare const DeviceExplorer: ({ filters: providedFilters, onFiltersChange, filterOptions, searchOptions, data, columns, selectedDevices, onSelectedDevicesChange, searchTags, onSearchTagsChange, className, getFormattedDate, onRowClick, }: DeviceExplorerProps) => JSX.Element;
+export {};

package/dist/domain/components/device-explorer/device-explorer.example.d.ts

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

package/dist/domain/components/device-explorer/device-explorer.example.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for DeviceExplorer, with the default miner columns. Pass
+ * `columns` (e.g. `[...getMinerColumns({ getFormattedDate }), myColumn]`) to
+ * change them.
+ */
+import { useState } from 'react';
+import { DeviceExplorer } from '@tetherto/mdk-react-devkit';
+const mockMiners = [
+    {
+        id: 'miner-01',
+        code: 1,
+        macAddress: 'AA:BB:CC:00:00:01',
+        status: 'online',
+        container: 'cont-A',
+        ip: '10.0.0.11',
+        hashrate: 102.4,
+        powerW: 3200,
+        lastActive: Date.now() - 60_000,
+    },
+    {
+        id: 'miner-02',
+        code: 2,
+        macAddress: 'AA:BB:CC:00:00:02',
+        status: 'warning',
+        container: 'cont-A',
+        ip: '10.0.0.12',
+        hashrate: 95.1,
+        powerW: 3450,
+        lastActive: Date.now() - 600_000,
+    },
+];
+const filterOptions = {
+    status: [
+        { label: 'Online', value: 'online' },
+        { label: 'Warning', value: 'warning' },
+        { label: 'Offline', value: 'offline' },
+    ],
+};
+const searchOptions = [{ label: 'Miner ID', value: 'id' }];
+export const DeviceExplorerExample = () => {
+    const [searchTags, setSearchTags] = useState([]);
+    const [filters, setFilters] = useState({});
+    return (_jsx(DeviceExplorer, { data: mockMiners, filters: filters, filterOptions: filterOptions, onFiltersChange: setFilters, searchOptions: searchOptions, searchTags: searchTags, onSearchTagsChange: setSearchTags, getFormattedDate: (ts) => new Date(Number(ts)).toLocaleString() }));
+};