@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/screens/peer-types/peer-type-details.js

@@ -1,41 +1,9 @@
 "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.IconPicker = exports.PeerTypeDetails = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const input_1 = require("../../components/input");
 const io_schema_1 = require("../../components/io-schema");
 const loading_indicator_1 = require("../../components/loading-indicator");
@@ -49,7 +17,7 @@ const PeerTypeDetails = (props) => {
     const valueType = (0, hooks_1.usePromise)(async () => {
         const valueType = await (0, peers_sdk_1.PeerTypes)().get(props.peerTypeId);
         if (!valueType) {
-            throw new Error('Variable not found');
+            throw new Error("Variable not found");
         }
         const doc = (0, peers_sdk_1.PeerTypes)().initDoc(valueType);
         (0, tabs_state_1.updateActiveTabTitle)(doc.name || "Type");
@@ -59,68 +27,48 @@ const PeerTypeDetails = (props) => {
         if (!valueType)
             return;
         const sub = valueType.qs.name.subscribe(() => {
-            valueType.name = valueType.qs.name().replaceAll(/\s/g, '_').replaceAll(/[^a-zA-Z0-9_-]/g, '');
+            valueType.name = valueType.qs
+                .name()
+                .replaceAll(/\s/g, "_")
+                .replaceAll(/[^a-zA-Z0-9_-]/g, "");
         });
         return () => {
             sub.dispose();
         };
     }, [valueType]);
     if (!valueType) {
-        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+        return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
-    return (react_1.default.createElement("div", { className: "container-fluid p-3" },
-        react_1.default.createElement("div", { className: "d-flex" },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("h4", null,
-                    react_1.default.createElement("i", { className: "bi bi-code-square me-2" }))),
-            react_1.default.createElement("div", { className: "flex-grow-1" },
-                react_1.default.createElement("h4", null,
-                    react_1.default.createElement(input_1.Input, { key: valueType.peerTypeId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: valueType.qs.name }))),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(save_button_1.SaveButton, { key: valueType.peerTypeId, doc: valueType }))),
-        react_1.default.createElement(tabs_1.Tabs, { key: valueType.peerTypeId, tabs: [
-                {
-                    name: 'Info', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
-                        react_1.default.createElement(VariableInfo, { valueType: valueType }))
-                },
-                {
-                    name: 'Schema', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
-                        react_1.default.createElement(VariableSchema, { valueType: valueType }))
-                },
-            ] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-code-square me-2" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1", children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)(input_1.Input, { className: "border border-0", style: { width: "100%", outline: "none", backgroundColor: "transparent" }, value: valueType.qs.name }, valueType.peerTypeId) }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { doc: valueType }, valueType.peerTypeId) })] }), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
+                    {
+                        name: "Info",
+                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: (0, jsx_runtime_1.jsx)(VariableInfo, { valueType: valueType }) })),
+                    },
+                    {
+                        name: "Schema",
+                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: (0, jsx_runtime_1.jsx)(VariableSchema, { valueType: valueType }) })),
+                    },
+                ] }, valueType.peerTypeId)] }));
 };
 exports.PeerTypeDetails = PeerTypeDetails;
 const VariableInfo = (props) => {
     const { valueType } = props;
-    valueType.description = valueType.description || '';
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("small", { className: "text-body-secondary" }, "Name:"),
-        react_1.default.createElement(input_1.Input, { value: valueType.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Variable name", title: "Variable name" }),
-        react_1.default.createElement("small", { className: "text-body-secondary" },
-            "Icon Class:",
-            react_1.default.createElement("small", null,
-                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: [
-                        'Icon classes can be found at:',
-                        '[Bootstrap Icons](https://icons.getbootstrap.com/)',
-                    ].join(' ') }))),
-        react_1.default.createElement(exports.IconPicker, { icon: valueType.qs.iconClass }),
-        react_1.default.createElement("small", { className: "mt-2 text-body-secondary" }, "Description:"),
-        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: valueType.qs.description })));
+    valueType.description = valueType.description || "";
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("small", { className: "text-body-secondary", children: "Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: valueType.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Variable name", title: "Variable name" }), (0, jsx_runtime_1.jsxs)("small", { className: "text-body-secondary", children: ["Icon Class:", (0, jsx_runtime_1.jsx)("small", { children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: [
+                                "Icon classes can be found at:",
+                                "[Bootstrap Icons](https://icons.getbootstrap.com/)",
+                            ].join(" ") }) })] }), (0, jsx_runtime_1.jsx)(exports.IconPicker, { icon: valueType.qs.iconClass }), (0, jsx_runtime_1.jsx)("small", { className: "mt-2 text-body-secondary", children: "Description:" }), (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: valueType.qs.description })] }));
 };
 const VariableSchema = (props) => {
     const { valueType } = props;
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(io_schema_1.IOSchemaEditor, { ioSchema: valueType.qs.schema, simpleValueName: "value" })));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(io_schema_1.IOSchemaEditor, { ioSchema: valueType.qs.schema, simpleValueName: "value" }) }));
 };
 const IconPicker = (props) => {
     const { icon } = props;
     (0, hooks_1.useObservable)(icon);
     if (icon() === undefined) {
-        icon('');
+        icon("");
     }
-    return (react_1.default.createElement("div", { className: "d-flex" },
-        react_1.default.createElement(input_1.Input, { value: icon, className: "form-control mb-3 p-0 ps-2", placeholder: "icon class", title: "Icon" }),
-        react_1.default.createElement("div", { className: "me-2 ms-2", style: { width: '22px' } },
-            react_1.default.createElement("i", { className: icon() }))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { value: icon, className: "form-control mb-3 p-0 ps-2", placeholder: "icon class", title: "Icon" }), (0, jsx_runtime_1.jsx)("div", { className: "me-2 ms-2", style: { width: "22px" }, children: (0, jsx_runtime_1.jsx)("i", { className: icon() }) })] }));
 };
 exports.IconPicker = IconPicker;

