@peers-app/peers-ui 0.28.4 → 0.28.6

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,24 +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 ${_colorMode === "light" ? "bg-light" : "bg-dark"}`, style: {
+                    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",
@@ -205,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",
@@ -395,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.4",
+  "version": "0.28.6",
   "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.4",
+    "@peers-app/peers-sdk": "^0.28.6",
     "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.4",
+    "@peers-app/peers-sdk": "0.28.6",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/dist/screens/tools/tool-test-details.d.ts

@@ -1,3 +0,0 @@
-export declare const ToolTestDetails: (props: {
-    toolTestId: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/screens/tools/tool-test-details.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolTestDetails = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const loading_indicator_1 = require("../../components/loading-indicator");
-const editor_1 = require("../../components/markdown-editor/editor");
-const save_button_1 = require("../../components/save-button");
-const hooks_1 = require("../../hooks");
-const tabs_state_1 = require("../../tabs-layout/tabs-state");
-const ToolTestDetails = (props) => {
-    const { toolTestId } = props;
-    const tool = (0, hooks_1.useObservableState)(undefined);
-    const toolTest = (0, hooks_1.usePromise)(async () => {
-        const toolTestData = await (0, peers_sdk_1.ToolTests)().get(toolTestId);
-        if (!toolTestData)
-            return null;
-        const _tool = await (0, peers_sdk_1.Tools)().get(toolTestData.toolId);
-        tool(_tool);
-        const doc = (0, peers_sdk_1.ToolTests)().initDoc(toolTestData);
-        (0, tabs_state_1.updateActiveTabTitle)(_tool?.name ? `${_tool.name} Test` : "Tool Test");
-        return doc;
-    });
-    if (toolTest === null) {
-        return (0, jsx_runtime_1.jsx)("div", { children: "ToolTest not found" });
-    }
-    if (!toolTest) {
-        return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid mt-2", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("a", { href: `#tools/${toolTest.toolId}`, children: ["Tool: ", tool()?.name] }), (0, jsx_runtime_1.jsx)("div", { className: "float-end", children: (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { doc: toolTest }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { height: "calc(100vh - 55px)", overflowY: "auto", width: "100%" }, children: [(0, jsx_runtime_1.jsx)("small", { children: "Test description:" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            border: "1px solid #ccc",
-                            borderRadius: "5px",
-                        }, children: (0, jsx_runtime_1.jsx)(editor_1.MarkdownEditor, { value: toolTest.qs.description, hideToolbar: true }) }), (0, jsx_runtime_1.jsx)("small", { children: "Code:" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            border: "1px solid #ccc",
-                            borderRadius: "5px",
-                        }, children: (0, jsx_runtime_1.jsx)(editor_1.MarkdownEditor, { value: toolTest.qs.code, hideToolbar: true }) })] })] }));
-};
-exports.ToolTestDetails = ToolTestDetails;

package/dist/screens/tools/tool-test-list.d.ts

@@ -1,3 +0,0 @@
-export declare const ToolTestList: (props: {
-    toolId: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/screens/tools/tool-test-list.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolTestList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = require("react");
-const input_1 = require("../../components/input");
-const globals_1 = require("../../globals");
-const hooks_1 = require("../../hooks");
-const ToolTestList = (props) => {
-    const { toolId } = props;
-    const testsObs = (0, hooks_1.useObservableState)([]);
-    const searchText = (0, hooks_1.useObservableState)("");
-    (0, react_1.useEffect)(() => {
-        (0, peers_sdk_1.ToolTests)()
-            .list({ toolId })
-            .then((tests) => {
-            testsObs(tests);
-        });
-    }, [toolId, testsObs]);
-    const tests = testsObs().filter((test) => test.description.toLowerCase().includes(searchText().toLowerCase()));
-    async function createTest(evt) {
-        if (evt.key !== "Enter")
-            return;
-        evt.preventDefault();
-        // TODO maybe use LLM call to do this?
-        const test = await (0, peers_sdk_1.ToolTests)().insert({
-            toolTestId: (0, peers_sdk_1.newid)(),
-            toolId,
-            description: searchText(),
-            code: "",
-            input: {},
-            output: {},
-        });
-        testsObs([...tests, test]);
-        searchText("");
-        (0, globals_1.mainContentPath)(`tools/tests/${test.toolTestId}`);
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(input_1.Input, { className: "form-control mb-2", value: searchText, onKeyDown: createTest, placeholder: "Search or create new test" }), testsObs().length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("p", { children: "No test for this tool yet" }) })), testsObs().length !== 0 && tests.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("p", { children: "No matching tests found" }) })), tests.map((test, iTest) => {
-                return ((0, jsx_runtime_1.jsx)("p", { onDoubleClick: (_e) => (0, globals_1.mainContentPath)(`tools/tests/${test.toolTestId}`), children: test.description.split("\n")[0] }, iTest));
-            })] }));
-};
-exports.ToolTestList = ToolTestList;