@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../primitives/index.js';
+import { DeviceExplorerTable } from './device-explorer-table';
+import { DeviceExplorerToolbar } from './device-explorer-toolbar';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useFilterState } from './hooks/use-filter-state';
+import { useState } from 'react';
+/**
+ * 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 const DeviceExplorer = ({ filters: providedFilters, onFiltersChange, filterOptions, searchOptions, data, columns, selectedDevices, onSelectedDevicesChange, searchTags, onSearchTagsChange, className, getFormattedDate, onRowClick, }) => {
+    const [selections, setSelections] = useControllableState({
+        prop: selectedDevices,
+        defaultProp: {},
+        onChange: onSelectedDevicesChange,
+    });
+    const { filters, onFiltersChange: handleFilterChange } = useFilterState({
+        filters: providedFilters,
+        onFiltersChange,
+    });
+    const [sorting, setSorting] = useState([]);
+    return (_jsxs("div", { className: cn('mdk-device-explorer', className), children: [_jsx(DeviceExplorerToolbar, { filters: filters, filterOptions: filterOptions, onFiltersChange: handleFilterChange, searchOptions: searchOptions, searchTags: searchTags, onSearchTagsChange: onSearchTagsChange }), _jsx(DeviceExplorerTable, { data: data, columns: columns, selections: selections, onSelectionsChange: setSelections, getFormattedDate: getFormattedDate, sorting: sorting, onSortingChange: setSorting, onRowClick: onRowClick })] }));
+};

package/dist/domain/components/device-explorer/hooks/use-filter-state.d.ts

@@ -0,0 +1,10 @@
+import type { LocalFilters } from '../../../../primitives/index.js';
+export type useFilterStateParams = {
+    filters?: LocalFilters;
+    onFiltersChange: (value: LocalFilters) => void;
+};
+export type useFilterStateReturn = {
+    filters: LocalFilters;
+    onFiltersChange: (selections: (string | number | boolean)[][]) => void;
+};
+export declare const useFilterState: ({ filters: providedFilters, onFiltersChange: onFilterChange, }: useFilterStateParams) => useFilterStateReturn;

package/dist/domain/components/device-explorer/hooks/use-filter-state.js

@@ -0,0 +1,52 @@
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+export const useFilterState = ({ filters: providedFilters, onFiltersChange: onFilterChange, }) => {
+    const [filters, setFilters] = useControllableState({
+        prop: providedFilters,
+        defaultProp: {},
+        onChange: onFilterChange,
+    });
+    /**
+     * Handle filter changes
+     * Converts array of tuples to LocalFilters object
+     */
+    const handleFilterChange = (selections) => {
+        if (!selections || selections.length === 0) {
+            setFilters({});
+            return;
+        }
+        const newFilters = {};
+        selections.forEach((selection) => {
+            if (!Array.isArray(selection) || selection.length < 2)
+                return;
+            const category = String(selection[0]);
+            const value = selection[selection.length - 1]; // Get the leaf value
+            if (value === undefined)
+                return;
+            if (newFilters[category]) {
+                // Category already exists
+                const existingValue = newFilters[category];
+                if (Array.isArray(existingValue)) {
+                    // Already an array, add if not exists
+                    if (!existingValue.includes(value)) {
+                        existingValue.push(value);
+                    }
+                }
+                else {
+                    // Convert to array if values are different
+                    if (existingValue !== value) {
+                        newFilters[category] = [existingValue, value];
+                    }
+                }
+            }
+            else {
+                // New category
+                newFilters[category] = value;
+            }
+        });
+        setFilters(newFilters);
+    };
+    return {
+        filters,
+        onFiltersChange: handleFilterChange,
+    };
+};

package/dist/domain/components/device-explorer/hooks/use-get-available-devices.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Re-export of the device-buckets projector that now lives in
+ * `@tetherto/mdk-react-adapter` (per the separation-of-concerns rule —
+ * tag-shape knowledge belongs in the data layer, not the React UI layer).
+ *
+ * Kept here so existing imports under `device-explorer/hooks/use-get-available-devices`
+ * continue to resolve. New code should import directly from
+ * `@tetherto/mdk-react-adapter`.
+ */
+export type { AvailableDevices, AvailableDevicesInput, UseGetAvailableDevicesOptions, } from '@tetherto/mdk-react-adapter';
+export { useGetAvailableDevices } from '@tetherto/mdk-react-adapter';

