@1outres/dsh-plugin-mobile 0.0.0-stage → 0.6.0

package/lib/client.js

@@ -0,0 +1,1394 @@
+/* Generated by scripts/build.mjs — do not edit. */
+window.__ModuleLoader__.load({
+	id: "@1outres/dsh-plugin-mobile",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		"use strict";
+		var __defProp = Object.defineProperty;
+		var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+		var __getOwnPropNames = Object.getOwnPropertyNames;
+		var __hasOwnProp = Object.prototype.hasOwnProperty;
+		var __export = (target, all) => {
+		  for (var name in all)
+		    __defProp(target, name, { get: all[name], enumerable: true });
+		};
+		var __copyProps = (to, from, except, desc) => {
+		  if (from && typeof from === "object" || typeof from === "function") {
+		    for (let key of __getOwnPropNames(from))
+		      if (!__hasOwnProp.call(to, key) && key !== except)
+		        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+		  }
+		  return to;
+		};
+		var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+		// src/client/index.tsx
+		var index_exports = {};
+		__export(index_exports, {
+		  HEADER_SLOT: () => HEADER_SLOT,
+		  OVERLAY_SLOT: () => OVERLAY_SLOT,
+		  SETTINGS_SLOT: () => SETTINGS_SLOT,
+		  apply: () => apply,
+		  inject: () => inject
+		});
+		module.exports = __toCommonJS(index_exports);
+
+		// src/client/components.tsx
+		var import_react2 = require("react");
+
+		// src/client/frame.ts
+		var import_react = require("react");
+		var FRAME = "div:has(> [data-rightbar-col])";
+		var COLLAPSED_ATTRIBUTE = "data-sidebar-collapsed";
+		var FULLSCREEN_ATTRIBUTE = "data-rightbar-fullscreen";
+		function findFrame(root) {
+		  return root.querySelector("[data-rightbar-col]")?.parentElement ?? null;
+		}
+		function isExpanded(frame) {
+		  return frame !== null && !frame.hasAttribute(COLLAPSED_ATTRIBUTE);
+		}
+		var NO_SWIPE = "pre, table, input, textarea, select, [contenteditable='true'], [role='slider'], [data-dsh-mobile-no-swipe]";
+		function swipeBlocked(target, root, overflowX) {
+		  if (findFrame(root)?.hasAttribute(FULLSCREEN_ATTRIBUTE) === true) return true;
+		  if (root.querySelector("[aria-modal='true']") !== null) return true;
+		  const element = target;
+		  if (element === null || typeof element.closest !== "function") return false;
+		  if (element.closest(NO_SWIPE) !== null) return true;
+		  let current = element;
+		  for (let depth = 0; current !== null && depth < 12; depth += 1) {
+		    if (current.scrollWidth > current.clientWidth + 1) {
+		      const overflow = overflowX(current);
+		      if (overflow === "auto" || overflow === "scroll") return true;
+		    }
+		    current = current.parentElement;
+		  }
+		  return false;
+		}
+		function useFrameFlag(anchor, attribute) {
+		  const subscribe = (0, import_react.useCallback)(
+		    (listener) => {
+		      const frame = anchor.current?.closest(FRAME);
+		      if (frame === void 0 || frame === null) return () => {
+		      };
+		      const observer = new MutationObserver(listener);
+		      observer.observe(frame, { attributes: true, attributeFilter: [attribute] });
+		      return () => observer.disconnect();
+		    },
+		    [anchor, attribute]
+		  );
+		  const read = (0, import_react.useCallback)(
+		    () => anchor.current?.closest(FRAME)?.hasAttribute(attribute),
+		    [anchor, attribute]
+		  );
+		  return (0, import_react.useSyncExternalStore)(subscribe, read, () => void 0);
+		}
+
+		// src/client/icons.tsx
+		var import_jsx_runtime = require("react/jsx-runtime");
+		function IconMenu({ size = 16, className }) {
+		  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+		    "svg",
+		    {
+		      width: size,
+		      height: size,
+		      className,
+		      viewBox: "0 0 16 16",
+		      fill: "none",
+		      "aria-hidden": "true",
+		      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2.5 4h11M2.5 8h11M2.5 12h7", stroke: "currentColor", strokeLinecap: "round" })
+		    }
+		  );
+		}
+
+		// src/client/components.tsx
+		var import_jsx_runtime2 = require("react/jsx-runtime");
+		function useObservable(observable) {
+		  const subscribe = (0, import_react2.useCallback)(
+		    (listener) => observable.subscribe(listener),
+		    [observable]
+		  );
+		  const getSnapshot = (0, import_react2.useCallback)(() => observable.getSnapshot(), [observable]);
+		  return (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+		}
+		function mainSessionOf(state) {
+		  for (const [id, row] of Object.entries(state.byId)) {
+		    if ((row?.retainedBy?.mainView ?? 0) > 0) return id;
+		  }
+		  return void 0;
+		}
+		function HeaderMenuButton({ mode, toggle, t }) {
+		  const state = useObservable(mode);
+		  const ref = (0, import_react2.useRef)(null);
+		  const collapsed = useFrameFlag(ref, COLLAPSED_ATTRIBUTE);
+		  const expanded = collapsed === false;
+		  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+		    "button",
+		    {
+		      ref,
+		      type: "button",
+		      className: "dsh-mobile-menu",
+		      hidden: !state.mobile,
+		      "aria-label": expanded ? t("menu.close") : t("menu.open"),
+		      "aria-expanded": state.mobile ? expanded : void 0,
+		      onClick: toggle,
+		      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconMenu, { size: 18 })
+		    }
+		  );
+		}
+		function DrawerOverlay({ mode, toggle, t, usePanelInfo, useSessions }) {
+		  const state = useObservable(mode);
+		  const anchor = (0, import_react2.useRef)(null);
+		  const collapsed = useFrameFlag(anchor, COLLAPSED_ATTRIBUTE);
+		  const expanded = state.mobile && collapsed === false;
+		  const panel = usePanelInfo((info) => info.activePanelId);
+		  const session = useSessions(mainSessionOf);
+		  const seen = (0, import_react2.useRef)({ panel, session });
+		  (0, import_react2.useEffect)(() => {
+		    const before = seen.current;
+		    seen.current = { panel, session };
+		    if (before.panel === panel && before.session === session) return;
+		    if (expanded) toggle();
+		  }, [panel, session, expanded, toggle]);
+		  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { ref: anchor, hidden: true }),
+		    state.mobile ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+		      "div",
+		      {
+		        className: "dsh-mobile-scrim",
+		        "data-open": expanded ? "" : void 0,
+		        "aria-hidden": "true",
+		        onClick: toggle
+		      }
+		    ) : null,
+		    state.mobile && panel !== null && !expanded ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+		      "button",
+		      {
+		        type: "button",
+		        className: "dsh-mobile-menu dsh-mobile-floating",
+		        "aria-label": t("menu.open"),
+		        onClick: toggle,
+		        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconMenu, { size: 18 })
+		      }
+		    ) : null
+		  ] });
+		}
+
+		// src/client/config.ts
+		var NAMESPACE = "mobile";
+		var MIN_BREAKPOINT = 360;
+		var MAX_BREAKPOINT = 1024;
+		var DEFAULT_CONFIG = {
+		  mode: "auto",
+		  breakpoint: 768,
+		  enterKey: "newline",
+		  swipe: true,
+		  fitKeyboard: true,
+		  blockPullToRefresh: true,
+		  autoFocusComposer: false
+		};
+		var MODES = ["auto", "always", "off"];
+		var ENTER_KEYS = ["newline", "send"];
+		function oneOf(value, allowed, fallback) {
+		  return typeof value === "string" && allowed.includes(value) ? value : fallback;
+		}
+		function flag(value, fallback) {
+		  return typeof value === "boolean" ? value : fallback;
+		}
+		function normalizeConfig(value) {
+		  const breakpoint = typeof value?.breakpoint === "number" && Number.isFinite(value.breakpoint) ? Math.round(Math.min(MAX_BREAKPOINT, Math.max(MIN_BREAKPOINT, value.breakpoint))) : DEFAULT_CONFIG.breakpoint;
+		  return {
+		    mode: oneOf(value?.mode, MODES, DEFAULT_CONFIG.mode),
+		    breakpoint,
+		    enterKey: oneOf(value?.enterKey, ENTER_KEYS, DEFAULT_CONFIG.enterKey),
+		    swipe: flag(value?.swipe, DEFAULT_CONFIG.swipe),
+		    fitKeyboard: flag(value?.fitKeyboard, DEFAULT_CONFIG.fitKeyboard),
+		    blockPullToRefresh: flag(value?.blockPullToRefresh, DEFAULT_CONFIG.blockPullToRefresh),
+		    autoFocusComposer: flag(value?.autoFocusComposer, DEFAULT_CONFIG.autoFocusComposer)
+		  };
+		}
+
+		// src/client/enter.ts
+		var COMPOSER_INPUT = "[data-composer-input]";
+		var OPEN_MENU = "[data-composer-overlay] [role='listbox']";
+		function shouldInsertNewline(event, target) {
+		  if (event.key !== "Enter") return false;
+		  if (event.isComposing === true || event.keyCode === 229) return false;
+		  if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return false;
+		  const input = target?.closest(COMPOSER_INPUT) ?? null;
+		  if (input === null || input.isContentEditable === false) return false;
+		  const card = input.closest("[data-composer-card]");
+		  if (card !== null && card.querySelector(OPEN_MENU) !== null) return false;
+		  return true;
+		}
+		function asClosest(target) {
+		  const candidate = target;
+		  return candidate !== null && typeof candidate.closest === "function" ? candidate : null;
+		}
+		function installEnterNewline(target, active) {
+		  const listener = (event) => {
+		    if (!active()) return;
+		    if (!shouldInsertNewline(event, asClosest(event.target))) return;
+		    event.stopImmediatePropagation();
+		  };
+		  target.addEventListener("keydown", listener, true);
+		  return () => target.removeEventListener("keydown", listener, true);
+		}
+
+		// src/client/focus.ts
+		var INTENT_WINDOW_MS = 1500;
+		var COMPOSER_CARD = "[data-composer-card]";
+		var CONTROL = "button, a, input, select, textarea, [role='button'], [role='menuitem'], [role='option']";
+		var COMMAND_BUTTON = "[aria-haspopup='listbox']";
+		function asTarget(target) {
+		  const candidate = target;
+		  return candidate !== null && typeof candidate?.closest === "function" ? candidate : null;
+		}
+		function tapWantsKeyboard(target) {
+		  const element = asTarget(target);
+		  if (element === null) return false;
+		  if (element.closest(COMPOSER_INPUT) !== null) return true;
+		  if (element.closest(COMPOSER_CARD) === null) return false;
+		  return element.closest(CONTROL) === null || element.closest(COMMAND_BUTTON) !== null;
+		}
+		function initialIntent() {
+		  return {
+		    tapAt: Number.NEGATIVE_INFINITY,
+		    tapWantsKeyboard: false,
+		    keyAt: Number.NEGATIVE_INFINITY
+		  };
+		}
+		function shouldBlockFocus(target, intent, now) {
+		  const element = asTarget(target);
+		  if (element === null || element.closest(COMPOSER_INPUT) === null) return false;
+		  if (intent.tapWantsKeyboard && now - intent.tapAt <= INTENT_WINDOW_MS) return false;
+		  if (intent.keyAt > intent.tapAt && now - intent.keyAt <= INTENT_WINDOW_MS) return false;
+		  return true;
+		}
+		function installFocusGuard(target, active, now = Date.now) {
+		  const intent = initialIntent();
+		  const onPointer = (event) => {
+		    intent.tapAt = now();
+		    intent.tapWantsKeyboard = tapWantsKeyboard(event.target);
+		  };
+		  const onKey = () => {
+		    intent.keyAt = now();
+		  };
+		  const onFocus = (event) => {
+		    if (!active() || !shouldBlockFocus(event.target, intent, now())) return;
+		    const element = event.target;
+		    element?.blur?.();
+		  };
+		  target.addEventListener("pointerdown", onPointer, true);
+		  target.addEventListener("keydown", onKey, true);
+		  target.addEventListener("focusin", onFocus, true);
+		  return () => {
+		    target.removeEventListener("pointerdown", onPointer, true);
+		    target.removeEventListener("keydown", onKey, true);
+		    target.removeEventListener("focusin", onFocus, true);
+		  };
+		}
+
+		// src/client/i18n.ts
+		var en = {
+		  "menu.open": "Open sidebar",
+		  "menu.close": "Close sidebar",
+		  nav: "Mobile",
+		  "settings.title": "Mobile",
+		  "settings.description": "Adapts the Web UI to phones: below the breakpoint the sidebar becomes a drawer, the page fits above the on-screen keyboard, and touch controls get larger targets. Changes apply at once in every open page.",
+		  "settings.statusMobile": "This page is using the phone layout ({width}px wide).",
+		  "settings.statusDesktop": "This page is using the desktop layout ({width}px wide).",
+		  "settings.mode": "Phone layout",
+		  "settings.modeHint": "Auto switches below the breakpoint. Off removes every change of this plugin.",
+		  "settings.mode.auto": "Auto",
+		  "settings.mode.always": "Always",
+		  "settings.mode.off": "Off",
+		  "settings.breakpoint": "Breakpoint",
+		  "settings.breakpointHint": "Viewport width in CSS pixels, from 360 to 1024. Below it, auto mode uses the phone layout. Most phones are 360 to 430 wide in portrait.",
+		  "settings.breakpointInvalid": "Enter a whole number from 360 to 1024.",
+		  "settings.enterKey": "Enter key in the composer",
+		  "settings.enterKeyHint": "On a touch screen in the phone layout. With New line, send with the send button. IME conversion and command menus keep their Enter.",
+		  "settings.enterKey.newline": "New line",
+		  "settings.enterKey.send": "Send",
+		  "settings.autoFocusComposer": "Focus the composer automatically",
+		  "settings.autoFocusComposerHint": "Opening a session or pressing a composer button focuses the input, as on desktop, and the on-screen keyboard opens. Off: tap the input to type.",
+		  "settings.swipe": "Swipe to open the sidebar",
+		  "settings.swipeHint": "Swipe right from the left edge to open, swipe left to close.",
+		  "settings.fitKeyboard": "Fit the page to the keyboard",
+		  "settings.fitKeyboardHint": "Keep the header and the composer on screen while the on-screen keyboard is up.",
+		  "settings.blockPullToRefresh": "Block pull-to-refresh",
+		  "settings.blockPullToRefreshHint": "Scrolling up past the top of a long conversation does not reload the page.",
+		  "settings.reset": "Restore defaults",
+		  "settings.unavailable": "This configuration is not available.",
+		  "settings.readOnly": "Configuration is read-only: a higher configuration layer sets it.",
+		  "settings.writeError": "The Host refused the change."
+		};
+		var zh = {
+		  "menu.open": "\u6253\u5F00\u4FA7\u8FB9\u680F",
+		  "menu.close": "\u5173\u95ED\u4FA7\u8FB9\u680F",
+		  nav: "\u79FB\u52A8\u7AEF",
+		  "settings.title": "\u79FB\u52A8\u7AEF",
+		  "settings.description": "\u8BA9 Web UI \u9002\u914D\u624B\u673A\uFF1A\u7A84\u4E8E\u65AD\u70B9\u65F6\u4FA7\u8FB9\u680F\u53D8\u4E3A\u62BD\u5C49\uFF0C\u9875\u9762\u9002\u914D\u5C4F\u5E55\u952E\u76D8\u4E0A\u65B9\u7684\u53EF\u89C1\u533A\u57DF\uFF0C\u89E6\u63A7\u63A7\u4EF6\u7684\u70B9\u51FB\u533A\u57DF\u66F4\u5927\u3002\u4FEE\u6539\u4F1A\u7ACB\u5373\u5E94\u7528\u5230\u6240\u6709\u6253\u5F00\u7684\u9875\u9762\u3002",
+		  "settings.statusMobile": "\u5F53\u524D\u9875\u9762\u4F7F\u7528\u624B\u673A\u5E03\u5C40\uFF08\u5BBD {width}px\uFF09\u3002",
+		  "settings.statusDesktop": "\u5F53\u524D\u9875\u9762\u4F7F\u7528\u684C\u9762\u5E03\u5C40\uFF08\u5BBD {width}px\uFF09\u3002",
+		  "settings.mode": "\u624B\u673A\u5E03\u5C40",
+		  "settings.modeHint": "\u81EA\u52A8\uFF1A\u7A84\u4E8E\u65AD\u70B9\u65F6\u5207\u6362\u3002\u5173\u95ED\uFF1A\u64A4\u9500\u672C\u63D2\u4EF6\u7684\u6240\u6709\u4FEE\u6539\u3002",
+		  "settings.mode.auto": "\u81EA\u52A8",
+		  "settings.mode.always": "\u59CB\u7EC8",
+		  "settings.mode.off": "\u5173\u95ED",
+		  "settings.breakpoint": "\u65AD\u70B9",
+		  "settings.breakpointHint": "\u89C6\u53E3\u5BBD\u5EA6\uFF08CSS \u50CF\u7D20\uFF09\uFF0C360 \u5230 1024\u3002\u7A84\u4E8E\u8BE5\u503C\u65F6\u81EA\u52A8\u6A21\u5F0F\u4F7F\u7528\u624B\u673A\u5E03\u5C40\u3002\u591A\u6570\u624B\u673A\u7AD6\u5C4F\u5BBD 360 \u5230 430\u3002",
+		  "settings.breakpointInvalid": "\u8BF7\u8F93\u5165 360 \u5230 1024 \u4E4B\u95F4\u7684\u6574\u6570\u3002",
+		  "settings.enterKey": "\u8F93\u5165\u6846\u4E2D\u7684 Enter \u952E",
+		  "settings.enterKeyHint": "\u4EC5\u5728\u89E6\u5C4F\u8BBE\u5907\u7684\u624B\u673A\u5E03\u5C40\u4E2D\u751F\u6548\u3002\u9009\u62E9\u6362\u884C\u65F6\u7528\u53D1\u9001\u6309\u94AE\u53D1\u9001\u3002\u8F93\u5165\u6CD5\u786E\u8BA4\u548C\u547D\u4EE4\u83DC\u5355\u4ECD\u4F7F\u7528 Enter\u3002",
+		  "settings.enterKey.newline": "\u6362\u884C",
+		  "settings.enterKey.send": "\u53D1\u9001",
+		  "settings.autoFocusComposer": "\u81EA\u52A8\u805A\u7126\u8F93\u5165\u6846",
+		  "settings.autoFocusComposerHint": "\u6253\u5F00\u4F1A\u8BDD\u6216\u6309\u4E0B\u8F93\u5165\u6846\u4E2D\u7684\u6309\u94AE\u65F6\u81EA\u52A8\u805A\u7126\u8F93\u5165\u6846\uFF08\u4E0E\u684C\u9762\u76F8\u540C\uFF09\uFF0C\u5C4F\u5E55\u952E\u76D8\u4F1A\u5F39\u51FA\u3002\u5173\u95ED\u65F6\u70B9\u6309\u8F93\u5165\u6846\u624D\u5F00\u59CB\u8F93\u5165\u3002",
+		  "settings.swipe": "\u6ED1\u52A8\u6253\u5F00\u4FA7\u8FB9\u680F",
+		  "settings.swipeHint": "\u4ECE\u5DE6\u8FB9\u7F18\u5411\u53F3\u6ED1\u52A8\u6253\u5F00\uFF0C\u5411\u5DE6\u6ED1\u52A8\u5173\u95ED\u3002",
+		  "settings.fitKeyboard": "\u9875\u9762\u9002\u914D\u952E\u76D8",
+		  "settings.fitKeyboardHint": "\u5C4F\u5E55\u952E\u76D8\u5F39\u51FA\u65F6\uFF0C\u6807\u9898\u680F\u548C\u8F93\u5165\u6846\u4FDD\u6301\u5728\u5C4F\u5E55\u5185\u3002",
+		  "settings.blockPullToRefresh": "\u963B\u6B62\u4E0B\u62C9\u5237\u65B0",
+		  "settings.blockPullToRefreshHint": "\u5728\u957F\u4F1A\u8BDD\u9876\u90E8\u7EE7\u7EED\u4E0A\u6ED1\u4E0D\u4F1A\u5237\u65B0\u9875\u9762\u3002",
+		  "settings.reset": "\u6062\u590D\u9ED8\u8BA4",
+		  "settings.unavailable": "\u6B64\u914D\u7F6E\u4E0D\u53EF\u7528\u3002",
+		  "settings.readOnly": "\u914D\u7F6E\u4E3A\u53EA\u8BFB\uFF1A\u7531\u66F4\u9AD8\u7684\u914D\u7F6E\u5C42\u8BBE\u7F6E\u3002",
+		  "settings.writeError": "Host \u62D2\u7EDD\u4E86\u6B64\u4FEE\u6539\u3002"
+		};
+		var ja = {
+		  "menu.open": "\u30B5\u30A4\u30C9\u30D0\u30FC\u3092\u958B\u304F",
+		  "menu.close": "\u30B5\u30A4\u30C9\u30D0\u30FC\u3092\u9589\u3058\u308B",
+		  nav: "\u30E2\u30D0\u30A4\u30EB",
+		  "settings.title": "\u30E2\u30D0\u30A4\u30EB",
+		  "settings.description": "Web UI \u3092\u30B9\u30DE\u30FC\u30C8\u30D5\u30A9\u30F3\u306B\u5408\u308F\u305B\u307E\u3059\u3002\u30D6\u30EC\u30FC\u30AF\u30DD\u30A4\u30F3\u30C8\u3088\u308A\u72ED\u3044\u753B\u9762\u3067\u306F\u30B5\u30A4\u30C9\u30D0\u30FC\u3092\u30C9\u30ED\u30EF\u30FC\u306B\u3057\u3001\u30AA\u30F3\u30B9\u30AF\u30EA\u30FC\u30F3\u30AD\u30FC\u30DC\u30FC\u30C9\u306E\u4E0A\u306B\u53CE\u307E\u308B\u3088\u3046\u30DA\u30FC\u30B8\u3092\u7E2E\u3081\u3001\u30BF\u30C3\u30C1\u64CD\u4F5C\u306E\u5F53\u305F\u308A\u5224\u5B9A\u3092\u5E83\u3052\u307E\u3059\u3002\u5909\u66F4\u306F\u958B\u3044\u3066\u3044\u308B\u3059\u3079\u3066\u306E\u30DA\u30FC\u30B8\u306B\u3059\u3050\u53CD\u6620\u3055\u308C\u307E\u3059\u3002",
+		  "settings.statusMobile": "\u3053\u306E\u30DA\u30FC\u30B8\u306F\u30B9\u30DE\u30DB\u8868\u793A\u3067\u3059\uFF08\u5E45 {width}px\uFF09\u3002",
+		  "settings.statusDesktop": "\u3053\u306E\u30DA\u30FC\u30B8\u306F\u30C7\u30B9\u30AF\u30C8\u30C3\u30D7\u8868\u793A\u3067\u3059\uFF08\u5E45 {width}px\uFF09\u3002",
+		  "settings.mode": "\u30B9\u30DE\u30DB\u8868\u793A",
+		  "settings.modeHint": "\u81EA\u52D5\u306F\u30D6\u30EC\u30FC\u30AF\u30DD\u30A4\u30F3\u30C8\u3088\u308A\u72ED\u3044\u3068\u304D\u306B\u5207\u308A\u66FF\u3048\u307E\u3059\u3002\u30AA\u30D5\u306F\u3053\u306E\u30D7\u30E9\u30B0\u30A4\u30F3\u306E\u5909\u66F4\u3092\u3059\u3079\u3066\u5916\u3057\u307E\u3059\u3002",
+		  "settings.mode.auto": "\u81EA\u52D5",
+		  "settings.mode.always": "\u5E38\u306B",
+		  "settings.mode.off": "\u30AA\u30D5",
+		  "settings.breakpoint": "\u30D6\u30EC\u30FC\u30AF\u30DD\u30A4\u30F3\u30C8",
+		  "settings.breakpointHint": "\u30D3\u30E5\u30FC\u30DD\u30FC\u30C8\u5E45\uFF08CSS \u30D4\u30AF\u30BB\u30EB\uFF09\u3002360\u301C1024 \u306E\u7BC4\u56F2\u3067\u3059\u3002\u3053\u308C\u3088\u308A\u72ED\u3044\u3068\u81EA\u52D5\u30E2\u30FC\u30C9\u3067\u30B9\u30DE\u30DB\u8868\u793A\u306B\u306A\u308A\u307E\u3059\u3002\u7E26\u5411\u304D\u306E\u30B9\u30DE\u30DB\u306F\u304A\u304A\u3080\u306D 360\u301C430 \u3067\u3059\u3002",
+		  "settings.breakpointInvalid": "360\u301C1024 \u306E\u6574\u6570\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+		  "settings.enterKey": "\u5165\u529B\u6B04\u306E Enter \u30AD\u30FC",
+		  "settings.enterKeyHint": "\u30BF\u30C3\u30C1\u7AEF\u672B\u306E\u30B9\u30DE\u30DB\u8868\u793A\u3067\u3060\u3051\u52B9\u304D\u307E\u3059\u3002\u300C\u6539\u884C\u300D\u306E\u3068\u304D\u306F\u9001\u4FE1\u30DC\u30BF\u30F3\u3067\u9001\u308A\u307E\u3059\u3002\u5909\u63DB\u306E\u78BA\u5B9A\u3068\u30B3\u30DE\u30F3\u30C9\u30E1\u30CB\u30E5\u30FC\u3067\u306F\u5F93\u6765\u3069\u304A\u308A Enter \u304C\u52B9\u304D\u307E\u3059\u3002",
+		  "settings.enterKey.newline": "\u6539\u884C",
+		  "settings.enterKey.send": "\u9001\u4FE1",
+		  "settings.autoFocusComposer": "\u5165\u529B\u6B04\u306B\u81EA\u52D5\u3067\u30D5\u30A9\u30FC\u30AB\u30B9\u3059\u308B",
+		  "settings.autoFocusComposerHint": "\u30BB\u30C3\u30B7\u30E7\u30F3\u3092\u958B\u3044\u305F\u3068\u304D\u3084\u5165\u529B\u6B04\u306E\u30DC\u30BF\u30F3\u3092\u62BC\u3057\u305F\u3068\u304D\u306B\u3001\u30C7\u30B9\u30AF\u30C8\u30C3\u30D7\u3068\u540C\u3058\u304F\u5165\u529B\u6B04\u306B\u30D5\u30A9\u30FC\u30AB\u30B9\u3057\u3001\u30AD\u30FC\u30DC\u30FC\u30C9\u304C\u958B\u304D\u307E\u3059\u3002\u30AA\u30D5\u306B\u3059\u308B\u3068\u3001\u5165\u529B\u6B04\u3092\u30BF\u30C3\u30D7\u3059\u308B\u307E\u3067\u30AD\u30FC\u30DC\u30FC\u30C9\u306F\u958B\u304D\u307E\u305B\u3093\u3002",
+		  "settings.swipe": "\u30B9\u30EF\u30A4\u30D7\u3067\u30B5\u30A4\u30C9\u30D0\u30FC\u3092\u958B\u304F",
+		  "settings.swipeHint": "\u5DE6\u7AEF\u304B\u3089\u53F3\u3078\u30B9\u30EF\u30A4\u30D7\u3067\u958B\u304D\u3001\u5DE6\u3078\u30B9\u30EF\u30A4\u30D7\u3067\u9589\u3058\u307E\u3059\u3002",
+		  "settings.fitKeyboard": "\u30AD\u30FC\u30DC\u30FC\u30C9\u306B\u5408\u308F\u305B\u3066\u30DA\u30FC\u30B8\u3092\u7E2E\u3081\u308B",
+		  "settings.fitKeyboardHint": "\u30AA\u30F3\u30B9\u30AF\u30EA\u30FC\u30F3\u30AD\u30FC\u30DC\u30FC\u30C9\u306E\u8868\u793A\u4E2D\u3082\u3001\u30D8\u30C3\u30C0\u30FC\u3068\u5165\u529B\u6B04\u3092\u753B\u9762\u5185\u306B\u6B8B\u3057\u307E\u3059\u3002",
+		  "settings.blockPullToRefresh": "\u5F15\u3063\u5F35\u3063\u3066\u66F4\u65B0\u3092\u6B62\u3081\u308B",
+		  "settings.blockPullToRefreshHint": "\u9577\u3044\u4F1A\u8A71\u306E\u5148\u982D\u3067\u3055\u3089\u306B\u4E0A\u3078\u30B9\u30AF\u30ED\u30FC\u30EB\u3057\u3066\u3082\u518D\u8AAD\u307F\u8FBC\u307F\u3057\u307E\u305B\u3093\u3002",
+		  "settings.reset": "\u65E2\u5B9A\u5024\u306B\u623B\u3059",
+		  "settings.unavailable": "\u3053\u306E\u8A2D\u5B9A\u306F\u5229\u7528\u3067\u304D\u307E\u305B\u3093\u3002",
+		  "settings.readOnly": "\u4E0A\u4F4D\u306E\u8A2D\u5B9A\u30EC\u30A4\u30E4\u30FC\u304C\u5024\u3092\u6C7A\u3081\u3066\u3044\u308B\u305F\u3081\u3001\u8AAD\u307F\u53D6\u308A\u5C02\u7528\u3067\u3059\u3002",
+		  "settings.writeError": "Host \u304C\u5909\u66F4\u3092\u62D2\u5426\u3057\u307E\u3057\u305F\u3002"
+		};
+
+		// src/client/mode.ts
+		var TOUCH_QUERY = "(hover: none) and (pointer: coarse)";
+		function widthQuery(breakpoint) {
+		  return `(max-width: ${breakpoint - 0.02}px)`;
+		}
+		function resolveMobile(mode, narrow) {
+		  if (mode === "always") return true;
+		  if (mode === "off") return false;
+		  return narrow;
+		}
+		function createModeStore(matchMedia, config) {
+		  const listeners = /* @__PURE__ */ new Set();
+		  const touch = matchMedia(TOUCH_QUERY);
+		  let breakpoint = config().breakpoint;
+		  let width = matchMedia(widthQuery(breakpoint));
+		  let state = { mobile: false, touch: false };
+		  const compute = () => {
+		    const next = {
+		      mobile: resolveMobile(config().mode, width.matches),
+		      touch: touch.matches
+		    };
+		    if (next.mobile === state.mobile && next.touch === state.touch) return;
+		    state = next;
+		    for (const listener of [...listeners]) listener();
+		  };
+		  const onChange = () => compute();
+		  touch.addEventListener("change", onChange);
+		  width.addEventListener("change", onChange);
+		  compute();
+		  return {
+		    getSnapshot: () => state,
+		    subscribe(listener) {
+		      listeners.add(listener);
+		      return () => {
+		        listeners.delete(listener);
+		      };
+		    },
+		    refresh() {
+		      const next = config().breakpoint;
+		      if (next !== breakpoint) {
+		        width.removeEventListener("change", onChange);
+		        breakpoint = next;
+		        width = matchMedia(widthQuery(breakpoint));
+		        width.addEventListener("change", onChange);
+		      }
+		      compute();
+		    },
+		    dispose() {
+		      touch.removeEventListener("change", onChange);
+		      width.removeEventListener("change", onChange);
+		      listeners.clear();
+		    }
+		  };
+		}
+
+		// src/client/SettingsPage.tsx
+		var import_react3 = require("react");
+		var import_jsx_runtime3 = require("react/jsx-runtime");
+		var FIELDS = Object.keys(DEFAULT_CONFIG);
+		var MODES2 = ["auto", "always", "off"];
+		var ENTER_KEYS2 = ["newline", "send"];
+		function parseBreakpoint(text) {
+		  const trimmed = text.trim();
+		  if (!/^\d+$/.test(trimmed)) return void 0;
+		  const value = Number(trimmed);
+		  return value >= MIN_BREAKPOINT && value <= MAX_BREAKPOINT ? value : void 0;
+		}
+		var sectionStyle = {
+		  maxWidth: 680,
+		  padding: "4px 0 32px",
+		  color: "var(--dsw-alias-label-primary)"
+		};
+		var headingStyle = { margin: 0, fontSize: 18, fontWeight: 600, lineHeight: 1.4 };
+		var introStyle = {
+		  margin: "8px 0 0",
+		  color: "var(--dsw-alias-label-secondary)",
+		  fontSize: 13,
+		  lineHeight: 1.6
+		};
+		var statusStyle = {
+		  margin: "12px 0 0",
+		  padding: "8px 10px",
+		  borderRadius: 8,
+		  background: "var(--dsw-alias-interactive-bg-hover)",
+		  color: "var(--dsw-alias-label-secondary)",
+		  fontSize: 12,
+		  lineHeight: 1.5
+		};
+		var fieldStyle = {
+		  display: "flex",
+		  flexDirection: "column",
+		  gap: 8,
+		  marginTop: 22
+		};
+		var rowStyle = {
+		  display: "flex",
+		  alignItems: "center",
+		  justifyContent: "space-between",
+		  gap: 16,
+		  marginTop: 20
+		};
+		var labelStyle = { fontSize: 13, fontWeight: 600 };
+		var hintStyle = {
+		  margin: 0,
+		  color: "var(--dsw-alias-label-tertiary)",
+		  fontSize: 12,
+		  lineHeight: 1.5,
+		  fontWeight: 400
+		};
+		var errorStyle = {
+		  margin: 0,
+		  color: "var(--dsw-alias-state-error-primary)",
+		  fontSize: 12,
+		  lineHeight: 1.5
+		};
+		var groupStyle = {
+		  margin: "26px 0 0",
+		  paddingTop: 4,
+		  borderTop: "1px solid var(--dsw-alias-border-l2)"
+		};
+		var inputStyle = {
+		  width: 96,
+		  boxSizing: "border-box",
+		  padding: "6px 10px",
+		  borderRadius: 8,
+		  border: "1px solid var(--dsw-alias-border-l2)",
+		  background: "var(--dsw-specific-input-major, var(--dsw-alias-bg-layer-1))",
+		  color: "inherit",
+		  font: "inherit",
+		  outline: "none"
+		};
+		var buttonStyle = {
+		  marginTop: 26,
+		  padding: "8px 12px",
+		  borderRadius: 8,
+		  border: "1px solid var(--dsw-alias-border-l2)",
+		  background: "var(--dsw-alias-bg-layer-1)",
+		  color: "inherit",
+		  font: "inherit",
+		  cursor: "pointer"
+		};
+		var mutedStyle = {
+		  color: "var(--dsw-alias-label-tertiary)",
+		  fontSize: 13,
+		  lineHeight: 1.6
+		};
+		function useObservable2(observable) {
+		  const subscribe = (0, import_react3.useCallback)(
+		    (listener) => observable.subscribe(listener),
+		    [observable]
+		  );
+		  const getSnapshot = (0, import_react3.useCallback)(() => observable.getSnapshot(), [observable]);
+		  return (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+		}
+		function subscribeResize(listener) {
+		  window.addEventListener("resize", listener);
+		  return () => window.removeEventListener("resize", listener);
+		}
+		function useViewportWidth() {
+		  return (0, import_react3.useSyncExternalStore)(
+		    subscribeResize,
+		    () => Math.round(window.innerWidth),
+		    () => 0
+		  );
+		}
+		function SettingsPage({ form, mode, t }) {
+		  const subscribe = (0, import_react3.useCallback)((listener) => form.subscribe(listener), [form]);
+		  const getSnapshot = (0, import_react3.useCallback)(() => form.getSnapshot(), [form]);
+		  const snapshot = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+		  const config = normalizeConfig(snapshot.value);
+		  const state = useObservable2(mode);
+		  const width = useViewportWidth();
+		  const [draft, setDraft] = (0, import_react3.useState)(String(config.breakpoint));
+		  const [writeError, setWriteError] = (0, import_react3.useState)(false);
+		  (0, import_react3.useEffect)(() => {
+		    setDraft(String(config.breakpoint));
+		  }, [config.breakpoint]);
+		  const write = (field, value) => {
+		    void form.set(field, value).then((accepted) => setWriteError(!accepted)).catch(() => setWriteError(true));
+		  };
+		  const parsed = parseBreakpoint(draft);
+		  const commitBreakpoint = () => {
+		    if (parsed === void 0) return;
+		    if (parsed !== config.breakpoint) write("breakpoint", parsed);
+		  };
+		  const onBreakpointKeyDown = (event) => {
+		    if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+		    event.preventDefault();
+		    event.currentTarget.blur();
+		  };
+		  const reset = () => {
+		    void Promise.all(FIELDS.map((field) => form.unset(field))).then((results) => setWriteError(results.some((accepted) => !accepted))).catch(() => setWriteError(true));
+		  };
+		  if (snapshot.status === "unavailable") {
+		    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: mutedStyle, children: t("settings.unavailable") });
+		  }
+		  const disabled = snapshot.writable === false;
+		  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: sectionStyle, className: "dsh-mobile-settings", children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: headingStyle, children: t("settings.title") }),
+		    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: introStyle, children: t("settings.description") }),
+		    width > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: statusStyle, role: "status", children: state.mobile ? t("settings.statusMobile", { width }) : t("settings.statusDesktop", { width }) }) : null,
+		    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: fieldStyle, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: labelStyle, children: t("settings.mode") }),
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		        Segmented,
+		        {
+		          label: t("settings.mode"),
+		          options: MODES2.map((value) => ({ value, label: t(`settings.mode.${value}`) })),
+		          value: config.mode,
+		          disabled,
+		          onChange: (next) => write("mode", next)
+		        }
+		      ),
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: hintStyle, children: t("settings.modeHint") })
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: fieldStyle, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: labelStyle, htmlFor: "dsh-mobile-breakpoint", children: t("settings.breakpoint") }),
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+		        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		          "input",
+		          {
+		            id: "dsh-mobile-breakpoint",
+		            type: "text",
+		            inputMode: "numeric",
+		            autoComplete: "off",
+		            spellCheck: false,
+		            value: draft,
+		            disabled,
+		            "aria-invalid": parsed === void 0,
+		            style: inputStyle,
+		            onChange: (event) => setDraft(event.target.value),
+		            onBlur: commitBreakpoint,
+		            onKeyDown: onBreakpointKeyDown
+		          }
+		        ),
+		        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: mutedStyle, children: "px" })
+		      ] }),
+		      parsed === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: errorStyle, children: t("settings.breakpointInvalid") }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: hintStyle, children: t("settings.breakpointHint") })
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: groupStyle, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: fieldStyle, children: [
+		        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: labelStyle, children: t("settings.enterKey") }),
+		        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		          Segmented,
+		          {
+		            label: t("settings.enterKey"),
+		            options: ENTER_KEYS2.map((value) => ({
+		              value,
+		              label: t(`settings.enterKey.${value}`)
+		            })),
+		            value: config.enterKey,
+		            disabled,
+		            onChange: (next) => write("enterKey", next)
+		          }
+		        ),
+		        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: hintStyle, children: t("settings.enterKeyHint") })
+		      ] }),
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		        Toggle,
+		        {
+		          label: t("settings.autoFocusComposer"),
+		          hint: t("settings.autoFocusComposerHint"),
+		          checked: config.autoFocusComposer,
+		          disabled,
+		          onChange: (next) => write("autoFocusComposer", next)
+		        }
+		      ),
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		        Toggle,
+		        {
+		          label: t("settings.swipe"),
+		          hint: t("settings.swipeHint"),
+		          checked: config.swipe,
+		          disabled,
+		          onChange: (next) => write("swipe", next)
+		        }
+		      ),
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		        Toggle,
+		        {
+		          label: t("settings.fitKeyboard"),
+		          hint: t("settings.fitKeyboardHint"),
+		          checked: config.fitKeyboard,
+		          disabled,
+		          onChange: (next) => write("fitKeyboard", next)
+		        }
+		      ),
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		        Toggle,
+		        {
+		          label: t("settings.blockPullToRefresh"),
+		          hint: t("settings.blockPullToRefreshHint"),
+		          checked: config.blockPullToRefresh,
+		          disabled,
+		          onChange: (next) => write("blockPullToRefresh", next)
+		        }
+		      )
+		    ] }),
+		    disabled ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { ...hintStyle, marginTop: 20 }, children: t("settings.readOnly") }) : null,
+		    writeError ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { ...errorStyle, marginTop: 20 }, children: t("settings.writeError") }) : null,
+		    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: buttonStyle, disabled, onClick: reset, children: t("settings.reset") })
+		  ] });
+		}
+		function Segmented({
+		  label,
+		  options,
+		  value,
+		  disabled,
+		  onChange
+		}) {
+		  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("fieldset", { className: "dsh-mobile-segmented", "aria-label": label, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		    "button",
+		    {
+		      type: "button",
+		      "aria-pressed": option.value === value,
+		      className: "dsh-mobile-segment",
+		      disabled,
+		      onClick: () => {
+		        if (option.value !== value) onChange(option.value);
+		      },
+		      children: option.label
+		    },
+		    option.value
+		  )) });
+		}
+		function Toggle({ label, hint, checked, disabled, onChange }) {
+		  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: rowStyle, children: [
+		    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { display: "flex", flexDirection: "column", gap: 4, minWidth: 0 }, children: [
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: labelStyle, children: label }),
+		      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: hintStyle, children: hint })
+		    ] }),
+		    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+		      "button",
+		      {
+		        type: "button",
+		        role: "switch",
+		        "aria-checked": checked,
+		        "aria-label": label,
+		        className: "dsh-mobile-switch",
+		        disabled,
+		        onClick: (event) => {
+		          event.stopPropagation();
+		          onChange(!checked);
+		        },
+		        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dsh-mobile-thumb" })
+		      }
+		    )
+		  ] });
+		}
+
+		// src/client/styles.ts
+		var MOBILE_ATTRIBUTE = "data-dsh-mobile";
+		var TOUCH_ATTRIBUTE = "data-dsh-touch";
+		var NO_PULL_ATTRIBUTE = "data-dsh-no-pull";
+		var M = `html[${MOBILE_ATTRIBUTE}]`;
+		var T = `html[${TOUCH_ATTRIBUTE}]`;
+		var SIDEBAR = `${M} ${FRAME} > :has(> [data-slot="sidebar"])`;
+		var SETTINGS = `${M} [data-shortcut-modal="settings"][role="dialog"]`;
+		var MOBILE_CSS = `
+		.dsh-mobile-menu {
+		  box-sizing: border-box;
+		  flex: none;
+		  width: 34px;
+		  height: 34px;
+		  margin: -2px 2px -2px -4px;
+		  padding: 0;
+		  border: none;
+		  border-radius: var(--dsw-radius-md);
+		  background: transparent;
+		  color: var(--dsw-alias-label-primary);
+		  font-family: inherit;
+		  display: inline-flex;
+		  align-items: center;
+		  justify-content: center;
+		  cursor: pointer;
+		  touch-action: manipulation;
+		  -webkit-tap-highlight-color: transparent;
+		}
+		.dsh-mobile-menu[hidden] {
+		  display: none;
+		}
+		.dsh-mobile-menu:active {
+		  background: var(--dsw-alias-interactive-bg-hover);
+		}
+		@media (hover: hover) {
+		  .dsh-mobile-menu:hover {
+		    background: var(--dsw-alias-interactive-bg-hover);
+		  }
+		}
+		.dsh-mobile-menu:focus-visible {
+		  outline: var(--dsw-focus-ring-width) solid
+		    var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+		  outline-offset: -2px;
+		}
+		.dsh-mobile-floating {
+		  position: absolute;
+		  top: 8px;
+		  left: 8px;
+		  width: 40px;
+		  height: 40px;
+		  margin: 0;
+		  border: 0.5px solid var(--dsw-alias-border-l3);
+		  border-radius: 999px;
+		  background: var(--dsw-alias-button-elevated-fill, var(--dsw-alias-bg-layer-1));
+		  box-shadow: var(--dsw-elevation-soft, 0 2px 8px rgb(0 0 0 / 12%));
+		}
+		.dsh-mobile-scrim {
+		  position: absolute;
+		  inset: 0;
+		  background: var(--dsw-alias-bg-mask-1, rgb(0 0 0 / 40%));
+		  opacity: 0;
+		  pointer-events: none;
+		  transition: opacity 0.2s ease;
+		  -webkit-tap-highlight-color: transparent;
+		}
+		.dsh-mobile-scrim[data-open] {
+		  opacity: 1;
+		  pointer-events: auto;
+		}
+		.dsh-mobile-segmented {
+		  box-sizing: border-box;
+		  min-width: 0;
+		  margin: 0;
+		  border: 0;
+		  display: inline-flex;
+		  align-self: flex-start;
+		  max-width: 100%;
+		  gap: 2px;
+		  padding: 2px;
+		  border-radius: 8px;
+		  background: var(--dsw-alias-interactive-bg-hover);
+		}
+		.dsh-mobile-segment {
+		  box-sizing: border-box;
+		  min-height: 30px;
+		  padding: 0 14px;
+		  border: 0;
+		  border-radius: 6px;
+		  background: transparent;
+		  color: var(--dsw-alias-label-secondary);
+		  font: inherit;
+		  font-size: 13px;
+		  white-space: nowrap;
+		  cursor: pointer;
+		  touch-action: manipulation;
+		}
+		.dsh-mobile-segment[aria-pressed="true"] {
+		  background: var(--dsw-alias-bg-layer-1);
+		  color: var(--dsw-alias-label-primary);
+		  font-weight: 600;
+		  box-shadow: 0 0 0 0.5px var(--dsw-alias-border-l2);
+		}
+		.dsh-mobile-segment:disabled {
+		  cursor: default;
+		  opacity: 0.5;
+		}
+		.dsh-mobile-segment:focus-visible,
+		.dsh-mobile-switch:focus-visible {
+		  outline: var(--dsw-focus-ring-width) solid
+		    var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+		  outline-offset: 2px;
+		}
+		.dsh-mobile-switch {
+		  box-sizing: border-box;
+		  position: relative;
+		  flex: 0 0 auto;
+		  width: 36px;
+		  height: 20px;
+		  padding: 2px;
+		  border: 0;
+		  border-radius: 999px;
+		  background: var(--dsw-alias-border-l3);
+		  cursor: pointer;
+		  touch-action: manipulation;
+		}
+		.dsh-mobile-switch[aria-checked="true"] {
+		  background: var(--dsw-alias-brand-primary);
+		}
+		.dsh-mobile-switch:disabled {
+		  cursor: default;
+		  opacity: 0.5;
+		}
+		.dsh-mobile-thumb {
+		  display: block;
+		  width: 16px;
+		  height: 16px;
+		  border-radius: 50%;
+		  background: var(--dsw-alias-label-primary-foreground);
+		  transition: transform 0.12s ease;
+		}
+		.dsh-mobile-switch[aria-checked="false"] .dsh-mobile-thumb {
+		  background: var(--dsw-alias-switch-thumb);
+		}
+		.dsh-mobile-switch[aria-checked="true"] .dsh-mobile-thumb {
+		  transform: translate(16px);
+		}
+
+		${M} {
+		  --dsh-frame-top-clearance: 44px;
+		}
+		${M} body {
+		  height: var(--dsh-mobile-vvh, 100dvh);
+		  overflow: hidden;
+		}
+		${M} #root {
+		  box-sizing: border-box;
+		  height: var(--dsh-mobile-vvh, 100dvh);
+		  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
+		}
+		html[${NO_PULL_ATTRIBUTE}],
+		html[${NO_PULL_ATTRIBUTE}] body {
+		  overscroll-behavior: none;
+		}
+
+		${M} ${FRAME} {
+		  grid-template-columns: 0px minmax(0, 1fr) 0px !important;
+		}
+		${M} ${FRAME} > :has(> [data-slot="main"]) {
+		  grid-column: 2;
+		  grid-row: 1;
+		}
+		${M} ${FRAME} > [data-rightbar-col] {
+		  grid-column: 3;
+		  grid-row: 1;
+		}
+		${M} ${FRAME} > [data-side] {
+		  display: none;
+		}
+		${SIDEBAR} {
+		  position: absolute;
+		  z-index: 25;
+		  top: 0;
+		  bottom: 0;
+		  left: 0;
+		  box-sizing: border-box;
+		  width: min(86vw, 340px);
+		  padding-bottom: env(safe-area-inset-bottom);
+		  border-right: none;
+		  box-shadow: var(--dsw-elevation-prominent, 0 8px 32px rgb(0 0 0 / 20%));
+		  overscroll-behavior: contain;
+		  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
+		}
+		${M} ${FRAME}[data-sidebar-collapsed] > :has(> [data-slot="sidebar"]) {
+		  transform: translateX(calc(-100% - 32px));
+		  visibility: hidden;
+		  box-shadow: none;
+		  transition:
+		    transform 0.2s cubic-bezier(0.4, 0, 1, 1),
+		    visibility 0s linear 0.2s,
+		    box-shadow 0s linear 0.2s;
+		}
+
+		${M} header:has(> [data-conversation-header-leading]) {
+		  min-height: 0;
+		  padding-top: 6px;
+		  padding-left: 8px;
+		  padding-right: 12px;
+		}
+		${M} [data-conversation-header-corner] {
+		  margin-right: 0;
+		}
+		${M} [data-conversation-tabs] {
+		  gap: 20px;
+		}
+		${M} [data-conversation-content] {
+		  --dsh-composer-side-clearance: 8px;
+		}
+		${M} [data-width-handle] {
+		  display: none;
+		}
+		${M} [data-composer-seat] {
+		  --dsh-composer-text-max-height: min(336px, calc(var(--dsh-mobile-vvh, 100dvh) * 0.3));
+		  padding-bottom: env(safe-area-inset-bottom);
+		}
+		html[${MOBILE_ATTRIBUTE}][data-dsh-keyboard] [data-composer-seat] {
+		  padding-bottom: 0;
+		}
+
+		${SETTINGS} {
+		  box-sizing: border-box;
+		  flex-direction: column;
+		  width: 100vw;
+		  max-width: 100vw;
+		  height: var(--dsh-mobile-vvh, 100dvh);
+		  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+		    env(safe-area-inset-left);
+		  border-radius: 0;
+		}
+		${SETTINGS} > nav {
+		  width: auto;
+		  gap: 10px;
+		  padding: 14px 12px 4px;
+		}
+		${SETTINGS} > nav > :first-child {
+		  padding-right: 48px;
+		}
+		${SETTINGS} > nav > :last-child {
+		  flex-direction: row;
+		  gap: 4px;
+		  overflow-x: auto;
+		  scrollbar-width: none;
+		}
+		${SETTINGS} > nav > :last-child > button {
+		  flex: none;
+		  height: 36px;
+		}
+		${SETTINGS} > :last-child {
+		  min-height: 0;
+		}
+		${SETTINGS} > :last-child > :first-child {
+		  position: absolute;
+		  top: calc(env(safe-area-inset-top) + 10px);
+		  right: calc(env(safe-area-inset-right) + 10px);
+		  height: auto;
+		  padding: 0;
+		}
+		${SETTINGS} > :last-child > :last-child {
+		  padding: 8px 16px 16px;
+		}
+
+		${T} {
+		  -webkit-tap-highlight-color: transparent;
+		}
+		${T} :is(button, a, [role="button"], [role="tab"], [role="treeitem"], [role="menuitem"], [role="option"]) {
+		  touch-action: manipulation;
+		}
+		${T} :is(
+		    input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"]),
+		    textarea,
+		    select,
+		    [data-composer-input],
+		    [data-composer-placeholder]
+		  ) {
+		  font-size: max(16px, 1em);
+		}
+		${T} [role="tooltip"] {
+		  display: none !important;
+		}
+		${T} [data-row-key^="session:"][aria-selected="true"] > [class*="_rowActions"] {
+		  display: inline-flex;
+		}
+		${T} [data-row-key^="session:"][aria-selected="true"] > :is([class*="_time"], [class*="_pinIndicator"]) {
+		  display: none;
+		}
+		${T} [data-row-key] > [class*="_rowActions"] {
+		  gap: 4px;
+		}
+		${T} [data-row-key^="session:"]:not([aria-selected="true"]):hover > [class*="_rowActions"],
+		${T} [data-row-key^="workspace:"]:hover > [class*="_chevron"],
+		${T} [class*="_searchResultRow"]:hover [class*="_rowActions"] {
+		  display: none;
+		}
+		${T} [data-row-key^="session:"]:not([aria-selected="true"]):hover > [class*="_time"] {
+		  display: inline;
+		}
+		${T} [data-row-key^="session:"]:not([aria-selected="true"]):hover > [class*="_pinIndicator"],
+		${T} [data-row-key^="workspace:"]:hover > [class*="_folder"],
+		${T} [data-row-key^="workspace:"] > [class*="_rowActions"] {
+		  display: inline-flex;
+		}
+		${T} [data-row-key] > [class*="_rowActions"] button {
+		  width: 28px;
+		  height: 28px;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+		  .dsh-mobile-scrim,
+		  ${SIDEBAR} {
+		    transition: none !important;
+		  }
+		}
+		`;
+
+		// src/client/swipe.ts
+		var DEFAULT_SWIPE = { edge: 24, distance: 56, slop: 10 };
+		function createSwipeRecognizer(options = DEFAULT_SWIPE) {
+		  let gesture;
+		  const lock = (x, y) => {
+		    if (gesture === void 0 || gesture.axis !== void 0) return;
+		    const dx = Math.abs(x - gesture.x);
+		    const dy = Math.abs(y - gesture.y);
+		    if (dx < options.slop && dy < options.slop) return;
+		    gesture.axis = dx > dy * 1.2 ? "x" : "y";
+		  };
+		  return {
+		    start(x, y, allowed) {
+		      const open = allowed.open && x <= options.edge;
+		      gesture = open || allowed.close ? { x, y, open, close: allowed.close, axis: void 0 } : void 0;
+		    },
+		    move(x, y) {
+		      lock(x, y);
+		    },
+		    end(x, y) {
+		      lock(x, y);
+		      const current = gesture;
+		      gesture = void 0;
+		      if (current === void 0 || current.axis !== "x") return null;
+		      const dx = x - current.x;
+		      if (Math.abs(y - current.y) > Math.abs(dx)) return null;
+		      if (current.open && dx >= options.distance) return "open";
+		      if (current.close && dx <= -options.distance) return "close";
+		      return null;
+		    },
+		    cancel() {
+		      gesture = void 0;
+		    }
+		  };
+		}
+		function installSwipe(target, host, options = DEFAULT_SWIPE) {
+		  const recognizer = createSwipeRecognizer(options);
+		  const passive = { passive: true, capture: true };
+		  const onStart = (event) => {
+		    const touch = event.touches[0];
+		    if (!host.enabled() || event.touches.length !== 1 || touch === void 0) {
+		      recognizer.cancel();
+		      return;
+		    }
+		    if (host.blocked(event.target)) {
+		      recognizer.cancel();
+		      return;
+		    }
+		    const expanded = host.expanded();
+		    recognizer.start(touch.clientX, touch.clientY, { open: !expanded, close: expanded });
+		  };
+		  const onMove = (event) => {
+		    const touch = event.touches[0];
+		    if (event.touches.length !== 1 || touch === void 0) {
+		      recognizer.cancel();
+		      return;
+		    }
+		    recognizer.move(touch.clientX, touch.clientY);
+		  };
+		  const onEnd = (event) => {
+		    const touch = event.changedTouches[0];
+		    if (touch === void 0) {
+		      recognizer.cancel();
+		      return;
+		    }
+		    const action = recognizer.end(touch.clientX, touch.clientY);
+		    if (action === null || !host.enabled()) return;
+		    const expanded = host.expanded();
+		    if (action === "open" && !expanded || action === "close" && expanded) host.toggle();
+		  };
+		  const onCancel = () => recognizer.cancel();
+		  target.addEventListener("touchstart", onStart, passive);
+		  target.addEventListener("touchmove", onMove, passive);
+		  target.addEventListener("touchend", onEnd, passive);
+		  target.addEventListener("touchcancel", onCancel, passive);
+		  return () => {
+		    target.removeEventListener("touchstart", onStart, passive);
+		    target.removeEventListener("touchmove", onMove, passive);
+		    target.removeEventListener("touchend", onEnd, passive);
+		    target.removeEventListener("touchcancel", onCancel, passive);
+		  };
+		}
+
+		// src/client/viewport.ts
+		var VIEWPORT_ADDITIONS = {
+		  "viewport-fit": "cover",
+		  "interactive-widget": "resizes-content"
+		};
+		var APP_META = [
+		  ["apple-mobile-web-app-capable", "yes"],
+		  ["mobile-web-app-capable", "yes"],
+		  ["apple-mobile-web-app-title", "DSH"]
+		];
+		function mergeViewportContent(content, additions) {
+		  const entries = [];
+		  for (const part of content.split(",")) {
+		    const [rawKey, ...rest] = part.split("=");
+		    const key = rawKey?.trim().toLowerCase() ?? "";
+		    if (key.length === 0) continue;
+		    entries.push([key, rest.join("=").trim()]);
+		  }
+		  for (const [key, value] of Object.entries(additions)) {
+		    const found = entries.find((entry) => entry[0] === key);
+		    if (found === void 0) entries.push([key, value]);
+		    else found[1] = value;
+		  }
+		  return entries.map(([key, value]) => value.length > 0 ? `${key}=${value}` : key).join(", ");
+		}
+		var OWNER = "@1outres/dsh-plugin-mobile";
+		function installMeta(doc) {
+		  const added = [];
+		  let viewport = doc.querySelector('meta[name="viewport"]');
+		  let original;
+		  if (viewport === null) {
+		    viewport = doc.createElement("meta");
+		    viewport.name = "viewport";
+		    viewport.content = mergeViewportContent(
+		      "width=device-width, initial-scale=1",
+		      VIEWPORT_ADDITIONS
+		    );
+		    viewport.dataset.plugin = OWNER;
+		    doc.head.append(viewport);
+		    added.push(viewport);
+		  } else {
+		    original = viewport.content;
+		    viewport.content = mergeViewportContent(original, VIEWPORT_ADDITIONS);
+		  }
+		  for (const [name, content] of APP_META) {
+		    if (doc.querySelector(`meta[name="${name}"]`) !== null) continue;
+		    const tag = doc.createElement("meta");
+		    tag.name = name;
+		    tag.content = content;
+		    tag.dataset.plugin = OWNER;
+		    doc.head.append(tag);
+		    added.push(tag);
+		  }
+		  const patched = viewport;
+		  return () => {
+		    if (original !== void 0) patched.content = original;
+		    for (const tag of added) tag.remove();
+		  };
+		}
+		var KEYBOARD_THRESHOLD = 120;
+		function measureViewport(viewport, baseline, innerHeight) {
+		  if (Math.abs(viewport.scale - 1) > 0.01) {
+		    return {
+		      height: innerHeight,
+		      keyboard: false,
+		      baseline: baseline ?? { width: viewport.width, height: innerHeight }
+		    };
+		  }
+		  const next = baseline === void 0 || Math.abs(baseline.width - viewport.width) > 1 ? { width: viewport.width, height: Math.max(viewport.height, innerHeight) } : { width: baseline.width, height: Math.max(baseline.height, viewport.height) };
+		  return {
+		    height: viewport.height,
+		    keyboard: next.height - viewport.height > KEYBOARD_THRESHOLD,
+		    baseline: next
+		  };
+		}
+		var HEIGHT_VARIABLE = "--dsh-mobile-vvh";
+		var KEYBOARD_ATTRIBUTE = "data-dsh-keyboard";
+		function trackViewport(win, root) {
+		  const viewport = win.visualViewport;
+		  if (viewport === void 0 || viewport === null) return () => {
+		  };
+		  let baseline;
+		  let frame;
+		  const update = () => {
+		    frame = void 0;
+		    const measure = measureViewport(viewport, baseline, win.innerHeight);
+		    baseline = measure.baseline;
+		    root.style.setProperty(HEIGHT_VARIABLE, `${Math.round(measure.height)}px`);
+		    root.toggleAttribute(KEYBOARD_ATTRIBUTE, measure.keyboard);
+		    if (measure.keyboard && win.scrollY !== 0) win.scrollTo(0, 0);
+		  };
+		  const schedule = () => {
+		    frame ?? (frame = win.requestAnimationFrame(update));
+		  };
+		  viewport.addEventListener("resize", schedule);
+		  viewport.addEventListener("scroll", schedule);
+		  update();
+		  return () => {
+		    viewport.removeEventListener("resize", schedule);
+		    viewport.removeEventListener("scroll", schedule);
+		    if (frame !== void 0) win.cancelAnimationFrame(frame);
+		    root.style.removeProperty(HEIGHT_VARIABLE);
+		    root.removeAttribute(KEYBOARD_ATTRIBUTE);
+		  };
+		}
+
+		// src/client/index.tsx
+		var import_jsx_runtime4 = require("react/jsx-runtime");
+		var inject = ["slots", "locale", "configForms", "layout"];
+		var PLUGIN_ID = "@1outres/dsh-plugin-mobile";
+		var HEADER_SLOT = "conversation.header.leading";
+		var OVERLAY_SLOT = "shell.overlay";
+		var SETTINGS_SLOT = "settings.section";
+		function apply(ctx) {
+		  ctx.effect(() => ctx.locale.register(NAMESPACE, { en, zh, ja }), "mobile: dictionaries");
+		  const t = ctx.locale.bind(NAMESPACE);
+		  ctx.effect(() => {
+		    const tag = document.createElement("style");
+		    tag.dataset.plugin = PLUGIN_ID;
+		    tag.dataset.pluginCss = `${PLUGIN_ID}/mobile.css`;
+		    tag.textContent = MOBILE_CSS;
+		    document.head.append(tag);
+		    return () => {
+		      tag.remove();
+		    };
+		  }, "mobile: stylesheet");
+		  ctx.effect(() => installMeta(document), "mobile: viewport metadata");
+		  const form = ctx.configForms.get(NAMESPACE);
+		  let config = normalizeConfig(form.getSnapshot().value);
+		  const mode = createModeStore(
+		    (query) => window.matchMedia(query),
+		    () => config
+		  );
+		  ctx.effect(() => () => mode.dispose(), "mobile: layout mode");
+		  ctx.effect(() => {
+		    const root = document.documentElement;
+		    let stopViewport;
+		    const sync = () => {
+		      const state = mode.getSnapshot();
+		      root.toggleAttribute(MOBILE_ATTRIBUTE, state.mobile);
+		      root.toggleAttribute(TOUCH_ATTRIBUTE, state.touch && config.mode !== "off");
+		      root.toggleAttribute(NO_PULL_ATTRIBUTE, state.mobile && config.blockPullToRefresh);
+		      const fit = state.mobile && config.fitKeyboard;
+		      if (fit && stopViewport === void 0) {
+		        stopViewport = trackViewport(window, root);
+		      } else if (!fit && stopViewport !== void 0) {
+		        stopViewport();
+		        stopViewport = void 0;
+		      }
+		    };
+		    const offMode = mode.subscribe(sync);
+		    const offForm = form.subscribe(() => {
+		      config = normalizeConfig(form.getSnapshot().value);
+		      mode.refresh();
+		      sync();
+		    });
+		    sync();
+		    return () => {
+		      offMode();
+		      offForm();
+		      stopViewport?.();
+		      root.removeAttribute(MOBILE_ATTRIBUTE);
+		      root.removeAttribute(TOUCH_ATTRIBUTE);
+		      root.removeAttribute(NO_PULL_ATTRIBUTE);
+		    };
+		  }, "mobile: page layout");
+		  const toggle = () => {
+		    try {
+		      ctx.layout.toggleSidebar();
+		    } catch (error) {
+		      console.warn("mobile: could not toggle the sidebar", error);
+		    }
+		  };
+		  const face = { mode, toggle };
+		  ctx.effect(
+		    () => installEnterNewline(window, () => {
+		      const state = mode.getSnapshot();
+		      return state.mobile && state.touch && config.enterKey === "newline";
+		    }),
+		    "mobile: Enter adds a line"
+		  );
+		  ctx.effect(
+		    () => installFocusGuard(document, () => {
+		      const state = mode.getSnapshot();
+		      return state.mobile && state.touch && !config.autoFocusComposer;
+		    }),
+		    "mobile: keyboard stays closed until the composer is tapped"
+		  );
+		  ctx.effect(
+		    () => installSwipe(document, {
+		      enabled: () => mode.getSnapshot().mobile && config.swipe,
+		      expanded: () => isExpanded(findFrame(document)),
+		      blocked: (target) => swipeBlocked(
+		        target,
+		        document,
+		        (element) => getComputedStyle(element).overflowX
+		      ),
+		      toggle
+		    }),
+		    "mobile: drawer swipe"
+		  );
+		  ctx.effect(
+		    () => ctx.slots.inject(
+		      HEADER_SLOT,
+		      () => ctx.slots.register(
+		        { name: HEADER_SLOT, locale: NAMESPACE, inject: () => face },
+		        HeaderMenuButton
+		      )
+		    ),
+		    "mobile: header menu button"
+		  );
+		  ctx.effect(
+		    () => ctx.slots.inject(
+		      OVERLAY_SLOT,
+		      () => ctx.slots.register(
+		        { name: OVERLAY_SLOT, id: "mobile-drawer", locale: NAMESPACE, inject: () => face },
+		        DrawerOverlay
+		      )
+		    ),
+		    "mobile: drawer scrim"
+		  );
+		  const Page = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SettingsPage, { form, mode, t });
+		  ctx.effect(
+		    () => ctx.configForms.whileServed(
+		      [NAMESPACE],
+		      () => ctx.slots.inject(
+		        SETTINGS_SLOT,
+		        () => ctx.slots.register(
+		          {
+		            name: SETTINGS_SLOT,
+		            id: "mobile",
+		            order: 62,
+		            label: () => t("nav"),
+		            locale: NAMESPACE
+		          },
+		          Page
+		        )
+		      )
+		    ),
+		    "mobile: settings section"
+		  );
+		}
+
+		return module.exports;
+	}
+});