cli-jaw 2.0.10 → 2.0.16

package/public/manager/src/notes/MarkdownEditor.tsx

@@ -1,9 +1,9 @@
 import CodeMirror from '@uiw/react-codemirror';
 import { markdown } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
-import { Prec } from '@codemirror/state';
+import { Prec, type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
-import { lazy, Suspense, useCallback, useMemo, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import { notesEditorTheme, notesSyntaxHighlighting } from './editor-theme';
 import { markdownShortcutsKeymap } from './markdown-shortcuts';
 import { MarkdownPreview } from './MarkdownPreview';
@@ -14,6 +14,14 @@ import { wikiLinkCodeMirrorCompletion } from './wiki-link-codemirror-completion'
 import type { NotesAuthoringMode, NotesNoteLinkRef, NotesNoteMetadata } from './notes-types';
 import type { RichMarkdownWidgetRegistration } from './rich-markdown/rich-markdown-types';
 
+let vimExtensionCache: Extension | null = null;
+async function loadVimExtension(): Promise<Extension> {
+    if (vimExtensionCache) return vimExtensionCache;
+    const { vim } = await import('@replit/codemirror-vim');
+    vimExtensionCache = vim();
+    return vimExtensionCache;
+}
+
 const MilkdownWysiwygEditor = lazy(async () => {
     const module = await import('./wysiwyg/MilkdownWysiwygEditor');
     return { default: module.MilkdownWysiwygEditor };
@@ -28,6 +36,7 @@ type MarkdownEditorProps = {
     notes: readonly NotesNoteMetadata[];
     activeTag: string | null;
     wordWrap: boolean;
+    vimMode: boolean;
     onChange: (value: string) => void;
     onTagSelect: (tag: string | null) => void;
     onWikiLinkNavigate: (path: string) => void;
@@ -35,7 +44,20 @@ type MarkdownEditorProps = {
 
 export function MarkdownEditor(props: MarkdownEditorProps) {
     const [widgets, setWidgets] = useState<Map<string, RichMarkdownWidgetRegistration>>(() => new Map());
+    const [vimExt, setVimExt] = useState<Extension | null>(null);
     const isWysiwyg = props.authoringMode === 'wysiwyg';
+
+    useEffect(() => {
+        if (!props.vimMode) {
+            setVimExt(null);
+            return;
+        }
+        let cancelled = false;
+        void loadVimExtension().then(ext => {
+            if (!cancelled) setVimExt(ext);
+        });
+        return () => { cancelled = true; };
+    }, [props.vimMode]);
     const registerWidget = useCallback((registration: RichMarkdownWidgetRegistration): void => {
         setWidgets(current => {
             const next = new Map(current);
@@ -74,8 +96,9 @@ export function MarkdownEditor(props: MarkdownEditorProps) {
             }),
         ];
         if (props.wordWrap) base.push(EditorView.lineWrapping);
+        if (vimExt) base.unshift(vimExt);
         return base;
-    }, [props.active, props.authoringMode, props.notePath, props.notes, props.wordWrap, registerWidget, requestMeasure, unregisterWidget]);
+    }, [props.active, props.authoringMode, props.notePath, props.notes, props.wordWrap, vimExt, registerWidget, requestMeasure, unregisterWidget]);
 
     if (isWysiwyg) {
         return (

package/public/manager/src/notes/NotesFileTree.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState, type DragEvent, type KeyboardEvent, type MouseEvent } from 'react';
+import { copyText } from '../clipboard/copy-text';
 import type { NotesTreeEntry } from './notes-types';
 
 type NotesTrashItem = { path: string; kind: NotesTreeEntry['kind'] };
@@ -8,6 +9,8 @@ type NotesFileTreeProps = {
     selectedPath: string | null;
     selectedFolderPath: string | null;
     dirtyPath: string | null;
+    highlightedPath?: string | null;
+    externalFocusPath?: string | null;
     loading: boolean;
     notesRoot: string | null;
     onSelectPath: (path: string) => void;
@@ -275,9 +278,10 @@ function renderEntry(
         );
     }
     const dirty = entry.path === props.dirtyPath;
+    const highlighted = entry.path === props.highlightedPath;
     return (
         <li key={entry.path}>
-            <div className={`notes-tree-file-row ${selected ? 'is-selected' : ''} ${dirty ? 'is-dirty' : ''} ${isMultiSelected ? 'is-multi-selected' : ''}`}>
+            <div className={`notes-tree-file-row ${selected ? 'is-selected' : ''} ${dirty ? 'is-dirty' : ''} ${isMultiSelected ? 'is-multi-selected' : ''} ${highlighted ? 'is-highlighted' : ''}`}>
                 <button
                     type="button"
                     className="notes-tree-file-button"
@@ -333,6 +337,22 @@ export function NotesFileTree(props: NotesFileTreeProps) {
     const [anchorPath, setAnchorPath] = useState<string | null>(null);
     const [activeTreePath, setActiveTreePath] = useState<string | null>(null);
 
+    useEffect(() => {
+        const focus = props.externalFocusPath ?? props.highlightedPath;
+        if (!focus) return;
+        const parts = focus.split('/').filter(Boolean);
+        if (parts.length <= 1) return;
+        const ancestors: string[] = [];
+        for (let i = 1; i < parts.length; i++) {
+            ancestors.push(parts.slice(0, i).join('/'));
+        }
+        setExpandedFolders(current => {
+            const next = new Set(current);
+            for (const folder of ancestors) next.add(folder);
+            return next;
+        });
+    }, [props.externalFocusPath, props.highlightedPath]);
+
     function toggleFolder(path: string): void {
         setExpandedFolders(current => {
             const next = new Set(current);
@@ -414,7 +434,9 @@ export function NotesFileTree(props: NotesFileTreeProps) {
 
             event.preventDefault();
             const absolute = paths.map(p => `${root}/${p}`).join('\n');
-            void navigator.clipboard.writeText(absolute);
+            void copyText(absolute).then(result => {
+                if (!result.ok) console.error('[notes:path-copy]', result.error);
+            });
         }
 
         window.addEventListener('keydown', handleCopyPath);

package/public/manager/src/notes/NotesGraphView.tsx

@@ -1,145 +1 @@
-import { useEffect, useRef } from 'react';
-import * as d3 from 'd3';
-import type { NoteGraphNode, NoteGraphEdge } from '../types';
-
-type NotesGraphViewProps = {
-    graph: { nodes: NoteGraphNode[]; edges: NoteGraphEdge[] };
-    selectedPath: string | null;
-    onNavigate: (path: string) => void;
-};
-
-type SimNode = NoteGraphNode & d3.SimulationNodeDatum;
-type SimEdge = { source: SimNode; target: SimNode; raw: string };
-
-function connectionCount(nodeId: string, edges: NoteGraphEdge[]): number {
-    return edges.filter(e => e.source === nodeId || e.target === nodeId).length;
-}
-
-function nodeColor(node: NoteGraphNode, selectedPath: string | null): string {
-    if (node.id === selectedPath) return 'var(--accent-primary, #8ab4ff)';
-    if (node.kind === 'missing') return 'var(--status-error, #f87171)';
-    if (node.kind === 'ambiguous') return 'var(--status-warning, #fbbf24)';
-    return 'var(--text-tertiary, #888)';
-}
-
-export function NotesGraphView(props: NotesGraphViewProps) {
-    const svgRef = useRef<SVGSVGElement | null>(null);
-    const navigateRef = useRef(props.onNavigate);
-    navigateRef.current = props.onNavigate;
-
-    const { graph, selectedPath } = props;
-
-    useEffect(() => {
-        if (!svgRef.current || graph.nodes.length === 0) return;
-        const svg = d3.select(svgRef.current);
-        svg.selectAll('*').remove();
-
-        const width = svgRef.current.clientWidth || 800;
-        const height = svgRef.current.clientHeight || 600;
-
-        const nodes: SimNode[] = graph.nodes.map(n => ({ ...n }));
-        const nodeById = new Map(nodes.map(n => [n.id, n]));
-        const edges: SimEdge[] = graph.edges
-            .filter(e => nodeById.has(e.source) && nodeById.has(e.target))
-            .map(e => ({
-                source: nodeById.get(e.source)!,
-                target: nodeById.get(e.target)!,
-                raw: e.raw,
-            }));
-
-        const maxConn = d3.max(nodes, n => connectionCount(n.id, graph.edges)) ?? 1;
-        const radiusScale = d3.scaleSqrt().domain([0, maxConn]).range([4, 16]);
-
-        const g = svg.append('g');
-
-        const zoom = d3.zoom<SVGSVGElement, unknown>()
-            .scaleExtent([0.2, 5])
-            .on('zoom', (event) => { g.attr('transform', event.transform); });
-        svg.call(zoom);
-
-        const simulation = d3.forceSimulation(nodes)
-            .force('link', d3.forceLink(edges).id((d: any) => d.id).distance(80))
-            .force('charge', d3.forceManyBody().strength(-120))
-            .force('center', d3.forceCenter(width / 2, height / 2))
-            .force('collision', d3.forceCollide().radius((d: any) =>
-                radiusScale(connectionCount(d.id, graph.edges)) + 4,
-            ));
-
-        const link = g.append('g')
-            .selectAll('line')
-            .data(edges)
-            .join('line')
-            .attr('stroke', 'var(--border-secondary, #444)')
-            .attr('stroke-width', 1)
-            .attr('stroke-opacity', 0.5);
-
-        const node = g.append('g')
-            .selectAll<SVGGElement, SimNode>('g')
-            .data(nodes)
-            .join('g')
-            .attr('class', 'graph-node')
-            .attr('cursor', 'pointer')
-            .on('click', (_event: MouseEvent, d: SimNode) => {
-                if (d.kind === 'note') navigateRef.current(d.id);
-            });
-
-        node.append('circle')
-            .attr('r', d => radiusScale(connectionCount(d.id, graph.edges)))
-            .attr('fill', d => nodeColor(d, selectedPath))
-            .attr('stroke', d => d.id === selectedPath ? 'var(--accent-hover, #aac8ff)' : 'none')
-            .attr('stroke-width', 2);
-
-        node.append('text')
-            .text(d => d.title)
-            .attr('dx', d => radiusScale(connectionCount(d.id, graph.edges)) + 4)
-            .attr('dy', '0.35em')
-            .attr('fill', 'var(--text-secondary, #aaa)')
-            .attr('font-size', '11px')
-            .attr('pointer-events', 'none');
-
-        const drag = d3.drag<SVGGElement, SimNode>()
-            .on('start', (event, d) => {
-                if (!event.active) simulation.alphaTarget(0.3).restart();
-                d.fx = d.x;
-                d.fy = d.y;
-            })
-            .on('drag', (event, d) => {
-                d.fx = event.x;
-                d.fy = event.y;
-            })
-            .on('end', (event, d) => {
-                if (!event.active) simulation.alphaTarget(0);
-                d.fx = null;
-                d.fy = null;
-            });
-        node.call(drag);
-
-        simulation.on('tick', () => {
-            link
-                .attr('x1', (d: any) => d.source.x)
-                .attr('y1', (d: any) => d.source.y)
-                .attr('x2', (d: any) => d.target.x)
-                .attr('y2', (d: any) => d.target.y);
-            node.attr('transform', (d: any) => `translate(${d.x},${d.y})`);
-        });
-
-        return () => { simulation.stop(); };
-    }, [graph, selectedPath]);
-
-    if (graph.nodes.length === 0) {
-        return (
-            <div className="notes-graph-view notes-graph-empty">
-                No notes to display
-            </div>
-        );
-    }
-
-    return (
-        <div className="notes-graph-view">
-            <svg ref={svgRef} className="notes-graph-svg" width="100%" height="100%" />
-            <div className="notes-graph-info">
-                {graph.nodes.filter(n => n.kind === 'note').length} notes · {graph.edges.length} links
-            </div>
-        </div>
-    );
-}
+export { NotesGraphWorkspace as NotesGraphView } from './graph/NotesGraphWorkspace';

package/public/manager/src/notes/NotesSidebar.tsx

@@ -15,6 +15,8 @@ type NotesSidebarProps = {
     notesRoot: string | null;
     selectedPath: string | null;
     dirtyPath: string | null;
+    highlightedPath?: string | null;
+    externalFocusPath?: string | null;
     treeWidth: number;
     mode: NotesSidebarMode;
     searchFocusToken: number;
@@ -478,6 +480,8 @@ export function NotesSidebar(props: NotesSidebarProps) {
                         selectedPath={props.selectedPath}
                         selectedFolderPath={selectedFolderPath}
                         dirtyPath={props.dirtyPath}
+                        highlightedPath={props.highlightedPath ?? null}
+                        externalFocusPath={props.externalFocusPath ?? null}
                         loading={props.loading}
                         notesRoot={props.notesRoot}
                         onSelectPath={props.onSelectedPathChange}

package/public/manager/src/notes/NotesThemeLoader.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react';
+import { fetchNoteSnippets, fetchNoteSnippetCss, toggleNoteSnippet, setNoteTheme, type NoteSnippetInfo } from '../api';
+
+const BUILTIN_THEMES = ['default', 'sepia', 'nord', 'solarized-dark'] as const;
+
+export function NotesThemeSettings() {
+    const [snippets, setSnippets] = useState<NoteSnippetInfo[]>([]);
+    const [activeTheme, setActiveThemeState] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        void fetchNoteSnippets().then(data => {
+            setSnippets(data.snippets);
+            setActiveThemeState(data.activeTheme);
+            setLoading(false);
+        }).catch(() => setLoading(false));
+    }, []);
+
+    async function handleThemeChange(theme: string): Promise<void> {
+        const value = theme === 'default' ? null : theme;
+        setActiveThemeState(value);
+        await setNoteTheme(value);
+    }
+
+    async function handleToggleSnippet(name: string, enabled: boolean): Promise<void> {
+        setSnippets(prev => prev.map(s => s.name === name ? { ...s, enabled } : s));
+        await toggleNoteSnippet(name, enabled);
+    }
+
+    if (loading) return <div className="notes-theme-loading">Loading theme settings...</div>;
+
+    return (
+        <div className="notes-theme-settings">
+            <fieldset className="notes-theme-fieldset">
+                <legend>Theme</legend>
+                <select
+                    value={activeTheme ?? 'default'}
+                    onChange={e => void handleThemeChange(e.target.value)}
+                >
+                    {BUILTIN_THEMES.map(t => (
+                        <option key={t} value={t}>{t}</option>
+                    ))}
+                </select>
+            </fieldset>
+            {snippets.length > 0 && (
+                <fieldset className="notes-theme-fieldset">
+                    <legend>CSS Snippets</legend>
+                    <div className="notes-theme-warning">CSS snippets run trusted local code.</div>
+                    {snippets.map(snippet => (
+                        <label key={snippet.name} className="notes-snippet-toggle">
+                            <input
+                                type="checkbox"
+                                checked={snippet.enabled}
+                                onChange={e => void handleToggleSnippet(snippet.name, e.target.checked)}
+                            />
+                            {snippet.name}
+                        </label>
+                    ))}
+                </fieldset>
+            )}
+        </div>
+    );
+}
+
+export function NotesThemeInjector() {
+    const [activeTheme, setActiveTheme] = useState<string | null>(null);
+    const [enabledSnippets, setEnabledSnippets] = useState<string[]>([]);
+    const [snippetCss, setSnippetCss] = useState<Map<string, string>>(new Map());
+
+    useEffect(() => {
+        void fetchNoteSnippets().then(data => {
+            setActiveTheme(data.activeTheme);
+            setEnabledSnippets(data.snippets.filter(s => s.enabled).map(s => s.name));
+        });
+    }, []);
+
+    useEffect(() => {
+        for (const name of enabledSnippets) {
+            if (snippetCss.has(name)) continue;
+            void fetchNoteSnippetCss(name).then(css => {
+                setSnippetCss(prev => new Map(prev).set(name, css));
+            });
+        }
+    }, [enabledSnippets]);
+
+    useEffect(() => {
+        const el = document.documentElement;
+        if (activeTheme) {
+            el.setAttribute('data-notes-theme', activeTheme);
+        } else {
+            el.removeAttribute('data-notes-theme');
+        }
+        return () => el.removeAttribute('data-notes-theme');
+    }, [activeTheme]);
+
+    const activeCss = enabledSnippets
+        .map(name => snippetCss.get(name))
+        .filter((css): css is string => Boolean(css))
+        .join('\n');
+
+    if (!activeCss) return null;
+
+    return <style dangerouslySetInnerHTML={{ __html: activeCss }} />;
+}

package/public/manager/src/notes/NotesWorkspace.tsx

@@ -1,4 +1,5 @@
 import { lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import { NotesThemeInjector, NotesThemeSettings } from './NotesThemeLoader';
 import { MarkdownEditor } from './MarkdownEditor';
 import { MarkdownPreview } from './MarkdownPreview';
 import { NotesBacklinksPanel } from './NotesBacklinksPanel';
@@ -12,11 +13,12 @@ import { isQuickSwitcherShortcut } from './notes-shortcuts';
 import { renameNotePath } from './notes-api';
 import { useNoteDocument } from './useNoteDocument';
 import { publishInvalidation } from '../sync/invalidation-bus';
+import type { DashboardNotesGraphSettings } from '../types';
 import type { NotesAuthoringMode, NotesNoteMetadata, NotesVaultIndexSnapshot, NotesViewMode } from './notes-types';
 
-const NotesGraphView = lazy(async () => {
-    const module = await import('./NotesGraphView');
-    return { default: module.NotesGraphView };
+const NotesGraphWorkspace = lazy(async () => {
+    const module = await import('./graph/NotesGraphWorkspace');
+    return { default: module.NotesGraphWorkspace };
 });
 
 type NotesPrimaryMode = 'raw' | 'preview' | 'wysiwyg';
@@ -29,7 +31,9 @@ type NotesWorkspaceProps = {
     viewMode: NotesViewMode;
     authoringMode: NotesAuthoringMode;
     wordWrap: boolean;
+    vimMode: boolean;
     treeWidth: number;
+    notesGraphSettings?: DashboardNotesGraphSettings | undefined;
     tagFilter: string | null;
     onOpenSidebarSearch: () => void;
     onSelectedPathChange: (path: string | null) => void;
@@ -37,7 +41,9 @@ type NotesWorkspaceProps = {
     onViewModeChange: (mode: NotesViewMode) => void;
     onAuthoringModeChange: (mode: NotesAuthoringMode) => void;
     onWordWrapChange: (value: boolean) => void;
+    onVimModeChange: (value: boolean) => void;
     onTreeWidthChange: (value: number) => void;
+    onNotesGraphSettingsChange: (settings: DashboardNotesGraphSettings) => void;
     onTagSelect: (tag: string | null) => void;
     onWikiLinkNavigate: (path: string) => void;
 };
@@ -204,6 +210,13 @@ export function NotesWorkspace(props: NotesWorkspaceProps) {
             label: props.wordWrap ? 'Disable word wrap' : 'Enable word wrap',
             run: () => props.onWordWrapChange(!props.wordWrap),
         },
+        {
+            id: 'workspace:toggle-vim-mode',
+            section: 'Editor',
+            label: props.vimMode ? 'Disable Vim mode' : 'Enable Vim mode',
+            keywords: ['vim', 'keybindings', 'editor'],
+            run: () => props.onVimModeChange(!props.vimMode),
+        },
         {
             id: 'workspace:open-search',
             section: 'Navigate',
@@ -226,8 +239,10 @@ export function NotesWorkspace(props: NotesWorkspaceProps) {
         props.onAuthoringModeChange,
         props.onOpenSidebarSearch,
         props.onViewModeChange,
+        props.onVimModeChange,
         props.onWordWrapChange,
         props.selectedPath,
+        props.vimMode,
         props.wordWrap,
         saveDisabledReason,
     ]);
@@ -270,6 +285,7 @@ export function NotesWorkspace(props: NotesWorkspaceProps) {
 
     return (
         <section className="notes-workspace" aria-label="Notes workspace">
+            <NotesThemeInjector />
             <main className={`notes-main notes-mode-${props.viewMode}`}>
                 <NotesToolbar
                     selectedPath={props.selectedPath}
@@ -304,6 +320,14 @@ export function NotesWorkspace(props: NotesWorkspaceProps) {
                                 />
                                 Word wrap
                             </label>
+                            <label>
+                                <input
+                                    type="checkbox"
+                                    checked={props.vimMode}
+                                    onChange={event => props.onVimModeChange(event.currentTarget.checked)}
+                                />
+                                Vim mode
+                            </label>
                             <label>
                                 Tree width
                                 <input
@@ -314,13 +338,16 @@ export function NotesWorkspace(props: NotesWorkspaceProps) {
                                     onChange={event => props.onTreeWidthChange(Number(event.currentTarget.value))}
                                 />
                             </label>
+                            <NotesThemeSettings />
                         </section>
                     )}
                     {props.viewMode === 'graph' && (
                         <Suspense fallback={<div className="notes-graph-loading">Loading graph...</div>}>
-                            <NotesGraphView
-                                graph={props.vaultIndex?.graph ?? { nodes: [], edges: [] }}
+                            <NotesGraphWorkspace
+                                vaultIndex={props.vaultIndex}
                                 selectedPath={props.selectedPath}
+                                settings={props.notesGraphSettings}
+                                onSettingsChange={props.onNotesGraphSettingsChange}
                                 onNavigate={(path) => {
                                     props.onSelectedPathChange(path);
                                     props.onViewModeChange('raw');
@@ -358,6 +385,7 @@ export function NotesWorkspace(props: NotesWorkspaceProps) {
                                     notes={indexedNotes}
                                     activeTag={props.tagFilter}
                                     wordWrap={props.wordWrap}
+                                    vimMode={props.vimMode}
                                     onChange={document.setContent}
                                     onTagSelect={props.onTagSelect}
                                     onWikiLinkNavigate={props.onWikiLinkNavigate}