@peers-app/peers-ui 0.0.14

package/dist/three-bar-layout/left-bar-content.js

@@ -0,0 +1,151 @@
+"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.LeftBarContent = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const globals_1 = require("../globals");
+const hooks_1 = require("../hooks");
+const color = __importStar(require("../screens/settings/color-mode-dropdown"));
+let toggleCollapsed = () => { };
+const LeftBarContent = (props) => {
+    toggleCollapsed = props.toggleCollapsed;
+    const { collapsed } = props;
+    const [colorMode] = (0, hooks_1.useObservable)(color.colorMode);
+    const collapseButtonClass = colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-secondary';
+    const [_isDesktop] = (0, hooks_1.useObservable)(globals_1.isDesktop);
+    const [contentPath] = (0, hooks_1.useObservable)(globals_1.mainContentPath);
+    const packagesWithNavItems = (0, hooks_1.usePromise)(async () => {
+        const packages = await (0, peers_sdk_1.Packages)().list();
+        return packages.filter(pkg => pkg.appNavs?.length);
+    }, []);
+    const knowledgeSublinks = [
+        { text: "Frames", icon: "bi bi-window-dock", path: "knowledge-frames", left: 15 },
+        { text: "Predicates", icon: "bi bi-node-plus-fill", left: 15 },
+        { text: "Graph", icon: "bi bi-diagram-3-fill", left: 15 },
+    ];
+    const knowledgeSublinkActive = contentPath.startsWith('knowledge-') || knowledgeSublinks.find(ks => contentPath.startsWith(ks.path || ks.text.toLowerCase()));
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: "p-2 d-flex align-items-center", style: { minWidth: '50px' } },
+            !collapsed && (react_1.default.createElement("h5", { className: "m-0 flex-grow-1" }, "Peers")),
+            react_1.default.createElement("button", { className: `btn btn-sm ${collapseButtonClass}`, onClick: toggleCollapsed, style: { flexShrink: 0 } },
+                react_1.default.createElement("i", { className: `bi ${collapsed
+                        ? 'bi-chevron-double-right'
+                        : 'bi-chevron-double-left'}`, title: collapsed ? 'Expand Sidebar' : 'Collapse Sidebar' }))),
+        react_1.default.createElement(MenuSection, { collapsed: collapsed, menuItems: [
+                { text: "Variables", icon: "bi bi-braces" },
+                { text: "Types", icon: "bi bi-code-square", path: "peer-types" },
+                { text: "Assistants", icon: "bi bi-person-fill-gear" },
+                { text: "Tools", icon: "bi bi-tools" },
+                { text: "Workflows", icon: "bi bi-database-fill-gear" },
+                { text: "Events", icon: "bi bi-lightning-charge-fill" },
+                { text: "Packages", icon: "bi bi-box-fill" },
+            ] }),
+        react_1.default.createElement("hr", null),
+        react_1.default.createElement(MenuSection, { collapsed: collapsed, menuItems: [
+                { text: "Threads", icon: "bi bi-cpu", path: "shell" },
+                { text: `Knowledge ${knowledgeSublinkActive ? '' : '+'}`, icon: "bi bi-journal-bookmark-fill", path: "knowledge-values" },
+                ...(knowledgeSublinkActive && knowledgeSublinks || []),
+            ] }),
+        (packagesWithNavItems?.length ?? 0) > 0 &&
+            packagesWithNavItems?.map(p => react_1.default.createElement(PackageNavItems, { key: p.packageId, pkg: p, collapsed: collapsed }))));
+};
+exports.LeftBarContent = LeftBarContent;
+function MenuSection(props) {
+    return (react_1.default.createElement("div", { className: "nav flex-column nav-pills me-3", id: "v-pills-tab", role: "tablist", "aria-orientation": "vertical" }, props.menuItems.map(mi => react_1.default.createElement(MenuItem, { key: mi.text + mi.path, ...mi, collapsed: props.collapsed }))));
+}
+function MenuItem(props) {
+    const divRef = react_1.default.useRef(null);
+    (0, hooks_1.useObservable)(globals_1.mainContentPath);
+    const link = props.path ?? props.text.replace(/\s/g, '-').toLowerCase();
+    const href = window.location.href.split('#')[1]?.trim() ?? '';
+    let isActive = href.split('/')[0] === link || href.startsWith(link);
+    if (link === 'shell' && !href) {
+        isActive = true;
+    }
+    let marginLeft = props.left || 0;
+    if (props.collapsed && marginLeft) {
+        marginLeft = 0;
+    }
+    const [_isDesktop] = (0, hooks_1.useObservable)(globals_1.isDesktop);
+    const toolTip = props.collapsed ? props.text : '';
+    // useEffect(() => {
+    //   if (divRef.current && _isDesktop && props.collapsed) {
+    //     new Tooltip(divRef.current as HTMLElement);
+    //   }
+    // }, [divRef, divRef?.current, props.collapsed]);
+    return (react_1.default.createElement("div", { key: `${props.text}-${props.path}-${props.collapsed}`, ref: divRef, className: `nav-link text-reset ${isActive && 'active' || ''} ${props.className || ''}`, "data-bs-toggle": "tooltip", "data-bs-title": props.text, "data-bs-placement": "right", style: { cursor: "pointer", marginLeft: `${marginLeft}px` }, onClick: () => {
+            (0, globals_1.mainContentPath)(link);
+            if (!_isDesktop) {
+                toggleCollapsed();
+            }
+        } },
+        react_1.default.createElement("a", { style: { textDecoration: 'none', textWrap: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } },
+            react_1.default.createElement("i", { className: props.icon }),
+            props.collapsed ? '' :
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    "\u00A0 \u00A0",
+                    props.text))));
+}
+function PackageNavItems(props) {
+    const pkg = props.pkg;
+    if (!pkg.appNavs || pkg.appNavs.length === 0) {
+        return null;
+    }
+    // if (pkg.appNavs?.length === 1 && pkg.appNavs[0].name === pkg.name) {
+    //   const iconClassName = pkg.appNavs[0].iconClassName || "bi bi-question-square";
+    //   // this package only has one nav item and it's named the same as the package so just show it as a top level item
+    //   return <MenuItem
+    //     text={pkg.name}
+    //     icon={iconClassName}
+    //   />
+    // }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        pkg.appNavs.length !== 1 || pkg.appNavs[0].name !== pkg.name && (react_1.default.createElement("label", { style: { color: 'silver' } }, pkg.name)),
+        react_1.default.createElement(MenuSection, { collapsed: props.collapsed, menuItems: pkg.appNavs.map(ni => {
+                let path = `package-nav/${pkg.packageId}/${(ni.navigationPath ?? ni.name).replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}`;
+                while (path.includes('//')) {
+                    path = path.replace('//', '/');
+                }
+                return {
+                    text: ni.name,
+                    icon: ni.iconClassName || "bi bi-box-seam",
+                    path,
+                };
+            }) })));
+}

