pi-weave 0.3.0 → 0.3.2

package/src/web/client/note/drafts.ts

@@ -0,0 +1,172 @@
+import { tabSelection, type WorkspaceLayout } from "../../shared/workspace";
+
+export interface NoteDraft {
+  body: string;
+  baseline: string;
+  saving: boolean;
+}
+
+interface TaskSource {
+  body: string;
+  version: number;
+  pending?: { body: string; version: number };
+  saving: boolean;
+}
+
+export interface DraftStore {
+  get(slug: string): Readonly<NoteDraft> | null;
+  subscribe(listener: () => void): () => void;
+  open(slug: string, body: string): void;
+  edit(slug: string, body: string): void;
+  discard(slug: string): void;
+  isDirty(slug: string): boolean;
+  dirtySlugs(): string[];
+  save(slug: string, onSave: (slug: string, body: string) => Promise<boolean>): Promise<void>;
+  nextLoadVersion(): number;
+  getTaskBody(slug: string, fallback: string): string;
+  taskBody(slug: string, serverBody: string, loadVersion: number): string;
+  isTaskSaving(slug: string): boolean;
+  saveTask(slug: string, body: string, onSave: (slug: string, body: string) => Promise<boolean>): Promise<boolean>;
+  clearTaskSources(slugs: readonly string[]): void;
+}
+
+export function createDraftStore(): DraftStore {
+  const drafts = new Map<string, NoteDraft>();
+  const taskSources = new Map<string, TaskSource>();
+  const listeners = new Set<() => void>();
+  let loadVersion = 0;
+  const notify = (): void => listeners.forEach((listener) => listener());
+
+  return {
+    get: (slug) => drafts.get(slug) ?? null,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    open(slug, body) {
+      if (drafts.has(slug)) return;
+      drafts.set(slug, { body, baseline: body, saving: false });
+      notify();
+    },
+    edit(slug, body) {
+      const draft = drafts.get(slug);
+      if (draft === undefined || draft.body === body) return;
+      draft.body = body;
+      notify();
+    },
+    discard(slug) {
+      if (drafts.delete(slug)) notify();
+    },
+    isDirty(slug) {
+      const draft = drafts.get(slug);
+      return draft !== undefined && draft.body !== draft.baseline;
+    },
+    dirtySlugs() {
+      return [...drafts].filter(([, draft]) => draft.body !== draft.baseline).map(([slug]) => slug);
+    },
+    async save(slug, onSave) {
+      const draft = drafts.get(slug);
+      if (draft === undefined || draft.saving || taskSources.get(slug)?.saving) return;
+      const sent = draft.body;
+      draft.saving = true;
+      notify();
+      let ok = false;
+      try {
+        ok = await onSave(slug, sent);
+      } finally {
+        // Discard/reopen during an in-flight request gives the new draft a new identity.
+        if (drafts.get(slug) === draft) {
+          const source = taskSources.get(slug);
+          if (ok && source !== undefined) {
+            source.body = sent;
+            source.version = ++loadVersion;
+            delete source.pending;
+          }
+          if (ok && draft.body === sent) drafts.delete(slug);
+          else {
+            if (ok) draft.baseline = sent;
+            draft.saving = false;
+          }
+          notify();
+        }
+      }
+    },
+    nextLoadVersion() {
+      return ++loadVersion;
+    },
+    getTaskBody(slug, fallback) {
+      return taskSources.get(slug)?.body ?? fallback;
+    },
+    taskBody(slug, serverBody, version) {
+      let source = taskSources.get(slug);
+      let changed = false;
+      if (source === undefined) {
+        source = { body: serverBody, version, saving: false };
+        taskSources.set(slug, source);
+      } else if (version > source.version) {
+        if (source.saving) {
+          if (source.pending === undefined || version > source.pending.version) source.pending = { body: serverBody, version };
+        } else {
+          changed = source.body !== serverBody;
+          source.body = serverBody;
+          source.version = version;
+        }
+      }
+      if (changed) notify();
+      return source.body;
+    },
+    isTaskSaving: (slug) => taskSources.get(slug)?.saving ?? false,
+    async saveTask(slug, body, onSave) {
+      const source = taskSources.get(slug);
+      if (source === undefined || source.saving || drafts.get(slug)?.saving) return false;
+      source.saving = true;
+      notify();
+      let ok = false;
+      try {
+        ok = await onSave(slug, body);
+        return ok;
+      } finally {
+        if (taskSources.get(slug) === source) {
+          if (ok) {
+            source.body = body;
+            // Invalidate note loads that began before this save completed.
+            source.version = ++loadVersion;
+          } else if (source.pending !== undefined && source.pending.version > source.version) {
+            source.body = source.pending.body;
+            source.version = source.pending.version;
+          }
+          delete source.pending;
+          source.saving = false;
+          notify();
+        }
+      }
+    },
+    clearTaskSources(slugs) {
+      let changed = false;
+      for (const slug of slugs) changed = taskSources.delete(slug) || changed;
+      if (changed) notify();
+    },
+  };
+}
+
+/** Removing the last selected view of a dirty note requires deliberate discard. */
+export function mayRemoveDrafts(drafts: DraftStore, current: WorkspaceLayout, next: WorkspaceLayout, confirm: () => boolean): boolean {
+  const before = new Set(current.panes.flatMap((pane) => pane.tabs.map(tabSelection)));
+  const after = new Set(next.panes.flatMap((pane) => pane.tabs.map(tabSelection)));
+  const removed = [...before].filter((id): id is string => id !== null && id.startsWith("note:") && !after.has(id))
+    .map((id) => id.slice(5));
+  if (removed.some((slug) => drafts.isDirty(slug)) && !confirm()) return false;
+  removed.forEach((slug) => drafts.discard(slug));
+  drafts.clearTaskSources(removed);
+  return true;
+}
+
+/** Confirm only dirty drafts affected by a tree mutation, then clear affected state. */
+export function mayMutateDrafts(drafts: DraftStore, affectedSlugs: readonly string[], confirm: () => boolean): boolean {
+  const affected = new Set(affectedSlugs);
+  const dirty = drafts.dirtySlugs().filter((slug) => affected.has(slug));
+  if (dirty.length > 0 && !confirm()) return false;
+  affected.forEach((slug) => drafts.discard(slug));
+  drafts.clearTaskSources([...affected]);
+  return true;
+}

