ember-mug 0.1.3 → 0.1.5

package/dist/components/Presets.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text, useInput } from 'ink';
-import { formatTemperature } from '../lib/utils.js';
-export function Presets({ presets, selectedIndex, temperatureUnit, onSelect, isActive, }) {
+import { Box, Text, useInput } from "ink";
+import { formatTemperature } from "../lib/utils.js";
+import { Panel } from "./Panel.js";
+export function Presets({ presets, selectedIndex, temperatureUnit, onSelect, isActive, width, height, theme, }) {
     useInput((input, key) => {
         if (!isActive)
             return;
@@ -10,10 +11,14 @@ export function Presets({ presets, selectedIndex, temperatureUnit, onSelect, isA
             onSelect(presets[numKey - 1]);
         }
     }, { isActive });
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { justifyContent: "center", children: _jsx(Text, { bold: true, children: "Presets" }) }), _jsx(Box, { justifyContent: "center", marginY: 1, gap: 2, children: presets.map((preset, index) => (_jsx(PresetButton, { preset: preset, index: index, isSelected: selectedIndex === index, temperatureUnit: temperatureUnit }, preset.id))) }), _jsx(Box, { justifyContent: "center", children: _jsxs(Text, { dimColor: true, children: ["Press ", _jsxs(Text, { color: "cyan", children: ["1-", presets.length] }), " to select a preset"] }) })] }));
+    // Fixed width for each preset button (12 chars inner content)
+    const boxWidth = 12;
+    return (_jsx(Panel, { title: "Temperature Presets", titleColor: theme.primary, borderColor: theme.border, width: width, height: height, children: _jsx(Box, { justifyContent: "center", gap: 1, children: presets.map((preset, index) => (_jsx(PresetButton, { preset: preset, index: index, isSelected: selectedIndex === index, temperatureUnit: temperatureUnit, theme: theme, boxWidth: boxWidth }, preset.id))) }) }));
 }
-function PresetButton({ preset, index, isSelected, temperatureUnit, }) {
-    const borderColor = isSelected ? 'cyan' : 'gray';
-    const textColor = isSelected ? 'cyan' : 'white';
-    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsx(Text, { color: borderColor, children: isSelected ? '┌───────────┐' : '┌───────────┐' }), _jsxs(Text, { color: borderColor, children: ["\u2502 ", _jsxs(Text, { color: textColor, children: [preset.icon, " ", preset.name.padEnd(6)] }), " \u2502"] }), _jsxs(Text, { color: borderColor, children: ["\u2502 ", _jsx(Text, { color: textColor, children: formatTemperature(preset.temperature, temperatureUnit).padStart(7) }), " \u2502"] }), _jsx(Text, { color: borderColor, children: "\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518" }), _jsxs(Text, { color: "cyan", children: ["[", index + 1, "]"] })] }));
+function PresetButton({ preset, index, isSelected, temperatureUnit, theme, boxWidth, }) {
+    const borderColor = isSelected ? theme.primary : theme.dimText;
+    const textColor = isSelected ? theme.text : theme.dimText;
+    const nameDisplay = preset.name.substring(0, boxWidth).padEnd(boxWidth);
+    const tempDisplay = formatTemperature(preset.temperature, temperatureUnit).padStart(boxWidth);
+    return (_jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsxs(Text, { color: borderColor, children: ["+", "-".repeat(boxWidth), "+"] }), _jsxs(Text, { color: borderColor, children: ["|", _jsx(Text, { color: textColor, bold: true, children: nameDisplay }), "|"] }), _jsxs(Text, { color: borderColor, children: ["|", _jsx(Text, { color: isSelected ? theme.primary : theme.text, children: tempDisplay }), "|"] }), _jsxs(Text, { color: borderColor, children: ["+", "-".repeat(boxWidth), "+"] }), _jsxs(Text, { color: theme.primary, bold: true, children: ["[", index + 1, "]"] })] }));
 }

package/dist/components/SettingsView.d.ts

@@ -1,11 +1,17 @@
-import React from 'react';
-import { TemperatureUnit, Preset } from '../lib/types.js';
+import React from "react";
+import { TemperatureUnit, Preset, RGBColor } from "../lib/types.js";
+import { TERMINAL_COLORS } from "../lib/theme.js";
+type TerminalTheme = (typeof TERMINAL_COLORS)[keyof typeof TERMINAL_COLORS];
 interface SettingsViewProps {
     presets: Preset[];
     temperatureUnit: TemperatureUnit;
+    ledColor: RGBColor;
     onTemperatureUnitChange: (unit: TemperatureUnit) => void;
+    onPresetUpdate: (preset: Preset) => void;
+    onColorChange: (color: RGBColor) => void;
     onClose: () => void;
     isActive: boolean;
+    theme: TerminalTheme;
 }
