@peers-app/peers-ui 0.15.5 → 0.16.0

package/dist/components/markdown-editor/editor.js

@@ -62,6 +62,7 @@ const markdown_plugin_1 = require("./markdown-plugin");
 const mention_node_1 = require("./mention-node");
 const mentions_plugin_1 = require("./mentions-plugin");
 const move_line_plugin_1 = require("./move-line-plugin");
+const select_line_boundary_plugin_1 = require("./select-line-boundary-plugin");
 const theme_1 = __importDefault(require("./theme"));
 const toolbar_1 = require("./toolbar");
 const editorConfig = {
@@ -111,7 +112,7 @@ function MarkdownEditor(props) {
         };
     }
     const _mentionConfigs = props.mentionConfigs ?? mention_configs_1.mentionConfigs;
-    return ((0, jsx_runtime_1.jsx)(LexicalComposer_1.LexicalComposer, { initialConfig: { ...editorConfig }, children: (0, jsx_runtime_1.jsxs)("div", { className: "editor-container", children: [props.hideToolbar ? null : (0, jsx_runtime_1.jsx)(toolbar_1.ToolbarPlugin, { topRightControls: props.topRightControls }), (0, jsx_runtime_1.jsxs)("div", { className: "editor-inner", ref: editorRef, style: { maxHeight: props.maxHeight, overflowY: "auto" }, children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "editor-input p-2" }), placeholder: null, ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), props.autoFocus && (0, jsx_runtime_1.jsx)(LexicalAutoFocusPlugin_1.AutoFocusPlugin, { defaultSelection: "rootEnd" }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), _mentionConfigs.length > 0 && ((0, jsx_runtime_1.jsx)(mentions_plugin_1.MentionsPlugin, { mentionConfigs: _mentionConfigs, mentionsOpen: mentionsOpen })), (0, jsx_runtime_1.jsx)(autolink_plugin_1.LexicalAutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(markdown_plugin_1.MarkdownPlugin, { markdownObs: props.value }), (0, jsx_runtime_1.jsx)(LexicalMarkdownShortcutPlugin_1.MarkdownShortcutPlugin, { transformers: markdown_plugin_1.customMarkdownTransformers }), (0, jsx_runtime_1.jsx)(LexicalCheckListPlugin_1.CheckListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalTabIndentationPlugin_1.TabIndentationPlugin, {}), (0, jsx_runtime_1.jsx)(move_line_plugin_1.MoveLineWithAltArrowsPlugin, { mentionsOpen: mentionsOpen }), (0, jsx_runtime_1.jsx)(OnKeyDownPlugin, { effects: props.effects, mentionsOpen: mentionsOpen })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(LexicalComposer_1.LexicalComposer, { initialConfig: { ...editorConfig }, children: (0, jsx_runtime_1.jsxs)("div", { className: "editor-container", children: [props.hideToolbar ? null : (0, jsx_runtime_1.jsx)(toolbar_1.ToolbarPlugin, { topRightControls: props.topRightControls }), (0, jsx_runtime_1.jsxs)("div", { className: "editor-inner", ref: editorRef, style: { maxHeight: props.maxHeight, overflowY: "auto" }, children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "editor-input p-2" }), placeholder: null, ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), props.autoFocus && (0, jsx_runtime_1.jsx)(LexicalAutoFocusPlugin_1.AutoFocusPlugin, { defaultSelection: "rootEnd" }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), _mentionConfigs.length > 0 && ((0, jsx_runtime_1.jsx)(mentions_plugin_1.MentionsPlugin, { mentionConfigs: _mentionConfigs, mentionsOpen: mentionsOpen })), (0, jsx_runtime_1.jsx)(autolink_plugin_1.LexicalAutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(markdown_plugin_1.MarkdownPlugin, { markdownObs: props.value }), (0, jsx_runtime_1.jsx)(LexicalMarkdownShortcutPlugin_1.MarkdownShortcutPlugin, { transformers: markdown_plugin_1.customMarkdownTransformers }), (0, jsx_runtime_1.jsx)(LexicalCheckListPlugin_1.CheckListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalTabIndentationPlugin_1.TabIndentationPlugin, {}), (0, jsx_runtime_1.jsx)(move_line_plugin_1.MoveLineWithAltArrowsPlugin, { mentionsOpen: mentionsOpen }), (0, jsx_runtime_1.jsx)(select_line_boundary_plugin_1.SelectToLineBoundaryPlugin, {}), (0, jsx_runtime_1.jsx)(OnKeyDownPlugin, { effects: props.effects, mentionsOpen: mentionsOpen })] })] }) }));
 }
 const OnKeyDownPlugin = (props) => {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();

package/dist/components/markdown-editor/move-line-plugin.d.ts

@@ -1,6 +1,16 @@
 import type { Observable } from "@peers-app/peers-sdk";
+import { type LexicalNode } from "lexical";
 /**
- * Registers Alt/Option + ArrowUp/ArrowDown to swap the caret's block (or list item) with an adjacent sibling.
+ * 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.
+ */
+export declare function $getMovableBlock(node: LexicalNode): LexicalNode | null;
+/**
+ * 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 declare function MoveLineWithAltArrowsPlugin(props: {

package/dist/components/markdown-editor/move-line-plugin.js

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.$getMovableBlock = $getMovableBlock;
 exports.MoveLineWithAltArrowsPlugin = MoveLineWithAltArrowsPlugin;
 const list_1 = require("@lexical/list");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const lexical_1 = require("lexical");
 const react_1 = require("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) {
     let n = node;
@@ -27,7 +29,25 @@ function $getMovableBlock(node) {
     return 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, block) {
+    let n = 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.
  */
 function MoveLineWithAltArrowsPlugin(props) {
@@ -49,33 +69,78 @@ function MoveLineWithAltArrowsPlugin(props) {
             // so handled would stay false, preventDefault would never run, and the
             // built-in arrow handler + browser would move the caret on top of our swap.
             const selection = (0, lexical_1.$getSelection)();
-            if (!(0, lexical_1.$isRangeSelection)(selection) || !selection.isCollapsed()) {
+            if (!(0, lexical_1.$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 = (0, lexical_1.$isElementNode)(lastBlock) ? lastBlock.getLastDescendant() : null;
+                    const clampKey = lastDesc ? lastDesc.getKey() : lastBlock.getKey();
+                    const clampOffset = lastDesc
+                        ? lastDesc.getTextContentSize()
+                        : (0, lexical_1.$isElementNode)(lastBlock)
+                            ? lastBlock.getChildrenSize()
+                            : lastBlock.getTextContentSize();
+                    const clampType = lastDesc
+                        ? "text"
+                        : (0, lexical_1.$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 ((0, lexical_1.$getNodeByKey)(anchorKey) !== null) {
                 const restored = (0, lexical_1.$createRangeSelection)();
@@ -86,7 +151,7 @@ function MoveLineWithAltArrowsPlugin(props) {
                 (0, lexical_1.$setSelection)(restored);
             }
             else {
-                block.selectEnd();
+                lastBlock.selectEnd();
             }
             event.preventDefault();
             return true;

package/dist/components/markdown-editor/select-line-boundary-plugin.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare function SelectToLineBoundaryPlugin(): null;

package/dist/components/markdown-editor/select-line-boundary-plugin.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectToLineBoundaryPlugin = SelectToLineBoundaryPlugin;
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const lexical_1 = require("lexical");
+const react_1 = require("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.
+ */
+function SelectToLineBoundaryPlugin() {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    (0, react_1.useEffect)(() => {
+        return editor.registerCommand(lexical_1.KEY_DOWN_COMMAND, (event) => {
+            if (!event.shiftKey || !event.metaKey || event.altKey || event.ctrlKey) {
+                return false;
+            }
+            const code = event.code;
+            if (code !== "ArrowLeft" && code !== "ArrowRight") {
+                return false;
+            }
+            const selection = (0, lexical_1.$getSelection)();
+            if (!(0, lexical_1.$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 = (0, lexical_1.$getNearestNodeFromDOMNode)(boundaryDomNode);
+            if (!boundaryLexicalNode) {
+                return false;
+            }
+            const newFocusKey = boundaryLexicalNode.getKey();
+            const newFocusOffset = boundaryDomOffset;
+            const newFocusType = (0, lexical_1.$isTextNode)(boundaryLexicalNode)
+                ? "text"
+                : "element";
+            const restored = (0, lexical_1.$createRangeSelection)();
+            restored.format = selection.format;
+            restored.style = selection.style;
+            restored.anchor.set(savedAnchorKey, savedAnchorOffset, savedAnchorType);
+            restored.focus.set(newFocusKey, newFocusOffset, newFocusType);
+            (0, lexical_1.$setSelection)(restored);
+            event.preventDefault();
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_HIGH);
+    }, [editor]);
+    return null;
+}

package/dist/screens/data-explorer/data-explorer.js

@@ -9,11 +9,46 @@ const ui_loader_1 = require("../../ui-router/ui-loader");
 function getDataExplorerApi() {
     return window.electronAPI?.dataExplorer;
 }
+function formatRelativeTime(isoString) {
+    const date = new Date(isoString);
+    const now = Date.now();
+    const diffMs = now - date.getTime();
+    const diffMin = Math.floor(diffMs / 60_000);
+    if (diffMin < 1)
+        return "just now";
+    if (diffMin < 60)
+        return `${diffMin}m ago`;
+    const diffHrs = Math.floor(diffMin / 60);
+    if (diffHrs < 24)
+        return `${diffHrs}h ago`;
+    const diffDays = Math.floor(diffHrs / 24);
+    if (diffDays < 30)
+        return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+}
+function DeleteConfirmModal({ tableName, onConfirm, onCancel, }) {
+    const [confirmText, setConfirmText] = (0, react_1.useState)("");
+    const [deleting, setDeleting] = (0, react_1.useState)(false);
+    const handleConfirm = async () => {
+        setDeleting(true);
+        try {
+            await onConfirm();
+        }
+        finally {
+            setDeleting(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center", style: { zIndex: 1050, backgroundColor: "rgba(0,0,0,0.5)" }, onClick: onCancel, children: (0, jsx_runtime_1.jsxs)("div", { className: "card shadow-lg", style: { maxWidth: 480, width: "100%" }, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header bg-danger text-white d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Delete Table" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn-close btn-close-white", onClick: onCancel })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger mb-3", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle-fill me-2" }), "This will permanently delete all data for ", (0, jsx_runtime_1.jsx)("strong", { children: tableName }), " on this device and all synced devices once synced."] }), (0, jsx_runtime_1.jsxs)("label", { className: "form-label", children: ["Type ", (0, jsx_runtime_1.jsx)("strong", { children: tableName }), " to confirm:"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control", value: confirmText, onChange: (e) => setConfirmText(e.target.value), placeholder: tableName, 
+                            // biome-ignore lint/a11y/noAutofocus: confirmation input needs immediate focus
+                            autoFocus: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card-footer d-flex justify-content-end gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-secondary", onClick: onCancel, disabled: deleting, children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-danger", disabled: confirmText !== tableName || deleting, onClick: handleConfirm, children: deleting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1" }), "Deleting..."] })) : ("Delete Table") })] })] }) }));
+}
 function DataExplorerList() {
     const [tables, setTables] = (0, react_1.useState)([]);
+    const [deletedTables, setDeletedTables] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [currentContext, setCurrentContext] = (0, react_1.useState)("");
     const [compacting, setCompacting] = (0, react_1.useState)(false);
+    const [deleteTarget, setDeleteTarget] = (0, react_1.useState)(null);
     const formatBytes = (bytes) => {
         if (bytes === undefined)
             return "-";
@@ -30,12 +65,12 @@ function DataExplorerList() {
         const kb = 1024;
         const mb = kb * 1024;
         if (bytes < 10 * kb)
-            return "text-secondary"; // 0 to 10KB: secondary (gray)
+            return "text-secondary";
         if (bytes < 10 * mb)
-            return "text-primary"; // 10KB to 10MB: primary (blue)
+            return "text-primary";
         if (bytes < 100 * mb)
-            return "text-warning"; // 10MB to 100MB: warning (orange)
-        return "text-danger"; // >100MB: danger (red)
+            return "text-warning";
+        return "text-danger";
     };
     const loadTables = (0, react_1.useCallback)(async () => {
         try {
@@ -46,12 +81,9 @@ function DataExplorerList() {
                 console.warn("Data Explorer API not available");
                 return;
             }
-            // Get current context info
             const contextInfo = await api.getCurrentContext();
             setCurrentContext(contextInfo.contextName);
-            // Get all tables from IPC
             const allTablesInfo = await api.getAllTables();
-            // Sort by registered status first, then by table name
             allTablesInfo.sort((a, b) => {
                 if (a.isRegistered !== b.isRegistered) {
                     return a.isRegistered ? -1 : 1;
@@ -59,6 +91,9 @@ function DataExplorerList() {
                 return a.tableName.localeCompare(b.tableName);
             });
             setTables(allTablesInfo);
+            const deleted = await api.getDeletedTables();
+            deleted.sort((a, b) => a.tableName.localeCompare(b.tableName));
+            setDeletedTables(deleted);
         }
         catch (error) {
             console.error("Error loading tables:", error);
@@ -67,6 +102,23 @@ function DataExplorerList() {
             setLoading(false);
         }
     }, []);
+    const handleDeleteTable = async () => {
+        if (!deleteTarget)
+            return;
+        const api = getDataExplorerApi();
+        if (!api)
+            return;
+        try {
+            await api.deleteTable(deleteTarget);
+            setDeleteTarget(null);
+            setLoading(true);
+            await loadTables();
+        }
+        catch (error) {
+            console.error("Error deleting table:", error);
+            alert(`Error deleting table: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    };
     const compactDatabase = async (beforeTimestamp) => {
         try {
             setCompacting(true);
@@ -85,7 +137,6 @@ function DataExplorerList() {
             }
             await api.compactDatabase(beforeTimestamp);
             alert(`Database compacted successfully!${isExtreme ? " (Extreme mode)" : ""}`);
-            // Reload tables to show updated sizes
             setLoading(true);
             await loadTables();
         }
@@ -112,7 +163,6 @@ function DataExplorerList() {
             }
             await api.resetChangeTracking();
             alert("Change tracking reset successfully!");
-            // Reload tables to show updated sizes
             setLoading(true);
             await loadTables();
         }
@@ -136,7 +186,9 @@ function DataExplorerList() {
     if (!currentContext && tables.length === 0) {
         return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid p-4", children: (0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning", children: "Unable to load database information." }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-4", children: [(0, jsx_runtime_1.jsxs)("ul", { className: "nav nav-tabs mb-4", children: [(0, jsx_runtime_1.jsx)("li", { className: "nav-item", children: (0, jsx_runtime_1.jsxs)("a", { className: "nav-link active", href: "#/data-explorer", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-table" }), " Tables"] }) }), (0, jsx_runtime_1.jsx)("li", { className: "nav-item", children: (0, jsx_runtime_1.jsxs)("a", { className: "nav-link", href: "#/data-explorer/query", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-terminal" }), " Query"] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Data Explorer" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "btn-group", role: "group", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-warning", onClick: () => compactDatabase(), disabled: compacting || loading, title: "Compact database (cleanup changes older than 2 weeks)", children: compacting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }), "Compacting..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-disc" }), " Compact Database"] })) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-warning dropdown-toggle dropdown-toggle-split", "data-bs-toggle": "dropdown", "aria-expanded": "false", disabled: compacting || loading, title: "More compaction options", children: (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: "Toggle Dropdown" }) }), (0, jsx_runtime_1.jsxs)("ul", { className: "dropdown-menu", children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("a", { className: "dropdown-item", href: "#", onClick: (e) => {
+    const registeredTables = tables.filter((t) => t.isRegistered);
+    const unregisteredTables = tables.filter((t) => !t.isRegistered);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-4", children: [deleteTarget && ((0, jsx_runtime_1.jsx)(DeleteConfirmModal, { tableName: deleteTarget, onConfirm: handleDeleteTable, onCancel: () => setDeleteTarget(null) })), (0, jsx_runtime_1.jsxs)("ul", { className: "nav nav-tabs mb-4", children: [(0, jsx_runtime_1.jsx)("li", { className: "nav-item", children: (0, jsx_runtime_1.jsxs)("a", { className: "nav-link active", href: "#/data-explorer", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-table" }), " Tables"] }) }), (0, jsx_runtime_1.jsx)("li", { className: "nav-item", children: (0, jsx_runtime_1.jsxs)("a", { className: "nav-link", href: "#/data-explorer/query", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-terminal" }), " Query"] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Data Explorer" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "btn-group", role: "group", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-warning", onClick: () => compactDatabase(), disabled: compacting || loading, title: "Compact database (cleanup changes older than 2 weeks)", children: compacting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }), "Compacting..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-disc" }), " Compact Database"] })) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-warning dropdown-toggle dropdown-toggle-split", "data-bs-toggle": "dropdown", "aria-expanded": "false", disabled: compacting || loading, title: "More compaction options", children: (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: "Toggle Dropdown" }) }), (0, jsx_runtime_1.jsxs)("ul", { className: "dropdown-menu", children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("a", { className: "dropdown-item", href: "#", onClick: (e) => {
                                                         e.preventDefault();
                                                         compactDatabase(Date.now());
                                                     }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle text-danger me-2" }), "Extreme Compaction", (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", children: "Remove ALL change history" })] }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("hr", { className: "dropdown-divider" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("a", { className: "dropdown-item", href: "#", onClick: (e) => {
@@ -145,15 +197,11 @@ function DataExplorerList() {
                                                     }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-clockwise text-warning me-2" }), "Reset Change Tracking", (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", children: "Clear and rebuild all change history" })] }) })] })] }), (0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-primary", onClick: () => {
                                     setLoading(true);
                                     loadTables();
-                                }, disabled: compacting, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-clockwise" }), " Refresh"] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-4", children: (0, jsx_runtime_1.jsx)("div", { className: "card-body", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title mb-2", children: "Current Data Context" }), (0, jsx_runtime_1.jsx)("p", { className: "mb-0", children: currentContext })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-end", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-muted small", children: "Total DB Size" }), (0, jsx_runtime_1.jsx)("div", { className: "fs-4 fw-bold", children: formatBytes(tables.reduce((sum, t) => sum + (t.bytes || 0), 0)) })] })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title", children: ["Registered Tables (", tables.filter((t) => t.isRegistered).length, ")", (0, jsx_runtime_1.jsx)("span", { className: "badge bg-success ms-2", children: "Active" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted small", children: "These tables are registered with the TableContainer and actively used by the application." }), tables.filter((t) => t.isRegistered).length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "No registered tables found" })) : ((0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-hover table-sm", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Table Name" }), (0, jsx_runtime_1.jsx)("th", { children: "Table ID" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Row Count" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Bytes" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: tables
-                                            .filter((t) => t.isRegistered)
-                                            .map((table) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("strong", { children: table.tableName }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: table.tableId || "system" }) }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-" }), (0, jsx_runtime_1.jsx)("td", { className: `text-end fw-bold ${getBytesColorClass(table.bytes)}`, children: formatBytes(table.bytes) })] }, table.tableName))) })] }) }))] }) }), tables.some((t) => !t.isRegistered) && ((0, jsx_runtime_1.jsx)("div", { className: "card", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title", children: ["Unregistered Tables (", tables.filter((t) => !t.isRegistered).length, ")", (0, jsx_runtime_1.jsx)("span", { className: "badge bg-warning text-dark ms-2", children: "Raw SQLite" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted small", children: "These tables exist in the SQLite database but are not registered with the TableContainer. They may be system tables, change tracking tables, or legacy tables." }), (0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-hover table-sm", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Table Name" }), (0, jsx_runtime_1.jsx)("th", { children: "Type" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Row Count" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Bytes" }), (0, jsx_runtime_1.jsx)("th", { children: "SQL Definition" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: tables
-                                            .filter((t) => !t.isRegistered)
-                                            .map((table) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("strong", { children: table.tableName }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("span", { className: "badge bg-secondary", children: table.type || "table" }) }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-" }), (0, jsx_runtime_1.jsx)("td", { className: `text-end fw-bold ${getBytesColorClass(table.bytes)}`, children: formatBytes(table.bytes) }), (0, jsx_runtime_1.jsx)("td", { children: table.sql ? ((0, jsx_runtime_1.jsxs)("details", { children: [(0, jsx_runtime_1.jsx)("summary", { className: "cursor-pointer text-primary", style: { cursor: "pointer" }, children: (0, jsx_runtime_1.jsx)("small", { children: "View SQL" }) }), (0, jsx_runtime_1.jsx)("pre", { className: "mt-2 p-2 bg-body-secondary border rounded", style: {
+                                }, disabled: compacting, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-clockwise" }), " Refresh"] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-4", children: (0, jsx_runtime_1.jsx)("div", { className: "card-body", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title mb-2", children: "Current Data Context" }), (0, jsx_runtime_1.jsx)("p", { className: "mb-0", children: currentContext })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-end", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-muted small", children: "Total DB Size" }), (0, jsx_runtime_1.jsx)("div", { className: "fs-4 fw-bold", children: formatBytes(tables.reduce((sum, t) => sum + (t.bytes || 0), 0)) })] })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title", children: ["Registered Tables (", registeredTables.length, ")", (0, jsx_runtime_1.jsx)("span", { className: "badge bg-success ms-2", children: "Active" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted small", children: "These tables are registered with the TableContainer and actively used by the application." }), registeredTables.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "No registered tables found" })) : ((0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-hover table-sm", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Table Name" }), (0, jsx_runtime_1.jsx)("th", { children: "Table ID" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Row Count" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Bytes" }), (0, jsx_runtime_1.jsx)("th", { style: { width: "1%" } })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: registeredTables.map((table) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("strong", { children: table.tableName }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: table.tableId || "system" }) }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-" }), (0, jsx_runtime_1.jsx)("td", { className: `text-end fw-bold ${getBytesColorClass(table.bytes)}`, children: formatBytes(table.bytes) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-danger border-0", title: `Delete ${table.tableName}`, onClick: () => setDeleteTarget(table.tableName), children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-trash" }) }) })] }, table.tableName))) })] }) }))] }) }), unregisteredTables.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "card mb-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title", children: ["Unregistered Tables (", unregisteredTables.length, ")", (0, jsx_runtime_1.jsx)("span", { className: "badge bg-warning text-dark ms-2", children: "Raw SQLite" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted small", children: "These tables exist in the SQLite database but are not registered with the TableContainer. They may be system tables, change tracking tables, or legacy tables." }), (0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-hover table-sm", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Table Name" }), (0, jsx_runtime_1.jsx)("th", { children: "Type" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Row Count" }), (0, jsx_runtime_1.jsx)("th", { className: "text-end", children: "Bytes" }), (0, jsx_runtime_1.jsx)("th", { children: "SQL Definition" }), (0, jsx_runtime_1.jsx)("th", { style: { width: "1%" } })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: unregisteredTables.map((table) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("strong", { children: table.tableName }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("span", { className: "badge bg-secondary", children: table.type || "table" }) }), (0, jsx_runtime_1.jsx)("td", { className: "text-end", children: table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-" }), (0, jsx_runtime_1.jsx)("td", { className: `text-end fw-bold ${getBytesColorClass(table.bytes)}`, children: formatBytes(table.bytes) }), (0, jsx_runtime_1.jsx)("td", { children: table.sql ? ((0, jsx_runtime_1.jsxs)("details", { children: [(0, jsx_runtime_1.jsx)("summary", { className: "cursor-pointer text-primary", style: { cursor: "pointer" }, children: (0, jsx_runtime_1.jsx)("small", { children: "View SQL" }) }), (0, jsx_runtime_1.jsx)("pre", { className: "mt-2 p-2 bg-body-secondary border rounded", style: {
                                                                     fontSize: "0.75rem",
                                                                     maxHeight: "300px",
                                                                     overflow: "auto",
-                                                                }, children: (0, jsx_runtime_1.jsx)("code", { className: "text-body", children: table.sql }) })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted small", children: "-" })) })] }, table.tableName))) })] }) })] }) }))] }));
+                                                                }, children: (0, jsx_runtime_1.jsx)("code", { className: "text-body", children: table.sql }) })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted small", children: "-" })) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-danger border-0", title: `Delete ${table.tableName}`, onClick: () => setDeleteTarget(table.tableName), children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-trash" }) }) })] }, table.tableName))) })] }) })] }) })), deletedTables.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "card mb-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h5", { className: "card-title", children: ["Deleted Tables (", deletedTables.length, ")", (0, jsx_runtime_1.jsx)("span", { className: "badge bg-danger ms-2", children: "Deleted" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted small", children: "These tables have been deleted. Their definitions are retained so other devices know to stop syncing data for them." }), (0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-hover table-sm", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Table Name" }), (0, jsx_runtime_1.jsx)("th", { children: "Table ID" }), (0, jsx_runtime_1.jsx)("th", { children: "Deleted At" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: deletedTables.map((table) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("strong", { className: "text-muted", children: table.tableName }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: table.tableId }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("span", { title: new Date(table.deletedAt).toLocaleString(), children: formatRelativeTime(table.deletedAt) }) })] }, table.tableId))) })] }) })] }) }))] }));
 }
 (0, ui_loader_1.registerInternalPeersUI)({
     peersUIId: "data-explorer-list-ui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.15.5",
+  "version": "0.16.0",
   "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.0",
     "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.0",
     "@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>