package/src/web/client/note/note.model.ts

@@ -334,7 +334,7 @@ export function resolveMarkdownLink(index: WikiIndex, href: string): string | nu
  * Whether an unresolved wikilink should be drawn as a ghost.
  *
  * See {@link WikiIndex}: only when the payload independently confirms this
- * note has unresolved links. Obsidian's ghost styling is an *offer to create
+ * note has unresolved links. Ghost styling is an *offer to create
  * the note*, so showing it for a link that in fact resolves would be an offer
  * to create a note that already exists.
  */
@@ -847,32 +847,6 @@ export const SAVING_LABEL = "Saving…";
 export const EDITOR_ARIA_LABEL = "Note body";
 export const DISCARD_PROMPT = "Discard unsaved changes to this note?";
 
-/**
- * Whether the draft differs from the note as last loaded. Trailing whitespace
- * counts: the save trims, so calling such a draft clean would skip the prompt
- * on the one edit that gets silently reverted.
- */
-export function draftDirty(draft: string, body: string): boolean {
-  return draft !== body;
-}
-
-/**
- * Whether a save's reply still belongs to the editor that issued it. A
- * counter, not the slug: reopening the same note is a new session too.
- */
-export function saveLanded(issued: number, current: number): boolean {
-  return issued === current;
-}
-
-/**
- * Whether the draft moved since the bytes a save sent — keystrokes made
- * during the request were never in it, so a success must not close over them.
- * Unlike {@link saveLanded}, this is about the *text*, not the session.
- */
-export function draftMoved(sent: string, current: string | null): boolean {
-  return current !== null && current !== sent;
-}
-
 /** The note header: title, provenance badge, relative time, tags. */
 export interface NoteHeaderView {
   readonly title: string;
@@ -959,13 +933,7 @@ export const PREVIEW_GAP = 8;
 /** The card's kind line for a link nothing in the vault answers to. */
 export const GHOST_KIND = "no note";
 
-/**
- * The card's DOM id, shared by the element and the `aria-describedby` it is
- * announced through. A constant rather than an inline literal on both sides
- * because the link is a *string* of rendered HTML — see
- * `Note.tsx`'s layout effect — and the pair cannot be typed into agreement.
- */
-export const PREVIEW_ID = "weave-preview";
+
 
 /** A `PreviewElement` the preview's delegated handlers may land on. */
 export interface PreviewAnchor {

package/src/web/client/search/SearchPalette.tsx

@@ -9,12 +9,12 @@ import type { SearchState } from "./search.model";
 
 export interface SearchPaletteProps {
   graph: GraphPayload | null;
-  onSelect: (id: string) => void;
+  onSelect: (id: string, newTab?: boolean) => void;
   onClose: () => void;
   ports: { fetch: FetchLike };
 }
 
-function Row({ row, onPick, onHover }: { row: SearchRowView; onPick: () => void; onHover: () => void }) {
+function Row({ row, onPick, onHover }: { row: SearchRowView; onPick: (newTab: boolean) => void; onHover: () => void }) {
   return (
     <li
       id={row.domId}
@@ -22,7 +22,7 @@ function Row({ row, onPick, onHover }: { row: SearchRowView; onPick: () => void;
       aria-selected={row.active}
       class={`weave-hit weave-hit-${row.kind}${row.active ? " weave-hit-on" : ""}`}
       onMouseMove={onHover}
-      onClick={onPick}
+      onClick={(event) => onPick(event.metaKey || event.ctrlKey)}
     >
       <span class="weave-hit-badge">{row.badge}</span>
       <span class="weave-hit-label">{row.label}</span>
@@ -70,9 +70,9 @@ export function SearchPalette(props: SearchPaletteProps) {
   }, [state.query, props.ports.fetch]);
 
   const model = paletteModel(state, props.graph);
-  const pick = (index: number | null): void => {
+  const pick = (index: number | null, newTab = false): void => {
     const id = resultIdAt(model.rows, index);
-    if (id !== null) props.onSelect(id);
+    if (id !== null) props.onSelect(id, newTab);
     props.onClose();
   };
 
@@ -92,7 +92,7 @@ export function SearchPalette(props: SearchPaletteProps) {
           if (!next.handled) return;
           event.preventDefault();
           setState((current) => ({ ...current, cursor: next.cursor }));
-          if (next.dismiss) pick(next.activate);
+          if (next.dismiss) pick(next.activate, event.metaKey || event.ctrlKey);
         }}
       >
         <input
@@ -108,14 +108,15 @@ export function SearchPalette(props: SearchPaletteProps) {
         />
         {model.status === null ? (
           <ul id="weave-search-results" class="weave-hits" role="listbox" aria-label={PALETTE_TITLE}>
-            {model.rows.map((row, index) => <Row key={row.id} row={row} onPick={() => pick(index)} onHover={() => setState((current) => ({ ...current, cursor: index }))} />)}
+            {model.rows.map((row, index) => <Row key={row.id} row={row} onPick={(newTab) => pick(index, newTab)} onHover={() => setState((current) => ({ ...current, cursor: index }))} />)}
           </ul>
         ) : (
           <p class="weave-palette-status" role="status">{model.status}</p>
         )}
         <p class="weave-palette-foot">
           <span>{model.countLabel}</span>
-          <span class="weave-palette-hint">{PALETTE_HINT}</span>
+          <button type="button" class="weave-chip" disabled={model.count === 0} onClick={() => pick(state.cursor, true)}>Open in new tab</button>
+          <span class="weave-palette-hint">{PALETTE_HINT} · ⌘/Ctrl ↵ new tab</span>
         </p>
       </div>
     </div>

package/src/web/client/shell/ContextRail.tsx

@@ -22,13 +22,13 @@ import { Icon } from "../tree/Tree";
 export interface ContextRailProps {
   graph: GraphPayload | null;
   selectedId: string | null;
-  onSelect: (id: string) => void;
+  onSelect: (id: string, newTab?: boolean) => void;
 }
 
-function Row({ row, onSelect }: { row: ContextRow; onSelect: () => void }) {
+function Row({ row, onSelect }: { row: ContextRow; onSelect: (newTab: boolean) => void }) {
   return (
     <li class={`weave-ctx-row${row.selected ? " weave-row-on" : ""}`}>
-      <button type="button" class="weave-ctx-link" onClick={onSelect}>
+      <button type="button" class="weave-ctx-link" onClick={(event) => onSelect(event.metaKey || event.ctrlKey)}>
         <span class="weave-kind" aria-hidden="true">
           <Icon name={row.kindIcon} class="weave-icon" />
         </span>
@@ -64,26 +64,26 @@ function Heading({ view, onToggle }: { view: RailSectionView; onToggle: () => vo
   );
 }
 
-function Group({ view, onSelect, onToggle }: { view: RailSectionView; onSelect: (id: string) => void; onToggle: () => void }) {
+function Group({ view, onSelect, onToggle }: { view: RailSectionView; onSelect: (id: string, newTab?: boolean) => void; onToggle: () => void }) {
   return (
     <section class="weave-ctx-group">
       <Heading view={view} onToggle={onToggle} />
       <ul class="weave-ctx-rows" id={railPanelId(view.heading)} hidden={view.collapsed}>
         {view.rows.map((row) => (
-          <Row key={row.id} row={row} onSelect={() => onSelect(row.target)} />
+          <Row key={row.id} row={row} onSelect={(newTab) => onSelect(row.target, newTab)} />
         ))}
       </ul>
     </section>
   );
 }
 
-function Tag({ tag, onSelect }: { tag: TagGroupRow; onSelect: (id: string) => void }) {
+function Tag({ tag, onSelect }: { tag: TagGroupRow; onSelect: (id: string, newTab?: boolean) => void }) {
   return (
     <li class="weave-ctx-tag">
       <span class="weave-tag">#{tag.tag}</span>
       <ul class="weave-ctx-rows">
         {tag.siblings.map((row) => (
-          <Row key={row.id} row={row} onSelect={() => onSelect(row.target)} />
+          <Row key={row.id} row={row} onSelect={(newTab) => onSelect(row.target, newTab)} />
         ))}
       </ul>
     </li>
@@ -102,7 +102,6 @@ export function ContextRail(props: ContextRailProps) {
   const tags = railTagsView(model.tags, toggles);
   return (
     <div class="weave-rail" aria-label={CONTEXT_EMPTY.title}>
-      <h2 class="weave-col-title">{CONTEXT_EMPTY.title}</h2>
       {model.empty === null ? null : <p class="weave-ctx-empty">{model.empty}</p>}
       {model.groups.map((group) => {
         const view = railSectionView(group, toggles);
@@ -120,4 +119,4 @@ export function ContextRail(props: ContextRailProps) {
       )}
     </div>
   );
-}
+}

package/src/web/client/shell/Settings.tsx

@@ -0,0 +1,71 @@
+import { useState } from "preact/hooks";
+import type { ComponentChildren } from "preact";
+import type { WorkspaceLayout } from "../../shared/workspace";
+import type { Preferences } from "../../shared/preferences";
+import { ACCENTS, THEMES } from "../../shared/themes";
+import type { AccentChoice, PaletteChoice } from "../../shared/themes";
+import { ForceTuner } from "../graph/ForceTuner";
+import { useFocusTrap } from "./FocusTrap";
+import { keyHelp } from "./keys.model";
+
+const CATEGORIES = ["General", "Appearance", "Interface", "Editor", "Files", "Backup"] as const;
+function Row(props: { name: string; hint: string; children: ComponentChildren }) {
+  return <label class="weave-setting-row"><span><strong>{props.name}</strong><small>{props.hint}</small></span>{props.children}</label>;
+}
+
+export function Settings(props: {
+  compact: boolean; layout: WorkspaceLayout; info: { version: string; vaultRoot: string }; cwd: string; shortcut: string;
+  onChange: (layout: WorkspaceLayout) => void; onRefresh: () => void; onClose: () => void;
+}) {
+  const [category, setCategory] = useState<typeof CATEGORIES[number]>("General");
+  const trap = useFocusTrap();
+  const p = props.layout.preferences;
+  const update = (values: Partial<Preferences>): void => props.onChange({ ...props.layout, preferences: { ...p, ...values } });
+  return <div class="weave-scrim weave-settings-scrim" onClick={props.onClose}>
+    <div class="weave-settings" role="dialog" aria-modal="true" aria-label="Settings" tabIndex={-1}
+      ref={trap.ref as { current: HTMLDivElement | null }} onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => void trap.onKeyDown(event as unknown as KeyboardEvent)}>
+      <header><h2>Settings</h2><button type="button" aria-label="Close settings" onClick={props.onClose}>×</button></header>
+      <nav aria-label="Settings categories">{props.compact ? <select class="weave-settings-category" aria-label="Settings category" value={category} onChange={(event) => setCategory(event.currentTarget.value as typeof category)}>{CATEGORIES.map((name) => <option key={name} value={name}>{name}</option>)}</select> : CATEGORIES.map((name) => <button type="button" key={name} aria-current={category === name ? "page" : undefined} onClick={() => setCategory(name)}>{name}</button>)}</nav>
+      <section aria-label={`${category} settings`}><h3>{category}</h3>
+        {category === "General" ? <>
+          <p>Pi Weave {props.info.version}</p>
+          <dl class="weave-settings-locations"><dt>Vault</dt><dd>{props.info.vaultRoot || "Loading…"}</dd><dt>Repository</dt><dd>{props.cwd}</dd></dl>
+          <div class="weave-settings-actions"><button type="button" onClick={props.onRefresh}>Refresh workspace</button><a href="https://github.com/EranYonai/pi-weave#readme" target="_blank" rel="noreferrer">Documentation ↗</a></div>
+          <details><summary tabIndex={0}>Keyboard shortcuts</summary>{keyHelp(props.shortcut.slice(0, -1)).map((group) => <div key={group.title}><h4>{group.title}</h4>{group.entries.map((entry) => <div class="weave-key-row" key={entry.combo}><kbd>{entry.combo}</kbd><span>{entry.what}</span></div>)}</div>)}</details>
+        </> : null}
+        {category === "Appearance" ? <>
+          <Row name="Color scheme" hint="System follows your device and uses your chosen light and dark themes."><select aria-label="Color scheme" value={props.layout.theme === "system" ? "system" : THEMES[props.layout.theme].scheme} onChange={(event) => props.onChange({ ...props.layout, theme: event.currentTarget.value === "system" ? "system" : event.currentTarget.value === "light" ? p.lightTheme : p.darkTheme })}><option value="system">System</option><option value="light">Light</option><option value="dark">Dark</option></select></Row>
+          {(["light", "dark"] as const).map((scheme) => <Row key={scheme} name={`${scheme === "light" ? "Light" : "Dark"} theme`} hint={`Used in ${scheme} mode and by the ribbon theme button.`}><select aria-label={`${scheme === "light" ? "Light" : "Dark"} theme`} value={p[`${scheme}Theme`]} onChange={(event) => {
+            const theme = event.currentTarget.value as PaletteChoice;
+            props.onChange({ ...props.layout, preferences: { ...p, [`${scheme}Theme`]: theme }, theme: props.layout.theme !== "system" && THEMES[props.layout.theme].scheme === scheme ? theme : props.layout.theme });
+          }}>{Object.entries(THEMES).filter(([, theme]) => theme.scheme === scheme).map(([id, theme]) => <option key={id} value={id}>{theme.name}</option>)}</select></Row>)}
+          <Row name="Accent color" hint="Choose independently of the theme. Shades adapt to light and dark backgrounds."><select aria-label="Accent color" value={p.accent} onChange={(event) => update({ accent: event.currentTarget.value as AccentChoice })}><option value="theme">Theme default</option>{Object.entries(ACCENTS).map(([id, accent]) => <option value={id} key={id}>{accent.name}</option>)}</select></Row>
+          <Row name="Note font size" hint="Applies to reading and editing notes."><span class="weave-setting-range"><input aria-label="Note font size" type="range" min={12} max={22} step={1} value={p.fontSize} onInput={(event) => update({ fontSize: Number(event.currentTarget.value) })} /><output>{p.fontSize}px</output></span></Row>
+        </> : null}
+        {category === "Interface" ? <>
+          <Row name="Notes sidebar" hint="Show files and recent notes."><input type="checkbox" checked={props.layout.treeVisible} onChange={(event) => props.onChange({ ...props.layout, treeVisible: event.currentTarget.checked })} /></Row>
+          <Row name="Context sidebar" hint="Show links, backlinks, and related items."><input type="checkbox" checked={props.layout.contextVisible} onChange={(event) => props.onChange({ ...props.layout, contextVisible: event.currentTarget.checked })} /></Row>
+          <Row name="Color graph by group" hint="Give each containment group its own color."><input type="checkbox" checked={p.groupColors} onChange={(event) => update({ groupColors: event.currentTarget.checked })} /></Row>
+          <h4>Graph layout</h4><p class="weave-settings-hint">Adjust the graph live. Your choices are saved for this workspace.</p>
+          <ForceTuner forces={p.forces} onChange={(forces) => update({ forces })} />
+        </> : null}
+        {category === "Editor" ? <>
+          <Row name="Spellcheck" hint="Use your browser or device’s spellchecker while editing."><input type="checkbox" checked={p.spellcheck} onChange={(event) => update({ spellcheck: event.currentTarget.checked })} /></Row>
+          <Row name="Readable line length" hint="Keep note text in a comfortable reading column."><input type="checkbox" checked={p.readable} onChange={(event) => update({ readable: event.currentTarget.checked })} /></Row>
+          <Row name="Open notes in editing mode" hint="Newly opened notes start in the editor. Existing drafts are preserved."><input type="checkbox" checked={p.defaultEdit} onChange={(event) => update({ defaultEdit: event.currentTarget.checked })} /></Row>
+        </> : null}
+        {category === "Files" ? <>
+          <Row name="On startup" hint="Choose which tabs appear when you reopen this workspace."><select aria-label="On startup" value={p.startup} onChange={(event) => update({ startup: event.currentTarget.value as Preferences["startup"] })}><option value="restore">Restore open tabs</option><option value="empty">Start with an empty tab</option></select></Row>
+          <Row name="Focus new tabs" hint="Switch to notes opened in a new tab, including from the graph."><input type="checkbox" checked={p.focusNewTabs} onChange={(event) => update({ focusNewTabs: event.currentTarget.checked })} /></Row>
+          <h4>Deleting files</h4><p>Deleting a note or folder removes it from the vault after confirmation. Download a backup before deleting anything you may need again.</p>
+        </> : null}
+        {category === "Backup" ? <>
+          <h4>Download your vault</h4><p>Save a ZIP containing the vault’s files and folders, including notes, metadata, and attachments. Linked files and folders are included as files.</p>
+          <p>Save any unsaved edits first. The download contains files saved on disk. Backups are manual; store the ZIP somewhere safe.</p>
+          <a class="weave-settings-download" href="/api/backup" download>Download vault ZIP</a>
+        </> : null}
+      </section>
+    </div>
+  </div>;
+}