-export declare function SettingsView({ presets, temperatureUnit, onTemperatureUnitChange, onClose, isActive, }: SettingsViewProps): React.ReactElement;
+export declare function SettingsView({ presets, temperatureUnit, ledColor, onTemperatureUnitChange, onPresetUpdate, onColorChange, onClose, isActive, theme, }: SettingsViewProps): React.ReactElement;
 export {};

package/dist/components/SettingsView.js

@@ -1,34 +1,108 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { TemperatureUnit } from '../lib/types.js';
-import { formatTemperature } from '../lib/utils.js';
-export function SettingsView({ presets, temperatureUnit, onTemperatureUnitChange, onClose, isActive, }) {
-    const [selectedOption, setSelectedOption] = useState('unit');
+import { useState } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import { TemperatureUnit } from "../lib/types.js";
+import { formatTemperature, rgbToHex } from "../lib/utils.js";
+import { Panel } from "./Panel.js";
+const PRESET_COLORS = [
+    { name: "Orange", color: { r: 255, g: 147, b: 41, a: 255 } },
+    { name: "Red", color: { r: 255, g: 0, b: 0, a: 255 } },
+    { name: "Green", color: { r: 0, g: 255, b: 0, a: 255 } },
+    { name: "Blue", color: { r: 0, g: 128, b: 255, a: 255 } },
+    { name: "Purple", color: { r: 128, g: 0, b: 255, a: 255 } },
+    { name: "Pink", color: { r: 255, g: 105, b: 180, a: 255 } },
+    { name: "White", color: { r: 255, g: 255, b: 255, a: 255 } },
+    { name: "Teal", color: { r: 0, g: 255, b: 200, a: 255 } },
+];
+export function SettingsView({ presets, temperatureUnit, ledColor, onTemperatureUnitChange, onPresetUpdate, onColorChange, onClose, isActive, theme, }) {
+    // 0 = Unit Toggle, 1 = LED Color, 2...N = Presets
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // Calculate total items: 1 (unit) + 1 (color) + presets count
+    const totalItems = 2 + presets.length;
+    const { stdout } = useStdout();
+    const terminalWidth = stdout?.columns || 80;
+    const panelWidth = Math.floor(terminalWidth * 0.6); // 60% of terminal width
     useInput((input, key) => {
         if (!isActive)
             return;
-        if (key.escape || input === 'q') {
+        if (key.escape || input === "q") {
             onClose();
             return;
         }
-        if (key.upArrow || input === 'k') {
-            setSelectedOption('unit');
+        if (key.upArrow || input === "k") {
+            setSelectedIndex((current) => Math.max(0, current - 1));
         }
-        else if (key.downArrow || input === 'j') {
-            setSelectedOption('presets');
+        if (key.downArrow || input === "j") {
+            setSelectedIndex((current) => Math.min(totalItems - 1, current + 1));
         }
-        if (key.return || input === ' ') {
-            if (selectedOption === 'unit') {
+        // Toggle Unit
+        if (selectedIndex === 0) {
+            if (key.return || input === " ") {
                 const newUnit = temperatureUnit === TemperatureUnit.Celsius
                     ? TemperatureUnit.Fahrenheit
                     : TemperatureUnit.Celsius;
                 onTemperatureUnitChange(newUnit);
             }
         }
+        else if (selectedIndex === 1) {
+            // LED Color
+            if (key.leftArrow || input === "h" || key.rightArrow || input === "l") {
+                const currentColorIndex = ledColor
+                    ? PRESET_COLORS.findIndex((p) => p.color.r === ledColor.r &&
+                        p.color.g === ledColor.g &&
+                        p.color.b === ledColor.b)
+                    : -1;
+                let nextIndex = currentColorIndex;
+                if (key.leftArrow || input === "h") {
+                    nextIndex = currentColorIndex - 1;
+                    if (nextIndex < 0)
+                        nextIndex = PRESET_COLORS.length - 1;
+                }
+                else {
+                    nextIndex = currentColorIndex + 1;
+                    if (nextIndex >= PRESET_COLORS.length)
+                        nextIndex = 0;
+                }
+                onColorChange(PRESET_COLORS[nextIndex].color);
+            }
+        }
+        else {
+            // Edit Preset
+            const presetIndex = selectedIndex - 2;
+            const preset = presets[presetIndex];
+            let delta = 0;
+            if (key.leftArrow || input === "h") {
+                delta = -0.5;
+            }
+            else if (key.rightArrow || input === "l") {
+                delta = 0.5;
+            }
+            if (delta !== 0 && preset) {
+                onPresetUpdate({
+                    ...preset,
+                    temperature: preset.temperature + delta,
+                });
+            }
+        }
     }, { isActive });
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Settings" }) }), _jsx(Text, { dimColor: true, children: '─'.repeat(40) }), _jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(SettingRow, { label: "Temperature Unit", value: temperatureUnit === TemperatureUnit.Celsius ? 'Celsius (°C)' : 'Fahrenheit (°F)', isSelected: selectedOption === 'unit', hint: "Press Enter to toggle" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, children: "Presets:" }) }), presets.map((preset, index) => (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: [index + 1, ". ", preset.icon, " ", preset.name, ":", ' ', formatTemperature(preset.temperature, temperatureUnit)] }) }, preset.id)))] }), _jsx(Text, { dimColor: true, children: '─'.repeat(40) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Press ", _jsx(Text, { color: "cyan", children: "Esc" }), " or ", _jsx(Text, { color: "cyan", children: "q" }), " to close settings"] }) })] }));
+    const currentColorPreset = ledColor
+        ? PRESET_COLORS.find((p) => p.color.r === ledColor.r &&
+            p.color.g === ledColor.g &&
+            p.color.b === ledColor.b)
+        : undefined;
+    const colorDisplayValue = currentColorPreset
+        ? currentColorPreset.name
+        : ledColor
+            ? rgbToHex(ledColor.r, ledColor.g, ledColor.b)
+            : "Unknown";
+    return (_jsx(Box, { justifyContent: "center", marginY: 1, children: _jsxs(Panel, { title: "[=] Settings", titleColor: theme.primary, borderColor: theme.border, width: panelWidth, height: 16, children: [_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(SettingRow, { label: "Temperature Unit", value: temperatureUnit === TemperatureUnit.Celsius
+                                ? "Celsius (°C)"
+                                : "Fahrenheit (°F)", isSelected: selectedIndex === 0, hint: "Enter/Space to toggle", theme: theme }), _jsx(SettingRow, { label: "LED Color", value: colorDisplayValue, valueColor: ledColor
+                                ? rgbToHex(ledColor.r, ledColor.g, ledColor.b)
+                                : undefined, isSelected: selectedIndex === 1, hint: "Left/Right to change", theme: theme }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.primary, bold: true, children: "Presets:" }), presets.map((preset, index) => (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: theme.dimText, children: [_jsxs(Text, { color: selectedIndex === index + 2
+                                                    ? theme.primary
+                                                    : theme.dimText, children: [selectedIndex === index + 2 ? "> " : "  ", index + 1, "."] }), " ", preset.name, ":", " ", _jsx(Text, { color: selectedIndex === index + 2 ? theme.text : theme.dimText, bold: selectedIndex === index + 2, children: formatTemperature(preset.temperature, temperatureUnit) }), selectedIndex === index + 2 && (_jsx(Text, { dimColor: true, children: " (Left/Right to edit)" }))] }) }, preset.id)))] })] }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsxs(Text, { color: theme.dimText, children: [_jsx(Text, { color: theme.primary, bold: true, children: "[Esc]" }), " ", "or", " ", _jsx(Text, { color: theme.primary, bold: true, children: "[q]" }), " ", "to close"] }) }), _jsx(Box, { justifyContent: "center", children: _jsx(Text, { color: theme.dimText, dimColor: true, children: "(Use Arrow Keys to navigate and edit)" }) })] }) }));
 }
