ember-mug 0.1.3 → 0.1.4

package/dist/cli.js

@@ -1,13 +1,43 @@
 #!/usr/bin/env node
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from 'ink';
-import { App } from './components/App.js';
-// Handle graceful shutdown
-process.on('SIGINT', () => {
+import { render } from "ink";
+import { App } from "./components/App.js";
+import { isMockMode, setBluetoothManager } from "./lib/bluetooth.js";
+// ANSI escape codes for alternate screen buffer
+const enterAltScreen = "\x1b[?1049h";
+const exitAltScreen = "\x1b[?1049l";
+const hideCursor = "\x1b[?25l";
+const showCursor = "\x1b[?25h";
+const clearScreen = "\x1b[2J\x1b[H";
+// Enter alternate screen buffer and hide cursor
+process.stdout.write(enterAltScreen + hideCursor + clearScreen);
+// Handle graceful shutdown - restore terminal state
+const cleanup = () => {
+    process.stdout.write(showCursor + exitAltScreen);
     process.exit(0);
+};
+process.on("SIGINT", cleanup);
+process.on("SIGTERM", cleanup);
+process.on("exit", () => {
+    process.stdout.write(showCursor + exitAltScreen);
 });
-process.on('SIGTERM', () => {
+// Handle terminal resize - clear screen to prevent artifacts
+process.stdout.on("resize", () => {
+    process.stdout.write(clearScreen);
+});
+async function main() {
+    // Initialize mock manager if in mock mode (set via EMBER_MOCK env var)
+    if (isMockMode()) {
+        const { getMockBluetoothManager } = await import("./lib/mock-bluetooth.js");
+        setBluetoothManager(getMockBluetoothManager());
+    }
+    // Render the app
+    const app = render(_jsx(App, {}));
+    await app.waitUntilExit();
     process.exit(0);
+}
+main().catch((error) => {
+    process.stdout.write(showCursor + exitAltScreen);
+    console.error("Failed to start:", error);
+    process.exit(1);
 });
-// Render the app
-render(_jsx(App, {}));

package/dist/components/App.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import React from "react";
 export declare function App(): React.ReactElement;

package/dist/components/App.js

@@ -1,24 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from 'react';
-import { Box, useApp, useInput } from 'ink';
-import { useMug } from '../hooks/useMug.js';
-import { Header } from './Header.js';
-import { TemperatureDisplay } from './TemperatureDisplay.js';
-import { BatteryDisplay } from './BatteryDisplay.js';
-import { TemperatureControl } from './TemperatureControl.js';
-import { Presets } from './Presets.js';
-import { ColorControl } from './ColorControl.js';
-import { ConnectionStatus } from './ConnectionStatus.js';
-import { SettingsView } from './SettingsView.js';
-import { HelpDisplay } from './HelpDisplay.js';
-import { TemperatureUnit } from '../lib/types.js';
-import { getPresets, getTemperatureUnit, setTemperatureUnit as saveTemperatureUnit, setLastTargetTemp, } from '../lib/settings.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { Box, useApp, useInput, useStdout } from "ink";
+import { useMug } from "../hooks/useMug.js";
+import { Header } from "./Header.js";
+import { TemperatureDisplay } from "./TemperatureDisplay.js";
+import { BatteryDisplay } from "./BatteryDisplay.js";
+import { TemperatureControl } from "./TemperatureControl.js";
+import { Presets } from "./Presets.js";
+import { ConnectionStatus } from "./ConnectionStatus.js";
+import { SettingsView } from "./SettingsView.js";
+import { HelpDisplay } from "./HelpDisplay.js";
+import { TemperatureUnit } from "../lib/types.js";
+import { getPresets, getTemperatureUnit, setTemperatureUnit as saveTemperatureUnit, setLastTargetTemp, updatePreset, } from "../lib/settings.js";
+import { getThemeForState, getTerminalTheme } from "../lib/theme.js";
 export function App() {
     const { exit } = useApp();
+    const { stdout } = useStdout();
+    const terminalWidth = stdout?.columns || 80;
+    // Responsive layout: stack vertically on narrow terminals, 2x2 grid on wide
+    const isNarrowTerminal = terminalWidth < 80;
+    // Calculate panel widths: 1/4 screen each in 2x2 grid (accounts for gaps)
+    // For a 2x2 grid with gap of 2 between panels, each panel is (width - 6) / 2
+    const panelWidth = isNarrowTerminal
+        ? terminalWidth - 4 // Full width minus margins for stacked layout
+        : Math.floor((terminalWidth - 6) / 2); // Half width minus gaps for 2x2 grid
     const { state: mugState, isScanning, error, foundMugName, startScanning, setTargetTemp, setTemperatureUnit: setMugTempUnit, setLedColor, } = useMug();
-    const [viewMode, setViewMode] = useState('main');
-    const [activeControl, setActiveControl] = useState('none');
-    const [presets] = useState(getPresets());
+    // Get theme based on mug state
+    const themeKey = getThemeForState(mugState.liquidState, mugState.connected);
+    const theme = getTerminalTheme(themeKey);
+    const [viewMode, setViewMode] = useState("main");
+    const [activeControl, setActiveControl] = useState("none");
+    const [presets, setPresets] = useState(getPresets());
     const [selectedPresetIndex, setSelectedPresetIndex] = useState(-1);
     const [localTempUnit, setLocalTempUnit] = useState(getTemperatureUnit());
     // Start scanning on mount
@@ -26,11 +38,17 @@ export function App() {
         startScanning();
     }, [startScanning]);
     // Sync temperature unit with mug when connected
+    // Priority: Local settings > Mug settings
     useEffect(() => {
-        if (mugState.connected) {
-            setLocalTempUnit(mugState.temperatureUnit);
+        if (mugState.connected && mugState.temperatureUnit !== localTempUnit) {
+            setMugTempUnit(localTempUnit);
         }
-    }, [mugState.connected, mugState.temperatureUnit]);
+    }, [
+        mugState.connected,
+        mugState.temperatureUnit,
+        localTempUnit,
+        setMugTempUnit,
+    ]);
     const handleTempChange = useCallback(async (temp) => {
         await setTargetTemp(temp);
         setLastTargetTemp(temp);
@@ -52,46 +70,45 @@ export function App() {
             await setMugTempUnit(unit);
         }
     }, [mugState.connected, setMugTempUnit]);
+    const handlePresetUpdate = useCallback((preset) => {
+        // Update local state
+        setPresets((currentPresets) => currentPresets.map((p) => (p.id === preset.id ? preset : p)));
+        // Persist to settings
+        updatePreset(preset.id, preset);
+    }, []);
     useInput((input, key) => {
         // Global controls
-        if (input === 'q' && viewMode === 'main' && activeControl === 'none') {
+        if (input === "q" && viewMode === "main" && activeControl === "none") {
             exit();
             return;
         }
         // Handle escape to go back
         if (key.escape) {
-            if (activeControl !== 'none') {
-                setActiveControl('none');
+            if (activeControl !== "none") {
+                setActiveControl("none");
             }
-            else if (viewMode !== 'main') {
-                setViewMode('main');
+            else if (viewMode !== "main") {
+                setViewMode("main");
             }
             return;
         }
         // Only handle these if we're in main view with no active control
-        if (viewMode === 'main' && activeControl === 'none') {
-            if (input === 's' && !mugState.connected) {
+        if (viewMode === "main" && activeControl === "none") {
+            if (input === "s" && !mugState.connected) {
                 startScanning();
                 return;
             }
-            if (input === 'r' && !mugState.connected && error) {
+            if (input === "r" && !mugState.connected && error) {
                 startScanning();
                 return;
             }
             if (mugState.connected) {
-                if (input === 't') {
-                    setActiveControl('temperature');
-                    return;
-                }
-                if (input === 'c') {
-                    setActiveControl('color');
-                    return;
-                }
-                if (input === 'o') {
-                    setViewMode('settings');
+                // 'c' hotkey removed
+                if (input === "o") {
+                    setViewMode("settings");
                     return;
                 }
-                if (input === 'u') {
+                if (input === "u") {
                     const newUnit = localTempUnit === TemperatureUnit.Celsius
                         ? TemperatureUnit.Fahrenheit
                         : TemperatureUnit.Celsius;
@@ -100,21 +117,15 @@ export function App() {
                 }
             }
         }
-        // Exit temperature control mode
-        if (activeControl === 'temperature' && (key.return || input === 't')) {
-            setActiveControl('none');
-            return;
-        }
-        // Exit color control mode
-        if (activeControl === 'color' && input === 'c') {
-            setActiveControl('none');
-            return;
-        }
     });
     // Settings view
-    if (viewMode === 'settings') {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { mugName: mugState.mugName, connected: mugState.connected }), _jsx(SettingsView, { presets: presets, temperatureUnit: localTempUnit, onTemperatureUnitChange: handleTemperatureUnitChange, onClose: () => setViewMode('main'), isActive: true })] }));
+    if (viewMode === "settings") {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { mugName: mugState.mugName, connected: mugState.connected, theme: theme, ledColor: mugState.color }), _jsx(SettingsView, { presets: presets, temperatureUnit: localTempUnit, ledColor: mugState.color, onTemperatureUnitChange: handleTemperatureUnitChange, onPresetUpdate: handlePresetUpdate, onColorChange: handleColorChange, onClose: () => setViewMode("main"), isActive: true, theme: theme })] }));
     }
     // Main view
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { mugName: mugState.mugName, connected: mugState.connected }), !mugState.connected ? (_jsx(ConnectionStatus, { isScanning: isScanning, isConnected: mugState.connected, foundMugName: foundMugName, error: error, onRetry: startScanning })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(TemperatureDisplay, { currentTemp: mugState.currentTemp, targetTemp: mugState.targetTemp, liquidState: mugState.liquidState, temperatureUnit: localTempUnit }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(BatteryDisplay, { batteryLevel: mugState.batteryLevel, isCharging: mugState.isCharging, liquidState: mugState.liquidState }) })] }), _jsx(TemperatureControl, { targetTemp: mugState.targetTemp, temperatureUnit: localTempUnit, onTempChange: handleTempChange, isActive: activeControl === 'temperature' }), _jsx(Presets, { presets: presets, selectedIndex: selectedPresetIndex, temperatureUnit: localTempUnit, onSelect: handlePresetSelect, isActive: activeControl === 'none' }), activeControl === 'color' && (_jsx(ColorControl, { color: mugState.color, onColorChange: handleColorChange, isActive: true }))] })), _jsx(HelpDisplay, { isConnected: mugState.connected })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { mugName: mugState.mugName, connected: mugState.connected, theme: theme, ledColor: mugState.color }), !mugState.connected ? (_jsx(ConnectionStatus, { isScanning: isScanning, isConnected: mugState.connected, foundMugName: foundMugName, error: error, onRetry: startScanning, width: panelWidth, theme: theme })) : (_jsx(Box, { flexDirection: "column", children: isNarrowTerminal ? (
+                /* Narrow terminal: stack all panels vertically */
+                _jsxs(_Fragment, { children: [_jsx(TemperatureDisplay, { currentTemp: mugState.currentTemp, targetTemp: mugState.targetTemp, liquidState: mugState.liquidState, temperatureUnit: localTempUnit, width: panelWidth, theme: theme }), _jsx(Box, { marginTop: 1, children: _jsx(BatteryDisplay, { batteryLevel: mugState.batteryLevel, isCharging: mugState.isCharging, liquidState: mugState.liquidState, width: panelWidth, theme: theme }) }), _jsx(Box, { marginTop: 1, children: _jsx(TemperatureControl, { targetTemp: mugState.targetTemp, temperatureUnit: localTempUnit, onTempChange: handleTempChange, isActive: true, width: panelWidth, theme: theme }) }), _jsx(Box, { marginTop: 1, children: _jsx(Presets, { presets: presets, selectedIndex: selectedPresetIndex, temperatureUnit: localTempUnit, onSelect: handlePresetSelect, isActive: activeControl === "none", width: panelWidth, theme: theme }) })] })) : (
+                /* Wide terminal: 2x2 grid layout */
+                _jsxs(_Fragment, { children: [_jsxs(Box, { justifyContent: "center", gap: 2, children: [_jsx(TemperatureDisplay, { currentTemp: mugState.currentTemp, targetTemp: mugState.targetTemp, liquidState: mugState.liquidState, temperatureUnit: localTempUnit, width: panelWidth, height: 8, theme: theme }), _jsx(BatteryDisplay, { batteryLevel: mugState.batteryLevel, isCharging: mugState.isCharging, liquidState: mugState.liquidState, width: panelWidth, height: 8, theme: theme })] }), _jsxs(Box, { justifyContent: "center", gap: 2, marginTop: 1, children: [_jsx(TemperatureControl, { targetTemp: mugState.targetTemp, temperatureUnit: localTempUnit, onTempChange: handleTempChange, isActive: true, width: panelWidth, height: 9, theme: theme }), _jsx(Presets, { presets: presets, selectedIndex: selectedPresetIndex, temperatureUnit: localTempUnit, onSelect: handlePresetSelect, isActive: activeControl === "none", width: panelWidth, height: 9, theme: theme })] })] })) })), _jsx(HelpDisplay, { isConnected: mugState.connected, theme: theme })] }));
 }

