@peers-app/peers-ui 0.15.5 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.15.5",
+  "version": "0.16.1",
   "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.15.5",
+    "@peers-app/peers-sdk": "^0.16.1",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -39,7 +39,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@peers-app/peers-sdk": "0.15.5",
+    "@peers-app/peers-sdk": "0.16.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/components/markdown-editor/editor.tsx

@@ -22,6 +22,7 @@ import { customMarkdownTransformers, MarkdownPlugin } from "./markdown-plugin";
 import { MentionNode } from "./mention-node";
 import { MentionsPlugin } from "./mentions-plugin";
 import { MoveLineWithAltArrowsPlugin } from "./move-line-plugin";
+import { SelectToLineBoundaryPlugin } from "./select-line-boundary-plugin";
 import theme from "./theme";
 import { type IToolbarControl, ToolbarPlugin } from "./toolbar";
 
@@ -121,6 +122,7 @@ export function MarkdownEditor(props: IMarkdownEditorProps) {
           <CheckListPlugin />
           <TabIndentationPlugin />
           <MoveLineWithAltArrowsPlugin mentionsOpen={mentionsOpen} />
+          <SelectToLineBoundaryPlugin />
           <OnKeyDownPlugin effects={props.effects} mentionsOpen={mentionsOpen} />
         </div>
       </div>

package/src/components/markdown-editor/move-line-plugin.tsx

@@ -5,6 +5,7 @@ import {
   $createRangeSelection,
   $getNodeByKey,
   $getSelection,
+  $isElementNode,
   $isRangeSelection,
   $isRootOrShadowRoot,
   $setSelection,
@@ -15,10 +16,11 @@ import {
 import { useEffect } from "react";
 
 /**
- * Returns the node to reorder for Alt/Option + arrow "move line":
- * a list item (among siblings in its list), or else the top-level block under the root.
+ * Walks up from `node` to find the reorderable block for keyboard shortcuts that
+ * operate on "lines" (blocks). Returns a list item when inside a list, or the
+ * top-level block directly under the root.
  */
-function $getMovableBlock(node: LexicalNode): LexicalNode | null {
+export function $getMovableBlock(node: LexicalNode): LexicalNode | null {
   let n: LexicalNode | null = node;
   while (n !== null) {
     const parent: LexicalNode | null = n.getParent();
@@ -37,7 +39,26 @@ function $getMovableBlock(node: LexicalNode): LexicalNode | null {
 }
 
 /**
- * Registers Alt/Option + ArrowUp/ArrowDown to swap the caret's block (or list item) with an adjacent sibling.
+ * Returns true when `node` sits at the absolute start of `block` — i.e. it is
+ * the block itself or lies along the first-child path from block down to node.
+ * Used to detect a selection endpoint that bled into the next block at offset 0.
+ */
+function $isFirstPositionInBlock(node: LexicalNode, block: LexicalNode): boolean {
+  let n: LexicalNode | null = node;
+  while (n !== null && n !== block) {
+    if (n.getPreviousSibling() !== null) {
+      return false;
+    }
+    n = n.getParent();
+  }
+  return n === block;
+}
+
+/**
+ * Registers Alt/Option + ArrowUp/ArrowDown to move the selected block(s) — or the
+ * block at the caret — past an adjacent sibling. Supports both collapsed cursors and
+ * multi-block selections: the single neighbor block is relocated to the other side of
+ * the selection range, which effectively shifts the selected blocks up or down by one.
  * @param props.mentionsOpen — when true, the plugin defers so mention typeahead keeps keyboard focus.
  */
 export function MoveLineWithAltArrowsPlugin(props: { mentionsOpen: Observable<boolean> }) {
@@ -64,34 +85,83 @@ export function MoveLineWithAltArrowsPlugin(props: { mentionsOpen: Observable<bo
         // built-in arrow handler + browser would move the caret on top of our swap.
 
         const selection = $getSelection();
-        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+        if (!$isRangeSelection(selection)) {
+          return false;
+        }
+
+        const anchorBlock = $getMovableBlock(selection.anchor.getNode());
+        const focusBlock = $getMovableBlock(selection.focus.getNode());
+        if (anchorBlock === null || focusBlock === null) {
           return false;
         }
-        const anchorNode = selection.anchor.getNode();
-        const block = $getMovableBlock(anchorNode);
-        if (block === null) {
+
+        // Both endpoints must share the same parent (same nesting level).
+        if (anchorBlock.getParent()?.getKey() !== focusBlock.getParent()?.getKey()) {
           return false;
         }
 
-        const anchorKey = selection.anchor.key;
-        const anchorOffset = selection.anchor.offset;
-        const anchorType = selection.anchor.type;
-        const focusKey = selection.focus.key;
-        const focusOffset = selection.focus.offset;
-        const focusType = selection.focus.type;
+        const anchorIdx = anchorBlock.getIndexWithinParent();
+        const focusIdx = focusBlock.getIndexWithinParent();
+        const firstBlock = anchorIdx <= focusIdx ? anchorBlock : focusBlock;
+        let lastBlock = anchorIdx <= focusIdx ? focusBlock : anchorBlock;
+
+        let anchorKey = selection.anchor.key;
+        let anchorOffset = selection.anchor.offset;
+        let anchorType = selection.anchor.type;
+        let focusKey = selection.focus.key;
+        let focusOffset = selection.focus.offset;
+        let focusType = selection.focus.type;
+
+        // When a selection extends to offset 0 of the next block (common when
+        // selecting to "end of line"), that trailing block has no selected
+        // content — exclude it so it isn't dragged along. Also clamp the
+        // trailing selection endpoint to the end of the new lastBlock so the
+        // restored highlight doesn't overextend into the excluded block.
+        if (lastBlock !== firstBlock) {
+          const lastPoint = anchorIdx > focusIdx ? selection.anchor : selection.focus;
+          if (lastPoint.offset === 0 && $isFirstPositionInBlock(lastPoint.getNode(), lastBlock)) {
+            const stepped = lastBlock.getPreviousSibling();
+            if (stepped === null) {
+              return false;
+            }
+            lastBlock = stepped;
+
+            const lastDesc = $isElementNode(lastBlock) ? lastBlock.getLastDescendant() : null;
+            const clampKey = lastDesc ? lastDesc.getKey() : lastBlock.getKey();
+            const clampOffset = lastDesc
+              ? lastDesc.getTextContentSize()
+              : $isElementNode(lastBlock)
+                ? lastBlock.getChildrenSize()
+                : lastBlock.getTextContentSize();
+            const clampType: "text" | "element" = lastDesc
+              ? "text"
+              : $isElementNode(lastBlock)
+                ? "element"
+                : "text";
+            if (anchorIdx > focusIdx) {
+              anchorKey = clampKey;
+              anchorOffset = clampOffset;
+              anchorType = clampType;
+            } else {
+              focusKey = clampKey;
+              focusOffset = clampOffset;
+              focusType = clampType;
+            }
+          }
+        }
 
         if (code === "ArrowUp") {
-          const prev = block.getPreviousSibling();
+          const prev = firstBlock.getPreviousSibling();
           if (prev === null) {
             return false;
           }
-          prev.insertBefore(block, false);
+          lastBlock.insertAfter(prev, false);
         } else {
-          const next = block.getNextSibling();
+          const next = lastBlock.getNextSibling();
           if (next === null) {
             return false;
           }
-          next.insertAfter(block, false);
+          firstBlock.insertBefore(next, false);
         }
 
         if ($getNodeByKey(anchorKey) !== null) {
@@ -102,7 +172,7 @@ export function MoveLineWithAltArrowsPlugin(props: { mentionsOpen: Observable<bo
           restored.focus.set(focusKey, focusOffset, focusType);
           $setSelection(restored);
         } else {
-          block.selectEnd();
+          lastBlock.selectEnd();
         }
 
         event.preventDefault();

package/src/components/markdown-editor/select-line-boundary-plugin.tsx

@@ -0,0 +1,95 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  $createRangeSelection,
+  $getNearestNodeFromDOMNode,
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+  $setSelection,
+  COMMAND_PRIORITY_HIGH,
+  KEY_DOWN_COMMAND,
+} from "lexical";
+import { useEffect } from "react";
+
+/**
+ * Intercepts Cmd+Shift+ArrowLeft/Right (Mac line-boundary selection) and explicitly
+ * sets anchor/focus so that Lexical's reconciliation cannot flip the selection direction.
+ * Uses the browser's native `Selection.modify` with `'lineboundary'` granularity to
+ * find the correct **visual** line boundary (respecting text wrapping), then converts
+ * the result back to Lexical coordinates.
+ */
+export function SelectToLineBoundaryPlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event: KeyboardEvent) => {
+        if (!event.shiftKey || !event.metaKey || event.altKey || event.ctrlKey) {
+          return false;
+        }
+        const code = event.code;
+        if (code !== "ArrowLeft" && code !== "ArrowRight") {
+          return false;
+        }
+
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+          return false;
+        }
+
+        const savedAnchorKey = selection.anchor.key;
+        const savedAnchorOffset = selection.anchor.offset;
+        const savedAnchorType = selection.anchor.type;
+
+        const focusElement = editor.getElementByKey(selection.focus.key);
+        if (!focusElement) {
+          return false;
+        }
+        const focusDomNode =
+          selection.focus.type === "text" ? focusElement.firstChild : focusElement;
+        if (!focusDomNode) {
+          return false;
+        }
+
+        const domSelection = window.getSelection();
+        if (!domSelection) {
+          return false;
+        }
+
+        domSelection.collapse(focusDomNode, selection.focus.offset);
+        domSelection.modify("move", code === "ArrowLeft" ? "left" : "right", "lineboundary");
+
+        const boundaryDomNode = domSelection.anchorNode;
+        const boundaryDomOffset = domSelection.anchorOffset;
+        if (!boundaryDomNode) {
+          return false;
+        }
+
+        const boundaryLexicalNode = $getNearestNodeFromDOMNode(boundaryDomNode);
+        if (!boundaryLexicalNode) {
+          return false;
+        }
+
+        const newFocusKey = boundaryLexicalNode.getKey();
+        const newFocusOffset = boundaryDomOffset;
+        const newFocusType: "text" | "element" = $isTextNode(boundaryLexicalNode)
+          ? "text"
+          : "element";
+
+        const restored = $createRangeSelection();
+        restored.format = selection.format;
+        restored.style = selection.style;
+        restored.anchor.set(savedAnchorKey, savedAnchorOffset, savedAnchorType);
+        restored.focus.set(newFocusKey, newFocusOffset, newFocusType);
+        $setSelection(restored);
+
+        event.preventDefault();
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH,
+    );
+  }, [editor]);
+
+  return null;
+}

package/src/components/router.tsx

@@ -1,5 +1,6 @@
 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 { PackageDetails } from "../screens/packages/package-details";
@@ -54,6 +55,9 @@ 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/screens/account/account-screen.tsx

@@ -0,0 +1,141 @@
+import { rpcServerCalls, userVar } from "@peers-app/peers-sdk";
+import { useState } from "react";
+import { Tooltip } from "../../components/tooltip";
+import { useObservable } from "../../hooks";
+
+const registrationStatusPvar = userVar<string>("PEERS_SERVICES_REGISTERED", {
+  defaultValue: "",
+});
+
+const servicesTokenPvar = userVar<string>("PEERS_SERVICES_TOKEN", {
+  isSecret: true,
+  defaultValue: "",
+});
+
+const INFO_TEXT = `### What does registering do?
+
+Registering your account links your **public key** with the Peers cloud service. This enables cloud-powered features like:
+
+- **AI Assistant** - use the built-in assistant powered by hosted LLM inference
+- **Cloud relay** - improved connectivity between your devices
+- **Future services** - new cloud features as they become available
+
+### Is it safe?
+
+Registration uses a **cryptographic challenge-response** to prove you own your secret key.
+Your **secret key never leaves your device**. Only your public key is shared with the server.
+
+### Do I have to register?
+
+No. Peers works fully in local/peer-to-peer mode without registration. Cloud features simply won't be available until you register.`;
+
+export function AccountScreen() {
+  const [registrationStatus] = useObservable(registrationStatusPvar);
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const isRegistered = !!registrationStatus;
+
+  const handleRegister = async () => {
+    setIsRegistering(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const token = await rpcServerCalls.registerWithPeersServices();
+      servicesTokenPvar(token);
+      registrationStatusPvar(new Date().toISOString());
+      setSuccess("Account registered successfully.");
+    } catch (err) {
+      setError(`Registration failed: ${String(err)}`);
+    } finally {
+      setIsRegistering(false);
+    }
+  };
+
+  return (
+    <div className="container-fluid p-3" style={{ maxWidth: 600 }}>
+      <h4 className="mb-3 d-flex align-items-center gap-2">
+        <i className="bi bi-person-circle" />
+        Account
+      </h4>
+
+      {error && (
+        <div className="alert alert-danger alert-dismissible" role="alert">
+          <i className="bi bi-exclamation-triangle me-2" />
+          {error}
+          <button
+            type="button"
+            className="btn-close"
+            onClick={() => setError(null)}
+            aria-label="Close"
+          />
+        </div>
+      )}
+
+      {success && (
+        <div className="alert alert-success alert-dismissible" role="alert">
+          <i className="bi bi-check-circle me-2" />
+          {success}
+          <button
+            type="button"
+            className="btn-close"
+            onClick={() => setSuccess(null)}
+            aria-label="Close"
+          />
+        </div>
+      )}
+
+      <div className="card">
+        <div className="card-body">
+          <h5 className="card-title d-flex align-items-center gap-2">
+            Peers Services Registration
+            <Tooltip markdownContent={INFO_TEXT} />
+          </h5>
+
+          {isRegistered ? (
+            <div>
+              <div className="d-flex align-items-center gap-2 mb-2">
+                <i className="bi bi-check-circle-fill text-success" style={{ fontSize: "1.2em" }} />
+                <span>Registered</span>
+              </div>
+              <small className="text-muted">
+                Registered on{" "}
+                {new Date(registrationStatus as string).toLocaleDateString(undefined, {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
+              </small>
+            </div>
+          ) : (
+            <div>
+              <p className="text-muted mb-3">
+                Register your account to enable cloud-powered features like the AI assistant.
+              </p>
+              <button
+                type="button"
+                className="btn btn-primary"
+                onClick={handleRegister}
+                disabled={isRegistering}
+              >
+                {isRegistering ? (
+                  <>
+                    <span className="spinner-border spinner-border-sm me-2" />
+                    Registering...
+                  </>
+                ) : (
+                  <>
+                    <i className="bi bi-cloud-upload me-2" />
+                    Register Account
+                  </>
+                )}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}