@linkshell/host 0.4.7 → 0.4.9

package/dist/host/src/screen-viewer.js

@@ -30,13 +30,16 @@ const ICONS = {
     down: icon('<path d="m6 9.5 6 6 6-6"/>'),
     quick: icon('<path d="M13 2.8 5.2 13.6H11l-1 7.6 7.8-10.8H12Z"/>'),
     compose: icon('<path d="M4 5h16v10.5H9.5L5.5 19v-3.5H4Z"/><path d="M8 9h8M8 12h5"/>'),
+    info: icon('<circle cx="12" cy="12" r="8.5"/><path d="M12 11v6M12 7.2v.6"/>'),
     close: icon('<path d="m6.5 6.5 11 11M17.5 6.5l-11 11"/>'),
 };
 const STYLE = String.raw `
   * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
-  html, body { margin: 0; height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; }
+  html, body { margin: 0; height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #000; overflow: hidden; overscroll-behavior: none; }
   body { position: fixed; inset: 0; color: #fff; font: 15px/1.45 -apple-system, system-ui, "PingFang SC", "Noto Sans CJK SC", sans-serif; }
   #stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
+  #picture { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
+  #stage.presenting #pointer { opacity: 0 !important; }
   canvas, video { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
   video { object-fit: fill; pointer-events: none; }
   #pointer { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; pointer-events: none;
@@ -50,51 +53,62 @@ const STYLE = String.raw `
     color: rgba(255,255,255,0.72); text-align: center; pointer-events: none; }
   .glass { background: rgba(38,38,42,0.74); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
     border: 0.5px solid rgba(255,255,255,0.16); box-shadow: 0 8px 28px rgba(0,0,0,0.38); }
-  #bar { position: absolute; display: flex; gap: 2px; padding: 4px; border-radius: 26px; transition: opacity 0.4s; }
+  #control-shell { position: absolute; pointer-events: none; z-index: 1; will-change: width, height, transform, border-radius, opacity; }
+  #bar { position: absolute; z-index: 2; width: max-content; height: max-content; display: flex; gap: 2px; padding: 4px; border-radius: 26px; overflow: auto; scrollbar-width: none; touch-action: pan-x pan-y; }
   #bar.side { flex-direction: column; }
-  #bar.idle { opacity: 0.38; }
-  #bar.hidden, .gone { display: none !important; }
-  .tool { width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.92); }
+  #orb { position: absolute; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; touch-action: none; z-index: 3; }
+  .orb-core { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
+  .orb-core svg { width: 18px; height: 18px; }
+  .gone { display: none !important; }
+  .tool { flex: none; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.92); }
   .tool.on { background: #fff; color: #111; }
   .tool:active { background: rgba(255,255,255,0.18); }
   .tool.on:active { background: rgba(255,255,255,0.82); }
-  #menu { position: absolute; width: 248px; padding: 6px; border-radius: 20px; }
-  .choice { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; }
+  #menu, #connection { position: absolute; z-index: 6; width: 248px; padding: 6px; border-radius: 20px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
+  #menu.horizontal { display: flex; gap: 4px; width: 468px; }
+  #menu.horizontal .choice { flex: 1; min-width: 0; gap: 8px; padding: 9px 8px; }
+  #menu.horizontal .choice span { font-size: calc(11px * var(--text-scale, 1)); white-space: nowrap; }
+  .choice { display: flex; align-items: center; min-height: 52px; gap: 10px; padding: 8px 10px; border-radius: 12px; transition: background-color 160ms ease-out; }
+  .choice i { display: flex; flex: none; }
+  .choice i svg { width: 20px; height: 20px; }
+  #connectionhead { display: flex; align-items: center; padding-left: 10px; font-size: calc(13px * var(--text-scale, 1)); color: rgba(255,255,255,0.7); }
+  #connectionhead span { flex: 1; }
   .choice:active { background: rgba(255,255,255,0.12); }
   .choice.on { background: rgba(255,255,255,0.16); }
-  .choice b { display: block; font-weight: 600; font-size: 15px; }
-  .choice span { display: block; font-size: 12.5px; color: rgba(255,255,255,0.62); }
-  #status { margin-top: 6px; padding: 8px 12px 5px; border-top: 0.5px solid rgba(255,255,255,0.12); font-size: 12px; line-height: 1.5;
+  .choice b { display: block; font-weight: 600; font-size: calc(15px * var(--text-scale, 1)); }
+  .choice span { display: block; font-size: calc(12.5px * var(--text-scale, 1)); color: rgba(255,255,255,0.62); }
+  #status { padding: 2px 10px 10px; font-size: calc(12px * var(--text-scale, 1)); line-height: 1.5;
     color: rgba(255,255,255,0.5); white-space: pre-line; font-variant-numeric: tabular-nums; }
   #toast { position: absolute; left: 50%; max-width: min(86vw, 420px); width: max-content; transform: translateX(-50%); padding: 10px 16px; border-radius: 18px;
-    font-size: 13.5px; text-align: center; color: rgba(255,255,255,0.94); pointer-events: none; opacity: 0; transition: opacity 0.3s; }
+    font-size: calc(13.5px * var(--text-scale, 1)); text-align: center; color: rgba(255,255,255,0.94); pointer-events: none; opacity: 0; transition: opacity 0.3s; }
   #toast.on { opacity: 1; }
-  #keys { position: absolute; left: 0; right: 0; height: 46px; display: flex; align-items: center; gap: 4px; padding: 0 5px;
+  #keys { position: absolute; z-index: 4; left: 0; right: 0; height: 56px; display: flex; align-items: center; gap: 4px; padding: 0 5px; overflow-x: auto; overscroll-behavior: contain; touch-action: pan-x;
     background: rgba(28,28,30,0.96); border-top: 0.5px solid rgba(255,255,255,0.14); }
-  .key { flex: 1 1 0; min-width: 0; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
-    background: rgba(255,255,255,0.13); color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
-  .key.word { font-size: 12.5px; }
+  .key { flex: 1 0 44px; min-width: 44px; height: calc(44px * var(--text-scale, 1)); border-radius: 8px; display: flex; align-items: center; justify-content: center;
+    background: rgba(255,255,255,0.13); color: #fff; font-size: calc(15px * var(--text-scale, 1)); font-variant-numeric: tabular-nums; }
+  .key.word { font-size: calc(12.5px * var(--text-scale, 1)); }
   .key svg { width: 20px; height: 20px; }
   .key:active { background: rgba(255,255,255,0.3); }
   .key.on { background: #fff; color: #111; }
-  #sheet { position: absolute; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; }
+  #sheet { position: absolute; z-index: 4; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; }
   #sheethead { display: flex; align-items: center; gap: 2px; padding: 8px 6px 4px 10px; }
-  #compose { flex: 1; min-width: 0; height: 40px; margin-right: 4px; border-radius: 20px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
-    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.62); font-size: 14.5px; white-space: nowrap; }
+  #compose { flex: 1; min-width: 0; min-height: 44px; margin-right: 4px; border-radius: 20px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
+    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.62); font-size: calc(14.5px * var(--text-scale, 1)); white-space: nowrap; }
   #compose:active { background: rgba(255,255,255,0.2); }
   #compose svg { width: 19px; height: 19px; flex: none; }
   #actions, #maker { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 0 10px 12px; }
-  .group { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 7px; font-size: 12.5px; color: rgba(255,255,255,0.55); }
-  .group i { font-style: normal; padding: 4px 8px; margin: -4px -4px -4px 0; border-radius: 10px; color: rgba(255,255,255,0.86); }
+  .group { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 7px; font-size: calc(12.5px * var(--text-scale, 1)); color: rgba(255,255,255,0.55); }
+  .group i { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font-style: normal; padding: 4px 8px; margin: -4px -4px -4px 0; border-radius: 10px; color: rgba(255,255,255,0.86); }
   .group i:active { background: rgba(255,255,255,0.16); }
   .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
-  .tiles.six { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 6px; }
+  .tiles.six { grid-template-columns: repeat(auto-fit, minmax(calc(44px * var(--text-scale, 1)), 1fr)); margin-bottom: 6px; }
   #sheet.narrow .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  #sheet.narrow .tiles.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  #sheet.folded .tiles:not(.six) { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
+  #sheet.narrow .tiles.six { grid-template-columns: repeat(auto-fit, minmax(calc(44px * var(--text-scale, 1)), 1fr)); }
   .tile { position: relative; min-height: 52px; padding: 6px 3px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
     background: rgba(255,255,255,0.1); text-align: center; }
