@peers-app/peers-ui 0.28.4 → 0.28.6

package/dist/components/group-switcher.js

@@ -94,14 +94,16 @@ function GroupSwitcher({ colorMode, isMobile = false }) {
                             borderRadius: "6px",
                             border: "none",
                             background: "transparent",
-                            color: isDark ? "#adb5bd" : "#6c757d",
+                            color: isDark ? "#adb5bd" : "var(--peers-tab-strip-color)",
                             minWidth: isMobile ? "36px" : undefined,
                         }, onMouseEnter: (e) => {
-                            e.currentTarget.style.backgroundColor = isDark ? "#495057" : "#f8f9fa";
-                            e.currentTarget.style.color = isDark ? "#ffffff" : "#0d6efd";
+                            e.currentTarget.style.backgroundColor = isDark
+                                ? "#495057"
+                                : "var(--peers-tab-hover-bg)";
+                            e.currentTarget.style.color = isDark ? "#ffffff" : "var(--bs-link-color)";
                         }, onMouseLeave: (e) => {
                             e.currentTarget.style.backgroundColor = "transparent";
-                            e.currentTarget.style.color = isDark ? "#adb5bd" : "#6c757d";
+                            e.currentTarget.style.color = isDark ? "#adb5bd" : "var(--peers-tab-strip-color)";
                         }, children: [(0, jsx_runtime_1.jsx)("i", { className: `${getGroupIcon(currentGroup)} ${isMobile ? "" : "me-1"}`, style: { fontSize: "14px" } }), !isMobile && ((0, jsx_runtime_1.jsx)("span", { className: "text-truncate", style: { maxWidth: "80px" }, children: getGroupName(currentGroup) })), (0, jsx_runtime_1.jsx)("i", { className: "bi-chevron-down ms-1", style: { fontSize: "10px" } })] }), showDropdown && ((0, jsx_runtime_1.jsxs)("div", { className: `dropdown-menu show position-absolute ${isDark ? "dropdown-menu-dark" : ""}`, style: {
                             left: 0,
                             top: "100%",
@@ -222,15 +224,15 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated, })
             if (e.target === e.currentTarget) {
                 onClose();
             }
-        }, children: (0, jsx_runtime_1.jsxs)("div", { className: `${isDark ? "bg-dark text-light" : "bg-white text-dark"}`, style: {
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: `${isDark ? "bg-dark text-light" : "peers-surface text-body"}`, style: {
                 width: "90%",
                 maxWidth: "500px",
                 borderRadius: "12px",
                 boxShadow: isDark ? "0 20px 40px rgba(0, 0, 0, 0.5)" : "0 20px 40px rgba(0, 0, 0, 0.1)",
-                border: isDark ? "1px solid #495057" : "1px solid #dee2e6",
+                border: isDark ? "1px solid #495057" : "1px solid var(--peers-surface-border)",
                 overflow: "hidden",
             }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-3 border-bottom d-flex align-items-center justify-content-between", style: {
-                        borderBottomColor: isDark ? "#495057" : "#dee2e6",
+                        borderBottomColor: isDark ? "#495057" : "var(--peers-surface-border)",
                     }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-people-fill me-2", style: { fontSize: "20px" } }), (0, jsx_runtime_1.jsx)("h6", { className: "mb-0", children: "Create New Group" })] }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm p-0", style: {
                                 border: "none",
                                 background: "none",
@@ -246,18 +248,18 @@ function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated, })
                                         setError(null);
                                     }, onKeyDown: handleKeyDown, disabled: isCreating, maxLength: 100, style: {
                                         fontSize: "14px",
-                                        backgroundColor: isDark ? "#343a40" : "#ffffff",
+                                        backgroundColor: isDark ? "#343a40" : "var(--peers-surface-bg)",
                                     } }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted", style: { fontSize: "11px" }, children: [groupName.length, "/100 characters"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small mb-1", children: "Icon" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-group", children: [(0, jsx_runtime_1.jsx)("span", { className: `input-group-text ${isDark ? "bg-dark text-light border-secondary" : ""}`, style: { backgroundColor: isDark ? "#343a40" : undefined }, children: (0, jsx_runtime_1.jsx)("i", { className: iconClassName || "bi-people-fill" }) }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, placeholder: "bi-people-fill", value: iconClassName, onChange: (e) => setIconClassName(e.target.value), onKeyDown: handleKeyDown, disabled: isCreating, style: {
                                                 fontSize: "14px",
-                                                backgroundColor: isDark ? "#343a40" : "#ffffff",
+                                                backgroundColor: isDark ? "#343a40" : "var(--peers-surface-bg)",
                                             } })] }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", style: { fontSize: "11px" }, children: "Bootstrap icon class name (e.g., bi-star-fill, bi-house-fill)" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small mb-1", children: "Description (optional)" }), (0, jsx_runtime_1.jsx)("textarea", { className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, placeholder: "Enter group description", value: description, onChange: (e) => setDescription(e.target.value), disabled: isCreating, rows: 3, maxLength: 500, style: {
                                         fontSize: "14px",
-                                        backgroundColor: isDark ? "#343a40" : "#ffffff",
+                                        backgroundColor: isDark ? "#343a40" : "var(--peers-surface-bg)",
                                         resize: "none",
                                     } }), (0, jsx_runtime_1.jsxs)("small", { className: "text-muted", style: { fontSize: "11px" }, children: [description.length, "/500 characters"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 border-top d-flex justify-content-end gap-2", style: {
-                        borderTopColor: isDark ? "#495057" : "#dee2e6",
+                        borderTopColor: isDark ? "#495057" : "var(--peers-surface-border)",
                     }, children: [(0, jsx_runtime_1.jsx)("button", { className: `btn btn-sm ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`, onClick: onClose, disabled: isCreating, style: { minWidth: "80px" }, children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-primary", onClick: handleCreate, disabled: isCreating || !groupName.trim(), style: { minWidth: "80px" }, children: isCreating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }), "Creating..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-plus-circle me-1" }), "Create"] })) })] }), (0, jsx_runtime_1.jsxs)("div", { className: `px-3 py-2 small text-muted border-top`, style: {
-                        borderTopColor: isDark ? "#495057" : "#dee2e6",
+                        borderTopColor: isDark ? "#495057" : "var(--peers-surface-border)",
                         fontSize: "11px",
                     }, children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "\u21B5" }), " to create \u2022 ", (0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "esc" }), " to cancel"] })] }) }));
 }

