@peers-app/peers-ui 0.25.1 → 0.25.3

package/dist/tabs-layout/tabs-state.test.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+jest.mock("../globals", () => {
+    const { observable } = jest.requireActual("@peers-app/peers-sdk");
+    return { _mainContentPath: observable("") };
+});
+jest.mock("../ui-router/routes-loader", () => {
+    const { observable } = jest.requireActual("@peers-app/peers-sdk");
+    return { allPackages: observable([]) };
+});
+jest.mock("@peers-app/peers-sdk", () => {
+    const actual = jest.requireActual("@peers-app/peers-sdk");
+    let nextId = 0;
+    const deviceVars = new Map();
+    const userVars = new Map();
+    function stored(map, id, initial) {
+        const existing = map.get(id);
+        if (existing) {
+            return existing;
+        }
+        const value = actual.observable(initial);
+        Object.assign(value, { loadingPromise: Promise.resolve() });
+        map.set(id, value);
+        return value;
+    }
+    return {
+        ...actual,
+        newid: () => `tab${++nextId}`,
+        groupDeviceVar: (id, options) => stored(deviceVars, id, options?.defaultValue),
+        groupUserVar: (id, options) => stored(userVars, id, options?.defaultValue),
+    };
+});
+const globals_1 = require("../globals");
+const tabs_state_1 = require("./tabs-state");
+const PERSON_ID = "abcdefghijklmnopqrstuvwxy";
+function tab(partial) {
+    return {
+        packageId: "system-apps",
+        title: partial.path,
+        iconClassName: "bi-circle",
+        ...partial,
+    };
+}
+describe("restoreNavigationState", () => {
+    it("merges legacy identity tabs into the active Identity tab", () => {
+        const restored = (0, tabs_state_1.restoreNavigationState)([
+            tabs_state_1.launcherApp,
+            tab({ tabId: "people", path: "contacts", title: "Contacts" }),
+            tab({ tabId: "groups", path: `groups/${PERSON_ID}`, title: "Groups" }),
+            tab({ tabId: "devices", path: "devices?action=pair", title: "Devices" }),
+            tab({ tabId: "account", path: "account", title: "Account" }),
+        ], "groups");
+        expect(restored.tabs.map((entry) => entry.path)).toEqual(["", `identity/groups/${PERSON_ID}`]);
+        expect(restored.activeId).toBe("groups");
+        expect(restored.tabs[1]?.title).toBe("Identity");
+        expect((0, tabs_state_1.migrateRecentPath)("contacts")).toBe("identity");
+        expect((0, tabs_state_1.migrateRecentPath)("invites/accept")).toBe("identity");
+        expect((0, tabs_state_1.migrateRecentPath)("account")).toBe("identity");
+    });
+});
+describe("navigateTo", () => {
+    beforeEach(async () => {
+        await tabs_state_1.activeTabs.loadingPromise;
+        (0, tabs_state_1.activeTabs)([tabs_state_1.launcherApp, tab({ tabId: "threads", path: "threads", title: "Threads" })]);
+        (0, tabs_state_1.activeTabId)("threads");
+        (0, tabs_state_1.recentlyUsedApps)([]);
+        (0, globals_1._mainContentPath)("threads");
+    });
+    it("updates the same app in place and preserves the query", () => {
+        (0, tabs_state_1.navigateTo)("threads/thread-1?draft=1");
+        expect((0, tabs_state_1.activeTabs)()).toHaveLength(2);
+        expect((0, tabs_state_1.activeTabs)().find((entry) => entry.tabId === "threads")?.path).toBe("threads/thread-1?draft=1");
+        expect((0, tabs_state_1.activeTabId)()).toBe("threads");
+        expect((0, globals_1._mainContentPath)()).toBe("threads/thread-1?draft=1");
+    });
+    it("opens another app without duplicating an existing tab", () => {
+        (0, tabs_state_1.navigateTo)(`contacts/${PERSON_ID}`);
+        const identityId = (0, tabs_state_1.activeTabId)();
+        (0, tabs_state_1.activeTabId)("threads");
+        (0, tabs_state_1.navigateTo)("identity/devices?foo=bar");
+        const identityTabs = (0, tabs_state_1.activeTabs)().filter((entry) => entry.path.startsWith("identity"));
+        expect(identityTabs).toHaveLength(1);
+        expect(identityTabs[0]?.path).toBe("identity/devices?foo=bar");
+        expect((0, tabs_state_1.activeTabId)()).toBe(identityId);
+        expect((0, tabs_state_1.activeTabs)().some((entry) => entry.tabId === "threads")).toBe(true);
+    });
+    it("opens the account alias inside the Identity tab", () => {
+        (0, tabs_state_1.navigateTo)("account");
+        const identityId = (0, tabs_state_1.activeTabId)();
+        expect((0, globals_1._mainContentPath)()).toBe("identity/account");
+        (0, tabs_state_1.navigateTo)("identity/people");
+        expect((0, tabs_state_1.activeTabId)()).toBe(identityId);
+        expect((0, tabs_state_1.activeTabs)().filter((entry) => entry.path.startsWith("identity"))).toHaveLength(1);
+        expect((0, globals_1._mainContentPath)()).toBe("identity/people");
+    });
+    it("rewrites invite acceptance onto the open Identity tab", () => {
+        (0, tabs_state_1.navigateTo)("identity/people");
+        const identityId = (0, tabs_state_1.activeTabId)();
+        (0, tabs_state_1.navigateTo)("invites/accept");
+        expect((0, tabs_state_1.activeTabId)()).toBe(identityId);
+        expect((0, tabs_state_1.activeTabs)().filter((entry) => entry.path.startsWith("identity"))).toHaveLength(1);
+        expect((0, globals_1._mainContentPath)()).toBe("identity/activity/accept");
+    });
+    it("keeps the current section when the app root is opened again", () => {
+        (0, tabs_state_1.navigateTo)("identity/devices/pair");
+        (0, tabs_state_1.goToTabPath)("identity");
+        expect((0, globals_1._mainContentPath)()).toBe("identity/devices/pair");
+        expect((0, tabs_state_1.recentlyUsedApps)()).toEqual(["identity"]);
+    });
+});