package/dist/three-bar-layout/right-bar-content.d.ts

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

package/dist/three-bar-layout/right-bar-content.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RightBarContent = void 0;
+const react_1 = __importDefault(require("react"));
+const thread_view_1 = require("../components/messages/thread-view");
+const hooks_1 = require("../hooks");
+const color_mode_dropdown_1 = require("../screens/settings/color-mode-dropdown");
+const RightBarContent = () => {
+    const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
+    return (react_1.default.createElement("div", { className: `right-bar-content p-0 m-0 ${_colorMode === 'light' ? 'bg-white' : ''}`, style: { height: '100vh', overflowY: 'scroll' } },
+        react_1.default.createElement(thread_view_1.ThreadContainer, { closeThreadBtn: react_1.default.createElement("span", { style: { marginLeft: '40px' } }) })));
+};
+exports.RightBarContent = RightBarContent;
+// // I liked this layout so leaving it here in case it's useful later
+// const TabsContainer = () => {
+//   const [activeTab, setActiveTab] = useState('threads');
+//   return (
+//     <div>
+//       {/* Tab Headers */}
+//       <ul className="nav nav-tabs">
+//         <li className="nav-item">
+//           <a
+//             href="#"
+//             className={`nav-link ${activeTab === 'threads' ? 'active' : ''}`}
+//             onClick={(e) => {
+//               e.preventDefault(); // Prevents page jump
+//               setActiveTab('threads');
+//             }}
+//           >
+//             Threads
+//           </a>
+//         </li>
+//         <li className="nav-item">
+//           <a
+//             href="#"
+//             className={`nav-link ${activeTab === 'notifications' ? 'active' : ''}`}
+//             onClick={(e) => {
+//               e.preventDefault();
+//               setActiveTab('notifications');
+//             }}
+//           >
+//             Notifications
+//           </a>
+//         </li>
+//       </ul>
+//       {/* Tab Content */}
+//       <div className="tab-content p-3">
+//         <div className={`tab-pane fade ${activeTab === 'threads' ? 'show active' : ''}`}>
+//           {/* Replace with your Threads content */}
+//           <h5>Threads</h5>
+//           <p>This is where your threads content goes.</p>
+//         </div>
+//         <div className={`tab-pane fade ${activeTab === 'notifications' ? 'show active' : ''}`}>
+//           {/* Replace with your Notifications content */}
+//           <h5>Notifications</h5>
+//           <p>This is where your notifications content goes.</p>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// }