package/dist/domain/components/device-explorer/hooks/use-get-available-devices.js

@@ -0,0 +1,10 @@
+/**
+ * Re-export of the device-buckets projector that now lives in
+ * `@tetherto/mdk-react-adapter` (per the separation-of-concerns rule —
+ * tag-shape knowledge belongs in the data layer, not the React UI layer).
+ *
+ * Kept here so existing imports under `device-explorer/hooks/use-get-available-devices`
+ * continue to resolve. New code should import directly from
+ * `@tetherto/mdk-react-adapter`.
+ */
+export { useGetAvailableDevices } from '@tetherto/mdk-react-adapter';

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

@@ -0,0 +1,4 @@
+export { getMinerColumns, type MinerColumnsParams } from './columns/miner-columns';
+export * from './device-explorer';
+export * from './hooks/use-get-available-devices';
+export * from './types';

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

@@ -0,0 +1,4 @@
+export { getMinerColumns } from './columns/miner-columns';
+export * from './device-explorer';
+export * from './hooks/use-get-available-devices';
+export * from './types';

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

@@ -0,0 +1,17 @@
+import type { Device } from '../../types/device';
+export type DeviceExplorerFilterOption = {
+    /** Category key at the top level (e.g. `status`), or a selectable value under it; selections reach `onFiltersChange` as `[category, value]` paths */
+    value: string;
+    /** Text shown in the filter cascader */
+    label: string;
+    /** Values selectable under this category; omit on leaf options */
+    children?: DeviceExplorerFilterOption[];
+};
+export type DeviceExplorerSearchOption = {
+    /** Tag added to `searchTags` when this suggestion is picked (free-text tags are also allowed) */
+    value: string;
+    /** Suggestion text, matched case-insensitively against the typed query and shown on the chip */
+    label: string;
+};
+export type DeviceExplorerDeviceData = Device;
+export { type AlertRecord } from '../../types/alerts';

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

@@ -0,0 +1 @@
+export {} from '../../types/alerts';

package/dist/domain/components/enabled-disable-toggle/enabled-disable-toggle.d.ts

