@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/screens/network-viewer/usage-graph.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.UsageGraph = UsageGraph;
-const react_1 = __importStar(require("react"));
-function UsageGraph({ fetchUsage, label, durationMinutes = 5, updateInterval = 5000, minHeight = 80, color = 'rgba(13, 110, 253, 1)', overlayTextColor = 'rgba(255, 255, 255, 0.7)', minValue = 0, maxValue = 100, formatOverlayText, colorZones }) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function UsageGraph({ fetchUsage, label, durationMinutes = 5, updateInterval = 5000, minHeight = 80, color = "rgba(13, 110, 253, 1)", overlayTextColor = "rgba(255, 255, 255, 0.7)", minValue = 0, maxValue = 100, formatOverlayText, colorZones, }) {
     const [dataPoints, setDataPoints] = (0, react_1.useState)([]);
     const [currentValue, setCurrentValue] = (0, react_1.useState)(0);
     const [width, setWidth] = (0, react_1.useState)(400);
@@ -72,11 +40,11 @@ function UsageGraph({ fetchUsage, label, durationMinutes = 5, updateInterval = 5
                 setDataPoints((prev) => {
                     const newPoint = {
                         timestamp: Date.now(),
-                        value: value
+                        value: value,
                     };
                     const updated = [...prev, newPoint];
                     const oldestAllowedTime = Date.now() - durationMinutes * 60 * 1000;
-                    const filtered = updated.filter(point => point.timestamp >= oldestAllowedTime);
+                    const filtered = updated.filter((point) => point.timestamp >= oldestAllowedTime);
                     return filtered;
                 });
             }
@@ -93,7 +61,7 @@ function UsageGraph({ fetchUsage, label, durationMinutes = 5, updateInterval = 5
                 clearInterval(intervalRef.current);
             }
         };
-    }, [fetchUsage, updateInterval, label]);
+    }, [fetchUsage, updateInterval, label, durationMinutes]);
     // Get color for a value based on color zones
     const getColorForValue = (value) => {
         if (!colorZones || colorZones.length === 0) {
@@ -133,12 +101,14 @@ function UsageGraph({ fetchUsage, label, durationMinutes = 5, updateInterval = 5
         });
         // If no color zones, return single segment
         if (!colorZones || colorZones.length === 0) {
-            const pathData = points.map((point, idx) => {
+            const pathData = points
+                .map((point, idx) => {
                 if (idx === 0) {
                     return `M ${point.x} ${point.y}`;
                 }
                 return `L ${point.x} ${point.y}`;
-            }).join(' ');
+            })
+                .join(" ");
             return [{ path: pathData, color }];
         }
         // Create segments based on color zones
@@ -167,7 +137,7 @@ function UsageGraph({ fetchUsage, label, durationMinutes = 5, updateInterval = 5
     // Calculate SVG path (for gradient fill)
     const getLinePath = () => {
         if (dataPoints.length < 2)
-            return '';
+            return "";
         const paddingLeft = 25;
         const paddingRight = 10;
         const paddingTop = 10;
@@ -188,97 +158,95 @@ function UsageGraph({ fetchUsage, label, durationMinutes = 5, updateInterval = 5
             return { x, y };
         });
         // Create SVG path
-        const pathData = points.map((point, idx) => {
+        const pathData = points
+            .map((point, idx) => {
             if (idx === 0) {
                 return `M ${point.x} ${point.y}`;
             }
             return `L ${point.x} ${point.y}`;
-        }).join(' ');
+        })
+            .join(" ");
         return pathData;
     };
     // Get gradient path for fill
     const getGradientPath = () => {
         const linePath = getLinePath();
         if (!linePath)
-            return '';
+            return "";
         const paddingLeft = 25;
         const paddingRight = 10;
         const paddingBottom = 10;
         // Close the path at the bottom
         return `${linePath} L ${width - paddingRight} ${height - paddingBottom} L ${paddingLeft} ${height - paddingBottom} Z`;
     };
-    const linePath = getLinePath();
+    const _linePath = getLinePath();
     const gradientPath = getGradientPath();
     const lineSegments = getLineSegments();
     // Parse color for gradient
     const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
     const gradientColor = rgbaMatch
         ? `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0.3)`
-        : 'rgba(13, 110, 253, 0.3)';
+        : "rgba(13, 110, 253, 0.3)";
     const gradientColorLight = rgbaMatch
         ? `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0.05)`
-        : 'rgba(13, 110, 253, 0.05)';
-    return (react_1.default.createElement("div", { ref: containerRef, className: "usage-graph", style: { margin: 0, padding: 0, position: 'relative', width: '100%', height: '100%', minHeight: `${minHeight}px` } },
-        react_1.default.createElement("svg", { width: width, height: height, style: {
-                border: '1px solid rgba(128, 128, 128, 0.2)',
-                borderRadius: '4px',
-                backgroundColor: 'rgba(0, 0, 0, 0.02)',
-                display: 'block'
-            } },
-            react_1.default.createElement("defs", null,
-                react_1.default.createElement("linearGradient", { id: `${label}Gradient`, x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
-                    react_1.default.createElement("stop", { offset: "0%", stopColor: gradientColor }),
-                    react_1.default.createElement("stop", { offset: "100%", stopColor: gradientColorLight }))),
-            [0, 0.25, 0.5, 0.75, 1].map((fraction) => {
-                const paddingLeft = 25;
-                const paddingRight = 10;
-                const paddingTop = 10;
-                const paddingBottom = 10;
-                const chartHeight = height - paddingTop - paddingBottom;
-                const value = minValue + fraction * (maxValue - minValue);
-                const y = paddingTop + chartHeight - fraction * chartHeight;
-                return (react_1.default.createElement("g", { key: fraction },
-                    react_1.default.createElement("line", { x1: paddingLeft, y1: y, x2: width - paddingRight, y2: y, stroke: "rgba(128, 128, 128, 0.1)", strokeWidth: "1" }),
-                    react_1.default.createElement("text", { x: paddingLeft - 5, y: y + 4, fontSize: "10", fill: "rgba(128, 128, 128, 0.6)", textAnchor: "end" }, Math.round(value))));
-            }),
-            gradientPath && (react_1.default.createElement("path", { d: gradientPath, fill: `url(#${label}Gradient)` })),
-            lineSegments.map((segment, idx) => (react_1.default.createElement("path", { key: idx, d: segment.path, stroke: segment.color, strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }))),
-            dataPoints.map((point, idx) => {
-                const paddingLeft = 25;
-                const paddingRight = 10;
-                const paddingTop = 10;
-                const paddingBottom = 10;
-                const chartWidth = width - paddingLeft - paddingRight;
-                const chartHeight = height - paddingTop - paddingBottom;
-                // Use full time range, but adjust minTime to start at oldest data point
-                const now = Date.now();
-                const timeRange = durationMinutes * 60 * 1000;
-                const minTime = Math.min(dataPoints[0].timestamp, now - timeRange);
-                const x = paddingLeft + ((point.timestamp - minTime) / timeRange) * chartWidth;
-                const valueRange = maxValue - minValue;
-                const normalizedValue = (point.value - minValue) / valueRange;
-                const y = paddingTop + chartHeight - normalizedValue * chartHeight;
-                // Only show the last point as a visible dot
-                if (idx !== dataPoints.length - 1)
-                    return null;
-                const pointColor = getColorForValue(point.value);
-                return (react_1.default.createElement("circle", { key: idx, cx: x, cy: y, r: "3", fill: pointColor, stroke: "white", strokeWidth: "1.5" }));
-            }),
-            dataPoints.length === 0 && (react_1.default.createElement("text", { x: width / 2, y: height / 2, fontSize: "12", fill: "rgba(128, 128, 128, 0.6)", textAnchor: "middle" }, "Collecting data..."))),
-        react_1.default.createElement("div", { style: {
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                fontSize: '2rem',
-                fontWeight: 'bold',
-                color: overlayTextColor,
-                pointerEvents: 'none',
-                userSelect: 'none',
-                textAlign: 'center',
-                lineHeight: '1.2',
-                whiteSpace: 'nowrap',
-                maxWidth: '95%',
-                overflowWrap: 'break-word'
-            } }, formatOverlayText ? formatOverlayText(currentValue, label) : `${label}  ${Math.round(currentValue)}%`)));
+        : "rgba(13, 110, 253, 0.05)";
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: "usage-graph", style: {
+            margin: 0,
+            padding: 0,
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            minHeight: `${minHeight}px`,
+        }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: width, height: height, style: {
+                    border: "1px solid rgba(128, 128, 128, 0.2)",
+                    borderRadius: "4px",
+                    backgroundColor: "rgba(0, 0, 0, 0.02)",
+                    display: "block",
+                }, children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: `${label}Gradient`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: gradientColor }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: gradientColorLight })] }) }), [0, 0.25, 0.5, 0.75, 1].map((fraction) => {
+                        const paddingLeft = 25;
+                        const paddingRight = 10;
+                        const paddingTop = 10;
+                        const paddingBottom = 10;
+                        const chartHeight = height - paddingTop - paddingBottom;
+                        const value = minValue + fraction * (maxValue - minValue);
+                        const y = paddingTop + chartHeight - fraction * chartHeight;
+                        return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("line", { x1: paddingLeft, y1: y, x2: width - paddingRight, y2: y, stroke: "rgba(128, 128, 128, 0.1)", strokeWidth: "1" }), (0, jsx_runtime_1.jsx)("text", { x: paddingLeft - 5, y: y + 4, fontSize: "10", fill: "rgba(128, 128, 128, 0.6)", textAnchor: "end", children: Math.round(value) })] }, fraction));
+                    }), gradientPath && (0, jsx_runtime_1.jsx)("path", { d: gradientPath, fill: `url(#${label}Gradient)` }), lineSegments.map((segment, idx) => ((0, jsx_runtime_1.jsx)("path", { d: segment.path, stroke: segment.color, strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, idx))), dataPoints.map((point, idx) => {
+                        const paddingLeft = 25;
+                        const paddingRight = 10;
+                        const paddingTop = 10;
+                        const paddingBottom = 10;
+                        const chartWidth = width - paddingLeft - paddingRight;
+                        const chartHeight = height - paddingTop - paddingBottom;
+                        // Use full time range, but adjust minTime to start at oldest data point
+                        const now = Date.now();
+                        const timeRange = durationMinutes * 60 * 1000;
+                        const minTime = Math.min(dataPoints[0].timestamp, now - timeRange);
+                        const x = paddingLeft + ((point.timestamp - minTime) / timeRange) * chartWidth;
+                        const valueRange = maxValue - minValue;
+                        const normalizedValue = (point.value - minValue) / valueRange;
+                        const y = paddingTop + chartHeight - normalizedValue * chartHeight;
+                        // Only show the last point as a visible dot
+                        if (idx !== dataPoints.length - 1)
+                            return null;
+                        const pointColor = getColorForValue(point.value);
+                        return ((0, jsx_runtime_1.jsx)("circle", { cx: x, cy: y, r: "3", fill: pointColor, stroke: "white", strokeWidth: "1.5" }, idx));
+                    }), dataPoints.length === 0 && ((0, jsx_runtime_1.jsx)("text", { x: width / 2, y: height / 2, fontSize: "12", fill: "rgba(128, 128, 128, 0.6)", textAnchor: "middle", children: "Collecting data..." }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    fontSize: "2rem",
+                    fontWeight: "bold",
+                    color: overlayTextColor,
+                    pointerEvents: "none",
+                    userSelect: "none",
+                    textAlign: "center",
+                    lineHeight: "1.2",
+                    whiteSpace: "nowrap",
+                    maxWidth: "95%",
+                    overflowWrap: "break-word",
+                }, children: formatOverlayText
+                    ? formatOverlayText(currentValue, label)
+                    : `${label}  ${Math.round(currentValue)}%` })] }));
 }