package/dist/three-bar-layout/three-bar-layout.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ColorModePreference } from '../screens/settings/color-mode-dropdown';
+export declare function ThreeBarLayout(props: {
+    colorMode?: ColorModePreference;
+}): false | React.JSX.Element;

package/dist/three-bar-layout/three-bar-layout.js

@@ -0,0 +1,218 @@
+"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.ThreeBarLayout = ThreeBarLayout;
+const react_1 = __importStar(require("react"));
+const color_mode_dropdown_1 = require("../screens/settings/color-mode-dropdown");
+const router_1 = require("../components/router");
+const hooks_1 = require("../hooks");
+const globals_1 = require("../globals");
+const routes_loader_1 = require("../ui-router/routes-loader");
+const setup_user_1 = require("../screens/setup-user");
+const layoutVars = __importStar(require("../layout-vars"));
+const left_bar_content_1 = require("./left-bar-content");
+const right_bar_content_1 = require("./right-bar-content");
+function ThreeBarLayout(props) {
+    const loaded = (0, hooks_1.usePromise)(async () => {
+        await (0, globals_1.loadGlobals)().then(() => console.log('Globals loaded'));
+        await (0, routes_loader_1.loadAllRoutes)().then(() => console.log('Routes loaded'));
+        return true;
+    });
+    if (!loaded)
+        return false;
+    document.getElementById('appLoadingDiv')?.remove();
+    if (globals_1.me.name === globals_1.me.userId) {
+        return react_1.default.createElement(setup_user_1.SetupUser, null);
+    }
+    (0, color_mode_dropdown_1.colorModePreference)(props.colorMode);
+    // colorModePreference('auto');
+    return react_1.default.createElement(_ThreeBarLayout, null);
+}
+function _ThreeBarLayout() {
+    const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
+    const sidebarColorClass = _colorMode === 'light' ? 'bg-dark-subtle' : 'bg-dark-subtle';
+    const collapseButtonClass = _colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-secondary';
+    const [windowWidth] = (0, hooks_1.useObservable)(globals_1.windowWidth);
+    (0, hooks_1.useObservable)(globals_1.isDesktop);
+    const isMobile = !(0, globals_1.isDesktop)();
+    const [leftBarWidth, setLeftBarWidth] = (0, hooks_1.useObservable)(layoutVars.leftBarWidth);
+    const [rightBarWidth, setRightBarWidth] = (0, hooks_1.useObservable)(layoutVars.rightBarWidth);
+    const [leftBarCollapsed, setLeftBarCollapsed] = (0, hooks_1.useObservable)(layoutVars.leftBarCollapsed);
+    const [rightBarCollapsed, setRightBarCollapsed] = (0, hooks_1.useObservable)(layoutVars.rightBarCollapsed);
+    const [prevLeftWidth, setPrevLeftWidth] = (0, hooks_1.useObservable)(layoutVars.leftBarWidthPrev);
+    const [prevRightWidth, setPrevRightWidth] = (0, hooks_1.useObservable)(layoutVars.rightBarWidthPrev);
+    const [leftOffcanvasVisible, setLeftOffcanvasVisible] = (0, react_1.useState)(false);
+    const [rightOffcanvasVisible, setRightOffcanvasVisible] = (0, react_1.useState)(false);
+    const [isResizingLeft, setIsResizingLeft] = (0, react_1.useState)(false);
+    const [isResizingRight, setIsResizingRight] = (0, react_1.useState)(false);
+    // Mouse event handlers for resizing (desktop only).
+    (0, react_1.useEffect)(() => {
+        const handleMouseMove = (e) => {
+            if (isResizingLeft) {
+                const newWidth = e.clientX;
+                if (newWidth >= 200 && newWidth <= windowWidth - 80) {
+                    setLeftBarWidth(newWidth);
+                }
+                // Prevent text selection while dragging.
+                e.preventDefault();
+            }
+            if (isResizingRight) {
+                const newWidth = window.innerWidth - e.clientX;
+                if (newWidth >= 200 && newWidth <= windowWidth - 80) {
+                    setRightBarWidth(newWidth);
+                }
+                // Prevent text selection while dragging.
+                e.preventDefault();
+            }
+        };
+        const handleMouseUp = () => {
+            if (isResizingLeft)
+                setIsResizingLeft(false);
+            if (isResizingRight)
+                setIsResizingRight(false);
+            // Re-enable text selection once resizing is done.
+            document.body.style.userSelect = '';
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isResizingLeft, isResizingRight, windowWidth]);
+    // Function to close both offcanvas panels.
+    const closeOffcanvas = () => {
+        setLeftOffcanvasVisible(false);
+        setRightOffcanvasVisible(false);
+    };
+    // Toggle function for collapsing/expanding the right sidebar (desktop only).
+    const toggleRightSidebarCollapse = () => {
+        if (!rightBarCollapsed) {
+            // Save the current width and collapse to 50px.
+            setPrevRightWidth(rightBarWidth);
+            setRightBarWidth(50);
+            setRightBarCollapsed(true);
+        }
+        else {
+            // Restore the previous width.
+            setRightBarWidth(prevRightWidth);
+            setRightBarCollapsed(false);
+        }
+    };
+    // Toggle function for collapsing/expanding the left sidebar (desktop only).
+    const toggleLeftSidebarCollapse = () => {
+        if (!leftBarCollapsed) {
+            // Save the current width and collapse to 50px.
+            setPrevLeftWidth(leftBarWidth);
+            setLeftBarWidth(50);
+            setLeftBarCollapsed(true);
+        }
+        else {
+            // Restore the previous width.
+            setLeftBarWidth(prevLeftWidth);
+            setLeftBarCollapsed(false);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "d-flex", style: { height: '100vh', overflow: 'hidden' } },
+            !isMobile && (react_1.default.createElement("div", { className: `position-relative ${sidebarColorClass}`, style: {
+                    width: leftBarWidth,
+                    transition: 'width 0.3s',
+                } },
+                react_1.default.createElement(left_bar_content_1.LeftBarContent, { collapsed: leftBarCollapsed, toggleCollapsed: toggleLeftSidebarCollapse }),
+                !leftBarCollapsed && (react_1.default.createElement("div", { className: "position-absolute top-0 end-0 h-100", style: {
+                        width: '5px',
+                        cursor: 'col-resize',
+                        backgroundColor: 'rgba(0,0,0,0.2)',
+                    }, onMouseDown: (e) => {
+                        setIsResizingLeft(true);
+                        e.preventDefault();
+                        document.body.style.userSelect = 'none';
+                    } })))),
+            react_1.default.createElement("div", { className: "flex-grow-1 d-flex flex-column position-relative", style: { minWidth: 0, width: `${windowWidth - leftBarWidth - rightBarWidth}px` } },
+                react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-between border-bottom p-2" },
+                    isMobile && (react_1.default.createElement("button", { className: `btn btn-sm ${collapseButtonClass}`, onClick: () => setLeftOffcanvasVisible(true) },
+                        react_1.default.createElement("i", { className: `bi bi-chevron-double-right`, title: rightBarCollapsed ? 'Expand Left Sidebar' : 'Collapse Left Sidebar' }))),
+                    react_1.default.createElement("h4", { className: "m-0 mx-auto" }, "tabs up here")),
+                react_1.default.createElement("div", { className: "flex-grow-1 overflow-auto", style: { maxHeight: 'calc(100vh - 160px)' } },
+                    react_1.default.createElement(router_1.Router, null))),
+            react_1.default.createElement("button", { className: `btn btn-sm ${collapseButtonClass} float-end`, onClick: () => {
+                    if (isMobile)
+                        setRightOffcanvasVisible(!rightOffcanvasVisible);
+                    else
+                        toggleRightSidebarCollapse();
+                }, style: { zIndex: 20000, position: 'absolute',
+                    top: '8px', right: '8px', //marginLeft: '20px',
+                    ...(!rightBarCollapsed || rightOffcanvasVisible ? { top: '10px', right: '20px' } : {}),
+                } },
+                react_1.default.createElement("i", { className: `bi ${!rightBarCollapsed || rightOffcanvasVisible ? 'bi-chevron-double-right' : 'bi-chevron-double-left'}`, title: rightBarCollapsed ? 'Expand Right Sidebar' : 'Collapse Right Sidebar' })),
+            !isMobile && (react_1.default.createElement("div", { className: `position-relative ${sidebarColorClass}`, style: {
+                    width: rightBarWidth,
+                    transition: 'width 0.3s',
+                } },
+                react_1.default.createElement("div", { className: "ps-1", hidden: rightBarCollapsed },
+                    react_1.default.createElement(right_bar_content_1.RightBarContent, null)),
+                !rightBarCollapsed && (react_1.default.createElement("div", { className: "position-absolute top-0 start-0 h-100", style: {
+                        width: '5px',
+                        cursor: 'col-resize',
+                        backgroundColor: 'rgba(0,0,0,0.2)',
+                    }, onMouseDown: (e) => {
+                        setIsResizingRight(true);
+                        e.preventDefault();
+                        document.body.style.userSelect = 'none';
+                    } }))))),
+        (leftOffcanvasVisible || rightOffcanvasVisible) && (react_1.default.createElement("div", { className: "offcanvas-backdrop fade show", onClick: closeOffcanvas, style: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                zIndex: 1040,
+            } })),
+        isMobile && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: `offcanvas offcanvas-start ${leftOffcanvasVisible ? 'show' : ''} ${sidebarColorClass}`, tabIndex: -1, style: {
+                    // visibility: leftOffcanvasVisible ? 'visible' : 'hidden',
+                    width: (windowWidth < 400 ? windowWidth - 50 : 300) + 'px',
+                    zIndex: 1050,
+                } },
+                react_1.default.createElement(left_bar_content_1.LeftBarContent, { collapsed: leftBarCollapsed && !isMobile, toggleCollapsed: () => setLeftOffcanvasVisible(false) })),
+            react_1.default.createElement("div", { className: `offcanvas offcanvas-end ${rightOffcanvasVisible ? 'show' : ''} ${sidebarColorClass}`, tabIndex: -1, style: {
+                    visibility: rightOffcanvasVisible ? 'visible' : 'hidden',
+                    width: '100%',
+                    zIndex: 1050,
+                } },
+                react_1.default.createElement(right_bar_content_1.RightBarContent, null))))));
+}