@@ -0,0 +1,27 @@
+import type { ReactElement } from 'react';
+import './enabled-disable-toggle.scss';
+type EnabledDisableToggleCbParams = Pick<EnabledDisableToggleProps, 'tankNumber'> & {
+    isOn: boolean;
+};
+export type EnabledDisableToggleProps = {
+    /** Current state. A boolean drives a switch display; non-boolean shows action buttons. */
+    value: unknown;
+    /** Tank identifier used in the label (`Tank {N} Circulation`). Pass an empty string for the air exhaust label. */
+    tankNumber: number | string;
+    /** Disables the Enable/Disable buttons when a command is in-flight */
+    isButtonDisabled: boolean;
+    /** Disables all controls and shows an offline tooltip */
+    isOffline: boolean;
+    /** Callback fired when the user confirms a state change */
+    onToggle: (params: EnabledDisableToggleCbParams) => void;
+};
+/**
+ * Switch with confirmation that enables or disables a container, miner, or feature flag.
+ *
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const EnabledDisableToggle: ({ value, tankNumber, isButtonDisabled, isOffline, onToggle, }: EnabledDisableToggleProps) => ReactElement;
+export {};

package/dist/domain/components/enabled-disable-toggle/enabled-disable-toggle.example.d.ts

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

package/dist/domain/components/enabled-disable-toggle/enabled-disable-toggle.example.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EnabledDisableToggle } from '@tetherto/mdk-react-devkit';
+export const EnabledDisableToggleExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(EnabledDisableToggle, { value: true, tankNumber: 1, isButtonDisabled: false, isOffline: false, onToggle: ({ tankNumber, isOn }) => {
+            console.warn(`tank ${tankNumber} toggled to ${isOn}`);
+        } }) }));

package/dist/domain/components/enabled-disable-toggle/enabled-disable-toggle.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, SimpleTooltip, Switch } from '../../../primitives/index.js';
+/**
+ * Switch with confirmation that enables or disables a container, miner, or feature flag.
+ *
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const EnabledDisableToggle = ({ value, tankNumber, isButtonDisabled, isOffline, onToggle, }) => {
+    const label = tankNumber ? `Tank ${tankNumber} Circulation` : 'Air Exhaust System';
+    const isBoolean = typeof value === 'boolean';
+    const handleToggle = (isOn) => {
+        onToggle?.({ tankNumber, isOn });
+    };
+    return (_jsx(SimpleTooltip, { content: isOffline ? 'Container is offline' : undefined, children: _jsxs("div", { className: "mdk-enabled-disable-toggle", children: [isBoolean && (_jsxs("div", { className: "mdk-enabled-disable-toggle__toggle", children: [label, _jsx(Switch, { checked: value, disabled: true })] })), (!value || !isBoolean) && (_jsxs(Button, { fullWidth: true, size: "sm", variant: "primary", disabled: isOffline || isButtonDisabled, onClick: () => handleToggle(true), children: ["Enable ", label] })), (value || !isBoolean) && (_jsxs(Button, { fullWidth: true, size: "sm", disabled: isOffline || isButtonDisabled, onClick: () => handleToggle(false), children: ["Disable ", label] }))] }) }));
+};

package/dist/domain/components/header-actions/alarms-bell-button.d.ts

@@ -0,0 +1,39 @@
+import type { JSX, MouseEvent } from 'react';
+import './header-actions.scss';
+/** Severity buckets surfaced by the bell badge, highest → lowest. */
+export type AlarmSeverity = 'critical' | 'high' | 'medium';
+export type AlarmsBellButtonCounts = {
+    /** Critical alarm count, shown as the top badge row; omit to hide the row */
+    critical?: number;
+    /** High alarm count, shown as the middle badge row; omit to hide the row */
+    high?: number;
+    /** Medium alarm count, shown as the bottom badge row; omit to hide the row */
+    medium?: number;
+};
+export type AlarmsBellButtonProps = {
+    /**
+     * Severity-bucketed alarm counts rendered in the stacked badge.
+     * @default {}
+     */
+    counts?: AlarmsBellButtonCounts;
+    /** Click handler — typically opens an alerts panel or routes to /alerts. */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Click handler for an individual severity count. When provided, each badge
+     * row becomes its own button so an operator can jump straight to the alerts
+     * page filtered by that severity (e.g. `/alerts?severity=critical`). When
+     * omitted, the counts render as plain (non-interactive) text.
+     */
+    onSeverityClick?: (severity: AlarmSeverity, event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Accessible label. Defaults to "Active alarms".
+     * @default "Active alarms"
+     */
+    label?: string;
+    /** Additional class names */
+    className?: string;
+};
+export declare function AlarmsBellButton({ counts, onClick, onSeverityClick, label, className, }: AlarmsBellButtonProps): JSX.Element;
+export declare namespace AlarmsBellButton {
+    var displayName: string;
+}

package/dist/domain/components/header-actions/alarms-bell-button.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, NotificationBellIcon } from '../../../primitives/index.js';
+const fmt = (value) => typeof value === 'number' ? value.toLocaleString('en-US') : undefined;
+const SEVERITY_ORDER = ['critical', 'high', 'medium'];
+/**
+ * Top-bar bell button with a three-line severity badge (critical / high /
+ * medium). Counts are caller-provided so the button stays domain-agnostic;
+ * derive them from whatever alerts route your app serves.
+ *
+ * `onClick` fires for the bell itself; pass `onSeverityClick` to make each
+ * count its own button (severity-filtered deep-link). The two are independent
+ * — clicking a severity does not also fire `onClick`.
+ *
+ * @category dashboard
+ * @kernelCapability alerting
+ * @domain mining-operations
+ * @tier agent-ready
+ */
+export const AlarmsBellButton = ({ counts = {}, onClick, onSeverityClick, label = 'Active alarms', className, }) => {
+    const formatted = {
+        critical: fmt(counts.critical),
+        high: fmt(counts.high),
+        medium: fmt(counts.medium),
+    };
+    const hasAny = SEVERITY_ORDER.some((severity) => formatted[severity] !== undefined);
+    return (_jsxs("div", { className: cn('mdk-alarms-bell-button-group', className), children: [hasAny ? (_jsx("span", { className: "mdk-alarms-bell-button__badge", "aria-hidden": onSeverityClick ? undefined : true, children: SEVERITY_ORDER.map((severity) => {
+                    const value = formatted[severity];
+                    if (value === undefined)
+                        return null;
+                    const rowClassName = cn('mdk-alarms-bell-button__badge-row', `mdk-alarms-bell-button__badge-row--${severity}`, onSeverityClick && 'mdk-alarms-bell-button__badge-row--interactive');
+                    return onSeverityClick ? (_jsx("button", { type: "button", "aria-label": `${severity} alarms`, className: rowClassName, onClick: (event) => {
+                            event.stopPropagation();
+                            onSeverityClick(severity, event);
+                        }, children: value }, severity)) : (_jsx("span", { className: rowClassName, children: value }, severity));
+                }) })) : null, _jsx("button", { type: "button", onClick: onClick, "aria-label": label, className: cn('mdk-header-action-button', 'mdk-alarms-bell-button'), children: _jsx("span", { className: "mdk-header-action-button__icon", children: _jsx(NotificationBellIcon, {}) }) })] }));
+};
+AlarmsBellButton.displayName = 'AlarmsBellButton';

