@khorsheed/dsh-mobile 0.1.0

package/lib/index.js

@@ -0,0 +1,172 @@
+import { opendir, stat } from "node:fs/promises";
+import { homedir } from "node:os";
+import { dirname, isAbsolute, join, resolve } from "node:path";
+//#region lib/types/protocol.js
+/** Identifiers shared by the plugin and its optional native shell. */
+const MOBILE_VERSION = "0.1.0";
+const HANDSHAKE_PATH = "/api/mobile/handshake";
+const CONNECT_PATH = "/api/mobile/connect";
+/** Read-only feature discovery; this does not create a login or grant access. */
+function mobileHandshake() {
+	return {
+		mobileVersion: MOBILE_VERSION,
+		bridgeVersion: 1,
+		capabilities: [
+			"responsive-layout",
+			"official-composer",
+			"browser-session-auth"
+		],
+		authentication: "official-browser-session",
+		devicePairing: false,
+		pushNotifications: false
+	};
+}
+const DIRECTORY_PATH = "/api/mobile/directories";
+//#endregion
+//#region lib/types/connect.js
+const headers = {
+	"cache-control": "no-store",
+	"referrer-policy": "no-referrer"
+};
+/** Deployment-owned destination only: a browser cannot choose where a bearer is sent. */
+function connectInfo(connection, configured) {
+	if (!configured) return {
+		state: "not-configured",
+		origin: null
+	};
+	let url;
+	try {
+		url = new URL(configured);
+		if (url.protocol !== "https:" || url.username || url.password || url.search || url.hash || url.pathname !== "/" || [
+			"localhost",
+			"127.0.0.1",
+			"[::1]"
+		].includes(url.hostname)) throw new Error("invalid");
+	} catch {
+		return {
+			state: "invalid-origin",
+			origin: null
+		};
+	}
+	if (typeof connection.authenticatedUrl !== "function" || typeof connection.requestRejection !== "function") return {
+		state: "unsupported",
+		origin: url.origin
+	};
+	if (connection.requestRejection({ headers: {
+		host: url.host,
+		origin: url.origin
+	} }) === 403) return {
+		state: "untrusted-origin",
+		origin: url.origin
+	};
+	return {
+		state: "ready",
+		origin: url.origin
+	};
+}
+/** Called only behind the official authenticated Fetch registry. */
+function connectResponse(connection, configured) {
+	return async (request) => {
+		const info = connectInfo(connection, configured);
+		if (request.method === "GET") return Response.json(info, { headers });
+		let sameOrigin = false;
+		try {
+			const origin = new URL(request.headers.get("origin") ?? "");
+			const host = request.headers.get("host");
+			sameOrigin = !!host && ["http:", "https:"].includes(origin.protocol) && origin.host === new URL(`http://${host}`).host;
+		} catch {}
+		if (!sameOrigin || request.headers.get("content-type") !== "application/json") return Response.json({ error: "forbidden" }, {
+			status: 403,
+			headers
+		});
+		if (info.state !== "ready" || !info.origin) return Response.json(info, {
+			status: 409,
+			headers
+		});
+		try {
+			const login = new URL(connection.authenticatedUrl(info.origin));
+			if (login.origin !== info.origin || login.pathname !== "/" || login.username || login.password || login.hash || !login.searchParams.get("token") || [...login.searchParams].length !== 1) throw new Error("unsupported");
+			return Response.json({
+				origin: info.origin,
+				loginUrl: login.href
+			}, { headers });
+		} catch {
+			return Response.json({ error: "unavailable" }, {
+				status: 503,
+				headers
+			});
+		}
+	};
+}
+//#endregion
+//#region lib/types/directories.js
+/** Read-only companion for native-picker hosts; never changes the shared picker backend. */
+async function listMobileDirectory(path, signal) {
+	if (path !== void 0 && (!path || path.length > 4096 || path.includes("\0") || !isAbsolute(path) || process.platform === "win32" && !/^(?:[A-Za-z]:[\\/]|[\\/]{2}[^\\/]+[\\/]+[^\\/]+)/.test(path))) throw new Error("invalid-path");
+	signal.throwIfAborted();
+	const target = resolve(path ?? homedir());
+	const entries = [];
+	let scanned = 0, truncated = false;
+	for await (const entry of await opendir(target)) {
+		signal.throwIfAborted();
+		if (++scanned > 1e4 || entries.length >= 1e3) {
+			truncated = true;
+			break;
+		}
+		const child = join(target, entry.name);
+		if (entry.isDirectory() || entry.isSymbolicLink() && await stat(child).then((s) => s.isDirectory(), () => false)) entries.push({
+			name: entry.name,
+			path: child,
+			hidden: entry.name.startsWith(".")
+		});
+	}
+	signal.throwIfAborted();
+	entries.sort((a, b) => a.name.localeCompare(b.name));
+	return {
+		path: target,
+		parent: dirname(target) === target ? null : dirname(target),
+		entries,
+		truncated
+	};
+}
+async function directoryResponse(request) {
+	try {
+		const path = new URL(request.url).searchParams.get("path") ?? void 0;
+		return Response.json(await listMobileDirectory(path, request.signal), { headers: { "cache-control": "no-store" } });
+	} catch (error) {
+		const invalid = error instanceof Error && error.message === "invalid-path";
+		return Response.json({ error: invalid ? "invalid-path" : "directory-unavailable" }, {
+			status: request.signal.aborted ? 499 : invalid ? 400 : 422,
+			headers: { "cache-control": "no-store" }
+		});
+	}
+}
+//#endregion
+//#region lib/types/index.js
+const name = "mobile";
+const inject = [];
+/** Attach only when the official Connection carrier is composed. */
+function apply(ctx, config = {}) {
+	ctx.inject(["connection"], (web) => {
+		web.connection.fetch.register({
+			path: CONNECT_PATH,
+			methods: ["GET", "POST"],
+			requestBody: "buffered",
+			fetch: connectResponse(web.connection, config.publicOrigin ?? process.env.DSH_MOBILE_PUBLIC_ORIGIN)
+		});
+		web.connection.fetch.register({
+			path: DIRECTORY_PATH,
+			methods: ["GET"],
+			requestBody: "buffered",
+			fetch: directoryResponse
+		});
+		web.connection.fetch.register({
+			path: HANDSHAKE_PATH,
+			methods: ["GET"],
+			requestBody: "buffered",
+			fetch: async () => Response.json(mobileHandshake(), { headers: { "cache-control": "no-store" } })
+		});
+	});
+}
+//#endregion
+export { apply, inject, name };