package/dist/ui-defaults/index.d.ts

@@ -0,0 +1,2 @@
+import './notes-editor';
+import './list-screen';

package/dist/ui-defaults/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./notes-editor");
+require("./list-screen");

package/dist/ui-defaults/list-screen.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { z } from "zod";
+declare const propsSchema: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
+type IProps = z.infer<typeof propsSchema>;
+export declare const DefaultListScreen: (props: IProps) => React.JSX.Element;
+export {};

package/dist/ui-defaults/list-screen.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultListScreen = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const zod_1 = require("zod");
+const list_screen_1 = require("../components/list-screen");
+const globals_1 = require("../globals");
+const ui_loader_1 = require("../ui-router/ui-loader");
+const propsSchema = zod_1.z.object({
+// items: zodAnyObject.array().describe('Items to display in the list'),
+});
+const DefaultListScreen = (props) => {
+    const path = (0, globals_1.mainContentPath)().toLowerCase().trim().split('?')[0].split('#').pop()?.split('/')[0] || '';
+    const fuzzyTableName = ({
+        variables: 'persistent_vars',
+        "events": 'peer_event_types',
+    }[path] || path).replace(/[_-]/g, '').trim();
+    const allTables = (0, peers_sdk_1.getAllTables)();
+    const tableName = Object.keys(allTables).find(t => t.toLowerCase().replace(/[_-]/g, '').trim() === fuzzyTableName);
+    const table = allTables[tableName || ''];
+    if (!table) {
+        return (react_1.default.createElement("div", { className: "m-4" },
+            "Table not found for path: \"",
+            path,
+            "\""));
+    }
+    const idField = table.metaData.fields.find(f => f.name === table.metaData.primaryKeyName);
+    if (!idField) {
+        throw new Error('No primary key field found for table');
+    }
+    const nameField = table.metaData.fields.find(f => f.name === 'name') ||
+        table.metaData.fields.find(f => f.name === 'title') ||
+        table.metaData.fields.find(f => f.type === peers_sdk_1.FieldType.string);
+    if (!nameField) {
+        throw new Error('No name field found to create new record with');
+    }
+    return (react_1.default.createElement(list_screen_1.ListScreen, { key: path, table,
+        sortBy: [`-${idField.name}`],
+        newRecord: async (text) => {
+            text = text.trim().replace(/\s+/g, '_');
+            let item = table.initRecord({
+                [idField.name]: (0, peers_sdk_1.newid)(),
+                [nameField?.name]: text,
+            });
+            item = await table.insert(item);
+            (0, globals_1.mainContentPath)(`${path}/${item[idField.name]}`);
+            return item;
+        },
+        renderItem: (item) => {
+            return (react_1.default.createElement("div", { key: item[idField.name], className: 'container-fluid pb-4' },
+                react_1.default.createElement("i", { className: (0, peers_sdk_1.getIconClassName)(table) }),
+                "\u00A0",
+                react_1.default.createElement("a", { href: `#${path}/${item[idField.name]}` }, item.name || '<empty-name>'),
+                react_1.default.createElement("div", { style: { paddingLeft: '20px' } })));
+        } }));
+};
+exports.DefaultListScreen = DefaultListScreen;
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: '00m5fql0x5v48vyrk5bllzdrr',
+    component: exports.DefaultListScreen,
+    routes: [
+        {
+            // KnowledgeValue with PeerType: Note
+            isMatch: (props, context) => context.path.split('/').length === 1,
+            uiEditMode: 'view',
+            uiCategory: 'screen',
+            uiSubcategory: 'list',
+        }
+    ]
+});

