@peers-app/peers-ui 0.25.19 → 0.25.21

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

@@ -1,5 +1,5 @@
 import { type IDoc, type IPackage } from "@peers-app/peers-sdk";
-/** Lists package versions with activate, promote, pin, edit-semver, and delete actions. */
+/** Lists package versions with activate, promote, pin, and delete actions. */
 export declare const PackageVersionsList: (props: {
     pkg: IDoc<IPackage>;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -39,7 +39,7 @@ function tagBadgeClass(tag) {
         return "text-bg-success";
     return "text-bg-secondary";
 }
-/** Lists package versions with activate, promote, pin, edit-semver, and delete actions. */
+/** Lists package versions with activate, promote, pin, and delete actions. */
 const PackageVersionsList = (props) => {
     const { pkg } = props;
     const refreshKey = (0, hooks_1.useObservableState)(0);
@@ -157,35 +157,6 @@ const PackageVersionsList = (props) => {
             alert(`Failed to promote version: ${err instanceof Error ? err.message : String(err)}`);
         }
     }
-    async function updateVersion(pv, newSemver) {
-        try {
-            const pvHash = (0, peers_sdk_1.computePackageVersionHash)(newSemver, pv.versionTag || "dev", pv.packageBundleFileHash, pv.routesBundleFileHash, pv.uiBundleFileHash);
-            // Semver is part of the author-signed payload — re-sign or clear the old signature.
-            const authorSig = await peers_sdk_1.rpcServerCalls.signPackageAuthorVersion({
-                packageId: pv.packageId,
-                packageVersionId: pv.packageVersionId,
-                version: newSemver,
-                versionTag: pv.versionTag,
-                packageBundleFileHash: pv.packageBundleFileHash,
-                routesBundleFileHash: pv.routesBundleFileHash,
-                uiBundleFileHash: pv.uiBundleFileHash,
-                appNavs: pv.appNavs,
-                createdBy: pv.createdBy,
-                createdAt: pv.createdAt,
-            });
-            const updated = {
-                ...pv,
-                version: newSemver,
-                packageVersionHash: pvHash,
-                packageAuthorSignature: authorSig,
-            };
-            await (0, peers_sdk_1.PackageVersions)().signAndSave(updated, { saveAsSnapshot: true });
-            refreshKey(refreshKey() + 1);
-        }
-        catch (err) {
-            alert(`Failed to update version: ${err instanceof Error ? err.message : String(err)}`);
-        }
-    }
     async function pinVersion() {
         setPinning(true);
         try {
@@ -216,7 +187,7 @@ const PackageVersionsList = (props) => {
     if (sorted.length === 0) {
         return ((0, jsx_runtime_1.jsxs)("div", { className: "text-muted text-center p-4", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-tag me-1" }), "No versions found for this package."] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("small", { className: "text-muted", children: [sorted.length, " version", sorted.length !== 1 ? "s" : ""] }), (0, jsx_runtime_1.jsx)("div", { className: "list-group mt-2", children: sorted.map((pv) => ((0, jsx_runtime_1.jsx)(VersionRow, { pv: pv, isActive: pv.packageVersionId === effectiveActiveVersionId, isPinned: isPinned, pinning: pinning, activating: activating, deleting: deleting, userMap: userMap, onActivate: activateVersion, onDelete: deleteVersion, onPin: pinVersion, onPromote: promoteVersion, onUpdateVersion: updateVersion }, pv.packageVersionId))) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("small", { className: "text-muted", children: [sorted.length, " version", sorted.length !== 1 ? "s" : ""] }), (0, jsx_runtime_1.jsx)("div", { className: "list-group mt-2", children: sorted.map((pv) => ((0, jsx_runtime_1.jsx)(VersionRow, { pv: pv, isActive: pv.packageVersionId === effectiveActiveVersionId, isPinned: isPinned, pinning: pinning, activating: activating, deleting: deleting, userMap: userMap, onActivate: activateVersion, onDelete: deleteVersion, onPin: pinVersion, onPromote: promoteVersion }, pv.packageVersionId))) })] }));
 };
 exports.PackageVersionsList = PackageVersionsList;
 /**
@@ -236,25 +207,7 @@ function getPromoteTargets(currentTag) {
 function VersionRow(props) {
     const { pv, isActive, isPinned, pinning, activating, deleting, userMap } = props;
     const creatorName = userMap.get(pv.createdBy);
-    const [editingVersion, setEditingVersion] = (0, react_1.useState)(false);
-    const [versionDraft, setVersionDraft] = (0, react_1.useState)(pv.version);
-    function startEditing() {
-        setVersionDraft(pv.version);
-        setEditingVersion(true);
-    }
-    function commitVersion() {
-        const trimmed = versionDraft.trim();
-        if (trimmed && trimmed !== pv.version) {
-            props.onUpdateVersion(pv, trimmed);
-        }
-        setEditingVersion(false);
-    }
     const currentTag = pv.versionTag || "dev";
     const promoteTargets = getPromoteTargets(currentTag);
-    return ((0, jsx_runtime_1.jsx)("div", { className: `list-group-item ${isActive ? "list-group-item-success" : ""}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center flex-wrap", children: [editingVersion ? ((0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control form-control-sm me-2", style: { width: "7em" }, value: versionDraft, onChange: (e) => setVersionDraft(e.target.value), onBlur: commitVersion, onKeyDown: (e) => {
-                                if (e.key === "Enter")
-                                    commitVersion();
-                                if (e.key === "Escape")
-                                    setEditingVersion(false);
-                            } })) : ((0, jsx_runtime_1.jsxs)("strong", { className: "me-2", style: { cursor: "pointer" }, onClick: startEditing, title: "Click to edit version", children: ["v", pv.version] })), pv.versionTag && ((0, jsx_runtime_1.jsx)("span", { className: `badge ${tagBadgeClass(pv.versionTag)} me-2`, children: pv.versionTag })), (0, jsx_runtime_1.jsx)("code", { className: "text-muted small me-2", children: pv.packageVersionHash?.substring(0, 8) }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted me-2", children: formatDate(pv.createdAt) }), creatorName && (0, jsx_runtime_1.jsxs)("small", { className: "text-muted", children: ["by ", creatorName] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-1 align-items-center", children: [promoteTargets.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "dropdown", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-info dropdown-toggle", "data-bs-toggle": "dropdown", "data-bs-popper-config": '{"strategy":"fixed"}', title: "Change version tag", children: "Promote" }), (0, jsx_runtime_1.jsx)("ul", { className: "dropdown-menu dropdown-menu-end", children: promoteTargets.map((tag) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item", onClick: () => props.onPromote(pv, tag), children: [currentTag, " \u2192 ", tag] }) }, tag))) })] })), isActive ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-secondary", disabled: isPinned || pinning, onClick: () => props.onPin(), title: isPinned ? "Already pinned" : "Pin to this version (disable auto-updates)", children: [pinning ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-pin-fill" })), isPinned ? " Pinned" : " Pin"] }), (0, jsx_runtime_1.jsx)("span", { className: "badge text-bg-info align-self-center", children: "active" })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-primary", disabled: activating === pv.packageVersionId, onClick: () => props.onActivate(pv), children: [activating === pv.packageVersionId ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-check2-circle me-1" })), "Activate"] })), !isActive && ((0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-danger", disabled: deleting === pv.packageVersionId, onClick: () => props.onDelete(pv), children: deleting === pv.packageVersionId ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-trash" })) }))] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: `list-group-item ${isActive ? "list-group-item-success" : ""}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center flex-wrap", children: [(0, jsx_runtime_1.jsxs)("strong", { className: "me-2", children: ["v", pv.version] }), pv.versionTag && ((0, jsx_runtime_1.jsx)("span", { className: `badge ${tagBadgeClass(pv.versionTag)} me-2`, children: pv.versionTag })), (0, jsx_runtime_1.jsx)("code", { className: "text-muted small me-2", children: pv.packageVersionHash?.substring(0, 8) }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted me-2", children: formatDate(pv.createdAt) }), creatorName && (0, jsx_runtime_1.jsxs)("small", { className: "text-muted", children: ["by ", creatorName] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-1 align-items-center", children: [promoteTargets.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "dropdown", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-info dropdown-toggle", "data-bs-toggle": "dropdown", "data-bs-popper-config": '{"strategy":"fixed"}', title: "Change version tag", children: "Promote" }), (0, jsx_runtime_1.jsx)("ul", { className: "dropdown-menu dropdown-menu-end", children: promoteTargets.map((tag) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("button", { className: "dropdown-item", onClick: () => props.onPromote(pv, tag), children: [currentTag, " \u2192 ", tag] }) }, tag))) })] })), isActive ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-secondary", disabled: isPinned || pinning, onClick: () => props.onPin(), title: isPinned ? "Already pinned" : "Pin to this version (disable auto-updates)", children: [pinning ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-pin-fill" })), isPinned ? " Pinned" : " Pin"] }), (0, jsx_runtime_1.jsx)("span", { className: "badge text-bg-info align-self-center", children: "active" })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-primary", disabled: activating === pv.packageVersionId, onClick: () => props.onActivate(pv), children: [activating === pv.packageVersionId ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-check2-circle me-1" })), "Activate"] })), !isActive && ((0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-danger", disabled: deleting === pv.packageVersionId, onClick: () => props.onDelete(pv), children: deleting === pv.packageVersionId ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-trash" })) }))] })] }) }));
 }

package/dist/ui-router/ui-loader.js

@@ -167,7 +167,7 @@ const UIRouter = (props) => {
     if (!matchingRoute) {
         return undefined;
     }
-    return UILoader({ peersUIId: matchingRoute.peersUIId, props: props.props });
+    return (0, jsx_runtime_1.jsx)(UILoader, { peersUIId: matchingRoute.peersUIId, props: props.props });
 };
 exports.UIRouter = UIRouter;
 const UILoader = (args) => {
@@ -177,22 +177,9 @@ const UILoader = (args) => {
     const { props, peersUIId } = args;
     const [lastReloadTime] = (0, hooks_1.useObservable)(globals_1.packageReloaded);
     props.__lastPackageReload = lastReloadTime;
-    // check if peersUIId maps to an in-memory react component
-    const peersUI = peersUIs[peersUIId];
-    if (peersUI?.content) {
-        const parseResult = peersUI.propsSchema.safeParse(props);
-        if (!parseResult.success) {
-            console.error("props did not match schema", {
-                props,
-                schema: peersUI.propsSchema,
-                errors: parseResult.error,
-            });
-            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("pre", { children: ["Peers UI could not be loaded ", (0, jsx_runtime_1.jsx)("br", {}), "peersUIId: ", peersUI.peersUIId, " ", (0, jsx_runtime_1.jsx)("br", {}), "Component name: ", peersUI.content?.name, " ", (0, jsx_runtime_1.jsx)("br", {}), "Props did not match schema ", (0, jsx_runtime_1.jsx)("br", {}), "Errors: ", JSON.stringify(parseResult.error, null, 2), " ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "Props ", JSON.stringify((0, peers_sdk_1.toJSON)(props), null, 2), (0, jsx_runtime_1.jsx)("br", {})] }) }));
-        }
-        const Component = peersUI.content;
-        return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ...args.props }) }));
-    }
-    return (0, jsx_runtime_1.jsx)(UIAsyncLoader, { peersUIId: peersUIId, props: props });
+    // Keep the same loader ancestor after the bundle enters the cache. Replacing it
+    // on a path change would unmount the screen before its navigation guard can run.
+    return (0, jsx_runtime_1.jsx)(UIAsyncLoader, { peersUIId: peersUIId, props: props }, peersUIId);
 };
 const uiLoadingPromises = {};
 // Check if we're running in a React Native WebView (has injectUIBundle available)
@@ -273,6 +260,7 @@ function loadUIBundle(pkg, forceRefresh) {
 }
 const UIAsyncLoader = (props) => {
     const { peersUIId } = props;
+    const peersUI = peersUIs[peersUIId];
     const [loaded, setLoaded] = react_1.default.useState(false);
     const [loadError, setLoadError] = react_1.default.useState(null);
     const allRoutes = _window.getPeersUIRoutes();
@@ -280,7 +268,7 @@ const UIAsyncLoader = (props) => {
     (0, hooks_1.useObservable)(routes_loader_1.allPackages);
     const pkg = (0, routes_loader_1.allPackages)().find((p) => p.packageId === uiPackageId);
     (0, react_1.useEffect)(() => {
-        if (!pkg)
+        if (!pkg || peersUIs[peersUIId]?.content)
             return;
         const pkgRef = pkg;
         setLoadError(null);
@@ -290,11 +278,11 @@ const UIAsyncLoader = (props) => {
             console.error(`Failed to load UI bundle for package ${pkgRef.name}:`, error);
             setLoadError(error);
         });
-    }, [pkg?.packageId, pkg?.name, pkg]);
-    if (!pkg) {
+    }, [peersUIId, pkg?.packageId, pkg?.name, pkg]);
+    if (!peersUI?.content && !pkg) {
         return (0, jsx_runtime_1.jsxs)("div", { children: ["Could not find package that owns peersUIId ", peersUIId] });
     }
-    if (loadError) {
+    if (!peersUI?.content && loadError) {
         return ((0, jsx_runtime_1.jsxs)("div", { style: {
                 padding: "20px",
                 border: "2px solid #ff6b6b",
@@ -303,7 +291,7 @@ const UIAsyncLoader = (props) => {
                 color: "#721c24",
                 fontFamily: "monospace",
                 margin: "10px 0",
-            }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Bundle Loading Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package ID:" }), " ", pkg.packageId] })] }), (0, jsx_runtime_1.jsxs)("details", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsx)("summary", { style: { cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }, children: "Error Details" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+            }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Bundle Loading Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg?.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package ID:" }), " ", pkg?.packageId] })] }), (0, jsx_runtime_1.jsxs)("details", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsx)("summary", { style: { cursor: "pointer", fontWeight: "bold", marginBottom: "10px" }, children: "Error Details" }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                 backgroundColor: "#fed7d7",
                                 padding: "10px",
                                 borderRadius: "4px",
@@ -328,16 +316,15 @@ const UIAsyncLoader = (props) => {
                         cursor: "pointer",
                     }, children: "Retry Loading" })] }));
     }
-    if (!loaded) {
+    if (!peersUI?.content && !loaded) {
         return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
-    const peersUI = peersUIs[peersUIId];
     if (peersUI?.content) {
-        const _props = { ...props, uiVar: undefined };
+        const _props = props.props;
         try {
             peersUI.propsSchema.parse(_props);
             const Component = peersUI.content;
-            return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, packageName: pkg.name, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ..._props }) }));
+            return ((0, jsx_runtime_1.jsx)(UIErrorBoundary, { peersUIId: peersUIId, packageName: pkg?.name, componentName: peersUI.content?.name, children: (0, jsx_runtime_1.jsx)(Component, { ..._props }) }));
         }
         catch (parseError) {
             return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -348,7 +335,7 @@ const UIAsyncLoader = (props) => {
                     color: "#721c24",
                     fontFamily: "monospace",
                     margin: "10px 0",
-                }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Props Validation Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Component:" }), " ", peersUI.content?.name] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { color: "#c53030", marginTop: 0 }, children: "Props Validation Error" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Peers UI ID:" }), " ", peersUIId] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Package:" }), " ", pkg?.name] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Component:" }), " ", peersUI.content?.name] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                             backgroundColor: "#fed7d7",
                             padding: "10px",
                             borderRadius: "4px",

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

@@ -0,0 +1 @@
+export {};

package/dist/ui-router/ui-loader.test.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const react_2 = require("react");
+const mockPackages = [];
+const mockGetFileContents = jest.fn();
+jest.mock("@peers-app/peers-sdk", () => ({
+    debounceByArgs: (fn) => fn,
+    getUserContext: () => new Promise(() => { }),
+    packagePrefsVar: () => Object.assign(() => ({}), { loadingPromise: Promise.resolve() }),
+    PackageVersions: () => ({ get: async () => ({ uiBundleFileId: "bundle" }) }),
+    rpcServerCalls: { getFileContents: (...args) => mockGetFileContents(...args) },
+}));
+jest.mock("../globals", () => ({ mainContentPath: () => "", packageReloaded: () => 0 }));
+jest.mock("../hooks", () => ({ useObservable: (value) => [value()] }));
+jest.mock("../ui-defaults", () => ({}));
+jest.mock("../components/loading-indicator", () => ({
+    LoadingIndicator: () => (0, jsx_runtime_1.jsx)("p", { children: "Loading bundle" }),
+}));
+jest.mock("./routes-loader", () => ({ allPackages: () => mockPackages }));
+const ui_loader_1 = require("./ui-loader");
+test.each([
+    false,
+    true,
+])("query changes retain screen state and props (preloaded: %s)", async (preloaded) => {
+    const packageId = `package-${preloaded}`;
+    const peersUIId = `ui-${preloaded}`;
+    const base = `package-nav/${packageId}/app`;
+    let path = `${base}?jobId=first`;
+    const listeners = new Set();
+    let mounts = 0;
+    let unmounts = 0;
+    function Content({ caller }) {
+        const [draft, setDraft] = (0, react_2.useState)("");
+        const currentPath = (0, react_2.useSyncExternalStore)((listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        }, () => path);
+        (0, react_2.useEffect)(() => {
+            mounts++;
+            return () => {
+                unmounts++;
+            };
+        }, []);
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: caller }), (0, jsx_runtime_1.jsx)("p", { children: currentPath }), (0, jsx_runtime_1.jsx)("input", { "aria-label": "Draft", value: draft, onChange: (event) => setDraft(event.target.value) })] }));
+    }
+    const schema = { parse: (value) => value, safeParse: () => ({ success: true }) };
+    const ui = { peersUIId, content: Content, propsSchema: schema };
+    const routeWindow = window;
+    routeWindow.registerPeersUIRoute({ packageId, peersUIId, path: base });
+    mockPackages.length = 0;
+    mockGetFileContents.mockReset();
+    let releaseBundle;
+    if (preloaded) {
+        await (0, ui_loader_1.registerInternalPeersUI)({ component: Content, peersUIId, propsSchema: schema });
+    }
+    else {
+        mockPackages.push({ packageId, name: "Test package", activePackageVersionId: "version" });
+        routeWindow.testUI = ui;
+        mockGetFileContents.mockImplementation(() => new Promise((resolve) => {
+            releaseBundle = resolve;
+        }));
+    }
+    const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(ui_loader_1.UIRouter, { path: path, props: { caller: "Caller props" } }));
+    if (!preloaded) {
+        expect(await react_1.screen.findByText("Loading bundle")).toBeInTheDocument();
+        await (0, react_1.act)(async () => {
+            releaseBundle("exportUIs({uis: [window.testUI]});");
+        });
+    }
+    expect(await react_1.screen.findByText("Caller props")).toBeInTheDocument();
+    react_1.fireEvent.change(react_1.screen.getByLabelText("Draft"), { target: { value: "Unsaved edits" } });
+    await (0, react_1.act)(async () => {
+        path = `${base}?jobId=second`;
+        for (const listener of listeners)
+            listener();
+        view.rerender((0, jsx_runtime_1.jsx)(ui_loader_1.UIRouter, { path: path, props: { caller: "Caller props" } }));
+    });
+    expect(react_1.screen.getByLabelText("Draft")).toHaveValue("Unsaved edits");
+    expect(react_1.screen.getByText(path)).toBeInTheDocument();
+    expect({ mounts, unmounts, loads: mockGetFileContents.mock.calls.length }).toEqual({
+        mounts: 1,
+        unmounts: 0,
+        loads: preloaded ? 0 : 1,
+    });
+    view.unmount();
+    delete routeWindow.testUI;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.25.19",
+  "version": "0.25.21",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -30,7 +30,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.25.19",
+    "@peers-app/peers-sdk": "^0.25.21",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -41,7 +41,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.25.19",
+    "@peers-app/peers-sdk": "0.25.21",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/screens/packages/package-versions.tsx

@@ -43,7 +43,7 @@ function tagBadgeClass(tag?: string): string {
   return "text-bg-secondary";
 }
 
-/** Lists package versions with activate, promote, pin, edit-semver, and delete actions. */
+/** Lists package versions with activate, promote, pin, and delete actions. */
 export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
   const { pkg } = props;
   const refreshKey = useObservableState(0);
@@ -174,41 +174,6 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
     }
   }
 
-  async function updateVersion(pv: IPackageVersion, newSemver: string) {
-    try {
-      const pvHash = computePackageVersionHash(
-        newSemver,
-        pv.versionTag || "dev",
-        pv.packageBundleFileHash,
-        pv.routesBundleFileHash,
-        pv.uiBundleFileHash,
-      );
-      // Semver is part of the author-signed payload — re-sign or clear the old signature.
-      const authorSig = await rpcServerCalls.signPackageAuthorVersion({
-        packageId: pv.packageId,
-        packageVersionId: pv.packageVersionId,
-        version: newSemver,
-        versionTag: pv.versionTag,
-        packageBundleFileHash: pv.packageBundleFileHash,
-        routesBundleFileHash: pv.routesBundleFileHash,
-        uiBundleFileHash: pv.uiBundleFileHash,
-        appNavs: pv.appNavs,
-        createdBy: pv.createdBy,
-        createdAt: pv.createdAt,
-      });
-      const updated: IPackageVersion = {
-        ...pv,
-        version: newSemver,
-        packageVersionHash: pvHash,
-        packageAuthorSignature: authorSig,
-      };
-      await PackageVersions().signAndSave(updated, { saveAsSnapshot: true });
-      refreshKey(refreshKey() + 1);
-    } catch (err: unknown) {
-      alert(`Failed to update version: ${err instanceof Error ? err.message : String(err)}`);
-    }
-  }
-
   async function pinVersion() {
     setPinning(true);
     try {
@@ -270,7 +235,6 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
             onDelete={deleteVersion}
             onPin={pinVersion}
             onPromote={promoteVersion}
-            onUpdateVersion={updateVersion}
           />
         ))}
       </div>
@@ -305,26 +269,9 @@ function VersionRow(props: {
   onDelete: (pv: IPackageVersion) => void;
   onPin: () => void;
   onPromote: (pv: IPackageVersion, newTag: string) => void;
-  onUpdateVersion: (pv: IPackageVersion, newSemver: string) => void;
 }) {
   const { pv, isActive, isPinned, pinning, activating, deleting, userMap } = props;
   const creatorName = userMap.get(pv.createdBy);
-  const [editingVersion, setEditingVersion] = useState(false);
-  const [versionDraft, setVersionDraft] = useState(pv.version);
-
-  function startEditing() {
-    setVersionDraft(pv.version);
-    setEditingVersion(true);
-  }
-
-  function commitVersion() {
-    const trimmed = versionDraft.trim();
-    if (trimmed && trimmed !== pv.version) {
-      props.onUpdateVersion(pv, trimmed);
-    }
-    setEditingVersion(false);
-  }
-
   const currentTag = pv.versionTag || "dev";
   const promoteTargets = getPromoteTargets(currentTag);
 
@@ -332,29 +279,8 @@ function VersionRow(props: {
     <div className={`list-group-item ${isActive ? "list-group-item-success" : ""}`}>
       <div className="d-flex align-items-center justify-content-between">
         <div className="d-flex align-items-center flex-wrap">
-          {editingVersion ? (
-            <input
-              type="text"
-              className="form-control form-control-sm me-2"
-              style={{ width: "7em" }}
-              value={versionDraft}
-              onChange={(e) => setVersionDraft(e.target.value)}
-              onBlur={commitVersion}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") commitVersion();
-                if (e.key === "Escape") setEditingVersion(false);
-              }}
-            />
-          ) : (
-            <strong
-              className="me-2"
-              style={{ cursor: "pointer" }}
-              onClick={startEditing}
-              title="Click to edit version"
-            >
-              v{pv.version}
-            </strong>
-          )}
+          {/* The number is the version baked into the bundle. Relabeling it desyncs isolated packages. */}
+          <strong className="me-2">v{pv.version}</strong>
           {pv.versionTag && (
             <span className={`badge ${tagBadgeClass(pv.versionTag)} me-2`}>{pv.versionTag}</span>
           )}

package/src/ui-router/ui-loader.test.tsx

@@ -0,0 +1,108 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+const mockPackages: Record<string, unknown>[] = [];
+const mockGetFileContents = jest.fn();
+jest.mock("@peers-app/peers-sdk", () => ({
+  debounceByArgs: (fn: unknown) => fn,
+  getUserContext: () => new Promise(() => {}),
+  packagePrefsVar: () => Object.assign(() => ({}), { loadingPromise: Promise.resolve() }),
+  PackageVersions: () => ({ get: async () => ({ uiBundleFileId: "bundle" }) }),
+  rpcServerCalls: { getFileContents: (...args: unknown[]) => mockGetFileContents(...args) },
+}));
+jest.mock("../globals", () => ({ mainContentPath: () => "", packageReloaded: () => 0 }));
+jest.mock("../hooks", () => ({ useObservable: (value: () => unknown) => [value()] }));
+jest.mock("../ui-defaults", () => ({}));
+jest.mock("../components/loading-indicator", () => ({
+  LoadingIndicator: () => <p>Loading bundle</p>,
+}));
+jest.mock("./routes-loader", () => ({ allPackages: () => mockPackages }));
+
+import { registerInternalPeersUI, UIRouter } from "./ui-loader";
+
+test.each([
+  false,
+  true,
+])("query changes retain screen state and props (preloaded: %s)", async (preloaded) => {
+  const packageId = `package-${preloaded}`;
+  const peersUIId = `ui-${preloaded}`;
+  const base = `package-nav/${packageId}/app`;
+  let path = `${base}?jobId=first`;
+  const listeners = new Set<() => void>();
+  let mounts = 0;
+  let unmounts = 0;
+  function Content({ caller }: { caller: string }) {
+    const [draft, setDraft] = useState("");
+    const currentPath = useSyncExternalStore(
+      (listener) => {
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      },
+      () => path,
+    );
+    useEffect(() => {
+      mounts++;
+      return () => {
+        unmounts++;
+      };
+    }, []);
+    return (
+      <>
+        <p>{caller}</p>
+        <p>{currentPath}</p>
+        <input
+          aria-label="Draft"
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+        />
+      </>
+    );
+  }
+  const schema = { parse: (value: unknown) => value, safeParse: () => ({ success: true }) };
+  const ui = { peersUIId, content: Content, propsSchema: schema };
+  const routeWindow = window as unknown as {
+    registerPeersUIRoute: (route: object) => void;
+    testUI?: object;
+  };
+  routeWindow.registerPeersUIRoute({ packageId, peersUIId, path: base });
+  mockPackages.length = 0;
+  mockGetFileContents.mockReset();
+  let releaseBundle!: (code: string) => void;
+  if (preloaded) {
+    await registerInternalPeersUI({ component: Content, peersUIId, propsSchema: schema });
+  } else {
+    mockPackages.push({ packageId, name: "Test package", activePackageVersionId: "version" });
+    routeWindow.testUI = ui;
+    mockGetFileContents.mockImplementation(
+      () =>
+        new Promise<string>((resolve) => {
+          releaseBundle = resolve;
+        }),
+    );
+  }
+  const view = render(<UIRouter path={path} props={{ caller: "Caller props" }} />);
+  if (!preloaded) {
+    expect(await screen.findByText("Loading bundle")).toBeInTheDocument();
+    await act(async () => {
+      releaseBundle("exportUIs({uis: [window.testUI]});");
+    });
+  }
+  expect(await screen.findByText("Caller props")).toBeInTheDocument();
+  fireEvent.change(screen.getByLabelText("Draft"), { target: { value: "Unsaved edits" } });
+  await act(async () => {
+    path = `${base}?jobId=second`;
+    for (const listener of listeners) listener();
+    view.rerender(<UIRouter path={path} props={{ caller: "Caller props" }} />);
+  });
+  expect(screen.getByLabelText("Draft")).toHaveValue("Unsaved edits");
+  expect(screen.getByText(path)).toBeInTheDocument();
+  expect({ mounts, unmounts, loads: mockGetFileContents.mock.calls.length }).toEqual({
+    mounts: 1,
+    unmounts: 0,
+    loads: preloaded ? 0 : 1,
+  });
+  view.unmount();
+  delete routeWindow.testUI;
+});

package/src/ui-router/ui-loader.tsx

@@ -239,7 +239,7 @@ export const UIRouter = (props: IProps) => {
     return undefined;
   }
 
-  return UILoader({ peersUIId: matchingRoute.peersUIId, props: props.props });
+  return <UILoader peersUIId={matchingRoute.peersUIId} props={props.props} />;
 };
 
 const UILoader = (args: { peersUIId: string; props?: Record<string, unknown> }) => {
@@ -249,40 +249,9 @@ const UILoader = (args: { peersUIId: string; props?: Record<string, unknown> })
   const { props, peersUIId } = args;
   const [lastReloadTime] = useObservable(packageReloaded);
   props.__lastPackageReload = lastReloadTime;
-  // check if peersUIId maps to an in-memory react component
-  const peersUI = peersUIs[peersUIId];
-  if (peersUI?.content) {
-    const parseResult = peersUI.propsSchema.safeParse(props);
-    if (!parseResult.success) {
-      console.error("props did not match schema", {
-        props,
-        schema: peersUI.propsSchema,
-        errors: parseResult.error,
-      });
-      return (
-        <div>
-          <pre>
-            Peers UI could not be loaded <br />
-            peersUIId: {peersUI.peersUIId} <br />
-            Component name: {peersUI.content?.name} <br />
-            Props did not match schema <br />
-            Errors: {JSON.stringify(parseResult.error, null, 2)} <br />
-            <br />
-            Props {JSON.stringify(toJSON(props), null, 2)}
-            <br />
-          </pre>
-        </div>
-      );
-    }
-    const Component = peersUI.content as React.ComponentType<Record<string, unknown>>;
-    return (
-      <UIErrorBoundary peersUIId={peersUIId} componentName={peersUI.content?.name}>
-        <Component {...args.props} />
-      </UIErrorBoundary>
-    );
-  }
-
-  return <UIAsyncLoader peersUIId={peersUIId} props={props} />;
+  // Keep the same loader ancestor after the bundle enters the cache. Replacing it
+  // on a path change would unmount the screen before its navigation guard can run.
+  return <UIAsyncLoader key={peersUIId} peersUIId={peersUIId} props={props} />;
 };
 
 const uiLoadingPromises: Record<string, Promise<void>> = {};
@@ -379,6 +348,7 @@ function loadUIBundle(pkg: IPackage, forceRefresh?: boolean) {
 
 const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown> }) => {
   const { peersUIId } = props;
+  const peersUI = peersUIs[peersUIId];
   const [loaded, setLoaded] = React.useState(false);
   const [loadError, setLoadError] = React.useState<Error | null>(null);
 
@@ -389,7 +359,7 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
   const pkg = allPackages().find((p) => p.packageId === uiPackageId);
 
   useEffect(() => {
-    if (!pkg) return;
+    if (!pkg || peersUIs[peersUIId]?.content) return;
     const pkgRef = pkg;
     setLoadError(null);
     loadUIBundle(pkgRef)
@@ -398,13 +368,13 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
         console.error(`Failed to load UI bundle for package ${pkgRef.name}:`, error);
         setLoadError(error);
       });
-  }, [pkg?.packageId, pkg?.name, pkg]);
+  }, [peersUIId, pkg?.packageId, pkg?.name, pkg]);
 
-  if (!pkg) {
+  if (!peersUI?.content && !pkg) {
     return <div>Could not find package that owns peersUIId {peersUIId}</div>;
   }
 
-  if (loadError) {
+  if (!peersUI?.content && loadError) {
     return (
       <div
         style={{
@@ -423,10 +393,10 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
             <strong>Peers UI ID:</strong> {peersUIId}
           </div>
           <div>
-            <strong>Package:</strong> {pkg.name}
+            <strong>Package:</strong> {pkg?.name}
           </div>
           <div>
-            <strong>Package ID:</strong> {pkg.packageId}
+            <strong>Package ID:</strong> {pkg?.packageId}
           </div>
         </div>
 
@@ -484,20 +454,19 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
     );
   }
 
-  if (!loaded) {
+  if (!peersUI?.content && !loaded) {
     return <LoadingIndicator />;
   }
 
-  const peersUI = peersUIs[peersUIId];
   if (peersUI?.content) {
-    const _props = { ...props, uiVar: undefined };
+    const _props = props.props;
     try {
       peersUI.propsSchema.parse(_props);
       const Component = peersUI.content as React.ComponentType<Record<string, unknown>>;
       return (
         <UIErrorBoundary
           peersUIId={peersUIId}
-          packageName={pkg.name}
+          packageName={pkg?.name}
           componentName={peersUI.content?.name}
         >
           <Component {..._props} />
@@ -522,7 +491,7 @@ const UIAsyncLoader = (props: { peersUIId: string; props: Record<string, unknown
               <strong>Peers UI ID:</strong> {peersUIId}
             </div>
             <div>
-              <strong>Package:</strong> {pkg.name}
+              <strong>Package:</strong> {pkg?.name}
             </div>
             <div>
               <strong>Component:</strong> {peersUI.content?.name}