package/dist/screens/peer-types/peer-type-list.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare function PeerTypeLists(): React.JSX.Element;
+export declare function PeerTypeLists(): import("react/jsx-runtime").JSX.Element;

package/dist/screens/peer-types/peer-type-list.js

@@ -1,22 +1,19 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PeerTypeLists = PeerTypeLists;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const list_screen_1 = require("../../components/list-screen");
 const markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
 const globals_1 = require("../../globals");
-const list_screen_1 = require("../../components/list-screen");
 const ui_loader_1 = require("../../ui-router/ui-loader");
 function PeerTypeLists() {
     async function newRecord(name) {
-        const peerTypeName = name.replace(/\s+/g, '_');
+        const peerTypeName = name.replace(/\s+/g, "_");
         let valueType = await (0, peers_sdk_1.PeerTypes)().insert({
             peerTypeId: (0, peers_sdk_1.newid)(),
             name: peerTypeName,
-            description: '',
+            description: "",
             schema: {
                 type: peers_sdk_1.IOSchemaType.none,
                 fields: [],
@@ -28,30 +25,22 @@ function PeerTypeLists() {
     }
     function getFilter(searchText) {
         return {
-            $or: [
-                { name: { $matchWords: searchText } },
-                { description: { $matchWords: searchText } },
-            ],
+            $or: [{ name: { $matchWords: searchText } }, { description: { $matchWords: searchText } }],
         };
     }
     function renderItem(item) {
-        return (react_1.default.createElement("div", { key: item.peerTypeId, className: 'container-fluid pb-4' },
-            react_1.default.createElement("i", { className: item.iconClass ?? "bi bi-code-square" }),
-            "\u00A0",
-            react_1.default.createElement("a", { href: `#peer-types/${item.peerTypeId}` }, item.name || '<empty-name>'),
-            react_1.default.createElement("div", { style: { paddingLeft: '20px' } },
-                react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: item.description || '' }))));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid pb-4", children: [(0, jsx_runtime_1.jsx)("i", { className: item.iconClass ?? "bi bi-code-square" }), "\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `#peer-types/${item.peerTypeId}`, children: item.name || "<empty-name>" }), (0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: "20px" }, children: (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: item.description || "" }) })] }, item.peerTypeId));
     }
-    return (react_1.default.createElement(list_screen_1.ListScreen, { table: (0, peers_sdk_1.PeerTypes)(), newRecord: newRecord, getFilter: getFilter, sortBy: ['name'], renderItem: renderItem, placeholderName: "value type" }));
+    return ((0, jsx_runtime_1.jsx)(list_screen_1.ListScreen, { table: (0, peers_sdk_1.PeerTypes)(), newRecord: newRecord, getFilter: getFilter, sortBy: ["name"], renderItem: renderItem, placeholderName: "value type" }));
 }
 (0, ui_loader_1.registerInternalPeersUI)({
-    peersUIId: '00m5fshz2g6ea23v8z6y0a1cj',
+    peersUIId: "00m5fshz2g6ea23v8z6y0a1cj",
     component: PeerTypeLists,
     routes: [
         {
-            isMatch: (props, context) => context.path === 'peer-types',
-            uiCategory: 'screen',
-            priority: 2
-        }
-    ]
+            isMatch: (_props, context) => context.path === "peer-types",
+            uiCategory: "screen",
+            priority: 2,
+        },
+    ],
 });