package/lib/invariant.js

@@ -0,0 +1,20 @@
+//#region lib/types/invariant.js
+/**
+* Package-owned invariant companion for `@khorsheed/dsh-mobile`.
+* @module @khorsheed/dsh-mobile/invariant
+*/
+const PACKAGE_NAME = "@khorsheed/dsh-mobile";
+/** Cordis companion plugin name. */
+const name = "mobile-invariant";
+/** Service required before the companion can reserve package ownership. */
+const inject = ["invariants"];
+/** Mobile owns no session data relations; the host owns authentication and streams. */
+const install = () => {};
+/**
+* Register this package's invariant companion.
+* @param ctx - Cordis context carrying the invariant service.
+* @returns the installed registration's disposer after setup succeeds.
+*/
+const apply = (ctx) => Promise.resolve(ctx.invariants.register(PACKAGE_NAME, install));
+//#endregion
+export { apply, inject, name };

package/lib/types/client/ConnectPhone.d.ts

@@ -0,0 +1,9 @@
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+/** Encode entirely in this browser; the login credential never visits a QR service. */
+export declare function LoginQR({ value, label }: {
+    value: string;
+    label: string;
+}): import("react").JSX.Element;
+/** Settings owns this page's lifetime; no credential is persisted or put in the URL. */
+export declare function ConnectPhone({ t }: PropsLocale<'mobile'>): import("react").JSX.Element;
+//# sourceMappingURL=ConnectPhone.d.ts.map

