@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/screens/variables/variable-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.VariableDetails = 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 checkbox_1 = require("../../components/checkbox");
 const input_1 = require("../../components/input");
 const loading_indicator_1 = require("../../components/loading-indicator");
@@ -48,7 +16,7 @@ const VariableDetails = (props) => {
     const persistentVariable = (0, hooks_1.usePromise)(async () => {
         const persistentVariable = await (0, peers_sdk_1.PersistentVars)().get(props.persistentVarId);
         if (!persistentVariable) {
-            throw new Error('Variable not found');
+            throw new Error("Variable not found");
         }
         (0, tabs_state_1.updateActiveTabTitle)(persistentVariable.name || "Variable");
         return (0, peers_sdk_1.PersistentVars)().initDoc(persistentVariable);
@@ -57,65 +25,35 @@ const VariableDetails = (props) => {
         if (!persistentVariable)
             return;
         const sub = persistentVariable.qs.name.subscribe(() => {
-            persistentVariable.name = persistentVariable.qs.name().replaceAll(/\s/g, '_').replaceAll(/[^a-zA-Z0-9_-]/g, '');
+            persistentVariable.name = persistentVariable.qs
+                .name()
+                .replaceAll(/\s/g, "_")
+                .replaceAll(/[^a-zA-Z0-9_-]/g, "");
         });
         return () => {
             sub.dispose();
         };
     }, [persistentVariable]);
     if (!persistentVariable) {
-        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: `${(0, peers_sdk_1.getIconClassName)((0, peers_sdk_1.PersistentVars)())} 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: persistentVariable.persistentVarId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: persistentVariable.qs.name }))),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(save_button_1.SaveButton, { key: persistentVariable.persistentVarId, doc: persistentVariable }))),
-        react_1.default.createElement(tabs_1.Tabs, { key: persistentVariable.persistentVarId, tabs: [
-                {
-                    name: 'Info', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
-                        react_1.default.createElement(VariableInfo, { persistentVariable: persistentVariable }))
-                },
-            ] })));
+    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: `${(0, peers_sdk_1.getIconClassName)((0, peers_sdk_1.PersistentVars)())} 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: persistentVariable.qs.name }, persistentVariable.persistentVarId) }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { doc: persistentVariable }, persistentVariable.persistentVarId) })] }), (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, { persistentVariable: persistentVariable }) })),
+                    },
+                ] }, persistentVariable.persistentVarId)] }));
 };
 exports.VariableDetails = VariableDetails;
 const VariableInfo = (props) => {
     const { persistentVariable: pvar } = props;
-    pvar.description = pvar.description || '';
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("small", null, "Name:"),
-        react_1.default.createElement(input_1.Input, { value: pvar.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Variable name", title: "Variable name" }),
-        react_1.default.createElement("div", { className: "d-flex flex-row" },
-            react_1.default.createElement(VariableScope, { pvar: pvar }),
-            react_1.default.createElement("div", { className: "ms-2" },
-                react_1.default.createElement("label", { className: "form-label small mt-2 me-2" }, "Is Secret:"),
-                react_1.default.createElement(checkbox_1.Checkbox, { className: "form-check-input mt-2", checked: pvar.qs.isSecret }))),
-        react_1.default.createElement("br", null),
-        react_1.default.createElement(VariableValue, { pvar: pvar }),
-        react_1.default.createElement("small", { className: "mt-2" }, "Description:"),
-        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: pvar.qs.description })));
+    pvar.description = pvar.description || "";
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("small", { children: "Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: pvar.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Variable name", title: "Variable name" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex flex-row", children: [(0, jsx_runtime_1.jsx)(VariableScope, { pvar: pvar }), (0, jsx_runtime_1.jsxs)("div", { className: "ms-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small mt-2 me-2", children: "Is Secret:" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "form-check-input mt-2", checked: pvar.qs.isSecret })] })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(VariableValue, { pvar: pvar }), (0, jsx_runtime_1.jsx)("small", { className: "mt-2", children: "Description:" }), (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: pvar.qs.description })] }));
 };
 const VariableScope = (props) => {
     const { pvar } = props;
     const [scope, setScope] = (0, hooks_1.useObservable)(pvar.qs.scope);
-    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" },
-            "Scope: ",
-            (0, peers_sdk_1.camelCaseToSpaces)(scope)),
-        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: () => setScope('device') },
-                    "Device ",
-                    scope === 'device' && '✓')),
-            react_1.default.createElement("li", null,
-                react_1.default.createElement("button", { className: "dropdown-item", onClick: () => setScope('user') },
-                    "User ",
-                    scope === 'user' && '✓')))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "dropdown", children: [(0, jsx_runtime_1.jsxs)("button", { className: "btn btn-secondary dropdown-toggle", type: "button", id: "colorModeDropdown", "data-bs-toggle": "dropdown", "aria-expanded": "false", children: ["Scope: ", (0, peers_sdk_1.camelCaseToSpaces)(scope)] }), (0, jsx_runtime_1.jsxs)("ul", { className: "dropdown-menu", "aria-labelledby": "colorModeDropdown", children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item", onClick: () => setScope("device"), children: ["Device ", scope === "device" && "✓"] }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item", onClick: () => setScope("user"), children: ["User ", scope === "user" && "✓"] }) })] })] }));
 };
 const VariableValue = (props) => {
     const { pvar } = props;
@@ -129,12 +67,7 @@ const VariableValue = (props) => {
         pvar.value = { value };
     });
     if (isSecret) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("small", null, "Value:"),
