@peers-app/peers-ui 0.0.14

package/dist/components/typeahead/typeahead-editor.js

@@ -0,0 +1,134 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypeaheadEditor = TypeaheadEditor;
+const code_1 = require("@lexical/code");
+const link_1 = require("@lexical/link");
+const list_1 = require("@lexical/list");
+const LexicalAutoFocusPlugin_1 = require("@lexical/react/LexicalAutoFocusPlugin");
+const LexicalComposer_1 = require("@lexical/react/LexicalComposer");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const LexicalContentEditable_1 = require("@lexical/react/LexicalContentEditable");
+const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
+const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
+const LexicalRichTextPlugin_1 = require("@lexical/react/LexicalRichTextPlugin");
+const rich_text_1 = require("@lexical/rich-text");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const lexical_1 = require("lexical");
+const react_1 = __importStar(require("react"));
+const markdown_plugin_1 = require("../markdown-editor/markdown-plugin");
+const mention_node_1 = require("../markdown-editor/mention-node");
+const theme_1 = __importDefault(require("../markdown-editor/theme"));
+const mentions_plugin_1 = require("./mentions-plugin");
+const mention_configs_1 = require("../../mention-configs");
+const editorConfig = {
+    namespace: 'PeersEditor',
+    nodes: [
+        rich_text_1.HeadingNode,
+        rich_text_1.QuoteNode,
+        code_1.CodeNode,
+        list_1.ListNode,
+        list_1.ListItemNode,
+        mention_node_1.MentionNode,
+        link_1.AutoLinkNode,
+        link_1.LinkNode,
+    ],
+    // Handling of errors during update
+    onError(error) {
+        throw error;
+    },
+    // The editor theme
+    theme: theme_1.default,
+};
+function TypeaheadEditor(props) {
+    const { effects } = props;
+    const editorRef = react_1.default.useRef(null);
+    const [mentionsOpen] = (0, react_1.useState)(() => {
+        const obs = (0, peers_sdk_1.observable)(false);
+        return obs;
+    });
+    if (effects) {
+        effects.focus = () => {
+            if (editorRef.current?.children[0]) {
+                const div = editorRef.current.children[0];
+                setTimeout(() => {
+                    div.focus();
+                    // Set the selection to the end of the div content
+                    const range = document.createRange();
+                    range.selectNodeContents(div);
+                    range.collapse(false);
+                    const selection = window.getSelection();
+                    if (selection) {
+                        selection.removeAllRanges();
+                        selection.addRange(range);
+                    }
+                }, 10);
+            }
+        };
+    }
+    const _mentionConfigs = props.mentionConfigs ?? mention_configs_1.mentionConfigs;
+    return (react_1.default.createElement("div", { className: "border rounded border-dark-subtle" },
+        react_1.default.createElement(LexicalComposer_1.LexicalComposer, { initialConfig: { ...editorConfig } },
+            react_1.default.createElement("div", { className: "editor-container" },
+                react_1.default.createElement("div", { className: "editor-inner", ref: editorRef, style: { maxHeight: props.maxHeight ?? 30, overflowY: 'hidden' } },
+                    react_1.default.createElement(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: react_1.default.createElement(LexicalContentEditable_1.ContentEditable, { className: "editor-input p-1" }), 
+                        // placeholder={(isEditable) => !isEditable ? <div className="text-muted">Type here...</div> : null}
+                        ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }),
+                    react_1.default.createElement(LexicalHistoryPlugin_1.HistoryPlugin, null),
+                    props.autoFocus && react_1.default.createElement(LexicalAutoFocusPlugin_1.AutoFocusPlugin, { defaultSelection: 'rootEnd' }),
+                    _mentionConfigs.length > 0 && (react_1.default.createElement(mentions_plugin_1.MentionsPlugin, { mentionConfigs: _mentionConfigs, mentionsOpen: mentionsOpen })),
+                    react_1.default.createElement(markdown_plugin_1.MarkdownPlugin, { markdownObs: props.value }),
+                    react_1.default.createElement(OnKeyDownPlugin, { effects: props.effects, mentionsOpen: mentionsOpen }))))));
+}
+const OnKeyDownPlugin = (props) => {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    (0, react_1.useEffect)(() => {
+        const removeListener = editor.registerCommand(lexical_1.KEY_DOWN_COMMAND, (event) => {
+            if (props.mentionsOpen()) {
+                return false;
+            }
+            if (props.effects?.onKeyDown) {
+                const result = props.effects.onKeyDown(event);
+                return !!result;
+            }
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW);
+        return removeListener;
+    }, [editor]);
+    return null;
+};

package/dist/components/typeahead/typeahead.d.ts

@@ -0,0 +1,12 @@
+import { Observable } from "@peers-app/peers-sdk";
+import React from 'react';
+import { IMentionConfig } from '../../mention-configs';
+interface IProps<T> {
+    value: Observable<string> | Observable<string | undefined>;
+    textValue?: Observable<string>;
+    mentionConfigs: IMentionConfig[];
+    autoFocus?: boolean;
+    onSubmit?: (value: string, textValue: string) => void;
+}
+export declare function Typeahead<T>(props: IProps<T>): React.JSX.Element;
+export {};

package/dist/components/typeahead/typeahead.js

@@ -0,0 +1,94 @@
+"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.Typeahead = Typeahead;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../hooks");
+const typeahead_editor_1 = require("./typeahead-editor");
+function Typeahead(props) {
+    const { value: sourceValue } = props;
+    // const typeaheadValue = useObservableState('', true);
+    const [typeaheadValue] = (0, react_1.useState)(() => {
+        if (props.textValue) {
+            return props.textValue;
+        }
+        else {
+            return (0, peers_sdk_1.observable)('');
+        }
+    });
+    (0, hooks_1.useObservable)(typeaheadValue);
+    const existingMention = (0, hooks_1.usePromise)(async () => {
+        const id = sourceValue();
+        if (!id)
+            return true;
+        for (const config of props.mentionConfigs) {
+            const refValue = await config.getById(id);
+            if (refValue) {
+                typeaheadValue((0, peers_sdk_1.formatMention)({ kind: config.kind, id, name: refValue.name }) + ' ');
+                return true;
+            }
+        }
+        return true;
+    });
+    (0, hooks_1.useSubscription)(typeaheadValue, () => {
+        const mentions = (0, peers_sdk_1.getAllMentions)(typeaheadValue());
+        const resolvedMention = mentions.find(m => m.id !== sourceValue()) || mentions[0];
+        const resolvedId = resolvedMention?.id;
+        if (resolvedId !== sourceValue() || mentions.length > 1) {
+            sourceValue(resolvedId);
+            if (resolvedId) {
+                const newTypeaheadValue = (0, peers_sdk_1.formatMention)(resolvedMention) + ' ';
+                typeaheadValue(newTypeaheadValue);
+            }
+        }
+    }, true);
+    if (!existingMention) {
+        return react_1.default.createElement("div", null, "...");
+    }
+    return (react_1.default.createElement(typeahead_editor_1.TypeaheadEditor, { value: typeaheadValue, mentionConfigs: props.mentionConfigs, autoFocus: props.autoFocus, 
+        // these settings configure it for a single line input
+        effects: {
+            onKeyDown(e) {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if (props.onSubmit) {
+                        props.onSubmit(sourceValue() ?? '', typeaheadValue());
+                    }
+                    return true;
+                }
+            },
+        } }));
+}