package/package.json

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

package/src/components/markdown-editor/mention-node.ts

@@ -14,6 +14,7 @@ import {
 import { mainContentPath } from "../../globals";
 import { mentionConfigs } from "../../mention-configs";
 
+/** Serialized Lexical payload for a Peers mention node. */
 export type SerializedMentionNode = Spread<
   {
     data: IMentionData;
@@ -43,6 +44,7 @@ function $convertMentionElement(domNode: HTMLElement): DOMConversionOutput | nul
   return null;
 }
 
+/** Lexical text entity that renders and navigates a typed Peers mention. */
 export class MentionNode extends TextNode {
   static getType(): string {
     return "mention";
@@ -109,7 +111,7 @@ export class MentionNode extends TextNode {
         onClick(this.data);
       } else {
         const id = this.data.id;
-        const href = `#${kind}s/${id}`;
+        const href = kind === "user" ? `identity/people/${id}` : `${kind}s/${id}`;
         mainContentPath(href);
       }
     });
@@ -189,12 +191,14 @@ export class MentionNode extends TextNode {
   }
 }
 
+/** Create a segmented Lexical mention node from mention data. */
 export function $createMentionNode(data: IMentionData): MentionNode {
   const mentionNode = new MentionNode(data);
   mentionNode.setMode("segmented").toggleDirectionless();
   return $applyNodeReplacement(mentionNode);
 }
 
+/** Return whether a Lexical node is a {@link MentionNode}. */
 export function $isMentionNode(node: LexicalNode | null | undefined): node is MentionNode {
   return node instanceof MentionNode;
 }