-function SettingRow({ label, value, isSelected, hint, }) {
-    return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? 'cyan' : 'white', children: [isSelected ? '> ' : '  ', label, ": ", _jsx(Text, { bold: true, children: value }), hint && isSelected && _jsxs(Text, { dimColor: true, children: [" (", hint, ")"] })] }) }));
+function SettingRow({ label, value, valueColor, isSelected, hint, theme, }) {
+    return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? theme.primary : theme.text, children: [isSelected ? "> " : "  ", label, ":", " ", _jsx(Text, { bold: true, color: valueColor, children: value }), hint && isSelected && _jsxs(Text, { dimColor: true, children: [" (", hint, ")"] })] }) }));
 }

package/dist/components/TemperatureControl.d.ts

@@ -1,10 +1,15 @@
-import React from 'react';
-import { TemperatureUnit } from '../lib/types.js';
+import React from "react";
+import { TemperatureUnit } from "../lib/types.js";
+import { TERMINAL_COLORS } from "../lib/theme.js";
+type TerminalTheme = (typeof TERMINAL_COLORS)[keyof typeof TERMINAL_COLORS];
 interface TemperatureControlProps {
     targetTemp: number;
     temperatureUnit: TemperatureUnit;
     onTempChange: (temp: number) => void;
     isActive: boolean;
+    width?: number;
+    height?: number;
+    theme: TerminalTheme;
 }