package/dist/components/typeahead.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface TypeaheadItem {
+    id: string;
+    [key: string]: any;
+}
+interface TypeaheadProps<T extends TypeaheadItem> {
+    placeholder?: string;
+    searchFn: (query: string) => Promise<T[]>;
+    onSelectionChange: (selectedItems: T[]) => void;
+    renderItem: (item: T, isSelected: boolean) => React.ReactNode;
+    renderBadge?: (item: T) => React.ReactNode;
+    selectedItems?: T[];
+    multiSelect?: boolean;
+    maxSelections?: number;
+    className?: string;
+    disabled?: boolean;
+    minSearchLength?: number;
+    debounceMs?: number;
+    maxResults?: number;
+}
+export declare function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>): React.JSX.Element;
+export {};

package/dist/components/typeahead.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.Typeahead = Typeahead;
+const react_1 = __importStar(require("react"));
+// CSS for hover effects that work with both light and dark themes
+const typeaheadStyles = `
+  .typeahead-item:not(.bg-primary):hover {
+    background-color: var(--bs-secondary-bg) !important;
+  }
+  
+  [data-bs-theme="dark"] .typeahead-item:not(.bg-primary):hover {
+    background-color: var(--bs-dark) !important;
+  }
+
+  .typeahead-input-container {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height: 38px;
+    border: 1px solid var(--bs-border-color);
+    border-radius: 0.375rem;
+    background-color: var(--bs-body-bg);
+    padding: 4px 8px;
+    gap: 4px;
+  }
+
+  .typeahead-input-container:focus-within {
+    border-color: #86b7fe;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  }
+
+  .typeahead-input {
+    border: none;
+    outline: none;
+    background: transparent;
+    flex: 1;
+    min-width: 120px;
+    height: 30px;
+    font-size: 1rem;
+    color: var(--bs-body-color);
+  }
+
+  .typeahead-input::placeholder {
+    color: var(--bs-secondary-color);
+  }
+
+  .typeahead-badge {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.8rem;
+    padding: 2px 8px;
+    margin: 1px;
+    white-space: nowrap;
+  }
+`;
+function Typeahead(props) {
+    const { placeholder = "Search...", searchFn, onSelectionChange, renderItem, renderBadge, selectedItems = [], multiSelect = false, maxSelections, className = "form-control", disabled = false, minSearchLength = 1, debounceMs = 300, maxResults = 10 } = props;
+    const [query, setQuery] = (0, react_1.useState)('');
+    const [results, setResults] = (0, react_1.useState)([]);
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(-1);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const resultsRef = (0, react_1.useRef)(null);
+    const debounceRef = (0, react_1.useRef)();
+    // Inject styles once
+    (0, react_1.useEffect)(() => {
+        const styleId = 'typeahead-styles';
+        if (!document.getElementById(styleId)) {
+            const style = document.createElement('style');
+            style.id = styleId;
+            style.textContent = typeaheadStyles;
+            document.head.appendChild(style);
+        }
+    }, []);
+    // Debounced search
+    (0, react_1.useEffect)(() => {
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        if (query.length >= minSearchLength) {
+            debounceRef.current = setTimeout(async () => {
+                setIsLoading(true);
+                try {
+                    const searchResults = await searchFn(query);
+                    // Filter out already selected items
+                    const selectedIds = selectedItems.map(item => item.id);
+                    const filteredResults = searchResults.filter(item => !selectedIds.includes(item.id));
+                    setResults(filteredResults.slice(0, maxResults));
+                    setIsOpen(filteredResults.length > 0);
+                    setSelectedIndex(-1);
+                }
+                catch (error) {
+                    console.error('Search error:', error);
+                    setResults([]);
+                }
+                finally {
+                    setIsLoading(false);
+                }
+            }, debounceMs);
+        }
+        else {
+            setResults([]);
+            setIsOpen(false);
+            setSelectedIndex(-1);
+        }
+        return () => {
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+        };
+    }, [query, searchFn, minSearchLength, debounceMs, maxResults, selectedItems]);
+    // Click outside to close
+    (0, react_1.useEffect)(() => {
+        function handleClickOutside(event) {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setSelectedIndex(-1);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const handleKeyDown = (e) => {
+        // Handle backspace to remove last selected item when input is empty
+        if (e.key === 'Backspace' && query === '' && selectedItems.length > 0) {
+            e.preventDefault();
+            const lastItem = selectedItems[selectedItems.length - 1];
+            handleRemove(lastItem);
+            return;
+        }
+        // Handle tab to auto-select highlighted result (or first result if none highlighted)
+        if (e.key === 'Tab' && isOpen && results.length > 0) {
+            e.preventDefault();
+            const indexToSelect = selectedIndex >= 0 ? selectedIndex : 0;
+            handleSelect(results[indexToSelect]);
+            return;
+        }
+        if (!isOpen || results.length === 0)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setSelectedIndex(prev => prev < results.length - 1 ? prev + 1 : 0);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setSelectedIndex(prev => prev > 0 ? prev - 1 : results.length - 1);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (selectedIndex >= 0 && selectedIndex < results.length) {
+                    handleSelect(results[selectedIndex]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setIsOpen(false);
+                setSelectedIndex(-1);
+                inputRef.current?.blur();
+                break;
+        }
+    };
+    const handleSelect = (item) => {
+        if (maxSelections && selectedItems.length >= maxSelections) {
+            return; // Don't allow selection beyond max
+        }
+        let newSelectedItems;
+        if (multiSelect) {
+            // Add to existing selections
+            newSelectedItems = [...selectedItems, item];
+        }
+        else {
+            // Replace existing selection
+            newSelectedItems = [item];
+        }
+        onSelectionChange(newSelectedItems);
+        setQuery('');
+        setResults([]);
+        setIsOpen(false);
+        setSelectedIndex(-1);
+        inputRef.current?.focus();
+    };
+    const handleRemove = (itemToRemove) => {
+        const newSelectedItems = selectedItems.filter(item => item.id !== itemToRemove.id);
+        onSelectionChange(newSelectedItems);
+        inputRef.current?.focus();
+    };
+    const defaultRenderBadge = (item) => {
+        // Extract display text - try common properties
+        const displayText = item.name || item.title || item.label || item.id;
+        return displayText;
+    };
+    const handleInputChange = (e) => {
+        setQuery(e.target.value);
+    };
+    const handleInputFocus = () => {
+        if (results.length > 0) {
+            setIsOpen(true);
+        }
+    };
+    return (react_1.default.createElement("div", { ref: containerRef, className: "position-relative" },
+        react_1.default.createElement("div", { className: "typeahead-input-container", onClick: () => inputRef.current?.focus() },
+            selectedItems.map((item) => (react_1.default.createElement("div", { key: item.id, className: "badge bg-primary typeahead-badge d-flex align-items-center position-relative pe-4" },
+                react_1.default.createElement("span", null, renderBadge ? renderBadge(item) : defaultRenderBadge(item)),
+                react_1.default.createElement("button", { type: "button", className: "btn-close btn-close-white position-absolute", style: {
+                        right: '2px',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        fontSize: '0.5rem',
+                        width: '10px',
+                        height: '10px'
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        handleRemove(item);
+                    }, disabled: disabled, "aria-label": "Remove" })))),
+            react_1.default.createElement("input", { ref: inputRef, type: "text", className: "typeahead-input", placeholder: selectedItems.length > 0 && !multiSelect ? "Selection made" : placeholder, value: query, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, disabled: disabled || (!multiSelect && selectedItems.length > 0) }),
+            isLoading && (react_1.default.createElement("div", { className: "position-absolute", style: {
+                    right: '8px',
+                    top: '50%',
+                    transform: 'translateY(-50%)'
+                } },
+                react_1.default.createElement("div", { className: "spinner-border spinner-border-sm text-secondary", role: "status" },
+                    react_1.default.createElement("span", { className: "visually-hidden" }, "Loading..."))))),
+        isOpen && results.length > 0 && (react_1.default.createElement("div", { ref: resultsRef, className: "position-absolute w-100 bg-body border border-top-0 rounded-bottom shadow-lg", style: {
+                zIndex: 1000,
+                maxHeight: '300px',
+                overflowY: 'auto'
+            } }, results.map((item, index) => (react_1.default.createElement("div", { key: item.id, className: `px-3 py-2 border-bottom typeahead-item ${index === selectedIndex
+                ? 'bg-primary text-white'
+                : 'bg-body text-body'}`, style: {
+                cursor: 'pointer'
+            }, onClick: () => handleSelect(item), onMouseEnter: () => setSelectedIndex(index) }, renderItem(item, index === selectedIndex)))))),
+        isOpen && query.length >= minSearchLength && results.length === 0 && !isLoading && (react_1.default.createElement("div", { className: "position-absolute w-100 bg-body border border-top-0 rounded-bottom shadow-lg px-3 py-2 text-muted", style: { zIndex: 1000 } }, "No results found"))));
+}

package/dist/globals.d.ts

@@ -0,0 +1,29 @@
+import { IMessage, IUser, groupUserVar } from "@peers-app/peers-sdk";
+export declare const packageReloaded: import("@peers-app/peers-sdk").Observable<number>;
+export declare const _mainContentPath: import("@peers-app/peers-sdk").PersistentVar<string>;
+export declare const mainContentPath: import("@peers-app/peers-sdk").Observable<string>;
+export declare const queryParams: import("@peers-app/peers-sdk").Observable<{
+    [key: string]: string;
+}>;
+export declare function queryParam(name: string, value?: string): string;
+export declare const openThreads: ReturnType<typeof groupUserVar<(string | IMessage)[]>>;
+export declare const threadViewOpen: import("@peers-app/peers-sdk").PersistentVar<boolean>;
+export declare function openThread(thread: string | IMessage): Promise<void>;
+export declare function openThreadInTab(thread: string | IMessage): Promise<void>;
+export declare let me: IUser;
+export declare const windowWidth: import("@peers-app/peers-sdk").Observable<number>;
+export declare const windowHeight: import("@peers-app/peers-sdk").Observable<number>;
+export declare const isDesktop: import("@peers-app/peers-sdk").Observable<boolean>;
+export declare const groups: import("@peers-app/peers-sdk").Observable<{
+    name: string;
+    description: string;
+    signature: string;
+    publicKey: string;
+    groupId: string;
+    founderUserId: string;
+    publicBoxKey: string;
+    disabled?: boolean | undefined;
+    iconClassName?: string | undefined;
+    publicRole?: import("@peers-app/peers-sdk").GroupMemberRole | undefined;
+}[]>;
+export declare function loadGlobals(): Promise<boolean>;