package/dist/screens/search/global-search.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare function GlobalSearch(): React.JSX.Element;
+export declare function GlobalSearch(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,97 +1,69 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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");
-const routes_loader_1 = require("../../ui-router/routes-loader");
 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 color_mode_dropdown_1 = require("../settings/color-mode-dropdown");
+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.valueTypeMentionConfig, category: "Types", navigationPath: "peer-types" },
+    { config: mention_configs_1.userMentionConfig, category: "Users", navigationPath: "contacts" },
+];
 function GlobalSearch() {
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
     const [packages] = (0, hooks_1.useObservable)(routes_loader_1.allPackages);
-    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)("");
     const [searchResults, setSearchResults] = (0, react_1.useState)([]);
     const [appResults, setAppResults] = (0, react_1.useState)([]);
     const [isSearching, setIsSearching] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
-    const isDark = _colorMode === 'dark';
+    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.valueTypeMentionConfig, category: 'Types', navigationPath: 'peer-types' },
-        { config: mention_configs_1.userMentionConfig, category: 'Users', navigationPath: 'profile' },
-    ];
     // Get all apps (system and user)
-    const getAllApps = () => {
+    const getAllApps = (0, react_1.useCallback)(() => {
         const allPackages_ = [...packages, system_apps_1.systemPackage];
         return allPackages_
-            .filter(p => !p.disabled && p.appNavs && p.appNavs.length > 0)
-            .flatMap(pkg => pkg.appNavs.map(navItem => {
-            // Construct path - use direct path for system apps, package-nav for others
-            let path;
-            if (pkg.packageId === 'system-apps') {
-                path = navItem.navigationPath ?? navItem.name.replace(/\s/g, '-').toLowerCase();
-            }
-            else {
-                path = `package-nav/${pkg.packageId}/${(navItem.navigationPath ?? navItem.name).replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}`;
-                while (path.includes('//')) {
-                    path = path.replace('//', '/');
+            .filter((p) => !p.disabled && p.appNavs && p.appNavs.length > 0)
+            .flatMap((pkg) => {
+            const navs = pkg.appNavs;
+            if (!navs?.length)
+                return [];
+            return navs.map((navItem) => {
+                // Construct path - use direct path for system apps, package-nav for others
+                let path;
+                if (pkg.packageId === "system-apps") {
+                    path = navItem.navigationPath ?? navItem.name.replace(/\s/g, "-").toLowerCase();
                 }
-            }
-            return {
-                packageId: pkg.packageId,
-                packageName: pkg.name,
-                navItem,
-                path,
-                name: navItem.name,
-                displayName: navItem.displayName || navItem.name,
-                iconClassName: navItem.iconClassName || 'bi-box-seam'
-            };
-        }));
-    };
+                else {
+                    path = `package-nav/${pkg.packageId}/${(navItem.navigationPath ?? navItem.name).replace(/[^a-zA-Z0-9]/g, "-").toLowerCase()}`;
+                    while (path.includes("//")) {
+                        path = path.replace("//", "/");
+                    }
+                }
+                return {
+                    packageId: pkg.packageId,
+                    packageName: pkg.name,
+                    navItem,
+                    path,
+                    name: navItem.name,
+                    displayName: navItem.displayName || navItem.name,
+                    iconClassName: navItem.iconClassName || "bi-box-seam",
+                };
+            });
+        });
+    }, [packages]);
     // Debounced search effect
     (0, react_1.useEffect)(() => {
         if (!searchQuery.trim()) {
@@ -122,7 +94,7 @@ function GlobalSearch() {
                 // Search apps
                 const allApps = getAllApps();
                 const lowerQuery = searchQuery.toLowerCase();
-                const filteredApps = allApps.filter(app => app.name.toLowerCase().includes(lowerQuery) ||
+                const filteredApps = allApps.filter((app) => app.name.toLowerCase().includes(lowerQuery) ||
                     app.displayName.toLowerCase().includes(lowerQuery) ||
                     app.packageName.toLowerCase().includes(lowerQuery));
                 setAppResults(filteredApps);
@@ -132,127 +104,77 @@ function GlobalSearch() {
             }
         }, 300); // 300ms debounce
         return () => clearTimeout(timeoutId);
-    }, [searchQuery, packages]);
+    }, [searchQuery, getAllApps]);
     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;