package/lib/types/client/ConnectPhone.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import qrcode from 'qrcode-generator';
+import { CONNECT_PATH } from '../protocol.js';
+/** Encode entirely in this browser; the login credential never visits a QR service. */
+export function LoginQR({ value, label }) {
+    const { size, path } = useMemo(() => {
+        const code = qrcode(0, 'M');
+        code.addData(value);
+        code.make();
+        const n = code.getModuleCount(), cells = [];
+        for (let y = 0; y < n; y++)
+            for (let x = 0; x < n; x++)
+                if (code.isDark(y, x))
+                    cells.push(`M${x + 4} ${y + 4}h1v1h-1z`);
+        return { size: n + 8, path: cells.join('') };
+    }, [value]);
+    return _jsxs("svg", { role: "img", "aria-label": label, viewBox: `0 0 ${size} ${size}`, width: "256", height: "256", shapeRendering: "crispEdges", children: [_jsx("rect", { width: size, height: size, fill: "white" }), _jsx("path", { d: path, fill: "black" })] });
+}
+/** Settings owns this page's lifetime; no credential is persisted or put in the URL. */
+export function ConnectPhone({ t }) {
+    const [info, setInfo] = useState(), [login, setLogin] = useState();
+    const [busy, setBusy] = useState(false), [failed, setFailed] = useState(false);
+    const request = useRef(), timer = useRef();
+    const hide = () => { request.current?.abort(); clearTimeout(timer.current); setLogin(undefined); setBusy(false); };
+    const load = async (generate = false) => {
+        hide();
+        setFailed(false);
+        setBusy(true);
+        const controller = new AbortController();
+        request.current = controller;
+        try {
+            const response = await fetch(CONNECT_PATH, { method: generate ? 'POST' : 'GET', credentials: 'same-origin', cache: 'no-store', signal: controller.signal,
+                ...(generate ? { headers: { 'content-type': 'application/json' }, body: '{}' } : {}) });
+            if (!response.ok)
+                throw new Error('unavailable');
+            const result = await response.json();
+            if (controller.signal.aborted)
+                return;
+            if (generate) {
+                const url = new URL(result.loginUrl);
+                if (!info?.origin || url.origin !== info.origin || url.protocol !== 'https:' || !url.searchParams.get('token'))
+                    throw new Error('invalid');
+                setLogin(url.href);
+                timer.current = setTimeout(hide, 120_000);
+            }
+            else
+                setInfo(result);
+        }
+        catch {
+            if (!controller.signal.aborted)
+                setFailed(true);
+        }
+        finally {
+            if (!controller.signal.aborted)
+                setBusy(false);
+        }
+    };
+    useEffect(() => {
+        void load();
+        const conceal = () => { if (document.visibilityState === 'hidden')
+            hide(); };
+        document.addEventListener('visibilitychange', conceal);
+        window.addEventListener('pagehide', hide);
+        return () => { request.current?.abort(); clearTimeout(timer.current); document.removeEventListener('visibilitychange', conceal); window.removeEventListener('pagehide', hide); };
+    }, []);
+    return _jsxs("section", { "data-mobile-connect": true, children: [_jsx("style", { children: styles }), _jsx("h2", { children: t('connectPhone') }), _jsx("p", { children: t('connectIntro') }), info?.origin && _jsxs("div", { "data-connect-host": true, children: [_jsx("span", { children: t('server') }), _jsx("strong", { children: new URL(info.origin).host })] }), info && info.state !== 'ready' && _jsx("div", { role: "status", children: _jsx("p", { children: t(info.state === 'untrusted-origin' ? 'connectUntrusted' : info.state === 'unsupported' ? 'connectUnsupported' : 'connectSetup') }) }), failed && _jsx("p", { role: "alert", children: t('connectError') }), busy && _jsx("p", { role: "status", children: t('connectLoading') }), login ? _jsxs("div", { "data-connect-code": true, children: [_jsx(LoginQR, { value: login, label: t('connectQR') }), _jsx("p", { children: t('connectConceal') }), _jsx("button", { type: "button", onClick: hide, children: t('connectHide') })] })
+                : _jsx("button", { type: "button", disabled: busy, onClick: () => { void load(info?.state === 'ready'); }, children: t(info?.state === 'ready' ? 'connectGenerate' : 'directoryRetry') }), _jsxs("ol", { children: [_jsx("li", { children: t('connectStepOpen') }), _jsx("li", { children: t('connectStepScan') }), _jsx("li", { children: t('connectStepConfirm') })] }), _jsx("p", { "data-connect-note": true, children: t('connectPrivacy') }), _jsx("p", { "data-connect-note": true, children: t('connectNetwork') })] });
+}
+const styles = `
+[data-mobile-connect]{max-width:640px;color:var(--dsw-alias-label-primary);font-size:15px;line-height:1.6}
+[data-mobile-connect] h2{font-size:20px;margin:0 0 12px}
+[data-mobile-connect] p{margin:12px 0}
+[data-connect-host]{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;padding:16px 0;margin:16px 0;border-block:1px solid var(--dsw-alias-border-l2)}
+[data-connect-host] strong{overflow-wrap:anywhere;font-weight:500}
+[data-mobile-connect] button{font:inherit;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-fill-secondary,transparent);border:1px solid var(--dsw-alias-border-l2);border-radius:12px;padding:10px 18px;min-height:44px;cursor:pointer}
+[data-mobile-connect] button:disabled{opacity:.5;cursor:default}
+[data-mobile-connect] button:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#527cff);outline-offset:3px}
+[data-connect-code]{display:flex;align-items:center;flex-direction:column;gap:8px;padding:24px 0}
+[data-connect-code] svg{max-width:100%;height:auto;border:12px solid white;border-radius:12px;box-sizing:content-box}
+[data-mobile-connect] ol{padding-left:24px;margin:24px 0}[data-mobile-connect] li{padding:5px 0}
+[data-connect-note]{font-size:13px;color:var(--dsw-alias-label-secondary)}
+`;

