dsh-qr-share 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -7,6 +7,58 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0] — 2026-08-30
+
+### Added
+
+- **Test infrastructure** — vitest 2 + @testing-library/react, configured
+  for happy-dom. `pnpm test` runs 27 specs covering `config`,
+  `client/api` and `client/QrDialog`. `tsconfig.build.json` now
+  excludes `src/**/*.test.ts(x)` and `src/test/**` so the tests never
+  reach the published `.d.ts` output.
+- **Ambient CSS module declaration** — `src/client/styles.module.css.d.ts`
+  gives `tsc` the default-export shape that `lightningcss` produces at
+  build time, unblocking `import styles from './styles.module.css'`
+  in `QrButton.tsx` and `QrDialog.tsx` without weakening the type
+  checker.
+
+### Changed
+
+- **Dialog now renders into `document.body` via `createPortal`** —
+  the sidebar's `transform`/`filter` would otherwise trap
+  `position: fixed` inside the sidebar's box; portalling escapes every
+  ancestor's containing block so the backdrop covers the viewport and
+  the dialog is centered on screen.
+- **Dialog surface is theme-aware and fully opaque** — background
+  resolves to the DSH shell's `--dsw-alias-bg-layer-1` token (alpha = 1),
+  with a `currentColor 12%` hairline border and a soft shadow. A
+  `--dsh-qr-share-dialog-bg` override hook is exposed for power users.
+- **QR code canvas wrapped in a white card** — 8px padding + `#fff`
+  background guarantees the black modules stay scannable against
+  either light or dark DSH surface.
+- **Sidebar action is now a labeled icon** — wide mode renders both
+  the `HiOutlineQrCode` icon and the `button.label` text; rail mode
+  keeps the icon only.
+- **Copy localized** — `button.label` is now "分享" (zh) / "Share"
+  (en); `button.tooltip` and `dialog.title` were rewritten in the
+  same voice ("扫码把当前会话分享到手机" / "Scan to share"). The host
+  handshake's semantics are unchanged.
+
+### Fixed
+
+- **QR canvas was blank on first render** — the `useEffect` that
+  calls `qrcode.toCanvas` ran once before the portal-mounted `<canvas>`
+  was in the DOM. Adding `portalTarget` to the effect's dependency
+  list gives the canvas a second pass after the portal resolves.
+- **CSS Module class names were hardcoded** — `QrDialog.tsx` and
+  `QrButton.tsx` used the literal `'dsh-qr-share-backdrop'`
+  strings, but tsdown's `lightningcss` compiles them under the
+  `[hash]_[local]` pattern (`i2jIGq_backdrop`). The two forms never
+  matched, so the dialog had no styles at all and fell back to
+  `position: static`. Both files now consume the `styles.*` import
+  map; the bundle ships the hashed class names in the inline
+  `<style data-plugin>` tag.
+
 ## [0.1.0] — 2026-08-29
 
 ### Added

package/README.md

@@ -99,12 +99,24 @@ layout needs a symlink — see `manual` install below).
 ## Build
 
 ```bash
+# Recommended: pnpm (matches the project lockfile-less layout)
 pnpm install
 pnpm build       # tsc declarations + tsdown bundles
 pnpm typecheck   # strict check
 pnpm pack        # produce dsh-qr-share-<version>.tgz (used by the install commands above)
+
+# Also supported: npm (any Node >= 20, no extra install)
+npm install
+npm run build    # same tsc + tsdown pipeline
+npm run typecheck
+npm pack
 ```
 