package/dist/components/BatteryDisplay.d.ts

@@ -1,9 +1,14 @@
-import React from 'react';
-import { LiquidState } from '../lib/types.js';
+import React from "react";
+import { LiquidState } from "../lib/types.js";
+import { TERMINAL_COLORS } from "../lib/theme.js";
+type TerminalTheme = (typeof TERMINAL_COLORS)[keyof typeof TERMINAL_COLORS];
 interface BatteryDisplayProps {
     batteryLevel: number;
     isCharging: boolean;
     liquidState: LiquidState;
+    width?: number;
+    height?: number;
+    theme: TerminalTheme;
 }
-export declare function BatteryDisplay({ batteryLevel, isCharging, liquidState, }: BatteryDisplayProps): React.ReactElement;
+export declare function BatteryDisplay({ batteryLevel, isCharging, liquidState, width, height, theme, }: BatteryDisplayProps): React.ReactElement;
 export {};

package/dist/components/BatteryDisplay.js

@@ -1,25 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import { formatBatteryLevel, getBatteryIcon, estimateBatteryLife, formatDuration, } from '../lib/utils.js';
-export function BatteryDisplay({ batteryLevel, isCharging, liquidState, }) {
-    const batteryColor = getBatteryColor(batteryLevel, isCharging);
-    const batteryIcon = getBatteryIcon(batteryLevel, isCharging);
+import { Box, Text } from "ink";
+import { formatBatteryLevel, estimateBatteryLife, formatDuration, } from "../lib/utils.js";
+import { Panel } from "./Panel.js";
+export function BatteryDisplay({ batteryLevel, isCharging, liquidState, width, height, theme, }) {
     const batteryTimeEstimate = estimateBatteryLife(batteryLevel, isCharging, liquidState);
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Box, { justifyContent: "center", children: _jsx(Text, { bold: true, children: "Battery" }) }), _jsx(Box, { justifyContent: "center", marginY: 1, children: _jsxs(Text, { color: batteryColor, children: [batteryIcon, " ", formatBatteryLevel(batteryLevel), isCharging && _jsx(Text, { color: "yellow", children: " (Charging)" })] }) }), batteryTimeEstimate !== null && (_jsx(Box, { justifyContent: "center", children: _jsx(Text, { dimColor: true, children: isCharging ? (_jsxs(_Fragment, { children: ['Time to full: ', _jsx(Text, { color: "green", children: formatDuration(batteryTimeEstimate) })] })) : (_jsxs(_Fragment, { children: ['Est. battery life: ', _jsx(Text, { color: batteryLevel < 20 ? 'red' : 'yellow', children: formatDuration(batteryTimeEstimate) })] })) }) })), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(BatteryBar, { level: batteryLevel, isCharging: isCharging }) })] }));
+    return (_jsxs(Panel, { title: "Battery", titleColor: theme.primary, borderColor: theme.border, width: width, height: height, children: [_jsxs(Box, { justifyContent: "center", marginY: 1, children: [_jsx(Text, { color: theme.primary, bold: true, children: formatBatteryLevel(batteryLevel) }), isCharging && (_jsxs(Text, { color: theme.primary, bold: true, children: [" ", "~"] }))] }), _jsx(Box, { justifyContent: "center", children: _jsx(BatteryBar, { level: batteryLevel, isCharging: isCharging, theme: theme }) }), batteryTimeEstimate !== null && (_jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: theme.dimText, children: isCharging ? (_jsxs(_Fragment, { children: ["[~] ", _jsx(Text, { color: theme.primary, children: formatDuration(batteryTimeEstimate) }), _jsx(Text, { color: theme.dimText, children: " to full" })] })) : (_jsxs(_Fragment, { children: ["[~] ", _jsx(Text, { color: theme.primary, children: formatDuration(batteryTimeEstimate) }), _jsx(Text, { color: theme.dimText, children: " remaining" })] })) }) }))] }));
 }