-            react_1.default.createElement(input_1.Input, { value: scalarValue, type: "password", className: "form-control mb-3 p-0 ps-2", placeholder: "Variable value", title: "Variable value" })));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("small", { children: "Value:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: scalarValue, type: "password", className: "form-control mb-3 p-0 ps-2", placeholder: "Variable value", title: "Variable value" })] }));
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("small", null, "Value:"),
-        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: scalarValue, hideToolbar: true }),
-        react_1.default.createElement("br", null)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("small", { children: "Value:" }), (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: scalarValue, hideToolbar: true }), (0, jsx_runtime_1.jsx)("br", {})] }));
 };

package/dist/screens/variables/variable-list.d.ts

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

package/dist/screens/variables/variable-list.js

@@ -1,26 +1,23 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VariableList = VariableList;
-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 VariableList() {
     async function newRecord(name) {
         const userContext = await (0, peers_sdk_1.getUserContext)();
         const isPersonal = userContext.currentlyActiveGroupId() === userContext.userId;
-        const varName = name.replace(/\s+/g, '_');
+        const varName = name.replace(/\s+/g, "_");
         const pVar = await (0, peers_sdk_1.PersistentVars)().save({
             persistentVarId: (0, peers_sdk_1.newid)(),
             name: varName,
-            scope: isPersonal ? 'user' : 'group',
-            description: '',
-            value: { value: '' },
+            scope: isPersonal ? "user" : "group",
+            description: "",
+            value: { value: "" },
             userCreated: true,
         });
         (0, globals_1.mainContentPath)(`variables/${pVar.persistentVarId}`);
@@ -28,31 +25,23 @@ function VariableList() {
     }
     function getFilter(searchText) {
         return {
-            $or: [
-                { name: { $matchWords: searchText } },
-                { description: { $matchWords: searchText } },
-            ],
-            userCreated: true
+            $or: [{ name: { $matchWords: searchText } }, { description: { $matchWords: searchText } }],
+            userCreated: true,
         };
     }
     function renderItem(persistentVar) {
-        return (react_1.default.createElement("div", { key: persistentVar.persistentVarId, className: 'container-fluid pb-4' },
-            react_1.default.createElement("i", { className: (0, peers_sdk_1.getIconClassName)((0, peers_sdk_1.PersistentVars)()) }),
-            "\u00A0",
-            react_1.default.createElement("a", { href: `#variables/${persistentVar.persistentVarId}` }, persistentVar.name || '<empty-name>'),
-            react_1.default.createElement("div", { style: { paddingLeft: '20px' } },
-                react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: persistentVar.description || '' }))));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid pb-4", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, peers_sdk_1.getIconClassName)((0, peers_sdk_1.PersistentVars)()) }), "\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `#variables/${persistentVar.persistentVarId}`, children: persistentVar.name || "<empty-name>" }), (0, jsx_runtime_1.jsx)("div", { style: { paddingLeft: "20px" }, children: (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: persistentVar.description || "" }) })] }, persistentVar.persistentVarId));
     }