package/dist/screens/packages/package-details.d.ts

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

package/dist/screens/packages/package-details.js

@@ -4,87 +4,81 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PackageDetails = 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");
 const tabs_1 = require("../../components/tabs");
-const package_info_1 = require("./package-info");
-const package_versions_1 = require("./package-versions");
 const hooks_1 = require("../../hooks");
-const input_1 = require("../../components/input");
 const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const package_info_1 = require("./package-info");
+const package_versions_1 = require("./package-versions");
 const PackageDetails = (props) => {
     const refresh = (0, hooks_1.useObservableState)(Date.now());
     const saveDeviceTagRef = react_1.default.useRef(null);
     const pkg = (0, hooks_1.usePromise)(async () => {
         const pkg = await (0, peers_sdk_1.Packages)().get(props.packageId);
         if (!pkg) {
-            throw new Error('Workflow not found');
+            throw new Error("Workflow not found");
         }
         (0, tabs_state_1.updateActiveTabTitle)(pkg.name || "Package");
         return (0, peers_sdk_1.Packages)().initDoc(pkg);
     }, undefined, [props.packageId, refresh()]);
     if (!pkg) {
-        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+        return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
     const addActions = [
         {
-            label: 'Reload Package',
+            label: "Reload Package",
             onClick: async () => {
                 await peers_sdk_1.rpcServerCalls.addOrUpdatePackage(pkg.packageId, { update: true });
                 await pkg.load();
                 window.location.reload();
-            }
+            },
         },
     ];
     if (!pkg.remoteRepo) {
         addActions.push({
-            label: 'Make Remote ',
+            label: "Make Remote ",
             // className: 'text-bg-warning',
             onClick: async () => {
                 if (confirm(`Create a remote repository from this local one: ${pkg.name}`)) {
                     try {
-                        await peers_sdk_1.rpcServerCalls.addOrUpdatePackage(pkg.packageId, { linkRemote: true, update: true });
+                        await peers_sdk_1.rpcServerCalls.addOrUpdatePackage(pkg.packageId, {
+                            linkRemote: true,
+                            update: true,
+                        });
                         refresh(Date.now());
                     }
                     catch (err) {
                         alert(`Error linking remote repo: ${err}`);
                     }
                 }
-            }
+            },
         });
     }