-export declare function TemperatureControl({ targetTemp, temperatureUnit, onTempChange, isActive, }: TemperatureControlProps): React.ReactElement;
+export declare function TemperatureControl({ targetTemp, temperatureUnit, onTempChange, isActive, width, height, theme, }: TemperatureControlProps): React.ReactElement;
 export {};

package/dist/components/TemperatureControl.js

@@ -1,24 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text, useInput } from 'ink';
-import { MIN_TEMP_CELSIUS, MAX_TEMP_CELSIUS } from '../lib/types.js';
-import { formatTemperature, clampTemperature } from '../lib/utils.js';
-export function TemperatureControl({ targetTemp, temperatureUnit, onTempChange, isActive, }) {
+import { Box, Text, useInput } from "ink";
+import { MIN_TEMP_CELSIUS, MAX_TEMP_CELSIUS, } from "../lib/types.js";
+import { formatTemperature, clampTemperature } from "../lib/utils.js";
+import { Panel } from "./Panel.js";
+export function TemperatureControl({ targetTemp, temperatureUnit, onTempChange, isActive, width, height, theme, }) {
     useInput((input, key) => {
         if (!isActive)
             return;
         let delta = 0;
-        if (key.leftArrow || input === 'h' || input === '-') {
+        if (key.leftArrow) {
             delta = -0.5;
         }
-        else if (key.rightArrow || input === 'l' || input === '+' || input === '=') {
+        else if (key.rightArrow) {
             delta = 0.5;
         }
-        else if (key.upArrow || input === 'k') {
-            delta = 1;
-        }
-        else if (key.downArrow || input === 'j') {
-            delta = -1;
-        }
         if (delta !== 0) {
             const newTemp = clampTemperature(targetTemp + delta);
             onTempChange(newTemp);
@@ -26,13 +21,13 @@ export function TemperatureControl({ targetTemp, temperatureUnit, onTempChange,
     }, { isActive });
     const minTempDisplay = formatTemperature(MIN_TEMP_CELSIUS, temperatureUnit);
     const maxTempDisplay = formatTemperature(MAX_TEMP_CELSIUS, temperatureUnit);
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { justifyContent: "center", children: _jsx(Text, { bold: true, children: "Adjust Temperature" }) }), _jsxs(Box, { justifyContent: "center", marginY: 1, children: [_jsx(Text, { dimColor: true, children: minTempDisplay }), _jsx(Text, { children: " " }), _jsx(TemperatureSlider, { value: targetTemp, min: MIN_TEMP_CELSIUS, max: MAX_TEMP_CELSIUS, isActive: isActive }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: maxTempDisplay })] }), _jsx(Box, { justifyContent: "center", children: _jsx(Text, { dimColor: true, children: isActive ? (_jsxs(Text, { children: ["Use ", _jsx(Text, { color: "cyan", children: "\u2190/\u2192" }), " or ", _jsx(Text, { color: "cyan", children: "h/l" }), " (\u00B10.5\u00B0) |", ' ', _jsx(Text, { color: "cyan", children: "\u2191/\u2193" }), " or ", _jsx(Text, { color: "cyan", children: "j/k" }), " (\u00B11\u00B0)"] })) : (_jsxs(Text, { children: ["Press ", _jsx(Text, { color: "cyan", children: "t" }), " to adjust temperature"] })) }) })] }));
+    return (_jsxs(Panel, { title: "Temperature Adjust", titleColor: theme.primary, borderColor: theme.border, width: width, height: height, children: [_jsxs(Box, { justifyContent: "center", marginY: 1, children: [_jsx(Text, { color: theme.dimText, children: minTempDisplay }), _jsx(Text, { children: " " }), _jsx(TemperatureSlider, { value: targetTemp, min: MIN_TEMP_CELSIUS, max: MAX_TEMP_CELSIUS, isActive: isActive, theme: theme }), _jsx(Text, { children: " " }), _jsx(Text, { color: theme.dimText, children: maxTempDisplay })] }), _jsx(Box, { justifyContent: "center", children: _jsx(Text, { color: theme.dimText, children: _jsx(Text, { color: theme.primary, children: "\u2190/\u2192" }) }) })] }));
 }