package/dist/ui-defaults/notes-editor.d.ts

@@ -0,0 +1,7 @@
+import { Observable } from "@peers-app/peers-sdk";
+import React from "react";
+interface IProps {
+    markdown: Observable<string>;
+}
+export declare const FullScreenMarkdownEditor: (props: IProps) => React.JSX.Element;
+export {};

package/dist/ui-defaults/notes-editor.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullScreenMarkdownEditor = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const zod_1 = require("zod");
+const editor_inline_1 = require("../components/markdown-editor/editor-inline");
+const ui_loader_1 = require("../ui-router/ui-loader");
+const FullScreenMarkdownEditor = (props) => {
+    return (react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: props.markdown, maxHeight: 'calc(100vh - 160px)', autoFocus: true }));
+};
+exports.FullScreenMarkdownEditor = FullScreenMarkdownEditor;
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: '00m4rof6uwka5kfi6t7rav8t3',
+    component: (props) => {
+        const doc = props.knowledgeValue;
+        const markdown = (0, peers_sdk_1.computed)({
+            read: () => doc.value?.body || '',
+            write: (value) => {
+                doc.value.body = value;
+                doc.qs.value.notifySubscribers();
+                doc.q(doc.q() + 1);
+            }
+        });
+        return (react_1.default.createElement(exports.FullScreenMarkdownEditor, { key: doc.knowledgeValueId, markdown: markdown }));
+    },
+    propsSchema: zod_1.z.object({
+        knowledgeValue: peers_sdk_1.knowledgeValueSchema, // TODO fix this
+    }),
+    routes: [
+        {
+            // KnowledgeValue with PeerType: Note
+            isMatch: (props, context) => props.knowledgeValue?.peerTypeId === '00m3g0ntcop3mrh6ynuzgekiy',
+            uiEditMode: 'edit',
+            uiCategory: 'details',
+        }
+    ]
+});

package/dist/ui-router/routes-loader.d.ts

@@ -0,0 +1,25 @@
+import "../ui-defaults";
+export declare const allPackages: import("@peers-app/peers-sdk").Observable<{
+    name: string;
+    description: string;
+    signature: string;
+    createdBy: string;
+    packageId: string;
+    localPath: string;
+    packageBundleFileId: string;
+    packageBundleFileHash: string;
+    disabled?: boolean | undefined;
+    remoteRepo?: string | undefined;
+    appNavs?: {
+        name: string;
+        iconClassName: string;
+        navigationPath: string;
+        displayName?: string | undefined;
+    }[] | undefined;
+    routesBundleFileId?: string | undefined;
+    routesBundleFileHash?: string | undefined;
+    uiBundleFileId?: string | undefined;
+    uiBundleFileHash?: string | undefined;
+}[]>;
+export declare const allRoutesLoaded: import("@peers-app/peers-sdk").Observable<boolean>;
+export declare const loadAllRoutes: () => Promise<true | undefined>;