-  .tile b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 13.5px; line-height: 1.3; }
-  .tile span { font-size: 11.5px; line-height: 1.3; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
+  .tile b { max-width: 100%; overflow: hidden; white-space: normal; overflow-wrap: anywhere; font-weight: 500; font-size: calc(13.5px * var(--text-scale, 1)); line-height: 1.3; }
+  .tile span { font-size: calc(11.5px * var(--text-scale, 1)); line-height: 1.3; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
   .tiles.six .tile { min-height: 44px; }
   .tile:active, .tile.hit { background: rgba(255,255,255,0.3); }
   .tile.on { background: #fff; color: #111; }
@@ -103,38 +117,151 @@ const STYLE = String.raw `
   .tile.sure span { color: rgba(255,255,255,0.86); }
   .tile.add { background: transparent; border: 1px dashed rgba(255,255,255,0.3); color: rgba(255,255,255,0.78); }
   .tile.loose::after { content: "×"; position: absolute; top: -5px; right: -4px; width: 19px; height: 19px; border-radius: 10px; background: #d9392f;
-    font-size: 14px; line-height: 18px; text-align: center; }
+    font-size: calc(14px * var(--text-scale, 1)); line-height: 18px; text-align: center; }
   .field { display: flex; align-items: center; gap: 12px; height: 46px; margin-top: 6px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,0.1); }
-  .field span { flex: none; font-size: 14px; color: rgba(255,255,255,0.62); }
+  .field span { flex: none; font-size: calc(14px * var(--text-scale, 1)); color: rgba(255,255,255,0.62); }
   .field select, .field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; border-radius: 0; background: transparent; color: #fff;
-    font: inherit; font-size: 16px; text-align: right; text-align-last: right; -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text; }
+    font: inherit; font-size: calc(16px * var(--text-scale, 1)); text-align: right; text-align-last: right; -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text; }
   .field input::placeholder { color: rgba(255,255,255,0.36); }
   .ends { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
-  .soft { flex: none; height: 38px; padding: 0 13px; border-radius: 19px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.13);
-    font-size: 14px; white-space: nowrap; }
+  .soft { flex: none; min-height: 44px; padding: 0 13px; border-radius: 19px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.13);
+    font-size: calc(14px * var(--text-scale, 1)); white-space: nowrap; }
   .soft:active { background: rgba(255,255,255,0.3); }
   .soft.strong { padding: 0 17px; background: #fff; color: #111; font-weight: 600; }
   .soft.strong:active { background: rgba(255,255,255,0.82); }
   .soft svg { width: 20px; height: 20px; }
   .spring { flex: 1; }
-  #composer { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; gap: 8px; background: rgba(28,28,30,0.96); border-top: 0.5px solid rgba(255,255,255,0.14); }
+  #composer { position: absolute; z-index: 4; left: 0; right: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; background: rgba(28,28,30,0.96); border-top: 0.5px solid rgba(255,255,255,0.14); }
   #composer.wide { flex-direction: row; align-items: flex-end; }
   #wordsbox { position: relative; flex: none; }
   #composer.wide #wordsbox { flex: 1; min-width: 0; }
   #words { display: block; width: 100%; height: 66px; margin: 0; padding: 9px 12px; border: 0; outline: 0; resize: none; border-radius: 12px; background: rgba(255,255,255,0.12);
-    color: #fff; font: inherit; font-size: 16px; line-height: 1.4; -webkit-user-select: text; user-select: text; }
+    color: #fff; font: inherit; font-size: calc(16px * var(--text-scale, 1)); line-height: 1.4; -webkit-user-select: text; user-select: text; }
   #composer.wide #words { height: 44px; }
-  #wordshint { position: absolute; left: 12px; right: 12px; top: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; line-height: 1.4;
+  #wordshint { position: absolute; left: 12px; right: 12px; top: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(16px * var(--text-scale, 1)); line-height: 1.4;
     color: rgba(255,255,255,0.36); pointer-events: none; }
-  #sendrow { display: flex; align-items: center; gap: 6px; }
+  #sendrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
   #typing, #shortcut { position: absolute; left: 0; top: 0; width: 2px; height: 2px; padding: 0; border: 0; outline: 0; resize: none; opacity: 0;
-    background: transparent; color: transparent; caret-color: transparent; font-size: 16px; -webkit-user-select: text; user-select: text; }
+    background: transparent; color: transparent; caret-color: transparent; font-size: calc(16px * var(--text-scale, 1)); -webkit-user-select: text; user-select: text; }
 `;
 /**
  * The parts of the page's script that only work things out, with nothing of the page in them:
  * exported so that they can be tried without a browser.
  */
 export const VIEWER_LOGIC = String.raw `
+/** All controls share the same usable rectangle, including asymmetric system chrome. */
+function usableViewport(v, inset) {
+  const left = Math.max(0, inset.left || 0), right = Math.max(0, inset.right || 0);
+  const top = Math.max(0, inset.top || 0), bottom = Math.max(0, inset.bottom || 0);
+  return { x: v.x + left, y: v.y + top, w: Math.max(1, v.w - left - right), h: Math.max(1, v.h - top - bottom) };
+}
+function containedBox(safe, width, height, x, y, gap = 8) {
+  const w = Math.min(width, Math.max(1, safe.w - gap * 2)), h = Math.min(height, Math.max(1, safe.h - gap * 2));
+  return { x: Math.max(safe.x + gap, Math.min(x, safe.x + safe.w - gap - w)), y: Math.max(safe.y + gap, Math.min(y, safe.y + safe.h - gap - h)), w, h };
+}
+
+/** Try each edge of the toolbar, preferring the black outside the fitted picture. */
+function anchoredPanel(safe, picture, anchor, width, height) {
+  const overlap = (a, b) => Math.max(0, Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x)) * Math.max(0, Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y));
+  const candidates = [
+    [anchor.x - width - 10, anchor.y + (anchor.h - height) / 2],
+    [anchor.x + anchor.w + 10, anchor.y + (anchor.h - height) / 2],
+    [anchor.x + (anchor.w - width) / 2, anchor.y - height - 10],
+    [anchor.x + (anchor.w - width) / 2, anchor.y + anchor.h + 10],
+  ].map(([x, y]) => containedBox(safe, width, height, x, y));
+  const score = (box) => overlap(box, picture) + overlap(box, anchor) * 100;
+  return candidates.reduce((best, box) => score(box) < score(best) ? box : best);
+}
+
+/** FLIP keeps the live media at its visible position while its destination changes. */
+function presentationFlip(from, to, reduceMotion) {
+  if (reduceMotion || !from || !to || ![from.x, from.y, from.w, from.h, to.x, to.y, to.w, to.h].every(Number.isFinite) || Math.min(from.w, from.h, to.w, to.h) <= 0) return null;
+  const sx = from.w / to.w, sy = from.h / to.h;
+  return { x: from.x - to.x * sx, y: from.y - to.y * sy, sx, sy };
+}
+
+/** Exact damped-spring integration keeps momentum when the destination changes mid-flight. */
+function presentationSpring(current, velocity, target, seconds, frequency = 32) {
+  const damping = 0.8;
+  const decay = frequency * damping, oscillation = frequency * Math.sqrt(1 - damping * damping);
+  const dt = Math.max(0, Math.min(seconds, 0.064)), envelope = Math.exp(-decay * dt);
+  const cosine = Math.cos(oscillation * dt), sine = Math.sin(oscillation * dt);
+  const next = {}, speed = {};
+  let settled = true;
+  for (const key of ["x", "y", "w", "h"]) {
+    const displacement = current[key] - target[key], v = velocity[key];
+    next[key] = target[key] + envelope * (displacement * cosine + (v + decay * displacement) / oscillation * sine);
+    speed[key] = envelope * (v * cosine - (decay * v + frequency * frequency * displacement) / oscillation * sine);
+    if (Math.abs(next[key] - target[key]) > 0.05 || Math.abs(speed[key]) > 0.4) settled = false;
+  }
+  return { current: next, velocity: speed, settled };
+}
+
+/** The same panel enters from its available edge in both narrow and wide layouts. */
+function sheetPresentation(progress, width, height, dock) {
+  const remaining = 1 - progress;
+  const x = dock === "left" ? -(width + 24) * remaining : dock === "right" ? (width + 24) * remaining : 0;
+  const y = dock === "bottom" ? (height + 24) * remaining : dock === "top" ? -(height + 24) * remaining : 0;
+  return { x, y, opacity: Math.max(0, Math.min(1, progress)) };
+}
+
+function popoverPresentation(progress, dx, dy) {
+  return { x: dx * (1 - progress), y: dy * (1 - progress), scale: 0.94 + 0.06 * progress, opacity: Math.max(0, Math.min(1, progress)) };
+}
+function controlCanCollapse(state) {
+  return !!state.fullscreen && !state.menu && !state.sheet && !state.keyboard && !state.pressed && !state.presenting;
+}
+function orbBounds(safe, anchor, point) {
+  const x = point ? safe.x + 8 + Math.max(0, Math.min(1, point.u)) * Math.max(0, safe.w - 60) : anchor.x + anchor.w / 2 - 22;
+  const y = point ? safe.y + 8 + Math.max(0, Math.min(1, point.v)) * Math.max(0, safe.h - 60) : anchor.y + anchor.h / 2 - 22;
+  return containedBox(safe, 44, 44, x, y);
+}
+
+/** One glass surface changes shape; its contents can fade without swapping backgrounds. */
+function controlsMorph(progress, anchor, ball) {
+  const p = Math.max(0, Math.min(1, progress)), phase = Math.min(1, p / 0.3);
+  const x = ball.x + 6 + (anchor.x - ball.x - 6) * progress;
+  const y = ball.y + 6 + (anchor.y - ball.y - 6) * progress;
+  const w = Math.max(1, 32 + (anchor.w - 32) * progress), h = Math.max(1, 32 + (anchor.h - 32) * progress);
+  return { x, y, w, h, radius: Math.min(w, h) / 2, shellOpacity: 0.3 + 0.7 * phase * phase * (3 - 2 * phase),
+    dx: x + w / 2 - anchor.x - anchor.w / 2, dy: y + h / 2 - anchor.y - anchor.h / 2,
+    contentScale: Math.max(0.01, Math.min(w / Math.max(1, anchor.w), h / Math.max(1, anchor.h))),
+    barOpacity: p * p, orbOpacity: 1 - p };
+}
+
+/** Keep controls in one usable pane while the live desktop remains continuous across a fold. */
+function interactionViewport(viewport, insets, divisions, preferred) {
+  const safe = usableViewport(viewport, insets);
+  let regions = [safe];
+  for (const reported of Array.isArray(divisions) ? divisions : []) {
+    if (!reported.active || ![reported.x, reported.y, reported.width, reported.height].every(Number.isFinite)) continue;
+    if (reported.width < 0 || reported.height < 0) continue;
+    const division = { ...reported, x: viewport.x + reported.x, y: viewport.y + reported.y };
+    const vertical = division.height > division.width;
+    const next = [];
+    for (const region of regions) {
+      const right = region.x + region.w, bottom = region.y + region.h;
+      if (division.x >= right || division.y >= bottom || division.x + division.width <= region.x || division.y + division.height <= region.y) { next.push(region); continue; }
+      if (vertical) {
+        if (division.x > region.x) next.push({ x: region.x, y: region.y, w: division.x - region.x, h: region.h });
+        if (division.x + division.width < right) next.push({ x: division.x + division.width, y: region.y, w: right - division.x - division.width, h: region.h });
+      } else {
+        if (division.y > region.y) next.push({ x: region.x, y: region.y, w: region.w, h: division.y - region.y });
+        if (division.y + division.height < bottom) next.push({ x: region.x, y: division.y + division.height, w: region.w, h: bottom - division.y - division.height });
+      }
+    }
+    if (next.length) regions = next;
+  }
+  const usable = regions.filter(region => region.w >= Math.min(180, safe.w) && region.h >= Math.min(80, safe.h));
+  const candidates = usable.length ? usable : regions;
+  if (preferred && Number.isFinite(preferred.x) && Number.isFinite(preferred.y)) {
+    const distance = region => Math.hypot(Math.max(region.x - preferred.x, 0, preferred.x - region.x - region.w), Math.max(region.y - preferred.y, 0, preferred.y - region.y - region.h));
+    return candidates.reduce((best, region) => distance(region) <= distance(best) ? region : best);
+  }
+  // The outer right edge and the lower tabletop pane are the natural default reach areas.
+  return candidates[candidates.length - 1] || safe;
+}
+
 /** Undoes the Gray code the time on a clock strip is written in. */
 function fromGray(gray) {
   let n = gray;
@@ -282,8 +409,8 @@ function cleanShortcuts(list) {
 `;
 const BODY = String.raw `
 const $ = (id) => document.getElementById(id);
-const stage = $("stage"), canvas = $("screen"), ctx = canvas.getContext("2d"), video = $("video"), pointer = $("pointer");
-const note = $("note"), bar = $("bar"), menu = $("menu"), toast = $("toast"), keys = $("keys"), typing = $("typing"), shortcut = $("shortcut");
+const stage = $("stage"), picture = $("picture"), canvas = $("screen"), ctx = canvas.getContext("2d"), video = $("video"), pointer = $("pointer");
+const note = $("note"), bar = $("bar"), controlShell = $("control-shell"), orb = $("orb"), menu = $("menu"), connection = $("connection"), toast = $("toast"), keys = $("keys"), typing = $("typing"), shortcut = $("shortcut");
 const sheet = $("sheet"), actions = $("actions"), maker = $("maker"), naming = $("makername"), composer = $("composer"), words = $("words");
 const query = new URLSearchParams(location.search);
 const app = window.ReactNativeWebView;
@@ -295,7 +422,7 @@ const android = /Android/i.test(navigator.userAgent);
 const MODES = ["view", "trackpad", "touch"];
 const HINTS = {
   view: "只看：双指缩放，单指移动画面",
-  trackpad: "触控板：滑动移动指针，轻点点击 · 双指轻点右键 · 双指滑动滚动 · 轻点两下并按住拖拽",
+  trackpad: "触控板：滑动指针 · 轻点点击 · 双指轻点右键 · 双指滑动滚动 · 轻点两下并按住拖拽",
   touch: "点按：点哪里就点哪里 · 长按右键 · 双指滑动滚动 · 轻点两下并按住拖拽",
 };
 let stored = null;
@@ -658,54 +785,407 @@ function viewport() {
 // What a browser's window has been seen to do: a keyboard coming up makes it shorter, on a phone (see keyboardIsUp).
 const seen = { w: 0, h: 0, follows: false };
 
+const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+let sheetTransition = null, sheetDock = "bottom";
+const presentation = { active: false, target: null, geometry: "", current: null, velocity: { x: 0, y: 0, w: 0, h: 0 }, destination: null, waiting: false, frame: 0, time: null, timer: 0 };
+function visiblePicture() {
+  if (!content.w) return null;
+  const rect = (live ? video : canvas).getBoundingClientRect();
+  return { x: rect.left, y: rect.top, w: rect.width, h: rect.height };
+}
+function finishPresentation() {
+  clearTimeout(presentation.timer);
+  cancelAnimationFrame(presentation.frame);
+  picture.style.transform = "";
+  sheetTransition = null;
+  sheet.style.transform = sheet.style.opacity = sheet.style.pointerEvents = "";
+  sheet.classList.toggle("gone", !sheetOpen);
+  presentation.frame = 0;
+  presentation.current = null;
+  presentation.time = null;
+  presentation.active = false;
+  stage.classList.remove("presenting");
+  armControlsIdle();
+}
+function drawPresentation() {
+  if (sheetTransition) {
+    const panel = sheetPresentation(sheetTransition.progress, sheet.offsetWidth, sheet.offsetHeight, sheetDock);
+    sheet.style.transform = "translate(" + panel.x + "px," + panel.y + "px)";
+    sheet.style.opacity = String(panel.opacity);
+    sheet.style.pointerEvents = sheetTransition.target ? "auto" : "none";
+  }
+  if (!content.w) return;
+  const flip = presentationFlip(presentation.current, shown, reducedMotion.matches);
+  if (!flip) return finishPresentation();
+  picture.style.transform = "translate(" + flip.x + "px," + flip.y + "px) scale(" + flip.sx + "," + flip.sy + ")";
+}
+function stepPresentation(time) {
+  presentation.frame = 0;
+  if (!presentation.active) return;
+  if (presentation.time === null) presentation.time = time;
+  const seconds = (time - presentation.time) / 1000;
+  const next = presentationSpring(presentation.current, presentation.velocity, presentation.destination, seconds);
+  let sheetSettled = true;
+  if (sheetTransition) {
+    const panel = presentationSpring({ x: sheetTransition.progress, y: 0, w: 1, h: 1 }, { x: sheetTransition.velocity, y: 0, w: 0, h: 0 }, { x: sheetTransition.target, y: 0, w: 1, h: 1 }, seconds);
+    sheetTransition.progress = panel.current.x;
+    sheetTransition.velocity = panel.velocity.x;
+    sheetSettled = Math.abs(panel.current.x - sheetTransition.target) < 0.001 && Math.abs(panel.velocity.x) < 0.01;
+  }
+  presentation.time = time;
+  presentation.current = next.current;
+  presentation.velocity = next.velocity;
+  drawPresentation();
+  if (!presentation.active) return;
+  if (next.settled && sheetSettled && !presentation.waiting) return finishPresentation();
+  presentation.frame = requestAnimationFrame(stepPresentation);
+}
+function beginPresentation(full) {
+  if ((presentation.active && presentation.target === "fullscreen:" + full) || (!presentation.active && full === (app ? chrome.fullscreen : !!document.fullscreenElement))) return;
+  beginLayoutTransition("fullscreen:" + full);
+}
+function beginLayoutTransition(target) {
+  if (reducedMotion.matches) return finishPresentation();
+  // A held mouse button must be released before the displayed coordinate system moves.
+  wake();
+  closeMenu();
+  endOne();
+  if (mouseHeld && mouseHeld !== "pan") act({ t: "up", b: mouseHeld });
+  mouseHeld = null;
+  gesture = null;
+  touches.clear();
+  lastTap = null;
+  if (!presentation.active) {
+    presentation.current = visiblePicture() || { ...shown };
+    presentation.velocity = { x: 0, y: 0, w: 0, h: 0 };
+    presentation.destination = { ...shown };
+    presentation.time = null;
+  }
+  presentation.active = true;
+  presentation.target = target;
+  presentation.waiting = !sheetTransition;
+  presentation.geometry = JSON.stringify(shown);
+  stage.classList.add("presenting");
+  if (!presentation.frame) presentation.frame = requestAnimationFrame(stepPresentation);
+  clearTimeout(presentation.timer);
+  presentation.timer = setTimeout(finishPresentation, 350);
+}
+function beginSheetTransition(open) {
+  if (!reducedMotion.matches) {
+    sheetTransition = sheetTransition ? { ...sheetTransition, target: open ? 1 : 0 } : { progress: open ? 0 : 1, velocity: 0, target: open ? 1 : 0 };
+  }
+  beginLayoutTransition("shortcuts:" + open);
+}
+function animatePresentation() {
+  if (!presentation.active) return;
+  const geometry = JSON.stringify(shown);
+  if (geometry !== presentation.geometry) {
+    presentation.geometry = geometry;
+    presentation.destination = { ...shown };
+    presentation.waiting = false;
+    clearTimeout(presentation.timer);
+    presentation.timer = setTimeout(finishPresentation, 800);
+  }
+  // Layout may change while the status bar moves. Rebase the same live spring without resetting it.
+  drawPresentation();
+  if (presentation.active && !presentation.frame) presentation.frame = requestAnimationFrame(stepPresentation);
+}
+reducedMotion.addEventListener("change", () => { if (reducedMotion.matches) finishPresentation(); });
+window.linkshellPresent = beginPresentation;
+document.addEventListener("visibilitychange", () => { if (document.hidden) finishPresentation(); });
+
+// Scalar springs drive controls without touching the live video or remote pointer coordinates.
+const controlSprings = new Map(), popoverMotions = new Map(), pressedControls = new Set();
+let controlFrame = 0;
+const controlsVisibility = {};
+const controls = { value: 1, target: 1, visibility: 1, visibilityTarget: 1, timer: 0, point: null, preferred: null, safe: null, anchor: null, orb: null, drag: null };
+function advanceControls(time) {
+  controlFrame = 0;
+  for (const [key, motion] of [...controlSprings]) {
+    if (motion.time === null) motion.time = time;
+    // A changing glass silhouette needs more time to read than a button press.
+    const frequency = key === controls ? 17 : key === menu || key === connection ? 22 : 32;
+    const next = presentationSpring({ x: motion.value, y: 0, w: 1, h: 1 }, { x: motion.velocity, y: 0, w: 0, h: 0 }, { x: motion.target, y: 0, w: 1, h: 1 }, (time - motion.time) / 1000, frequency);
+    motion.time = time;
+    motion.value = next.current.x;
+    motion.velocity = next.velocity.x;
+    motion.render(motion.value);
+    if (Math.abs(motion.value - motion.target) < 0.001 && Math.abs(motion.velocity) < 0.01) {
+      controlSprings.delete(key);
+      motion.render(motion.target);
+      motion.done?.(motion.target);
+    }
+  }
+  if (controlSprings.size) controlFrame = requestAnimationFrame(advanceControls);
+}
+function controlSpring(key, target, initial, render, done) {
+  const motion = controlSprings.get(key) || { value: initial, velocity: 0, time: null };
+  Object.assign(motion, { target, render, done });
+  if (reducedMotion.matches) {
+    controlSprings.delete(key);
+    render(target);
+    done?.(target);
+    return;
+  }
+  controlSprings.set(key, motion);
+  render(motion.value);
+  if (!controlFrame) controlFrame = requestAnimationFrame(advanceControls);
+}
+function pressFeedback(element, down) {
+  if (down) {
+    pressedControls.add(element);
+    const v = viewport(), rect = element.getBoundingClientRect();
+    controls.preferred = { u: (rect.left + rect.width / 2 - v.x) / Math.max(1, v.w), v: (rect.top + rect.height / 2 - v.y) / Math.max(1, v.h) };
+  } else pressedControls.delete(element);
+  const pending = controlSprings.get(element);
+  // Even a tap released before the first animation frame gets a visible press, without delaying its action.
+  if (!down && !reducedMotion.matches && pending?.target === 0.92 && pending.value > 0.97) pending.velocity = Math.min(pending.velocity, -6);
+  controlSpring(element, down ? 0.92 : 1, 1, (scale) => { element.style.scale = reducedMotion.matches || scale === 1 ? "" : String(scale); });
+  if (down) clearTimeout(controls.timer); else armControlsIdle();
+}
+function popoverOpen(panel) {
+  return popoverMotions.has(panel) ? popoverMotions.get(panel).target === 1 : !panel.classList.contains("gone");
+}
+function drawPopover(panel) {
+  const motion = popoverMotions.get(panel);
+  if (!motion) return;
+  const trigger = $(panel === menu ? "mode" : "info").getBoundingClientRect();
+  const x = parseFloat(panel.style.left) || 0, y = parseFloat(panel.style.top) || 0;
+  const width = panel.offsetWidth, height = panel.offsetHeight;
+  const ax = trigger.left + trigger.width / 2, ay = trigger.top + trigger.height / 2;
+  const dx = ax - x - width / 2, dy = ay - y - height / 2, distance = Math.max(1, Math.hypot(dx, dy));
+  const frame = popoverPresentation(motion.value, dx / distance * 10, dy / distance * 10);
+  panel.style.transformOrigin = clamp(ax - x, 0, width) + "px " + clamp(ay - y, 0, height) + "px";
+  panel.style.transform = "translate(" + frame.x + "px," + frame.y + "px) scale(" + frame.scale + ")";
+  panel.style.opacity = String(frame.opacity);
+}
+function presentPopover(panel, open) {
+  if (!open && panel.classList.contains("gone")) return;
+  const existing = popoverMotions.get(panel);
+  const motion = existing || { value: open ? 0 : 1, target: open ? 1 : 0 };
+  motion.target = open ? 1 : 0;
+  popoverMotions.set(panel, motion);
+  panel.style.opacity = String(Math.max(0, Math.min(1, motion.value)));
+  panel.style.pointerEvents = open ? "auto" : "none";
+  panel.classList.remove("gone");
+  // Measure at its final location before revealing it.
+  layout();
+  controlSpring(panel, motion.target, motion.value, (value) => { motion.value = value; drawPopover(panel); }, (target) => {
+    if (target === 0) panel.classList.add("gone");
+    panel.style.transform = panel.style.transformOrigin = panel.style.opacity = panel.style.pointerEvents = "";
+    popoverMotions.delete(panel);
+    armControlsIdle();
+  });
+}
+function immersiveControls() { return app ? chrome.fullscreen : !!document.fullscreenElement; }
+function controlsMayCollapse() {
+  if (document.hidden) return false;
+  return controlCanCollapse({ fullscreen: immersiveControls(), menu: !menu.classList.contains("gone") || !connection.classList.contains("gone"), sheet: sheetOpen || !!sheetTransition || composerOpen, keyboard: keysOpen || chrome.keyboard === true, pressed: pressedControls.size > 0 || !!controls.drag, presenting: presentation.active });
+}
+function renderControls(value) {
+  controls.value = value;
+  if (!controls.safe || !controls.anchor || !controls.orb) return;
+  const visible = Math.max(0, Math.min(1, value)), anchor = controls.anchor, ball = controls.orb;
+  const groupOpacity = Math.max(0, Math.min(1, controls.visibility));
+  const hiddenByPanel = keysOpen || sheetOpen || composerOpen;
+  const morph = controlsMorph(value, anchor, ball);
+  controlShell.style.left = morph.x + "px";
+  controlShell.style.top = morph.y + "px";
+  controlShell.style.width = morph.w + "px";
+  controlShell.style.height = morph.h + "px";
+  controlShell.style.borderRadius = morph.radius + "px";
+  controlShell.style.opacity = String(Math.max(morph.shellOpacity, controls.drag ? 0.7 : 0) * groupOpacity);
+  bar.style.transformOrigin = "50% 50%";
+  bar.style.transform = "translate(" + morph.dx + "px," + morph.dy + "px) scale(" + morph.contentScale + ")";
+  bar.style.opacity = String(morph.barOpacity * groupOpacity);
+  bar.style.pointerEvents = visible > 0.6 && !hiddenByPanel ? "auto" : "none";
+  orb.style.left = ball.x + "px";
+  orb.style.top = ball.y + "px";
+  orb.style.opacity = String(morph.orbOpacity * (controls.drag ? 0.7 : 0.3) * groupOpacity);
+  orb.style.transform = "scale(" + (1 - 0.2 * visible) + ")";
+  orb.style.pointerEvents = immersiveControls() && visible < 0.5 && !hiddenByPanel ? "auto" : "none";
+}
+
+function expandControls(open) {
+  const target = open ? 1 : 0;
+  if (controls.target === target && (controlSprings.has(controls) || controls.value === target)) return;
+  controls.target = target;
+  controlSpring(controls, target, controls.value, renderControls);
+}
+function armControlsIdle() {
+  clearTimeout(controls.timer);
+  if (!controlsMayCollapse() || controls.target === 0) return;
+  controls.timer = setTimeout(() => { if (controlsMayCollapse()) expandControls(false); }, 3000);
+}
+function layoutControls(safe, anchor) {
+  if (controls.drag && controls.safe && ["x", "y", "w", "h"].some((key) => controls.safe[key] !== safe[key])) {
+    const id = controls.drag.id;
+    controls.drag = null;
+    pressFeedback(orb, false);
+    try { orb.releasePointerCapture(id); } catch {}
+  }
+  controls.safe = safe;
+  const fullscreen = immersiveControls();
+  const v = viewport();
+  const ball = fullscreen && controls.point && controls.preferred
+    ? containedBox(safe, 44, 44, v.x + controls.preferred.u * v.w - 22, v.y + controls.preferred.v * v.h - 22)
+    : orbBounds(safe, anchor, fullscreen ? controls.point : null);
+  if (fullscreen && controls.point) anchor = containedBox(safe, anchor.w, anchor.h, ball.x + 22 - anchor.w / 2, ball.y + 22 - anchor.h / 2);
+  controls.anchor = anchor;
+  controls.orb = ball;
+  const visibility = keysOpen || sheetOpen || composerOpen ? 0 : 1;
+  if (controls.visibilityTarget !== visibility) {
+    controls.visibilityTarget = visibility;
+    controlSpring(controlsVisibility, visibility, controls.visibility, (value) => { controls.visibility = value; renderControls(controls.value); });
+  }
+  if (!fullscreen || keysOpen || sheetOpen || composerOpen || !menu.classList.contains("gone") || !connection.classList.contains("gone")) expandControls(true);
+  renderControls(controls.value);
+  return anchor;
+}
+reducedMotion.addEventListener("change", () => {
+  if (!reducedMotion.matches) return;
+  for (const [key, motion] of [...controlSprings]) {
+    controlSprings.delete(key);
+    motion.render(motion.target);
+    motion.done?.(motion.target);
+  }
+  cancelAnimationFrame(controlFrame);
+  controlFrame = 0;
+});
+orb.addEventListener("pointerdown", (event) => {
+  event.preventDefault(); event.stopPropagation();
+  if (!controls.orb) return;
+  try { orb.setPointerCapture(event.pointerId); } catch {}
+  clearTimeout(controls.timer);
+  controls.drag = { id: event.pointerId, x: event.clientX, y: event.clientY, origin: { ...controls.orb }, moved: false };
+  pressFeedback(orb, true);
+  renderControls(controls.value);
+});
+orb.addEventListener("pointermove", (event) => {
+  event.preventDefault(); event.stopPropagation();
+  const drag = controls.drag;
+  if (!drag || drag.id !== event.pointerId || !controls.safe) return;
+  const dx = event.clientX - drag.x, dy = event.clientY - drag.y;
+  if (Math.hypot(dx, dy) > 6) drag.moved = true;
+  if (!drag.moved) return;
+  const v = viewport();
+  const preferred = { x: drag.origin.x + dx + 22, y: drag.origin.y + dy + 22 };
+  const safe = interactionViewport(v, chrome.insets || { top: 0, right: 0, bottom: 0, left: 0 }, chrome.divisions, preferred);
+  const point = containedBox(safe, 44, 44, preferred.x - 22, preferred.y - 22);
+  controls.point = { u: (point.x - safe.x - 8) / Math.max(1, safe.w - 60), v: (point.y - safe.y - 8) / Math.max(1, safe.h - 60) };
+  controls.preferred = { u: (point.x + 22 - v.x) / Math.max(1, v.w), v: (point.y + 22 - v.y) / Math.max(1, v.h) };
+  controls.safe = safe;
+  controls.orb = point;
+  renderControls(controls.value);
+});
+function releaseOrb(event, cancelled) {
+  event.preventDefault(); event.stopPropagation();
+  const drag = controls.drag;
+  if (!drag || drag.id !== event.pointerId) return;
+  controls.drag = null;
+  try { orb.releasePointerCapture(event.pointerId); } catch {}
+  pressFeedback(orb, false);
+  layout();
+  if (!cancelled && !drag.moved) wake();
+  else renderControls(controls.value);
+}
+orb.addEventListener("pointerup", (event) => releaseOrb(event, false));
+orb.addEventListener("pointercancel", (event) => releaseOrb(event, true));
+orb.addEventListener("lostpointercapture", (event) => releaseOrb(event, true));
+document.addEventListener("visibilitychange", () => {
+  if (!document.hidden) {
+    layout();
+    armControlsIdle();
+    return;
+  }
+  const captured = controls.drag?.id;
+  controls.drag = null;
+  if (captured !== undefined) { try { orb.releasePointerCapture(captured); } catch {} }
+  for (const element of [...pressedControls]) pressFeedback(element, false);
+  clearTimeout(controls.timer);
+});
+for (const name of ["touchstart", "touchend", "mousedown", "click"]) orb.addEventListener(name, (event) => { event.preventDefault(); event.stopPropagation(); }, { passive: false });
+
 function layout() {
-  const v = viewport(), inset = chrome.insets;
+  const v = viewport(), inset = chrome.insets, screenSafe = usableViewport(v, inset);
+  const preferred = controls.preferred ? { x: v.x + controls.preferred.u * v.w, y: v.y + controls.preferred.v * v.h } : null;
+  const safe = interactionViewport(v, inset, chrome.divisions, preferred);
+  const divided = safe.x !== screenSafe.x || safe.y !== screenSafe.y || safe.w !== screenSafe.w || safe.h !== screenSafe.h;
+  const horizontalDivision = divided && safe.h < screenSafe.h;
+  const controlInset = { top: safe.y - v.y, right: v.x + v.w - safe.x - safe.w, bottom: v.y + v.h - safe.y - safe.h, left: safe.x - v.x };
+  // The app keeps its authored type sizes while window geometry remains adaptive.
+  const fontScale = 1;
+  document.documentElement.style.setProperty("--text-scale", String(fontScale));
   if (v.w !== seen.w) Object.assign(seen, { w: v.w, h: v.h });
   else if (v.h > seen.h) seen.h = v.h;
   if (seen.h - v.h > 120 && fieldFocused()) seen.follows = true;
   // A phone lying down has its room beside the picture, not under it.
-  const wide = v.w > v.h && v.w >= 560;
+  const wide = !horizontalDivision && (divided || safe.w > safe.h && safe.w >= 560);
   // Beside the picture, things take the side without the camera.
-  const onLeft = chrome.clear ? chrome.clear === "left" : inset.left < inset.right;
+  const onLeft = chrome.clear ? chrome.clear === "left" : controlInset.left < controlInset.right;
   // Under the picture: the box text is written in, or the key bar (above the keyboard, or above the phone's
   // bottom edge when the keys are a real keyboard's), or the shortcuts. Each has the picture make room for it.
-  let under = 0, aside = 0;
+  let under = 0, aside = 0, over = 0;
   composer.classList.toggle("gone", !composerOpen);
-  composer.classList.toggle("wide", wide);
+  const composerWide = wide && safe.w >= 560;
+  composer.classList.toggle("wide", composerWide);
   keys.classList.toggle("gone", !keysOpen || composerOpen);
-  sheet.classList.toggle("gone", !sheetOpen);
+  sheet.classList.toggle("gone", !sheetOpen && !sheetTransition);
   sheet.classList.toggle("narrow", wide);
+  sheet.classList.toggle("folded", divided);
   if (composerOpen) {
-    composer.style.padding = "8px " + (8 + inset.right) + "px " + (8 + inset.bottom) + "px " + (8 + inset.left) + "px";
-    under = composer.offsetHeight;
-    composer.style.top = v.y + v.h - under + "px";
+    composer.style.maxHeight = safe.h + "px";
+    composer.style.left = divided ? safe.x + "px" : "0px";
+    composer.style.right = divided ? "auto" : "0px";
+    composer.style.width = divided ? safe.w + "px" : "";
+    composer.style.padding = divided ? "8px" : "8px " + (8 + inset.right) + "px " + (8 + inset.bottom) + "px " + (8 + inset.left) + "px";
+    words.style.height = "";
+    words.style.height = clamp(words.scrollHeight, (composerWide ? 44 : 66) * fontScale, (composerWide ? 66 : 132) * fontScale) + "px";
+    const height = composer.offsetHeight, top = divided ? safe.y + safe.h - height : v.y + v.h - height;
+    composer.style.top = top + "px";
+    if (horizontalDivision && safe.y + safe.h / 2 < v.y + v.h / 2) over = top + height - v.y + 8;
+    else under = v.y + v.h - top;
   } else if (keysOpen) {
-    under = 46 + inset.bottom;
-    keys.style.top = v.y + v.h - under + "px";
-    keys.style.height = under + "px";
-    // Clear of the camera, with the phone lying down.
-    keys.style.padding = "0 " + (5 + inset.right) + "px " + inset.bottom + "px " + (5 + inset.left) + "px";
-  } else if (sheetOpen && wide) {
-    // Clear of the screen's round corners; on a side that may have something of the system's in it, clear of that too.
-    const edge = chrome.clear ? 12 : Math.max(12, onLeft ? inset.left : inset.right), top = Math.max(inset.top, 12);
-    const width = Math.min(320, Math.round(v.w * 0.42));
+    const height = divided ? Math.min(56, safe.h) : 44 * fontScale + 12 + inset.bottom;
+    const top = divided ? safe.y + safe.h - height : v.y + v.h - height;
+    keys.style.left = divided ? safe.x + "px" : "0px";
+    keys.style.right = divided ? "auto" : "0px";
+    keys.style.width = divided ? safe.w + "px" : "";
+    keys.style.top = top + "px";
+    keys.style.height = height + "px";
+    keys.style.padding = divided ? "0 5px" : "0 " + (5 + inset.right) + "px " + inset.bottom + "px " + (5 + inset.left) + "px";
+    if (horizontalDivision && safe.y + safe.h / 2 < v.y + v.h / 2) over = top + height - v.y + 8;
+    else under = v.y + v.h - top;
+  } else if ((sheetOpen || sheetTransition) && wide) {
+    sheetDock = onLeft ? "left" : "right";
+    const edge = chrome.clear ? 12 : Math.max(12, onLeft ? controlInset.left : controlInset.right), top = Math.max(controlInset.top, 12);
+    const width = Math.min(320, Math.max(180, Math.round(safe.w * 0.42)), Math.max(1, safe.w - 24));
     sheet.style.width = width + "px";
-    sheet.style.height = Math.max(96, v.h - top - 12) + "px";
+    sheet.style.height = Math.max(1, v.h - top - Math.max(controlInset.bottom, 12)) + "px";
     sheet.style.left = (onLeft ? v.x + edge : v.x + v.w - edge - width) + "px";
     sheet.style.top = v.y + top + "px";
-    aside = edge + width + 8;
-  } else if (sheetOpen) {
-    const edge = Math.max(inset.bottom, 8), side = Math.max(inset.left, inset.right, 8), most = Math.max(96, v.h - inset.top - edge - 8);
-    // All the room there is while a name is typed into it: the keyboard has the rest.
+    aside = sheetOpen ? edge + width + 8 : 0;
+  } else if (sheetOpen || sheetTransition) {
+    const upper = horizontalDivision && safe.y + safe.h / 2 < v.y + v.h / 2;
+    sheetDock = upper ? "top" : "bottom";
+    const edge = divided ? 8 : Math.max(inset.bottom, 8), side = divided ? 8 : Math.max(inset.left, inset.right, 8);
+    const most = Math.max(1, divided ? safe.h - 16 : v.h - inset.top - edge - 8);
     const height = document.activeElement === naming ? most : Math.min(most, clamp(Math.round(v.h * 0.5), 260, 400));
-    sheet.style.width = v.w - side * 2 + "px";
+    const top = divided ? upper ? safe.y + 8 : safe.y + safe.h - edge - height : v.y + v.h - edge - height;
+    sheet.style.width = Math.max(1, (divided ? safe.w : v.w) - side * 2) + "px";
     sheet.style.height = height + "px";
-    sheet.style.left = v.x + side + "px";
-    sheet.style.top = v.y + v.h - edge - height + "px";
-    under = height + edge + 8;
+    sheet.style.left = (divided ? safe.x + side : v.x + side) + "px";
+    sheet.style.top = top + "px";
+    if (sheetOpen) {
+      if (upper) over = top + height - v.y + 8;
+      else under = v.y + v.h - top + 8;
+    }
   }
-  const left = Math.max(inset.left, onLeft ? aside : 0), right = Math.max(inset.right, onLeft ? 0 : aside);
-  area = { x: v.x + left, y: v.y + inset.top, w: Math.max(1, v.w - left - right), h: Math.max(1, v.h - inset.top - under) };
+  // Immersive video uses the entire surface; controls still stay inside the system's safe rectangle.
+  const pictureInsets = chrome.fullscreen || document.fullscreenElement ? { top: 0, right: 0, bottom: 0, left: 0 } : inset;
+  const left = Math.max(pictureInsets.left, onLeft ? aside : 0), right = Math.max(pictureInsets.right, onLeft ? 0 : aside);
+  const top = Math.max(pictureInsets.top, over);
+  area = { x: v.x + left, y: v.y + top, w: Math.max(1, v.w - left - right), h: Math.max(1, v.h - top - Math.max(under, pictureInsets.bottom)) };
   if (content.w) {
     fit = Math.min(area.w / content.w, area.h / content.h);
     const w = content.w * fit * zoom, h = content.h * fit * zoom;
@@ -723,8 +1203,13 @@ function layout() {
   }
   // The toolbar stands in the black beside the picture when there is some, under it otherwise; whatever opens takes its place.
   const beside = content.w ? area.w - content.w * fit > area.h - content.h * fit + inset.bottom : v.w > v.h;
+  if (bar.classList.contains("side") !== beside) {
+    bar.scrollLeft = 0;
+    bar.scrollTop = 0;
+  }
   bar.classList.toggle("side", beside);
-  bar.classList.toggle("hidden", keysOpen || sheetOpen || composerOpen);
+  bar.style.maxWidth = Math.max(1, safe.w - 16) + "px";
+  bar.style.maxHeight = Math.max(1, safe.h - 16) + "px";
   const size = { w: bar.offsetWidth, h: bar.offsetHeight };
   // Beside the picture it stands in the middle of the black there.
   if (beside) {
@@ -734,16 +1219,28 @@ function layout() {
     bar.style.left = (onLeft ? v.x + gap : v.x + v.w - gap - size.w) + "px";
     bar.style.top = area.y + (area.h - size.h) / 2 + "px";
   } else {
-    bar.style.left = v.x + (v.w - size.w) / 2 + "px";
+    bar.style.left = (safe.w >= 600 ? safe.x + safe.w - size.w - 16 : safe.x + (safe.w - size.w) / 2) + "px";
     bar.style.top = v.y + v.h - Math.max(inset.bottom, 8) - 8 - size.h + "px";
   }
-  if (!menu.classList.contains("gone")) {
-    const box = bar.getBoundingClientRect();
-    menu.style.left = clamp(!beside ? box.left + box.width / 2 - 124 : onLeft ? box.right + 10 : box.left - 248 - 10, v.x + 8, v.x + v.w - 256) + "px";
-    menu.style.top = clamp(beside ? box.top : box.top - menu.offsetHeight - 10, v.y + inset.top + 8, v.y + v.h - menu.offsetHeight - 8) + "px";
+  const boundedBar = layoutControls(safe, containedBox(safe, size.w, size.h, parseFloat(bar.style.left), parseFloat(bar.style.top)));
+  bar.style.left = boundedBar.x + "px";
+  bar.style.top = boundedBar.y + "px";
+  const horizontalMenu = fontScale <= 1.15 && !beside && safe.w >= 468 + size.w + 32;
+  menu.classList.toggle("horizontal", horizontalMenu);
+  for (const panel of [menu, connection]) {
+    if (panel.classList.contains("gone")) continue;
+    panel.style.width = Math.min(panel === menu && horizontalMenu ? 468 : 232 * fontScale, Math.max(1, safe.w - 16)) + "px";
+    panel.style.maxHeight = Math.max(1, safe.h - 16) + "px";
+    const placed = anchoredPanel(safe, content.w ? shown : { x: 0, y: 0, w: 0, h: 0 }, boundedBar, panel.offsetWidth, panel.offsetHeight);
+    panel.style.left = placed.x + "px";
+    panel.style.top = placed.y + "px";
+    drawPopover(panel);
   }
+  toast.style.left = safe.x + safe.w / 2 + "px";
+  toast.style.maxWidth = Math.max(1, Math.min(420, safe.w - 24)) + "px";
   toast.style.top = area.y + 14 + "px";
   place();
+  animatePresentation();
 }
 
 function place() {
@@ -753,11 +1250,18 @@ function place() {
   pointer.style.transform = "translate(" + (shown.x + cursor.x * shown.w) + "px," + (shown.y + cursor.y * shown.h) + "px)" + size;
 }
 
-addEventListener("resize", layout);
+let pendingLayout = 0;
+function requestLayout() {
+  if (pendingLayout) return;
+  pendingLayout = requestAnimationFrame(() => { pendingLayout = 0; layout(); });
+}
+addEventListener("resize", requestLayout);
 if (window.visualViewport) {
-  visualViewport.addEventListener("resize", layout);
-  visualViewport.addEventListener("scroll", layout);
+  visualViewport.addEventListener("resize", requestLayout);
+  visualViewport.addEventListener("scroll", requestLayout);
 }
+// A resized native WebView can change its frame before the window reports a new viewport.
+if (typeof ResizeObserver !== "undefined") new ResizeObserver(requestLayout).observe(stage);
 
 function zoomTo(next, at) {
   // The point of the picture under the fingers stays under them.
@@ -920,7 +1424,8 @@ function endOne() {
 }
 
 stage.addEventListener("pointerdown", (event) => {
-  wake();
+  if (presentation.active) { event.preventDefault(); return; }
+  if (!immersiveControls() || controls.target > 0) wake();
   // A touch that closes the menu, or the shortcuts, does nothing else.
   const closing = [closeMenu(), closeSheet()].some(Boolean);
   if (event.pointerType === "mouse") return closing ? undefined : mouseDown(event);
@@ -952,6 +1457,7 @@ stage.addEventListener("pointerdown", (event) => {
 });
 
 stage.addEventListener("pointermove", (event) => {
+  if (presentation.active) return;
   if (event.pointerType === "mouse") return mouseMove(event);
   const touch = touches.get(event.pointerId);
   if (!touch || !gesture) return;
@@ -1083,6 +1589,7 @@ function mouseUp(event) {
 }
 stage.addEventListener("wheel", (event) => {
   event.preventDefault();
+  if (presentation.active) return;
   if (controlling() && !event.ctrlKey) return act({ t: "scroll", dx: -event.deltaX, dy: -event.deltaY });
   zoomTo(zoom * Math.exp(-event.deltaY / 300), { x: event.clientX, y: event.clientY });
 }, { passive: false });
@@ -1248,6 +1755,7 @@ function dropKeys() {
   mods.clear();
   drawKeys();
   refresh();
+  armControlsIdle();
 }
 
 function raiseKeys() {
@@ -1284,22 +1792,26 @@ document.addEventListener("visibilitychange", () => { if (!document.hidden) sett
 
 /** A control that works on touch-up and never takes the focus (the keyboard stays as it is). */
 function tappable(element, action) {
-  element.addEventListener("pointerdown", (event) => { event.preventDefault(); event.stopPropagation(); wake(); });
+  element.addEventListener("pointerdown", (event) => { event.preventDefault(); event.stopPropagation(); wake(); pressFeedback(element, true); });
+  element.addEventListener("pointercancel", () => pressFeedback(element, false));
+  element.addEventListener("pointerleave", () => pressFeedback(element, false));
   element.addEventListener("touchstart", (event) => event.preventDefault(), { passive: false });
   element.addEventListener("mousedown", (event) => event.preventDefault());
   element.addEventListener("pointerup", (event) => {
     event.preventDefault();
     event.stopPropagation();
-    const box = element.getBoundingClientRect();
-    if (event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom) action();
+    pressFeedback(element, false);
+    const box = element.getBoundingClientRect(), cx = box.left + box.width / 2, cy = box.top + box.height / 2;
+    if (Math.abs(event.clientX - cx) <= element.offsetWidth / 2 && Math.abs(event.clientY - cy) <= element.offsetHeight / 2) action();
   });
 }
 
 /** The same inside something that scrolls: the touch is left to the browser, and counts if it stayed where it landed. */
 function pressable(element, action) {
   let from = null;
-  element.addEventListener("pointerdown", (event) => { event.stopPropagation(); wake(); from = { id: event.pointerId, x: event.clientX, y: event.clientY }; });
-  element.addEventListener("pointercancel", () => { from = null; });
+  element.addEventListener("pointerdown", (event) => { event.stopPropagation(); wake(); pressFeedback(element, true); from = { id: event.pointerId, x: event.clientX, y: event.clientY }; });
+  element.addEventListener("pointercancel", () => { from = null; pressFeedback(element, false); });
+  element.addEventListener("pointerleave", () => pressFeedback(element, false));
   // The mouse's events a browser makes up after a touch would land on whatever the action has left under the
   // finger, and take the focus from the field it gave it to. A touch that scrolled has none to stop.
   element.addEventListener("touchend", (event) => { if (event.cancelable) event.preventDefault(); });
@@ -1307,15 +1819,15 @@ function pressable(element, action) {
   element.addEventListener("pointerup", (event) => {
     const was = from;
     from = null;
+    pressFeedback(element, false);
+    event.stopPropagation();
     if (was && was.id === event.pointerId && Math.hypot(event.clientX - was.x, event.clientY - was.y) < SLOP) action();
   });
 }
 
-let idle = 0;
 function wake() {
-  bar.classList.remove("idle");
-  clearTimeout(idle);
-  idle = setTimeout(() => { if (menu.classList.contains("gone")) bar.classList.add("idle"); }, 4500);
+  expandControls(true);
+  armControlsIdle();
 }
 
 let toastTimer = 0;
@@ -1358,8 +1870,9 @@ function setMode(next) {
 }
 
 function closeMenu() {
-  if (menu.classList.contains("gone")) return false;
-  menu.classList.add("gone");
+  if (!popoverOpen(menu) && !popoverOpen(connection)) return false;
+  presentPopover(menu, false);
+  presentPopover(connection, false);
   clearInterval(statusTimer);
   wake();
   return true;
@@ -1376,9 +1889,13 @@ function refresh() {
   const full = app ? chrome.fullscreen : !!document.fullscreenElement;
   $("full").classList.toggle("gone", !app && !document.fullscreenEnabled);
   $("full").innerHTML = full ? ICON.shrink : ICON.expand;
-  for (const choice of choices) choice.classList.toggle("on", choice.dataset.mode === mode);
+  for (const choice of choices) {
+    choice.classList.toggle("on", choice.dataset.mode === mode);
+    choice.setAttribute("aria-pressed", String(choice.dataset.mode === mode));
+  }
   dress();
   layout();
+  armControlsIdle();
 }
 
 function drawKeys() {
@@ -1418,7 +1935,7 @@ async function vitals(pc, before) {
   };
 }
 
-/** The line at the foot of the menu: which way the picture comes and, for a video track, how it is doing. */
+/** Connection details are requested separately from the control mode. */
 let statusTimer = 0, statusWas = null;
 async function status() {
   const line = $("status");
@@ -1438,25 +1955,33 @@ async function status() {
 
 const ICON = JSON.parse($("icons").textContent);
 const choices = menu.querySelectorAll(".choice");
-tappable($("mode"), () => {
+pressable($("mode"), () => {
   closeSheet();
-  menu.classList.toggle("gone");
-  clearInterval(statusTimer);
-  // Kept up to date while it can be seen.
-  if (!menu.classList.contains("gone")) {
+  const wasOpen = popoverOpen(menu);
+  closeMenu();
+  if (!wasOpen) presentPopover(menu, true);
+});
+pressable($("info"), () => {
+  closeSheet();
+  const wasOpen = popoverOpen(connection);
+  closeMenu();
+  if (!wasOpen) presentPopover(connection, true);
+  if (!wasOpen) {
     statusWas = null;
     status();
     statusTimer = setInterval(status, 1500);
   }
   layout();
 });
+tappable($("closeinfo"), closeMenu);
 // On a phone the button is there only while the key bar is not, which is while the page knows of no keyboard:
 // there it only ever raises one, whatever state the field was left in. With a mouse it gives the keys and takes them.
-tappable($("keyboard"), () => (coarse ? raiseKeys() : toggleKeys()));
-tappable($("quick"), openSheet);
-tappable($("fit"), () => zoomTo(1, { x: area.x + area.w / 2, y: area.y + area.h / 2 }));
-tappable($("rotate"), () => tellApp({ type: "landscape", on: !chrome.landscape }));
-tappable($("full"), () => {
+pressable($("keyboard"), () => (coarse ? raiseKeys() : toggleKeys()));
+pressable($("quick"), openSheet);
+pressable($("fit"), () => zoomTo(1, { x: area.x + area.w / 2, y: area.y + area.h / 2 }));
+pressable($("rotate"), () => tellApp({ type: "landscape", on: !chrome.landscape }));
+pressable($("full"), () => {
+  beginPresentation(app ? !chrome.fullscreen : !document.fullscreenElement);
   if (app) return tellApp({ type: "fullscreen", on: !chrome.fullscreen });
   if (document.fullscreenElement) document.exitFullscreen();
   else document.documentElement.requestFullscreen().catch(() => {});
@@ -1464,10 +1989,10 @@ tappable($("full"), () => {
 document.addEventListener("fullscreenchange", refresh);
 for (const choice of choices) {
   choice.querySelector("i").innerHTML = ICON[choice.dataset.mode];
-  tappable(choice, () => { closeMenu(); setMode(choice.dataset.mode); });
+  pressable(choice, () => { closeMenu(); setMode(choice.dataset.mode); });
 }
 for (const key of keys.children) {
-  tappable(key, () => {
+  pressable(key, () => {
     const mod = key.dataset.mod;
     if (mod) {
       if (!mods.delete(mod)) mods.add(mod);
@@ -1632,6 +2157,7 @@ tappable($("makersave"), saveMaker);
 
 function openSheet() {
   if (mode === "view" || sheetOpen) return;
+  beginSheetTransition(true);
   closeMenu();
   closeComposer();
   back = keysOpen && fieldFocused();
@@ -1646,6 +2172,7 @@ function openSheet() {
 /** True when there was a sheet to close. toKeys: the keyboard it took the place of comes back. */
 function closeSheet(toKeys) {
   if (!sheetOpen) return false;
+  beginSheetTransition(false);
   sheetOpen = false;
   disarm();
   if (document.activeElement === naming) naming.blur();
@@ -1672,12 +2199,9 @@ words.addEventListener("compositionend", () => { writing = false; });
 const unfinished = () => writing && (hint("先在键盘上选好字，再发送", 2500), true);
 
 function grow() {
-  const wide = composer.classList.contains("wide");
   // What to write there, said by the page: a phone's browser has been seen to draw a text box's own
   // placeholder cut to the width of what an input method last wrote in it.
   $("wordshint").classList.toggle("gone", words.value !== "");
-  words.style.height = "";
-  words.style.height = clamp(words.scrollHeight, wide ? 44 : 66, wide ? 66 : 132) + "px";
   layout();
 }
 
@@ -1740,6 +2264,7 @@ $("composeclose").innerHTML = ICON.down;
 
 /** The app tells the page what it did with the phone's screen, whether the keyboard is on it, and what shortcuts it keeps for the user. */
 window.linkshellChrome = (next) => {
+  if (typeof next.fullscreen === "boolean" && next.fullscreen !== chrome.fullscreen) beginPresentation(next.fullscreen);
   const was = chrome.keyboard;
   Object.assign(chrome, next);
   if (chrome.keyboard === true) wentDown = false;
@@ -1752,6 +2277,7 @@ window.linkshellChrome = (next) => {
     drawMine();
   }
   refresh();
+  armControlsIdle();
 };
 
 // ---- Measuring (?measure=1) ------------------------------------------------
@@ -1919,23 +2445,29 @@ export function viewerPage() {
 <title>屏幕</title>
 <style>${STYLE}</style></head>
 <body>
-<div id="stage"><canvas id="screen"></canvas><video id="video" class="gone" autoplay playsinline muted></video><div id="pointer"></div></div>
+<div id="stage"><div id="picture"><canvas id="screen"></canvas><video id="video" class="gone" autoplay playsinline muted></video><div id="pointer"></div></div></div>
 <div id="note">正在连接电脑屏幕…</div>
 <div id="toast" class="glass"></div>
 <div id="menu" class="glass gone">
-  <div class="choice" data-mode="view"><i></i><div><b>只看</b><span>不会碰到电脑上的任何东西</span></div></div>
-  <div class="choice" data-mode="trackpad"><i></i><div><b>触控板</b><span>滑动移动指针，轻点点击</span></div></div>
-  <div class="choice" data-mode="touch"><i></i><div><b>点按</b><span>点哪里，就点击哪里</span></div></div>
+  <div class="choice" role="button" aria-label="只看，不操作电脑" data-mode="view"><i></i><div><b>只看</b><span>不操作电脑</span></div></div>
+  <div class="choice" role="button" aria-label="触控板，滑动指针，轻点点击" data-mode="trackpad"><i></i><div><b>触控板</b><span>滑动指针 · 轻点点击</span></div></div>
+  <div class="choice" role="button" aria-label="点按，点按画面直接操作" data-mode="touch"><i></i><div><b>点按</b><span>点按画面直接操作</span></div></div>
+</div>
+<div id="connection" class="glass gone">
+  <div id="connectionhead"><span>连接信息</span><div class="tool" id="closeinfo" role="button" aria-label="关闭连接信息">${ICONS.close}</div></div>
   <div id="status"></div>
 </div>
-<div id="bar" class="glass">
+<div id="control-shell" class="glass" aria-hidden="true"></div>
+<div id="bar">
   <div class="tool" id="mode" role="button" aria-label="控制方式"></div>
   <div class="tool" id="keyboard" role="button" aria-label="键盘">${ICONS.keyboard}</div>
   <div class="tool" id="quick" role="button" aria-label="快捷操作">${ICONS.quick}</div>
   <div class="tool" id="fit" role="button" aria-label="还原缩放">${ICONS.fit}</div>
   <div class="tool" id="rotate" role="button" aria-label="横屏">${ICONS.rotate}</div>
+  <div class="tool" id="info" role="button" aria-label="连接信息">${ICONS.info}</div>
   <div class="tool" id="full" role="button" aria-label="全屏"></div>
 </div>
+<div id="orb" role="button" aria-label="展开屏幕控制"><div class="orb-core"><svg viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg></div></div>
 <div id="sheet" class="glass gone">
   <div id="sheethead">
     <div id="compose" role="button">发送文字…</div>