package/lib/types/client/DirectoryFlow.d.ts

@@ -0,0 +1,14 @@
+import type { DirectoryFlowOwnerProps } from '@deepseek-ai/dsh-client-ui-workspace/client';
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import type { MobileDirectory } from './directory.ts';
+import type { MobileNavigation } from './navigation.ts';
+export interface DirectoryInjected {
+    directory: MobileDirectory;
+    navigation: MobileNavigation;
+}
+/** Both workspace adoption and a pure member path pick use the same read-only browser. */
+export declare function DirectoryFlow({ open, busy, onPicked, onCancel, directory, navigation, preferSaved, t }: DirectoryFlowOwnerProps & DirectoryInjected & PropsLocale<'mobile'> & {
+    preferSaved?: boolean;
+}): import("react").ReactPortal;
+export declare function MobileDirectoryOverlay({ directory, navigation, t }: DirectoryInjected & PropsLocale<'mobile'>): import("react").JSX.Element;
+//# sourceMappingURL=DirectoryFlow.d.ts.map

package/lib/types/client/DirectoryFlow.js

@@ -0,0 +1,75 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { MobileIcon } from './MobileIcon.js';
+const emptySubscribe = () => () => { };
+const emptyWorkspaces = [];
+/** Both workspace adoption and a pure member path pick use the same read-only browser. */
+export function DirectoryFlow({ open, busy, onPicked, onCancel, directory, navigation, preferSaved = false, t }) {
+    const dialog = useRef(null);
+    const controller = useRef();
+    const [listing, setListing] = useState();
+    const [path, setPath] = useState(''), [loading, setLoading] = useState(false), [failed, setFailed] = useState(false);
+    const [tab, setTab] = useState('saved'), [hidden, setHidden] = useState(false);
+    const [query, setQuery] = useState('');
+    const available = useSyncExternalStore(navigation.subscribe, navigation.getSnapshot);
+    const feed = available?.workspaces.list;
+    const saved = useSyncExternalStore(feed ? listener => feed.subscribe(listener) : emptySubscribe, () => feed?.getSnapshot().items ?? emptyWorkspaces);
+    const browse = async (target) => {
+        controller.current?.abort();
+        const request = new AbortController();
+        controller.current = request;
+        setLoading(true);
+        setFailed(false);
+        setListing(undefined);
+        setPath(target ?? '');
+        setTab('browse');
+        setQuery('');
+        try {
+            const next = await directory.list(target, request.signal);
+            if (request.signal.aborted)
+                return;
+            setListing(next);
+            setPath(next.path);
+        }
+        catch {
+            if (!request.signal.aborted)
+                setFailed(true);
+        }
+        finally {
+            if (!request.signal.aborted)
+                setLoading(false);
+        }
+    };
+    useEffect(() => {
+        if (open) {
+            dialog.current?.showModal();
+            if (!preferSaved)
+                void browse();
+        }
+        else {
+            dialog.current?.close();
+            controller.current?.abort();
+            setListing(undefined);
+            setPath('');
+            setTab('saved');
+            setFailed(false);
+            setLoading(false);
+        }
+        return () => { controller.current?.abort(); };
+    }, [open]);
+    const choose = () => { if (!busy && !loading && listing && path === listing.path)
+        onPicked(listing.path); };
+    return createPortal(_jsxs("dialog", { ref: dialog, "data-mobile-dialog": true, "data-mobile-directory": true, "aria-label": t('directoryTitle'), onKeyDown: event => { if (event.key === 'Escape')
+            event.stopPropagation(); }, onCancel: event => { event.preventDefault(); if (!busy)
+            onCancel(); }, children: [_jsxs("header", { children: [_jsx("h2", { children: t('directoryTitle') }), _jsx("button", { type: "button", "aria-label": t('cancel'), disabled: busy, onClick: onCancel, children: _jsx(MobileIcon, { name: "close" }) })] }), _jsx("p", { children: t('directoryHint') }), _jsxs("div", { "data-directory-tabs": true, children: [_jsx("button", { type: "button", "aria-pressed": tab === 'saved', onClick: () => setTab('saved'), children: t('workspaces') }), _jsx("button", { type: "button", "aria-pressed": tab === 'browse', onClick: () => { if (listing)
+                            setTab('browse');
+                        else
+                            void browse(); }, children: t('directoryComputer') })] }), _jsx("div", { "data-directory-scroll": true, children: tab === 'saved' ? _jsx("div", { children: saved.length ? saved.map(item => _jsxs("button", { "data-directory-row": true, type: "button", onClick: () => { setPath(item.path); void browse(item.path); }, children: [_jsx(MobileIcon, { name: "folder" }), _jsxs("span", { children: [_jsx("strong", { children: item.title || item.path.split(/[\\/]/).filter(Boolean).at(-1) || item.path }), _jsx("small", { children: item.path })] }), _jsx(MobileIcon, { name: "right" })] }, item.path)) : _jsx("p", { children: t('directoryNoSaved') }) }) : _jsxs(_Fragment, { children: [_jsxs("div", { "data-directory-current": true, children: [_jsx(MobileIcon, { name: "folder" }), _jsx("span", { children: listing?.path || path || t('directoryLoading') })] }), _jsxs("details", { "data-directory-manual": true, children: [_jsx("summary", { children: t('directoryManual') }), _jsx("form", { onSubmit: event => { event.preventDefault(); event.currentTarget.querySelector('input')?.blur(); if (path.trim())
+                                        void browse(path.trim()); }, children: _jsxs("label", { children: [t('hostPath'), _jsxs("span", { "data-directory-path": true, children: [_jsx("input", { "aria-label": t('hostPath'), value: path, onChange: event => setPath(event.target.value), autoCapitalize: "none", autoCorrect: "off", spellCheck: false, placeholder: "/path/to/project" }), _jsx("button", { type: "submit", disabled: !path.trim(), children: t('directoryGo') })] })] }) })] }), _jsxs("div", { "data-directory-location": true, children: [_jsxs("button", { type: "button", disabled: loading || !listing?.parent, onClick: () => { if (listing?.parent)
+                                        void browse(listing.parent); }, children: [_jsx(MobileIcon, { name: "back" }), t('directoryParent')] }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: hidden, onChange: event => setHidden(event.target.checked) }), t('directoryHidden')] })] }), loading && _jsx("p", { role: "status", children: t('directoryLoading') }), failed && _jsxs("p", { role: "alert", children: [t('directoryError'), " ", _jsx("button", { type: "button", onClick: () => { void browse(path || undefined); }, children: t('directoryRetry') })] }), listing && _jsxs(_Fragment, { children: [_jsx("input", { type: "search", "aria-label": t('directorySearch'), placeholder: t('directorySearch'), value: query, onChange: event => setQuery(event.target.value) }), listing.entries.filter(entry => (hidden || !entry.hidden) && entry.name.toLocaleLowerCase().includes(query.toLocaleLowerCase())).map(entry => _jsxs("button", { "data-directory-row": true, type: "button", onClick: () => { void browse(entry.path); }, children: [_jsx(MobileIcon, { name: "folder" }), _jsx("span", { children: entry.name }), _jsx(MobileIcon, { name: "right" })] }, entry.path)), !listing.entries.some(entry => hidden || !entry.hidden) && _jsx("p", { children: t('directoryEmpty') }), listing.truncated && _jsx("p", { children: t('directoryTruncated') })] })] }) }), _jsx("footer", { children: _jsx("button", { type: "button", "data-mobile-done": true, disabled: busy || loading || !listing || path !== listing.path || tab !== 'browse', onClick: choose, children: t('directorySelect') }) })] }), document.body);
+}
+export function MobileDirectoryOverlay({ directory, navigation, t }) {
+    const open = useSyncExternalStore(directory.subscribe, directory.getSnapshot);
+    return _jsx(DirectoryFlow, { preferSaved: true, open: open, busy: false, onPicked: directory.finish, onCancel: () => directory.finish(null), onError: () => { }, directory: directory, navigation: navigation, t: t });
+}