-function TemperatureSlider({ value, min, max, isActive, }) {
-    const totalWidth = 20;
+function TemperatureSlider({ value, min, max, isActive, theme, }) {
+    const totalWidth = 16;
     const normalizedValue = (value - min) / (max - min);
     const position = Math.round(normalizedValue * (totalWidth - 1));
-    const sliderChars = Array(totalWidth).fill('─');
-    sliderChars[position] = '●';
-    return (_jsx(Text, { color: isActive ? 'cyan' : 'white', children: sliderChars.join('') }));
+    const leftPart = "━".repeat(position);
+    const rightPart = "━".repeat(totalWidth - position - 1);
+    return (_jsxs(Text, { children: [_jsx(Text, { color: isActive ? theme.primary : theme.dimText, children: leftPart }), _jsx(Text, { color: theme.text, bold: true, children: "\u25C9" }), _jsx(Text, { color: theme.dimText, children: rightPart })] }));
 }

package/dist/components/TemperatureDisplay.d.ts

@@ -1,10 +1,16 @@
-import React from 'react';
-import { LiquidState, TemperatureUnit } from '../lib/types.js';
+import React from "react";
+import { LiquidState, TemperatureUnit } from "../lib/types.js";
+import { TERMINAL_COLORS } from "../lib/theme.js";
+type TerminalTheme = (typeof TERMINAL_COLORS)[keyof typeof TERMINAL_COLORS];
 interface TemperatureDisplayProps {
     currentTemp: number;
     targetTemp: number;
     liquidState: LiquidState;
     temperatureUnit: TemperatureUnit;
+    width?: number;
+    height?: number;
+    theme: TerminalTheme;
+    tempRate?: number;
 }
-export declare function TemperatureDisplay({ currentTemp, targetTemp, liquidState, temperatureUnit, }: TemperatureDisplayProps): React.ReactElement;
+export declare function TemperatureDisplay({ currentTemp, targetTemp, liquidState, temperatureUnit, width, height, theme, tempRate, }: TemperatureDisplayProps): React.ReactElement;
 export {};

package/dist/components/TemperatureDisplay.js

@@ -1,40 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import { LiquidState } from '../lib/types.js';
-import { formatTemperature, getLiquidStateText, getLiquidStateIcon, estimateTimeToTargetTemp, formatDuration, } from '../lib/utils.js';
-export function TemperatureDisplay({ currentTemp, targetTemp, liquidState, temperatureUnit, }) {
+import { Box, Text } from "ink";
+import { LiquidState } from "../lib/types.js";
+import { formatTemperature, getLiquidStateText, estimateTimeToTargetTemp, formatDuration, } from "../lib/utils.js";
+import { Panel } from "./Panel.js";
+export function TemperatureDisplay({ currentTemp, targetTemp, liquidState, temperatureUnit, width, height, theme, tempRate, }) {
     const isEmpty = liquidState === LiquidState.Empty;
     const isAtTarget = Math.abs(currentTemp - targetTemp) < 0.5 && !isEmpty;
-    const tempDiff = currentTemp - targetTemp;
-    let tempColor;
-    if (isEmpty) {
-        tempColor = 'gray';
-    }
-    else if (Math.abs(tempDiff) < 1) {
-        tempColor = 'green';
-    }
-    else if (tempDiff > 0) {
-        tempColor = 'red';
-    }
-    else {
-        tempColor = 'blue';
-    }
-    const timeToTarget = estimateTimeToTargetTemp(currentTemp, targetTemp, liquidState);
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { justifyContent: "center", children: _jsx(Text, { bold: true, children: "Temperature" }) }), _jsxs(Box, { marginY: 1, justifyContent: "center", children: [_jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsx(Text, { dimColor: true, children: "Current" }), _jsx(Text, { bold: true, color: tempColor, children: isEmpty ? '---' : formatTemperature(currentTemp, temperatureUnit) })] }), _jsx(Box, { marginX: 3, children: _jsx(Text, { dimColor: true, children: '  →  ' }) }), _jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsx(Text, { dimColor: true, children: "Target" }), _jsx(Text, { bold: true, color: "cyan", children: formatTemperature(targetTemp, temperatureUnit) })] })] }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: getStateColor(liquidState), children: [getLiquidStateIcon(liquidState), " ", getLiquidStateText(liquidState)] }), isAtTarget && _jsx(Text, { color: "green", children: " - Perfect!" })] }) }), timeToTarget !== null && timeToTarget > 0 && (_jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ['Est. time to target: ', _jsx(Text, { color: "yellow", children: formatDuration(timeToTarget) })] }) })), timeToTarget === 0 && !isEmpty && (_jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: "green", children: "At target temperature!" }) }))] }));
-}
-function getStateColor(state) {
-    switch (state) {
-        case LiquidState.Empty:
-            return 'gray';
-        case LiquidState.Filling:
-            return 'cyan';
-        case LiquidState.Cooling:
-            return 'blue';
-        case LiquidState.Heating:
-            return 'red';
-        case LiquidState.StableTemperature:
-            return 'green';
-        default:
-            return 'white';
-    }
+    const timeToTarget = estimateTimeToTargetTemp(currentTemp, targetTemp, liquidState, tempRate);
+    return (_jsxs(Panel, { title: "Temperature", titleColor: theme.primary, borderColor: theme.border, width: width, height: height, children: [_jsxs(Box, { marginY: 1, justifyContent: "center", width: "100%", children: [_jsxs(Box, { flexDirection: "column", alignItems: "center", minWidth: 16, flexShrink: 0, children: [_jsx(Box, { children: _jsx(Text, { color: theme.dimText, children: "Current" }) }), _jsx(Box, { children: _jsx(Text, { bold: true, color: theme.primary, children: isEmpty
+                                        ? "---"
+                                        : formatTemperature(currentTemp, temperatureUnit) }) })] }), _jsx(Box, { marginX: 2, justifyContent: "center", alignItems: "center", children: _jsx(Text, { color: theme.primary, bold: true, children: "-->" }) }), _jsxs(Box, { flexDirection: "column", alignItems: "center", minWidth: 16, flexShrink: 0, children: [_jsx(Box, { children: _jsx(Text, { color: theme.dimText, children: "Target" }) }), _jsx(Box, { children: _jsx(Text, { bold: true, color: theme.text, children: formatTemperature(targetTemp, temperatureUnit) }) })] })] }), _jsx(Box, { justifyContent: "center", children: _jsxs(Text, { children: [_jsx(Text, { color: theme.primary, bold: true, children: getLiquidStateText(liquidState) }), isAtTarget && (_jsxs(Text, { color: theme.primary, bold: true, children: [" ", "*"] })), timeToTarget !== null && timeToTarget > 0 && (_jsxs(Text, { color: theme.dimText, children: ["  •  [~] ", _jsx(Text, { color: theme.primary, children: formatDuration(timeToTarget) }), _jsx(Text, { color: theme.dimText, children: " to target" })] }))] }) })] }));
 }