-function BatteryBar({ level, isCharging }) {
+function BatteryBar({ level, isCharging, theme, }) {
     const totalSegments = 20;
     const filledSegments = Math.round((level / 100) * totalSegments);
     const emptySegments = totalSegments - filledSegments;
-    const color = getBatteryColor(level, isCharging);
-    return (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "[" }), _jsx(Text, { color: color, children: '█'.repeat(filledSegments) }), _jsx(Text, { dimColor: true, children: '░'.repeat(emptySegments) }), _jsx(Text, { dimColor: true, children: "]" }), isCharging && _jsx(Text, { color: "yellow", children: " \u26A1" })] }));
-}
-function getBatteryColor(level, isCharging) {
-    if (isCharging)
-        return 'yellow';
-    if (level >= 50)
-        return 'green';
-    if (level >= 25)
-        return 'yellow';
-    return 'red';
+    return (_jsxs(Text, { children: [_jsx(Text, { color: theme.dimText, children: "\u2590" }), _jsx(Text, { color: theme.primary, children: "█".repeat(filledSegments) }), _jsx(Text, { color: theme.dimText, children: "░".repeat(emptySegments) }), _jsx(Text, { color: theme.dimText, children: "\u258C" })] }));
 }

package/dist/components/ConnectionStatus.d.ts

