dsh-mobile 0.8.7 → 0.8.9

package/lib/mobile-layout.js

@@ -24,19 +24,286 @@ window.__ModuleLoader__.load({
 			it: Object.freeze({
 				closePanels: "Chiudi pannelli",
 				workspaceNavigation: "Navigazione area di lavoro e sessioni",
-				backToConversation: "Torna alla conversazione"
+				backToConversation: "Torna alla conversazione",
+				composerRestore: "Mostra il campo di scrittura"
 			}),
 			en: Object.freeze({
 				closePanels: "Close panels",
 				workspaceNavigation: "Workspace and session navigation",
-				backToConversation: "Back to conversation"
+				backToConversation: "Back to conversation",
+				composerRestore: "Show composer"
 			}),
 			zh: Object.freeze({
 				closePanels: "关闭浮层",
 				workspaceNavigation: "工作区与会话导航",
-				backToConversation: "返回会话"
+				backToConversation: "返回会话",
+				composerRestore: "展开输入框"
 			})
 		});
+		// src/composer-collapse.ts
+		const COMPOSER_COLLAPSE_DEFAULTS = {
+			enabled: false,
+			collapseThresholdPx: 480,
+			reverseResetPx: 80
+		};
+		/**
+		* Track cumulative reading progress across scroll events. This is the only
+		* collapse policy: a decision table plus accumulated progress, kept out of the
+		* component so it stays testable without a DOM.
+		*/
+		var ComposerCollapseTracker = class {
+			readingProgress = 0;
+			reverseProgress = 0;
+			state = "expanded";
+			config;
+			constructor(config) {
+				this.config = config;
+			}
+			/** Whether the opt-in switch is currently on. */
+			get enabled() {
+				return this.config.enabled;
+			}
+			/** Update whether collapse is enabled (the user's settings toggle). */
+			setEnabled(enabled) {
+				this.config = {
+					...this.config,
+					enabled
+				};
+				if (!enabled) this.reset();
+			}
+			/**
+			* Feed one scroll sample; returns the resulting presentation state.
+			*
+			* reverseResetPx is a deliberate dead zone: a collapsed composer stays
+			* collapsed until the user scrolls back up at least that far, so a 1px jitter
+			* does not flip the layout on every frame.
+			*/
+			sample(deltaY) {
+				if (!this.config.enabled) {
+					this.reset();
+					return this.state;
+				}
+				if (this.state === "collapsed") {
+					if (deltaY > 0) {
+						this.reverseProgress = 0;
+						return this.state;
+					}
+					this.reverseProgress += -deltaY;
+					if (this.reverseProgress >= Math.max(this.config.reverseResetPx, 1)) this.reset();
+					return this.state;
+				}
+				if (deltaY < 0) {
+					this.readingProgress = Math.max(0, this.readingProgress + deltaY);
+					this.reverseProgress = 0;
+					return this.state;
+				}
+				this.readingProgress += deltaY;
+				this.reverseProgress = 0;
+				if (this.readingProgress >= this.config.collapseThresholdPx) this.state = "collapsed";
+				return this.state;
+			}
+			/** User interacted with the composer (focus, tap, keyboard, draft): expand. */
+			expand() {
+				this.reset();
+			}
+			get stateValue() {
+				return this.state;
+			}
+			/** @internal exposed for tests */
+			progress() {
+				return this.readingProgress;
+			}
+			reset() {
+				this.state = "expanded";
+				this.readingProgress = 0;
+				this.reverseProgress = 0;
+			}
+		};
+		const COMPOSER_COLLAPSE_EVENT = "dsh-mobile:composer-collapse-change";
+		/** Read the persisted opt-in. Defaults to off; unreadable storage keeps it off. */
+		function readComposerCollapseEnabled(storage) {
+			try {
+				const stored = (storage === void 0 ? globalThis.localStorage : storage)?.getItem("dsh-mobile.composer-collapse.enabled") ?? null;
+				if (stored !== null) return stored === "true";
+				return storage === void 0 ? false : false;
+			} catch {
+				return storage === void 0 ? false : false;
+			}
+		}
+		/**
+		* Subscribe to opt-in changes coming from either bundle. The listener is not
+		* called with the initial value; read it once with readComposerCollapseEnabled().
+		*/
+		function subscribeComposerCollapseEnabled(listener) {
+			const onStorage = (event) => {
+				if (event.key !== null && event.key !== "dsh-mobile.composer-collapse.enabled") return;
+				listener(readComposerCollapseEnabled());
+			};
+			const onCustom = (event) => {
+				const detail = event.detail;
+				listener(detail?.enabled ?? readComposerCollapseEnabled());
+			};
+			globalThis.addEventListener?.("storage", onStorage);
+			globalThis.addEventListener?.(COMPOSER_COLLAPSE_EVENT, onCustom);
+			return () => {
+				globalThis.removeEventListener?.("storage", onStorage);
+				globalThis.removeEventListener?.(COMPOSER_COLLAPSE_EVENT, onCustom);
+			};
+		}
+		/** Apply the persisted opt-in onto a base config. */
+		function composerCollapseConfigFrom(enabled, base = COMPOSER_COLLAPSE_DEFAULTS) {
+			return {
+				...base,
+				enabled
+			};
+		}
+		/**
+		* 软键盘开合监听。
+		* 键盘弹起（visualViewport 缩小）意味着用户要输入，应展开收起态。
+		* 封装在这里而不是 layout，是为了让 layout 源码不含 visualViewport——
+		* 那里只用 window.innerWidth 判宽屏，否则软键盘缩小可视视口会把手机误判成宽屏。
+		*/
+		function onViewportResize(handler) {
+			const viewport = globalThis.visualViewport;
+			if (viewport === null || viewport === void 0) return () => {};
+			viewport.addEventListener("resize", handler);
+			return () => {
+				viewport.removeEventListener("resize", handler);
+			};
+		}
+		const COLLAPSED_ATTRIBUTE = "data-dsh-mobile-composer-collapsed";
+		const RESTORE_LABEL_PROPERTY = "--dshm-composer-restore-label";
+		const CONVERSATION_SCROLL_SELECTOR = "[data-conversation-scroll]";
+		const COMPOSER_CARD_SELECTOR$1 = "[data-composer-card]";
+		const COMPOSER_EDITOR_SELECTOR$1 = `${COMPOSER_CARD_SELECTOR$1} :is([contenteditable="true"],[contenteditable="plaintext-only"],[contenteditable=""],textarea)`;
+		/**
+		* Install the reading-mode collapse. Opt-in through the persisted switch, off by
+		* default; the composer and its draft stay owned by DSH, this only toggles a
+		* presentation attribute on the document element.
+		*/
+		function installComposerReadingMode(options) {
+			const doc = options.doc ?? globalThis.document;
+			const root = doc.documentElement;
+			const tracker = new ComposerCollapseTracker(composerCollapseConfigFrom(readComposerCollapseEnabled()));
+			let collapsed = false;
+			const view = doc.defaultView;
+			const apply = (next) => {
+				if (collapsed === next) return;
+				collapsed = next;
+				root.setAttribute(COLLAPSED_ATTRIBUTE, next ? "true" : "false");
+			};
+			const expand = () => {
+				tracker.expand();
+				apply(false);
+			};
+			root.style.setProperty(RESTORE_LABEL_PROPERTY, JSON.stringify(options.restoreLabel));
+			const scroller = () => {
+				const found = doc.querySelector(CONVERSATION_SCROLL_SELECTOR);
+				return found instanceof (view?.HTMLElement ?? Object) ? found : void 0;
+			};
+			let lastTop = scroller()?.scrollTop ?? 0;
+			let rafPending = false;
+			const sample = () => {
+				rafPending = false;
+				const port = scroller();
+				if (port === void 0) return;
+				const top = port.scrollTop;
+				const delta = top - lastTop;
+				lastTop = top;
+				if (busy()) {
+					expand();
+					return;
+				}
+				apply(tracker.sample(delta) === "collapsed");
+			};
+			const onScroll = (event) => {
+				const target = event.target;
+				if (target === null || !target.hasAttribute?.(CONVERSATION_SCROLL_SELECTOR.slice(1, -1))) return;
+				if (rafPending) return;
+				rafPending = true;
+				if (view === null) {
+					sample();
+					return;
+				}
+				view.requestAnimationFrame(sample);
+			};
+			const busy = () => {
+				if (options.isRunning()) return true;
+				const card = doc.querySelector(COMPOSER_CARD_SELECTOR$1);
+				const editor = card?.querySelector(COMPOSER_EDITOR_SELECTOR$1) ?? null;
+				if (editor === null) return false;
+				const phase = editor.dataset.phase ?? "";
+				if (phase !== "" && phase !== "plain") return true;
+				const focused = doc.activeElement;
+				if (focused !== null && card !== null && card.contains(focused)) return true;
+				return (editor.value ?? editor.textContent ?? "").trim() !== "";
+			};
+			const guard = () => {
+				if (busy()) expand();
+			};
+			const onPointerDown = (event) => {
+				if (!collapsed) return;
+				const target = event.target;
+				if (target === null || !(target instanceof (view?.Element ?? Object))) return;
+				if (target.closest(COMPOSER_CARD_SELECTOR$1) === null) return;
+				expand();
+			};
+			const onFocusIn = () => {
+				expand();
+			};
+			let observed = [];
+			const observeCards = () => {
+				const cards = [...doc.querySelectorAll(COMPOSER_CARD_SELECTOR$1)];
+				if (cards.length === observed.length && cards.every((card, index) => card === observed[index])) return;
+				observer.disconnect();
+				for (const card of cards) observer.observe(card, {
+					childList: true,
+					subtree: true,
+					characterData: true,
+					attributes: true,
+					attributeFilter: ["data-phase"]
+				});
+				observed = cards;
+			};
+			const observer = new ((view?.MutationObserver) ?? MutationObserver)(() => {
+				observeCards();
+				guard();
+			});
+			observeCards();
+			doc.addEventListener("scroll", onScroll, {
+				passive: true,
+				capture: true
+			});
+			doc.addEventListener("pointerdown", onPointerDown, true);
+			doc.addEventListener("focusin", onFocusIn, true);
+			const stopPreference = subscribeComposerCollapseEnabled((enabled) => {
+				tracker.setEnabled(enabled);
+				if (!enabled) expand();
+			});
+			const stopViewport = onViewportResize(onFocusIn);
+			return {
+				expand,
+				dispose() {
+					doc.removeEventListener("scroll", onScroll, { capture: true });
+					doc.removeEventListener("pointerdown", onPointerDown, true);
+					doc.removeEventListener("focusin", onFocusIn, true);
+					stopViewport();
+					stopPreference();
+					observer.disconnect();
+					root.style.removeProperty(RESTORE_LABEL_PROPERTY);
+					apply(false);
+				}
+			};
+		}
+		/**
+		* Whether the active session is streaming a reply. A running reply is not a
+		* composer phase: `data-phase` returns to `plain` as soon as the submission is
+		* accepted, so this flag is the only truthful signal for the streaming window.
+		*/
+		function selectActiveSessionRunning(state) {
+			const current = state.current;
+			return current !== void 0 && state.byId[current]?.running === true;
+		}
 		// src/session-prefetch.ts
 		const SESSION_PREFETCH_DEFAULTS = {
 			enabled: false,
@@ -650,9 +917,22 @@ html,body,#root{width:100%;height:100%;overflow:hidden}
 .dshm-drawer{position:fixed;z-index:70;inset:0 auto 0 0;box-sizing:border-box;width:56px;max-width:100%;padding-top:env(safe-area-inset-top);overflow:hidden;background-color:Canvas;background-image:linear-gradient(var(--dsw-alias-bg-layer-1,#f8fafc),var(--dsw-alias-bg-layer-1,#f8fafc));box-shadow:none;will-change:width;transition:width 240ms cubic-bezier(.22,1,.36,1),box-shadow 240ms ease}
 .dshm-drawer[data-open=true]{width:min(88vw,340px);box-shadow:18px 0 46px rgb(15 23 42 / 18%)}
 .dshm-drawer[data-open=false]{pointer-events:auto;visibility:visible}
-.dshm-drawer>*{width:100%!important;height:100%!important;transform:translateX(-6px);opacity:.94;transition:transform 220ms cubic-bezier(.22,1,.36,1),opacity 160ms ease-out}
-.dshm-drawer[data-open=true]>*{transform:translateX(0);opacity:1}
-.dshm-drawer[data-open=false]>*{width:56px!important}
+/* Slide the sidebar content only while opening or closing. A resting transform
+   would make this child the containing block for stock fixed-position surfaces
+   inside the sidebar and let the drawer's overflow clip them (issue #413: the
+   Cordis plugin panel anchors itself to the viewport to escape that clip). */
+.dshm-drawer>*{width:100%!important;height:100%!important;opacity:.94;transition:opacity 160ms ease-out}
+.dshm-drawer[data-open=true]>*{opacity:1;animation:dshm-drawer-slide-open 220ms cubic-bezier(.22,1,.36,1)}
+.dshm-drawer[data-open=false]>*{width:56px!important;animation:dshm-drawer-slide-closed 220ms cubic-bezier(.22,1,.36,1)}
+@keyframes dshm-drawer-slide-open{from{transform:translateX(-6px)}to{transform:translateX(0)}}
+@keyframes dshm-drawer-slide-closed{from{transform:translateX(0)}to{transform:translateX(-6px)}}
+/* The Cordis plugin panel opens from the sidebar footer as a stock fixed surface
+   (position:fixed, width:420px, anchored from its trigger) so the sidebar's
+   overflow cannot clip it. On phones the drawer must give it real containment:
+   span the viewport instead of the desktop width, sit above our drawer but below
+   the stock floating slot layer (300), and cap the height so its body scrolls
+   (issue #413). */
+.dshm-shell:not([${WIDE_LAYOUT_ATTRIBUTE}="1"]) [data-cordis-panel]{position:fixed!important;inset:auto 8px max(8px,env(safe-area-inset-bottom)) 8px!important;width:auto!important;max-width:min(420px,calc(100vw - 16px))!important;max-height:min(60vh,calc(100dvh - 96px))!important;overflow-y:auto!important;z-index:210!important}
 /* Folded icon rail: on narrow viewports the drawer is fixed, so give the main
    content the same 56px offset the wide grid already provides. The width floor
    keeps phone-width headers on their own inset; the band itself is the root
@@ -727,7 +1007,7 @@ body:has(.dshm-shell) :is(input,textarea,[contenteditable=true],[contenteditable
    dims and covers it. Only the wide grid needs this: on a phone the drawer is a
    floating overlay and must keep covering the conversation. */
 .dshm-shell[${WIDE_LAYOUT_ATTRIBUTE}="1"] .dshm-main{grid-area:1/2;z-index:1}
-@media(prefers-reduced-motion:reduce){.dshm-drawer,.dshm-details,.dshm-scrim,.dshm-drawer>*,.dshm-main{transition:none!important}}
+@media(prefers-reduced-motion:reduce){.dshm-drawer,.dshm-details,.dshm-scrim,.dshm-drawer>*,.dshm-main{transition:none!important}.dshm-drawer>*{animation:none!important}}
 /* Touch adaptation changes control boxes, not invisible hit regions. Root opt-out
    retains pane geometry too; nested opt-out preserves a widget's own controls.
    DSH's plugin cards open through a cardTitle/cardOpen button whose ::after
@@ -739,6 +1019,17 @@ body:has(.dshm-shell) :is(input,textarea,[contenteditable=true],[contenteditable
 .dshm-main[data-dsh-panel="1"] [data-slot="main"]>:not([data-dsh-adapt="off"]) :is(button,[role="button"],select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]):not([type=file]):not([type=image])):not([role="switch"],[role="checkbox"],[role="radio"],[role="slider"],button[class*="_cardTitle"][class*="_cardOpen"],[data-dsh-adapt="off"],[data-dsh-adapt="off"] *){min-width:44px!important;min-height:44px!important}
 .dshm-main[data-dsh-panel="1"] [data-slot="main"]>:not([data-dsh-adapt="off"]) :is(button,[role="button"],a):not([data-dsh-adapt="off"],[data-dsh-adapt="off"] *){touch-action:manipulation}
 }
+/* Reading mode (issue #194): after scrolling down a long conversation the
+   composer editor collapses so the reading area is unobstructed. The card stays
+   and keeps the upstream Send/Stop row; its generated label is the way back, and
+   the text comes from --dshm-composer-restore-label so nothing is injected into
+   the React-managed card. Opt-in, off by default. */
+[data-dsh-mobile-composer-collapsed="true"] [data-composer-card] :is([contenteditable="true"],[contenteditable="plaintext-only"],[contenteditable=""],textarea){display:none!important}
+[data-dsh-mobile-composer-collapsed="true"] [data-composer-card]{
+  padding-top:6px!important;padding-bottom:6px!important;min-height:0!important;cursor:pointer}
+[data-dsh-mobile-composer-collapsed="true"] [data-composer-card]::before{
+  content:var(--dshm-composer-restore-label, "");display:flex;align-items:center;
+  justify-content:center;min-height:44px;font-size:13px;opacity:.75;pointer-events:none}
 `;
 		function MobileAppFrame(props) {
 			const state = (0, react.useSyncExternalStore)(props.controller.subscribe, props.controller.getSnapshot);
@@ -819,6 +1110,34 @@ body:has(.dshm-shell) :is(input,textarea,[contenteditable=true],[contenteditable
 					prefetchDispose.current = void 0;
 				};
 			}, [activeSessionId, prefetchEnabled]);
+			const collapseEnabled = (0, react.useSyncExternalStore)(subscribeComposerCollapseEnabled, readComposerCollapseEnabled, () => false);
+			const activeRunning = props.useSessions(selectActiveSessionRunning);
+			const runningRef = (0, react.useRef)(activeRunning);
+			runningRef.current = activeRunning;
+			const active = collapseEnabled && hasSession;
+			const readingMode = (0, react.useRef)(void 0);
+			(0, react.useEffect)(() => {
+				if (!active) return;
+				const installed = installComposerReadingMode({
+					restoreLabel: messages.composerRestore,
+					isRunning: () => runningRef.current
+				});
+				readingMode.current = installed;
+				if (runningRef.current) installed.expand();
+				return () => {
+					readingMode.current = void 0;
+					installed.dispose();
+				};
+			}, [
+				active,
+				activeSessionId,
+				messages.composerRestore
+			]);
+			(0, react.useEffect)(() => {
+				if (!activeRunning) return;
+				readingMode.current?.expand();
+				document.documentElement.setAttribute("data-dsh-mobile-composer-collapsed", "false");
+			}, [activeRunning]);
 			(0, react.useEffect)(() => {
 				const observer = new MutationObserver(() => {
 					setDocumentLanguage(document.documentElement.lang);
@@ -1102,6 +1421,7 @@ body:has(.dshm-shell) :is(input,textarea,[contenteditable=true],[contenteditable
 		exports.apply = apply;
 		exports.closeDetailsFromScrim = closeDetailsFromScrim;
 		exports.inject = inject;
+		exports.installComposerReadingMode = installComposerReadingMode;
 		exports.installComposerSendKeyboardPolicy = installComposerSendKeyboardPolicy;
 		exports.isComposerActionTap = isComposerActionTap;
 		exports.isComposerOwnedFocus = isComposerOwnedFocus;
@@ -1109,10 +1429,12 @@ body:has(.dshm-shell) :is(input,textarea,[contenteditable=true],[contenteditable
 		exports.isSessionRowNavigation = isSessionRowNavigation;
 		exports.isSidebarRightControl = isSidebarRightControl;
 		exports.isWideViewportLayout = isWideViewportLayout;
+		exports.readComposerCollapseEnabled = readComposerCollapseEnabled;
 		exports.resolveComposerImePolicy = resolveComposerImePolicy;
 		exports.resolveDeviceShortSide = resolveDeviceShortSide;
 		exports.resolveMobileLayoutLanguage = resolveMobileLayoutLanguage;
 		exports.resolveMobileRightbarLayout = resolveMobileRightbarLayout;
+		exports.selectActiveSessionRunning = selectActiveSessionRunning;
 		return module.exports;
 	}
 });