@jingyi0605/codingns4dsh 0.2.1-beta.11 → 0.2.1-beta.13

package/data/build/dist/client/client.react-dom.js

@@ -5,6 +5,148 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		const require_rolldown_runtime = require("@jingyi0605/codingns4dsh/client.rolldown-runtime.js");
+		const require_theme = require("@jingyi0605/codingns4dsh/client.theme.js");
+		let react = require("react");
+		//#region src/client/settings-controls.ts
+		const settingsControlClass = {
+			switch: "codingns4dsh-settings-switch",
+			track: "codingns4dsh-settings-switch-track",
+			thumb: "codingns4dsh-settings-switch-thumb",
+			iconButton: "codingns4dsh-settings-icon-button"
+		};
+		/** 模块使用主开关，子设置使用更小、更轻的开关；保留 checkbox 的标签与键盘语义。 */
+		function SettingsSwitch(props) {
+			(0, react.useEffect)(() => retainSettingsControlStyles(), []);
+			const { variant = "setting", ...inputProps } = props;
+			const width = variant === "module" ? 36 : 28;
+			return (0, react.createElement)("span", {
+				className: settingsControlClass.switch,
+				"data-variant": variant,
+				style: {
+					position: "relative",
+					display: "inline-flex",
+					alignItems: "center",
+					flex: `0 0 ${width}px`,
+					width,
+					height: 28,
+					marginLeft: "auto"
+				}
+			}, (0, react.createElement)("input", {
+				type: "checkbox",
+				role: "switch",
+				...inputProps,
+				style: {
+					position: "absolute",
+					inset: 0,
+					width: "100%",
+					height: "100%",
+					margin: 0,
+					opacity: 0,
+					cursor: props.disabled ? "not-allowed" : "pointer",
+					zIndex: 1
+				}
+			}), (0, react.createElement)("span", {
+				className: settingsControlClass.track,
+				"aria-hidden": true
+			}, (0, react.createElement)("span", { className: settingsControlClass.thumb })));
+		}
+		/** 文案占据剩余宽度；右侧操作不收缩，长说明和窄屏都不会移动开关。 */
+		function SettingsToggleRow({ label, description, checked, disabled, onChange, actions, style }) {
+			const id = (0, react.useId)();
+			return (0, react.createElement)("div", { style: {
+				...require_theme.dshSettingsListRowStyle,
+				...style
+			} }, (0, react.createElement)("label", {
+				htmlFor: id,
+				style: {
+					flex: "1 1 auto",
+					minWidth: 0,
+					cursor: disabled ? "not-allowed" : "pointer",
+					overflowWrap: "anywhere"
+				}
+			}, (0, react.createElement)("span", { style: {
+				display: "block",
+				fontSize: require_theme.uiFontSize(13),
+				fontWeight: 500,
+				lineHeight: 1.4
+			} }, label), description === void 0 ? null : (0, react.createElement)("span", { style: {
+				display: "block",
+				marginTop: 3,
+				...require_theme.dshSettingsHelpStyle
+			} }, description)), (0, react.createElement)("span", { style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: 10,
+				flex: "0 0 auto",
+				marginLeft: "auto"
+			} }, actions, (0, react.createElement)(SettingsSwitch, {
+				id,
+				"aria-label": label,
+				checked,
+				disabled,
+				onChange: (event) => onChange(event.currentTarget.checked)
+			})));
+		}
+		/** 图标按钮采用 DSH 的紧凑中性表面，交互态由共享样式表提供。 */
+		const settingsIconButtonStyle = {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flex: "0 0 32px",
+			width: 32,
+			height: 32,
+			padding: 0,
+			boxSizing: "border-box",
+			border: 0,
+			borderRadius: "var(--dsw-radius-sm, 6px)",
+			color: require_theme.dshThemeColor.labelSecondary,
+			background: "transparent",
+			cursor: "pointer"
+		};
+		/** 各独立面板共享一份样式，最后一个开关卸载时释放，兼容 React 严格模式的重复挂载。 */
+		const retainedStyles = /* @__PURE__ */ new WeakMap();
+		function retainSettingsControlStyles() {
+			if (typeof document === "undefined") return () => void 0;
+			const dom = document;
+			let state = retainedStyles.get(dom);
+			if (state === void 0) {
+				const element = dom.createElement("style");
+				element.dataset.plugin = "codingns4dsh";
+				element.dataset.pluginCss = "codingns4dsh-settings-controls";
+				element.textContent = settingsControlCss;
+				dom.head.appendChild(element);
+				state = {
+					element,
+					users: 0
+				};
+				retainedStyles.set(dom, state);
+			}
+			const retained = state;
+			retained.users += 1;
+			return () => {
+				retained.users -= 1;
+				if (retained.users > 0) return;
+				retained.element.remove();
+				retainedStyles.delete(dom);
+			};
+		}
+		const settingsControlCss = `
+.${settingsControlClass.switch}{--codingns-switch-height:16px;--codingns-switch-thumb:12px;--codingns-switch-travel:12px;--codingns-switch-active:var(--dsw-alias-button-info-fill);--codingns-switch-active-thumb:var(--dsw-static-neutral-00)}
+.${settingsControlClass.switch}[data-variant="module"]{--codingns-switch-height:20px;--codingns-switch-thumb:16px;--codingns-switch-travel:16px;--codingns-switch-active:var(--dsw-alias-brand-primary);--codingns-switch-active-thumb:var(--dsw-alias-label-primary-foreground)}
+.${settingsControlClass.track}{box-sizing:border-box;display:block;width:100%;height:var(--codingns-switch-height);padding:2px;border:0;border-radius:999px;corner-shape:round;background:var(--dsw-alias-border-l3);pointer-events:none;transition:background 120ms ease}
+.${settingsControlClass.thumb}{display:block;width:var(--codingns-switch-thumb);height:var(--codingns-switch-thumb);border-radius:50%;corner-shape:round;background:var(--dsw-alias-switch-thumb);transition:transform 120ms ease,background 120ms ease}
+.${settingsControlClass.switch}>input:checked+.${settingsControlClass.track}{background:var(--codingns-switch-active)}
+.${settingsControlClass.switch}>input:checked+.${settingsControlClass.track}>.${settingsControlClass.thumb}{background:var(--codingns-switch-active-thumb);transform:translateX(var(--codingns-switch-travel))}
+.${settingsControlClass.switch}>input:disabled+.${settingsControlClass.track}{opacity:.5}
+.${settingsControlClass.switch}>input:disabled{cursor:not-allowed!important}
+.${settingsControlClass.switch}>input:focus-visible+.${settingsControlClass.track}{outline:${require_theme.dshThemeColor.focusRing};outline-offset:3px}
+.${settingsControlClass.iconButton}:hover:not(:disabled){color:${require_theme.dshThemeColor.labelPrimary};background:${require_theme.dshThemeColor.hoverBackground}}
+.${settingsControlClass.iconButton}:active:not(:disabled){background:${require_theme.dshThemeColor.activeBackground}}
+.${settingsControlClass.iconButton}:focus-visible{outline:${require_theme.dshThemeColor.focusRing};outline-offset:2px}
+.${settingsControlClass.iconButton}:disabled{opacity:.5;cursor:not-allowed}
+@media (prefers-reduced-motion:reduce){.${settingsControlClass.track},.${settingsControlClass.thumb}{transition:none}}
+`;
+		//#endregion
 		//#region node_modules/.pnpm/scheduler@0.23.2/node_modules/scheduler/cjs/scheduler.production.min.js
 		/**
 		* @license React
@@ -6953,12 +7095,36 @@ window.__ModuleLoader__.load({
 			module.exports = require_react_dom_production_min();
 		}));
 		//#endregion
+		Object.defineProperty(exports, "SettingsSwitch", {
+			enumerable: true,
+			get: function() {
+				return SettingsSwitch;
+			}
+		});
+		Object.defineProperty(exports, "SettingsToggleRow", {
+			enumerable: true,
+			get: function() {
+				return SettingsToggleRow;
+			}
+		});
 		Object.defineProperty(exports, "require_react_dom", {
 			enumerable: true,
 			get: function() {
 				return require_react_dom;
 			}
 		});
+		Object.defineProperty(exports, "settingsControlClass", {
+			enumerable: true,
+			get: function() {
+				return settingsControlClass;
+			}
+		});
+		Object.defineProperty(exports, "settingsIconButtonStyle", {
+			enumerable: true,
+			get: function() {
+				return settingsIconButtonStyle;
+			}
+		});
 		return module.exports;
 	}
 });