package/lib/types/client/MobileChrome.d.ts

@@ -0,0 +1,15 @@
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client';
+import type { MobileRooms } from './rooms.ts';
+import type { MobileNavigation } from './navigation.ts';
+import type { MobilePresentation } from './presentation.ts';
+export interface MobileChromeInjected {
+    rooms?: MobileRooms;
+    navigation: MobileNavigation;
+    presentation: MobilePresentation;
+    toggleSidebar: () => void;
+    connection: ConnectionHandle;
+}
+/** One visible navigation bar, with native connection sheets when supported. */
+export declare function MobileChrome({ presentation, toggleSidebar, connection, navigation, rooms, t }: MobileChromeInjected & PropsLocale<'mobile'>): import("react").JSX.Element | null;
+//# sourceMappingURL=MobileChrome.d.ts.map

package/lib/types/client/MobileChrome.js

@@ -0,0 +1,124 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { installNavigationGestures } from './gestures.js';
+import { MobileRoomNavigation } from './MobileRooms.js';
+import { SessionRename } from './SessionRename.js';
+import { MobileIcon } from './MobileIcon.js';
+import { MobileLibrary } from './MobileLibrary.js';
+import { mainSessionId } from './navigation.js';
+import { hasNativeAction, reportChrome, requestNativeAction } from './native.js';
+const emptySubscribe = () => () => { };
+const emptyPreset = () => '';
+function ConversationTitle({ navigation, fallback, prepareNavigation, surface, t }) {
+    const feed = navigation.sessions.list;
+    const sessions = useSyncExternalStore(useCallback(listener => feed.subscribe(listener), [feed]), useCallback(() => feed.getSnapshot(), [feed]));
+    const current = mainSessionId(sessions);
+    useLayoutEffect(() => prepareNavigation(), [current, prepareNavigation]);
+    const row = current ? sessions.byId[current] : undefined;
+    const preset = useSyncExternalStore(surface?.subscribe ?? emptySubscribe, surface?.getSnapshot ?? emptyPreset);
+    const [renaming, setRenaming] = useState(false);
+    useLayoutEffect(() => setRenaming(false), [current]);
+    const cwd = row?.cwd?.split(/[\\/]/).filter(Boolean).at(-1);
+    return _jsxs(_Fragment, { children: [_jsxs("span", { "data-mobile-title-line": true, children: [_jsx("strong", { "data-mobile-session-title": row && !row.blank ? '' : undefined, children: row && !row.blank ? row.title || row.displayTitle : fallback }), row && !row.blank && _jsx("button", { "data-mobile-rename": true, "aria-label": t('renameSession'), onClick: () => { prepareNavigation(); setRenaming(true); }, children: _jsx(MobileIcon, { name: "edit", size: 16 }) })] }), row && !row.blank && (cwd || preset) && _jsxs("span", { "data-mobile-subtitle": true, children: [_jsx("span", { title: row.cwd, children: cwd }), cwd && preset && _jsx("span", { "aria-hidden": true, children: "\u00B7" }), preset && _jsx("span", { children: preset })] }), renaming && row && !row.blank && _jsx(SessionRename, { navigation: navigation, sessionId: row.id, title: row.title || row.displayTitle, close: () => { prepareNavigation(); setRenaming(false); }, t: t }, row.id)] });
+}
+/** One visible navigation bar, with native connection sheets when supported. */
+export function MobileChrome({ presentation, toggleSidebar, connection, navigation, rooms, t }) {
+    const state = useSyncExternalStore(presentation.subscribe, presentation.getSnapshot);
+    const wire = useSyncExternalStore(connection.state.subscribe, connection.state.getSnapshot);
+    const available = useSyncExternalStore(navigation.subscribe, navigation.getSnapshot);
+    const [library, setLibrary] = useState(false), [settings, setSettings] = useState(false);
+    const [wide, setWide] = useState(window.innerWidth >= 960);
+    useEffect(() => { const resize = () => setWide(window.innerWidth >= 960); window.addEventListener('resize', resize); return () => window.removeEventListener('resize', resize); }, []);
+    const [connectionExpanded, setConnectionExpanded] = useState(false);
+    useEffect(() => {
+        setConnectionExpanded(false);
+        if (wire === 'connected')
+            return;
+        const timer = window.setTimeout(() => setConnectionExpanded(true), 4000);
+        return () => window.clearTimeout(timer);
+    }, [wire]);
+    useEffect(() => {
+        if (state.active && wire === 'connected' && available?.sessions.list.getSnapshot().phase === 'pending')
+            void available.sessions.refresh().catch(() => { });
+    }, [state.active, wire, available]);
+    const activated = useRef(false), dialog = useRef(null);
+    useEffect(() => {
+        if (!state.active) {
+            activated.current = false;
+            setLibrary(false);
+            return;
+        }
+        if (available && !activated.current) {
+            activated.current = true;
+            setLibrary(true);
+            if (state.drawer)
+                toggleSidebar();
+        }
+    }, [state.active, state.drawer, available, toggleSidebar]);
+    useEffect(() => { reportChrome(state.active); return () => reportChrome(false); }, [state.active]);
+    useEffect(() => {
+        if (!state.active || !library || !available || wide)
+            return;
+        const main = document.querySelector('[data-mobile-frame] > div:has(> [data-slot="main"])');
+        if (!main)
+            return;
+        const previous = main.inert;
+        main.inert = true;
+        return () => { main.inert = previous; };
+    }, [state.active, library, available, wide]);
+    useEffect(() => {
+        document.documentElement.toggleAttribute('data-mobile-library-open', state.active && library && !!available);
+        return () => document.documentElement.removeAttribute('data-mobile-library-open');
+    }, [state.active, library, available]);
+    useEffect(() => {
+        if (!state.active || settings)
+            return;
+        return installNavigationGestures(document, open => { if (available)
+            setLibrary(open);
+        else if (open !== state.drawer)
+            toggleSidebar(); }, toggleSidebar);
+    }, [state.active, available, settings, state.drawer, toggleSidebar]);
+    const openLibrary = () => {
+        if (!available) {
+            toggleSidebar();
+            return;
+        }
+        if (state.drawer)
+            toggleSidebar();
+        setLibrary(true);
+    };
+    const startSession = () => {
+        presentation.prepareNavigation();
+        available?.workspace.startSession();
+        if (state.drawer)
+            toggleSidebar();
+        setSettings(false);
+        setLibrary(false);
+    };
+    const openSettings = () => {
+        if (hasNativeAction('settings'))
+            requestNativeAction('settings');
+        else
+            setSettings(true);
+    };
+    useEffect(() => { if (settings)
+        dialog.current?.showModal();
+    else
+        dialog.current?.close(); }, [settings]);
+    useEffect(() => {
+        const escape = (e) => {
+            if (e.key !== 'Escape' || settings)
+                return;
+            if (library)
+                setLibrary(false);
+            else if (state.drawer)
+                toggleSidebar();
+        };
+        window.addEventListener('keydown', escape);
+        return () => window.removeEventListener('keydown', escape);
+    }, [state.drawer, settings, library, toggleSidebar]);
+    if (!state.active && !settings && state.mode !== 'desktop')
+        return null;
+    return _jsxs(_Fragment, { children: [!state.active && state.mode === 'desktop' && _jsx("button", { "data-mobile-restore": true, onClick: () => presentation.setMode('mobile'), children: t('restoreMobile') }), state.active && _jsxs(_Fragment, { children: [available && _jsxs("aside", { "data-mobile-library-pane": true, hidden: !library && !wide, children: [_jsxs("nav", { "data-mobile-library-toolbar": true, "aria-label": t('menu'), children: [_jsx("button", { "aria-label": t('settings'), onClick: openSettings, children: _jsx(MobileIcon, { name: "settings" }) }), _jsx("button", { "aria-label": t('newSession'), onClick: startSession, children: _jsx(MobileIcon, { name: "compose" }) })] }), _jsx(MobileLibrary, { ...(rooms ? { rooms } : {}), navigation: available, t: t, onBeforeOpen: presentation.prepareNavigation, onOpen: () => setLibrary(false) })] }), library && available && !wide && _jsx("button", { type: "button", "data-mobile-peek-close": true, "aria-label": t('returnToConversation'), onClick: () => { presentation.prepareNavigation(); setLibrary(false); } }), state.drawer && _jsx("button", { "data-mobile-shade": true, "aria-label": t('close'), onClick: toggleSidebar }), _jsxs("nav", { "data-mobile-toolbar": true, "data-library": false, "aria-label": t('menu'), children: [_jsx("button", { "aria-label": t('menu'), onClick: openLibrary, children: _jsx(MobileIcon, { name: "back" }) }), _jsxs("div", { "data-mobile-nav-title": true, children: [(available ? _jsx(ConversationTitle, { navigation: available, prepareNavigation: presentation.prepareNavigation, surface: presentation.surface, fallback: t('newSession'), t: t }) : _jsx("strong", { children: t('brand') })), wire !== 'connected' && !connectionExpanded && _jsx("small", { role: "status", children: t(wire ?? 'connecting') })] }), _jsx("button", { "data-mobile-new": !!available, "aria-label": available ? t('newSession') : t('settings'), onClick: available ? startSession : openSettings, children: _jsx(MobileIcon, { name: available ? "compose" : "settings" }) }), available && rooms && _jsx(MobileRoomNavigation, { rooms: rooms, navigation: available, prepareNavigation: presentation.prepareNavigation, t: t })] }), wire !== 'connected' && connectionExpanded && _jsxs("div", { "data-mobile-connection-status": true, role: "status", children: [_jsx("span", { children: t(wire ?? 'connecting') }), _jsx("button", { onClick: () => connection.reconnect(), children: t('reconnect') })] })] }), _jsxs("dialog", { ref: dialog, "data-mobile-dialog": true, onClose: () => setSettings(false), "aria-label": t('settings'), children: [_jsx("h2", { children: t('settings') }), available && _jsx("button", { "data-mobile-option": true, onClick: startSession, children: t('newSession') }), _jsx("button", { "data-mobile-option": true, onClick: () => { setSettings(false); setLibrary(false); if (!state.drawer)
+                            toggleSidebar(); }, children: t('workspaces') }), hasNativeAction('settings') ? _jsx("button", { "data-mobile-option": true, onClick: () => { setSettings(false); requestNativeAction('settings'); }, children: t('connectionSettings') }) : _jsxs(_Fragment, { children: [_jsx("h3", { children: t('connection') }), _jsx("p", { children: window.location.host }), _jsx("p", { children: t(wire ?? 'connecting') }), _jsx("button", { onClick: () => connection.reconnect(), children: t('reconnect') })] }), _jsx("h3", { children: t('display') }), _jsx("div", { role: "group", "aria-label": t('display'), children: ['auto', 'mobile', 'desktop'].map((mode) => _jsx("button", { "aria-pressed": state.mode === mode, onClick: () => presentation.setMode(mode), children: t(mode === 'auto' ? 'automatic' : mode) }, mode)) }), _jsx("p", { children: t('appearance') }), _jsx("button", { "data-mobile-done": true, onClick: () => setSettings(false), children: t('done') })] })] });
+}