@@ -1,10 +1,15 @@
-import React from 'react';
+import React from "react";
+import { TERMINAL_COLORS } from "../lib/theme.js";
+type TerminalTheme = (typeof TERMINAL_COLORS)[keyof typeof TERMINAL_COLORS];
 interface ConnectionStatusProps {
     isScanning: boolean;
     isConnected: boolean;
     foundMugName: string | null;
     error: string | null;
     onRetry: () => void;
+    width?: number;
+    height?: number;
+    theme: TerminalTheme;
 }
-export declare function ConnectionStatus({ isScanning, isConnected, foundMugName, error, }: ConnectionStatusProps): React.ReactElement;
+export declare function ConnectionStatus({ isScanning, isConnected, foundMugName, error, width, height, theme, }: ConnectionStatusProps): React.ReactElement;
 export {};

package/dist/components/ConnectionStatus.js

@@ -1,9 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import Spinner from 'ink-spinner';
-export function ConnectionStatus({ isScanning, isConnected, foundMugName, error, }) {
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import { Panel } from "./Panel.js";
+export function ConnectionStatus({ isScanning, isConnected, foundMugName, error, width, height = 10, theme, }) {
     if (isConnected) {
         return _jsx(_Fragment, {});
     }
-    return (_jsx(Box, { flexDirection: "column", alignItems: "center", marginY: 2, children: error ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsxs(Text, { color: "red", children: ["Error: ", error] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Press ", _jsx(Text, { color: "cyan", children: "r" }), " to retry scanning"] }) })] })) : isScanning ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Scanning for Ember mug..." })] }), foundMugName && (_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: "green", children: ["Found: ", foundMugName] }), _jsx(Text, { children: " - Connecting..." })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Make sure your Ember mug is powered on and in range" }) })] })) : (_jsxs(Box, { flexDirection: "column", alignItems: "center", children: [_jsx(Text, { children: "No Ember mug connected" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Press ", _jsx(Text, { color: "cyan", children: "s" }), " to start scanning"] }) })] })) }));
+    return (_jsx(Box, { justifyContent: "center", marginY: 2, children: _jsx(Panel, { title: error ? "[!] Error" : isScanning ? "[~] Scanning" : "C[_] Welcome", titleColor: error ? "red" : theme.primary, borderColor: error ? "red" : theme.border, width: width, height: height, children: error ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginY: 1, children: [_jsx(Text, { color: "red", bold: true, children: error }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.dimText, children: ["Press", " ", _jsx(Text, { color: "yellow", bold: true, children: "[r]" }), " ", "to retry scanning"] }) })] })) : isScanning ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginY: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.primary, children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: theme.text, children: " Searching for Ember mug..." })] }), foundMugName && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "green", bold: true, children: ["* Found: ", foundMugName] }) })), foundMugName && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.primary, children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { color: theme.text, children: " Connecting..." })] })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.dimText, children: "Ensure mug is powered on and nearby" }) })] })) : (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginY: 1, children: [_jsx(Text, { color: theme.text, children: "No Ember mug connected" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.dimText, children: ["Press", " ", _jsx(Text, { color: "green", bold: true, children: "[s]" }), " ", "to start scanning"] }) })] })) }) }));
 }