package/dist/domain/components/header-actions/header-actions.example.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Top-bar action cluster — the alarms bell (with severity-stacked counts) and a
+ * profile menu (here with just a "Sign out" item).
+ */
+export declare const HeaderActionsExample: () => React.ReactNode;

package/dist/domain/components/header-actions/header-actions.example.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlarmsBellButton } from './alarms-bell-button';
+import { ProfileMenu } from './profile-menu';
+/**
+ * Top-bar action cluster — the alarms bell (with severity-stacked counts) and a
+ * profile menu (here with just a "Sign out" item).
+ */
+export const HeaderActionsExample = () => (_jsxs(_Fragment, { children: [_jsx(AlarmsBellButton, { counts: { critical: 171, high: 72, medium: 322 } }), _jsx(ProfileMenu, { user: "you@example.com", items: [
+                {
+                    label: 'Sign out',
+                    onSelect: () => console.warn('sign out'),
+                    danger: true,
+                },
+            ] })] }));

package/dist/domain/components/header-actions/index.d.ts

@@ -0,0 +1,4 @@
+export type { AlarmsBellButtonCounts, AlarmsBellButtonProps } from './alarms-bell-button';
+export { AlarmsBellButton } from './alarms-bell-button';
+export type { ProfileMenuItem, ProfileMenuProps } from './profile-menu';
+export { ProfileMenu } from './profile-menu';

package/dist/domain/components/header-actions/index.js

@@ -0,0 +1,2 @@
+export { AlarmsBellButton } from './alarms-bell-button';
+export { ProfileMenu } from './profile-menu';

package/dist/domain/components/header-actions/profile-menu.d.ts

@@ -0,0 +1,37 @@
+import type { JSX, ReactNode } from 'react';
+export type ProfileMenuItem = {
+    /** Item text; also used as the React key, so keep it unique within `items` */
+    label: string;
+    /** Called when the item is chosen by click or keyboard */
+    onSelect: () => void;
+    /** Render as a destructive action (red). */
+    danger?: boolean;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Optional secondary line under the label (e.g. "Current: Europe/Podgorica"). */
+    description?: ReactNode;
+    /** Disable the menu item. */
+    disabled?: boolean;
+};
+export type ProfileMenuProps = {
+    /** Items rendered in the dropdown, top-to-bottom. */
+    items: ProfileMenuItem[];
+    /** Optional user label rendered at the top of the dropdown (e.g. an email). */
+    user?: ReactNode;
+    /**
+     * Override the trigger icon — defaults to the user-avatar icon.
+     * @default <UserAvatarIcon />
+     */
+    icon?: ReactNode;
+    /**
+     * Accessible label for the trigger button.
+     * @default "Profile menu"
+     */
+    label?: string;
+    /** Additional class names */
+    className?: string;
+};
+export declare function ProfileMenu({ items, user, icon, label, className, }: ProfileMenuProps): JSX.Element;
+export declare namespace ProfileMenu {
+    var displayName: string;
+}