package/lib/types/client/MobileIcon.d.ts

@@ -0,0 +1,6 @@
+export type MobileIconName = 'edit' | 'members' | 'back' | 'settings' | 'compose' | 'folder' | 'search' | 'scan' | 'close' | 'down' | 'right' | 'plus' | 'attachment' | 'commands' | 'shield';
+export declare function MobileIcon({ name, size }: {
+    name: MobileIconName;
+    size?: number;
+}): import("react").JSX.Element;
+//# sourceMappingURL=MobileIcon.d.ts.map

package/lib/types/client/MobileIcon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const paths = {
+    edit: 'm15 5 4 4M5 19l4-1L20 7a2 2 0 0 0-4-4L5 14l-1 6Z',
+    members: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M22 21v-2a4 4 0 0 0-3-3.87M9 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8m8 .13a4 4 0 0 1 0 7.75',
+    plus: 'M12 5v14M5 12h14', commands: 'm16 4-8 16', shield: 'm12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6l8-3Zm-4 9 3 3 5-6',
+    attachment: 'm9 12 6-6a3 3 0 0 1 4 4l-8 8a5 5 0 0 1-7-7l8-8M7 14l7-7a1 1 0 0 1 2 2l-7 7',
+    back: 'm15 18-6-6 6-6', settings: 'M4 7h6m4 0h6M4 17h10m4 0h2M10 4v6m4 4v6',
+    compose: 'M12 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M10 14l1-4 8-8 3 3-8 8-4 1Z',
+    folder: 'M3 7a1 1 0 0 1 1-1h6l2 3h8a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7Z',
+    search: 'm16 16 5 5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0',
+    scan: 'M8 4H5a1 1 0 0 0-1 1v3m12-4h3a1 1 0 0 1 1 1v3M4 16v3a1 1 0 0 0 1 1h3m8 0h3a1 1 0 0 0 1-1v-3M5 12h14',
+    close: 'm6 6 12 12M6 18 18 6', down: 'm6 9 6 6 6-6', right: 'm9 6 6 6-6 6',
+};
+export function MobileIcon({ name, size = 22 }) {
+    return _jsx("svg", { "data-mobile-icon": name, width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: paths[name] }) });
+}

package/lib/types/client/MobileLibrary.d.ts

@@ -0,0 +1,13 @@
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import type { NavigationCapabilities } from './navigation.ts';
+import type { MobileRooms } from './rooms.ts';
+type Props = PropsLocale<'mobile'> & {
+    rooms?: MobileRooms;
+    navigation: NavigationCapabilities;
+    onOpen: () => void;
+    onBeforeOpen?: () => void;
+};
+/** Browse official metadata; the official workspace service remains the only navigation writer. */
+export declare function MobileLibrary({ rooms, navigation, onOpen, onBeforeOpen, t }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MobileLibrary.d.ts.map