-    return (react_1.default.createElement(list_screen_1.ListScreen, { table: (0, peers_sdk_1.PersistentVars)(), newRecord: newRecord, getFilter: getFilter, sortBy: ['name'], renderItem: renderItem, placeholderName: "environment variable" }));
+    return ((0, jsx_runtime_1.jsx)(list_screen_1.ListScreen, { table: (0, peers_sdk_1.PersistentVars)(), newRecord: newRecord, getFilter: getFilter, sortBy: ["name"], renderItem: renderItem, placeholderName: "environment variable" }));
 }
 (0, ui_loader_1.registerInternalPeersUI)({
-    peersUIId: '00m5fshz2g6ea23v8z6y0a1ci',
+    peersUIId: "00m5fshz2g6ea23v8z6y0a1ci",
     component: VariableList,
     routes: [
         {
-            isMatch: (props, context) => context.path === 'variables',
-            uiCategory: 'screen',
-            priority: 2
-        }
-    ]
+            isMatch: (_props, context) => context.path === "variables",
+            uiCategory: "screen",
+            priority: 2,
+        },
+    ],
 });

package/dist/screens/welcome-modal.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 interface WelcomeModalProps {
     colorMode: string;
     onClose: () => void;
 }
-export declare function WelcomeModal({ colorMode, onClose }: WelcomeModalProps): React.JSX.Element | null;
+export declare function WelcomeModal({ colorMode, onClose }: WelcomeModalProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/screens/welcome-modal.js

@@ -1,49 +1,17 @@
 "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.WelcomeModal = WelcomeModal;
+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 hooks_1 = require("../hooks");
 function WelcomeModal({ colorMode, onClose }) {
-    const [displayName, setDisplayName] = (0, react_1.useState)('');
-    const [deviceName, setDeviceName] = (0, react_1.useState)('');
+    const [displayName, setDisplayName] = (0, react_1.useState)("");
+    const [deviceName, setDeviceName] = (0, react_1.useState)("");
     const [isSaving, setIsSaving] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
     const [deviceId] = (0, hooks_1.useObservable)(peers_sdk_1.thisDeviceId);
-    const isDark = colorMode === 'dark';
+    const isDark = colorMode === "dark";
     // Load current user data
     const me = (0, hooks_1.usePromise)(async () => (0, peers_sdk_1.getMe)());
     // Pre-populate with existing values if any
@@ -64,7 +32,7 @@ function WelcomeModal({ colorMode, onClose }) {
                 }
             }
             catch (err) {
-                console.error('Error loading device name:', err);
+                console.error("Error loading device name:", err);
             }
         };
         loadDeviceName();
