dsh-tiddlywiki 0.2.1 → 0.3.1

package/lib/client.js

@@ -88,9 +88,9 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
    setting controls whether they mount at all. */
 .dsh-tw-panel-status {
   /* 状态/重载悬浮按钮：右对齐到与快速笔记按钮同一条竖线（right:24），
-     垂直排在快速笔记按钮（bottom:88，高约 38px）上方；
+     垂直排在「同步」按钮（bottom:140）上方；
      两个按钮竖直依次排列（状态在上、重载在下），与其他插件按钮列对齐、不堆叠。 */
-  position: fixed; right: 24px; bottom: 140px; z-index: 950;
+  position: fixed; right: 24px; bottom: 192px; z-index: 950;
   display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
 }
 .dsh-tw-panel-status-btn {
@@ -125,9 +125,12 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
 
 /* ── floating quick-note widget ────────────────────────────────
    Positioned ABOVE the shutdown launcher FAB (fixed right:24 bottom:24,
-   z-index 900, 46px) and BELOW its confirm overlay (z-index 1000). */
+   z-index 900, 46px) and BELOW its confirm overlay (z-index 1000).
+   Interactive overlays (the open card, the native-editor popup) sit ABOVE the
+   passive FAB column (sync/status, z-index 950) so those FABs never cover the
+   card's own bottom-right buttons. */
 .dsh-tw-note {
-  position: fixed; right: 24px; bottom: 88px; z-index: 950;
+  position: fixed; right: 24px; bottom: 88px; z-index: 980;
   display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
   font-family: inherit;
 }
@@ -138,11 +141,18 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
   border-radius: 14px; box-shadow: var(--dsw-shadow-lv3, 0 8px 30px rgba(0,0,0,.22));
   padding: 12px; display: flex; flex-direction: column; gap: 10px;
   font-size: 13px;
+  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
+  animation: dsh-tw-note-in 180ms ease;
 }
 .dsh-tw-note-card[hidden] { display: none; }