package/src/components/responsive-section-nav.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ResponsiveSectionNav } from "./responsive-section-nav";
+
+jest.mock("../globals", () => {
+  const { observable: createObservable } =
+    jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
+  return { isDesktop: createObservable(true) };
+});
+
+import { isDesktop } from "../globals";
+
+const sections = [
+  { id: "activity", label: "Activity", iconClassName: "bi-inbox", badge: 2 },
+  { id: "people", label: "People", iconClassName: "bi-person" },
+  { id: "groups", label: "Groups" },
+  { id: "devices", label: "Devices" },
+];
+
+describe("ResponsiveSectionNav", () => {
+  beforeEach(() => {
+    isDesktop(true);
+  });
+
+  it("uses a vertical sidebar on desktop and marks the selected section", () => {
+    render(
+      <ResponsiveSectionNav
+        label="Identity"
+        sections={sections}
+        activeSectionId="people"
+        onSelect={() => undefined}
+        toolbar={<div>Quick actions</div>}
+      >
+        <div>People body</div>
+      </ResponsiveSectionNav>,
+    );
+
+    expect(screen.getByRole("navigation", { name: "Identity" }).querySelector("ul")).toHaveClass(
+      "nav-pills",
+      "flex-column",
+    );
+    expect(screen.getByRole("button", { name: /People/ })).toHaveAttribute("aria-current", "page");
+    expect(screen.getByText("People body")).toBeInTheDocument();
+    expect(screen.getByText("Quick actions")).toBeInTheDocument();
+    expect(screen.getByText("Quick actions").closest("[data-section-scroll-container]")).toBeNull();
+    expect(screen.getByText("People body").closest("[data-section-scroll-container]")).toHaveClass(
+      "overflow-auto",
+    );
+  });
+
+  it("uses a non-wrapping horizontal strip on a narrow screen", () => {
+    isDesktop(false);
+    render(
+      <ResponsiveSectionNav
+        label="Identity"
+        sections={sections}
+        activeSectionId="activity"
+        onSelect={() => undefined}
+      >
+        <div>Activity body</div>
+      </ResponsiveSectionNav>,
+    );
+
+    expect(screen.getByRole("navigation", { name: "Identity" }).querySelector("ul")).toHaveClass(
+      "nav-tabs",
+      "flex-nowrap",
+      "overflow-x-auto",
+      "overflow-y-hidden",
+    );
+  });
+
+  it("reports the section chosen from the keyboard-focusable button", async () => {
+    const onSelect = jest.fn();
+    render(
+      <ResponsiveSectionNav
+        label="Identity"
+        sections={sections}
+        activeSectionId="activity"
+        onSelect={onSelect}
+      >
+        <div>Activity body</div>
+      </ResponsiveSectionNav>,
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: /Groups/ }));
+    expect(onSelect).toHaveBeenCalledWith("groups");
+  });
+});

package/src/components/responsive-section-nav.tsx

