dsh-width-tiers 2.0.1 → 2.0.2

package/README.md

@@ -28,14 +28,15 @@
 Fixed and custom widths are clamped by the app to
 `max(640px, column − 176px)`; the standard tier follows the app default
 (680–920px). On a narrow window a wider fixed tier therefore behaves like
-`full`.
+`full`, and the menu shows the reachable maximum for fixed tiers (1280px
+reads 640px on an 800px column).
 
 ## Features
 
 - Uses the app's native width axis (`--dsh-chat-user-width` and
   `dsh.conversation.contentWidth`), so the built-in drag handles keep working.
 - Persists the selected tier and restores it on the next visit.
-- Follows **Settings → Language** (中文 / English / 日本語 / Español / Français / Deutsch / Русский / Português).
+- Follows **Settings → Language** (中文 / English / 日本語 / Español / Français / Deutsch / Русский / Português), including the Settings plugin card's title and summary (`locale/<lang>.json`).
 - Menu supports ArrowUp/Down, Home/End, Escape and Tab, with focus restoration.
 - Tier changes sync across tabs.
 - Respects `prefers-reduced-motion`.
@@ -86,8 +87,10 @@ dsh plugin --profile web add link:/path/to/dsh-width-tiers
 ## Compatibility
 
 - DSH Web 0.2.x with a `web` profile (`shell.overlay` slot and `slots` service).
-- Width axis checked against DSH 0.2.1-rc.2: 640px floor, 176px handle budget,
-  `--dsh-chat-*` variables, `data-width-handle`, layout/locale services.
+- Width axis checked against DSH 0.2.2-alpha.3: 640px floor, 176px handle
+  budget, `--dsh-chat-*` variables, `data-width-handle`, layout/locale services.
+- Narrow screens: the picker hides while alpha.3's sidebar drawer
+  (`data-sidebar-drawer`) is open and follows the on-screen keyboard.
 
 ## Development
 

package/README.zh.md

@@ -26,14 +26,16 @@
 | 自定义 | 原生拖拽记录的宽度 | 不动 |
 
 固定档和自定义宽度会被应用钳制到 `max(640px, 列宽 − 176px)`；标准档
-使用应用默认的 680–920px。窄窗口下较宽的固定档等同「全宽」。
+使用应用默认的 680–920px。窄窗口下较宽的固定档等同「全宽」，菜单中的
+固定档数值也按可达上限显示（例如 800px 列宽下「宽」显示 640px）。
 
 ## 特性
 
 - 走应用原生宽度通道（`--dsh-chat-user-width` 与
   `dsh.conversation.contentWidth`），自带拖拽手柄始终可用。
 - 记住当前档位，下次打开自动恢复。
-- 跟随 **设置 → 语言**（中文 / English / 日本語 / Español / Français / Deutsch / Русский / Português）。
+- 跟随 **设置 → 语言**（中文 / English / 日本語 / Español / Français / Deutsch / Русский / Português），
+  包括设置页插件卡片的标题与简介（`locale/<lang>.json`）。
 - 菜单支持方向键、Home/End、Esc、Tab，并恢复焦点。
 - 档位选择跨标签页同步。
 - 支持 `prefers-reduced-motion`。
@@ -77,8 +79,10 @@ dsh plugin --profile web add link:/path/to/dsh-width-tiers
 ## 兼容性
 
 - DSH Web 0.2.x，带 `web` profile（`shell.overlay` 插槽与 `slots` 服务）。
-- 宽度轴已按 DSH 0.2.1-rc.2 对照：640px 下限、176px 手柄预留、
+- 宽度轴已按 DSH 0.2.2-alpha.3 对照：640px 下限、176px 手柄预留、
   `--dsh-chat-*` 变量、`data-width-handle`、layout/locale 服务。
+- 窄屏适配 alpha.3 的侧栏抽屉（`data-sidebar-drawer`）：抽屉打开时隐藏
+  选择器；软键盘弹出时按钮与菜单随之上移。
 
 ## 开发
 

package/lib/client.js