-    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-box-fill 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: pkg.packageId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: pkg.qs.name }))),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(save_button_1.SaveButton, { key: pkg.packageId, doc: pkg, onClick: async () => {
-                        await pkg.save();
-                        await saveDeviceTagRef.current?.();
-                    }, addActions: [
-                        ...addActions
-                    ] }))),
-        react_1.default.createElement(tabs_1.Tabs, { key: pkg.packageId, tabs: [
-                {
-                    name: 'Info', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
-                        react_1.default.createElement(package_info_1.PackageInfo, { pkg: pkg, saveDeviceTagRef: saveDeviceTagRef }))
-                },
-                {
-                    name: 'Versions', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
-                        react_1.default.createElement(package_versions_1.PackageVersionsList, { pkg: pkg }))
-                },
-                {
-                    name: 'Components', content: react_1.default.createElement(tabs_1.ScreenTabBody, null, "TODO - show all of the different components in the package")
-                },
-                {
-                    name: 'Dependencies', content: react_1.default.createElement(tabs_1.ScreenTabBody, null, "TODO - show all of the dependencies of the package")
-                },
-            ] })));
+    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-box-fill 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: pkg.qs.name }, pkg.packageId) }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { doc: pkg, onClick: async () => {
+                                await pkg.save();
+                                await saveDeviceTagRef.current?.();
+                            }, addActions: [...addActions] }, pkg.packageId) })] }), (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)(package_info_1.PackageInfo, { pkg: pkg, saveDeviceTagRef: saveDeviceTagRef }) })),
+                    },
+                    {
+                        name: "Versions",
+                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: (0, jsx_runtime_1.jsx)(package_versions_1.PackageVersionsList, { pkg: pkg }) })),
+                    },
+                    {
+                        name: "Components",
+                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: "TODO - show all of the different components in the package" })),
+                    },
+                    {
+                        name: "Dependencies",
+                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: "TODO - show all of the dependencies of the package" })),
+                    },
+                ] }, pkg.packageId)] }));
 };
 exports.PackageDetails = PackageDetails;