package/dist/domain/components/header-actions/profile-menu.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, DropdownMenu, UserAvatarIcon } from '../../../primitives/index.js';
+/**
+ * Top-bar profile dropdown. Wraps the core DropdownMenu primitive with the
+ * user-avatar icon as the trigger. Items are caller-provided so the menu
+ * surface stays application-driven.
+ *
+ * @category dashboard
+ * @domain mining-operations
+ * @tier agent-ready
+ * @kernelCapability session-management
+ */
+export const ProfileMenu = ({ items, user, icon, label = 'Profile menu', className, }) => (_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, className: cn('mdk-header-action-button', 'mdk-profile-menu__trigger', className), children: _jsx("span", { className: "mdk-header-action-button__icon", children: icon ?? _jsx(UserAvatarIcon, {}) }) }) }), _jsxs(DropdownMenu.Content, { align: "end", children: [user ? (_jsx(DropdownMenu.Label, { className: "mdk-profile-menu__user", children: user })) : null, items.map((item) => (_jsxs(DropdownMenu.Item, { disabled: item.disabled, onSelect: item.onSelect, className: cn('mdk-profile-menu__item', item.description ? 'mdk-profile-menu__item--two-line' : null, item.danger ? 'mdk-profile-menu__item--danger' : null), children: [item.icon ? _jsx("span", { className: "mdk-profile-menu__item-icon", children: item.icon }) : null, _jsxs("span", { className: "mdk-profile-menu__item-body", children: [_jsx("span", { className: "mdk-profile-menu__item-label", children: item.label }), item.description ? (_jsx("span", { className: "mdk-profile-menu__item-description", children: item.description })) : null] })] }, item.label)))] })] }));
+ProfileMenu.displayName = 'ProfileMenu';

package/dist/domain/components/header-stats/header-consumption-box.d.ts

@@ -0,0 +1,18 @@
+import type { JSX, ReactNode } from 'react';
+export type HeaderConsumptionBoxProps = {
+    /** Icon shown next to the stat */
+    icon?: ReactNode;
+    /** Current site-level power consumption, in megawatts. */
+    valueMw?: number;
+    /**
+     * Unit label — defaults to `MW`.
+     * @default MW
+     */
+    unit?: string;
+    /** Additional class names */
+    className?: string;
+};
+export declare function HeaderConsumptionBox({ icon, valueMw, unit, className, }: HeaderConsumptionBoxProps): JSX.Element;
+export declare namespace HeaderConsumptionBox {
+    var displayName: string;
+}

package/dist/domain/components/header-stats/header-consumption-box.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, ConsumptionIcon } from '../../../primitives/index.js';
+const fmt = (value, fractionDigits = 3) => typeof value === 'number'
+    ? value.toLocaleString('en-US', {
+        maximumFractionDigits: fractionDigits,
+        minimumFractionDigits: fractionDigits,
+    })
+    : '—';
+/**
+ * Single-row consumption cell for the dashboard's header strip. The `1.663`
+ * style numeric is rendered in orange (the warning token).
+ *
+ * @category dashboard
+ * @kernelCapability power-monitoring
+ * @domain mining-operations
+ * @tier agent-ready
+ */
+export const HeaderConsumptionBox = ({ icon, valueMw, unit = 'MW', className, }) => (_jsxs("div", { className: cn('mdk-header-stat-box', 'mdk-header-stat-box--accent', className), children: [_jsx("span", { className: "mdk-header-stat-box__icon", children: icon ?? _jsx(ConsumptionIcon, {}) }), _jsxs("div", { className: "mdk-header-stat-box__body", children: [_jsx("div", { className: "mdk-header-stat-box__row", children: _jsx("span", { className: "mdk-header-stat-box__label", children: "Consumption" }) }), _jsxs("div", { className: "mdk-header-stat-box__row", children: [_jsx("span", { className: "mdk-header-stat-box__accent", children: fmt(valueMw) }), _jsx("span", { className: "mdk-header-stat-box__unit", children: unit })] })] })] }));
+HeaderConsumptionBox.displayName = 'HeaderConsumptionBox';