@@ -30,6 +30,8 @@ window.__ModuleLoader__.load({
 		const TIER_ATTR = "data-dsh-width";
 		/** Attribute the plugin sets on <body> while the custom-drag guide is open. */
 		const GUIDE_ATTR = "data-dsh-width-guide";
+		/** Body custom property carrying the on-screen-keyboard inset (px). */
+		const KEYBOARD_INSET_VAR = "--dsh-width-keyboard-inset";
 		// src/client/model.ts
 		const TIERS = [
 			{
@@ -151,8 +153,8 @@ window.__ModuleLoader__.load({
 		* dark palettes; every selector is scoped to this plugin's own ids and classes.
 		*/
 		const css = [
-			"#dsh-wide-toggle{position:fixed;right:10px;bottom:216px;z-index:999;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--dsw-alias-border-l2);border-radius:50%;overflow:hidden;background:var(--dsw-alias-button-floating-fill);color:var(--dsw-alias-label-secondary);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;opacity:.72;transition:opacity .2s ease,width .2s ease,border-radius .2s ease,background .2s ease,color .2s ease}",
-			"#dsh-wide-toggle::after{content:'';position:fixed;right:10px;bottom:216px;width:36px;height:36px;pointer-events:auto}",
+			"#dsh-wide-toggle{position:fixed;right:10px;bottom:calc(216px + var(--dsh-width-keyboard-inset,0px) + env(safe-area-inset-bottom,0px));z-index:999;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--dsw-alias-border-l2);border-radius:50%;overflow:hidden;background:var(--dsw-alias-button-floating-fill);color:var(--dsw-alias-label-secondary);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;opacity:.72;transition:opacity .2s ease,width .2s ease,border-radius .2s ease,background .2s ease,color .2s ease}",
+			"#dsh-wide-toggle::after{content:'';position:fixed;right:10px;bottom:calc(216px + var(--dsh-width-keyboard-inset,0px) + env(safe-area-inset-bottom,0px));width:36px;height:36px;pointer-events:auto}",
 			"#dsh-wide-toggle:hover{opacity:1}",
 			"#dsh-wide-toggle:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px;width:36px;border-radius:50%}",
 			"#dsh-wide-toggle:not(:hover):not(:focus-visible){width:10px;border-radius:6px}",
@@ -161,9 +163,9 @@ window.__ModuleLoader__.load({
 			"#dsh-wide-toggle.pulse{animation:dsh-wide-pulse .65s ease-out}",
 			"@media (prefers-reduced-motion:reduce){#dsh-wide-toggle{transition:none}#dsh-wide-toggle.pulse{animation:none}}",
 			"@keyframes dsh-wide-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--dsw-alias-state-business-primary) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}",
-			"#dsh-width-menu{position:fixed;right:20px;bottom:264px;z-index:1000;min-width:196px;padding:6px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-specific-menu);box-shadow:0 8px 28px rgba(0,0,0,.24);display:flex;flex-direction:column;gap:2px}",
+			"#dsh-width-menu{position:fixed;right:20px;bottom:calc(264px + var(--dsh-width-keyboard-inset,0px) + env(safe-area-inset-bottom,0px));z-index:1000;min-width:196px;max-height:calc(100vh - 280px);max-height:calc(100dvh - 280px);overflow-y:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-specific-menu);box-shadow:0 8px 28px rgba(0,0,0,.24);display:flex;flex-direction:column;gap:2px}",
 			"#dsh-width-menu[hidden]{display:none}",
-			"#dsh-width-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:none;border-radius:8px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}",
+			"#dsh-width-menu button{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:none;border-radius:8px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}",
 			"#dsh-width-menu button:hover{background:var(--dsw-alias-interactive-bg-hover)}",
 			"#dsh-width-menu button:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:-2px}",
 			"#dsh-width-menu button.selected{background:var(--dsw-alias-interactive-bg-hover-solid);color:var(--dsw-alias-state-business-primary)}",
@@ -174,7 +176,8 @@ window.__ModuleLoader__.load({
 			"#dsh-width-guide svg{flex:none;color:var(--dsw-alias-state-business-primary)}",
 			"#dsh-width-guide[data-mode=live]{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}",
 			"body[data-dsh-width-guide] [data-width-handle]{background:linear-gradient(to bottom,transparent calc(50% - 64px),color-mix(in srgb,var(--dsw-alias-state-business-primary) 18%,transparent) calc(50% - 64px),color-mix(in srgb,var(--dsw-alias-state-business-primary) 18%,transparent) calc(50% + 64px),transparent calc(50% + 64px));border-radius:3px}",
-			"body[data-dsh-width-guide] [data-width-handle]::after{opacity:1}"
+			"body[data-dsh-width-guide] [data-width-handle]::after{opacity:1}",
+			"body:has([data-sidebar-drawer]:not([data-sidebar-collapsed])) #dsh-wide-toggle,body:has([data-sidebar-drawer]:not([data-sidebar-collapsed])) #dsh-width-menu,body:has([data-sidebar-drawer]:not([data-sidebar-collapsed])) #dsh-width-guide{opacity:0;visibility:hidden;pointer-events:none}"
 		].join("");
 		/**
 		* Install the plugin stylesheet and return its removal disposer.
@@ -324,6 +327,15 @@ window.__ModuleLoader__.load({
 			let guideHideTimer = null;
 			let guideWidth = GUIDE_WIDTH_PX;
 			let tierBeforeGuide = "standard";
+			let keyboardInset = 0;
+			function syncKeyboardInset() {
+				const viewport = window.visualViewport;
+				const next = viewport == null ? 0 : Math.max(0, Math.round(window.innerHeight - viewport.height - viewport.offsetTop));
+				keyboardInset = next;
+				if (next > 0) body().style.setProperty(KEYBOARD_INSET_VAR, `${next}px`);
+				else body().style.removeProperty(KEYBOARD_INSET_VAR);
+				if (guideActive) updateGuideStyle();
+			}
 			let preferenceOwned = false;
 			let preferenceWritten = null;
 			let collapsedByTier = false;
@@ -364,7 +376,12 @@ window.__ModuleLoader__.load({
 					}
 					case "medium":
 					case "wide":
-					case "ultra": return `${NOMINAL_WIDTH_PX[tierId]}px`;
+					case "ultra": {
+						const nominal = NOMINAL_WIDTH_PX[tierId];
+						const root = roots.find();
+						if (root === null || root.offsetWidth <= 0) return `${nominal}px`;
+						return `${Math.round(Math.min(nominal, fullWidthPx(root.offsetWidth)))}px`;
+					}
 					case "full": {
 						const root = roots.find();
 						if (root === null) return "—";
@@ -478,13 +495,22 @@ window.__ModuleLoader__.load({
 				pulseSeq += 1;
 				emit();
 			}
+			function fallbackGuideStyle() {
+				if (keyboardInset <= 0) return GUIDE_FALLBACK;
+				return {
+					left: "auto",
+					right: "24px",
+					top: `${Math.max(24, Math.round((window.innerHeight - keyboardInset) / 2))}px`
+				};
+			}
 			function computeGuideStyle() {
 				const handle = guideHandle !== null && document.contains(guideHandle) ? guideHandle : document.querySelector("[data-width-handle=\"right\"]");
 				const viewport = window.innerWidth || 0;
-				if (handle === null || typeof handle.getBoundingClientRect !== "function" || viewport === 0) return GUIDE_FALLBACK;
+				if (handle === null || typeof handle.getBoundingClientRect !== "function" || viewport === 0) return fallbackGuideStyle();
 				const rect = handle.getBoundingClientRect();
 				const gap = 10;
-				const top = `${rect.top + rect.height / 2}px`;
+				const visibleBottom = (window.innerHeight || 0) - keyboardInset;
+				const top = `${Math.max(8, Math.min(rect.top + rect.height / 2, visibleBottom - 24))}px`;
 				if (viewport - rect.right >= guideWidth + gap) return {
 					left: `${rect.right + gap}px`,
 					right: "auto",
@@ -801,6 +827,12 @@ window.__ModuleLoader__.load({
 				});
 			};
 			window.addEventListener("resize", onWindowResize);
+			const visualViewport = window.visualViewport ?? null;
+			if (visualViewport !== null) {
+				visualViewport.addEventListener("resize", syncKeyboardInset);
+				visualViewport.addEventListener("scroll", syncKeyboardInset);
+			}
+			syncKeyboardInset();
 			snapshot = buildSnapshot();
 			const unsubscribeLocale = options.locale.subscribe(() => {
 				if (guideActive && !guideDragging && guideMode === "hint") guideText = t("guide.hint");
@@ -849,6 +881,11 @@ window.__ModuleLoader__.load({
 					window.removeEventListener("resize", onWindowResize);
 					window.removeEventListener("load", attach);
 					window.removeEventListener("storage", onStorage);
+					if (visualViewport !== null) {
+						visualViewport.removeEventListener("resize", syncKeyboardInset);
+						visualViewport.removeEventListener("scroll", syncKeyboardInset);
+					}
+					body().style.removeProperty(KEYBOARD_INSET_VAR);
 					if (observer !== null) observer.disconnect();
 					document.removeEventListener("pointerdown", onHandlePointerDown, true);
 					document.removeEventListener("pointerup", onHandlePointerUp, true);

package/locale/de.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Breitenstufen (dsh-width-tiers)",
+    "description": "Breitenstufen für Chat-Inhalte (Standard / Mittel / Breit / Sehr breit / Volle Breite / Benutzerdefiniert) mit schwebender Auswahl; nutzt die native Breitenachse der App, sodass die integrierten Ziehpunkte weiter funktionieren."
+  }
+}

package/locale/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Width tiers (dsh-width-tiers)",
+    "description": "Chat content width tiers (standard / medium / wide / ultra / full / custom) with a floating picker; drives the app's native width axis so the built-in drag handles keep working."
+  }
+}

package/locale/es.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Niveles de ancho (dsh-width-tiers)",
+    "description": "Niveles de ancho del contenido del chat (estándar / medio / ancho / muy ancho / completo / personalizado) con un selector flotante; usa el eje de ancho nativo de la app, así que los tiradores de arrastre integrados siguen funcionando."
+  }
+}

package/locale/fr.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Paliers de largeur (dsh-width-tiers)",
+    "description": "Paliers de largeur du contenu du chat (standard / moyen / large / très large / pleine largeur / personnalisé) avec un sélecteur flottant ; s'appuie sur l'axe de largeur natif de l'application, donc les poignées de redimensionnement intégrées restent utilisables."
+  }
+}

package/locale/ja.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "会話幅のプリセット (dsh-width-tiers)",
+    "description": "会話内容の幅プリセット（標準 / 中 / ワイド / ウルトラワイド / 全幅 / カスタム）。フローティングの選択ボタンから切り替え、アプリ本来の幅軸を操作するため内蔵のドラッグハンドルもそのまま使えます。"
+  }
+}

package/locale/pt.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Níveis de largura (dsh-width-tiers)",
+    "description": "Níveis de largura do conteúdo do chat (padrão / médio / largo / muito largo / largura total / personalizado) com um seletor flutuante; usa o eixo de largura nativo do app, então as alças de redimensionamento integradas continuam funcionando."
+  }
+}

package/locale/ru.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Уровни ширины (dsh-width-tiers)",
+    "description": "Уровни ширины содержимого чата (стандартная / средняя / широкая / очень широкая / на всю ширину / своя) с плавающим переключателем; использует нативную ось ширины приложения, поэтому встроенные маркеры изменения ширины продолжают работать."
+  }
+}

package/locale/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "宽度档位 (dsh-width-tiers)",
+    "description": "聊天内容宽度档位（标准 / 中等 / 宽 / 超宽 / 全宽 / 自定义），带浮动选择按钮；直接驱动应用原生宽度轴，内置拖拽手柄保持可用。"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-width-tiers",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "DSH Web client plugin: chat content width tiers (standard / medium / wide / ultra / full / custom) with a floating picker button. Mounts into the app's shell.overlay slot on DSH 0.2.x and drives the native width axis, so the built-in drag handles keep working. UI copy follows the app language (zh / en / ja / es / fr / de / ru / pt).",
   "license": "MIT",
   "author": "aaronlei",
@@ -12,10 +12,12 @@
   "exports": {
     ".": "./lib/index.js",
     "./client": "./lib/client.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./locale/*.json": "./locale/*.json"
   },
   "files": [
     "lib",
+    "locale",
     "cordis.patch.yml",
     "LICENSE",
     "README.md",