@vibedev-si/dsh-vibedev 0.2.1

package/client/client.js

@@ -0,0 +1,1368 @@
+window.__ModuleLoader__.load({ id: "@vibedev-si/dsh-vibedev", factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react = require("react");
+		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+		let react_jsx_runtime = require("react/jsx-runtime");
+		//#region src/client/account-store.ts
+		const ACCOUNT_ROUTE = "/api/dsh-vibedev/account";
+		const PENDING_POLL_MS = 2e3;
+		const IDLE_POLL_MS = 6e4;
+		/** Who to show: the nickname, else the email. */
+		function displayName(view) {
+			return view?.user?.nickname ?? view?.user?.email;
+		}
+		/** The balance as text, e.g. `¥12.50`. */
+		function balanceText(view) {
+			const balance = view?.balance;
+			if (balance === void 0) return void 0;
+			return `${balance.currency === "CNY" ? "¥" : balance.currency === "USD" ? "$" : `${balance.currency} `}${balance.amount}`;
+		}
+		/** The account store. */
+		var AccountStore = class {
+			options;
+			state = {
+				view: void 0,
+				loadFailed: false,
+				busy: void 0,
+				actionError: void 0
+			};
+			listeners = /* @__PURE__ */ new Set();
+			timer;
+			reading;
+			stopped = true;
+			unsubscribeFocus;
+			/**
+			* @param options - fetch, timers, window opening and focus (test seams).
+			*/
+			constructor(options = {}) {
+				this.options = options;
+			}
+			/** Subscribe for useSyncExternalStore. */
+			subscribe = (listener) => {
+				this.listeners.add(listener);
+				return () => {
+					this.listeners.delete(listener);
+				};
+			};
+			/** The current state, for useSyncExternalStore. */
+			getSnapshot = () => this.state;
+			set(next) {
+				this.state = {
+					...this.state,
+					...next
+				};
+				for (const listener of this.listeners) try {
+					listener();
+				} catch {}
+			}
+			fetch(path, init) {
+				return (this.options.fetch ?? globalThis.fetch)(path, init);
+			}
+			/** Start reading; returns stop. */
+			start() {
+				if (!this.stopped) return () => {
+					this.stop();
+				};
+				this.stopped = false;
+				this.unsubscribeFocus = this.options.onFocus?.(() => {
+					this.refresh();
+				});
+				this.refresh();
+				return () => {
+					this.stop();
+				};
+			}
+			stop() {
+				this.stopped = true;
+				this.unsubscribeFocus?.();
+				this.unsubscribeFocus = void 0;
+				if (this.timer !== void 0) (this.options.clearTimeout ?? ((handle) => {
+					globalThis.clearTimeout(handle);
+				}))(this.timer);
+				this.timer = void 0;
+			}
+			schedule() {
+				if (this.stopped) return;
+				if (this.timer !== void 0) (this.options.clearTimeout ?? ((handle) => {
+					globalThis.clearTimeout(handle);
+				}))(this.timer);
+				const delay = this.state.view?.pending !== void 0 ? PENDING_POLL_MS : IDLE_POLL_MS;
+				this.timer = (this.options.setTimeout ?? ((callback, ms) => globalThis.setTimeout(callback, ms)))(() => {
+					this.timer = void 0;
+					this.refresh();
+				}, delay);
+			}
+			/**
+			* Read the account now.
+			* @param fresh - ask the Host to read the balance again.
+			*/
+			refresh(fresh = false) {
+				this.reading ??= (async () => {
+					try {
+						const response = await this.fetch(fresh ? `${ACCOUNT_ROUTE}?fresh=1` : ACCOUNT_ROUTE);
+						if (!response.ok) throw new Error(`HTTP ${response.status}`);
+						this.set({
+							view: await response.json(),
+							loadFailed: false
+						});
+					} catch {
+						this.set({ loadFailed: true });
+					} finally {
+						this.reading = void 0;
+						this.schedule();
+					}
+				})();
+				return this.reading;
+			}
+			/** Start a sign-in: the Host opens the system browser; when it could not, the page opens the link. */
+			async signIn() {
+				this.set({
+					busy: "sign-in",
+					actionError: void 0
+				});
+				try {
+					const response = await this.fetch(`${ACCOUNT_ROUTE}/sign-in`, {
+						method: "POST",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify({ open: true })
+					});
+					const body = await response.json().catch(() => void 0);
+					if (!response.ok || typeof body?.url !== "string") throw new Error(typeof body?.error?.message === "string" ? body.error.message : `HTTP ${response.status}`);
+					if (body.opened !== true) this.options.openWindow?.(body.url);
+				} catch (error) {
+					this.set({ actionError: {
+						kind: "sign-in",
+						message: error instanceof Error ? error.message : String(error)
+					} });
+				} finally {
+					this.set({ busy: void 0 });
+					await this.refresh();
+				}
+			}
+			/** Open the waiting sign-in's link again (the browser did not show it). */
+			openPending() {
+				const url = this.state.view?.pending?.url;
+				if (url !== void 0) this.options.openWindow?.(url);
+			}
+			/**
+			* Open one of the gateway's pages (top-up, usage) the page's own way.
+			* @param url - the page.
+			*/
+			openLink(url) {
+				this.options.openWindow?.(url);
+			}
+			/** Stop a waiting sign-in. */
+			async cancel() {
+				await this.fetch(`${ACCOUNT_ROUTE}/cancel`, { method: "POST" }).catch(() => void 0);
+				await this.refresh();
+			}
+			/** Sign out of the plugin's own sign-in. */
+			async signOut() {
+				this.set({
+					busy: "sign-out",
+					actionError: void 0
+				});
+				try {
+					const response = await this.fetch(`${ACCOUNT_ROUTE}/sign-out`, { method: "POST" });
+					if (!response.ok) throw new Error(`HTTP ${response.status}`);
+				} catch (error) {
+					this.set({ actionError: {
+						kind: "sign-out",
+						message: error instanceof Error ? error.message : String(error)
+					} });
+				} finally {
+					this.set({ busy: void 0 });
+					await this.refresh();
+				}
+			}
+		};
+		//#endregion
+		//#region src/client/locales.ts
+		/**
+		* Copy for the dsh-vibedev pages (the plugin's settings page, the VibeDev
+		* account section in Settings and the sidebar status), in the two languages
+		* the client ships. Keys are shared; `zh` is the reference dictionary.
+		*/
+		const zh = {
+			spending: "花费",
+			confirmSpending: "每次付费生成前先询问",
+			confirmSpendingHint: "开启后，生成图片、视频、音乐或播客之前会先请你确认，并显示模型和预估金额。默认关闭。",
+			output: "保存位置",
+			outputDir: "保存目录",
+			outputDirHint: "相对当前工作区。图片、视频、音频和转写稿分别放在其中的 images、videos、audio、transcripts 子目录。清空后恢复为 media。",
+			models: "默认媒体模型",
+			modelsHint: "填了模型 ID 就优先用它；留空时由 Agent 按 VibeDev 模型目录自己选。想看有哪些模型和价格，可以在对话里让 Agent 列出媒体模型。",
+			imageModel: "生图",
+			videoModel: "视频",
+			musicModel: "音乐",
+			podcastModel: "播客",
+			transcriptionModel: "语音转写",
+			modelPlaceholder: "留空自动选择",
+			account: "账号",
+			accountHint: "在「设置 → VibeDev 账号」或侧边栏底部登录 VibeDev。在 VibeDev 应用里直接使用应用已登录的账号。费用从 VibeDev 余额中扣除。",
+			register: "前往 VibeDev 注册或充值",
+			loading: "正在读取设置…",
+			unavailable: "插件没有在运行，暂时不能修改设置。",
+			readOnly: "当前的配置文件是只读的。",
+			saveFailed: "没有保存成功，请重试。",
+			save: "保存",
+			saving: "正在保存…",
+			overridden: "已修改",
+			reset: "恢复默认",
+			invalid: "这个值无效",
+			accountNav: "VibeDev 账号",
+			mediaNav: "VibeDev 媒体生成",
+			accountTitle: "VibeDev 账号",
+			accountIntro: "登录 VibeDev 后，模型选择器里会多出「{name}」一组模型（如 Claude、GPT 等），也能让 Agent 生成图片、视频和音乐。费用从你的 VibeDev 余额中扣除，和 DeepSeek 账号互不影响。",
+			signedOutStatus: "未登录",
+			signIn: "登录 VibeDev",
+			signingIn: "正在登录…",
+			pendingStatus: "已在浏览器打开 VibeDev 登录页，完成登录后这里会自动更新。",
+			pendingLink: "浏览器没有打开？点这里打开登录页",
+			cancelSignIn: "取消",
+			registerHint: "还没有 VibeDev 账号？",
+			registerLink: "去注册",
+			signedInAs: "已登录：{who}",
+			signedInPlugin: "已登录 VibeDev",
+			hostStatus: "已通过 VibeDev 应用登录{who}",
+			hostHint: "这个账号由 VibeDev 应用管理，退出请到应用左下角的账号菜单。",
+			keyStatus: "正在使用开发用密钥（环境变量）",
+			balance: "余额：{amount}",
+			balanceUnknown: "余额暂时读取不到",
+			modelsListed: "模型选择器里的「{name}」：{count} 个模型",
+			modelsHost: "VibeDev 应用自己的模型列表里已经有这些模型",
+			topUp: "充值",
+			usage: "用量明细",
+			refresh: "刷新",
+			signOut: "退出登录",
+			signOutFailed: "退出没有成功，请重试。",
+			signInFailed: "没能开始登录：{message}",
+			loadFailed: "读取 VibeDev 账号状态失败，请稍后再试。",
+			sidebarSignedIn: "VibeDev 已登录",
+			sidebarSignedOut: "登录 VibeDev",
+			sidebarPending: "正在登录 VibeDev…",
+			sidebarMenu: "VibeDev 账号",
+			sidebarIntro: "登录后可用 VibeDev 的模型和媒体生成",
+			settings: "设置",
+			accountMenu: "VibeDev 账号菜单"
+		};
+		const en = {
+			spending: "Spending",
+			confirmSpending: "Ask before each paid generation",
+			confirmSpendingHint: "When on, you are asked to confirm before an image, video, song or podcast is generated, with the model and the estimated price. Off by default.",
+			output: "Where results go",
+			outputDir: "Output folder",
+			outputDirHint: "Relative to the workspace. Images, videos, audio and transcripts go into its images, videos, audio and transcripts folders. Clear it to go back to media.",
+			models: "Default media models",
+			modelsHint: "A model ID entered here is used first; leave it empty to let the agent choose from the VibeDev catalog. Ask the agent to list the media models to see what is available and what it costs.",
+			imageModel: "Images",
+			videoModel: "Video",
+			musicModel: "Music",
+			podcastModel: "Podcasts",
+			transcriptionModel: "Speech to text",
+			modelPlaceholder: "Empty: chosen automatically",
+			account: "Account",
+			accountHint: "Sign in to VibeDev in Settings → VibeDev account or at the bottom of the sidebar. In the VibeDev app, the account signed in to the app is used. Everything is paid from the VibeDev balance.",
+			register: "Register or top up at VibeDev",
+			loading: "Loading settings…",
+			unavailable: "The plugin is not running, so its settings cannot be changed right now.",
+			readOnly: "The configuration is read-only.",
+			saveFailed: "The settings were not saved. Try again.",
+			save: "Save",
+			saving: "Saving…",
+			overridden: "Changed",
+			reset: "Reset",
+			invalid: "Not a valid value",
+			accountNav: "VibeDev account",
+			mediaNav: "VibeDev media",
+			accountTitle: "VibeDev account",
+			accountIntro: "Once you sign in to VibeDev, the model picker gains a \"{name}\" group (Claude, GPT and more), and the agent can generate images, video and music. Everything is paid from your VibeDev balance, separately from the DeepSeek account.",
+			signedOutStatus: "Not signed in",
+			signIn: "Sign in to VibeDev",
+			signingIn: "Signing in…",
+			pendingStatus: "The VibeDev sign-in page is open in your browser; this updates once you finish there.",
+			pendingLink: "Browser did not open? Open the sign-in page",
+			cancelSignIn: "Cancel",
+			registerHint: "No VibeDev account yet?",
+			registerLink: "Register",
+			signedInAs: "Signed in as {who}",
+			signedInPlugin: "Signed in to VibeDev",
+			hostStatus: "Signed in through the VibeDev app{who}",
+			hostHint: "The VibeDev app manages this account; sign out from the account menu at the bottom of the app's sidebar.",
+			keyStatus: "Using a development key from the environment",
+			balance: "Balance: {amount}",
+			balanceUnknown: "The balance could not be read right now",
+			modelsListed: "\"{name}\" in the model picker: {count} models",
+			modelsHost: "The VibeDev app already lists these models itself",
+			topUp: "Top up",
+			usage: "Usage",
+			refresh: "Refresh",
+			signOut: "Sign out",
+			signOutFailed: "Signing out did not work. Try again.",
+			signInFailed: "Could not start the sign-in: {message}",
+			loadFailed: "The VibeDev account could not be read. Try again later.",
+			sidebarSignedIn: "VibeDev signed in",
+			sidebarSignedOut: "Sign in to VibeDev",
+			sidebarPending: "Signing in to VibeDev…",
+			sidebarMenu: "VibeDev account",
+			sidebarIntro: "Sign in to use the VibeDev models and media generation",
+			settings: "Settings",
+			accountMenu: "VibeDev account menu"
+		};
+		/**
+		* Fill `{name}` placeholders.
+		* @param template - the dictionary text.
+		* @param values - placeholder values.
+		* @returns the text.
+		*/
+		function fill(template, values) {
+			return template.replace(/\{(\w+)\}/g, (match, key) => key in values ? String(values[key]) : match);
+		}
+		//#endregion
+		//#region src/client/AccountSection.tsx
+		/**
+		* Settings → VibeDev 账号: sign in to VibeDev, see who is signed in, the
+		* balance and how many VibeDev models the pickers list, top up, sign out.
+		* The DeepSeek account keeps its own section; this one never touches it.
+		*/
+		const styles$1 = {
+			page: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 16,
+				maxWidth: 640
+			},
+			title: {
+				margin: 0,
+				fontSize: 16,
+				fontWeight: 600,
+				lineHeight: 1.5,
+				color: "var(--dsw-alias-label-primary)"
+			},
+			intro: {
+				margin: 0,
+				fontSize: 13,
+				lineHeight: 1.7,
+				color: "var(--dsw-alias-label-secondary)"
+			},
+			card: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 10,
+				padding: 16,
+				borderRadius: 12,
+				border: "0.5px solid var(--dsw-alias-border-l2)",
+				background: "var(--dsw-alias-bg-l2, transparent)"
+			},
+			statusRow: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				fontSize: 14,
+				fontWeight: 500,
+				color: "var(--dsw-alias-label-primary)"
+			},
+			line: {
+				margin: 0,
+				fontSize: 13,
+				lineHeight: 1.6,
+				color: "var(--dsw-alias-label-secondary)"
+			},
+			quiet: {
+				margin: 0,
+				fontSize: 12,
+				lineHeight: 1.6,
+				color: "var(--dsw-alias-label-tertiary)"
+			},
+			actions: {
+				display: "flex",
+				flexWrap: "wrap",
+				gap: 8,
+				paddingTop: 4
+			},
+			link: {
+				fontSize: 13,
+				color: "var(--dsw-alias-state-business-primary)",
+				cursor: "pointer",
+				background: "none",
+				border: "none",
+				padding: 0,
+				textAlign: "left"
+			},
+			error: {
+				margin: 0,
+				fontSize: 12,
+				lineHeight: 1.6,
+				color: "var(--dsw-alias-state-error-primary, #d4380d)"
+			}
+		};
+		/** The status dot for a state. */
+		function statusDot(state) {
+			const view = state.view;
+			if (view === void 0) return "idle";
+			if (view.pending !== void 0) return "ongoing";
+			return view.source === "none" ? "idle" : "done";
+		}
+		function ExternalLink(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				style: styles$1.link,
+				href: props.href,
+				target: "_blank",
+				rel: "noreferrer",
+				children: props.children
+			});
+		}
+		/**
+		* The section.
+		* @param props - the dictionary, the shared account store and the route's display name.
+		* @returns the section content.
+		*/
+		function AccountSection({ t, store, routeName }) {
+			const state = (0, react.useSyncExternalStore)(store.subscribe, store.getSnapshot);
+			(0, react.useEffect)(() => {
+				store.refresh(true);
+			}, [store]);
+			const view = state.view;
+			const who = displayName(view);
+			const balance = balanceText(view);
+			let status;
+			let details = null;
+			let actions = null;
+			if (view === void 0) status = state.loadFailed ? t("loadFailed") : t("loading");
+			else if (view.pending !== void 0) {
+				status = t("signingIn");
+				details = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					style: styles$1.line,
+					children: t("pendingStatus")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					style: styles$1.link,
+					onClick: () => {
+						store.openPending();
+					},
+					children: t("pendingLink")
+				})] });
+				actions = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => {
+						store.cancel();
+					},
+					children: t("cancelSignIn")
+				});
+			} else if (view.source === "none") {
+				status = t("signedOutStatus");
+				actions = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+					variant: "primary",
+					size: "sm",
+					disabled: state.busy !== void 0,
+					onClick: () => {
+						store.signIn();
+					},
+					children: state.busy === "sign-in" ? t("signingIn") : t("signIn")
+				});
+				details = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					style: styles$1.quiet,
+					children: [
+						t("registerHint"),
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExternalLink, {
+							href: view.links.register,
+							children: t("registerLink")
+						})
+					]
+				});
+			} else {
+				status = view.source === "host" ? fill(t("hostStatus"), { who: who === void 0 ? "" : `：${who}` }) : view.source === "key" ? t("keyStatus") : who === void 0 ? t("signedInPlugin") : fill(t("signedInAs"), { who });
+				details = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles$1.line,
+						children: balance === void 0 ? t("balanceUnknown") : fill(t("balance"), { amount: balance })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles$1.line,
+						children: view.models.hidden === "host-account" ? t("modelsHost") : fill(t("modelsListed"), {
+							name: routeName,
+							count: view.models.count
+						})
+					}),
+					view.source === "host" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles$1.quiet,
+						children: t("hostHint")
+					}) : null
+				] });
+				actions = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "primary",
+						size: "sm",
+						onClick: () => {
+							store.openLink(view.links.topUp);
+						},
+						children: t("topUp")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => {
+							store.openLink(view.links.usage);
+						},
+						children: t("usage")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => {
+							store.refresh(true);
+						},
+						children: t("refresh")
+					}),
+					view.source === "plugin" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "ghost",
+						size: "sm",
+						disabled: state.busy !== void 0,
+						onClick: () => {
+							store.signOut();
+						},
+						children: t("signOut")
+					}) : null
+				] });
+			}
+			const error = state.actionError === void 0 ? void 0 : state.actionError.kind === "sign-in" ? fill(t("signInFailed"), { message: state.actionError.message }) : t("signOutFailed");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: styles$1.page,
+				"data-dsh-vibedev-account": true,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						style: styles$1.title,
+						children: t("accountTitle")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles$1.intro,
+						children: fill(t("accountIntro"), { name: routeName })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: styles$1.card,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: styles$1.statusRow,
+								role: "status",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+									state: statusDot(state),
+									size: 8
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: status })]
+							}),
+							details,
+							actions === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: styles$1.actions,
+								children: actions
+							}),
+							error === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								style: styles$1.error,
+								role: "alert",
+								children: error
+							})
+						]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/fields.ts
+		/** The settings namespace: the plugin's profile entry id. */
+		const SETTINGS_NAMESPACE = "dsh-vibedev";
+		/** The model slots, in page order. */
+		const MODEL_FIELDS = [
+			"imageModel",
+			"videoModel",
+			"musicModel",
+			"podcastModel",
+			"transcriptionModel"
+		];
+		/** Every field the page edits. */
+		const FIELDS = [
+			"confirmSpending",
+			"outputDir",
+			...MODEL_FIELDS
+		];
+		/**
+		* A switch field: the staged text is `true` or `false`, and saving always
+		* writes the boolean (a switch has no empty state to clear with).
+		* @param field - field name inside the namespace section.
+		* @returns the field's conversion spec.
+		*/
+		function booleanField(field) {
+			return {
+				field,
+				format: (value) => value === true ? "true" : "false",
+				parse: (text) => ({
+					kind: "set",
+					value: text.trim() === "true"
+				})
+			};
+		}
+		/**
+		* A free-text field: an empty draft clears the field, so it falls back to the
+		* default (`media` for the folder, automatic choice for a model).
+		* @param field - field name inside the namespace section.
+		* @returns the field's conversion spec.
+		*/
+		function textField(field) {
+			return {
+				field,
+				format: (value) => typeof value === "string" ? value : "",
+				parse: (text) => {
+					const trimmed = text.trim();
+					return trimmed === "" ? { kind: "clear" } : {
+						kind: "set",
+						value: trimmed
+					};
+				}
+			};
+		}
+		/** The specs of every field the page edits. */
+		function fieldSpecs() {
+			return [
+				booleanField("confirmSpending"),
+				textField("outputDir"),
+				...MODEL_FIELDS.map(textField)
+			];
+		}
+		//#endregion
+		//#region src/client/SettingsPage.tsx
+		/**
+		* The dsh-vibedev settings page on the Plugins page: spending confirmation, the
+		* output folder, the pinned models, and how the account works. Edits are
+		* staged and written together by the save, like every settings page there.
+		*/
+		/** Where new users register and everyone tops up. */
+		const VIBEDEV_SITE = "https://vibedev.jzsaas.com";
+		const styles = {
+			section: {
+				padding: "12px 0",
+				borderTop: "0.5px solid var(--dsw-alias-border-l2)"
+			},
+			firstSection: { padding: "0 0 12px" },
+			sectionTitle: {
+				margin: "0 0 2px",
+				fontSize: 12,
+				fontWeight: 600,
+				lineHeight: 1.5,
+				color: "var(--dsw-alias-label-secondary)"
+			},
+			sectionHint: {
+				margin: "0 0 4px",
+				fontSize: 12,
+				lineHeight: 1.6,
+				color: "var(--dsw-alias-label-tertiary)"
+			},
+			switchRow: {
+				display: "flex",
+				alignItems: "center",
+				gap: 16,
+				padding: "10px 0 0"
+			},
+			switchText: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 4,
+				flex: 1,
+				minWidth: 0
+			},
+			label: {
+				fontSize: 13,
+				fontWeight: 500,
+				lineHeight: 1.5,
+				color: "var(--dsw-alias-label-primary)"
+			},
+			hint: {
+				margin: 0,
+				fontSize: 12,
+				lineHeight: 1.6,
+				color: "var(--dsw-alias-label-secondary)"
+			},
+			link: {
+				display: "inline-block",
+				marginTop: 8,
+				fontSize: 12,
+				lineHeight: 1.5,
+				color: "var(--dsw-alias-state-business-primary)"
+			},
+			quiet: {
+				margin: 0,
+				fontSize: 12,
+				lineHeight: 1.5,
+				color: "var(--dsw-alias-label-tertiary)"
+			}
+		};
+		function Section(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				style: props.first === true ? styles.firstSection : styles.section,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
+						style: styles.sectionTitle,
+						children: props.title
+					}),
+					props.hint === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						style: styles.sectionHint,
+						children: props.hint
+					}),
+					props.children
+				]
+			});
+		}
+		/**
+		* Render the settings page.
+		* @param props - the dictionary, the form store and its actions.
+		* @returns the page.
+		*/
+		function MediaSettingsPage({ t, store, actions }) {
+			const state = (0, react.useSyncExternalStore)(store.subscribe, store.getSnapshot);
+			if (state.status === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				style: styles.quiet,
+				role: "status",
+				children: t("loading")
+			});
+			const disabled = !state.shell.writable || state.shell.saving;
+			const textField = (field) => ({
+				text: state.fields[field].text,
+				overridden: state.fields[field].overridden,
+				invalid: state.fields[field].invalid,
+				overriddenLabel: t("overridden"),
+				resetLabel: t("reset"),
+				invalidLabel: t("invalid"),
+				disabled,
+				onEdit: (text) => {
+					actions.edit(field, text);
+				},
+				onReset: () => {
+					actions.resetField(field);
+				}
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.SettingsForm, {
+				labels: {
+					unavailable: t("unavailable"),
+					readOnly: t("readOnly"),
+					saveFailed: t("saveFailed"),
+					save: t("save"),
+					saving: t("saving")
+				},
+				state: state.shell,
+				onSave: actions.save,
+				onDiscard: actions.discard,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
+						first: true,
+						title: t("spending"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: styles.switchRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: styles.switchText,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: styles.label,
+									children: t("confirmSpending")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									style: styles.hint,
+									children: t("confirmSpendingHint")
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Switch, {
+								checked: state.fields.confirmSpending.text === "true",
+								onChange: (next) => {
+									actions.edit("confirmSpending", next ? "true" : "false");
+								},
+								label: t("confirmSpending"),
+								disabled
+							})]
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
+						title: t("output"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SettingsValueField, {
+							id: "dsh-vibedev-output-dir",
+							label: t("outputDir"),
+							hint: t("outputDirHint"),
+							placeholder: "media",
+							...textField("outputDir")
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Section, {
+						title: t("models"),
+						hint: t("modelsHint"),
+						children: MODEL_FIELDS.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SettingsValueField, {
+							id: `dsh-vibedev-${field}`,
+							label: t(field),
+							placeholder: t("modelPlaceholder"),
+							...textField(field)
+						}, field))
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Section, {
+						title: t("account"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							style: styles.hint,
+							children: t("accountHint")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							style: styles.link,
+							href: VIBEDEV_SITE,
+							target: "_blank",
+							rel: "noreferrer",
+							children: t("register")
+						})]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/PrimaryLauncher.tsx
+		/**
+		* The VibeDev account as the app's main account (`settings.launcher`, the row
+		* at the very foot of the sidebar), used where the VibeDev account leads (the
+		* VibeDev app, `primary: true`). Signed in: the person's initial, name and
+		* balance, with a menu for Settings, top-up, usage and sign-out. Signed out:
+		* "登录 VibeDev". It opens Settings the way the launcher it replaces does.
+		* Inside DeepSeek Harness the plugin keeps to its smaller sidebar entry
+		* (SidebarAccount.tsx) and this is not registered.
+		*/
+		const row = {
+			display: "flex",
+			alignItems: "center",
+			gap: 10,
+			width: "100%",
+			padding: "6px 10px",
+			border: "none",
+			borderRadius: 10,
+			background: "transparent",
+			cursor: "pointer",
+			textAlign: "left",
+			color: "var(--dsw-alias-label-primary)"
+		};
+		const signedInRow = {
+			...row,
+			minHeight: 44
+		};
+		const signedOutRow = {
+			...row,
+			minHeight: 32,
+			color: "var(--dsw-alias-label-secondary)",
+			fontSize: 13
+		};
+		const railRow = {
+			...row,
+			justifyContent: "center",
+			width: 36,
+			height: 36,
+			minHeight: 36,
+			padding: 0
+		};
+		const avatar = {
+			flex: "none",
+			display: "grid",
+			placeItems: "center",
+			width: 28,
+			height: 28,
+			borderRadius: "50%",
+			background: "var(--dsw-alias-brand-primary, #3b82f6)",
+			color: "#fff",
+			fontSize: 13,
+			fontWeight: 600,
+			lineHeight: 1
+		};
+		const lines = {
+			display: "flex",
+			flexDirection: "column",
+			minWidth: 0,
+			gap: 1
+		};
+		const ellipsis = {
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		};
+		const nameText = {
+			...ellipsis,
+			fontSize: 13,
+			fontWeight: 500
+		};
+		const subText = {
+			...ellipsis,
+			fontSize: 12,
+			color: "var(--dsw-alias-label-secondary)"
+		};
+		/**
+		* The first letter to show in the avatar.
+		* @param who - nickname or email.
+		* @returns one uppercase character, or "V".
+		*/
+		function initialOf(who) {
+			const first = who?.trim().match(/\p{L}|\p{N}/u)?.[0];
+			return first === void 0 ? "V" : first.toUpperCase();
+		}
+		/**
+		* The main account row.
+		* @param props - the dictionary, the shared account store, and the launcher's owner props.
+		* @returns the row with its menu.
+		*/
+		function PrimaryLauncher({ t, store, owner }) {
+			const state = (0, react.useSyncExternalStore)(store.subscribe, store.getSnapshot);
+			const [open, setOpen] = (0, react.useState)(false);
+			const wide = owner.wide !== false;
+			const settingsWasOpen = (0, react.useRef)(false);
+			(0, react.useEffect)(() => {
+				if (owner.settingsOpen === true && !settingsWasOpen.current) store.refresh(true);
+				settingsWasOpen.current = owner.settingsOpen === true;
+			}, [owner.settingsOpen, store]);
+			const view = state.view;
+			const signedIn = view !== void 0 && view.source !== "none";
+			const pending = !signedIn && view?.pending !== void 0;
+			const who = displayName(view);
+			const balance = balanceText(view);
+			const title = signedIn ? who ?? t("sidebarSignedIn") : pending ? t("sidebarPending") : t("signIn");
+			const settings = {
+				id: "settings",
+				label: t("settings"),
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconSettingsOutlineMedium, { size: 16 }),
+				...owner.settingsShortcut === void 0 ? {} : { shortcut: owner.settingsShortcut }
+			};
+			const items = signedIn ? [
+				{
+					type: "label",
+					id: "who",
+					text: who === void 0 ? t("signedInPlugin") : fill(t("signedInAs"), { who })
+				},
+				...balance === void 0 ? [] : [{
+					type: "label",
+					id: "balance",
+					text: fill(t("balance"), { amount: balance })
+				}],
+				{
+					type: "separator",
+					id: "separator-account"
+				},
+				settings,
+				{
+					id: "top-up",
+					label: t("topUp")
+				},
+				{
+					id: "usage",
+					label: t("usage")
+				},
+				...view.source === "plugin" ? [{
+					type: "separator",
+					id: "separator-sign-out"
+				}, {
+					id: "sign-out",
+					label: t("signOut"),
+					danger: true,
+					disabled: state.busy !== void 0
+				}] : []
+			] : pending ? [
+				{
+					type: "label",
+					id: "pending",
+					text: t("pendingStatus")
+				},
+				{
+					id: "open-pending",
+					label: t("pendingLink")
+				},
+				{
+					id: "cancel",
+					label: t("cancelSignIn")
+				},
+				{
+					type: "separator",
+					id: "separator-settings"
+				},
+				settings
+			] : [
+				{
+					type: "label",
+					id: "intro",
+					text: t("sidebarIntro")
+				},
+				{
+					id: "sign-in",
+					label: t("signIn"),
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconUserOutlineMedium, { size: 16 }),
+					disabled: state.busy !== void 0
+				},
+				{
+					id: "register",
+					label: `${t("registerHint")} ${t("registerLink")}`
+				},
+				{
+					type: "separator",
+					id: "separator-settings"
+				},
+				settings
+			];
+			const face = signedIn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: avatar,
+				"aria-hidden": "true",
+				children: initialOf(who)
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconUserOutlineMedium, { size: 16 });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Menu, {
+				open,
+				side: "top",
+				align: "start",
+				portal: true,
+				autoFocus: true,
+				anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					style: !wide ? railRow : signedIn ? signedInRow : signedOutRow,
+					"aria-label": wide ? t("accountMenu") : title,
+					title: wide ? void 0 : title,
+					"aria-haspopup": "menu",
+					"aria-expanded": open,
+					"data-dsh-vibedev-launcher": true,
+					"data-signed-in": signedIn,
+					onClick: () => {
+						setOpen((value) => !value);
+					},
+					children: [face, wide ? signedIn ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						style: lines,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: nameText,
+							children: who ?? t("sidebarSignedIn")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: subText,
+							children: balance === void 0 ? "VibeDev" : `VibeDev · ${balance}`
+						})]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: ellipsis,
+						children: title
+					}) : null]
+				}),
+				items,
+				onClose: () => {
+					setOpen(false);
+				},
+				onSelect: (id) => {
+					setOpen(false);
+					if (id === "settings") owner.openSettings?.();
+					else if (id === "sign-in") store.signIn();
+					else if (id === "sign-out") store.signOut();
+					else if (id === "cancel") store.cancel();
+					else if (id === "open-pending") store.openPending();
+					else if (view === void 0) return;
+					else if (id === "top-up") store.openLink(view.links.topUp);
+					else if (id === "usage") store.openLink(view.links.usage);
+					else if (id === "register") store.openLink(view.links.register);
+				}
+			});
+		}
+		//#endregion
+		//#region src/client/SidebarAccount.tsx
+		/**
+		* The sidebar foot's VibeDev status (`sidebar.footer.action`): "登录 VibeDev",
+		* "正在登录 VibeDev…" or "VibeDev 已登录", with a menu for the account. The
+		* Harness's own account entry (the DeepSeek account) stays where it is; in
+		* the VibeDev app, whose account entry already is the VibeDev account, this
+		* shows nothing.
+		*/
+		const trigger = {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			width: "100%",
+			minHeight: 32,
+			padding: "0 10px",
+			border: "none",
+			borderRadius: 8,
+			background: "transparent",
+			cursor: "pointer",
+			textAlign: "left",
+			fontSize: 13,
+			lineHeight: 1.4,
+			color: "var(--dsw-alias-label-secondary)"
+		};
+		const railTrigger = {
+			...trigger,
+			justifyContent: "center",
+			padding: 0
+		};
+		const label = {
+			minWidth: 0,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		};
+		/**
+		* The status entry.
+		* @param props - the dictionary, the shared account store, and whether the sidebar is wide.
+		* @returns the entry, or nothing until the account is known and inside the VibeDev app.
+		*/
+		function SidebarAccount({ t, store, wide }) {
+			const state = (0, react.useSyncExternalStore)(store.subscribe, store.getSnapshot);
+			const [open, setOpen] = (0, react.useState)(false);
+			const view = state.view;
+			if (view === void 0 || view.source === "host") return null;
+			const signedIn = view.source === "plugin" || view.source === "key";
+			const pending = !signedIn && view.pending !== void 0;
+			const text = pending ? t("sidebarPending") : signedIn ? t("sidebarSignedIn") : t("sidebarSignedOut");
+			const who = displayName(view);
+			const balance = balanceText(view);
+			const items = signedIn ? [
+				{
+					type: "label",
+					id: "who",
+					text: who === void 0 ? t("signedInPlugin") : fill(t("signedInAs"), { who })
+				},
+				...balance === void 0 ? [] : [{
+					type: "label",
+					id: "balance",
+					text: fill(t("balance"), { amount: balance })
+				}],
+				{
+					type: "separator",
+					id: "separator"
+				},
+				{
+					id: "top-up",
+					label: t("topUp")
+				},
+				{
+					id: "usage",
+					label: t("usage")
+				},
+				...view.source === "plugin" ? [{
+					id: "sign-out",
+					label: t("signOut"),
+					danger: true,
+					disabled: state.busy !== void 0
+				}] : []
+			] : pending ? [
+				{
+					type: "label",
+					id: "pending",
+					text: t("pendingStatus")
+				},
+				{
+					id: "open-pending",
+					label: t("pendingLink")
+				},
+				{
+					id: "cancel",
+					label: t("cancelSignIn")
+				}
+			] : [
+				{
+					type: "label",
+					id: "intro",
+					text: t("sidebarIntro")
+				},
+				{
+					id: "sign-in",
+					label: t("signIn"),
+					disabled: state.busy !== void 0
+				},
+				{
+					id: "register",
+					label: `${t("registerHint")} ${t("registerLink")}`
+				}
+			];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Menu, {
+				open,
+				side: "top",
+				align: "start",
+				portal: true,
+				autoFocus: true,
+				anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					style: wide ? trigger : railTrigger,
+					"aria-label": wide ? void 0 : text,
+					title: wide ? void 0 : text,
+					"aria-haspopup": "menu",
+					"aria-expanded": open,
+					"data-dsh-vibedev-sidebar": true,
+					onClick: () => {
+						setOpen((value) => !value);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+						state: statusDot(state),
+						size: 8
+					}), wide ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: label,
+						children: text
+					}) : null]
+				}),
+				items,
+				onClose: () => {
+					setOpen(false);
+				},
+				onSelect: (id) => {
+					setOpen(false);
+					if (id === "sign-in") store.signIn();
+					else if (id === "sign-out") store.signOut();
+					else if (id === "cancel") store.cancel();
+					else if (id === "open-pending") store.openPending();
+					else if (id === "top-up") store.openLink(view.links.topUp);
+					else if (id === "usage") store.openLink(view.links.usage);
+					else if (id === "register") store.openLink(view.links.register);
+				}
+			});
+		}
+		//#endregion
+		//#region src/client/index.ts
+		/**
+		* dsh-vibedev browser half:
+		*
+		* - Settings → VibeDev 账号 (`settings.section`): sign in to VibeDev, who is
+		*   signed in, the balance, the VibeDev models in the pickers, top up, sign out;
+		* - the sidebar foot's VibeDev status (`sidebar.footer.action`), or, where the
+		*   VibeDev account is the app's main account (the VibeDev app), the account row
+		*   at the very foot (`settings.launcher`) and the first Settings section;
+		* - the plugin's settings page on the Plugins page (`plugins.bundle.config`,
+		*   under the bundle's package name, while the Host serves the plugin's
+		*   settings namespace), edited through the shared configuration form.
+		*
+		* The section and the sidebar share one account store, which reads the Host's
+		* `/api/dsh-vibedev/account` route. The DeepSeek account keeps the Harness's
+		* own section and sidebar entry; nothing here touches it.
+		*
+		* Built by tsdown into the `__ModuleLoader__` factory bundle at
+		* client/client.js; React and the client primitives come from the Host's
+		* module table. The Host surfaces used here are typed structurally, so this
+		* external package depends on no monorepo-internal types.
+		*/
+		/** The package name the Plugins page keys a bundle's configuration by. */
+		const PACKAGE_NAME = "@vibedev-si/dsh-vibedev";
+		/** The dictionary namespace this plugin owns. */
+		const LOCALE_NAMESPACE = "dsh-vibedev";
+		/** The name the model pickers show for the VibeDev models (the Host config's default `displayName`). */
+		const ROUTE_NAME = "VibeDev";
+		/** Where the section sits in Settings: after the DeepSeek account (-10), before General (0). */
+		const SECTION_ORDER = -5;
+		/** As the app's main account: before the DeepSeek account's section, so Settings opens on it. */
+		const PRIMARY_SECTION_ORDER = -20;
+		/** Below the default the DeepSeek account launcher registers with, so this row is the one the foot shows. */
+		const LAUNCHER_PRIORITY = -1;
+		const disposer = (value) => typeof value === "function" ? value : () => {};
+		const name = "dsh-vibedev";
+		const inject = ["slots", "locale"];
+		/**
+		* The browser's own ways to open a page and to hear the window come back.
+		* @returns the store options for this window.
+		*/
+		function windowOptions() {
+			return {
+				openWindow: (url) => {
+					window.open(url, "_blank", "noopener,noreferrer");
+				},
+				onFocus: (listener) => {
+					window.addEventListener("focus", listener);
+					return () => {
+						window.removeEventListener("focus", listener);
+					};
+				}
+			};
+		}
+		/**
+		* Register the account section, the sidebar status and the settings page.
+		* @param ctx - the browser plugin context.
+		*/
+		function apply(ctx) {
+			ctx.effect(() => ctx.locale.register(LOCALE_NAMESPACE, {
+				zh,
+				en
+			}), "dsh-vibedev: dictionaries");
+			const t = ctx.locale.bind(LOCALE_NAMESPACE);
+			const account = new AccountStore(windowOptions());
+			ctx.effect(() => account.start(), "dsh-vibedev: account reads");
+			const section = (order) => disposer(ctx.slots.inject("settings.section", () => ctx.slots.register({
+				name: "settings.section",
+				id: "vibedev-account",
+				order,
+				label: () => t("accountNav"),
+				locale: LOCALE_NAMESPACE
+			}, () => (0, react.createElement)(AccountSection, {
+				t,
+				store: account,
+				routeName: ROUTE_NAME
+			}))));
+			const launcher = () => disposer(ctx.slots.inject("settings.launcher", () => ctx.slots.register({
+				name: "settings.launcher",
+				priority: LAUNCHER_PRIORITY,
+				locale: LOCALE_NAMESPACE
+			}, (owner = {}) => (0, react.createElement)(PrimaryLauncher, {
+				t,
+				store: account,
+				owner
+			}))));
+			const status = () => disposer(ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register({
+				name: "sidebar.footer.action",
+				id: "vibedev-account",
+				locale: LOCALE_NAMESPACE
+			}, (owner = {}) => (0, react.createElement)(SidebarAccount, {
+				t,
+				store: account,
+				wide: owner.wide !== false
+			}))));
+			ctx.effect(() => {
+				let placed;
+				const place = () => {
+					const { view, loadFailed } = account.getSnapshot();
+					if (placed !== void 0 || view === void 0 && !loadFailed) return;
+					placed = view?.primary === true ? [section(PRIMARY_SECTION_ORDER), launcher()] : [section(SECTION_ORDER), status()];
+				};
+				const unsubscribe = account.subscribe(place);
+				place();
+				return () => {
+					unsubscribe();
+					for (const off of placed ?? []) off();
+				};
+			}, "dsh-vibedev: account placement");
+			ctx.inject(["configForms"], (scoped) => {
+				scoped.effect(() => scoped.configForms.whileServed([SETTINGS_NAMESPACE], () => {
+					const scope = scoped.configForms.get(SETTINGS_NAMESPACE);
+					const model = new _deepseek_ai_dsh_client_ui_primitives.SettingsFormModel(scope, fieldSpecs());
+					const store = model.bind(() => ({
+						status: scope.getSnapshot().status,
+						shell: model.shell(),
+						fields: Object.fromEntries(FIELDS.map((field) => [field, model.field(field)]))
+					}));
+					const actions = model.actions();
+					const off = scoped.slots.inject("plugins.bundle.config", () => scoped.slots.register({
+						name: "plugins.bundle.config",
+						key: PACKAGE_NAME,
+						locale: LOCALE_NAMESPACE,
+						inject: () => ({ t })
+					}, (owner = {}) => owner.view === "summary" ? null : (0, react.createElement)(MediaSettingsPage, {
+						t,
+						store,
+						actions
+					})));
+					let section;
+					const placeSection = () => {
+						if (section !== void 0 || account.getSnapshot().view?.primary !== true) return;
+						section = disposer(scoped.slots.inject("settings.section", () => scoped.slots.register({
+							name: "settings.section",
+							id: "vibedev-media",
+							order: -19,
+							label: () => t("mediaNav"),
+							locale: LOCALE_NAMESPACE
+						}, () => (0, react.createElement)(MediaSettingsPage, {
+							t,
+							store,
+							actions
+						}))));
+					};
+					const unsubscribe = account.subscribe(placeSection);
+					placeSection();
+					return () => {
+						unsubscribe();
+						section?.();
+						disposer(off)();
+						model.dispose();
+					};
+				}), "dsh-vibedev: settings page");
+			});
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		exports.name = name;
+		return module.exports;
+	}
+});