package/dist/components/Header.d.ts

@@ -1,7 +1,12 @@
-import React from 'react';
+import React from "react";
+import { TERMINAL_COLORS } from "../lib/theme.js";
+import { RGBColor } from "../lib/types.js";
+type TerminalTheme = (typeof TERMINAL_COLORS)[keyof typeof TERMINAL_COLORS];
 interface HeaderProps {
     mugName: string;
     connected: boolean;
+    theme: TerminalTheme;
+    ledColor?: RGBColor;
 }
-export declare function Header({ mugName, connected }: HeaderProps): React.ReactElement;
+export declare function Header({ mugName, connected, theme, ledColor, }: HeaderProps): React.ReactElement;
 export {};

package/dist/components/Header.js

@@ -1,5 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-export function Header({ mugName, connected }) {
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: '☕ Ember Mug CLI ' }), connected ? (_jsxs(Text, { color: "green", children: ["[Connected: ", mugName, "]"] })) : (_jsx(Text, { color: "yellow", children: "[Disconnected]" }))] }), _jsx(Text, { dimColor: true, children: '─'.repeat(50) })] }));
+import { Box, Text, useStdout } from "ink";
+import { isMockMode } from "../lib/bluetooth.js";
+import { rgbToHex } from "../lib/utils.js";
+export function Header({ mugName, connected, theme, ledColor, }) {
+    const mockMode = isMockMode();
+    const { stdout } = useStdout();
+    const width = stdout?.columns || 80;
+    const statusText = connected ? mugName : "Disconnected";
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: theme.border, children: "═".repeat(width) }), _jsxs(Box, { justifyContent: "space-between", paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.primary, bold: true, children: "C[_] EMBER MUG" }), mockMode && _jsx(Text, { color: "gray", children: " [MOCK]" })] }), _jsxs(Box, { children: [_jsxs(Text, { color: ledColor
+                                    ? rgbToHex(ledColor.r, ledColor.g, ledColor.b)
+                                    : theme.primary, children: ["\u25CF", " "] }), _jsx(Text, { color: theme.text, children: statusText })] })] }), _jsx(Text, { color: theme.border, children: "═".repeat(width) })] }));
 }