package/dist/domain/components/header-stats/header-efficiency-box.d.ts

@@ -0,0 +1,18 @@
+import type { JSX, ReactNode } from 'react';
+export type HeaderEfficiencyBoxProps = {
+    /** Icon shown next to the stat */
+    icon?: ReactNode;
+    /** Efficiency in watts per TH/s. */
+    valueWthS?: number;
+    /**
+     * Unit label — defaults to `W/TH/S`.
+     * @default W/TH/S
+     */
+    unit?: string;
+    /** Additional class names */
+    className?: string;
+};
+export declare function HeaderEfficiencyBox({ icon, valueWthS, unit, className, }: HeaderEfficiencyBoxProps): JSX.Element;
+export declare namespace HeaderEfficiencyBox {
+    var displayName: string;
+}

package/dist/domain/components/header-stats/header-efficiency-box.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, EfficiencyIcon } from '../../../primitives/index.js';
+const fmt = (value, fractionDigits = 2) => typeof value === 'number'
+    ? value.toLocaleString('en-US', {
+        maximumFractionDigits: fractionDigits,
+        minimumFractionDigits: fractionDigits,
+    })
+    : '—';
+/**
+ * Single-row efficiency cell for the dashboard's header strip. Displays the
+ * W/TH/s metric derived from `power_w / hashrate_th`.
+ *
+ * @category dashboard
+ * @kernelCapability efficiency-monitoring
+ * @domain mining-operations
+ * @tier agent-ready
+ */
+export const HeaderEfficiencyBox = ({ icon, valueWthS, unit = 'W/TH/S', className, }) => (_jsxs("div", { className: cn('mdk-header-stat-box', className), children: [_jsx("span", { className: "mdk-header-stat-box__icon", children: icon ?? _jsx(EfficiencyIcon, {}) }), _jsxs("div", { className: "mdk-header-stat-box__body", children: [_jsx("div", { className: "mdk-header-stat-box__row", children: _jsx("span", { className: "mdk-header-stat-box__label", children: "Efficiency" }) }), _jsxs("div", { className: "mdk-header-stat-box__row", children: [_jsx("span", { className: "mdk-header-stat-box__value", children: fmt(valueWthS) }), _jsx("span", { className: "mdk-header-stat-box__unit", children: unit })] })] })] }));
+HeaderEfficiencyBox.displayName = 'HeaderEfficiencyBox';

package/dist/domain/components/header-stats/header-hashrate-box.d.ts

@@ -0,0 +1,30 @@
+import type { JSX, ReactNode } from 'react';
+export type HeaderHashrateBoxProps = {
+    /** Icon shown next to the stat */
+    icon?: ReactNode;
+    /** App-side aggregate hashrate in PH/s. */
+    appPhs?: number;
+    /** Pool-side aggregate hashrate in PH/s. */
+    poolPhs?: number;
+    /**
+     * Hashrate unit label — defaults to `PH/s`.
+     * @default PH/s
+     */
+    unit?: string;
+    /**
+     * Decimal places shown for both values — defaults to `3`.
+     * @default 3
+     */
+    fractionDigits?: number;
+    /**
+     * Label for the app-side row
+     * @default WEBAPP_SHORT_NAME ("APP")
+     */
+    appLabel?: string;
+    /** Additional class names */
+    className?: string;
+};
+export declare function HeaderHashrateBox({ icon, appPhs, poolPhs, unit, fractionDigits, appLabel, className, }: HeaderHashrateBoxProps): JSX.Element;
+export declare namespace HeaderHashrateBox {
+    var displayName: string;
+}