package/dist/screens/packages/package-info.d.ts

@@ -1,6 +1,6 @@
+import { type IDoc, type IPackage } from "@peers-app/peers-sdk";
 import React from "react";
-import { IDoc, IPackage } from "@peers-app/peers-sdk";
 export declare const PackageInfo: (props: {
     pkg: IDoc<IPackage>;
     saveDeviceTagRef?: React.MutableRefObject<(() => Promise<void>) | null>;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/screens/packages/package-info.js

@@ -4,13 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PackageInfo = void 0;
-const react_1 = __importDefault(require("react"));
+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 markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
 const tooltip_1 = require("../../components/tooltip");
-const input_1 = require("../../components/input");
 const hooks_1 = require("../../hooks");
-const deviceVersionTagVar = (0, peers_sdk_1.groupDeviceVar)('deviceVersionTag');
+const deviceVersionTagVar = (0, peers_sdk_1.groupDeviceVar)("deviceVersionTag");
 const PackageInfo = (props) => {
     const { pkg } = props;
     const [activeVersionId] = (0, hooks_1.useObservable)(pkg.qs.activePackageVersionId);
@@ -21,14 +22,14 @@ const PackageInfo = (props) => {
         defaultValue: `${peers_sdk_1.packagesRootDir}/${pkg.name}`,
     });
     const [localPath, setLocalPath] = (0, hooks_1.useObservable)(localPathVar);
-    const [deviceTagDraft, setDeviceTagDraft] = react_1.default.useState(deviceTag || '');
+    const [deviceTagDraft, setDeviceTagDraft] = react_1.default.useState(deviceTag || "");
     const savingRef = react_1.default.useRef(false);
     react_1.default.useEffect(() => {
         if (!savingRef.current) {
-            setDeviceTagDraft(deviceTag || '');
+            setDeviceTagDraft(deviceTag || "");
         }
     }, [deviceTag]);
-    const deviceTagDirty = deviceTagDraft.trim() !== (deviceTag || '');
+    const deviceTagDirty = deviceTagDraft.trim() !== (deviceTag || "");
     const prevDirtyRef = react_1.default.useRef(false);
     react_1.default.useEffect(() => {
         if (deviceTagDirty && !prevDirtyRef.current) {
@@ -38,11 +39,11 @@ const PackageInfo = (props) => {
             pkg.q(Math.max(0, (pkg.q() || 0) - 1));
         }
         prevDirtyRef.current = deviceTagDirty;
-    }, [deviceTagDirty]);
+    }, [deviceTagDirty, pkg.q]);
     if (props.saveDeviceTagRef) {
         props.saveDeviceTagRef.current = async () => {
             const val = deviceTagDraft.trim();
-            if (val !== (deviceTag || '')) {
+            if (val !== (deviceTag || "")) {
                 savingRef.current = true;
                 try {
                     if (val) {
@@ -65,12 +66,12 @@ const PackageInfo = (props) => {
     }, undefined, [activeVersionId]);
     const newerLevel = (0, hooks_1.usePromise)(async () => {
         if (!activeVersionId)
-            return 'uptodate';
+            return "uptodate";
         const all = await (0, peers_sdk_1.PackageVersions)().list({ packageId: pkg.packageId });
-        const active = all.find(v => v.packageVersionId === activeVersionId);
+        const active = all.find((v) => v.packageVersionId === activeVersionId);
         if (!active?.version)
-            return 'uptodate';
-        const parse = (v) => v.split('.').map(Number);
+            return "uptodate";
+        const parse = (v) => v.split(".").map(Number);
         const [aMaj, aMin, aPat] = parse(active.version);
         let highest = null;
         for (const v of all) {
@@ -80,88 +81,34 @@ const PackageInfo = (props) => {
                 continue;
             const [maj, min, pat] = parse(v.version);
             if (maj > aMaj)
-                return 'major';
+                return "major";
             if (maj === aMaj && min > aMin) {
-                highest = 'minor';
+                highest = "minor";
                 continue;
             }
             if (maj === aMaj && min === aMin && pat > aPat && !highest) {
-                highest = 'patch';
+                highest = "patch";
                 continue;
             }
-            if (maj === aMaj && min === aMin && pat === aPat && (v.createdAt || '') > (active.createdAt || '') && !highest) {
-                highest = 'patch';
+            if (maj === aMaj &&
+                min === aMin &&
+                pat === aPat &&
+                (v.createdAt || "") > (active.createdAt || "") &&
+                !highest) {
+                highest = "patch";
             }
         }
-        return highest || 'uptodate';
+        return highest || "uptodate";
     }, undefined, [activeVersionId, pkg.packageId, followVersionTags, deviceTag]);
-    const isPinned = versionFollowRange === 'pinned';
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("small", null, "Name:"),
-        react_1.default.createElement(input_1.Input, { value: pkg.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Package name", title: "Package name", disabled: true }),
-        react_1.default.createElement("div", { className: "mt-2" },
-            react_1.default.createElement("small", null,
-                "Local Path:",
-                react_1.default.createElement("small", null,
-                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `The local path to the directory containing the package.  This will open in VS Code if it's installed otherwise this will open in your native file system` }),
-                    react_1.default.createElement("button", { className: "btn btn-sm btn-link", onClick: () => {
-                            peers_sdk_1.rpcServerCalls.openPackage(localPath || peers_sdk_1.packagesRootDir);
-                        } }, "Open Local"))),
-            react_1.default.createElement("input", { type: "text", className: "form-control mb-3 p-0 ps-2", placeholder: "~/peers/packages/my-package", value: localPath || '', onChange: e => setLocalPath(e.target.value) })),
-        pkg.remoteRepo && (react_1.default.createElement("div", { className: "mt-2" },
-            react_1.default.createElement("small", null,
-                "Source URL:",
-                react_1.default.createElement("small", null,
-                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `The remote source of this package.  Often a github repository URL or a link to the Peers page for the package.` }),
-                    react_1.default.createElement("button", { className: "btn btn-sm btn-link", onClick: () => {
-                            peers_sdk_1.rpcServerCalls.openLinkInBrowser(pkg.remoteRepo);
-                        } }, "Open Remote"))),
-            react_1.default.createElement(input_1.Input, { value: pkg.qs.remoteRepo, className: "form-control mb-3 p-0 ps-2", disabled: true }))),
-        react_1.default.createElement("div", { className: "mt-2" },
-            react_1.default.createElement("hr", null),
-            react_1.default.createElement("small", null,
-                "Version:",
-                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "The currently active version of this package. Manage versions in the Versions tab." })),
-            activeVersion ? (react_1.default.createElement("div", { className: "d-flex align-items-center mt-1 mb-3" },
-                react_1.default.createElement("strong", { className: "me-2" },
-                    "v",
-                    activeVersion.version),
-                activeVersion.versionTag && (react_1.default.createElement("span", { className: `badge ${activeVersion.versionTag.startsWith('beta') ? 'text-bg-warning' : 'text-bg-info'} me-2` }, activeVersion.versionTag)),
-                react_1.default.createElement("code", { className: "text-muted small me-2" }, activeVersion.packageVersionHash?.substring(0, 8)),
-                newerLevel === 'uptodate' ? (react_1.default.createElement("span", { className: "badge text-bg-success" }, "Up to date")) : newerLevel ? (react_1.default.createElement("span", { className: `badge text-bg-${newerLevel === 'major' ? 'danger' : newerLevel === 'minor' ? 'warning' : 'info'}` },
-                    "Newer ",
-                    newerLevel,
-                    " version available")) : null)) : (react_1.default.createElement("div", { className: "text-muted small mt-1 mb-3" }, "No active version")),
-            react_1.default.createElement("div", { className: "mb-3" },
-                react_1.default.createElement("small", null,
-                    "Auto-Update Range:",
-                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "Controls which new versions are auto-activated. **Pinned** = never auto-update. **Patch** = same major.minor (e.g. 1.2.x). **Minor** = same major (e.g. 1.x.x). **Latest** = always auto-update to newest." })),
-                react_1.default.createElement("select", { className: "form-select form-select-sm", value: versionFollowRange || 'latest', onChange: (e) => {
-                        const val = e.target.value;
-                        pkg.versionFollowRange = val === 'latest' ? undefined : val;
-                    } },
-                    react_1.default.createElement("option", { value: "latest" }, "Latest (auto-update to newest)"),
-                    react_1.default.createElement("option", { value: "minor" }, "Minor (same major version)"),
-                    react_1.default.createElement("option", { value: "patch" }, "Patch (same major.minor version)"),
-                    react_1.default.createElement("option", { value: "pinned" }, "Pinned (no auto-updates)"))),
-            react_1.default.createElement("div", { className: `mb-3 ${isPinned ? 'opacity-50' : ''}` },
-                react_1.default.createElement("small", null,
-                    "Follow Version Tags:",
-                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "Which version tags to auto-activate. Leave empty for **current** (follows the active version's tag). Use `*` for any tag, or a comma-separated list like `stable,prod`." })),
-                react_1.default.createElement(input_1.Input, { value: pkg.qs.followVersionTags, className: "form-control form-control-sm p-0 ps-2", placeholder: `Following "${activeVersion?.versionTag || 'stable'}"`, disabled: isPinned })),
-            react_1.default.createElement("div", { className: "mb-2" },
-                react_1.default.createElement("small", null,
-                    "Device-Specific Version Tag:",
-                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "Override the tag policy for this device only. For example, set to `beta` to test pre-release versions on this device without affecting other devices or group members. This is not synced." })),
-                react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" },
-                    react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm p-0 ps-2", placeholder: "e.g. beta", value: deviceTagDraft, onChange: (e) => setDeviceTagDraft(e.target.value) }),
-                    deviceTagDraft && (react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary", title: "Clear device tag override", onClick: () => setDeviceTagDraft('') },
-                        react_1.default.createElement("i", { className: "bi bi-x-lg" })))))),
-        react_1.default.createElement("div", { className: "mt-2" },
-            react_1.default.createElement("hr", null),
-            react_1.default.createElement("small", null,
-                "Description:",
-                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `This should be edited in the package's README.md.  It will automatically update when you restart Peers or reload the package.` })),
-            react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: pkg.description || '' }))));
+    const isPinned = versionFollowRange === "pinned";
+    const remoteRepoUrl = pkg.remoteRepo;
+    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: pkg.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Package name", title: "Package name", disabled: true }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Local Path:", (0, jsx_runtime_1.jsxs)("small", { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `The local path to the directory containing the package.  This will open in VS Code if it's installed otherwise this will open in your native file system` }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-link", onClick: () => {
+                                            peers_sdk_1.rpcServerCalls.openPackage(localPath || peers_sdk_1.packagesRootDir);
+                                        }, children: "Open Local" })] })] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control mb-3 p-0 ps-2", placeholder: "~/peers/packages/my-package", value: localPath || "", onChange: (e) => setLocalPath(e.target.value) })] }), remoteRepoUrl ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Source URL:", (0, jsx_runtime_1.jsxs)("small", { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `The remote source of this package.  Often a github repository URL or a link to the Peers page for the package.` }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-link", onClick: () => {
+                                            peers_sdk_1.rpcServerCalls.openLinkInBrowser(remoteRepoUrl);
+                                        }, children: "Open Remote" })] })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: pkg.qs.remoteRepo, className: "form-control mb-3 p-0 ps-2", disabled: true })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsxs)("small", { children: ["Version:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "The currently active version of this package. Manage versions in the Versions tab." })] }), activeVersion ? ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mt-1 mb-3", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "me-2", children: ["v", activeVersion.version] }), activeVersion.versionTag && ((0, jsx_runtime_1.jsx)("span", { className: `badge ${activeVersion.versionTag.startsWith("beta") ? "text-bg-warning" : "text-bg-info"} me-2`, children: activeVersion.versionTag })), (0, jsx_runtime_1.jsx)("code", { className: "text-muted small me-2", children: activeVersion.packageVersionHash?.substring(0, 8) }), newerLevel === "uptodate" ? ((0, jsx_runtime_1.jsx)("span", { className: "badge text-bg-success", children: "Up to date" })) : newerLevel ? ((0, jsx_runtime_1.jsxs)("span", { className: `badge text-bg-${newerLevel === "major" ? "danger" : newerLevel === "minor" ? "warning" : "info"}`, children: ["Newer ", newerLevel, " version available"] })) : null] })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-muted small mt-1 mb-3", children: "No active version" })), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Auto-Update Range:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Controls which new versions are auto-activated. **Pinned** = never auto-update. **Patch** = same major.minor (e.g. 1.2.x). **Minor** = same major (e.g. 1.x.x). **Latest** = always auto-update to newest." })] }), (0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm", value: versionFollowRange || "latest", onChange: (e) => {
+                                    const val = e.target.value;
+                                    pkg.versionFollowRange = val === "latest" ? undefined : val;
+                                }, children: [(0, jsx_runtime_1.jsx)("option", { value: "latest", children: "Latest (auto-update to newest)" }), (0, jsx_runtime_1.jsx)("option", { value: "minor", children: "Minor (same major version)" }), (0, jsx_runtime_1.jsx)("option", { value: "patch", children: "Patch (same major.minor version)" }), (0, jsx_runtime_1.jsx)("option", { value: "pinned", children: "Pinned (no auto-updates)" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: `mb-3 ${isPinned ? "opacity-50" : ""}`, children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Follow Version Tags:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Which version tags to auto-activate. Leave empty for **current** (follows the active version's tag). Use `*` for any tag, or a comma-separated list like `stable,prod`." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: pkg.qs.followVersionTags, className: "form-control form-control-sm p-0 ps-2", placeholder: `Following "${activeVersion?.versionTag || "stable"}"`, disabled: isPinned })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-2", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Device-Specific Version Tag:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Override the tag policy for this device only. For example, set to `beta` to test pre-release versions on this device without affecting other devices or group members. This is not synced." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control form-control-sm p-0 ps-2", placeholder: "e.g. beta", value: deviceTagDraft, onChange: (e) => setDeviceTagDraft(e.target.value) }), deviceTagDraft && ((0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-secondary", title: "Clear device tag override", onClick: () => setDeviceTagDraft(""), children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-x-lg" }) }))] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsxs)("small", { children: ["Description:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `This should be edited in the package's README.md.  It will automatically update when you restart Peers or reload the package.` })] }), (0, jsx_runtime_1.jsx)(markdown_with_mentions_1.MarkdownWithMentions, { content: pkg.description || "" })] })] }));
 };
 exports.PackageInfo = PackageInfo;

package/dist/screens/packages/package-list.d.ts

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