package/dist/components/HelpDisplay.d.ts

@@ -1,6 +1,9 @@
-import React from 'react';
+import React from "react";
+import { TERMINAL_COLORS } from "../lib/theme.js";
+type TerminalTheme = (typeof TERMINAL_COLORS)[keyof typeof TERMINAL_COLORS];
 interface HelpDisplayProps {
     isConnected: boolean;
+    theme: TerminalTheme;
 }
-export declare function HelpDisplay({ isConnected }: HelpDisplayProps): React.ReactElement;
+export declare function HelpDisplay({ isConnected, theme, }: HelpDisplayProps): React.ReactElement;
 export {};

package/dist/components/HelpDisplay.js

@@ -1,5 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-export function HelpDisplay({ isConnected }) {
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: '─'.repeat(50) }), _jsx(Box, { marginY: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, children: isConnected ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "cyan", children: "t" }), ":temp", ' ', _jsx(Text, { color: "cyan", children: "1-3" }), ":presets", ' ', _jsx(Text, { color: "cyan", children: "c" }), ":color", ' ', _jsx(Text, { color: "cyan", children: "u" }), ":unit", ' ', _jsx(Text, { color: "cyan", children: "o" }), ":settings", ' ', _jsx(Text, { color: "cyan", children: "q" }), ":quit"] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: "cyan", children: "s" }), ":scan", ' ', _jsx(Text, { color: "cyan", children: "r" }), ":retry", ' ', _jsx(Text, { color: "cyan", children: "q" }), ":quit"] })) }) })] }));
+import { Box, Text, useStdout } from "ink";
+export function HelpDisplay({ isConnected, theme, }) {
+    const { stdout } = useStdout();
+    const width = stdout?.columns || 80;
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: theme.border, children: "─".repeat(width) }), _jsx(Box, { paddingY: 1, justifyContent: "center", gap: 2, children: isConnected ? (_jsxs(_Fragment, { children: [_jsx(HelpKey, { keyChar: "t", label: "temp", color: theme.primary }), _jsx(HelpKey, { keyChar: "1-3", label: "presets", color: theme.primary }), _jsx(HelpKey, { keyChar: "u", label: "unit", color: theme.primary }), _jsx(HelpKey, { keyChar: "o", label: "settings", color: theme.primary }), _jsx(HelpKey, { keyChar: "q", label: "quit", color: theme.primary })] })) : (_jsxs(_Fragment, { children: [_jsx(HelpKey, { keyChar: "s", label: "scan", color: theme.primary }), _jsx(HelpKey, { keyChar: "r", label: "retry", color: theme.primary }), _jsx(HelpKey, { keyChar: "q", label: "quit", color: theme.primary })] })) })] }));
+}
+function HelpKey({ keyChar, label, color }) {
+    return (_jsxs(Text, { children: [_jsxs(Text, { color: color, bold: true, children: ["[", keyChar, "]"] }), _jsxs(Text, { dimColor: true, children: [" ", label] })] }));
 }

