@peers-app/peers-ui 0.18.8 → 0.19.6

package/README.md

@@ -0,0 +1,83 @@
+# @peers-app/peers-ui
+
+React components and hooks for building [Peers](https://peers.app) package UIs.
+
+## What is Peers?
+
+Peers is a local-first personal computing platform. Your data lives on your devices, syncs peer-to-peer, and is end-to-end encrypted — no servers in the middle. You own your data and your identity. Build apps with the SDK or use AI coding tools to create them; either way, the platform handles sync, encryption, and persistence automatically.
+
+## What this package provides
+
+### React Hooks
+
+Hooks that bridge `@peers-app/peers-sdk` observables to React 18 with concurrent rendering support.
+
+| Hook | Purpose |
+|------|---------|
+| `useObservable` | Subscribe to an observable or computed; returns `[value, setter]` |
+| `useObservableState` | Create a component-local observable that persists across renders |
+| `usePromise` | Resolve a promise in a component with an optional initial value |
+| `useSubscription` | Run a side-effect whenever an observable changes |
+| `useOnScreen` | IntersectionObserver hook for visibility detection |
+
+### Rich Text
+
+- **`MarkdownEditor`** — Lexical-based rich text editor with @mention support, toolbar, and markdown serialization
+- **`MarkdownWithMentions`** — Render markdown with resolved @user and $tool mentions
+
+### Layout
+
+- **`TabsLayout`** — Multi-tab application shell used by the Peers desktop and PWA clients
+- **`SortableList`** — Drag-and-drop list powered by SortableJS
+- **`InverseLazyList`** — Bottom-anchored lazy-loading list for chat-style UIs
+- **`Tabs`** / **`ScreenTabBody`** — Tab strip and content container
+
+### Communication
+
+- **`ChatOverlay`** — Floating chat panel for AI assistant conversations
+- **`VoiceIndicator`** — Visual indicator for active voice sessions
+
+### Tab Management
+
+| Export | Purpose |
+|--------|---------|
+| `goToTabPath` | Navigate to a path within the Peers tab system |
+| `activeTabId` | Observable of the currently active tab ID |
+| `activeTabs` | Observable of all open tabs |
+| `closeCurrentTab` | Close the active tab |
+| `updateActiveTabTitle` | Set the title of the active tab |
+| `TabState` | Tab state management class |
+| `mainContentPath` | Hash-synced route observable |
+
+## Peer Dependencies
+
+```json
+{
+  "@peers-app/peers-sdk": "^0.18.8",
+  "bootstrap": "^5.3.3",
+  "react": "^18.0.0",
+  "react-dom": "^18.0.0"
+}
+```
+
+## Quick Start
+
+```bash
+npm install @peers-app/peers-ui
+```
+
+The fastest way to build a Peers package with a UI is to start from the template:
+
+**[peers-package-template](https://github.com/peers-app/peers-package-template)** — scaffold, build, and install a custom package into the Peers runtime.
+
+Package UI bundles receive `PeersUI` as a webpack external, so you can import hooks and components without bundling them into your package.
+
+## Links
+
+- [peers.app](https://peers.app) — try Peers in your browser or download the desktop app
+- [Documentation](https://peers-app.github.io) — architecture, package development, and API reference
+- [GitHub](https://github.com/peers-app) — source repositories and package template
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from "./components/markdown-editor/editor-inline";
 export * from "./components/markdown-with-mentions";
 export * from "./components/sortable-list";
 export * from "./components/tabs";
+export { Typeahead, type TypeaheadItem } from "./components/typeahead";
 export * from "./components/voice-indicator";
 export { mainContentPath } from "./globals";
 export * from "./hooks";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateActiveTabTitle = exports.goToTabPath = exports.closeCurrentTab = exports.activeTabs = exports.activeTabId = exports.mainContentPath = exports.MarkdownEditor = void 0;
+exports.updateActiveTabTitle = exports.goToTabPath = exports.closeCurrentTab = exports.activeTabs = exports.activeTabId = exports.mainContentPath = exports.Typeahead = exports.MarkdownEditor = void 0;
 __exportStar(require("./components/chat-overlay"), exports);
 __exportStar(require("./components/inverse-lazy-list"), exports);
 var editor_1 = require("./components/markdown-editor/editor");
@@ -23,6 +23,8 @@ __exportStar(require("./components/markdown-editor/editor-inline"), exports);
 __exportStar(require("./components/markdown-with-mentions"), exports);
 __exportStar(require("./components/sortable-list"), exports);
 __exportStar(require("./components/tabs"), exports);
+var typeahead_1 = require("./components/typeahead");
+Object.defineProperty(exports, "Typeahead", { enumerable: true, get: function () { return typeahead_1.Typeahead; } });
 __exportStar(require("./components/voice-indicator"), exports);
 var globals_1 = require("./globals");
 Object.defineProperty(exports, "mainContentPath", { enumerable: true, get: function () { return globals_1.mainContentPath; } });

package/dist/screens/groups/group-list.js

@@ -111,9 +111,7 @@ function GroupList() {
         });
         await (0, peers_sdk_1.Groups)(groupDataContext).signAndSave(group);
         // Auto-install peers-core for the new group
-        await peers_sdk_1.rpcServerCalls
-            .addOrUpdatePackage(peers_sdk_1.peersCorePackageId, { dataContextId: groupId })
-            .catch((err) => {
+        await peers_sdk_1.rpcServerCalls.seedBundledPeersCore(groupId).catch((err) => {
             console.error("Error auto-installing peers-core for group:", err);
         });
         (0, globals_1.mainContentPath)(`groups/${group.groupId}`);

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

@@ -1,5 +1,6 @@
 interface IProps {
     packageId: string;
 }
+/** Detail screen for a single package with Info, Versions, Components, and Dependencies tabs. */
 export declare const PackageDetails: (props: IProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,12 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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");
@@ -15,9 +11,9 @@ const hooks_1 = require("../../hooks");
 const tabs_state_1 = require("../../tabs-layout/tabs-state");
 const package_info_1 = require("./package-info");
 const package_versions_1 = require("./package-versions");
+/** Detail screen for a single package with Info, Versions, Components, and Dependencies tabs. */
 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) {
@@ -61,11 +57,10 @@ const PackageDetails = (props) => {
     }
     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 }) })),
+                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: (0, jsx_runtime_1.jsx)(package_info_1.PackageInfo, { pkg: pkg }) })),
                     },
                     {
                         name: "Versions",

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

@@ -0,0 +1,33 @@
+import { type IPackageVersion } from "@peers-app/peers-sdk";
+/** Severity of a version update: major > minor > patch. */
+export type UpdateLevel = "major" | "minor" | "patch" | null;
+/** Result of checking a package's version status against available versions. */
+export interface IVersionStatus {
+    activePv: IPackageVersion;
+    newerLevel: UpdateLevel;
+    newestPv: IPackageVersion | null;
+}
+/**
+ * Check a package's version status: what's currently active, whether a newer
+ * version exists within the follow policy, and which version is the best
+ * upgrade candidate.
+ *
+ * @param packageId - The package to check.
+ * @param activePackageVersionId - The effective active version (device or group).
+ * @param followVersionTags - Tag filter from effective prefs.
+ */
+export declare function checkVersionStatus(packageId: string, activePackageVersionId: string, followVersionTags: string | undefined): Promise<IVersionStatus | null>;
+/** Whether the current user is an admin of the active group. */
+export declare function isGroupAdmin(): Promise<boolean>;
+/**
+ * Activate a specific package version, handling group-level vs device-local
+ * activation. When the device has no follow override and the user is a group
+ * admin, the group's `activePackageVersionId` is advanced so all devices
+ * stay in sync. Otherwise only the device-local prefs are updated.
+ *
+ * @param packageId - The package to activate a version for.
+ * @param pv - The package version to activate.
+ */
+export declare function activatePackageVersion(packageId: string, pv: IPackageVersion): Promise<void>;
+/** Numeric rank for sorting packages by update urgency. */
+export declare const updateLevelRank: Record<string, number>;

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

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateLevelRank = void 0;
+exports.checkVersionStatus = checkVersionStatus;
+exports.isGroupAdmin = isGroupAdmin;
+exports.activatePackageVersion = activatePackageVersion;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+/**
+ * Check a package's version status: what's currently active, whether a newer
+ * version exists within the follow policy, and which version is the best
+ * upgrade candidate.
+ *
+ * @param packageId - The package to check.
+ * @param activePackageVersionId - The effective active version (device or group).
+ * @param followVersionTags - Tag filter from effective prefs.
+ */
+async function checkVersionStatus(packageId, activePackageVersionId, followVersionTags) {
+    const all = await (0, peers_sdk_1.PackageVersions)().list({ packageId });
+    const active = all.find((v) => v.packageVersionId === activePackageVersionId);
+    if (!active)
+        return null;
+    let newerLevel = null;
+    let newestPv = null;
+    if (active.version) {
+        const parse = (v) => v.split(".").map(Number);
+        const [aMaj, aMin, aPat] = parse(active.version);
+        let bestVersion = active.version;
+        for (const v of all) {
+            if (!v.version || v.packageVersionId === activePackageVersionId)
+                continue;
+            if (!(0, peers_sdk_1.doesTagMatch)(active.versionTag, v.versionTag, followVersionTags, undefined))
+                continue;
+            const [maj, min, pat] = parse(v.version);
+            const [bMaj, bMin, bPat] = parse(bestVersion);
+            let candidateLevel = null;
+            if (maj > aMaj)
+                candidateLevel = "major";
+            else if (maj === aMaj && min > aMin)
+                candidateLevel = "minor";
+            else if (maj === aMaj && min === aMin && pat > aPat)
+                candidateLevel = "patch";
+            else if (maj === aMaj &&
+                min === aMin &&
+                pat === aPat &&
+                (v.createdAt || "") > (active.createdAt || ""))
+                candidateLevel = "patch";
+            if (!candidateLevel)
+                continue;
+            const levelRank = { major: 3, minor: 2, patch: 1 };
+            if (!newerLevel || levelRank[candidateLevel] > levelRank[newerLevel]) {
+                newerLevel = candidateLevel;
+            }
+            const isHigherThanBest = maj > bMaj ||
+                (maj === bMaj && min > bMin) ||
+                (maj === bMaj && min === bMin && pat > bPat) ||
+                (maj === bMaj &&
+                    min === bMin &&
+                    pat === bPat &&
+                    (v.createdAt || "") > (newestPv?.createdAt || active.createdAt || ""));
+            if (!newestPv || isHigherThanBest) {
+                newestPv = v;
+                bestVersion = v.version;
+            }
+        }
+    }
+    return { activePv: active, newerLevel, newestPv };
+}
+/** Whether the current user is an admin of the active group. */
+async function isGroupAdmin() {
+    try {
+        const userCtx = await (0, peers_sdk_1.getUserContext)();
+        const dc = userCtx.defaultDataContext();
+        const contextId = dc?.groupId || dc?.dataContextId;
+        if (!contextId)
+            return false;
+        const role = await (0, peers_sdk_1.getUserRole)(contextId, userCtx.userId);
+        return role >= peers_sdk_1.GroupMemberRole.Admin;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Activate a specific package version, handling group-level vs device-local
+ * activation. When the device has no follow override and the user is a group
+ * admin, the group's `activePackageVersionId` is advanced so all devices
+ * stay in sync. Otherwise only the device-local prefs are updated.
+ *
+ * @param packageId - The package to activate a version for.
+ * @param pv - The package version to activate.
+ */
+async function activatePackageVersion(packageId, pv) {
+    const prefsVar = (0, peers_sdk_1.packagePrefsVar)(packageId);
+    await prefsVar.loadingPromise;
+    const devicePrefs = prefsVar();
+    const activatesGroup = pv.versionTag !== "dev" && !(0, peers_sdk_1.hasDeviceFollowOverride)(devicePrefs) && (await isGroupAdmin());
+    if (activatesGroup) {
+        const current = await (0, peers_sdk_1.Packages)().get(packageId);
+        if (current) {
+            current.activePackageVersionId = pv.packageVersionId;
+            await (0, peers_sdk_1.Packages)().signAndSave(current);
+        }
+        await (0, peers_sdk_1.updatePackagePrefs)(packageId, { activePackageVersionId: undefined });
+    }
+    else {
+        await (0, peers_sdk_1.updatePackagePrefs)(packageId, { activePackageVersionId: pv.packageVersionId });
+    }
+}
+/** Numeric rank for sorting packages by update urgency. */
+exports.updateLevelRank = { major: 3, minor: 2, patch: 1 };

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

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

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

@@ -1,19 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PackageInfo = 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 markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
 const tooltip_1 = require("../../components/tooltip");
 const hooks_1 = require("../../hooks");
+/** Info tab for the package details screen. */
 const PackageInfo = (props) => {
     const { pkg } = props;
     const [followVersionTags] = (0, hooks_1.useObservable)(pkg.qs.followVersionTags);
+    const [versionFollowRange] = (0, hooks_1.useObservable)(pkg.qs.versionFollowRange);
     const localPathVar = (0, peers_sdk_1.groupDeviceVar)(`packageLocalPath_${pkg.packageId}`, {
         defaultValue: `${peers_sdk_1.packagesRootDir}/${pkg.name}`,
     });
@@ -21,43 +19,13 @@ const PackageInfo = (props) => {
     const [devicePrefs] = (0, hooks_1.useObservable)((0, peers_sdk_1.packagePrefsVar)(pkg.packageId));
     const effective = (0, peers_sdk_1.getEffectivePackagePrefs)(pkg.toJS(), devicePrefs);
     const activeVersionId = effective.activePackageVersionId;
-    const deviceFollowTags = devicePrefs?.followTags;
     const isPinned = effective.isPinned;
     const followRange = effective.followRange;
-    const [deviceTagDraft, setDeviceTagDraft] = react_1.default.useState(deviceFollowTags || "");
-    const savingRef = react_1.default.useRef(false);
-    react_1.default.useEffect(() => {
-        if (!savingRef.current) {
-            setDeviceTagDraft(deviceFollowTags || "");
-        }
-    }, [deviceFollowTags]);
-    const deviceTagDirty = deviceTagDraft.trim() !== (deviceFollowTags || "");
-    const prevDirtyRef = react_1.default.useRef(false);
-    react_1.default.useEffect(() => {
-        if (deviceTagDirty && !prevDirtyRef.current) {
-            pkg.q((pkg.q() || 0) + 1);
-        }
-        else if (!deviceTagDirty && prevDirtyRef.current) {
-            pkg.q(Math.max(0, (pkg.q() || 0) - 1));
-        }
-        prevDirtyRef.current = deviceTagDirty;
-    }, [deviceTagDirty, pkg.q]);
-    if (props.saveDeviceTagRef) {
-        props.saveDeviceTagRef.current = async () => {
-            const val = deviceTagDraft.trim();
-            if (val !== (deviceFollowTags || "")) {
-                savingRef.current = true;
-                try {
-                    await (0, peers_sdk_1.updatePackagePrefs)(pkg.packageId, {
-                        followTags: val || undefined,
-                    });
-                }
-                finally {
-                    savingRef.current = false;
-                }
-            }
-        };
-    }
+    const hasOverride = (0, peers_sdk_1.hasDeviceFollowOverride)(devicePrefs);
+    const groupFollowTags = followVersionTags === "stable,beta" ? "stable,beta" : "stable";
+    const groupRange = versionFollowRange || "latest";
+    const effectiveFollowTags = effective.followTags || "stable";
+    const followTagsValue = effectiveFollowTags === "stable,beta" ? "stable,beta" : "stable";
     const activeVersion = (0, hooks_1.usePromise)(async () => {
         if (!activeVersionId)
             return null;
@@ -70,7 +38,6 @@ const PackageInfo = (props) => {
         const active = all.find((v) => v.packageVersionId === activeVersionId);
         if (!active?.version)
             return "uptodate";
-        const effectiveFollowTags = deviceFollowTags || followVersionTags;
         const parse = (v) => v.split(".").map(Number);
         const [aMaj, aMin, aPat] = parse(active.version);
         let highest = null;
@@ -99,18 +66,56 @@ const PackageInfo = (props) => {
             }
         }
         return highest || "uptodate";
-    }, undefined, [activeVersionId, pkg.packageId, followVersionTags, deviceFollowTags]);
+    }, undefined, [activeVersionId, pkg.packageId, effectiveFollowTags]);
     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 === "dev" ? "text-bg-danger" : activeVersion.versionTag.startsWith("beta") ? "text-bg-warning" : "text-bg-success"} 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 (this device):", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Controls which new versions are auto-activated on this device. **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: isPinned ? "pinned" : followRange, onChange: async (e) => {
+                                        }, 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 === "dev" ? "text-bg-danger" : activeVersion.versionTag.startsWith("beta") ? "text-bg-warning" : "text-bg-success"} 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 for the group. When an admin device auto-upgrades, the group's active version advances for everyone. **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: groupRange, onChange: async (e) => {
+                                    const val = e.target.value;
+                                    const current = await (0, peers_sdk_1.Packages)().get(pkg.packageId);
+                                    if (current) {
+                                        current.versionFollowRange = val;
+                                        await (0, peers_sdk_1.Packages)().signAndSave(current);
+                                        await pkg.load();
+                                    }
+                                }, 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 ${groupRange === "pinned" ? "opacity-50" : ""}`, children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Following:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Which release channel the group follows. Devices using group settings will auto-upgrade within this channel. **Stable** = only fully promoted releases. **Stable + Beta** = also includes beta pre-releases for early testing." })] }), (0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm", value: groupFollowTags, disabled: groupRange === "pinned", onChange: async (e) => {
                                     const val = e.target.value;
-                                    await (0, peers_sdk_1.updatePackagePrefs)(pkg.packageId, {
-                                        pinned: val === "pinned",
-                                        followRange: val === "pinned" ? 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 (this device):", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Which version tags to auto-activate on this device. Leave empty to follow the group's tag policy. Use `*` for any tag, or a comma-separated list like `stable,beta`." })] }), (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: `Following "${activeVersion?.versionTag || "stable"}"`, value: deviceTagDraft, onChange: (e) => setDeviceTagDraft(e.target.value), disabled: isPinned }), 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 || "" })] })] }));
+                                    const current = await (0, peers_sdk_1.Packages)().get(pkg.packageId);
+                                    if (current) {
+                                        current.followVersionTags = val === "stable" ? undefined : val;
+                                        await (0, peers_sdk_1.Packages)().signAndSave(current);
+                                        await pkg.load();
+                                    }
+                                }, children: [(0, jsx_runtime_1.jsx)("option", { value: "stable", children: "Stable" }), (0, jsx_runtime_1.jsx)("option", { value: "stable,beta", children: "Stable + Beta" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "form-check", children: [(0, jsx_runtime_1.jsx)("input", { className: "form-check-input", type: "checkbox", id: `deviceOverride_${pkg.packageId}`, checked: hasOverride, onChange: async (e) => {
+                                        if (e.target.checked) {
+                                            await (0, peers_sdk_1.updatePackagePrefs)(pkg.packageId, {
+                                                followRange: groupRange === "pinned"
+                                                    ? undefined
+                                                    : groupRange,
+                                                followTags: followVersionTags || undefined,
+                                                pinned: groupRange === "pinned" ? true : undefined,
+                                            });
+                                        }
+                                        else {
+                                            await (0, peers_sdk_1.updatePackagePrefs)(pkg.packageId, {
+                                                followRange: undefined,
+                                                followTags: undefined,
+                                                pinned: undefined,
+                                            });
+                                        }
+                                    } }), (0, jsx_runtime_1.jsx)("label", { className: "form-check-label", htmlFor: `deviceOverride_${pkg.packageId}`, children: (0, jsx_runtime_1.jsx)("small", { children: "Override on this device" }) }), (0, jsx_runtime_1.jsx)("small", { children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `**Off:** This device follows the group's auto-update and channel settings. When an admin device upgrades, the group's active version advances for all devices.\n\n**On:** This device uses its own settings below. Upgrades only affect this device — the group's active version is not changed.` }) })] }) }), hasOverride && ((0, jsx_runtime_1.jsxs)("div", { className: "ps-3 border-start mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Auto-Update Range (this device):", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Controls which new versions are auto-activated on **this device only**. Upgrades here do not change the group's active version." })] }), (0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm", value: isPinned ? "pinned" : followRange, onChange: async (e) => {
+                                            const val = e.target.value;
+                                            await (0, peers_sdk_1.updatePackagePrefs)(pkg.packageId, {
+                                                pinned: val === "pinned",
+                                                followRange: val === "pinned" ? 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: isPinned ? "opacity-50" : "", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Following (this device):", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Which release channel to follow on **this device only**, overriding the group setting." })] }), (0, jsx_runtime_1.jsxs)("select", { className: "form-select form-select-sm", value: followTagsValue, disabled: isPinned, onChange: async (e) => {
+                                            const val = e.target.value;
+                                            await (0, peers_sdk_1.updatePackagePrefs)(pkg.packageId, {
+                                                followTags: val === "stable" ? "stable" : val,
+                                            });
+                                        }, children: [(0, jsx_runtime_1.jsx)("option", { value: "stable", children: "Stable" }), (0, jsx_runtime_1.jsx)("option", { value: "stable,beta", children: "Stable + Beta" })] })] })] }))] }), (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;