@peers-app/peers-ui 0.28.5 → 0.28.7

package/dist/command-palette/command-palette-ui.d.ts

@@ -1 +1,2 @@
+/** Searchable overlay for launching apps, running commands, and starting threads. */
 export declare function CommandPaletteOverlay(): import("react/jsx-runtime").JSX.Element | null;

package/dist/command-palette/command-palette-ui.js

@@ -12,6 +12,7 @@ const system_apps_1 = require("../system-apps");
 const tabs_state_1 = require("../tabs-layout/tabs-state");
 const routes_loader_1 = require("../ui-router/routes-loader");
 const command_palette_1 = require("./command-palette");
+/** Searchable overlay for launching apps, running commands, and starting threads. */
 function CommandPaletteOverlay() {
     const [isOpen] = (0, hooks_1.useObservable)(command_palette_1.isCommandPaletteOpen);
     const [_persistedQuery] = (0, hooks_1.useObservable)(command_palette_1.commandSearchQuery);
@@ -198,15 +199,15 @@ function CommandPaletteOverlay() {
             if (e.target === e.currentTarget) {
                 (0, command_palette_1.closeCommandPalette)();
             }
-        }, 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: "600px",
                 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.jsx)("div", { className: "p-3 border-bottom", style: {
-                        borderBottomColor: isDark ? "#495057" : "#dee2e6",
+                        borderBottomColor: isDark ? "#495057" : "var(--peers-surface-border)",
                     }, children: (0, jsx_runtime_1.jsxs)("div", { className: "position-relative", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search position-absolute", style: {
                                     left: "12px",
                                     top: "50%",
@@ -230,7 +231,7 @@ function CommandPaletteOverlay() {
                                     border: "none",
                                     outline: "none",
                                     boxShadow: "none",
-                                    backgroundColor: isDark ? "#343a40" : "#f8f9fa",
+                                    backgroundColor: isDark ? "#343a40" : "var(--peers-surface-bg)",
                                 } })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
                         maxHeight: "400px",
                         overflowY: "auto",
@@ -275,11 +276,13 @@ function CommandPaletteOverlay() {
                                                                     fontSize: "16px",
                                                                     color: isSelected ? (isDark ? "#ffffff" : "#0d6efd") : "#6c757d",
                                                                     minWidth: "16px",
-                                                                } })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-medium", children: command.label }), command.description && ((0, jsx_runtime_1.jsx)("div", { className: "small text-muted", style: { fontSize: "12px" }, children: command.description }))] })] }), command.shortcut && ((0, jsx_runtime_1.jsx)("div", { className: `small px-2 py-1 rounded ${isDark ? "bg-secondary bg-opacity-50" : "bg-light"}`, style: {
+                                                                } })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-medium", children: command.label }), command.description && ((0, jsx_runtime_1.jsx)("div", { className: "small text-muted", style: { fontSize: "12px" }, children: command.description }))] })] }), command.shortcut && ((0, jsx_runtime_1.jsx)("div", { className: `small px-2 py-1 rounded ${isDark ? "bg-secondary bg-opacity-50" : "bg-body"}`, style: {
                                                             fontSize: "11px",
                                                             fontFamily: "monospace",
                                                             color: isDark ? "#adb5bd" : "#6c757d",