@@ -0,0 +1,92 @@
+import type { ReactNode } from "react";
+import { isDesktop } from "../globals";
+import { useObservable } from "../hooks";
+
+/** One destination in {@link ResponsiveSectionNav}. */
+export interface ISectionNavItem {
+  /** Stable id passed to {@link ResponsiveSectionNavProps.onSelect}. */
+  id: string;
+  /** Visible label. */
+  label: string;
+  /** Bootstrap icon class, without a leading markup wrapper. */
+  iconClassName?: string;
+  /** Optional count. Hidden when zero or omitted. */
+  badge?: number;
+}
+
+/** Props for {@link ResponsiveSectionNav}. */
+export interface ResponsiveSectionNavProps {
+  /** Accessible name for the section navigation. */
+  label: string;
+  /** Sections in display order. */
+  sections: ISectionNavItem[];
+  /** Id of the selected section. */
+  activeSectionId: string;
+  /** Called when a section button is activated. */
+  onSelect: (sectionId: string) => void;
+  /** Optional controls that remain visible above the scrolling section body. */
+  toolbar?: ReactNode;
+  /** Selected section body. */
+  children: ReactNode;
+}
+
+/**
+ * Section navigation that uses a left sidebar on a wide screen and a
+ * non-wrapping horizontal strip on a narrow one.
+ *
+ * The parent owns the route. This component only reports the selected id.
+ */
+export function ResponsiveSectionNav(props: ResponsiveSectionNavProps) {
+  const [desktop] = useObservable(isDesktop);
+  return (
+    <div
+      className={`d-flex h-100 overflow-hidden ${desktop ? "flex-row" : "flex-column"}`}
+      style={{ minHeight: 0, minWidth: 0 }}
+    >
+      <nav
+        aria-label={props.label}
+        className={desktop ? "border-end p-3 overflow-auto" : "border-bottom px-2 pt-2 pb-1"}
+        style={desktop ? { flex: "0 0 220px", width: 220 } : undefined}
+      >
+        <ul
+          className={`nav ${desktop ? "nav-pills flex-column" : "nav-tabs flex-nowrap overflow-x-auto overflow-y-hidden"}`}
+        >
+          {props.sections.map((section) => {
+            const selected = section.id === props.activeSectionId;
+            return (
+              <li className="nav-item" key={section.id}>
+                <button
+                  type="button"
+                  className={`nav-link d-flex align-items-center gap-2 w-100 text-start ${selected ? "active" : ""}`}
+                  aria-current={selected ? "page" : undefined}
+                  onClick={() => props.onSelect(section.id)}
+                >
+                  {section.iconClassName ? <i className={section.iconClassName} /> : null}
+                  <span>{section.label}</span>
+                  {section.badge ? (
+                    <span className={`badge ${selected ? "bg-light text-primary" : "bg-primary"}`}>
+                      {section.badge}
+                    </span>
+                  ) : null}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+      <div
+        className="d-flex flex-column flex-grow-1 overflow-hidden"
+        style={{ minHeight: 0, minWidth: 0 }}
+      >
+        {props.toolbar ? <div className="flex-shrink-0">{props.toolbar}</div> : null}
+        <div
+          className="flex-grow-1 overflow-auto"
+          style={{ minHeight: 0, minWidth: 0 }}
+          data-section-scroll-container
+        >
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/router.tsx

@@ -1,8 +1,8 @@
 import * as globals from "../globals";
 import { useObservable } from "../hooks";
-import { AccountScreen } from "../screens/account/account-screen";
 import { AssistantDetails } from "../screens/assistants/assistant-details";
 import { AssistantList } from "../screens/assistants/assistant-list";
+import { canonicalizeRoute } from "../screens/identity/identity-routes";
 import { PackageDetails } from "../screens/packages/package-details";
 import { PackageList } from "../screens/packages/package-list";
 import { PackageNewLocal } from "../screens/packages/package-new-local";
@@ -23,19 +23,19 @@ import { UIRouter } from "../ui-router/ui-loader";
 import { ChannelMessages } from "./messages/channel-view";
 import { ThreadMessageList } from "./messages/thread-message-list";
 import "../screens/console-logs/console-logs-list";
-import "../screens/groups";
-import "../screens/contacts";
-import "../screens/invites";
+import "../screens/identity";
 import "../screens/network-viewer";
 import "../screens/data-explorer";
 
+/** Render the built-in or registered UI that owns a canonicalized route. */
 export function Router({ path: providedPath }: { path?: string } = {}) {
   // Hooks must run unconditionally (same order every render)
   const [globalPath] = useObservable(globals.mainContentPath);
 
   try {
-    // Use provided path or fall back to global mainContentPath
-    let path = providedPath ?? globalPath;
+    // Use provided path or fall back to global mainContentPath.
+    // Legacy contacts, groups, devices, invites, and account paths render as Identity.
+    let path = canonicalizeRoute(providedPath ?? globalPath);
     const originalPath = path;
     path = path.toLowerCase().trim();
     path = path.split("?")[0]; // remove query string
@@ -55,9 +55,6 @@ export function Router({ path: providedPath }: { path?: string } = {}) {
     if (path === "settings" || path === "profile") {
       return <SettingsPage />;
     }
-    if (path === "account") {
-      return <AccountScreen />;
-    }
     if (path === "threads" || path === "") {
       return <ChannelMessages />;
     }

package/src/globals-hash.test.ts

@@ -0,0 +1,19 @@
+jest.mock("./tabs-layout/tabs-state", () => ({
+  handleMainPathChanged: (_oldPath: string, newPath: string, storage: (value: string) => void) =>
+    storage(newPath),
+  openNewTab: jest.fn(),
+}));
+
+import { initializeHashNavigation, mainContentPath } from "./globals";
+
+describe("initial hash navigation", () => {
+  it("lets an incoming legacy deep link win and canonicalizes it", () => {
+    mainContentPath("identity/activity");
+    window.history.replaceState(null, "", "/#contacts/abcdefghijklmnopqrstuvwxy?from=link");
+
+    initializeHashNavigation();
+
+    expect(mainContentPath()).toBe("identity/people/abcdefghijklmnopqrstuvwxy?from=link");
+    expect(window.location.hash).toBe("#identity/people/abcdefghijklmnopqrstuvwxy?from=link");
+  });
+});

package/src/globals.tsx

@@ -13,13 +13,17 @@ import {
   rpcServerCalls,
   sleep,
 } from "@peers-app/peers-sdk";
+import { canonicalizeRoute } from "./screens/identity/identity-routes";
 import { handleMainPathChanged, openNewTab } from "./tabs-layout/tabs-state";
 import { stripMentions } from "./utils";
 
+/** Counter incremented when installed package UI should reload. */
 export const packageReloaded = observable(0);
 
+/** Persisted route for the active data context. Prefer {@link mainContentPath}. */
 export const _mainContentPath = groupUserVar("mainContentPath", { defaultValue: "" });
 
+/** Canonical navigation observable backed by the active tab state. */
 export const mainContentPath = computed<string>({
   read: () => {
     return _mainContentPath();
@@ -52,6 +56,7 @@ const queryParams = computed<{ [key: string]: string }>({
   },
 });
 
+/** Read or update one query parameter on {@link mainContentPath}. */
 export function queryParam(name: string, value?: string) {
   const params = queryParams();
   if (value !== undefined) {
@@ -68,10 +73,12 @@ export function queryParam(name: string, value?: string) {
   return params[name];
 }
 
+/** Open a message thread in its owning app tab. */
 export async function openThread(thread: string | IMessage) {
   openThreadInTab(thread);
 }
 
+/** Resolve a message and open its root thread in a new tab. */
 export async function openThreadInTab(thread: string | IMessage) {
   const threadId = typeof thread === "string" ? thread : thread.messageId;
   const message = await Messages().get(threadId);
@@ -109,24 +116,70 @@ rpcClientCalls.openThread = async (threadId: string) => {
   openThread(threadId);
 };
 
+/** Signed profile for the active user after {@link loadGlobals}. */
 export let me: IUser = null as unknown as IUser;
 
+/** Current browser viewport width. */
 export const windowWidth = observable(window.innerWidth); //.extend({ rateLimit: 500 });
+/** Current browser viewport height. */
 export const windowHeight = observable(window.innerHeight); //.extend({ rateLimit: 500 });
 window.addEventListener("resize", (_ev) => {
   windowWidth(window.innerWidth);
   windowHeight(window.innerHeight);
 });
 
+/** True when the viewport uses wide-screen navigation. */
 export const isDesktop = computed(() => {
   // return windowWidth() > 1200;
   return windowWidth() > 992;
   // return windowWidth() > 768;
 });
 
+/** Enabled groups available to the active user. */
 export const groups = observable<IGroup[]>([]);
 
 let globalsLoaded = false;
+let hashNavigationInitialized = false;
+
+/**
+ * Start two-way hash synchronization after routes and persisted tabs are restored.
+ *
+ * A non-empty startup hash wins over persisted navigation so canonical and legacy
+ * deep links open the destination the user requested.
+ */
+export function initializeHashNavigation() {
+  if (hashNavigationInitialized) {
+    return;
+  }
+  hashNavigationInitialized = true;
+
+  const updateWindowHash = () => {
+    const currentPath = window.location.hash.substring(1);
+    const expectedPath = mainContentPath() || "";
+    if (currentPath !== expectedPath) {
+      window.location.hash = expectedPath;
+    }
+  };
+  const navigateFromHash = () => {
+    const requestedPath = canonicalizeRoute(window.location.hash.substring(1));
+    if (requestedPath !== mainContentPath()) {
+      mainContentPath(requestedPath);
+    } else {
+      updateWindowHash();
+    }
+  };
+
+  mainContentPath.subscribe(updateWindowHash);
+  window.addEventListener("hashchange", navigateFromHash);
+
+  if (window.location.hash.substring(1)) {
+    navigateFromHash();
+  } else {
+    updateWindowHash();
+  }
+}
+
+/** Load global user state required before the root layout renders. */
 export async function loadGlobals() {
   if (globalsLoaded) return true;
   globalsLoaded = true;
@@ -143,19 +196,6 @@ export async function loadGlobals() {
     sleep(100),
   ]);
 
-  function updateWindowHash() {
-    const currentPath = window.location.hash.substring(1);
-    const expectedPath = mainContentPath() || "";
-    // console.log({ expectedPath, currentPath });
-    if (currentPath !== expectedPath) {
-      window.location.hash = expectedPath;
-    }
-    mainContentPath(expectedPath);
-  }
-  mainContentPath.subscribe(updateWindowHash);
-  updateWindowHash();
-  window.addEventListener("hashchange", () => mainContentPath(window.location.hash.substring(1)));
-
   return true;
 }
 

package/src/hooks/use-host-contract.ts

@@ -0,0 +1,75 @@
+import {
+  type IContractConsumerBase,
+  type IHostContractConsumer,
+  subscribeHostContractTransport,
+} from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+
+/** Live consumer for one host contract, plus the last failure to obtain it. */
+export interface IUseHostContractResult<T extends IContractConsumerBase> {
+  /** Current consumer, or `undefined` while the host transport is down. */
+  consumer: T | undefined;
+  /** Set when `get` rejects, for example when the transport wait times out. */
+  error: Error | undefined;
+}
+
+/**
+ * Resolve a cached local-host contract consumer and keep it current across reconnects.
+ *
+ * The handle owns caching and disposal. This hook re-reads it when the host transport
+ * changes. Read `consumer.observables.*` with `useObservable`.
+ *
+ * @param accessor Handle from `hostContractConsumer`, stable for the lifetime of the screen module.
+ * @returns The current consumer and the last error.
+ */
+export function useHostContract<T extends IContractConsumerBase>(
+  accessor: IHostContractConsumer<T>,
+): IUseHostContractResult<T> {
+  const [consumer, setConsumer] = useState<T | undefined>();
+  const [error, setError] = useState<Error | undefined>();
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const apply = (next: T): void => {
+      if (cancelled) {
+        return;
+      }
+      setConsumer(next);
+      setError(undefined);
+    };
+
+    const fail = (cause: unknown): void => {
+      if (cancelled) {
+        return;
+      }
+      setError(cause instanceof Error ? cause : new Error(String(cause)));
+    };
+
+    const load = (): void => {
+      accessor.get().then(apply, fail);
+    };
+
+    load();
+    const unsubscribe = subscribeHostContractTransport(
+      (transport) => {
+        if (cancelled) {
+          return;
+        }
+        if (!transport) {
+          setConsumer(undefined);
+          return;
+        }
+        load();
+      },
+      { emitCurrent: false },
+    );
+
+    return () => {
+      cancelled = true;
+      unsubscribe();
+    };
+  }, [accessor]);
+
+  return { consumer, error };
+}

package/src/index.tsx

@@ -3,6 +3,7 @@ export type { IEditorEffects, IMarkdownEditorProps } from "./components/markdown
 export { MarkdownEditor } from "./components/markdown-editor/editor";
 export * from "./components/markdown-editor/editor-inline";
 export * from "./components/markdown-with-mentions";
+export * from "./components/responsive-section-nav";
 export * from "./components/sortable-list";
 export * from "./components/tabs";
 export { Typeahead, type TypeaheadItem } from "./components/typeahead";

package/src/peers-services-registration.ts

@@ -1,17 +1,6 @@
-import { userVar } from "@peers-app/peers-sdk";
-
-/** Set when the user has completed challenge-response registration (ISO timestamp). */
-export const registrationStatusPvar = userVar<string>("PEERS_SERVICES_REGISTERED", {
-  defaultValue: "",
-});
-
-export const servicesTokenPvar = userVar<string>("PEERS_SERVICES_TOKEN", {
-  isSecret: true,
-  defaultValue: "",
-});
-
-/** Store JWT and local "registered" flag after a successful `registerWithPeersServices` call. */
-export function persistPeersServicesRegistration(token: string): void {
-  servicesTokenPvar(token);
-  registrationStatusPvar(new Date().toISOString());
-}
+// The pvar definitions live in peers-sdk so headless hosts and UIs share one set of names.
+export {
+  persistPeersServicesRegistration,
+  registrationStatusPvar,
+  servicesTokenPvar,
+} from "@peers-app/peers-sdk";