@@ -82,7 +50,7 @@ function WelcomeModal({ colorMode, onClose }) {
             // Save device name
             if (deviceId && deviceName.trim()) {
                 const devicesTable = (0, peers_sdk_1.Devices)(userContext.userDataContext);
-                const device = await devicesTable.get(deviceId) || {
+                const device = (await devicesTable.get(deviceId)) || {
                     deviceId,
                     userId: userContext.userId,
                     firstSeen: new Date(),
@@ -97,8 +65,8 @@ function WelcomeModal({ colorMode, onClose }) {
             onClose();
         }
         catch (err) {
-            console.error('Error saving profile:', err);
-            setError(err.message || 'Failed to save. Please try again.');
+            console.error("Error saving profile:", err);
+            setError(err instanceof Error ? err.message : "Failed to save. Please try again.");
             setIsSaving(false);
         }
     };
@@ -108,86 +76,51 @@ function WelcomeModal({ colorMode, onClose }) {
         onClose();
     };
     const handleKeyDown = (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
+        if (e.key === "Enter" && !e.shiftKey) {
             e.preventDefault();
             handleSave();
         }
-        else if (e.key === 'Escape') {
+        else if (e.key === "Escape") {
             handleSkip();
         }
     };
     if (!me) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: "position-fixed w-100 h-100 d-flex align-items-start justify-content-center", style: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed w-100 h-100 d-flex align-items-start justify-content-center", style: {
             top: 0,
             left: 0,
             zIndex: 1050,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            backdropFilter: 'blur(4px)',
-            paddingTop: '10vh'
-        } },
-        react_1.default.createElement("div", { className: `${isDark ? 'bg-dark text-light' : 'bg-white text-dark'}`, style: {
-                width: '90%',
-                maxWidth: '500px',
-                borderRadius: '12px',
-                boxShadow: isDark
-                    ? '0 20px 40px rgba(0, 0, 0, 0.5)'
-                    : '0 20px 40px rgba(0, 0, 0, 0.1)',
-                border: isDark ? '1px solid #495057' : '1px solid #dee2e6',
-                overflow: 'hidden'
-            } },
-            react_1.default.createElement("div", { className: "p-4 text-center", style: {
-                    borderBottom: `1px solid ${isDark ? '#495057' : '#dee2e6'}`
-                } },
-                react_1.default.createElement("i", { className: "bi-person-circle text-primary d-block mb-3", style: { fontSize: '48px' } }),
-                react_1.default.createElement("h4", { className: "mb-2" }, "Welcome to Peers!"),
-                react_1.default.createElement("p", { className: `mb-0 ${isDark ? 'text-light opacity-75' : 'text-muted'}`, style: { fontSize: '14px' } }, "Let's personalize your experience. You can change these anytime in Settings.")),
-            react_1.default.createElement("div", { className: "p-4" },
-                error && (react_1.default.createElement("div", { className: "alert alert-danger py-2 px-3 mb-3", style: { fontSize: '14px' } },
-                    react_1.default.createElement("i", { className: "bi-exclamation-triangle me-2" }),
-                    error)),
-                react_1.default.createElement("div", { className: "mb-3" },
-                    react_1.default.createElement("label", { className: "form-label fw-semibold mb-1" },
-                        react_1.default.createElement("i", { className: "bi-person me-2" }),
-                        "Display Name"),
-                    react_1.default.createElement("input", { type: "text", className: `form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "How should others see you?", value: displayName, onChange: (e) => {
-                            setDisplayName(e.target.value);
-                            setError(null);
-                        }, onKeyDown: handleKeyDown, autoFocus: true, disabled: isSaving, maxLength: 100, style: {
-                            fontSize: '14px',
-                            backgroundColor: isDark ? '#343a40' : '#ffffff'
-                        } }),
-                    react_1.default.createElement("small", { className: isDark ? 'text-light opacity-50' : 'text-muted', style: { fontSize: '11px' } }, "This name will be visible to others when you connect")),
-                react_1.default.createElement("div", { className: "mb-3" },
-                    react_1.default.createElement("label", { className: "form-label fw-semibold mb-1" },
-                        react_1.default.createElement("i", { className: "bi-laptop me-2" }),
-                        "Device Name"),
-                    react_1.default.createElement("input", { type: "text", className: `form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "e.g., My Laptop, Work Computer", value: deviceName, onChange: (e) => {
-                            setDeviceName(e.target.value);
-                            setError(null);
-                        }, onKeyDown: handleKeyDown, disabled: isSaving, maxLength: 100, style: {
-                            fontSize: '14px',
-                            backgroundColor: isDark ? '#343a40' : '#ffffff'
-                        } }),
-                    react_1.default.createElement("small", { className: isDark ? 'text-light opacity-50' : 'text-muted', style: { fontSize: '11px' } }, "Helps you identify this device when syncing across multiple devices"))),
-            react_1.default.createElement("div", { className: "p-3 d-flex justify-content-between align-items-center", style: {
-                    borderTop: `1px solid ${isDark ? '#495057' : '#dee2e6'}`,
-                    backgroundColor: isDark ? '#2d3238' : '#f8f9fa'
-                } },
-                react_1.default.createElement("button", { className: `btn btn-sm ${isDark ? 'btn-outline-light' : 'btn-outline-secondary'}`, onClick: handleSkip, disabled: isSaving }, "Skip for now"),
-                react_1.default.createElement("button", { className: "btn btn-sm btn-primary", onClick: handleSave, disabled: isSaving, style: { minWidth: '100px' } }, isSaving ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }),
-                    "Saving...")) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("i", { className: "bi-check-lg me-1" }),
-                    "Get Started")))),
-            react_1.default.createElement("div", { className: `px-3 py-2 small text-center ${isDark ? 'text-light opacity-50' : 'text-muted'}`, style: {
-                    borderTop: `1px solid ${isDark ? '#495057' : '#dee2e6'}`,
-                    fontSize: '11px',
-                    backgroundColor: isDark ? '#212529' : '#ffffff'
-                } },
-                react_1.default.createElement("kbd", { className: "small" }, "\u21B5"),
-                " to save \u2022 ",
-                react_1.default.createElement("kbd", { className: "small" }, "esc"),
-                " to skip"))));
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            backdropFilter: "blur(4px)",
+            paddingTop: "10vh",
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: `${isDark ? "bg-dark text-light" : "bg-white text-dark"}`, style: {
+                width: "90%",
+                maxWidth: "500px",
+                borderRadius: "12px",
+                boxShadow: isDark ? "0 20px 40px rgba(0, 0, 0, 0.5)" : "0 20px 40px rgba(0, 0, 0, 0.1)",
+                border: isDark ? "1px solid #495057" : "1px solid #dee2e6",
+                overflow: "hidden",
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 text-center", style: {
+                        borderBottom: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
+                    }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-circle text-primary d-block mb-3", style: { fontSize: "48px" } }), (0, jsx_runtime_1.jsx)("h4", { className: "mb-2", children: "Welcome to Peers!" }), (0, jsx_runtime_1.jsx)("p", { className: `mb-0 ${isDark ? "text-light opacity-75" : "text-muted"}`, style: { fontSize: "14px" }, children: "Let's personalize your experience. You can change these anytime in Settings." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4", children: [error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger py-2 px-3 mb-3", style: { fontSize: "14px" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-exclamation-triangle me-2" }), error] })), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("label", { className: "form-label fw-semibold mb-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person me-2" }), "Display Name"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, placeholder: "How should others see you?", value: displayName, onChange: (e) => {
+                                        setDisplayName(e.target.value);
+                                        setError(null);
+                                    }, onKeyDown: handleKeyDown, disabled: isSaving, maxLength: 100, style: {
+                                        fontSize: "14px",
+                                        backgroundColor: isDark ? "#343a40" : "#ffffff",
+                                    } }), (0, jsx_runtime_1.jsx)("small", { className: isDark ? "text-light opacity-50" : "text-muted", style: { fontSize: "11px" }, children: "This name will be visible to others when you connect" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("label", { className: "form-label fw-semibold mb-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-laptop me-2" }), "Device Name"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, placeholder: "e.g., My Laptop, Work Computer", value: deviceName, onChange: (e) => {
+                                        setDeviceName(e.target.value);
+                                        setError(null);
+                                    }, onKeyDown: handleKeyDown, disabled: isSaving, maxLength: 100, style: {
+                                        fontSize: "14px",
+                                        backgroundColor: isDark ? "#343a40" : "#ffffff",
+                                    } }), (0, jsx_runtime_1.jsx)("small", { className: isDark ? "text-light opacity-50" : "text-muted", style: { fontSize: "11px" }, children: "Helps you identify this device when syncing across multiple devices" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 d-flex justify-content-between align-items-center", style: {
+                        borderTop: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
+                        backgroundColor: isDark ? "#2d3238" : "#f8f9fa",
+                    }, children: [(0, jsx_runtime_1.jsx)("button", { className: `btn btn-sm ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`, onClick: handleSkip, disabled: isSaving, children: "Skip for now" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-primary", onClick: handleSave, disabled: isSaving, style: { minWidth: "100px" }, children: isSaving ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }), "Saving..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-check-lg me-1" }), "Get Started"] })) })] }), (0, jsx_runtime_1.jsxs)("div", { className: `px-3 py-2 small text-center ${isDark ? "text-light opacity-50" : "text-muted"}`, style: {
+                        borderTop: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
+                        fontSize: "11px",
+                        backgroundColor: isDark ? "#212529" : "#ffffff",
+                    }, children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "\u21B5" }), " to save \u2022 ", (0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "esc" }), " to skip"] })] }) }));
 }