package/dist/hooks/useMug.d.ts

@@ -1,4 +1,4 @@
-import { MugState, TemperatureUnit, RGBColor } from '../lib/types.js';
+import { MugState, TemperatureUnit, RGBColor } from "../lib/types.js";
 interface UseMugReturn {
     state: MugState;
     isScanning: boolean;
@@ -9,6 +9,8 @@ interface UseMugReturn {
     setTemperatureUnit: (unit: TemperatureUnit) => Promise<void>;
     setLedColor: (color: RGBColor) => Promise<void>;
     disconnect: () => Promise<void>;
+    tempRate: number;
+    batteryRate: number;
 }
 export declare function useMug(): UseMugReturn;
 export {};

package/dist/hooks/useMug.js

@@ -1,6 +1,7 @@
-import { useState, useEffect, useCallback } from 'react';
-import { getBluetoothManager } from '../lib/bluetooth.js';
-import { LiquidState, TemperatureUnit } from '../lib/types.js';
+import { useState, useEffect, useCallback } from "react";
+import { getBluetoothManager } from "../lib/bluetooth.js";
+import { LiquidState, TemperatureUnit, } from "../lib/types.js";
+import { calculateRate } from "../lib/utils.js";
 const initialState = {
     connected: false,
     batteryLevel: 0,
@@ -10,13 +11,55 @@ const initialState = {
     liquidState: LiquidState.Empty,
     temperatureUnit: TemperatureUnit.Celsius,
     color: { r: 255, g: 147, b: 41, a: 255 },
-    mugName: '',
+    mugName: "",
 };
 export function useMug() {
     const [state, setState] = useState(initialState);
-    const [isScanning, setIsScanning] = useState(false);
+    const [isScanning, setIsScanning] = useState(true);
     const [error, setError] = useState(null);
     const [foundMugName, setFoundMugName] = useState(null);
+    const [tempHistory, setTempHistory] = useState([]);
+    const [batteryHistory, setBatteryHistory] = useState([]);
+    // Update temp history
+    useEffect(() => {
+        if (state.connected && state.liquidState !== LiquidState.Empty) {
+            const now = Date.now();
+            setTempHistory((prev) => {
+                const last = prev[prev.length - 1];
+                if (last &&
+                    last.value === state.currentTemp &&
+                    now - last.time < 10000) {
+                    return prev;
+                }
+                const next = [...prev, { value: state.currentTemp, time: now }];
+                return next.filter((item) => now - item.time < 5 * 60 * 1000);
+            });
+        }
+        else if (!state.connected || state.liquidState === LiquidState.Empty) {
+            if (tempHistory.length > 0)
+                setTempHistory([]);
+        }
+    }, [state.currentTemp, state.connected, state.liquidState]);
+    // Update battery history
+    useEffect(() => {
+        if (state.connected) {
+            const now = Date.now();
+            setBatteryHistory((prev) => {
+                const last = prev[prev.length - 1];
+                if (last &&
+                    last.value === state.batteryLevel &&
+                    now - last.time < 30000) {
+                    return prev;
+                }
+                const next = [...prev, { value: state.batteryLevel, time: now }];
+                return next.filter((item) => now - item.time < 10 * 60 * 1000);
+            });
+        }
+        else if (!state.connected) {
+            if (batteryHistory.length > 0)
+                setBatteryHistory([]);
+        }
+    }, [state.batteryLevel, state.connected]);
     useEffect(() => {
         const manager = getBluetoothManager();
         const handleStateChange = (newState) => {
@@ -37,19 +80,19 @@ export function useMug() {
         const handleDisconnected = () => {
             setFoundMugName(null);
         };
-        manager.on('stateChange', handleStateChange);
-        manager.on('scanning', handleScanning);
-        manager.on('error', handleError);
-        manager.on('mugFound', handleMugFound);
-        manager.on('connected', handleConnected);
-        manager.on('disconnected', handleDisconnected);
+        manager.on("stateChange", handleStateChange);
+        manager.on("scanning", handleScanning);
+        manager.on("error", handleError);
+        manager.on("mugFound", handleMugFound);
+        manager.on("connected", handleConnected);
+        manager.on("disconnected", handleDisconnected);
         return () => {
-            manager.off('stateChange', handleStateChange);
-            manager.off('scanning', handleScanning);
-            manager.off('error', handleError);
-            manager.off('mugFound', handleMugFound);
-            manager.off('connected', handleConnected);
-            manager.off('disconnected', handleDisconnected);
+            manager.off("stateChange", handleStateChange);
+            manager.off("scanning", handleScanning);
+            manager.off("error", handleError);
+            manager.off("mugFound", handleMugFound);
+            manager.off("connected", handleConnected);
+            manager.off("disconnected", handleDisconnected);
         };
     }, []);
     const startScanning = useCallback(async () => {
@@ -59,7 +102,7 @@ export function useMug() {
             await manager.startScanning();
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to start scanning');
+            setError(err instanceof Error ? err.message : "Failed to start scanning");
         }
     }, []);
     const setTargetTemp = useCallback(async (temp) => {
@@ -68,7 +111,7 @@ export function useMug() {
             await manager.setTargetTemp(temp);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to set temperature');
+            setError(err instanceof Error ? err.message : "Failed to set temperature");
         }
     }, []);
     const setTemperatureUnit = useCallback(async (unit) => {
@@ -77,7 +120,7 @@ export function useMug() {
             await manager.setTemperatureUnit(unit);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to set temperature unit');
+            setError(err instanceof Error ? err.message : "Failed to set temperature unit");
         }
     }, []);
     const setLedColor = useCallback(async (color) => {
@@ -86,7 +129,7 @@ export function useMug() {
             await manager.setLedColor(color);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to set LED color');
+            setError(err instanceof Error ? err.message : "Failed to set LED color");
         }
     }, []);
     const disconnect = useCallback(async () => {
@@ -95,9 +138,11 @@ export function useMug() {
             await manager.disconnect();
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to disconnect');
+            setError(err instanceof Error ? err.message : "Failed to disconnect");
         }
     }, []);
+    const tempRate = calculateRate(tempHistory);
+    const batteryRate = calculateRate(batteryHistory, 5 * 60 * 1000);
     return {
         state,
         isScanning,
@@ -108,5 +153,7 @@ export function useMug() {
         setTemperatureUnit,
         setLedColor,
         disconnect,
+        tempRate,
+        batteryRate,
     };
 }

package/dist/lib/bluetooth.d.ts

@@ -40,4 +40,6 @@ export declare class BluetoothManager extends EventEmitter {
     private emitState;
     disconnect(): Promise<void>;
 }
+export declare function isMockMode(): boolean;
 export declare function getBluetoothManager(): BluetoothManager;
+export declare function setBluetoothManager(manager: BluetoothManager): void;

package/dist/lib/bluetooth.js

@@ -326,9 +326,17 @@ export class BluetoothManager extends EventEmitter {
 }
 // Singleton instance
 let instance = null;
+// Check if mock mode is enabled
+export function isMockMode() {
+    return process.env.EMBER_MOCK === 'true' || process.env.EMBER_MOCK === '1';
+}
 export function getBluetoothManager() {
     if (!instance) {
         instance = new BluetoothManager();
     }
     return instance;
 }
+// Set a custom manager (used for mock mode)
+export function setBluetoothManager(manager) {
+    instance = manager;
+}

package/dist/lib/mock-bluetooth.d.ts

@@ -0,0 +1,65 @@
+import { EventEmitter } from 'events';
+import { MugState, LiquidState, TemperatureUnit, RGBColor } from './types.js';
+export interface MockBluetoothManagerEvents {
+    stateChange: (state: MugState) => void;
+    connected: () => void;
+    disconnected: () => void;
+    scanning: (isScanning: boolean) => void;
+    error: (error: Error) => void;
+    mugFound: (name: string) => void;
+}
+export interface MockConfig {
+    /** Initial battery level (0-100) */
+    initialBattery?: number;
+    /** Initial current temperature in Celsius */
+    initialCurrentTemp?: number;
+    /** Initial target temperature in Celsius */
+    initialTargetTemp?: number;
+    /** Initial liquid state */
+    initialLiquidState?: LiquidState;
+    /** Whether the mug starts on the charger */
+    initiallyCharging?: boolean;
+    /** Simulated mug name */
+    mugName?: string;
+    /** Delay before "finding" the mug during scan (ms) */
+    scanDelay?: number;
+    /** Delay before "connecting" after finding (ms) */
+    connectionDelay?: number;
+    /** How fast temperature changes (degrees per second, default 0.5) */
+    tempChangeRate?: number;
+    /** How often to update simulation (ms) */
+    updateInterval?: number;
+}
+export declare class MockBluetoothManager extends EventEmitter {
+    private config;
+    private isConnected;
+    private simulationInterval;
+    private lastUpdateTime;
+    private state;
+    constructor(config?: MockConfig);
+    startScanning(): Promise<void>;
+    stopScanning(): Promise<void>;
+    private connect;
+    private startSimulation;
+    private updateSimulation;
+    setTargetTemp(temp: number): Promise<void>;
+    setTemperatureUnit(unit: TemperatureUnit): Promise<void>;
+    setLedColor(color: RGBColor): Promise<void>;
+    getState(): MugState;
+    private emitState;
+    disconnect(): Promise<void>;
+    /** Simulate placing the mug on the charger */
+    simulateStartCharging(): void;
+    /** Simulate removing the mug from the charger */
+    simulateStopCharging(): void;
+    /** Simulate the mug becoming empty */
+    simulateEmpty(): void;
+    /** Simulate filling the mug with liquid at a given temperature */
+    simulateFill(temperature: number): void;
+    /** Simulate a connection drop */
+    simulateDisconnect(): void;
+    /** Set battery level directly (for testing low battery scenarios) */
+    simulateBatteryLevel(level: number): void;
+}
+export declare function getMockBluetoothManager(config?: MockConfig): MockBluetoothManager;
+export declare function resetMockBluetoothManager(): void;