-                                                            border: isDark ? "1px solid #495057" : "1px solid #dee2e6",
+                                                            border: isDark
+                                                                ? "1px solid #495057"
+                                                                : "1px solid var(--peers-surface-border)",
                                                         }, children: command.shortcut }))] }, command.id));
                                         })] }, category))), searchQuery.trim() && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "px-3 py-1 small text-muted fw-bold text-uppercase", style: { fontSize: "11px", letterSpacing: "0.5px" }, children: "Actions" }), (0, jsx_runtime_1.jsx)("div", { className: `px-3 py-2 d-flex align-items-center ${(allItems.length === 0 || selectedIndex >= allItems.length) &&
                                             searchQuery.trim()
@@ -290,7 +293,7 @@ function CommandPaletteOverlay() {
                                             cursor: "pointer",
                                             transition: "background-color 0.1s ease",
                                             borderTop: allItems.length > 0
-                                                ? `1px solid ${isDark ? "#495057" : "#dee2e6"}`
+                                                ? `1px solid ${isDark ? "#495057" : "var(--peers-surface-border)"}`
                                                 : "none",
                                             marginTop: allItems.length > 0 ? "8px" : "0",
                                             paddingTop: allItems.length > 0 ? "12px" : "8px",
@@ -310,7 +313,7 @@ function CommandPaletteOverlay() {
                                                             : "#6c757d",
                                                         minWidth: "16px",
                                                     } }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "fw-medium", children: ["Start new thread:", " ", (0, jsx_runtime_1.jsxs)("span", { className: "text-muted", children: [searchQuery.trim().slice(0, 50), searchQuery.trim().length > 50 ? "..." : ""] })] }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", style: { fontSize: "12px" }, children: "Press Enter to create" })] })] }) })] }))] })) }), (0, jsx_runtime_1.jsxs)("div", { className: `px-3 py-2 small text-muted border-top d-flex align-items-center justify-content-between`, style: {
-                        borderTopColor: isDark ? "#495057" : "#dee2e6",
+                        borderTopColor: isDark ? "#495057" : "var(--peers-surface-border)",
                         fontSize: "11px",
                     }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "\u21B5" }), " to select"] }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "\u2191\u2193" }), " to navigate"] }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "esc" }), " to close"] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [allItems.length, " result", allItems.length !== 1 ? "s" : "", searchQuery.trim() && allItems.length === 0 && " • Start thread"] })] })] }) }));
 }

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/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/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/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();

package/dist/screens/welcome-modal.js

@@ -108,33 +108,33 @@ function WelcomeModal({ colorMode, onClose }) {
             backgroundColor: "rgba(0, 0, 0, 0.5)",
             backdropFilter: "blur(4px)",
             paddingTop: "10vh",
-        }, 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-4 text-center", style: {
-                        borderBottom: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
+                        borderBottom: `1px solid ${isDark ? "#495057" : "var(--peers-surface-border)"}`,
                     }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-circle text-primary d-block mb-3", style: { fontSize: "48px" } }), (0, jsx_runtime_1.jsx)("h4", { className: "mb-2", children: "Welcome to Peers!" }), (0, jsx_runtime_1.jsx)("p", { className: `mb-0 ${isDark ? "text-light opacity-75" : "text-muted"}`, style: { fontSize: "14px" }, children: "Let's personalize your experience. You can change these anytime in Settings." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4", children: [error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger py-2 px-3 mb-3", style: { fontSize: "14px" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-exclamation-triangle me-2" }), error] })), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("label", { className: "form-label fw-semibold mb-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person me-2" }), "Display Name"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, maxLength: peers_sdk_1.DISPLAY_NAME_MAX_LENGTH, placeholder: "How should others see you?", value: displayName, onChange: (e) => {
                                         setDisplayName(e.target.value);
                                         setError(null);
                                     }, onKeyDown: handleKeyDown, disabled: isSaving, style: {
                                         fontSize: "14px",
-                                        backgroundColor: isDark ? "#343a40" : "#ffffff",
+                                        backgroundColor: isDark ? "#343a40" : "var(--peers-surface-bg)",
                                     } }), (0, jsx_runtime_1.jsx)("small", { className: isDark ? "text-light opacity-50" : "text-muted", style: { fontSize: "11px" }, children: "This name will be visible to others when you connect" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("label", { className: "form-label fw-semibold mb-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-laptop me-2" }), "Device Name"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, maxLength: peers_sdk_1.DISPLAY_NAME_MAX_LENGTH, placeholder: "e.g., My Laptop, Work Computer", value: deviceName, onChange: (e) => {
                                         setDeviceName(e.target.value);
                                         setError(null);
                                     }, onKeyDown: handleKeyDown, disabled: isSaving, style: {
                                         fontSize: "14px",
-                                        backgroundColor: isDark ? "#343a40" : "#ffffff",
+                                        backgroundColor: isDark ? "#343a40" : "var(--peers-surface-bg)",
                                     } }), (0, jsx_runtime_1.jsx)("small", { className: isDark ? "text-light opacity-50" : "text-muted", style: { fontSize: "11px" }, children: "Helps you identify this device when syncing across multiple devices" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 d-flex justify-content-between align-items-center", style: {
-                        borderTop: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
-                        backgroundColor: isDark ? "#2d3238" : "#f8f9fa",
+                        borderTop: `1px solid ${isDark ? "#495057" : "var(--peers-surface-border)"}`,
+                        backgroundColor: isDark ? "#2d3238" : "var(--peers-surface-bg)",
                     }, children: [(0, jsx_runtime_1.jsx)("button", { className: `btn btn-sm ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`, onClick: handleSkip, disabled: isSaving, children: "Skip for now" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-primary", onClick: handleSave, disabled: isSaving, style: { minWidth: "100px" }, children: isSaving ? ((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" }), "Saving..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-check-lg me-1" }), "Get Started"] })) })] }), (0, jsx_runtime_1.jsxs)("div", { className: `px-3 py-2 small text-center ${isDark ? "text-light opacity-50" : "text-muted"}`, style: {
-                        borderTop: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
+                        borderTop: `1px solid ${isDark ? "#495057" : "var(--peers-surface-border)"}`,
                         fontSize: "11px",
-                        backgroundColor: isDark ? "#212529" : "#ffffff",
+                        backgroundColor: isDark ? "#212529" : "var(--peers-surface-bg)",
                     }, children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "\u21B5" }), " to save \u2022 ", (0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "esc" }), " to skip"] })] }) }));
 }

package/dist/tabs-layout/tabs-layout.js

@@ -148,25 +148,26 @@ function TabsLayoutInternal({ fillContainer = false } = {}) {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    backgroundColor: _colorMode === "light" ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.85)",
-                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-secondary mb-3", role: "status" }), (0, jsx_runtime_1.jsx)("div", { className: `small ${_colorMode === "light" ? "text-muted" : "text-secondary"}`, children: "Switching group..." })] }) })), (0, jsx_runtime_1.jsx)("div", { className: "border-bottom", style: {
-                    backgroundColor: "var(--bs-secondary-bg)",
+                    backgroundColor: _colorMode === "light" ? "rgba(var(--bs-body-bg-rgb), 0.85)" : "rgba(0,0,0,0.85)",
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-secondary mb-3", role: "status" }), (0, jsx_runtime_1.jsx)("div", { className: `small ${_colorMode === "light" ? "text-muted" : "text-secondary"}`, children: "Switching group..." })] }) })), (0, jsx_runtime_1.jsx)("div", { className: `border-bottom peers-tab-strip ${_colorMode === "light" ? "" : "bg-dark"}`, style: {
                     borderBottomWidth: "1px",
-                    borderBottomColor: _colorMode === "light" ? "#dee2e6" : "#495057",
+                    borderBottomColor: _colorMode === "light" ? "var(--peers-tab-edge)" : "#495057",
                 }, children: isMobile ? ((0, jsx_runtime_1.jsx)(MobileTabsHeader, { tabs: tabs, activeTab: activeTab, onSwitch: switchTab, onClose: closeTab, colorMode: _colorMode })) : ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center px-1", style: { height: "36px" }, children: [(0, jsx_runtime_1.jsx)(group_switcher_1.GroupSwitcher, { colorMode: _colorMode, isMobile: false }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm me-2 d-flex align-items-center", onClick: command_palette_1.openCommandPalette, title: "Search everything (Cmd+K)", style: {
                                 padding: "4px 8px",
                                 fontSize: "12px",
                                 borderRadius: "6px",
                                 border: "none",
                                 background: "transparent",
-                                color: _colorMode === "light" ? "#6c757d" : "#adb5bd",
+                                color: _colorMode === "light" ? "var(--peers-tab-icon-color)" : "#adb5bd",
                             }, onMouseEnter: (e) => {
                                 e.currentTarget.style.backgroundColor =
-                                    _colorMode === "light" ? "#f8f9fa" : "#495057";
-                                e.currentTarget.style.color = _colorMode === "light" ? "#0d6efd" : "#ffffff";
+                                    _colorMode === "light" ? "var(--peers-tab-hover-bg)" : "#495057";
+                                e.currentTarget.style.color =
+                                    _colorMode === "light" ? "var(--bs-link-color)" : "#ffffff";
                             }, onMouseLeave: (e) => {
                                 e.currentTarget.style.backgroundColor = "transparent";
-                                e.currentTarget.style.color = _colorMode === "light" ? "#6c757d" : "#adb5bd";
+                                e.currentTarget.style.color =
+                                    _colorMode === "light" ? "var(--peers-tab-icon-color)" : "#adb5bd";
                             }, children: (0, jsx_runtime_1.jsx)("i", { className: "bi-search", style: { fontSize: "14px" } }) }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex flex-grow-1 overflow-auto", style: {
                                 scrollbarWidth: "none",
                                 msOverflowStyle: "none",
@@ -206,39 +207,31 @@ function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode, }) {
                                                 }, children: (0, jsx_runtime_1.jsx)("i", { className: "bi-x" }) })] }, tab.tabId)))] }))] })] }), showMenuDropdown && ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowMenuDropdown(false) }))] }));
 }
 function TabHeader({ tab, isActive, onSwitch, onClose, colorMode }) {
-    const activeClass = isActive
-        ? colorMode === "light"
-            ? "bg-white"
-            : "bg-secondary"
-        : colorMode === "light"
-            ? "bg-light"
-            : "bg-dark";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `d-flex align-items-center px-2 py-1 user-select-none ${activeClass}`, style: {
+    const isLight = colorMode === "light";
+    const activeClass = isLight ? "" : isActive ? "bg-secondary" : "bg-dark";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `peers-tab ${isActive ? "peers-tab-active" : ""} d-flex align-items-center px-2 py-1 user-select-none ${activeClass}`, style: {
             cursor: "pointer",
             minWidth: "100px",
             maxWidth: "180px",
             height: "34px",
             fontSize: "13px",
-            borderTop: isActive ? "2px solid #0d6efd" : "2px solid transparent",
-            borderLeft: "1px solid transparent",
-            borderRight: `1px solid ${colorMode === "light" ? "#dee2e6" : "#495057"}`,
-            borderBottom: isActive
-                ? colorMode === "light"
-                    ? "1px solid white"
-                    : "1px solid #343a40"
-                : "none",
+            backgroundColor: isLight ? "var(--peers-tab-bg)" : undefined,
+            borderTop: isLight ? undefined : isActive ? "2px solid #0d6efd" : "2px solid transparent",
+            borderLeft: isLight ? undefined : "1px solid transparent",
+            borderRight: isLight ? undefined : "1px solid #495057",
+            borderBottom: isLight ? undefined : isActive ? "1px solid #343a40" : "none",
             marginBottom: isActive ? "-1px" : "0",
             borderRadius: isActive ? "6px 6px 0 0" : "0",
             transition: "all 0.15s ease",
             zIndex: isActive ? 1 : 0,
-            boxShadow: isActive ? "0 2px 4px rgba(0,0,0,0.1)" : "none",
+            boxShadow: isLight ? undefined : isActive ? "0 2px 4px rgba(0,0,0,0.1)" : "none",
         }, onMouseEnter: (e) => {
-            if (!isActive) {
-                e.currentTarget.style.backgroundColor = colorMode === "light" ? "#f8f9fa" : "#495057";
+            if (!isActive && !isLight) {
+                e.currentTarget.style.backgroundColor = "#495057";
             }
         }, onMouseLeave: (e) => {
-            if (!isActive) {
-                e.currentTarget.style.backgroundColor = colorMode === "light" ? "#f1f3f4" : "#343a40";
+            if (!isActive && !isLight) {
+                e.currentTarget.style.backgroundColor = "#343a40";
             }
         }, onClick: () => onSwitch(tab.tabId), children: [tab.iconClassName && (0, jsx_runtime_1.jsx)("i", { className: `${tab.iconClassName} me-2` }), (0, jsx_runtime_1.jsx)("span", { className: "text-truncate", style: { maxWidth: "120px", fontSize: "12px" }, children: tab.title }), tab.tabId !== "launcher" && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn p-0 ms-1 opacity-75 hover-opacity-100", style: {
                     width: "14px",
@@ -396,15 +389,15 @@ function AppCard({ appItem, onOpenApp, isMobile }) {
         }, onClick: () => onOpenApp(appItem), children: [(0, jsx_runtime_1.jsx)("div", { className: "d-flex align-items-center justify-content-center mb-2", style: {
                     width: isMobile ? "64px" : "72px",
                     height: isMobile ? "64px" : "72px",
-                    backgroundColor: isDark ? "#343a40" : "#f8f9fa",
+                    backgroundColor: isDark ? "#343a40" : "var(--peers-surface-bg)",
                     borderRadius: "12px",
-                    border: `1px solid ${isDark ? "#495057" : "#e9ecef"}`,
+                    border: `1px solid ${isDark ? "#495057" : "var(--peers-surface-border)"}`,
                     boxShadow: isDark ? "0 2px 4px rgba(0,0,0,0.3)" : "0 2px 4px rgba(0,0,0,0.08)",
                     transition: "all 0.15s ease",
                 }, children: (0, jsx_runtime_1.jsx)("i", { className: appItem.iconClassName, style: {
                         fontSize: isMobile ? "28px" : "32px",
                         color: isDark ? "#0d6efd" : "#0d6efd",
-                    } }) }), (0, jsx_runtime_1.jsx)("span", { className: isDark ? "text-light" : "text-dark", style: {
+                    } }) }), (0, jsx_runtime_1.jsx)("span", { className: isDark ? "text-light" : "text-body", style: {
                     fontSize: isMobile ? "11px" : "12px",
                     fontWeight: "500",
                     lineHeight: "1.2",

package/dist/theme.css

@@ -0,0 +1,126 @@
+/* Shared light palette. Import after Bootstrap in every platform host. */
+[data-bs-theme="light"] {
+  --bs-body-bg: #e5e9ed;
+  --bs-body-bg-rgb: 229, 233, 237;
+  --bs-body-color: #242a31;
+  --bs-body-color-rgb: 36, 42, 49;
+  --bs-secondary-color: #5f6974;
+  --bs-secondary-color-rgb: 95, 105, 116;
+  --bs-border-color: #c7ced6;
+  --bs-link-color: #2a63cb;
+  --bs-link-color-rgb: 42, 99, 203;
+  --bs-link-hover-color: var(--bs-link-color);
+  --bs-link-hover-color-rgb: var(--bs-link-color-rgb);
+
+  --peers-surface-bg: #fbfcfd;
+  --peers-surface-border: #d0d7de;
+  --peers-tab-strip-bg: #d0d6dd;
+  --peers-tab-edge: #b8c1ca;
+  --peers-tab-strip-color: #283037;
+  --peers-tab-icon-color: #56616d;
+  --peers-tab-color: #4f5a66;
+  --peers-tab-hover-bg: rgba(255, 255, 255, 0.42);
+  --peers-tab-divider: #bcc5ce;
+  --peers-tab-active-color: #1e242a;
+  --peers-tab-accent: #2f6fde;
+  --peers-tab-active-shadow: 0 -1px 3px rgba(30, 40, 55, 0.09);
+  --peers-graph-overlay-color: rgba(36, 42, 49, 0.32);
+}
+
+/* Bootstrap declares these variables locally, so override them on each component. */
+[data-bs-theme="light"] .card {
+  --bs-card-bg: var(--peers-surface-bg);
+  --bs-card-border-color: var(--peers-surface-border);
+}
+
+[data-bs-theme="light"] .dropdown-menu {
+  --bs-dropdown-bg: var(--peers-surface-bg);
+  --bs-dropdown-border-color: var(--peers-surface-border);
+  --bs-dropdown-divider-bg: var(--peers-surface-border);
+}
+
+[data-bs-theme="light"] .modal {
+  --bs-modal-bg: var(--peers-surface-bg);
+  --bs-modal-border-color: var(--peers-surface-border);
+  --bs-modal-header-border-color: var(--peers-surface-border);
+  --bs-modal-footer-border-color: var(--peers-surface-border);
+}
+
+[data-bs-theme="light"] .list-group {
+  --bs-list-group-bg: var(--peers-surface-bg);
+  --bs-list-group-border-color: var(--peers-surface-border);
+}
+
+[data-bs-theme="light"] .popover {
+  --bs-popover-bg: var(--peers-surface-bg);
+  --bs-popover-border-color: var(--peers-surface-border);
+}
+
+[data-bs-theme="light"] .toast {
+  --bs-toast-bg: var(--peers-surface-bg);
+  --bs-toast-border-color: var(--peers-surface-border);
+  --bs-toast-header-bg: var(--peers-surface-bg);
+  --bs-toast-header-border-color: var(--peers-surface-border);
+}
+
+[data-bs-theme="light"]
+  :is(.offcanvas, .offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl) {
+  --bs-offcanvas-bg: var(--peers-surface-bg);
+  --bs-offcanvas-border-color: var(--peers-surface-border);
+}
+
+[data-bs-theme="light"] :is(.form-control, .form-select):not(:disabled) {
+  background-color: var(--peers-surface-bg);
+}
+
+/* Keep Bootstrap's focus and validation borders. */
+[data-bs-theme="light"]
+  :where(.form-control, .form-select):where(:not(:focus):not(.is-valid):not(.is-invalid)) {
+  border-color: var(--peers-surface-border);
+}
+
+[data-bs-theme="light"] .nav-tabs {
+  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
+}
+
+/* Custom panels that do not use Bootstrap's component markup. */
+[data-bs-theme="light"] .peers-surface {
+  /* The tooltip also uses Bootstrap's bg-light-subtle utility. */
+  --bs-light-bg-subtle: var(--peers-surface-bg);
+  background-color: var(--peers-surface-bg);
+}
+
+[data-bs-theme="light"] .peers-table-surface {
+  --bs-table-bg: var(--peers-surface-bg);
+}
+
+[data-bs-theme="light"] .peers-tab-strip {
+  --bs-border-color: var(--peers-tab-edge);
+  background-color: var(--peers-tab-strip-bg);
+  color: var(--peers-tab-strip-color);
+}
+
+[data-bs-theme="light"] .peers-tab {
+  --peers-tab-bg: transparent;
+  background-color: var(--peers-tab-bg);
+  color: var(--peers-tab-color);
+  border-top: 2px solid transparent;
+  border-left: 1px solid transparent;
+  border-right: 1px solid var(--peers-tab-divider);
+  border-bottom: none;
+  box-shadow: none;
+}
+
+[data-bs-theme="light"] .peers-tab:not(.peers-tab-active):hover {
+  --peers-tab-bg: var(--peers-tab-hover-bg);
+}
+
+[data-bs-theme="light"] .peers-tab-active {
+  --peers-tab-bg: var(--bs-body-bg);
+  color: var(--peers-tab-active-color);
+  border-top: 2px solid var(--peers-tab-accent);
+  border-left-color: var(--peers-tab-edge);
+  border-right-color: var(--peers-tab-edge);
+  border-bottom: 1px solid var(--bs-body-bg);
+  box-shadow: var(--peers-tab-active-shadow);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.28.5",
+  "version": "0.28.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -20,7 +20,7 @@
   },
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "npm run clean && tsc",
+    "build": "npm run clean && tsc && cp src/theme.css dist/theme.css",
     "dev": "tsc -w",
     "clean:build": "npm run clean && npm run build",
     "release:guard": "node release-guard.js",
@@ -36,7 +36,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.28.5",
+    "@peers-app/peers-sdk": "^0.28.7",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -47,7 +47,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.28.5",
+    "@peers-app/peers-sdk": "0.28.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",