package/dist/components/router.js

@@ -51,7 +51,6 @@ const settings_page_1 = require("../screens/settings/settings-page");
 // import { TaskList } from "../screens/tasks/task-list";
 const tool_details_1 = require("../screens/tools/tool-details");
 const tool_list_1 = require("../screens/tools/tool-list");
-const tool_test_details_1 = require("../screens/tools/tool-test-details");
 const variable_details_1 = require("../screens/variables/variable-details");
 const variable_list_1 = require("../screens/variables/variable-list");
 const workflow_details_1 = require("../screens/workflows/workflow-details");
@@ -129,16 +128,10 @@ function Router({ path: providedPath } = {}) {
             const workflowId = parts[0];
             return (0, jsx_runtime_1.jsx)(workflow_details_1.WorkflowDetails, { workflowId: workflowId });
         }
-        if (path === "tools") {
+        // Saved tabs from the removed tool-test screens fall back to the catalog.
+        if (path === "tools" || /^tools\/tests(?:\/|$)/.test(path)) {
             return (0, jsx_runtime_1.jsx)(tool_list_1.ToolList, {});
         }
-        if (path.match(/^tools\/tests\//)) {
-            const parts = path.split("/");
-            parts.shift();
-            parts.shift();
-            const toolTestId = parts[0];
-            return (0, jsx_runtime_1.jsx)(tool_test_details_1.ToolTestDetails, { toolTestId: toolTestId });
-        }
         if (path.match(/^tools\//)) {
             const parts = path.split("/");
             parts.shift();

package/dist/components/tooltip.d.ts

@@ -7,5 +7,6 @@ interface IProps {
     positions?: ("right" | "bottom" | "left" | "top")[];
     genericContent?: React.ReactNode;
 }
+/** Click-triggered popover containing Markdown or custom content. */
 export declare const Tooltip: (props: IProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/tooltip.js

@@ -5,11 +5,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_tiny_popover_1 = require("react-tiny-popover");
 const hooks_1 = require("../hooks");
 const markdown_with_mentions_1 = require("./markdown-with-mentions");
+/** Click-triggered popover containing Markdown or custom content. */
 const Tooltip = (props) => {
     const { handle } = props;
     let [markdownContent] = (0, hooks_1.useObservable)(props.markdownContent);
     markdownContent = markdownContent ?? "";
     const showPopover = (0, hooks_1.useObservableState)(false);
-    return ((0, jsx_runtime_1.jsx)(react_tiny_popover_1.Popover, { isOpen: showPopover(), onClickOutside: () => showPopover(false), positions: props.positions ?? ["right", "bottom", "left", "top"], content: () => ((0, jsx_runtime_1.jsx)("div", { className: "card p-2 bg-light-subtle", style: { maxWidth: 500, maxHeight: 400, overflowY: "auto", zIndex: 1000001 }, children: props.genericContent || (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: markdownContent }) })), children: (0, jsx_runtime_1.jsx)("span", { className: props.handleClassName ?? "p-2", onClick: () => showPopover(!showPopover()), children: handle ?? (0, jsx_runtime_1.jsx)("i", { className: "bi bi-info-circle", style: { cursor: "pointer" } }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_tiny_popover_1.Popover, { isOpen: showPopover(), onClickOutside: () => showPopover(false), positions: props.positions ?? ["right", "bottom", "left", "top"], content: () => ((0, jsx_runtime_1.jsx)("div", { className: "card p-2 bg-light-subtle peers-surface", style: { maxWidth: 500, maxHeight: 400, overflowY: "auto", zIndex: 1000001 }, children: props.genericContent || (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: markdownContent }) })), children: (0, jsx_runtime_1.jsx)("span", { className: props.handleClassName ?? "p-2", onClick: () => showPopover(!showPopover()), children: handle ?? (0, jsx_runtime_1.jsx)("i", { className: "bi bi-info-circle", style: { cursor: "pointer" } }) }) }));
 };
 exports.Tooltip = Tooltip;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./components/data-grid";
 export * from "./components/inverse-lazy-list";
 export type { IEditorEffects, IMarkdownEditorProps } from "./components/markdown-editor/editor";
 export { MarkdownEditor } from "./components/markdown-editor/editor";

package/dist/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateActiveTabTitle = exports.goToTabPath = exports.closeCurrentTab = exports.activeTabs = exports.activeTabId = exports.setRootLayout = exports.selectedRootLayoutId = exports.getRootLayouts = exports.getRootLayout = exports.DEFAULT_ROOT_LAYOUT_ID = exports.TabsLayoutApp = exports.RootLayoutHost = exports.LayoutPicker = exports.unregisterGlobalOverlay = exports.registerGlobalOverlay = exports.globalOverlays = exports.openLink = exports.mainContentPath = exports.isDesktop = exports.Typeahead = exports.MarkdownEditor = void 0;
+__exportStar(require("./components/data-grid"), exports);
 __exportStar(require("./components/inverse-lazy-list"), exports);
 var editor_1 = require("./components/markdown-editor/editor");
 Object.defineProperty(exports, "MarkdownEditor", { enumerable: true, get: function () { return editor_1.MarkdownEditor; } });

package/dist/operator-console/operator-console.js

@@ -12,13 +12,13 @@ const operator_console_state_1 = require("./operator-console-state");
  */
 function getConsoleTheme(isDark) {
     return {
-        bg: isDark ? "#1e1e1e" : "#ffffff",
-        headerBg: isDark ? "#252526" : "#f3f3f3",
-        border: isDark ? "#3c3c3c" : "#dee2e6",
-        text: isDark ? "#cccccc" : "#1e1e1e",
-        muted: isDark ? "#8c8c8c" : "#6c757d",
-        hover: isDark ? "#2a2d2e" : "#e8e8e8",
-        accent: "#0d6efd",
+        bg: isDark ? "#1e1e1e" : "var(--peers-surface-bg)",
+        headerBg: isDark ? "#252526" : "var(--bs-body-bg)",
+        border: isDark ? "#3c3c3c" : "var(--peers-surface-border)",
+        text: isDark ? "#cccccc" : "var(--bs-body-color)",
+        muted: isDark ? "#8c8c8c" : "var(--bs-secondary-color)",
+        hover: isDark ? "#2a2d2e" : "var(--peers-tab-hover-bg)",
+        accent: isDark ? "#0d6efd" : "var(--bs-link-color)",
     };
 }
 /**

package/dist/root-layout/layouts/full-screen-layout.js

@@ -38,11 +38,17 @@ function FullScreenLayout() {
     const isLauncher = activeTab.packageId === "launcher" || activeTab.tabId === "launcher";
     const isLight = mode === "light";
     const title = isLauncher ? "Apps" : activeTab.title;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex flex-column", style: { height: "calc(100vh - 25px)", overflow: "hidden" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: `border-bottom d-flex align-items-center px-1 ${isLight ? "bg-light" : "bg-dark"}`, style: { height: "36px", borderBottomColor: isLight ? "#dee2e6" : "#495057" }, children: [(0, jsx_runtime_1.jsx)(group_switcher_1.GroupSwitcher, { colorMode: mode, isMobile: isMobile }), (0, jsx_runtime_1.jsx)(HeaderButton, { isLight: isLight, active: isLauncher, icon: "bi-grid-3x3-gap", label: "Apps", onClick: () => (0, tabs_state_1.activeTabId)("launcher") }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center flex-grow-1 overflow-hidden px-2", children: [!isLauncher && activeTab.iconClassName && ((0, jsx_runtime_1.jsx)("i", { className: `${activeTab.iconClassName} me-2` })), (0, jsx_runtime_1.jsx)("span", { className: "text-truncate fw-medium", style: { fontSize: "13px" }, children: title })] }), (0, jsx_runtime_1.jsx)(HeaderButton, { isLight: isLight, icon: "bi-search", label: `Search and navigate (${paletteHint})`, onClick: command_palette_1.openCommandPalette, children: (0, jsx_runtime_1.jsx)("span", { className: "d-none d-md-inline ms-1", style: { fontSize: "11px" }, children: paletteHint }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1 overflow-hidden", children: (0, jsx_runtime_1.jsx)(tabs_layout_1.TabErrorBoundary, { tabTitle: activeTab.title, tabId: activeTab.tabId, children: (0, jsx_runtime_1.jsx)(tabs_layout_1.TabContent, { tab: activeTab, isMobile: isMobile, isActive: true }) }, activeTab.tabId) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex flex-column", style: { height: "calc(100vh - 25px)", overflow: "hidden" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: `border-bottom peers-tab-strip d-flex align-items-center px-1 ${isLight ? "" : "bg-dark"}`, style: { height: "36px", borderBottomColor: isLight ? "var(--peers-tab-edge)" : "#495057" }, children: [(0, jsx_runtime_1.jsx)(group_switcher_1.GroupSwitcher, { colorMode: mode, isMobile: isMobile }), (0, jsx_runtime_1.jsx)(HeaderButton, { isLight: isLight, active: isLauncher, icon: "bi-grid-3x3-gap", label: "Apps", onClick: () => (0, tabs_state_1.activeTabId)("launcher") }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center flex-grow-1 overflow-hidden px-2", children: [!isLauncher && activeTab.iconClassName && ((0, jsx_runtime_1.jsx)("i", { className: `${activeTab.iconClassName} me-2` })), (0, jsx_runtime_1.jsx)("span", { className: "text-truncate fw-medium", style: { fontSize: "13px" }, children: title })] }), (0, jsx_runtime_1.jsx)(HeaderButton, { isLight: isLight, icon: "bi-search", label: `Search and navigate (${paletteHint})`, onClick: command_palette_1.openCommandPalette, children: (0, jsx_runtime_1.jsx)("span", { className: "d-none d-md-inline ms-1", style: { fontSize: "11px" }, children: paletteHint }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1 overflow-hidden", children: (0, jsx_runtime_1.jsx)(tabs_layout_1.TabErrorBoundary, { tabTitle: activeTab.title, tabId: activeTab.tabId, children: (0, jsx_runtime_1.jsx)(tabs_layout_1.TabContent, { tab: activeTab, isMobile: isMobile, isActive: true }) }, activeTab.tabId) })] }));
 }
 /** A small, transparent header button matching the tabs layout's toolbar styling. */
 function HeaderButton({ isLight, icon, label, onClick, active, children }) {
-    const baseColor = active ? (isLight ? "#0d6efd" : "#ffffff") : isLight ? "#6c757d" : "#adb5bd";
+    const baseColor = active
+        ? isLight
+            ? "var(--bs-link-color)"
+            : "#ffffff"
+        : isLight
+            ? "var(--peers-tab-icon-color)"
+            : "#adb5bd";
     return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-sm d-flex align-items-center", onClick: onClick, title: label, "aria-label": label, style: {
             padding: "4px 8px",
             fontSize: "12px",
@@ -51,8 +57,8 @@ function HeaderButton({ isLight, icon, label, onClick, active, children }) {
             background: "transparent",
             color: baseColor,
         }, onMouseEnter: (e) => {
-            e.currentTarget.style.backgroundColor = isLight ? "#f8f9fa" : "#495057";
-            e.currentTarget.style.color = isLight ? "#0d6efd" : "#ffffff";
+            e.currentTarget.style.backgroundColor = isLight ? "var(--peers-tab-hover-bg)" : "#495057";
+            e.currentTarget.style.color = isLight ? "var(--bs-link-color)" : "#ffffff";
         }, onMouseLeave: (e) => {
             e.currentTarget.style.backgroundColor = "transparent";
             e.currentTarget.style.color = baseColor;

package/dist/screens/console-logs/console-logs-list.d.ts

@@ -1 +1,2 @@
+/** Filterable console log screen with desktop columns and mobile log cards. */
 export declare const ConsoleLogsList: () => import("react/jsx-runtime").JSX.Element;

package/dist/screens/console-logs/console-logs-list.js

@@ -59,6 +59,7 @@ const DEFAULT_COLUMNS = [
     { key: "source", label: "Source", width: 120 },
     { key: "message", label: "Message", width: 600 },
 ];
+/** Filterable console log screen with desktop columns and mobile log cards. */
 const ConsoleLogsList = () => {
     const logs = (0, hooks_1.useObservableState)([]);
     const [allLogsLoaded, setAllLogsLoaded] = (0, react_1.useState)(false);
@@ -238,7 +239,7 @@ const ConsoleLogsList = () => {
                     flex: 1,
                     display: "flex",
                     flexDirection: "column",
-                    backgroundColor: _colorMode === "dark" ? "#1a1a1a" : "#f8f9fa",
+                    backgroundColor: _colorMode === "dark" ? "#1a1a1a" : "var(--peers-surface-bg)",
                     borderRadius: "0.25rem",
                     marginBottom: "50px",
                     overflow: "hidden",
@@ -257,8 +258,8 @@ const ConsoleLogsList = () => {
                     left: 0,
                     right: 0,
                     padding: "0.5rem 1rem",
-                    backgroundColor: _colorMode === "dark" ? "#2a2a2a" : "#ffffff",
-                    borderTop: "1px solid #dee2e6",
+                    backgroundColor: _colorMode === "dark" ? "#2a2a2a" : "var(--peers-surface-bg)",
+                    borderTop: "1px solid var(--peers-surface-border, #dee2e6)",
                     zIndex: 1000,
                     display: "flex",
                     justifyContent: "space-between",

package/dist/screens/console-logs/mobile-log-card.d.ts

@@ -3,5 +3,6 @@ interface MobileLogCardProps {
     log: IConsoleLog;
     colorMode: string;
 }
+/** Compact log entry with expandable details for narrow screens. */
 export declare const MobileLogCard: ({ log, colorMode }: MobileLogCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/screens/console-logs/mobile-log-card.js

@@ -51,6 +51,7 @@ const getLevelIcon = (level) => {
             return "bi-chat-square-text";
     }
 };
+/** Compact log entry with expandable details for narrow screens. */
 const MobileLogCard = ({ log, colorMode }) => {
     const isDark = colorMode === "dark";
     // Parse context if it's a string
@@ -63,9 +64,9 @@ const MobileLogCard = ({ log, colorMode }) => {
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             padding: "10px 12px",
-            borderBottom: `1px solid ${isDark ? "#333" : "#e9ecef"}`,
-            backgroundColor: isDark ? "#1a1a1a" : "#fff",
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 mb-1", style: { flexWrap: "wrap" }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: "0.7rem", color: isDark ? "#888" : "#666" }, children: (0, moment_1.default)(log.timestamp).format("HH:mm:ss.SSS") }), (0, jsx_runtime_1.jsxs)("span", { className: "badge text-white", style: {
+            borderBottom: `1px solid ${isDark ? "#333" : "var(--peers-surface-border)"}`,
+            backgroundColor: isDark ? "#1a1a1a" : "var(--peers-surface-bg)",
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 mb-1", style: { flexWrap: "wrap" }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: "0.7rem", color: isDark ? "#888" : "var(--bs-secondary-color)" }, children: (0, moment_1.default)(log.timestamp).format("HH:mm:ss.SSS") }), (0, jsx_runtime_1.jsxs)("span", { className: "badge text-white", style: {
                             backgroundColor: getLevelColor(log.level),
                             fontSize: "0.65rem",
                             padding: "2px 6px",
@@ -73,14 +74,14 @@ const MobileLogCard = ({ log, colorMode }) => {
                             backgroundColor: getProcessColor(log.process),
                             fontSize: "0.65rem",
                             padding: "2px 6px",
-                        }, children: log.process }), log.source && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: "0.65rem", color: isDark ? "#666" : "#999" }, children: log.source }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        }, children: log.process }), log.source && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: "0.65rem", color: isDark ? "#666" : "var(--bs-secondary-color)" }, children: log.source }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
                     fontSize: "0.8rem",
                     wordBreak: "break-word",
-                    color: isDark ? "#e0e0e0" : "#333",
+                    color: isDark ? "#e0e0e0" : "var(--bs-body-color)",
                 }, children: log.message }), context && ((0, jsx_runtime_1.jsxs)("details", { className: "mt-1", children: [(0, jsx_runtime_1.jsxs)("summary", { className: "text-muted", style: { cursor: "pointer", fontSize: "0.7rem" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-code-square me-1" }), "Context"] }), (0, jsx_runtime_1.jsx)("pre", { className: "mt-1 p-2 rounded", style: {
                             fontSize: "0.65rem",
-                            backgroundColor: isDark ? "#252525" : "#f8f9fa",
-                            color: isDark ? "#aaa" : "#333",
+                            backgroundColor: isDark ? "#252525" : "var(--bs-body-bg)",
+                            color: isDark ? "#aaa" : "var(--bs-body-color)",
                             overflow: "auto",
                             maxHeight: "150px",
                         }, children: JSON.stringify(context, null, 2) })] })), log.stackTrace && ((0, jsx_runtime_1.jsxs)("details", { className: "mt-1", children: [(0, jsx_runtime_1.jsxs)("summary", { className: "text-danger", style: { cursor: "pointer", fontSize: "0.7rem" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-bug me-1" }), "Stack Trace"] }), (0, jsx_runtime_1.jsx)("pre", { className: "mt-1 p-2 rounded text-danger", style: {

package/dist/screens/console-logs/resizable-table-header.d.ts

@@ -9,5 +9,6 @@ interface ResizableTableHeaderProps {
     onColumnsChange: (columns: Column[]) => void;
     colorMode: string;
 }
+/** Log table header whose drag handles resize the displayed columns. */
 export declare const ResizableTableHeader: ({ columns, onColumnsChange, colorMode, }: ResizableTableHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/screens/console-logs/resizable-table-header.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResizableTableHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+/** Log table header whose drag handles resize the displayed columns. */
 const ResizableTableHeader = ({ columns, onColumnsChange, colorMode, }) => {
     const [resizingColumn, setResizingColumn] = (0, react_1.useState)(null);
     const startXRef = (0, react_1.useRef)(0);
@@ -34,11 +35,11 @@ const ResizableTableHeader = ({ columns, onColumnsChange, colorMode, }) => {
             };
         }
     }, [resizingColumn, columns, onColumnsChange]);
-    return ((0, jsx_runtime_1.jsx)("table", { className: "table table-sm mb-0", style: { fontSize: "0.85rem", tableLayout: "fixed", width: "100%" }, children: (0, jsx_runtime_1.jsx)("thead", { style: { backgroundColor: colorMode === "dark" ? "#2a2a2a" : "#ffffff" }, children: (0, jsx_runtime_1.jsx)("tr", { children: columns.map((column) => ((0, jsx_runtime_1.jsxs)("th", { style: {
+    return ((0, jsx_runtime_1.jsx)("table", { className: "table table-sm mb-0 peers-table-surface", style: { fontSize: "0.85rem", tableLayout: "fixed", width: "100%" }, children: (0, jsx_runtime_1.jsx)("thead", { style: { backgroundColor: colorMode === "dark" ? "#2a2a2a" : "var(--peers-surface-bg)" }, children: (0, jsx_runtime_1.jsx)("tr", { children: columns.map((column) => ((0, jsx_runtime_1.jsxs)("th", { style: {
                         width: `${column.width}px`,
                         position: "relative",
                         padding: "0.5rem",
-                        borderRight: "1px solid #dee2e6",
+                        borderRight: "1px solid var(--peers-surface-border, #dee2e6)",
                     }, children: [column.label, column.key !== "message" && ((0, jsx_runtime_1.jsx)("div", { onMouseDown: (e) => handleMouseDown(e, column.key, column.width), style: {
                                 position: "absolute",
                                 right: 0,

package/dist/screens/network-viewer/usage-graph.d.ts

@@ -34,7 +34,7 @@ interface IUsageGraphProps {
      */
     color?: string;
     /**
-     * Color for the overlay text (optional, defaults to transparent white)
+     * Color for the overlay text (optional). Defaults to the theme's `--peers-graph-overlay-color` (a faint gray in light mode), else translucent white.
      */
     overlayTextColor?: string;
     /**

package/dist/screens/network-viewer/usage-graph.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UsageGraph = UsageGraph;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-function UsageGraph({ fetchUsage, label, durationMinutes = 5, updateInterval = 5000, minHeight = 80, color = "rgba(13, 110, 253, 1)", overlayTextColor = "rgba(255, 255, 255, 0.7)", minValue = 0, maxValue = 100, formatOverlayText, colorZones, }) {
+function UsageGraph({ fetchUsage, label, durationMinutes = 5, updateInterval = 5000, minHeight = 80, color = "rgba(13, 110, 253, 1)", overlayTextColor = "var(--peers-graph-overlay-color, rgba(255, 255, 255, 0.7))", minValue = 0, maxValue = 100, formatOverlayText, colorZones, }) {
     const [dataPoints, setDataPoints] = (0, react_1.useState)([]);
     const [currentValue, setCurrentValue] = (0, react_1.useState)(0);
     const [width, setWidth] = (0, react_1.useState)(400);

package/dist/screens/search/global-search.js

@@ -133,8 +133,8 @@ function GlobalSearch() {
                                     paddingLeft: "50px",
                                     fontSize: "18px",
                                     borderRadius: "12px",
-                                    backgroundColor: isDark ? "#343a40" : "#f8f9fa",
-                                    border: isDark ? "2px solid #495057" : "2px solid #dee2e6",
+                                    backgroundColor: isDark ? "#343a40" : "var(--peers-surface-bg)",
+                                    border: isDark ? "2px solid #495057" : "2px solid var(--peers-surface-border)",
                                 } }), isSearching && ((0, jsx_runtime_1.jsx)("div", { className: "position-absolute", style: {
                                     right: "16px",
                                     top: "50%",
@@ -145,7 +145,7 @@ function GlobalSearch() {
                                 ? `Found ${totalResults} result${totalResults !== 1 ? "s" : ""}`
                                 : searchQuery.trim()
                                     ? "No results found"
-                                    : null }))] }), searchQuery && !isSearching && ((0, jsx_runtime_1.jsx)("div", { children: searchResults.length === 0 && appResults.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-5", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search mb-3 d-block text-muted", style: { fontSize: "48px" } }), (0, jsx_runtime_1.jsx)("h4", { className: "text-muted", children: "No results found" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Try different keywords or check your spelling" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [appResults.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-grid-3x3-gap me-3", style: { fontSize: "20px", color: "#6c757d" } }), (0, jsx_runtime_1.jsx)("h4", { className: "mb-0 me-3", children: "Apps" }), (0, jsx_runtime_1.jsx)("span", { className: "badge bg-secondary", children: appResults.length })] }), (0, jsx_runtime_1.jsx)("div", { className: "row g-3", children: appResults.map((app) => ((0, jsx_runtime_1.jsx)("div", { className: "col-12 col-md-6 col-lg-4", children: (0, jsx_runtime_1.jsx)("div", { className: `card h-100 ${isDark ? "bg-dark border-secondary" : "bg-light"}`, style: {
+                                    : null }))] }), searchQuery && !isSearching && ((0, jsx_runtime_1.jsx)("div", { children: searchResults.length === 0 && appResults.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-5", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search mb-3 d-block text-muted", style: { fontSize: "48px" } }), (0, jsx_runtime_1.jsx)("h4", { className: "text-muted", children: "No results found" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Try different keywords or check your spelling" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [appResults.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-grid-3x3-gap me-3", style: { fontSize: "20px", color: "#6c757d" } }), (0, jsx_runtime_1.jsx)("h4", { className: "mb-0 me-3", children: "Apps" }), (0, jsx_runtime_1.jsx)("span", { className: "badge bg-secondary", children: appResults.length })] }), (0, jsx_runtime_1.jsx)("div", { className: "row g-3", children: appResults.map((app) => ((0, jsx_runtime_1.jsx)("div", { className: "col-12 col-md-6 col-lg-4", children: (0, jsx_runtime_1.jsx)("div", { className: `card h-100 ${isDark ? "bg-dark border-secondary" : "peers-surface"}`, style: {
                                                 cursor: "pointer",
                                                 transition: "all 0.15s ease",
                                                 borderRadius: "8px",
@@ -161,7 +161,7 @@ function GlobalSearch() {
                                                                 fontSize: "16px",
                                                                 color: isDark ? "#0d6efd" : "#0d6efd",
                                                                 minWidth: "16px",
-                                                            } }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("h6", { className: "card-title mb-1 fw-medium", children: app.displayName }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted text-uppercase", style: { fontSize: "11px", letterSpacing: "0.5px" }, children: app.packageId === "system-apps" ? "System App" : app.packageName })] }), (0, jsx_runtime_1.jsx)("i", { className: "bi-arrow-right text-muted", style: { fontSize: "12px" } })] }) }) }) }, `${app.packageId}-${app.path}`))) })] })), searchResults.map((result) => ((0, jsx_runtime_1.jsxs)("div", { className: "mb-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("i", { className: `${result.config.iconClass} me-3`, style: { fontSize: "20px", color: "#6c757d" } }), (0, jsx_runtime_1.jsx)("h4", { className: "mb-0 me-3", children: result.category }), (0, jsx_runtime_1.jsx)("span", { className: "badge bg-secondary", children: result.items.length })] }), (0, jsx_runtime_1.jsx)("div", { className: "row g-3", children: result.items.map((item) => ((0, jsx_runtime_1.jsx)("div", { className: "col-12 col-md-6 col-lg-4", children: (0, jsx_runtime_1.jsx)("div", { className: `card h-100 ${isDark ? "bg-dark border-secondary" : "bg-light"}`, style: {
+                                                            } }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("h6", { className: "card-title mb-1 fw-medium", children: app.displayName }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted text-uppercase", style: { fontSize: "11px", letterSpacing: "0.5px" }, children: app.packageId === "system-apps" ? "System App" : app.packageName })] }), (0, jsx_runtime_1.jsx)("i", { className: "bi-arrow-right text-muted", style: { fontSize: "12px" } })] }) }) }) }, `${app.packageId}-${app.path}`))) })] })), searchResults.map((result) => ((0, jsx_runtime_1.jsxs)("div", { className: "mb-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("i", { className: `${result.config.iconClass} me-3`, style: { fontSize: "20px", color: "#6c757d" } }), (0, jsx_runtime_1.jsx)("h4", { className: "mb-0 me-3", children: result.category }), (0, jsx_runtime_1.jsx)("span", { className: "badge bg-secondary", children: result.items.length })] }), (0, jsx_runtime_1.jsx)("div", { className: "row g-3", children: result.items.map((item) => ((0, jsx_runtime_1.jsx)("div", { className: "col-12 col-md-6 col-lg-4", children: (0, jsx_runtime_1.jsx)("div", { className: `card h-100 ${isDark ? "bg-dark border-secondary" : "peers-surface"}`, style: {
                                                 cursor: "pointer",
                                                 transition: "all 0.15s ease",
                                                 borderRadius: "8px",
@@ -177,5 +177,5 @@ function GlobalSearch() {
                                                                 fontSize: "16px",
                                                                 color: isDark ? "#0d6efd" : "#0d6efd",
                                                                 minWidth: "16px",
-                                                            } }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("h6", { className: "card-title mb-1 fw-medium", children: item.name }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted text-uppercase", style: { fontSize: "11px", letterSpacing: "0.5px" }, children: result.category.slice(0, -1) })] }), (0, jsx_runtime_1.jsx)("i", { className: "bi-arrow-right text-muted", style: { fontSize: "12px" } })] }) }) }) }, item.id))) })] }, result.category)))] })) })), !searchQuery && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-5", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search mb-3 d-block text-muted", style: { fontSize: "64px" } }), (0, jsx_runtime_1.jsx)("h3", { className: "text-muted mb-3", children: "Search across everything" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-4", style: { maxWidth: "400px", margin: "0 auto" }, children: "Find apps, tools, assistants, workflows, types, and users all in one place." }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex flex-wrap justify-content-center gap-2", children: searchConfigs.map(({ config, category }) => ((0, jsx_runtime_1.jsxs)("span", { className: `badge ${isDark ? "bg-secondary" : "bg-light text-dark"} px-3 py-2 d-flex align-items-center`, style: { fontSize: "12px" }, children: [(0, jsx_runtime_1.jsx)("i", { className: `${config.iconClass} me-2` }), category] }, category))) })] }))] }));
+                                                            } }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("h6", { className: "card-title mb-1 fw-medium", children: item.name }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted text-uppercase", style: { fontSize: "11px", letterSpacing: "0.5px" }, children: result.category.slice(0, -1) })] }), (0, jsx_runtime_1.jsx)("i", { className: "bi-arrow-right text-muted", style: { fontSize: "12px" } })] }) }) }) }, item.id))) })] }, result.category)))] })) })), !searchQuery && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-5", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search mb-3 d-block text-muted", style: { fontSize: "64px" } }), (0, jsx_runtime_1.jsx)("h3", { className: "text-muted mb-3", children: "Search across everything" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-4", style: { maxWidth: "400px", margin: "0 auto" }, children: "Find apps, tools, assistants, workflows, types, and users all in one place." }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex flex-wrap justify-content-center gap-2", children: searchConfigs.map(({ config, category }) => ((0, jsx_runtime_1.jsxs)("span", { className: `badge ${isDark ? "bg-secondary" : "peers-surface text-body"} px-3 py-2 d-flex align-items-center`, style: { fontSize: "12px" }, children: [(0, jsx_runtime_1.jsx)("i", { className: `${config.iconClass} me-2` }), category] }, category))) })] }))] }));
 }

package/dist/screens/settings/color-mode-dropdown.d.ts

@@ -1,5 +1,10 @@
+/** Stored theme preference, optionally following the operating system. */
 export type ColorModePreference = "light" | "dark" | "auto";
+/** Resolved theme applied to the page. */
 export type ColorMode = "light" | "dark";
+/** Observable resolved theme for platform and package components. */
 export declare const colorMode: import("@peers-app/peers-sdk").PersistentVar<ColorMode>;
+/** Persistent device preference used to select the resolved theme. */
 export declare const colorModePreference: import("@peers-app/peers-sdk").PersistentVar<ColorModePreference>;
+/** Settings control for light, dark, or system-following appearance. */
 export declare const ColorModeDropdown: () => import("react/jsx-runtime").JSX.Element;

package/dist/screens/settings/color-mode-dropdown.js

@@ -4,9 +4,11 @@ exports.ColorModeDropdown = exports.colorModePreference = exports.colorMode = vo
 const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const hooks_1 = require("../../hooks");
+/** Observable resolved theme for platform and package components. */
 exports.colorMode = (0, peers_sdk_1.deviceVar)("colorMode", {
     defaultValue: "dark",
 });
+/** Persistent device preference used to select the resolved theme. */
 exports.colorModePreference = (0, peers_sdk_1.deviceVar)("colorModePreference", {
     defaultValue: "dark",
 });
@@ -28,7 +30,7 @@ function applyColorMode(modePreference) {
     document.documentElement.setAttribute("data-bs-theme", mode);
     if (mode === "light") {
         document.documentElement.style.backgroundColor = "";
-        document.body.style.backgroundColor = "initial";
+        document.body.style.backgroundColor = "";
     }
     else {
         document.documentElement.style.backgroundColor = "rgb(33, 37, 41)";
@@ -36,13 +38,17 @@ function applyColorMode(modePreference) {
     }
     const themeMeta = document.querySelector('meta[name="theme-color"]');
     if (themeMeta) {
-        themeMeta.setAttribute("content", mode === "light" ? "#ffffff" : "#212529");
+        const themeColor = mode === "light"
+            ? getComputedStyle(document.documentElement).getPropertyValue("--peers-tab-strip-bg").trim()
+            : "#212529";
+        themeMeta.setAttribute("content", themeColor);
     }
     (0, exports.colorMode)(mode);
     exports.colorMode.notifySubscribers();
     return mode;
 }
 exports.colorModePreference.subscribe((newValue) => applyColorMode(newValue));
+/** Settings control for light, dark, or system-following appearance. */
 const ColorModeDropdown = () => {
     const [modePreference] = (0, hooks_1.useObservable)(exports.colorModePreference);
     return ((0, jsx_runtime_1.jsxs)("div", { className: "dropdown", children: [(0, jsx_runtime_1.jsxs)("button", { className: "btn btn-secondary dropdown-toggle", type: "button", id: "colorModeDropdown", "data-bs-toggle": "dropdown", "aria-expanded": "false", children: ["Color Mode: ", (0, peers_sdk_1.camelCaseToSpaces)(modePreference)] }), (0, jsx_runtime_1.jsxs)("ul", { className: "dropdown-menu", "aria-labelledby": "colorModeDropdown", children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)("auto"), children: ["Auto ", modePreference === "auto" && "✓"] }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)("light"), children: ["Light ", modePreference === "light" && "✓"] }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)("dark"), children: ["Dark ", modePreference === "dark" && "✓"] }) })] })] }));

package/dist/screens/settings/settings-page.js

@@ -84,7 +84,7 @@ const AppearanceSettingsTab = () => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Appearance" }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsx)(color_mode_dropdown_1.ColorModeDropdown, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsx)(layout_picker_1.LayoutPicker, {}) })] }));
 };
 const AdvancedSettingsTab = () => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Advanced Settings" }), (0, jsx_runtime_1.jsx)(PackagesRootDirectory, {}), (0, jsx_runtime_1.jsx)(ReloadPackagesOnPageRefresh, {}), (0, jsx_runtime_1.jsx)(AutoUpdatePeersCore, {}), (0, jsx_runtime_1.jsx)(ResetDeviceSyncInfos, {}), (0, jsx_runtime_1.jsx)(DeleteLocalDatabase, {}), (0, jsx_runtime_1.jsx)(CleanupOldDataDir, {}), (0, jsx_runtime_1.jsx)(ResetChangeTracking, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Advanced Settings" }), (0, jsx_runtime_1.jsx)(PackagesRootDirectory, {}), (0, jsx_runtime_1.jsx)(ReloadPackagesOnPageRefresh, {}), (0, jsx_runtime_1.jsx)(ResetDeviceSyncInfos, {}), (0, jsx_runtime_1.jsx)(DeleteLocalDatabase, {}), (0, jsx_runtime_1.jsx)(CleanupOldDataDir, {}), (0, jsx_runtime_1.jsx)(ResetChangeTracking, {})] }));
 };
 const ProfileSection = () => {
     const me = (0, hooks_1.usePromise)(async () => {
@@ -134,13 +134,6 @@ const ReloadPackagesOnPageRefresh = () => {
                     (0, peers_sdk_1.reloadPackagesOnPageRefresh)(checked);
                 } }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `Checking this will reload all packages very time the page is loaded.  Particularly useful while developing packages.` })] }));
 };
-const AutoUpdatePeersCore = () => {
-    (0, hooks_1.useObservable)(peers_sdk_1.autoUpdatePeersCore);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "autoUpdatePeersCore", className: "form-label small mt-2 me-2", children: "Auto-update peers-core on startup:" }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: (0, peers_sdk_1.autoUpdatePeersCore)(), onChange: (e) => {
-                    const checked = e.target.checked;
-                    (0, peers_sdk_1.autoUpdatePeersCore)(checked);
-                } }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `When enabled, the peers-core system package is automatically updated from the bundled version on every app startup. Disable this if you want to manage peers-core manually.` })] }));
-};
 const ResetDeviceSyncInfos = () => {
     return ((0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: (0, jsx_runtime_1.jsx)("button", { className: "btn btn-secondary btn-sm ms-2", onClick: async () => {
                 try {

package/dist/screens/setup-user.d.ts

@@ -1 +1,2 @@
+/** Initial account setup, recovery, and pairing with an existing device. */
 export declare const SetupUser: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/screens/setup-user.js

@@ -8,6 +8,7 @@ const hooks_1 = require("../hooks");
 const device_pairing_1 = require("./device-pairing");
 const identity_ipc_1 = require("./device-pairing/identity-ipc");
 const color_mode_dropdown_1 = require("./settings/color-mode-dropdown");
+/** Initial account setup, recovery, and pairing with an existing device. */
 const SetupUser = () => {
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
     const [step, _setStep] = (0, react_1.useState)("select-user-type");
@@ -68,34 +69,34 @@ const SetupUser = () => {
         }
     };
     if (showPairing) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: "20px", backgroundColor: isDark ? "#212529" : "#f8f9fa" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card shadow", style: {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: "20px", backgroundColor: isDark ? "#212529" : "var(--bs-body-bg)" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card shadow", style: {
                     maxWidth: "560px",
                     width: "100%",
-                    backgroundColor: isDark ? "#2d3238" : "#ffffff",
+                    backgroundColor: isDark ? "#2d3238" : "var(--peers-surface-bg)",
                 }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-4 p-md-5", children: (0, jsx_runtime_1.jsx)(device_pairing_1.DestinationDevicePairing, { onBack: () => setShowPairing(false) }) }) }) }));
     }
     // Step 1: Select User Type
     if (step === "select-user-type" && isExistingUser === null) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: "20px", backgroundColor: isDark ? "#212529" : "#f8f9fa" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card shadow", style: {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: "20px", backgroundColor: isDark ? "#212529" : "var(--bs-body-bg)" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card shadow", style: {
                     maxWidth: "500px",
                     width: "100%",
-                    backgroundColor: isDark ? "#2d3238" : "#ffffff",
+                    backgroundColor: isDark ? "#2d3238" : "var(--peers-surface-bg)",
                 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-4 p-md-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: `fw-bold mb-2 ${isDark ? "text-light" : ""}`, children: "Welcome to Peers" }), (0, jsx_runtime_1.jsx)("p", { className: isDark ? "text-light opacity-75" : "text-muted", children: "Let's get you set up" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-3", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-lg btn-primary py-3", onClick: () => setIsExistingUser(false), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-plus fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "New account" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Create a new account on this device" })] })] }) }), (0, jsx_runtime_1.jsx)("button", { className: `btn btn-lg py-3 ${isDark ? "btn-outline-light" : "btn-outline-primary"}`, onClick: () => setShowPairing(true), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-phone fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "Sign in from another device" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Show a code to a device that is already signed in" })] })] }) }), (0, jsx_runtime_1.jsxs)("details", { className: "text-center mt-2", children: [(0, jsx_runtime_1.jsx)("summary", { className: `small ${isDark ? "text-light opacity-75" : "text-muted"}`, style: { cursor: "pointer" }, children: "Advanced" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: `btn btn-sm mt-2 ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`, onClick: () => setIsExistingUser(true), children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-key me-1" }), "Enter a user ID and secret key"] })] })] })] }) }) }));
     }
     // Step 2: New User Confirmation
     if (isExistingUser === false) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: "20px", backgroundColor: isDark ? "#212529" : "#f8f9fa" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card shadow", style: {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: "20px", backgroundColor: isDark ? "#212529" : "var(--bs-body-bg)" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card shadow", style: {
                     maxWidth: "500px",
                     width: "100%",
-                    backgroundColor: isDark ? "#2d3238" : "#ffffff",
+                    backgroundColor: isDark ? "#2d3238" : "var(--peers-surface-bg)",
                 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-4 p-md-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-4", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-plus-fill text-primary fs-1 mb-3 d-block" }), (0, jsx_runtime_1.jsx)("h3", { className: `fw-bold mb-2 ${isDark ? "text-light" : ""}`, children: "Create New Account" }), (0, jsx_runtime_1.jsx)("p", { className: isDark ? "text-light opacity-75" : "text-muted", children: "We'll generate secure credentials for you" })] }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-2" }), error] })), (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-2", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-lg btn-primary", onClick: handleNewUser, disabled: isValidating, children: isValidating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2" }), "Creating Account..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle me-2" }), "Create Account"] })) }), (0, jsx_runtime_1.jsxs)("button", { className: "btn btn-outline-secondary", onClick: () => setIsExistingUser(null), disabled: isValidating, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-left me-2" }), "Back"] })] })] }) }) }));
     }
     // Step 3: Existing User Sign In
     if (isExistingUser === true) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: "20px", backgroundColor: isDark ? "#212529" : "#f8f9fa" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card shadow", style: {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { paddingTop: "20px", backgroundColor: isDark ? "#212529" : "var(--bs-body-bg)" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card shadow", style: {
                     maxWidth: "500px",
                     width: "100%",
-                    backgroundColor: isDark ? "#2d3238" : "#ffffff",
+                    backgroundColor: isDark ? "#2d3238" : "var(--peers-surface-bg)",
                 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-4 p-md-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-2", children: [(0, jsx_runtime_1.jsxs)("h3", { className: `fw-bold mb-2 ${isDark ? "text-light" : ""}`, children: [(0, jsx_runtime_1.jsx)("span", { children: "Sign In" }), "\u00A0\u00A0", (0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-arrow-in-right text-primary" })] }), (0, jsx_runtime_1.jsx)("p", { className: isDark ? "text-light opacity-75" : "text-muted", children: "Paste your user ID and secret key. If you have another signed-in device, \u201CSign in from another device\u201D is easier and safer." })] }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-2" }), error] })), (0, jsx_runtime_1.jsxs)("form", { onSubmit: (e) => {
                                 e.preventDefault();
                                 handleExistingUser();