dsh-tiddlywiki 0.7.4 → 0.8.0

package/lib/client.js

@@ -107,7 +107,9 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
 .dsh-tw-status-dot[data-state="starting"] { background: var(--dsw-alias-state-warning-primary, #d9822b); }
 .dsh-tw-status-dot[data-state="failed"], .dsh-tw-status-dot[data-state="stopped"] { background: var(--dsw-alias-state-error-primary, #d13b3b); }
 
-.dsh-tw-panel-frame { flex: 1; min-height: 0; border: 0; width: 100%; display: block; background: #fff; }
+/* The iframe background follows the DSH theme so a blank/preload frame never
+   flashes pure white in dark mode (TW paints its own palette once loaded). */
+.dsh-tw-panel-frame { flex: 1; min-height: 0; border: 0; width: 100%; display: block; background: var(--dsw-alias-bg-layer-1, #fff); }
 /* [hidden] must beat the author display rules above (UA hidden is overridden). */
 .dsh-tw-panel-frame[hidden],
 .dsh-tw-panel-error[hidden] { display: none !important; }
@@ -287,7 +289,7 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
   color: var(--dsw-alias-label-dimmed, #888); padding: 5px 8px; border-radius: 6px;
 }
 .dsh-tw-editor-close:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, #222); }
-.dsh-tw-editor-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
+.dsh-tw-editor-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--dsw-alias-bg-layer-1, #fff); }
 .dsh-tw-editor-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; }
 .dsh-tw-note-toggle {
   border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
@@ -643,6 +645,253 @@ function mountSidebarEntry(state) {
 	};
 }
 //#endregion
+//#region src/client/theme-sync.ts
+/**
+* Adaptive DSH theme for the embedded TiddlyWiki iframes (design doc §12).
+*
+* Both the center-column panel and the quick-note editor popup embed the
+* SAME-ORIGIN TW proxy, so this module can reach the TW runtime directly
+* (`iframe.contentWindow.$tw`) and drive its native theming.
+*
+* How TW theming works
+* --------------------
+* TW 5 renders its colours through the ACTIVE palette: `$:/palette` holds the
+* title of a palette tiddler (`$:/palettes/…`), and every `<<colour x>>` in
+* the theme stylesheet resolves against that tiddler at render time. TW
+* re-renders all stylesheets live on any tiddler change, so flipping
+* `$:/palette` re-themes the whole embedded UI instantly — the exact mechanism
+* TW's own palette switcher uses. Overriding the rendered CSS variables is a
+* dead end for the default Vanilla theme because its base stylesheet bakes the
+* palette values in as literals; switching the palette is the supported path.
+*
+* DSH theme detection
+* -------------------
+* The DSH shell's ThemePresenter projects the resolved theme onto the page:
+* `data-ds-dark-theme` on <body> (dark) plus an inline `color-scheme` on
+* <html> that is always "light"|"dark" (the "system" preference is resolved
+* upstream). Those two signals are authoritative; `prefers-color-scheme` is
+* only a fallback when neither is present (no DSH theming projected).
+*
+* Non-persistence
+* ---------------
+* `$:/palette` IS included in TW's default sync filter, so a naive write would
+* be PUT back to the TiddlyWeb server and land in the wiki's git history on
+* every theme toggle. We suppress that: the syncer's dirty check is
+* `getChangeCount(title) > tiddlerInfo[title].changeCount`, and the change
+* event that would drive the save is dispatched on a microtask — so after
+* writing we synchronously re-align the recorded changeCount and the syncer
+* sees the tiddler as already clean. The flip stays in-memory only; the wiki's
+* stored palette and the user's choice are never modified.
+*
+* @module dsh-tiddlywiki/client/theme-sync
+*/
+/** Default dark palette used when DSH is dark (overridable in settings). */
+const DARK_PALETTE_DEFAULT = "$:/palettes/CupertinoDark";
+/** Fallback light palette when no user palette was ever captured. */
+const LIGHT_PALETTE_FALLBACK = "$:/palettes/Vanilla";
+/** DSH's dark-mode marker (set/removed on <body> by dsh-client-ui-layout). */
+const DARK_ATTR = "data-ds-dark-theme";
+/** The TW tiddler holding the active palette tiddler title. */
+const PALETTE_TIDDLER = "$:/palette";
+/** Appliers registered for live frames; config changes re-apply to all. */
+const frameAppliers = /* @__PURE__ */ new Set();
+/** Syncers already wrapped with the palette save guard (per iframe window). */
+const guardedSyncers = /* @__PURE__ */ new WeakSet();
+/** Remembered user palette (light) that we restore when leaving dark mode. */
+let userLightPalette = "";
+/** Whether the adaptive feature is on (settings `ui.followDshTheme`). */
+let syncEnabled = true;
+/** Configured dark palette (settings `ui.darkPalette`). */
+let darkPalette = DARK_PALETTE_DEFAULT;
+/**
+* Resolve the DSH shell's current effective dark state. The body attribute
+* and the inline root `color-scheme` projected by the ThemePresenter are
+* authoritative; the OS media query only answers when DSH isn't projecting a
+* theme snapshot (plain embed / non-DSH page).
+*/
+function readDshDark() {
+	try {
+		const root = document.documentElement;
+		const body = document.body;
+		if (body !== null && body.hasAttribute(DARK_ATTR)) return true;
+		if (root !== null) {
+			const scheme = root.style.getPropertyValue("color-scheme").trim().toLowerCase();
+			if (scheme === "dark") return true;
+			if (scheme === "light") return false;
+		}
+	} catch {}
+	try {
+		return window.matchMedia("(prefers-color-scheme: dark)").matches;
+	} catch {
+		return false;
+	}
+}
+/** Active palette tiddler title (falls back to the light default). */
+function activePaletteTitle($tw) {
+	try {
+		const title = $tw.wiki.getTiddlerText(PALETTE_TIDDLER);
+		return typeof title === "string" && title.trim().length > 0 ? title.trim() : LIGHT_PALETTE_FALLBACK;
+	} catch {
+		return LIGHT_PALETTE_FALLBACK;
+	}
+}
+/** True when the active palette tiddler declares `color-scheme: dark`. */
+function activePaletteIsDark($tw) {
+	try {
+		const fields = $tw.wiki.getTiddler(activePaletteTitle($tw))?.fields;
+		return fields !== void 0 && fields["color-scheme"] === "dark";
+	} catch {
+		return false;
+	}
+}
+/**
+* Mark `$:/palette` as clean in the syncer's records so a FORCED flip is never
+* PUT back to the TiddlyWeb server. Runs synchronously right after the write,
+* before the microtask-dispatched change event lets the syncer evaluate
+* dirtiness; user-initiated palette changes (bumped afterwards) still sync.
+*/
+function suppressPaletteSync($tw) {
+	try {
+		const syncer = $tw.syncer;
+		if (syncer?.tiddlerInfo === void 0) return;
+		const changeCount = $tw.wiki.getChangeCount(PALETTE_TIDDLER);
+		const info = syncer.tiddlerInfo[PALETTE_TIDDLER];
+		if (info !== void 0) info.changeCount = changeCount;
+		else syncer.tiddlerInfo[PALETTE_TIDDLER] = { changeCount };
+	} catch {}
+}
+/**
+* Install a one-shot guard on this frame's syncadaptor: while a palette WE
+* forced is active (`userLightPalette` captured), a PUT of `$:/palette` whose
+* text is still our forced dark palette is swallowed instead of reaching the
+* TiddlyWeb server. This makes the non-persistence guarantee deterministic —
+* TW's boot-time sync (which may load `$:/palette` from the server and bump its
+* changeCount AFTER our re-align) can otherwise queue a save of the forced
+* palette during the first ~1s. Idempotent per syncer instance.
+*/
+function installPaletteSaveGuard($tw) {
+	try {
+		const syncer = $tw.syncer;
+		const adaptor = syncer?.syncadaptor;
+		if (syncer === void 0 || adaptor === void 0 || guardedSyncers.has(syncer)) return;
+		const origSave = adaptor.saveTiddler.bind(adaptor);
+		adaptor.saveTiddler = (tiddler, callback) => {
+			if (syncEnabled && userLightPalette.length > 0 && tiddler?.fields?.title === PALETTE_TIDDLER && tiddler?.fields?.text === darkPalette) {
+				callback(null, {}, 0);
+				return;
+			}
+			origSave(tiddler, callback);
+		};
+		guardedSyncers.add(syncer);
+	} catch {}
+}
+/** Write the active palette (no-op when unchanged) without persisting. */
+function setPalette($tw, target) {
+	try {
+		if (activePaletteTitle($tw) === target) return;
+		$tw.wiki.setText(PALETTE_TIDDLER, "text", void 0, target);
+		suppressPaletteSync($tw);
+	} catch {}
+}
+/**
+* Drive `$:/palette` toward the DSH theme. In dark mode a light palette is
+* swapped for `darkPalette` (remembering the user's palette first); in light
+* mode a palette WE forced is restored, while a user-chosen dark palette is
+* left alone.
+*/
+function applyPalette($tw, dark) {
+	const current = activePaletteTitle($tw);
+	if (dark) {
+		if (activePaletteIsDark($tw)) return;
+		if (current !== darkPalette) userLightPalette = current;
+		setPalette($tw, darkPalette);
+	} else if (activePaletteIsDark($tw) && current === darkPalette && userLightPalette.length > 0) setPalette($tw, userLightPalette);
+}
+/** Keep the iframe's native `color-scheme` in step with the ACTIVE palette. */
+function syncColorScheme($tw, frame) {
+	try {
+		const html = frame.contentDocument?.documentElement;
+		if (html === void 0 || html === null) return;
+		const target = activePaletteIsDark($tw) ? "dark" : "light";
+		if (html.style.getPropertyValue("color-scheme") !== target) html.style.setProperty("color-scheme", target);
+	} catch {}
+}
+/** Apply the current DSH theme to one TW iframe (no-op until TW is ready). */
+function applyToFrame(frame) {
+	const $tw = frame.contentWindow?.$tw;
+	if ($tw === void 0 || $tw.wiki === void 0) return;
+	installPaletteSaveGuard($tw);
+	if (syncEnabled) applyPalette($tw, readDshDark());
+	else applyPalette($tw, false);
+	syncColorScheme($tw, frame);
+}
+/**
+* Configure the feature and re-apply to every live frame. `enabled` is the
+* settings `ui.followDshTheme`; `darkPalette` the settings `ui.darkPalette`.
+*/
+function setThemeSyncConfig(opts) {
+	const enabled = opts.enabled !== false;
+	const palette = typeof opts.darkPalette === "string" && opts.darkPalette.trim().length > 0 ? opts.darkPalette.trim() : DARK_PALETTE_DEFAULT;
+	const changed = enabled !== syncEnabled || palette !== darkPalette;
+	syncEnabled = enabled;
+	darkPalette = palette;
+	if (changed) for (const apply of [...frameAppliers]) apply();
+}
+/**
+* Make one TW iframe follow the DSH theme for as long as the returned
+* disposer is not called. Re-applies on the iframe's `load` (covers TW
+* restarts and proxy reloads), on DSH theme changes (body-attribute mutations
+* and `prefers-color-scheme`), and once immediately for already-loaded frames.
+*/
+function attachThemeSync(frame) {
+	if (frame === null) return () => {};
+	const apply = () => applyToFrame(frame);
+	frameAppliers.add(apply);
+	const onLoad = () => apply();
+	frame.addEventListener("load", onLoad);
+	const media = window.matchMedia("(prefers-color-scheme: dark)");
+	const onMedia = () => apply();
+	try {
+		media.addEventListener("change", onMedia);
+	} catch {
+		media.addListener?.(onMedia);
+	}
+	let observer;
+	try {
+		observer = new MutationObserver(() => apply());
+		if (document.body !== null) observer.observe(document.body, {
+			attributes: true,
+			attributeFilter: [DARK_ATTR]
+		});
+		if (document.documentElement !== null) observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["style"]
+		});
+	} catch {
+		observer = void 0;
+	}
+	const timers = [
+		150,
+		600,
+		1500,
+		3e3
+	].map((ms) => window.setTimeout(apply, ms));
+	apply();
+	return () => {
+		frameAppliers.delete(apply);
+		frame.removeEventListener("load", onLoad);
+		for (const id of timers) window.clearTimeout(id);
+		try {
+			media.removeEventListener("change", onMedia);
+		} catch {
+			media.removeListener?.(onMedia);
+		}
+		try {
+			observer?.disconnect();
+		} catch {}
+	};
+}
+//#endregion
 //#region src/client/panel.ts
 /**
 * Center-column targets, most-specific shell generation first. The official
@@ -730,6 +979,7 @@ function mountPanel(state) {
 	let errorArea;
 	let refreshTimer;
 	let refreshAttempts = 0;
+	let themeSyncDispose;
 	const build = () => {
 		const view = document.createElement("div");
 		view.dataset.dshTwView = "";
@@ -742,6 +992,7 @@ function mountPanel(state) {
 		iframe.title = "TiddlyWiki";
 		iframe.hidden = true;
 		frameArea.append(iframe);
+		themeSyncDispose = attachThemeSync(iframe);
 		errorArea = document.createElement("div");
 		errorArea.className = "dsh-tw-panel-error";
 		errorArea.hidden = true;
@@ -835,6 +1086,10 @@ function mountPanel(state) {
 		}
 		if (payload.status === "running") {
 			refreshAttempts = 0;
+			setThemeSyncConfig({
+				enabled: payload.ui?.followDshTheme !== false,
+				darkPalette: payload.ui?.darkPalette
+			});
 			if (typeof payload.twProxy === "string") showFrame(new URL(payload.twProxy, window.location.origin).href);
 			else if (typeof payload.url === "string") showFrame(payload.url);
 			else showError("服务未返回编辑器地址");
@@ -913,6 +1168,7 @@ function mountPanel(state) {
 		document.removeEventListener("dsh-tw-panel-reload", onReloadRequest);
 		waitObserver.disconnect();
 		unsubscribe();
+		themeSyncDispose?.();
 		document.documentElement.removeAttribute(ACTIVE_ATTR);
 		container?.remove();
 	};
@@ -957,6 +1213,7 @@ function toast(message) {
 let root;
 let frame;
 let titleEl;
+let themeSyncDispose;
 /** Open (create on first use) the popup and load `url` (twUrl#draftTitle). */
 function openEditorPopup(url, label) {
 	ensurePopup();
@@ -967,6 +1224,8 @@ function openEditorPopup(url, label) {
 }
 /** Remove the popup DOM entirely (plugin dispose). */
 function disposeEditorPopup() {
+	themeSyncDispose?.();
+	themeSyncDispose = void 0;
 	root?.remove();
 	root = void 0;
 	frame = void 0;
@@ -992,6 +1251,7 @@ function ensurePopup() {
 	frame.className = "dsh-tw-editor-frame";
 	frame.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups");
 	frame.title = "TiddlyWiki 编辑器";
+	themeSyncDispose = attachThemeSync(frame);
 	const resize = document.createElement("div");
 	resize.className = "dsh-tw-editor-resize";
 	resize.title = "拖拽调整大小";
@@ -27745,6 +28005,8 @@ function renderConfigSection(body, config, refresh) {
 	checkField("ui.showQuickNote", "显示「知识库」按钮里的「快速笔记」入口", ui.showQuickNote !== false);
 	checkField("ui.showPanelStatus", "显示「知识库」按钮里的 TW 面板/重载入口与状态行", ui.showPanelStatus !== false);
 	checkField("ui.showSyncButton", "显示「知识库」按钮里的「同步」入口与 git 状态点", ui.showSyncButton !== false);
+	checkField("ui.followDshTheme", "嵌入式 TW 跟随 DSH 深浅主题（暗色时自动切深色 palette，不写回 wiki）", ui.followDshTheme !== false);
+	textField("ui.darkPalette", "暗色时 TW palette（tiddler 标题）", typeof ui.darkPalette === "string" && ui.darkPalette.length > 0 ? ui.darkPalette : "$:/palettes/CupertinoDark");
 	const save = make("button", "dsh-tw-settings-btn dsh-tw-settings-primary", "保存配置");
 	save.type = "button";
 	save.addEventListener("click", () => {

package/lib/index.js

@@ -1518,6 +1518,11 @@ function registerRoutes(ctx, deps) {
 //#region src/host/config.ts
 /** Config tiddler (JSON string) where the settings page stores overrides. */
 const CONFIG_TIDDLER = "$:/plugins/dsh-tiddlywiki/config";
+/**
+* Default dark palette the embedded TW switches to when DSH is dark
+* (mirrored in src/client/theme-sync.ts — the two bundles cannot share code).
+*/
+const DARK_PALETTE_DEFAULT = "$:/palettes/CupertinoDark";
 function isPlainObject(value) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -3134,6 +3139,8 @@ const DEFAULTS = {
 		showQuickNote: true,
 		showPanelStatus: true,
 		showSyncButton: true,
+		followDshTheme: true,
+		darkPalette: DARK_PALETTE_DEFAULT,
 		sendToAgent: { enabled: true }
 	},
 	auth: {
@@ -3264,11 +3271,17 @@ function apply(ctx, rawConfig = {}) {
 		const tag = eff().note?.tag;
 		return typeof tag === "string" && tag.trim().length > 0 ? tag : config.note.tag;
 	};
-	const effectiveUi = () => ({
-		showQuickNote: eff().ui?.showQuickNote !== false,
-		showPanelStatus: eff().ui?.showPanelStatus !== false,
-		showSyncButton: eff().ui?.showSyncButton !== false
-	});
+	const effectiveUi = () => {
+		const ui = eff().ui ?? {};
+		const palette = typeof ui.darkPalette === "string" && ui.darkPalette.trim().length > 0 ? ui.darkPalette.trim() : DARK_PALETTE_DEFAULT;
+		return {
+			showQuickNote: ui.showQuickNote !== false,
+			showPanelStatus: ui.showPanelStatus !== false,
+			showSyncButton: ui.showSyncButton !== false,
+			followDshTheme: ui.followDshTheme !== false,
+			darkPalette: palette
+		};
+	};
 	const disposers = [];
 	const disposeAll = () => {
 		for (const dispose of disposers.splice(0)) dispose();