package/dist/components/HorizontalRule.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function HorizontalRule(): React.ReactElement;

package/dist/components/HorizontalRule.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, useStdout } from 'ink';
+export function HorizontalRule() {
+    const { stdout } = useStdout();
+    const width = stdout?.columns || 80;
+    return _jsx(Text, { dimColor: true, children: '─'.repeat(width) });
+}

package/dist/components/Panel.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface PanelProps {
+    title?: string;
+    titleColor?: string;
+    borderColor?: string;
+    children: React.ReactNode;
+    width?: number | string;
+    minWidth?: number;
+    padding?: number;
+    centerContent?: boolean;
+    height?: number;
+}
+export declare function Panel({ title, titleColor, borderColor, children, width, minWidth, padding, centerContent, height, }: PanelProps): React.ReactElement;
+export declare function useTerminalSize(): {
+    width: number;
+    height: number;
+};
+export {};

package/dist/components/Panel.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text, useStdout } from "ink";
+export function Panel({ title, titleColor = "cyan", borderColor = "gray", children, width, minWidth = 20, padding = 1, centerContent = true, height, }) {
+    const { stdout } = useStdout();
+    const terminalWidth = stdout?.columns || 80;
+    // Calculate actual width
+    let actualWidth;
+    if (typeof width === "number") {
+        actualWidth = width;
+    }
+    else if (width === "100%") {
+        actualWidth = terminalWidth;
+    }
+    else if (typeof width === "string" && width.endsWith("%")) {
+        const percent = parseInt(width, 10) / 100;
+        actualWidth = Math.floor(terminalWidth * percent);
+    }
+    else {
+        // Default to ~48% of terminal width (to fit 2 panels side by side with gap)
+        actualWidth = Math.floor((terminalWidth - 4) / 2);
+    }
+    // Ensure minimum width
+    actualWidth = Math.max(actualWidth, minWidth);
+    const innerWidth = actualWidth - 2; // Account for borders
+    const titleText = title ? ` ${title} ` : "";
+    const titleLen = title ? titleText.length : 0;
+    // Ensure title fits
+    const safeTitleLen = Math.min(titleLen, innerWidth - 4);
+    const safeTitle = titleLen > innerWidth - 4
+        ? titleText.substring(0, innerWidth - 4)
+        : titleText;
+    // Top border with title
+    const topLeftPadding = Math.max(0, Math.floor((innerWidth - safeTitleLen) / 2));
+    const topRightPadding = Math.max(0, innerWidth - safeTitleLen - topLeftPadding);
+    const bottomBorder = `+${"-".repeat(innerWidth)}+`;
+    // Calculate content height (total height minus top and bottom borders)
+    const contentHeight = height ? height - 2 : undefined;
+    // Build left border column - one | for each content row
+    const renderSideBorders = (content) => {
+        if (!contentHeight) {
+            // Dynamic height fallback
+            return (_jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsx(Text, { color: borderColor, children: "|" }), _jsx(Box, { flexDirection: "column", width: innerWidth, paddingX: padding, justifyContent: centerContent ? "center" : "flex-start", alignItems: centerContent ? "center" : "flex-start", flexGrow: 1, children: content }), _jsx(Text, { color: borderColor, children: "|" })] }));
+        }
+        // Fixed height: render border characters for each line
+        const borderLines = "|\n".repeat(contentHeight).trim();
+        return (_jsxs(Box, { flexDirection: "row", height: contentHeight, children: [_jsx(Text, { color: borderColor, children: borderLines }), _jsx(Box, { flexDirection: "column", width: innerWidth, paddingX: padding, justifyContent: centerContent ? "center" : "flex-start", alignItems: centerContent ? "center" : "flex-start", children: content }), _jsx(Text, { color: borderColor, children: borderLines })] }));
+    };
+    return (_jsxs(Box, { flexDirection: "column", width: actualWidth, height: height, children: [_jsx(Text, { color: borderColor, children: title ? (_jsxs(_Fragment, { children: ["+", "-".repeat(topLeftPadding), _jsx(Text, { color: titleColor, bold: true, children: safeTitle }), "-".repeat(topRightPadding), "+"] })) : (`+${"-".repeat(innerWidth)}+`) }), renderSideBorders(children), _jsx(Text, { color: borderColor, children: bottomBorder })] }));
+}
+// Hook to get terminal dimensions for responsive layouts
+export function useTerminalSize() {
+    const { stdout } = useStdout();
+    return {
+        width: stdout?.columns || 80,
+        height: stdout?.rows || 24,
+    };
+}

package/dist/components/Presets.d.ts

@@ -1,11 +1,16 @@
-import React from 'react';
-import { Preset, TemperatureUnit } from '../lib/types.js';
+import React from "react";
+import { Preset, TemperatureUnit } from "../lib/types.js";
+import { TERMINAL_COLORS } from "../lib/theme.js";
+type TerminalTheme = (typeof TERMINAL_COLORS)[keyof typeof TERMINAL_COLORS];
 interface PresetsProps {
     presets: Preset[];
     selectedIndex: number;
     temperatureUnit: TemperatureUnit;
     onSelect: (preset: Preset) => void;
     isActive: boolean;
+    width?: number;
+    height?: number;
+    theme: TerminalTheme;
 }
-export declare function Presets({ presets, selectedIndex, temperatureUnit, onSelect, isActive, }: PresetsProps): React.ReactElement;
+export declare function Presets({ presets, selectedIndex, temperatureUnit, onSelect, isActive, width, height, theme, }: PresetsProps): React.ReactElement;
 export {};

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 {};