package/dist/domain/components/header-stats/header-hashrate-box.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, HashrateStatIcon } from '../../../primitives/index.js';
+import { WEBAPP_SHORT_NAME } from '../../constants';
+const fmt = (value, fractionDigits = 3) => typeof value === 'number'
+    ? value.toLocaleString('en-US', {
+        maximumFractionDigits: fractionDigits,
+        minimumFractionDigits: fractionDigits,
+    })
+    : '—';
+/**
+ * Two-row hashrate cell for the dashboard's header strip. Shows the app-side
+ * and pool-side aggregate hashrate side by side. Values fall back to `—`
+ * when undefined.
+ *
+ * @category dashboard
+ * @kernelCapability hashrate-monitoring
+ * @domain mining-operations
+ * @tier agent-ready
+ */
+export const HeaderHashrateBox = ({ icon, appPhs, poolPhs, unit = 'PH/s', fractionDigits = 3, appLabel = WEBAPP_SHORT_NAME, className, }) => (_jsxs("div", { className: cn('mdk-header-stat-box', className), children: [_jsx("span", { className: "mdk-header-stat-box__icon", children: icon ?? _jsx(HashrateStatIcon, {}) }), _jsxs("div", { className: "mdk-header-stat-box__body", children: [_jsxs("div", { className: "mdk-header-stat-box__row", children: [_jsx("span", { className: "mdk-header-stat-box__label", children: "Hashrate" }), _jsx("span", { className: "mdk-header-stat-box__muted", children: appLabel }), _jsx("span", { className: "mdk-header-stat-box__value", children: fmt(appPhs, fractionDigits) }), _jsx("span", { className: "mdk-header-stat-box__unit", children: unit })] }), _jsxs("div", { className: "mdk-header-stat-box__row", children: [_jsx("span", { className: "mdk-header-stat-box__muted", children: "Pool" }), _jsx("span", { className: "mdk-header-stat-box__value", children: fmt(poolPhs, fractionDigits) }), _jsx("span", { className: "mdk-header-stat-box__unit", children: unit })] })] })] }));
+HeaderHashrateBox.displayName = 'HeaderHashrateBox';

package/dist/domain/components/header-stats/header-miners-box.d.ts

@@ -0,0 +1,32 @@
+import type { JSX, ReactNode } from 'react';
+export type HeaderMinersBoxProps = {
+    /** Icon shown next to the "Miners" label. Caller-provided so the package stays icon-agnostic. */
+    icon?: ReactNode;
+    /** Total miners across the site (denominator of the `158 / 2,188` ratio). */
+    total?: number;
+    /** Online miners (the `158` numerator). */
+    online?: number;
+    /** Miners flagged in warning (the small amber count). */
+    error?: number;
+    /** Miners offline (the small red count). */
+    offline?: number;
+    /** Optional app-side meta line — total miners reporting to the app. */
+    appTotal?: number;
+    /** Optional pool-side meta — total miners as reported by upstream pools. */
+    poolTotal?: number;
+    /** Optional pool-side online count (green). */
+    poolOnline?: number;
+    /** Optional pool-side mismatch count (red). */
+    poolMismatch?: number;
+    /**
+     * Label for the app-side row
+     * @default WEBAPP_SHORT_NAME ("APP")
+     */
+    appLabel?: string;
+    /** Additional class names */
+    className?: string;
+};
+export declare function HeaderMinersBox({ icon, total, online, error, offline, appTotal, poolTotal, poolOnline, poolMismatch, appLabel, className, }: HeaderMinersBoxProps): JSX.Element;
+export declare namespace HeaderMinersBox {
+    var displayName: string;
+}