+@keyframes dsh-tw-note-in {
+  from { opacity: 0; transform: translateY(8px) scale(.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
 .dsh-tw-note-head {
   display: flex; align-items: center; gap: 8px;
-  font-size: 12px; font-weight: 600; color: var(--dsw-alias-label-primary, #222);
+  font-size: 12px; font-weight: 600; letter-spacing: .2px;
+  color: var(--dsw-alias-label-primary, #222);
 }
 .dsh-tw-note-head .dsh-tw-note-label { margin-right: auto; display: flex; align-items: center; gap: 6px; }
 .dsh-tw-note-close {
@@ -161,28 +171,91 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
   outline: none; border-color: var(--dsw-alias-brand-primary, #3e63dd);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 25%, transparent);
 }
-.dsh-tw-note-text {
+.dsh-tw-note-text::placeholder { color: var(--dsw-alias-label-dimmed, #999); }
+/* ── Markdown editor (highlighted-textarea overlay) ────────────────
+   The <pre> highlight layer and the transparent <textarea> share identical
+   metrics (border/padding/font/line-height/white-space) so lines align 1:1. */
+.dsh-tw-note-editor { position: relative; min-width: 0; }
+.dsh-tw-note-editor pre,
+.dsh-tw-note-editor textarea {
+  margin: 0; box-sizing: border-box; width: 100%;
   border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18)); border-radius: 8px;
-  padding: 8px 9px; font: inherit; font-size: 13px; min-height: 120px; resize: vertical;
-  background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, inherit);
+  padding: 8px 9px; font: inherit; font-size: 13px; line-height: 1.5; min-height: 120px;
+  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; tab-size: 4;
   transition: border-color 120ms ease, box-shadow 120ms ease;
 }
+.dsh-tw-note-editor .dsh-tw-note-hl {
+  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
+  background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #222);
+  pointer-events: none; overflow: hidden;
+}
+.dsh-tw-note-editor .dsh-tw-note-text {
+  position: relative; z-index: 1; resize: vertical;
+  background: transparent; color: transparent; caret-color: var(--dsw-alias-label-primary, #222);
+  overflow: auto;
+}
+.dsh-tw-note-editor .dsh-tw-note-text:focus { outline: none; }
+.dsh-tw-note-drop .dsh-tw-note-text,
+.dsh-tw-note-drop .dsh-tw-note-hl {
+  border-color: var(--dsw-alias-brand-primary, #3e63dd);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 25%, transparent);
+}
+/* ── markdown highlight tokens (colors only — never size/height, so the
+      overlay keeps line-for-line alignment with the invisible textarea) ── */
+.dsh-tw-note-hl .md-heading { font-weight: 700; color: var(--dsw-alias-brand-primary, #3e63dd); }
+.dsh-tw-note-hl .md-hash { font-weight: 700; color: color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 55%, transparent); }
+.dsh-tw-note-hl .md-code,
+.dsh-tw-note-hl .md-code-block,
+.dsh-tw-note-hl .md-fence {
+  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
+}
+.dsh-tw-note-hl .md-code {
+  background: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 14%, transparent);
+  border-radius: 4px; padding: 0 3px;
+}
+.dsh-tw-note-hl .md-code-block,
+.dsh-tw-note-hl .md-fence {
+  display: block; background: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 8%, transparent);
+}
+.dsh-tw-note-hl .md-bold { font-weight: 700; }
+.dsh-tw-note-hl .md-italic { font-style: italic; }
+.dsh-tw-note-hl .md-strike { text-decoration: line-through; opacity: .75; }
+.dsh-tw-note-hl .md-link { color: var(--dsw-alias-brand-primary, #3e63dd); text-decoration: underline; }
+.dsh-tw-note-hl .md-url { color: color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 70%, #999); text-decoration: underline dotted; }
+.dsh-tw-note-hl .md-image { color: var(--dsw-alias-state-success-primary, #3eaa5f); font-weight: 600; }
+.dsh-tw-note-hl .md-bullet { font-weight: 700; color: var(--dsw-alias-brand-primary, #3e63dd); }
+.dsh-tw-note-hl .md-number { font-weight: 700; color: var(--dsw-alias-state-warning-primary, #d9822b); }
+.dsh-tw-note-hl .md-quote { font-style: italic; color: var(--dsw-alias-label-secondary, #888); }
+.dsh-tw-note-hl .md-hr { color: var(--dsw-alias-label-dimmed, #999); text-decoration: line-through; }
+.dsh-tw-note-hl .md-task { color: var(--dsw-alias-label-secondary, #888); }
+.dsh-tw-note-hl .md-task-checked { color: var(--dsw-alias-state-success-primary, #3eaa5f); font-weight: 600; }
 .dsh-tw-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.dsh-tw-note-foot-left, .dsh-tw-note-foot-right { display: flex; align-items: center; gap: 8px; }
 .dsh-tw-note-hint { font-size: 11px; color: var(--dsw-alias-label-dimmed, #999); }
+.dsh-tw-note-upload {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
+  background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
+  font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
+  transition: filter 120ms ease, transform 80ms ease;
+}
+.dsh-tw-note-upload:hover { filter: brightness(.96); }
+.dsh-tw-note-upload:active { transform: scale(.96); }
 .dsh-tw-note-save {
   border: 1px solid transparent; background: var(--dsw-alias-brand-primary, #3e63dd); color: #fff;
   font: inherit; font-size: 12px; padding: 6px 16px; border-radius: 8px; cursor: pointer;
-  transition: filter 120ms ease;
+  transition: filter 120ms ease, transform 80ms ease;
 }
 .dsh-tw-note-save:hover:not(:disabled) { filter: brightness(1.08); }
+.dsh-tw-note-save:active:not(:disabled) { transform: scale(.96); }
 .dsh-tw-note-save:disabled { opacity: .55; cursor: default; }
 .dsh-tw-note-edit {
   border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
   background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
   font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
-  transition: filter 120ms ease;
+  transition: filter 120ms ease, transform 80ms ease;
 }
 .dsh-tw-note-edit:hover:not(:disabled) { filter: brightness(.96); }
+.dsh-tw-note-edit:active:not(:disabled) { transform: scale(.96); }
 .dsh-tw-note-edit:disabled { opacity: .55; cursor: default; }
 /* ── Multi-tag chip editor (quick-note tags) ─────────────────────────────── */
 .dsh-tw-note-tags { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
@@ -220,7 +293,7 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
   background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
   border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.2));
   border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.3);
-  z-index: 980; font-family: inherit; font-size: 13px;
+  z-index: 990; font-family: inherit; font-size: 13px;
 }
 .dsh-tw-editor-bar {
   display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
@@ -246,6 +319,29 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
 }
 .dsh-tw-note-toggle:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.1)); }
 
+/* ── floating sync button (bottom-right) ───────────────────────
+   Pill FAB between the quick-note toggle (bottom:88) and the TW panel
+   status/reload floaters (bottom:192); dot reflects git state. */
+.dsh-tw-sync {
+  position: fixed; right: 24px; bottom: 140px; z-index: 950;
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 9px 14px; border-radius: 999px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
+  background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
+  font: inherit; font-size: 13px; box-shadow: var(--dsw-shadow-lv3, 0 4px 16px rgba(0,0,0,.16));
+  cursor: pointer; transition: background-color 120ms ease;
+}
+.dsh-tw-sync:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.1)); }
+.dsh-tw-sync:disabled { opacity: .65; cursor: default; }
+.dsh-tw-sync-icon { display: inline-flex; flex: none; }
+.dsh-tw-sync-spin .dsh-tw-sync-icon svg { animation: dsh-tw-spin 1s linear infinite; transform-origin: center; }
+@keyframes dsh-tw-spin { to { transform: rotate(360deg); } }
+.dsh-tw-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #999; flex: none; }
+.dsh-tw-sync-dot[data-state="clean"] { background: var(--dsw-alias-state-success-primary, #3eaa5f); }
+.dsh-tw-sync-dot[data-state="dirty"] { background: var(--dsw-alias-state-warning-primary, #d9822b); }
+.dsh-tw-sync-dot[data-state="behind"] { background: var(--dsw-alias-state-error-primary, #d13b3b); }
+.dsh-tw-sync-dot[data-state="syncing"] { background: var(--dsw-alias-brand-primary, #3e63dd); }
+
 /* ── toast ──────────────────────────────────────────────────── */
 .dsh-tw-toast {
   position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
@@ -497,7 +593,7 @@ const PANEL_HOST_SELECTOR = "[data-dsh-panel-host]";
 const APP_OVERLAY_Z_INDEX = 20;
 /** Safety re-measure cadence for shell layout changes CSS can't see. */
 const SYNC_INTERVAL_MS = 2e3;
-const STATUS_ENDPOINT$1 = "/dsh-tiddlywiki/status";
+const STATUS_ENDPOINT$2 = "/dsh-tiddlywiki/status";
 const RESTART_ENDPOINT$1 = "/dsh-tiddlywiki/restart";
 /**
 * The panel's z-index: below any dsh-better-sidebar host layer so its
@@ -520,9 +616,9 @@ function conversationColumn() {
 		if (el !== null) return el;
 	}
 }
-async function fetchStatus() {
+async function fetchStatus$1() {
 	try {
-		const res = await fetch(STATUS_ENDPOINT$1, { signal: AbortSignal.timeout(8e3) });
+		const res = await fetch(STATUS_ENDPOINT$2, { signal: AbortSignal.timeout(8e3) });
 		if (!res.ok) return null;
 		return await res.json();
 	} catch {
@@ -687,7 +783,7 @@ function mountPanel(state) {
 			window.clearTimeout(refreshTimer);
 			refreshTimer = void 0;
 		}
-		const payload = await fetchStatus();
+		const payload = await fetchStatus$1();
 		if (payload === null) {
 			setChip("failed", "状态不可达");
 			showError("无法访问 /dsh-tiddlywiki/status");
@@ -760,7 +856,7 @@ function mountPanel(state) {
 	ensure();
 	applyActive();
 	(async () => {
-		if ((await fetchStatus())?.ui?.showPanelStatus === false) return;
+		if ((await fetchStatus$1())?.ui?.showPanelStatus === false) return;
 		statusFloater = buildStatusFloater();
 	})();
 	return () => {
@@ -909,6 +1005,106 @@ function ensurePopup() {
 	});
 }
 //#endregion
+//#region src/client/markdown.ts
+/**
+* Lightweight Markdown syntax highlighter for the quick-note editor.
+*
+* The editor is the classic "highlighted textarea": a `<pre>` rendered BEHIND
+* a transparent-text `<textarea>` with identical metrics. To keep the two
+* layers perfectly aligned we NEVER change the user's text — every token is
+* only wrapped in a colored `<span class="md-*">`, so each line keeps its
+* exact characters and column widths. Leading whitespace (indentation) is
+* preserved as-is so list/heading/quote alignment survives.
+*
+* Coverage is deliberately pragmatic (a scratch-note editor, not CommonMark):
+* ATX headings, fenced code blocks, blockquotes, bullet + ordered + task
+* lists, horizontal rules, inline code, bold, italic, strikethrough, links
+* and images. HTML is escaped first, so the output is always safe to set as
+* `innerHTML` (no raw HTML from the user is ever executed).
+*
+* @module dsh-tiddlywiki/client/markdown
+*/
+/** Escape a raw source fragment for safe insertion into the overlay HTML. */
+function escapeHtml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+/**
+* Inline token highlighting on ALREADY-ESCAPED text. Inline code spans are
+* first pulled out into placeholders so later passes (links/bold/italic) can
+* never reach inside them, then restored.
+*/
+function highlightInline(escaped) {
+	const codeTokens = [];
+	let s = escaped.replace(/(`+)([^`]+?)\1/g, (_all, t, code) => {
+		codeTokens.push(`<span class="md-code">${t}${code}${t}</span>`);
+		return `\u0000${codeTokens.length - 1}\u0000`;
+	});
+	s = s.replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (_a, alt, url) => `<span class="md-image">![${alt}](</span><span class="md-url">${url}</span><span class="md-image">)</span>`);
+	s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_a, text, url) => `<span class="md-link">[${text}](</span><span class="md-url">${url}</span><span class="md-link">)</span>`);
+	const boldTokens = [];
+	s = s.replace(/(\*\*|__)([^*_]+?)\1/g, (_a, d, text) => {
+		boldTokens.push(`<span class="md-bold">${d}${text}${d}</span>`);
+		return `\u0001${boldTokens.length - 1}\u0001`;
+	});
+	s = s.replace(/(\*|_)([^*_]+?)\1/g, "<span class=\"md-italic\">$1$2$1</span>");
+	s = s.replace(/~~([^~]+?)~~/g, "<span class=\"md-strike\">~~$1~~</span>");
+	return s.replace(/\u0001(\d+)\u0001/g, (_a, i) => boldTokens[Number(i)] ?? "").replace(/\u0000(\d+)\u0000/g, (_a, i) => codeTokens[Number(i)] ?? "");
+}
+/**
+* Match and return groups as a plain string array ('' for absent groups), or
+* null when the pattern does not match. Avoids noUncheckedIndexedAccess
+* friction on RegExpMatchArray indexing.
+*/
+function groups(re, value) {
+	const m = value.match(re);
+	if (m === null) return null;
+	return Array.from(m, (g) => g ?? "");
+}
+/** Highlight one non-fence line (leading whitespace preserved verbatim). */
+function highlightLine(raw) {
+	const leadMatch = groups(/^(\s*)(.*)$/, raw);
+	const lead = leadMatch === null ? "" : leadMatch[1];
+	const body = leadMatch === null ? raw : leadMatch[2];
+	if (body.length === 0) return raw;
+	const heading = groups(/^(#{1,6})(\s+)(.*)$/, body);
+	if (heading !== null) return `${lead}<span class="md-heading">${escapeHtml(heading[1])}${escapeHtml(heading[2])}</span>${highlightInline(escapeHtml(heading[3]))}`;
+	if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(body)) return `${lead}<span class="md-hr">${escapeHtml(body)}</span>`;
+	const quote = groups(/^(>)( ?)(.*)$/, body);
+	if (quote !== null) return `${lead}<span class="md-quote">${escapeHtml(quote[1])}</span>${escapeHtml(quote[2])}${highlightInline(escapeHtml(quote[3]))}`;
+	const task = groups(/^([-*+])(\s+)(\[[ xX]\])(\s+)(.*)$/, body);
+	if (task !== null) {
+		const checked = /\[[xX]\]/.test(task[3]);
+		return `${lead}<span class="md-bullet">${escapeHtml(task[1])}</span>${escapeHtml(task[2])}<span class="md-task${checked ? " md-task-checked" : ""}">${escapeHtml(task[3])}</span>${escapeHtml(task[4])}${highlightInline(escapeHtml(task[5]))}`;
+	}
+	const bullet = groups(/^([-*+])(\s+)(.*)$/, body);
+	if (bullet !== null) return `${lead}<span class="md-bullet">${escapeHtml(bullet[1])}</span>${escapeHtml(bullet[2])}${highlightInline(escapeHtml(bullet[3]))}`;
+	const ordered = groups(/^(\d+)([.)])(\s+)(.*)$/, body);
+	if (ordered !== null) return `${lead}<span class="md-number">${escapeHtml(ordered[1])}${escapeHtml(ordered[2])}</span>${escapeHtml(ordered[3])}${highlightInline(escapeHtml(ordered[4]))}`;
+	return `${lead}${highlightInline(escapeHtml(body))}`;
+}
+/**
+* Highlight full Markdown source into safe `<span>`-wrapped HTML. Line count
+* and per-line text (including whitespace) are preserved exactly.
+*/
+function highlightMarkdown(src) {
+	const lines = src.split("\n");
+	const out = [];
+	let inFence = false;
+	for (const rawLine of lines) {
+		if (rawLine.match(/^\s*(```|~~~)\s*([\w-]*)\s*$/) !== null) {
+			inFence = !inFence;
+			out.push(`<span class="md-fence">${escapeHtml(rawLine)}</span>`);
+			continue;
+		}
+		if (inFence) {
+			out.push(`<span class="md-code-block">${escapeHtml(rawLine)}</span>`);
+			continue;
+		}
+		out.push(highlightLine(rawLine));
+	}
+	return out.join("\n");
+}
+//#endregion
 //#region src/client/note-widget.ts
 /**
 * Floating quick-note widget (design doc §12, D6/D7) — bottom-right, fixed,
@@ -926,18 +1122,29 @@ function ensurePopup() {
 * (GET /dsh-tiddlywiki/tags). Enter/`,` commits the typed value; Backspace on
 * an empty field removes the last chip; the dropdown filters on typing.
 *
+* Markdown editing: a "highlighted textarea" overlay (a `<pre>` rendered
+* behind a transparent-text `<textarea>`, see markdown.ts) so Markdown is
+* syntax-highlighted as you type — no dependencies, perfect alignment.
+*
+* File upload: the body accepts files via the 📎 button or drag-and-drop;
+* each file is POSTed raw to /dsh-tiddlywiki/upload (saved under the wiki's
+* `files/` folder, git-tracked and served at `/files/<name>`) and a Markdown
+* image/link line is inserted at the caret.
+*
 * @module dsh-tiddlywiki/client/note-widget
 */
 const NOTE_ENDPOINT = "/dsh-tiddlywiki/note";
 const EDIT_ENDPOINT = "/dsh-tiddlywiki/edit";
-const STATUS_ENDPOINT = "/dsh-tiddlywiki/status";
+const STATUS_ENDPOINT$1 = "/dsh-tiddlywiki/status";
 const TAGS_ENDPOINT = "/dsh-tiddlywiki/tags";
-function pad(n) {
+const UPLOAD_ENDPOINT = "/dsh-tiddlywiki/upload";
+const MAX_UPLOAD_BYTES = 64 * 1024 * 1024;
+function pad$1(n) {
 	return n < 10 ? `0${n}` : String(n);
 }
 /** Default note title: `YYYY-MM-DD HH:mm`. */
 function timestampTitle(date = /* @__PURE__ */ new Date()) {
-	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+	return `${date.getFullYear()}-${pad$1(date.getMonth() + 1)}-${pad$1(date.getDate())} ${pad$1(date.getHours())}:${pad$1(date.getMinutes())}`;
 }
 async function fetchUiOptions() {
 	const fallback = {
@@ -945,7 +1152,7 @@ async function fetchUiOptions() {
 		defaultTag: "inbox"
 	};
 	try {
-		const res = await fetch(STATUS_ENDPOINT, { signal: AbortSignal.timeout(5e3) });
+		const res = await fetch(STATUS_ENDPOINT$1, { signal: AbortSignal.timeout(5e3) });
 		if (!res.ok) return fallback;
 		const payload = await res.json();
 		return {
@@ -1068,6 +1275,81 @@ function buildTagEditor() {
 		}
 	};
 }
+/**
+* Markdown editor: a `<pre>` overlay (highlighted by markdown.ts) rendered
+* behind a transparent-text `<textarea>` with identical metrics. Scroll is
+* mirrored; on every input the overlay is re-rendered. The text layer stays
+* exactly aligned with the highlight layer because the highlighter never
+* changes the user's characters.
+*/
+function buildEditor() {
+	const wrap = document.createElement("div");
+	wrap.className = "dsh-tw-note-editor";
+	const hl = document.createElement("pre");
+	hl.className = "dsh-tw-note-hl";
+	hl.setAttribute("aria-hidden", "true");
+	const textarea = document.createElement("textarea");
+	textarea.className = "dsh-tw-note-text";
+	textarea.placeholder = "写点东西… Markdown 高亮，可 📎/拖入文件\nCtrl+Enter 保存";
+	wrap.append(hl, textarea);
+	const render = () => {
+		hl.innerHTML = `${highlightMarkdown(textarea.value)}\n`;
+		hl.scrollTop = textarea.scrollTop;
+		hl.scrollLeft = textarea.scrollLeft;
+	};
+	const syncScroll = () => {
+		hl.scrollTop = textarea.scrollTop;
+		hl.scrollLeft = textarea.scrollLeft;
+	};
+	textarea.addEventListener("input", render);
+	textarea.addEventListener("scroll", syncScroll);
+	render();
+	return {
+		el: wrap,
+		textarea,
+		render,
+		focus: () => textarea.focus()
+	};
+}
+/**
+* Upload one file to the wiki (raw body, name in ?name=), then insert a
+* Markdown image/link line at the caret of the given editor.
+*/
+async function uploadInto(file, editor) {
+	if (file.size > MAX_UPLOAD_BYTES) {
+		toast(`文件过大（≤ ${Math.round(MAX_UPLOAD_BYTES / 1024 / 1024)}MB）`);
+		return;
+	}
+	try {
+		const res = await fetch(`${UPLOAD_ENDPOINT}?name=${encodeURIComponent(file.name)}`, {
+			method: "POST",
+			headers: { "content-type": file.type || "application/octet-stream" },
+			body: file,
+			signal: AbortSignal.timeout(12e4)
+		});
+		const payload = await res.json().catch(() => null);
+		if (!res.ok || payload?.ok !== true) {
+			toast(`上传失败：${payload?.error ?? `HTTP ${res.status}`}`);
+			return;
+		}
+		const name = payload.name ?? file.name;
+		const markdown = file.type.startsWith("image/") ? `![${name}](${payload.url})` : `[${name}](${payload.url})`;
+		const ta = editor.textarea;
+		const start = ta.selectionStart ?? ta.value.length;
+		const end = ta.selectionEnd ?? start;
+		const before = ta.value.slice(0, start);
+		const after = ta.value.slice(end);
+		const insert = `${start > 0 && !before.endsWith("\n") ? "\n" : ""}${markdown}\n`;
+		ta.value = `${before}${insert}${after}`;
+		const caret = (before + insert).length;
+		ta.setSelectionRange(caret, caret);
+		ta.focus();
+		editor.render();
+		toast(`已上传「${name}」并插入链接`);
+	} catch (err) {
+		toast(`上传失败：${err instanceof Error ? err.message : String(err)}`);
+	}
+}
 /** Build the whole widget DOM and wire it up (returns the appended root). */
 function buildWidget() {
 	const root = document.createElement("div");
@@ -1093,14 +1375,56 @@ function buildWidget() {
 	titleInput.placeholder = "标题（默认时间戳）";
 	const tagEditor = buildTagEditor();
 	fields.append(titleInput, tagEditor.el);
-	const textarea = document.createElement("textarea");
-	textarea.className = "dsh-tw-note-text";
-	textarea.placeholder = "写点东西…（Ctrl+Enter 保存）";
+	const editor = buildEditor();
+	const textarea = editor.textarea;
+	const uploadBtn = document.createElement("button");
+	uploadBtn.type = "button";
+	uploadBtn.className = "dsh-tw-note-upload";
+	uploadBtn.title = "上传文件到 wiki 并插入 Markdown 链接（也可直接拖入编辑器）";
+	uploadBtn.textContent = "📎 上传";
+	const fileInput = document.createElement("input");
+	fileInput.type = "file";
+	fileInput.multiple = true;
+	fileInput.hidden = true;
+	uploadBtn.addEventListener("click", () => {
+		fileInput.click();
+	});
+	fileInput.addEventListener("change", () => {
+		for (const file of Array.from(fileInput.files ?? [])) uploadInto(file, editor);
+		fileInput.value = "";
+	});
+	let dragDepth = 0;
+	editor.el.addEventListener("dragenter", (event) => {
+		event.preventDefault();
+		dragDepth++;
+		editor.el.classList.add("dsh-tw-note-drop");
+	});
+	editor.el.addEventListener("dragover", (event) => {
+		event.preventDefault();
+	});
+	editor.el.addEventListener("dragleave", (event) => {
+		event.preventDefault();
+		dragDepth = Math.max(0, dragDepth - 1);
+		if (dragDepth === 0) editor.el.classList.remove("dsh-tw-note-drop");
+	});
+	editor.el.addEventListener("drop", (event) => {
+		event.preventDefault();
+		dragDepth = 0;
+		editor.el.classList.remove("dsh-tw-note-drop");
+		const files = event.dataTransfer?.files;
+		if (files === void 0 || files.length === 0) return;
+		for (const file of Array.from(files)) uploadInto(file, editor);
+	});
 	const foot = document.createElement("div");
 	foot.className = "dsh-tw-note-foot";
+	const footLeft = document.createElement("div");
+	footLeft.className = "dsh-tw-note-foot-left";
 	const hint = document.createElement("span");
 	hint.className = "dsh-tw-note-hint";
 	hint.textContent = "Ctrl+Enter";
+	footLeft.append(uploadBtn, hint);
+	const footRight = document.createElement("div");
+	footRight.className = "dsh-tw-note-foot-right";
 	const edit = document.createElement("button");
 	edit.type = "button";
 	edit.className = "dsh-tw-note-edit";
@@ -1110,8 +1434,9 @@ function buildWidget() {
 	save.type = "button";
 	save.className = "dsh-tw-note-save";
 	save.textContent = "保存";
-	foot.append(hint, edit, save);
-	card.append(head, fields, textarea, foot);
+	footRight.append(edit, save);
+	foot.append(footLeft, footRight);
+	card.append(head, fields, editor.el, foot);
 	const toggle = document.createElement("button");
 	toggle.type = "button";
 	toggle.className = "dsh-tw-note-toggle";
@@ -1127,7 +1452,7 @@ function buildWidget() {
 		card.hidden = false;
 		opened = true;
 		resetTitle();
-		textarea.focus();
+		editor.focus();
 		defaultTag = (await fetchUiOptions()).defaultTag;
 		tagEditor.setDefault(defaultTag);
 	};
@@ -1164,6 +1489,7 @@ function buildWidget() {
 				return;
 			}
 			textarea.value = "";
+			editor.render();
 			resetTitle();
 			toast(`已保存「${payload.title ?? titleInput.value}」`);
 			close();
@@ -1245,6 +1571,161 @@ function mountNoteWidget() {
 	return disposer;
 }
 //#endregion
+//#region src/client/sync-button.ts
+/**
+* Floating "sync" button (bottom-right) — one click pulls + commits + pushes
+* the wiki git repository and reports the result, with a live status dot so
+* the human always sees whether the knowledge base is in sync.
+*
+* - honors `ui.showSyncButton`: the button is mounted async and never created
+*   when the option is off (settings page toggle);
+* - polls /dsh-tiddlywiki/status every 30s for the git state;
+* - clicking POSTs /dsh-tiddlywiki/sync (pull → commit → push) and toasts the
+*   outcome, then refreshes the dot immediately.
+*
+* Status dot mapping (git summary from /status):
+*   offline → gray   (no repo / service unreachable)
+*   dirty   → amber  (uncommitted changes)
+*   behind  → red    (remote has commits we don't — pull will rebase)
+*   clean   → green  (worktree clean)
+*
+* @module dsh-tiddlywiki/client/sync-button
+*/
+const STATUS_ENDPOINT = "/dsh-tiddlywiki/status";
+const SYNC_ENDPOINT$1 = "/dsh-tiddlywiki/sync";
+const POLL_MS = 3e4;
+/** Inline sync icon (circular arrows, stroke-based, theme-colored). */
+const SYNC_ICON = "<svg viewBox=\"0 0 16 16\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M13 8a5 5 0 1 1-1.4-3.5\"/><path d=\"M13 2.5v3h-3\"/></svg>";
+function pad(n) {
+	return n < 10 ? `0${n}` : String(n);
+}
+/** Compact local time for the tooltip (e.g. "10:32"). */
+function clock(date) {
+	return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+async function fetchStatus() {
+	try {
+		const res = await fetch(STATUS_ENDPOINT, { signal: AbortSignal.timeout(8e3) });
+		if (!res.ok) return null;
+		return await res.json();
+	} catch {
+		return null;
+	}
+}
+/**
+* Mount the floating sync button. Fetches /status first: when
+* `ui.showSyncButton` is off the button is never created. Returns a disposer.
+*/
+function mountSyncButton() {
+	let disposed = false;
+	let root;
+	let dot;
+	let label;
+	let lastSync;
+	let timer;
+	const build = () => {
+		const btn = document.createElement("button");
+		btn.type = "button";
+		btn.className = "dsh-tw-sync";
+		btn.title = "同步知识库（pull → commit → push）";
+		const icon = document.createElement("span");
+		icon.className = "dsh-tw-sync-icon";
+		icon.innerHTML = SYNC_ICON;
+		dot = document.createElement("span");
+		dot.className = "dsh-tw-sync-dot";
+		dot.dataset.state = "offline";
+		label = document.createElement("span");
+		label.className = "dsh-tw-sync-label";
+		label.textContent = "同步";
+		btn.append(icon, label, dot);
+		btn.addEventListener("click", () => {
+			doSync();
+		});
+		document.body.append(btn);
+		return btn;
+	};
+	/** Map a git summary onto the dot + label + tooltip. */
+	const applyStatus = (payload) => {
+		if (root === void 0 || dot === void 0 || label === void 0) return;
+		const git = payload?.git;
+		const bits = ["同步知识库"];
+		let state = "offline";
+		let word = "离线";
+		if (git === null || git === void 0 || git.exists !== true) bits.push("git 仓库不可用");
+		else {
+			bits.push(`分支 ${git.branch ?? "?"}`);
+			if (typeof git.lastCommit === "string") bits.push(git.lastCommit);
+			const behind = typeof git.behind === "number" ? git.behind : 0;
+			const ahead = typeof git.ahead === "number" ? git.ahead : 0;
+			if (ahead > 0) bits.push(`领先 ${ahead}`);
+			if (behind > 0) bits.push(`落后 ${behind}`);
+			if (git.dirty === true) {
+				state = "dirty";
+				word = "待提交";
+				bits.push(`有 ${git.dirtyFiles?.length ?? 0} 个未提交改动`);
+			} else if (behind > 0) {
+				state = "behind";
+				word = "可更新";
+			} else {
+				state = "clean";
+				word = "已同步";
+			}
+		}
+		if (lastSync !== void 0) bits.push(`上次同步 ${clock(lastSync)}`);
+		root.title = bits.join(" · ");
+		dot.dataset.state = state;
+		label.textContent = word;
+	};
+	const doSync = async () => {
+		if (root === void 0) return;
+		root.disabled = true;
+		root.classList.add("dsh-tw-sync-spin");
+		if (label !== void 0) label.textContent = "同步中…";
+		if (dot !== void 0) dot.dataset.state = "syncing";
+		try {
+			const res = await fetch(SYNC_ENDPOINT$1, {
+				method: "POST",
+				signal: AbortSignal.timeout(12e4)
+			});
+			const payload = await res.json().catch(() => null);
+			lastSync = /* @__PURE__ */ new Date();
+			if (payload === null || payload.ok !== true) toast(`同步失败：${payload?.error ?? payload?.message ?? `HTTP ${res.status}`}`);
+			else {
+				let detail = "";
+				if (payload.push && payload.push !== "nothing to commit") detail = `（${payload.push}）`;
+				if (payload.changed === true) {
+					detail += payload.restarted === true ? "，TW 已重启" : "，TW 未自动重启";
+					if (payload.restartError) detail += `（${payload.restartError}）`;
+				}
+				toast(`同步完成：${payload.message ?? "OK"}${detail}`);
+			}
+			applyStatus(await fetchStatus());
+		} catch (err) {
+			toast(`同步失败：${err instanceof Error ? err.message : String(err)}`);
+		} finally {
+			root.disabled = false;
+			root.classList.remove("dsh-tw-sync-spin");
+		}
+	};
+	const poll = async () => {
+		applyStatus(await fetchStatus());
+	};
+	(async () => {
+		const payload = await fetchStatus();
+		if (disposed || payload?.ui?.showSyncButton === false) return;
+		root = build();
+		applyStatus(payload);
+		timer = window.setInterval(() => {
+			poll();
+		}, POLL_MS);
+	})();
+	return () => {
+		disposed = true;
+		if (timer !== void 0) window.clearInterval(timer);
+		root?.remove();
+	};
+}
+//#endregion
 //#region src/client/settings-page.ts
 /**
 * Settings-page half (design doc §13, config panel): a pure-DOM page mounted
@@ -1268,6 +1749,7 @@ const STATE_ENDPOINT = "/dsh-tiddlywiki/admin/state";
 const INFO_ENDPOINT = "/dsh-tiddlywiki/admin/info";
 const CONFIG_ENDPOINT = "/dsh-tiddlywiki/admin/config";
 const RESTART_ENDPOINT = "/dsh-tiddlywiki/admin/restart";
+const SYNC_ENDPOINT = "/dsh-tiddlywiki/sync";
 function make(tag, className, text) {
 	const node = document.createElement(tag);
 	if (className !== void 0) node.className = className;
@@ -1334,6 +1816,37 @@ function renderStatus(row, state, refresh) {
 		state.git?.lastCommit !== void 0 ? state.git.lastCommit : "",
 		state.git?.dirty === true ? "有未提交改动" : ""
 	].filter(Boolean).join(" · "));
+	const sync = make("button", "dsh-tw-settings-btn", "同步");
+	sync.type = "button";
+	sync.title = "git 同步（pull → commit → push）";
+	sync.addEventListener("click", () => {
+		sync.disabled = true;
+		sync.textContent = "同步中…";
+		(async () => {
+			try {
+				const res = await fetch(SYNC_ENDPOINT, {
+					method: "POST",
+					signal: AbortSignal.timeout(12e4)
+				});
+				const payload = await res.json().catch(() => null);
+				if (!res.ok || payload?.ok !== true) toast(`同步失败：${payload?.error ?? payload?.message ?? `HTTP ${res.status}`}`);
+				else {
+					let detail = "";
+					if (payload.changed === true) {
+						detail += payload.restarted === true ? "，TW 已重启" : "，TW 未自动重启";
+						if (payload.restartError) detail += `（${payload.restartError}）`;
+					}
+					toast(`同步完成：${payload.message ?? "OK"}${detail}`);
+				}
+			} catch (err) {
+				toast(`同步失败：${err instanceof Error ? err.message : String(err)}`);
+			} finally {
+				sync.disabled = false;
+				sync.textContent = "同步";
+				refresh();
+			}
+		})();
+	});
 	const restart = make("button", "dsh-tw-settings-btn", "重启 TW");
 	restart.type = "button";
 	restart.addEventListener("click", () => {
@@ -1352,7 +1865,7 @@ function renderStatus(row, state, refresh) {
 			}
 		})();
 	});
-	row.append(chip, label, restart);
+	row.append(chip, label, sync, restart);
 }
 /** Config section: fields bound to effective config, changed-only save. */
 function renderConfigSection(body, config, refresh) {
@@ -1413,6 +1926,7 @@ function renderConfigSection(body, config, refresh) {
 	textField("git.branch", "git 分支", typeof git.branch === "string" ? git.branch : "main");
 	checkField("ui.showQuickNote", "显示「快速笔记」悬浮按钮", ui.showQuickNote !== false);
 	checkField("ui.showPanelStatus", "显示 TW 面板右下角「状态/重载」悬浮按钮", ui.showPanelStatus !== false);
+	checkField("ui.showSyncButton", "显示右下角「同步」悬浮按钮", ui.showSyncButton !== false);
 	const save = make("button", "dsh-tw-settings-btn dsh-tw-settings-primary", "保存配置");
 	save.type = "button";
 	save.addEventListener("click", () => {
@@ -1649,6 +2163,7 @@ function apply(ctx) {
 			disposers.push(mountSidebarEntry(state));
 			disposers.push(mountPanel(state));
 			disposers.push(mountNoteWidget());
+			disposers.push(mountSyncButton());
 			disposers.push(disposeEditorPopup);
 		} catch (error) {
 			console.error("[dsh-tiddlywiki] mount failed:", error);