+        // Detail route under the same system app as list (e.g. tools/:id, contacts/:userId).
+        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}`);
-            }
+            (0, tabs_state_1.goToTabPath)(`${configPath}/${item.id}`);
         }
     };
     const handleAppClick = (app) => {
         (0, tabs_state_1.goToTabPath)(app.path);
     };
     const totalResults = searchResults.reduce((sum, result) => sum + result.items.length, 0) + appResults.length;
-    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 apps, tools, assistants, workflows, 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' : ''}`) : searchQuery.trim() ? ('No results found') : null))),
-        searchQuery && !isSearching && (react_1.default.createElement("div", null, searchResults.length === 0 && appResults.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,
-            appResults.length > 0 && (react_1.default.createElement("div", { className: "mb-5" },
-                react_1.default.createElement("div", { className: "d-flex align-items-center mb-3" },
-                    react_1.default.createElement("i", { className: "bi-grid-3x3-gap me-3", style: { fontSize: '20px', color: '#6c757d' } }),
-                    react_1.default.createElement("h4", { className: "mb-0 me-3" }, "Apps"),
-                    react_1.default.createElement("span", { className: "badge bg-secondary" }, appResults.length)),
-                react_1.default.createElement("div", { className: "row g-3" }, appResults.map((app) => (react_1.default.createElement("div", { key: `${app.packageId}-${app.path}`, 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: () => handleAppClick(app), 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: `${app.iconClassName} 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" }, app.displayName),
-                                    react_1.default.createElement("small", { className: "text-muted text-uppercase", style: { fontSize: '11px', letterSpacing: '0.5px' } }, app.packageId === 'system-apps' ? 'System App' : app.packageName)),
-                                react_1.default.createElement("i", { className: "bi-arrow-right text-muted", style: { fontSize: '12px' } })))))))))),
-            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 apps, tools, assistants, workflows, 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))))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid h-100 p-4", style: { maxHeight: "100vh", overflowY: "auto" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsxs)("h1", { className: "h3 mb-3 d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search me-3" }), "Search Everything"] }), (0, jsx_runtime_1.jsxs)("div", { className: "position-relative", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search position-absolute", style: {
+                                    left: "16px",
+                                    top: "50%",
+                                    transform: "translateY(-50%)",
+                                    color: "#6c757d",
+                                    zIndex: 1,
+                                    fontSize: "18px",
+                                } }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", className: `form-control form-control-lg ${isDark ? "bg-dark text-light border-secondary" : ""}`, placeholder: "Search across apps, tools, assistants, workflows, 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 && ((0, jsx_runtime_1.jsx)("div", { className: "position-absolute", style: {
+                                    right: "16px",
+                                    top: "50%",
+                                    transform: "translateY(-50%)",
+                                }, children: (0, jsx_runtime_1.jsx)("div", { className: "spinner-border spinner-border-sm text-muted" }) }))] }), searchQuery && ((0, jsx_runtime_1.jsx)("div", { className: "mt-3 text-muted small", children: isSearching
+                            ? "Searching..."
+                            : totalResults > 0
+                                ? `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: {
+                                                cursor: "pointer",
+                                                transition: "all 0.15s ease",
+                                                borderRadius: "8px",
+                                            }, onClick: () => handleAppClick(app), 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";
+                                            }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-start", children: [(0, jsx_runtime_1.jsx)("i", { className: `${app.iconClassName} me-3 mt-1`, style: {
+                                                                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: {
+                                                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";
+                                            }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-start", children: [(0, jsx_runtime_1.jsx)("i", { className: `${result.config.iconClass} me-3 mt-1`, style: {
+                                                                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))) })] }))] }));
 }

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

@@ -1,6 +1,5 @@
-import React from 'react';
-export type ColorModePreference = 'light' | 'dark' | 'auto';
-export type ColorMode = 'light' | 'dark';
+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;
+export declare const ColorModeDropdown: () => import("react/jsx-runtime").JSX.Element;