package/dist/domain/components/header-stats/header-miners-box.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, MinersStatIcon } from '../../../primitives/index.js';
+import { WEBAPP_SHORT_NAME } from '../../constants';
+const fmt = (value) => typeof value === 'number' ? value.toLocaleString('en-US') : '—';
+/**
+ * Two-row miner-count cell for the dashboard's header strip. Top row carries
+ * the app-side `online / error / offline` breakdown; the bottom row shows the
+ * pool-side equivalent. Numbers fall back to `—` when undefined.
+ *
+ * @category dashboard
+ * @kernelCapability site-overview
+ * @domain mining-operations
+ * @tier agent-ready
+ */
+export const HeaderMinersBox = ({ icon, total, online, error, offline, appTotal, poolTotal, poolOnline, poolMismatch, appLabel = WEBAPP_SHORT_NAME, className, }) => (_jsxs("div", { className: cn('mdk-header-stat-box', className), children: [_jsx("span", { className: "mdk-header-stat-box__icon", children: icon ?? _jsx(MinersStatIcon, {}) }), _jsxs("div", { className: "mdk-header-stat-box__body", children: [_jsxs("div", { className: "mdk-header-stat-box__row", children: [_jsx("span", { className: "mdk-header-stat-box__label", children: "Miners" }), _jsxs("span", { className: "mdk-header-stat-box__muted", children: [appLabel, " (", fmt(appTotal), ")"] }), _jsx("span", { className: "mdk-header-stat-box__success", children: fmt(online) }), _jsx("span", { className: "mdk-header-stat-box__warning", children: fmt(error) }), _jsx("span", { className: "mdk-header-stat-box__danger", children: fmt(offline) })] }), _jsxs("div", { className: "mdk-header-stat-box__row", children: [_jsx("span", { className: "mdk-header-stat-box__accent", children: fmt(online) }), _jsxs("span", { className: "mdk-header-stat-box__muted", children: ["/ ", fmt(total)] }), _jsxs("span", { className: "mdk-header-stat-box__muted", children: ["Pool (", fmt(poolTotal), ")"] }), _jsx("span", { className: "mdk-header-stat-box__success", children: fmt(poolOnline) }), _jsx("span", { className: "mdk-header-stat-box__danger", children: fmt(poolMismatch) })] })] })] }));
+HeaderMinersBox.displayName = 'HeaderMinersBox';

package/dist/domain/components/header-stats/header-stats-bar.d.ts

@@ -0,0 +1,12 @@
+import { type JSX, type ReactNode } from 'react';
+import './header-stats-bar.scss';
+export type HeaderStatsBarProps = {
+    /** Stat boxes to render in order, left-to-right. */
+    children: ReactNode;
+    /** Optional class hook. */
+    className?: string;
+};
+export declare function HeaderStatsBar({ children, className }: HeaderStatsBarProps): JSX.Element;
+export declare namespace HeaderStatsBar {
+    var displayName: string;
+}

package/dist/domain/components/header-stats/header-stats-bar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, HeaderStatDividerIcon } from '../../../primitives/index.js';
+import { Children, Fragment } from 'react';
+/**
+ * Horizontal flex strip that hosts the dashboard's stat boxes
+ * (HeaderMinersBox, HeaderHashrateBox, HeaderConsumptionBox,
+ * HeaderEfficiencyBox). Lives inside `<AppHeader>` as the middle slot.
+ *
+ * Slot-based: the caller decides which boxes to render and in which
+ * order. The bar interleaves an angled chevron divider between
+ * adjacent children.
+ *
+ * @category dashboard
+ * @kernelCapability site-overview
+ * @domain mining-operations
+ * @tier agent-ready
+ */
+export const HeaderStatsBar = ({ children, className }) => {
+    const items = Children.toArray(children).filter(Boolean);
+    return (_jsx("div", { className: cn('mdk-header-stats-bar', className), children: Children.map(items, (child) => (_jsxs(Fragment, { children: [_jsx(HeaderStatDividerIcon, { "aria-hidden": "true", className: "mdk-header-stats-bar__divider" }), child] }))) }));
+};
+HeaderStatsBar.displayName = 'HeaderStatsBar';

package/dist/domain/components/header-stats/header-stats.example.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Four-box dashboard header strip — Miners / Hashrate / Consumption /
+ * Efficiency. Lives in the middle slot of `<AppHeader>`.
+ */
+export declare const HeaderStatsExample: () => React.ReactNode;