@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,186 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalSearch = GlobalSearch;
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../hooks");
+const color_mode_dropdown_1 = require("../settings/color-mode-dropdown");
+const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const mention_configs_1 = require("../../mention-configs");
+function GlobalSearch() {
+    const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [searchResults, setSearchResults] = (0, react_1.useState)([]);
+    const [isSearching, setIsSearching] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const isDark = _colorMode === 'dark';
+    // Focus search input on mount
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    // Search configs with their display names
+    const searchConfigs = [
+        { config: mention_configs_1.toolMentionConfig, category: 'Tools', navigationPath: 'tools' },
+        { config: mention_configs_1.assistantMentionConfig, category: 'Assistants', navigationPath: 'assistants' },
+        { config: mention_configs_1.workflowMentionConfig, category: 'Workflows', navigationPath: 'workflows' },
+        { config: mention_configs_1.peerEventTypeMentionConfig, category: 'Events', navigationPath: 'events' },
+        { config: mention_configs_1.predicateMentionConfig, category: 'Predicates', navigationPath: 'predicates' },
+        { config: mention_configs_1.valueTypeMentionConfig, category: 'Types', navigationPath: 'peer-types' },
+        { config: mention_configs_1.userMentionConfig, category: 'Users', navigationPath: 'profile' },
+    ];
+    // Debounced search effect
+    (0, react_1.useEffect)(() => {
+        if (!searchQuery.trim()) {
+            setSearchResults([]);
+            return;
+        }
+        const timeoutId = setTimeout(async () => {
+            setIsSearching(true);
+            try {
+                // Search all entity types in parallel
+                const searchPromises = searchConfigs.map(async ({ config, category }) => {
+                    try {
+                        const items = await config.query(searchQuery);
+                        if (items.length > 0) {
+                            return { config, items, category };
+                        }
+                        return null;
+                    }
+                    catch (error) {
+                        console.warn(`Search failed for ${category}:`, error);
+                        return null;
+                    }
+                });
+                const searchResults = await Promise.all(searchPromises);
+                const filteredResults = searchResults.filter(Boolean);
+                setSearchResults(filteredResults);
+            }
+            finally {
+                setIsSearching(false);
+            }
+        }, 300); // 300ms debounce
+        return () => clearTimeout(timeoutId);
+    }, [searchQuery]);
+    const handleItemClick = (result, item) => {
+        // Try using the config's onClick first
+        if (result.config.onClick) {
+            result.config.onClick(item);
+            return;
+        }
+        // Otherwise navigate to the appropriate list page
+        const configPath = searchConfigs.find(c => c.config === result.config)?.navigationPath;
+        if (configPath) {
+            if (configPath === 'profile') {
+                // Special case for users - just go to profile for now
+                (0, tabs_state_1.goToTabPath)('profile');
+            }
+            else {
+                // Navigate to the detail page if possible
+                (0, tabs_state_1.goToTabPath)(`${configPath}/${item.id}`);
+            }
+        }
+    };
+    const totalResults = searchResults.reduce((sum, result) => sum + result.items.length, 0);
+    return (react_1.default.createElement("div", { className: "container-fluid h-100 p-4", style: { maxHeight: '100vh', overflowY: 'auto' } },
+        react_1.default.createElement("div", { className: "mb-4" },
+            react_1.default.createElement("h1", { className: "h3 mb-3 d-flex align-items-center" },
+                react_1.default.createElement("i", { className: "bi-search me-3" }),
+                "Search Everything"),
+            react_1.default.createElement("div", { className: "position-relative" },
+                react_1.default.createElement("i", { className: "bi-search position-absolute", style: {
+                        left: '16px',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        color: '#6c757d',
+                        zIndex: 1,
+                        fontSize: '18px'
+                    } }),
+                react_1.default.createElement("input", { ref: inputRef, type: "text", className: `form-control form-control-lg ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "Search across tools, assistants, workflows, events, and more...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: {
+                        paddingLeft: '50px',
+                        fontSize: '18px',
+                        borderRadius: '12px',
+                        backgroundColor: isDark ? '#343a40' : '#f8f9fa',
+                        border: isDark ? '2px solid #495057' : '2px solid #dee2e6'
+                    } }),
+                isSearching && (react_1.default.createElement("div", { className: "position-absolute", style: {
+                        right: '16px',
+                        top: '50%',
+                        transform: 'translateY(-50%)'
+                    } },
+                    react_1.default.createElement("div", { className: "spinner-border spinner-border-sm text-muted" })))),
+            searchQuery && (react_1.default.createElement("div", { className: "mt-3 text-muted small" }, isSearching ? ('Searching...') : totalResults > 0 ? (`Found ${totalResults} result${totalResults !== 1 ? 's' : ''} across ${searchResults.length} categor${searchResults.length !== 1 ? 'ies' : 'y'}`) : searchQuery.trim() ? ('No results found') : null))),
+        searchQuery && !isSearching && (react_1.default.createElement("div", null, searchResults.length === 0 ? (react_1.default.createElement("div", { className: "text-center py-5" },
+            react_1.default.createElement("i", { className: "bi-search mb-3 d-block text-muted", style: { fontSize: '48px' } }),
+            react_1.default.createElement("h4", { className: "text-muted" }, "No results found"),
+            react_1.default.createElement("p", { className: "text-muted" }, "Try different keywords or check your spelling"))) : (react_1.default.createElement("div", null, searchResults.map((result) => (react_1.default.createElement("div", { key: result.category, className: "mb-5" },
+            react_1.default.createElement("div", { className: "d-flex align-items-center mb-3" },
+                react_1.default.createElement("i", { className: `${result.config.iconClass} me-3`, style: { fontSize: '20px', color: '#6c757d' } }),
+                react_1.default.createElement("h4", { className: "mb-0 me-3" }, result.category),
+                react_1.default.createElement("span", { className: "badge bg-secondary" }, result.items.length)),
+            react_1.default.createElement("div", { className: "row g-3" }, result.items.map((item) => (react_1.default.createElement("div", { key: item.id, className: "col-12 col-md-6 col-lg-4" },
+                react_1.default.createElement("div", { className: `card h-100 ${isDark ? 'bg-dark border-secondary' : 'bg-light'}`, style: {
+                        cursor: 'pointer',
+                        transition: 'all 0.15s ease',
+                        borderRadius: '8px'
+                    }, onClick: () => handleItemClick(result, item), onMouseEnter: (e) => {
+                        e.currentTarget.style.transform = 'translateY(-2px)';
+                        e.currentTarget.style.boxShadow = isDark
+                            ? '0 4px 12px rgba(0,0,0,0.3)'
+                            : '0 4px 12px rgba(0,0,0,0.1)';
+                    }, onMouseLeave: (e) => {
+                        e.currentTarget.style.transform = 'translateY(0)';
+                        e.currentTarget.style.boxShadow = 'none';
+                    } },
+                    react_1.default.createElement("div", { className: "card-body p-3" },
+                        react_1.default.createElement("div", { className: "d-flex align-items-start" },
+                            react_1.default.createElement("i", { className: `${result.config.iconClass} me-3 mt-1`, style: {
+                                    fontSize: '16px',
+                                    color: isDark ? '#0d6efd' : '#0d6efd',
+                                    minWidth: '16px'
+                                } }),
+                            react_1.default.createElement("div", { className: "flex-grow-1" },
+                                react_1.default.createElement("h6", { className: "card-title mb-1 fw-medium" }, item.name),
+                                react_1.default.createElement("small", { className: "text-muted text-uppercase", style: { fontSize: '11px', letterSpacing: '0.5px' } }, result.category.slice(0, -1))),
+                            react_1.default.createElement("i", { className: "bi-arrow-right text-muted", style: { fontSize: '12px' } }))))))))))))))),
+        !searchQuery && (react_1.default.createElement("div", { className: "text-center py-5" },
+            react_1.default.createElement("i", { className: "bi-search mb-3 d-block text-muted", style: { fontSize: '64px' } }),
+            react_1.default.createElement("h3", { className: "text-muted mb-3" }, "Search across everything"),
+            react_1.default.createElement("p", { className: "text-muted mb-4", style: { maxWidth: '400px', margin: '0 auto' } }, "Find tools, assistants, workflows, events, predicates, types, and users all in one place."),
+            react_1.default.createElement("div", { className: "d-flex flex-wrap justify-content-center gap-2" }, searchConfigs.map(({ config, category }) => (react_1.default.createElement("span", { key: category, className: `badge ${isDark ? 'bg-secondary' : 'bg-light text-dark'} px-3 py-2 d-flex align-items-center`, style: { fontSize: '12px' } },
+                react_1.default.createElement("i", { className: `${config.iconClass} me-2` }),
+                category))))))));
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export type ColorModePreference = 'light' | 'dark' | 'auto';
+export type ColorMode = 'light' | 'dark';
+export declare const colorMode: import("@peers-app/peers-sdk").PersistentVar<ColorMode>;
+export declare const colorModePreference: import("@peers-app/peers-sdk").PersistentVar<ColorModePreference>;
+export declare const ColorModeDropdown: () => React.JSX.Element;

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

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorModeDropdown = exports.colorModePreference = exports.colorMode = void 0;
+const react_1 = __importDefault(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const hooks_1 = require("../../hooks");
+exports.colorMode = (0, peers_sdk_1.deviceVar)('colorMode', {
+    defaultValue: 'dark',
+});
+exports.colorModePreference = (0, peers_sdk_1.deviceVar)('colorModePreference', {
+    defaultValue: 'dark',
+});
+function applyColorMode(modePreference) {
+    if (!modePreference) {
+        modePreference = (0, exports.colorModePreference)() || 'dark';
+    }
+    else {
+        (0, exports.colorModePreference)(modePreference);
+    }
+    let mode = (0, exports.colorMode)();
+    if (modePreference === 'auto') {
+        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        mode = isDarkMode ? 'dark' : 'light';
+    }
+    else {
+        mode = modePreference;
+    }
+    document.documentElement.setAttribute('data-bs-theme', mode);
+    if (mode === 'light') {
+        document.body.style.backgroundColor = 'initial';
+    }
+    else {
+        document.body.style.backgroundColor = 'rgb(33, 37, 41)';
+    }
+    (0, exports.colorMode)(mode);
+    exports.colorMode.notifySubscribers();
+    return mode;
+}
+exports.colorModePreference.subscribe(newValue => applyColorMode(newValue));
+const ColorModeDropdown = () => {
+    const [modePreference] = (0, hooks_1.useObservable)(exports.colorModePreference);
+    return (react_1.default.createElement("div", { className: "dropdown" },
+        react_1.default.createElement("button", { className: "btn btn-secondary dropdown-toggle", type: "button", id: "colorModeDropdown", "data-bs-toggle": "dropdown", "aria-expanded": "false" },
+            "Color Mode: ",
+            (0, peers_sdk_1.camelCaseToSpaces)(modePreference)),
+        react_1.default.createElement("ul", { className: "dropdown-menu", "aria-labelledby": "colorModeDropdown" },
+            react_1.default.createElement("li", null,
+                react_1.default.createElement("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)('auto') },
+                    "Auto ",
+                    modePreference === 'auto' && '✓')),
+            react_1.default.createElement("li", null,
+                react_1.default.createElement("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)('light') },
+                    "Light ",
+                    modePreference === 'light' && '✓')),
+            react_1.default.createElement("li", null,
+                react_1.default.createElement("button", { className: "dropdown-item", onClick: () => (0, exports.colorModePreference)('dark') },
+                    "Dark ",
+                    modePreference === 'dark' && '✓')))));
+};
+exports.ColorModeDropdown = ColorModeDropdown;

package/dist/screens/settings/settings-page.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SettingsPage: React.FC;

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

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsPage = void 0;
+const react_1 = __importDefault(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const tooltip_1 = require("../../components/tooltip");
+const color_mode_dropdown_1 = require("./color-mode-dropdown");
+const input_1 = require("../../components/input");
+const hooks_1 = require("../../hooks");
+const SettingsPage = () => {
+    return (react_1.default.createElement("div", { className: 'container-fluid' },
+        react_1.default.createElement(color_mode_dropdown_1.ColorModeDropdown, null),
+        react_1.default.createElement(PackagesRootDirectory, null),
+        react_1.default.createElement(ReloadPackagesOnPageRefresh, null),
+        react_1.default.createElement(ResetDeviceSyncInfos, null)));
+};
+exports.SettingsPage = SettingsPage;
+const PackagesRootDirectory = () => {
+    return (react_1.default.createElement("div", { className: 'mt-3' },
+        react_1.default.createElement("small", null,
+            "Packages Directory:",
+            react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `Changing this will not effect existing packages.` })),
+        react_1.default.createElement(input_1.Input, { value: peers_sdk_1.packagesRootDir, className: 'form-control' })));
+};
+const ReloadPackagesOnPageRefresh = () => {
+    (0, hooks_1.useObservable)(peers_sdk_1.reloadPackagesOnPageRefresh);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("label", { htmlFor: "isPrimary", className: "form-label small mt-2 me-2" }, "Reload Packages on Page Load:"),
+        react_1.default.createElement("input", { type: "checkbox", checked: (0, peers_sdk_1.reloadPackagesOnPageRefresh)(), onChange: (e) => {
+                const checked = e.target.checked;
+                (0, peers_sdk_1.reloadPackagesOnPageRefresh)(checked);
+            } }),
+        react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `Checking this will reload all packages very time the page is loaded.  Particularly useful while developing packages.` })));
+};
+const ResetDeviceSyncInfos = () => {
+    return (react_1.default.createElement("div", { className: 'mt-3' },
+        react_1.default.createElement("button", { className: 'btn btn-secondary btn-sm ms-2', onClick: async () => {
+                try {
+                    await peers_sdk_1.rpcServerCalls.resetAllDeviceSyncInfo();
+                    alert('All device sync info has been reset.  Syncing in progress...');
+                }
+                catch (err) {
+                    console.error('Error while resetting all device sync info', err);
+                }
+            } }, "Reset All Device Sync Info")));
+};

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const SetupUser: () => React.JSX.Element;

package/dist/screens/setup-user.js

@@ -0,0 +1,270 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SetupUser = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const input_1 = require("../components/input");
+const markdown_with_mentions_1 = require("../components/markdown-with-mentions");
+const tooltip_1 = require("../components/tooltip");
+const globals_1 = require("../globals");
+async function sendNewUserMessage(userId) {
+    const user = await (0, peers_sdk_1.Users)().get(userId);
+    if (!user) {
+        throw new Error('user not found');
+    }
+    const primaryAssistant = await (0, peers_sdk_1.getPrimaryAssistant)();
+    const message = {
+        messageId: (0, peers_sdk_1.newid)(),
+        message: [
+            `Hi, ${user.name}! Welcome to Peers! I'm your primary AI assistant.`,
+            "\n\n",
+            "If you have any questions, just ask! I'm here to help.",
+            // `\nRemind Mark to add some Getting-Started tasks that I can work through with you.`,
+        ].join(' '),
+        userId: user.userId,
+        assistantId: primaryAssistant?.assistantId,
+        channelId: user.userId,
+        createdAt: new Date(),
+    };
+    await (0, peers_sdk_1.Messages)().insert(message);
+    (0, globals_1.openThread)(message.messageId);
+}
+const SetupUser = () => {
+    const [username, setUsername] = (0, react_1.useState)('');
+    let [userId, setUserId] = (0, react_1.useState)('');
+    const [secretKey, setSecretKey] = (0, react_1.useState)('');
+    const [existingUser, setExistingUser] = (0, react_1.useState)(false);
+    const [registerAccount, setRegisterAccount] = (0, react_1.useState)(true);
+    const [showUserKeys, setShowUserKeys] = (0, react_1.useState)(false);
+    async function onSubmit(e) {
+        e.preventDefault();
+        let keys;
+        if (existingUser) {
+            if (!userId || !secretKey) {
+                confirm('Please enter a userId and secret key');
+                return;
+            }
+            if ((0, peers_sdk_1.isid)(userId) !== true) {
+                confirm('Invalid userId');
+                return;
+            }
+            try {
+                keys = (0, peers_sdk_1.loadKeys)(secretKey);
+                const msg = (0, peers_sdk_1.newid)();
+                const msgSigned = (0, peers_sdk_1.signMessageWithSecretKey)(msg, keys.secretKey);
+                const msgOpened = (0, peers_sdk_1.openMessageWithPublicKey)(msgSigned, keys.publicKey);
+                if (msg !== msgOpened) {
+                    throw new Error('signed message does not match');
+                }
+            }
+            catch (e) {
+                confirm('Invalid secret key');
+                return;
+            }
+        }
+        else {
+            keys = (0, peers_sdk_1.newKeys)();
+        }
+        const _userId = userId || globals_1.me.userId;
+        let _me = await (0, peers_sdk_1.Users)().get(_userId);
+        const name = username.trim() || "Unnamed_1";
+        if (!_me) {
+            _me = {
+                userId: _userId,
+                name,
+                publicKey: keys.publicKey,
+                publicBoxKey: keys.publicBoxKey,
+            };
+            await (0, peers_sdk_1.Users)().insert(_me);
+        }
+        else {
+            _me.name = name;
+            _me.publicKey = keys.publicKey;
+            _me.publicBoxKey = keys.publicBoxKey;
+            await (0, peers_sdk_1.Users)().update(_me);
+        }
+        (0, peers_sdk_1.myUserId)(_userId);
+        const result = await peers_sdk_1.rpcServerCalls.setSecretKey(keys.secretKey).catch(err => {
+            confirm('Error setting user id and secret key: ' + String(err).replaceAll('\n', ' '));
+            return err;
+        });
+        if (result) {
+            return;
+        }
+        // if changing user then use new device id
+        (0, peers_sdk_1.thisDeviceId)((0, peers_sdk_1.newid)());
+        if (existingUser) {
+            (0, globals_1.mainContentPath)('profile');
+            setTimeout(() => {
+                (0, globals_1.mainContentPath)('profile');
+                window.location.reload();
+            }, 100);
+        }
+        else {
+            setUserId(_userId);
+            setSecretKey(keys.secretKey);
+            setShowUserKeys(true);
+        }
+    }
+    if (showUserKeys) {
+        return react_1.default.createElement(ShowUserKeys, { userId: userId, secretKey: secretKey });
+    }
+    return (react_1.default.createElement("div", { className: 'container-fluid' },
+        react_1.default.createElement("div", { className: "position-relative", style: {
+                height: '100vh',
+            } },
+            react_1.default.createElement("div", { className: "position-absolute start-50 translate-middle bg-body-tertiary", style: {
+                    width: '400px',
+                    padding: '20px',
+                    border: '1px solid #ccc',
+                    borderRadius: '5px',
+                    top: '350px',
+                } },
+                react_1.default.createElement("h3", { className: 'text-center' }, "Setup User"),
+                react_1.default.createElement("form", { onSubmit: onSubmit },
+                    react_1.default.createElement("label", null, "Display Name"),
+                    react_1.default.createElement(tooltip_1.Tooltip, { positions: ['top', 'bottom', 'right', 'left'], markdownContent: "This can be whatever you want it to be.  You can change it any time." }),
+                    react_1.default.createElement("input", { id: "display-name", type: 'text', className: 'form-control', value: username, onChange: (e) => setUsername(e.target.value) }),
+                    react_1.default.createElement("div", { className: "mt-2" },
+                        react_1.default.createElement("label", null, "Existing User"),
+                        react_1.default.createElement(tooltip_1.Tooltip, { positions: ['top', 'bottom', 'right', 'left'], markdownContent: "Check this if you have already have an account and need to enter your existing `userId` and `secretKey`." }),
+                        "\u00A0",
+                        react_1.default.createElement("input", { type: "checkbox", checked: existingUser, onChange: (e) => {
+                                const checked = e.target.checked;
+                                setExistingUser(checked);
+                                if (checked) {
+                                    setUserId('');
+                                    setSecretKey('');
+                                }
+                            } })),
+                    existingUser && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("br", null),
+                        react_1.default.createElement("label", null, "User Id"),
+                        react_1.default.createElement(tooltip_1.Tooltip, { positions: ['top', 'bottom', 'right', 'left'], markdownContent: "The user id that was generated when you first setup your account." }),
+                        react_1.default.createElement("input", { id: "user-id", type: "text", className: 'form-control', value: userId, onChange: (e) => setUserId(e.target.value), disabled: !existingUser }),
+                        react_1.default.createElement("br", null),
+                        react_1.default.createElement("label", null, "Secret Key"),
+                        react_1.default.createElement(tooltip_1.Tooltip, { positions: ['top', 'bottom', 'right', 'left'], markdownContent: "The secret key for the public key that is currently associated with this account." }),
+                        react_1.default.createElement("input", { id: "secret-key", type: 'password', className: 'form-control', value: secretKey, disabled: !existingUser, onChange: (e) => setSecretKey(e.target.value) }))),
+                    react_1.default.createElement("div", { className: "mt-2" },
+                        react_1.default.createElement("label", null, "Sync with Peers"),
+                        react_1.default.createElement(tooltip_1.Tooltip, { positions: ['top', 'bottom', 'right', 'left'], markdownContent: [
+                                "### PLEASE READ",
+                                '\n',
+                                "Leave this checked to register your `userId` and `publicKey` with [https://peers.app](https://peers.app) server.",
+                                "\n\n**No other data is sent to the server.**\n\n",
+                                "This is not required to use Peers but it is required to use the built-in network services.",
+                                "Additionally this will ensure that your `userId` is not used publicly by someone else.",
+                                "\n\n",
+                                "**This is _highly_ recommended** but if your goal is absolute privacy, uncheck this.",
+                                "\n\n",
+                                "If you choose to not do this now, you can still do it later from the settings screen.",
+                            ].join(' ') }),
+                        "\u00A0",
+                        react_1.default.createElement("input", { type: "checkbox", checked: registerAccount, onChange: (e) => setRegisterAccount(e.target.checked) })),
+                    react_1.default.createElement("button", { className: 'btn btn-primary float-end', onClick: e => onSubmit(e) }, "Submit"))))));
+};
+exports.SetupUser = SetupUser;
+const ShowUserKeys = (props) => {
+    const { userId, secretKey } = props;
+    const [secretKeySaved, setSecretKeySaved] = (0, react_1.useState)(false);
+    async function continueToApp() {
+        await sendNewUserMessage(userId);
+        window.location.reload();
+    }
+    const secretKeyExplainer = [
+        "**`NEVER SHARE THIS KEY WITH ANYONE!`**",
+        "\n\n",
+        "If this key is compromised another user can permanently take over your account.",
+        "\n\n",
+        "This key is used to:",
+        "\n - Sign messages so that other users can verify they were sent from you.",
+        "\n - Decrypt boxed data that was encrypted with your public box key.",
+        "\n    - This allows other users to send data to you securely through public channels.",
+        "\n - Encrypt your own private data so that only you can decrypt it.",
+        "\n\n",
+        "Unlike a password, this key is never sent to the server and is entirely in your control.",
+        "This is the foundation of your account's security.",
+        "If you lose this key you will lose access to your account.",
+        "If this key is compromised your account will be too and you will be putting any groups you are a part of at risk.",
+        "\n\n",
+        "Since the secret key is never sent to the server, if you lose it you'll lose access to your account.",
+        "It is highly recommend to store these in a password manager like [1Password](https://1password.com).",
+    ].join(' ');
+    return (react_1.default.createElement("div", { className: 'container-fluid' },
+        react_1.default.createElement("div", { className: "position-relative", style: {
+                height: '100vh',
+            } },
+            react_1.default.createElement("div", { className: "position-absolute top-50 start-50 translate-middle bg-body-tertiary", style: {
+                    width: '600px',
+                    padding: '20px',
+                    border: '1px solid #ccc',
+                    borderRadius: '5px',
+                } },
+                react_1.default.createElement("h3", { className: 'text-center' }, "User Created!"),
+                react_1.default.createElement("small", null, "User Id:"),
+                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies you to all other users." }),
+                react_1.default.createElement("button", { className: 'btn btn-secondary-outline', onClick: () => {
+                        navigator.clipboard.writeText(userId);
+                    }, title: "Copy User Id to Clipboard" },
+                    react_1.default.createElement("i", { className: "bi bi-copy" })),
+                react_1.default.createElement(input_1.Input, { value: globals_1.me.userId, className: "form-control mb-3", disabled: true }),
+                react_1.default.createElement("small", null, "Secret Key:"),
+                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: secretKeyExplainer }),
+                react_1.default.createElement("button", { className: 'btn btn-secondary-outline', onClick: () => {
+                        navigator.clipboard.writeText(props.secretKey);
+                    }, title: "Copy Secret Key to Clipboard" },
+                    react_1.default.createElement("i", { className: "bi bi-copy" })),
+                react_1.default.createElement("pre", null, secretKey),
+                react_1.default.createElement("small", null,
+                    react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: [
+                            "**`IMPORTANT:`**",
+                            "**Copy your User Id and Secret Key to a secure location.**",
+                            "\n\n",
+                            "You won't be able to view this key again after you continue.",
+                            "\n\n",
+                            "It is highly recommended to store these in a password manager like [1Password](https://1password.com).",
+                            "\n\n",
+                            "Unlike a password, this key is never sent to the server and is entirely in your control.",
+                            "If you lose this key you will lose access to your account and data.",
+                        ].join(' ') })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { style: { textDecoration: 'underline' } }, "I Have Saved My Secret Key"),
+                    " \u00A0",
+                    react_1.default.createElement("input", { type: "checkbox", checked: secretKeySaved, onChange: (e) => setSecretKeySaved(e.target.checked) }),
+                    "\u00A0 \u00A0",
+                    react_1.default.createElement("button", { disabled: !secretKeySaved, className: (secretKeySaved ? 'btn btn-primary' : 'btn btn-secondary') + ' float-end', onClick: continueToApp }, "Continue"))))));
+};

package/dist/screens/tools/tool-code.d.ts

@@ -0,0 +1,5 @@
+import { IDoc, ITool } from "@peers-app/peers-sdk";
+import React from "react";
+export declare const ToolCode: (props: {
+    tool: IDoc<ITool>;
+}) => React.JSX.Element;

package/dist/screens/tools/tool-code.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolCode = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const editor_inline_1 = require("../../components/markdown-editor/editor-inline");
+const ToolCode = (props) => {
+    const { tool } = props;
+    let code = tool.qs.code() ?? '';
+    const toolCodeObs = (0, peers_sdk_1.computed)({
+        read: () => {
+            if (!code.startsWith('```')) {
+                code = '```javascript\n' + code + '\n```';
+            }
+            return code;
+        },
+        write: (newCode) => {
+            code = newCode;
+            if (code.startsWith('```javascript\n')) {
+                code = code.replace('```javascript\n', '');
+                code = code.replace('\n```', '');
+            }
+            tool.qs.code(code);
+        }
+    });
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: toolCodeObs, hideToolbar: true })));
+};
+exports.ToolCode = ToolCode;

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface IToolDetailsProps {
+    toolId: string;
+}
+export declare const ToolDetails: (props: IToolDetailsProps) => React.JSX.Element;
+export {};