package/dist/screens/workflows/workflow-details.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 interface IProps {
     workflowId: string;
 }
-export declare const WorkflowDetails: (props: IProps) => React.JSX.Element;
+export declare const WorkflowDetails: (props: IProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/screens/workflows/workflow-details.js

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WorkflowDetails = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importDefault(require("react"));
 const input_1 = require("../../components/input");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const save_button_1 = require("../../components/save-button");
@@ -19,46 +16,35 @@ const WorkflowDetails = (props) => {
     const workflow = (0, hooks_1.usePromise)(async () => {
         const workflow = await (0, peers_sdk_1.Workflows)().get(props.workflowId);
         if (!workflow) {
-            throw new Error('Workflow not found');
+            throw new Error("Workflow not found");
         }
         (0, tabs_state_1.updateActiveTabTitle)(workflow.name || "Workflow");
         return (0, peers_sdk_1.Workflows)().initDoc(workflow);
     }, undefined, [props.workflowId]);
     if (!workflow) {
-        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+        return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
     async function saveChanges() {
         if (!workflow)
             return;
         workflow.updatedAt = new Date();
-        const assistantsMentioned = await (0, peers_sdk_1.getAllAssistantIdsMentioned)(workflow.instructions[0].markdown ?? '');
+        const assistantsMentioned = await (0, peers_sdk_1.getAllAssistantIdsMentioned)(workflow.instructions[0].markdown ?? "");
         workflow.defaultAssistantId = assistantsMentioned[0] || peers_sdk_1.defaultAssistantId;
         workflow.save();
     }
-    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-database-fill-gear 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: workflow.workflowId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: workflow.qs.name }))),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("button", { className: "btn btn-success me-2", onClick: () => {
-                        saveChanges(); // TODO take this out, is just for testing
-                        _runWorkflow(workflow.toJS());
-                    } }, "Run All"),
-                react_1.default.createElement(save_button_1.SaveButton, { key: workflow.workflowId, onClick: saveChanges, doc: workflow }))),
-        react_1.default.createElement(tabs_1.Tabs, { key: workflow.workflowId, tabs: [
-                {
-                    name: 'Info', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
-                        react_1.default.createElement(workflow_info_1.WorkflowInfo, { workflow: workflow }))
-                },
-                {
-                    name: 'Instructions', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
-                        react_1.default.createElement(workflow_instructions_1.WorkflowInstructions, { workflow: workflow }))
-                },
-            ] })));
+    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-database-fill-gear 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: workflow.qs.name }, workflow.workflowId) }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-success me-2", onClick: () => {
+                                    saveChanges(); // TODO take this out, is just for testing
+                                    _runWorkflow(workflow.toJS());
+                                }, children: "Run All" }), (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { onClick: saveChanges, doc: workflow }, workflow.workflowId)] })] }), (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)(workflow_info_1.WorkflowInfo, { workflow: workflow }) })),
+                    },
+                    {
+                        name: "Instructions",
+                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: (0, jsx_runtime_1.jsx)(workflow_instructions_1.WorkflowInstructions, { workflow: workflow }) })),
+                    },
+                ] }, workflow.workflowId)] }));
 };
 exports.WorkflowDetails = WorkflowDetails;
 async function _runWorkflow(workflow) {

package/dist/screens/workflows/workflow-info.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
-import { IDoc, IWorkflow } from "@peers-app/peers-sdk";
+import type { IDoc, IWorkflow } from "@peers-app/peers-sdk";
 export declare const WorkflowInfo: (props: {
     workflow: IDoc<IWorkflow>;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/screens/workflows/workflow-info.js

@@ -1,18 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WorkflowInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const input_1 = require("../../components/input");
-const react_1 = __importDefault(require("react"));
 const editor_inline_1 = require("../../components/markdown-editor/editor-inline");
 const WorkflowInfo = (props) => {
     const { workflow } = props;
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("small", null, "Name:"),
-        react_1.default.createElement(input_1.Input, { value: workflow.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Workflow name", title: "Workflow name" }),
-        react_1.default.createElement("small", null, "Description:"),
-        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: workflow.qs.description })));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("small", { children: "Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: workflow.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Workflow name", title: "Workflow name" }), (0, jsx_runtime_1.jsx)("small", { children: "Description:" }), (0, jsx_runtime_1.jsx)(editor_inline_1.MarkdownEditorInline, { value: workflow.qs.description })] }));
 };
 exports.WorkflowInfo = WorkflowInfo;

package/dist/screens/workflows/workflow-instructions.d.ts

@@ -1,5 +1,4 @@
-import { IDoc, IWorkflow } from "@peers-app/peers-sdk";
-import React from "react";
+import { type IDoc, type IWorkflow } from "@peers-app/peers-sdk";
 export declare const WorkflowInstructions: (props: {
     workflow: IDoc<IWorkflow>;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;