+> For npm publishing we ship [`./npm_publish.sh`](npm_publish.sh) — a
+> single-file mirror of the [core_ts](https://github.com/xiaoguomeiyitian/core_ts)
+> release flow (`npm login` → `npm install` → `npm run build` →
+> `npm pack --dry-run` review → `npm publish --access public`).
+
 Outputs:
 
 - `lib/index.js` — Node host half (the `/_qr/share` route)

package/README.zh.md

@@ -74,12 +74,21 @@ pnpm add dsh-qr-share
 ## 构建
 
 ```bash
+# 推荐:pnpm(与项目无 lockfile 的设计一致)
 pnpm install
 pnpm build       # tsc 声明 + tsdown bundle
 pnpm typecheck   # 严格检查
 pnpm pack        # 产出 dsh-qr-share-<version>.tgz
+
+# 也支持:npm(任意 Node >= 20, 无需额外安装)
+npm install
+npm run build    # 同样的 tsc + tsdown 管线
+npm run typecheck
+npm pack
 ```
 
+> 发版用 [`./npm_publish.sh`](npm_publish.sh)——单文件脚本,照搬 [core_ts](https://github.com/xiaoguomeiyitian/core_ts) 的发布流程(`npm login` → `npm install` → `npm run build` → `npm pack --dry-run` 预检 → `npm publish --access public`)。
+
 产物：
 
 - `lib/index.js` — Node 宿主半（`/_qr/share` 路由）

package/lib/client-registry.js

@@ -29,7 +29,8 @@ window.__ModuleLoader__.load({
 		//#endregion
 		let react = require("react");
 		react = __toESM(react, 1);
-		//#region node_modules/.pnpm/react-icons@5.7.0_react@18.3.0/node_modules/react-icons/lib/iconContext.mjs
+		let react_dom = require("react-dom");
+		//#region node_modules/react-icons/lib/iconContext.mjs
 		var DefaultContext = {
 			color: void 0,
 			size: void 0,
@@ -39,7 +40,7 @@ window.__ModuleLoader__.load({
 		};
 		var IconContext = react.default.createContext && /*#__PURE__*/ react.default.createContext(DefaultContext);
 		//#endregion
-		//#region node_modules/.pnpm/react-icons@5.7.0_react@18.3.0/node_modules/react-icons/lib/iconBase.mjs
+		//#region node_modules/react-icons/lib/iconBase.mjs
 		var _excluded = [
 			"attr",
 			"size",
@@ -143,7 +144,7 @@ window.__ModuleLoader__.load({
 			return IconContext !== void 0 ? /*#__PURE__*/ react.default.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
 		}
 		//#endregion
-		//#region node_modules/.pnpm/react-icons@5.7.0_react@18.3.0/node_modules/react-icons/hi2/index.mjs
+		//#region node_modules/react-icons/hi2/index.mjs
 		function HiOutlineQrCode(props) {
 			return GenIcon({
 				"tag": "svg",
@@ -174,14 +175,14 @@ window.__ModuleLoader__.load({
 			})(props);
 		}
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/can-promise.js
+		//#region node_modules/qrcode/lib/can-promise.js
 		var require_can_promise = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			module.exports = function() {
 				return typeof Promise === "function" && Promise.prototype && Promise.prototype.then;
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/utils.js
+		//#region node_modules/qrcode/lib/core/utils.js
 		var require_utils$1 = /* @__PURE__ */ __commonJSMin(((exports) => {
 			let toSJISFunction;
 			const CODEWORDS_COUNT = [
@@ -273,7 +274,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/error-correction-level.js
+		//#region node_modules/qrcode/lib/core/error-correction-level.js
 		var require_error_correction_level = /* @__PURE__ */ __commonJSMin(((exports) => {
 			exports.L = { bit: 1 };
 			exports.M = { bit: 0 };
@@ -306,7 +307,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/bit-buffer.js
+		//#region node_modules/qrcode/lib/core/bit-buffer.js
 		var require_bit_buffer = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			function BitBuffer() {
 				this.buffer = [];
@@ -333,7 +334,7 @@ window.__ModuleLoader__.load({
 			module.exports = BitBuffer;
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/bit-matrix.js
+		//#region node_modules/qrcode/lib/core/bit-matrix.js
 		var require_bit_matrix = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			/**
 			* Helper class to handle QR Code symbol modules
@@ -394,7 +395,7 @@ window.__ModuleLoader__.load({
 			module.exports = BitMatrix;
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/alignment-pattern.js
+		//#region node_modules/qrcode/lib/core/alignment-pattern.js
 		var require_alignment_pattern = /* @__PURE__ */ __commonJSMin(((exports) => {
 			/**
 			* Alignment pattern are fixed reference pattern in defined positions
@@ -462,7 +463,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/finder-pattern.js
+		//#region node_modules/qrcode/lib/core/finder-pattern.js
 		var require_finder_pattern = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const getSymbolSize = require_utils$1().getSymbolSize;
 			const FINDER_PATTERN_SIZE = 7;
@@ -483,7 +484,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/mask-pattern.js
+		//#region node_modules/qrcode/lib/core/mask-pattern.js
 		var require_mask_pattern = /* @__PURE__ */ __commonJSMin(((exports) => {
 			/**
 			* Data mask pattern reference
@@ -674,7 +675,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/error-correction-code.js
+		//#region node_modules/qrcode/lib/core/error-correction-code.js
 		var require_error_correction_code = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const ECLevel = require_error_correction_level();
 			const EC_BLOCKS_TABLE = [
@@ -1037,7 +1038,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/galois-field.js
+		//#region node_modules/qrcode/lib/core/galois-field.js
 		var require_galois_field = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const EXP_TABLE = /* @__PURE__ */ new Uint8Array(512);
 			const LOG_TABLE = /* @__PURE__ */ new Uint8Array(256);
@@ -1083,7 +1084,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/polynomial.js
+		//#region node_modules/qrcode/lib/core/polynomial.js
 		var require_polynomial = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const GF = require_galois_field();
 			/**
@@ -1130,7 +1131,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/reed-solomon-encoder.js
+		//#region node_modules/qrcode/lib/core/reed-solomon-encoder.js
 		var require_reed_solomon_encoder = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			const Polynomial = require_polynomial();
 			function ReedSolomonEncoder(degree) {
@@ -1170,7 +1171,7 @@ window.__ModuleLoader__.load({
 			module.exports = ReedSolomonEncoder;
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/version-check.js
+		//#region node_modules/qrcode/lib/core/version-check.js
 		var require_version_check = /* @__PURE__ */ __commonJSMin(((exports) => {
 			/**
 			* Check if QR Code version is valid
@@ -1183,7 +1184,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/regex.js
+		//#region node_modules/qrcode/lib/core/regex.js
 		var require_regex = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const numeric = "[0-9]+";
 			const alphanumeric = "[A-Z $%*+\\-./:]+";
@@ -1209,7 +1210,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/mode.js
+		//#region node_modules/qrcode/lib/core/mode.js
 		var require_mode = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const VersionCheck = require_version_check();
 			const Regex = require_regex();
@@ -1366,7 +1367,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/version.js
+		//#region node_modules/qrcode/lib/core/version.js
 		var require_version = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const Utils = require_utils$1();
 			const ECCode = require_error_correction_code();
@@ -1463,7 +1464,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/format-info.js
+		//#region node_modules/qrcode/lib/core/format-info.js
 		var require_format_info = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const Utils = require_utils$1();
 			const G15 = 1335;
@@ -1487,7 +1488,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/numeric-data.js
+		//#region node_modules/qrcode/lib/core/numeric-data.js
 		var require_numeric_data = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			const Mode = require_mode();
 			function NumericData(data) {
@@ -1520,7 +1521,7 @@ window.__ModuleLoader__.load({
 			module.exports = NumericData;
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/alphanumeric-data.js
+		//#region node_modules/qrcode/lib/core/alphanumeric-data.js
 		var require_alphanumeric_data = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			const Mode = require_mode();
 			/**
@@ -1604,7 +1605,7 @@ window.__ModuleLoader__.load({
 			module.exports = AlphanumericData;
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/byte-data.js
+		//#region node_modules/qrcode/lib/core/byte-data.js
 		var require_byte_data = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			const Mode = require_mode();
 			function ByteData(data) {
@@ -1627,7 +1628,7 @@ window.__ModuleLoader__.load({
 			module.exports = ByteData;
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/kanji-data.js
+		//#region node_modules/qrcode/lib/core/kanji-data.js
 		var require_kanji_data = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			const Mode = require_mode();
 			const Utils = require_utils$1();
@@ -1658,7 +1659,7 @@ window.__ModuleLoader__.load({
 			module.exports = KanjiData;
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/dijkstrajs@1.0.3/node_modules/dijkstrajs/dijkstra.js
+		//#region node_modules/dijkstrajs/dijkstra.js
 		var require_dijkstra = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 			/******************************************************************************
 			* Created 2008-08-19.
@@ -1774,7 +1775,7 @@ window.__ModuleLoader__.load({
 			if (typeof module !== "undefined") module.exports = dijkstra;
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/segments.js
+		//#region node_modules/qrcode/lib/core/segments.js
 		var require_segments = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const Mode = require_mode();
 			const NumericData = require_numeric_data();
@@ -2053,7 +2054,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/core/qrcode.js
+		//#region node_modules/qrcode/lib/core/qrcode.js
 		var require_qrcode = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const Utils = require_utils$1();
 			const ECLevel = require_error_correction_level();
@@ -2349,7 +2350,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/renderer/utils.js
+		//#region node_modules/qrcode/lib/renderer/utils.js
 		var require_utils = /* @__PURE__ */ __commonJSMin(((exports) => {
 			function hex2rgba(hex) {
 				if (typeof hex === "number") hex = hex.toString();
@@ -2417,7 +2418,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/renderer/canvas.js
+		//#region node_modules/qrcode/lib/renderer/canvas.js
 		var require_canvas = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const Utils = require_utils();
 			function clearCanvas(ctx, canvas, size) {
@@ -2466,7 +2467,7 @@ window.__ModuleLoader__.load({
 			};
 		}));
 		//#endregion
-		//#region node_modules/.pnpm/qrcode@1.5.4/node_modules/qrcode/lib/renderer/svg-tag.js
+		//#region node_modules/qrcode/lib/renderer/svg-tag.js
 		var require_svg_tag = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const Utils = require_utils();
 			function getColorAttrib(color, attrib) {
@@ -2583,24 +2584,51 @@ window.__ModuleLoader__.load({
 		*/
 		const LOCALE_NS = "qr-share";
 		const zh = {
-			"button.label": "扫码登录",
-			"button.tooltip": "用手机扫码以同一账号登录",
-			"dialog.title": "用手机扫码登录",
+			"button.label": "分享",
+			"button.tooltip": "扫码把当前会话分享到手机",
+			"dialog.title": "扫码分享",
 			"dialog.hint": "用手机相机扫描下方二维码。手机打开后会自动以当前账号登录，token 与浏览器 cookie 同寿命。",
 			"dialog.urlLabel": "链接",
 			"dialog.close": "关闭",
 			"dialog.error": "二维码生成失败"
 		};
 		const en = {
-			"button.label": "Mobile Login",
-			"button.tooltip": "Scan with a phone to log in to this session",
-			"dialog.title": "Scan to log in on mobile",
+			"button.label": "Share",
+			"button.tooltip": "Scan to share this session with your phone",
+			"dialog.title": "Scan to share",
 			"dialog.hint": "Scan the QR code below with your phone camera. The phone will log in to this session; the token lives as long as the browser cookie.",
 			"dialog.urlLabel": "URL",
 			"dialog.close": "Close",
 			"dialog.error": "Failed to render QR code"
 		};
 		//#endregion
+		//#region \0dsh-css:/root/ai/dsh-qr-share/src/client/styles.module.css.mjs
+		const css = ".GjS9-q_button{width:100%;color:inherit;font:inherit;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;padding:8px 10px;display:inline-flex}.GjS9-q_button:hover{background:color-mix(in srgb, currentColor 8%, transparent)}.GjS9-q_button:focus-visible{outline-offset:-2px;outline:2px solid}.GjS9-q_buttonLabel{white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.GjS9-q_backdrop{z-index:9999;background:#00000073;place-items:center;animation:.12s ease-out GjS9-q_dsh-qr-share-fade-in;display:grid;position:fixed;inset:0}.GjS9-q_dialog{background:var(--dsh-qr-share-dialog-bg,var(--dsw-alias-bg-layer-1,var(--dsw-alias-bg-overlay,#2c2c2e)));color:var(--dsh-qr-share-dialog-fg,currentColor);border:1px solid color-mix(in srgb, currentColor 12%, transparent);border-radius:12px;flex-direction:column;align-items:center;gap:12px;min-width:320px;max-width:420px;padding:24px;animation:.16s cubic-bezier(.2,.9,.3,1.2) GjS9-q_dsh-qr-share-pop-in;display:flex;box-shadow:0 12px 32px #00000040}.GjS9-q_title{margin:0;font-size:16px;font-weight:600}.GjS9-q_canvas{image-rendering:pixelated;background:#fff;border-radius:8px;padding:8px;display:block}.GjS9-q_err{color:#d23f3f;margin:0;font-size:13px}.GjS9-q_urlBlock{flex-direction:column;align-items:center;gap:4px;width:100%;display:flex}.GjS9-q_urlLabel{text-transform:uppercase;letter-spacing:.05em;opacity:.6;font-size:11px}.GjS9-q_url{word-break:break-all;background:color-mix(in srgb, currentColor 6%, transparent);text-align:center;border-radius:4px;max-width:100%;padding:6px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}.GjS9-q_hint{opacity:.7;text-align:center;margin:0;font-size:12px}.GjS9-q_close{border:1px solid color-mix(in srgb, currentColor 20%, transparent);color:inherit;font:inherit;cursor:pointer;background:0 0;border-radius:6px;margin-top:4px;padding:8px 16px}.GjS9-q_close:hover{background:color-mix(in srgb, currentColor 8%, transparent)}.GjS9-q_close:focus-visible{outline-offset:-2px;outline:2px solid}@keyframes GjS9-q_dsh-qr-share-fade-in{0%{opacity:0}to{opacity:1}}@keyframes GjS9-q_dsh-qr-share-pop-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}";
+		const tagId = "dsh-external/dsh-qr-share/styles.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "dsh-external/dsh-qr-share";
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+		}
+		var styles_module_css_default = {
+			"title": "GjS9-q_title",
+			"urlBlock": "GjS9-q_urlBlock",
+			"buttonLabel": "GjS9-q_buttonLabel",
+			"err": "GjS9-q_err",
+			"urlLabel": "GjS9-q_urlLabel",
+			"url": "GjS9-q_url",
+			"hint": "GjS9-q_hint",
+			"backdrop": "GjS9-q_backdrop",
+			"dsh-qr-share-pop-in": "GjS9-q_dsh-qr-share-pop-in",
+			"close": "GjS9-q_close",
+			"dialog": "GjS9-q_dialog",
+			"dsh-qr-share-fade-in": "GjS9-q_dsh-qr-share-fade-in",
+			"button": "GjS9-q_button",
+			"canvas": "GjS9-q_canvas"
+		};
+		//#endregion
 		//#region src/client/QrDialog.tsx
 		/**
 		* QR-code modal: a fixed-position overlay with a canvas, the resolved URL
@@ -2613,6 +2641,13 @@ window.__ModuleLoader__.load({
 		* exchanges on path `/` (see browser-auth.ts). We enforce that here so a
 		* future reverse-proxy sub-path does NOT silently produce a 401 on the
 		* phone.
+		*
+		* Portal: the dialog is rendered into `document.body` via createPortal.
+		* The shell's sidebar uses transforms/filters on its ancestors, which
+		* would otherwise trap `position: fixed` inside the sidebar's box and
+		* make the dialog appear *inside* the sidebar column. Portaling escapes
+		* every ancestor's containing block so the backdrop covers the viewport
+		* and the dialog is centered on screen.
 		*/
 		function composeQrUrl(token) {
 			const url = new URL("/", window.location.origin);
@@ -2623,7 +2658,12 @@ window.__ModuleLoader__.load({
 			const canvasRef = (0, react.useRef)(null);
 			const [payload, setPayload] = (0, react.useState)("");
 			const [error, setError] = (0, react.useState)(null);
+			const [portalTarget, setPortalTarget] = (0, react.useState)(null);
+			(0, react.useEffect)(() => {
+				setPortalTarget(document.body);
+			}, []);
 			(0, react.useEffect)(() => {
+				if (portalTarget === null) return;
 				if (token === "") return;
 				const url = composeQrUrl(token);
 				setPayload(url);
@@ -2639,7 +2679,7 @@ window.__ModuleLoader__.load({
 				}).catch((reason) => {
 					setError(reason instanceof Error ? reason.message : String(reason));
 				});
-			}, [token]);
+			}, [token, portalTarget]);
 			(0, react.useEffect)(() => {
 				const onKey = (e) => {
 					if (e.key === "Escape") onClose();
@@ -2652,28 +2692,29 @@ window.__ModuleLoader__.load({
 			const onBackdropClick = (e) => {
 				if (e.target === e.currentTarget) onClose();
 			};
-			return (0, react.createElement)("div", {
-				className: "dsh-qr-share-backdrop",
+			if (portalTarget === null) return null;
+			return (0, react_dom.createPortal)((0, react.createElement)("div", {
+				className: styles_module_css_default.backdrop,
 				role: "presentation",
 				onClick: onBackdropClick
 			}, (0, react.createElement)("div", {
-				className: "dsh-qr-share-dialog",
+				className: styles_module_css_default.dialog,
 				role: "dialog",
 				"aria-modal": "true",
 				"aria-labelledby": "dsh-qr-share-title"
 			}, (0, react.createElement)("h2", {
 				id: "dsh-qr-share-title",
-				className: "dsh-qr-share-title"
-			}, t("dialog.title")), error !== null ? (0, react.createElement)("p", { className: "dsh-qr-share-err" }, `${t("dialog.error")}: ${error}`) : (0, react.createElement)("canvas", {
+				className: styles_module_css_default.title
+			}, t("dialog.title")), error !== null ? (0, react.createElement)("p", { className: styles_module_css_default.err }, `${t("dialog.error")}: ${error}`) : (0, react.createElement)("canvas", {
 				ref: canvasRef,
-				className: "dsh-qr-share-canvas",
+				className: styles_module_css_default.canvas,
 				width: 256,
 				height: 256
-			}), (0, react.createElement)("div", { className: "dsh-qr-share-url-block" }, (0, react.createElement)("span", { className: "dsh-qr-share-url-label" }, t("dialog.urlLabel")), (0, react.createElement)("code", { className: "dsh-qr-share-url" }, payload)), (0, react.createElement)("p", { className: "dsh-qr-share-hint" }, t("dialog.hint")), (0, react.createElement)("button", {
+			}), (0, react.createElement)("div", { className: styles_module_css_default.urlBlock }, (0, react.createElement)("span", { className: styles_module_css_default.urlLabel }, t("dialog.urlLabel")), (0, react.createElement)("code", { className: styles_module_css_default.url }, payload)), (0, react.createElement)("p", { className: styles_module_css_default.hint }, t("dialog.hint")), (0, react.createElement)("button", {
 				type: "button",
-				className: "dsh-qr-share-close",
+				className: styles_module_css_default.close,
 				onClick: onClose
-			}, t("dialog.close"))));
+			}, t("dialog.close")))), portalTarget);
 		}
 		//#endregion
 		//#region src/client/QrButton.tsx
@@ -2688,13 +2729,13 @@ window.__ModuleLoader__.load({
 			const [open, setOpen] = (0, react.useState)(false);
 			return (0, react.createElement)(react.Fragment, null, (0, react.createElement)("button", {
 				type: "button",
-				className: "dsh-qr-share-button",
+				className: styles_module_css_default.button,
 				"aria-label": t("button.label"),
 				title: t("button.tooltip"),
 				onClick: () => {
 					setOpen(true);
 				}
-			}, (0, react.createElement)(HiOutlineQrCode, { size: wide ? 18 : 20 }), wide ? (0, react.createElement)("span", { className: "dsh-qr-share-button-label" }, t("button.label")) : null), open ? (0, react.createElement)(QrDialog, {
+			}, (0, react.createElement)(HiOutlineQrCode, { size: wide ? 18 : 20 }), wide ? (0, react.createElement)("span", { className: styles_module_css_default.buttonLabel }, t("button.label")) : null), open ? (0, react.createElement)(QrDialog, {
 				token: info.token,
 				tokenTtlMs: info.tokenTtlMs,
 				t,