@hidemikimura/chit-ui 0.3.0 → 0.3.1

package/dist/types/controllers/scroll-lock-controller.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Keeps a touch that lands on the open panel from scrolling the page behind
+ * it.
+ *
+ * `overscroll-behavior: contain` is on the message list already, and it does
+ * the job for the case it covers: a list that can scroll, dragged past its
+ * own end. It has nothing to say about the cases that actually leak. A short
+ * conversation does not overflow, so the list is not a scroll container at
+ * all and the touch goes straight through to the document — which is what a
+ * reader on an iPhone sees as the page sliding around underneath a chat that
+ * looks like it should be holding still. The same happens for a touch that
+ * starts on the title bar or beside the input.
+ *
+ * So the rule is decided here instead: a touch on the panel may scroll
+ * something inside the panel, and otherwise it does nothing. On the first
+ * move of each gesture the controller looks along the touch's own path —
+ * `composedPath`, so a scroller inside a consumer's component counts too —
+ * for something that can still travel in the direction the finger is going.
+ * Finding one, it stands aside for the rest of the gesture; finding none, it
+ * cancels the move, and iOS then takes the whole gesture as "not a scroll".
+ *
+ * Two touches are left alone: that is a pinch, and zooming is the reader's.
+ * A move that is no longer cancelable is left alone too — the browser has
+ * already committed to scrolling, and `overscroll-behavior` is what keeps
+ * that inside the list.
+ *
+ * @implements {ReactiveController}
+ */
+export class ScrollLockController implements ReactiveController {
+    /** @param {LitElement} host */
+    constructor(host: LitElement);
+    hostUpdated(): void;
+    hostDisconnected(): void;
+    #private;
+}
+import type { ReactiveController } from 'lit';
+import type { LitElement } from 'lit';

package/dist/types/controllers/viewport-controller.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Keeps the full-screen panel inside the part of the screen the reader can
+ * actually see.
+ *
+ * On a phone the panel is `position: fixed` across the whole viewport, and
+ * that viewport is not what is on screen once a keyboard slides up: the
+ * layout viewport keeps its full height, so the composer — and with it the
+ * last few messages — ends up behind the keyboard. iOS then scrolls the page
+ * to chase the focused field, which moves the fixed panel out of frame
+ * instead of helping. `dvh` is no use here either; it tracks the browser's
+ * own chrome collapsing, not the keyboard.
+ *
+ * `visualViewport` is the one thing that does report the visible box, so the
+ * panel is pinned to it: its top to `offsetTop`, its height to `height`. The
+ * composer lands just above the keyboard, and the conversation gets whatever
+ * is left.
+ *
+ * A pinch is left alone. Zooming is how a reader gets a closer look, and a
+ * panel that re-fitted itself to the magnified box would take that away by
+ * reflowing the text back to the same apparent size.
+ *
+ * @implements {ReactiveController}
+ */
+export class ViewportController implements ReactiveController {
+    /**
+     * @param {LitElement} host
+     * @param {{ enabled: () => boolean }} options
+     */
+    constructor(host: LitElement, { enabled }: {
+        enabled: () => boolean;
+    });
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    #private;
+}
+import type { ReactiveController } from 'lit';
+import type { LitElement } from 'lit';

package/dist/types/index.d.ts

@@ -1,4 +1,166 @@
 /// <reference path="./global.d.ts" />
 export { ChitUI };
 export { Events } from "./events.js";
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type Role = import("./types.js").Role;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type MessageStatus = import("./types.js").MessageStatus;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type ChatState = import("./types.js").ChatState;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type Trigger = import("./types.js").Trigger;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type Device = import("./types.js").Device;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type Effect = import("./types.js").Effect;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type Position = import("./types.js").Position;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type BubbleTail = import("./types.js").BubbleTail;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type LoadingStyle = import("./types.js").LoadingStyle;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type MessageBase = import("./types.js").MessageBase;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type TextMessage = import("./types.js").TextMessage;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type HtmlMessage = import("./types.js").HtmlMessage;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type TemplateMessage = import("./types.js").TemplateMessage;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type ElementMessage = import("./types.js").ElementMessage;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type ComponentMessage = import("./types.js").ComponentMessage;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type Message = import("./types.js").Message;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type Animation = import("./types.js").Animation;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type Offset = import("./types.js").Offset;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type ClosedTheme = import("./types.js").ClosedTheme;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type OpenColors = import("./types.js").OpenColors;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type SpeakerTheme = import("./types.js").SpeakerTheme;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type LoadingTheme = import("./types.js").LoadingTheme;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type OpenTheme = import("./types.js").OpenTheme;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type Theme = import("./types.js").Theme;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type ResolvedClosed = import("./types.js").ResolvedClosed;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type ResolvedOpen = import("./types.js").ResolvedOpen;
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ */
+export type ResolvedTheme = import("./types.js").ResolvedTheme;
 import { ChitUI } from './chit-ui.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hidemikimura/chit-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Lit-based chat widget UI: launcher, panel, themable, any HTML or Lit component as a message",
   "license": "MIT",
   "author": "Hidemi Kimura",

package/src/chit-ui.js

@@ -9,6 +9,8 @@ import { ThemeController } from './controllers/theme-controller.js';
 import { ScrollController } from './controllers/scroll-controller.js';
 import { ComposerController } from './controllers/composer-controller.js';
 import { DragController } from './controllers/drag-controller.js';
+import { ScrollLockController } from './controllers/scroll-lock-controller.js';
+import { ViewportController } from './controllers/viewport-controller.js';
 import { renderLauncher } from './render/launcher.js';
 import { renderPanel } from './render/panel.js';
 import { resolveLabels, resolveLocale } from './i18n/labels.js';
@@ -180,6 +182,10 @@ export class ChitUI extends LitElement {
       behavior: () => this.currentTheme.open.animation.scroll,
     });
     this.#composer = new ComposerController(this);
+    // Both register themselves with the host and need nothing from us
+    // afterwards.
+    new ScrollLockController(this);
+    new ViewportController(this, { enabled: () => this.device === 'mobile' });
 
     this.#launcherDrag = new DragController(this, {
       name: 'launcher',

package/src/controllers/scroll-controller.js

@@ -49,6 +49,13 @@ export class ScrollController {
   /** The first jump after the panel opens has nothing to animate from. */
   #openingJump = true;
 
+  /**
+   * The viewport's height as of the last reading. A scroll event that arrives
+   * with a different height is the box having been resized under the reader —
+   * a keyboard opening, say — and says nothing about where they chose to be.
+   */
+  #viewportHeight = 0;
+
   /** @type {string | undefined} */
   #lastId;
   #lastCount = 0;
@@ -127,16 +134,21 @@ export class ScrollController {
 
   #bind() {
     if (!this.#viewport) return;
+    this.#viewportHeight = this.#viewport.clientHeight;
     this.#viewport.addEventListener('scroll', this.#onScroll, { passive: true });
     // Precise end-of-scroll where it exists (Chrome 114, Firefox 109,
     // Safari 17.4); the timer below covers the rest.
     this.#viewport.addEventListener('scrollend', this.#onScrollEnd);
 
     // Images finishing and streamed text growing both change the height
-    // without a scroll event, so the follow has to react to size too.
+    // without a scroll event, so the follow has to react to size too. The
+    // viewport is watched alongside the content because a keyboard opening
+    // shortens the list without touching what is in it, and the newest
+    // message would otherwise slide out of sight.
     const inner = this.#viewport.firstElementChild;
     if (inner && typeof ResizeObserver !== 'undefined') {
       this.#resize = new ResizeObserver(() => {
+        this.#viewportHeight = this.#viewport?.clientHeight ?? 0;
         if (!this.#atBottom) return;
         // Content settling (an image loading, a tall block laying out) right
         // after a message arrived must not cut the follow short, so while our
@@ -147,6 +159,7 @@ export class ScrollController {
         this.#scrollNow({ behavior: this.#selfScrolling ? 'smooth' : 'instant' });
       });
       this.#resize.observe(inner);
+      this.#resize.observe(this.#viewport);
     }
   }
 
@@ -166,6 +179,13 @@ export class ScrollController {
     const viewport = this.#viewport;
     if (!viewport) return;
 
+    // The box changed size under this scroll, so the reader did not move:
+    // the resize handler below puts them back where they were.
+    if (viewport.clientHeight !== this.#viewportHeight) {
+      this.#viewportHeight = viewport.clientHeight;
+      return;
+    }
+
     const distance = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
     const atBottom = distance <= BOTTOM_SLACK;
 

package/src/controllers/scroll-lock-controller.js

@@ -0,0 +1,185 @@
+// @ts-check
+
+/** @import { ReactiveController, LitElement } from 'lit' */
+
+/** How far a finger must travel before the gesture's direction is trusted. */
+const THRESHOLD = 3;
+
+/** Slack on the "is there anywhere left to scroll" reading, in pixels. */
+const EDGE_SLACK = 1;
+
+/** Overflow values that make an element a scroll container. */
+const SCROLLABLE = /^(auto|scroll|overlay)$/;
+
+/**
+ * Keeps a touch that lands on the open panel from scrolling the page behind
+ * it.
+ *
+ * `overscroll-behavior: contain` is on the message list already, and it does
+ * the job for the case it covers: a list that can scroll, dragged past its
+ * own end. It has nothing to say about the cases that actually leak. A short
+ * conversation does not overflow, so the list is not a scroll container at
+ * all and the touch goes straight through to the document — which is what a
+ * reader on an iPhone sees as the page sliding around underneath a chat that
+ * looks like it should be holding still. The same happens for a touch that
+ * starts on the title bar or beside the input.
+ *
+ * So the rule is decided here instead: a touch on the panel may scroll
+ * something inside the panel, and otherwise it does nothing. On the first
+ * move of each gesture the controller looks along the touch's own path —
+ * `composedPath`, so a scroller inside a consumer's component counts too —
+ * for something that can still travel in the direction the finger is going.
+ * Finding one, it stands aside for the rest of the gesture; finding none, it
+ * cancels the move, and iOS then takes the whole gesture as "not a scroll".
+ *
+ * Two touches are left alone: that is a pinch, and zooming is the reader's.
+ * A move that is no longer cancelable is left alone too — the browser has
+ * already committed to scrolling, and `overscroll-behavior` is what keeps
+ * that inside the list.
+ *
+ * @implements {ReactiveController}
+ */
+export class ScrollLockController {
+  /** @type {LitElement} */
+  #host;
+
+  /** @type {HTMLElement | null} */
+  #panel = null;
+
+  /**
+   * The gesture in flight: where it started, and what was decided about it.
+   *
+   * @type {{ x: number, y: number, verdict: 'undecided' | 'allow' | 'block' } | undefined}
+   */
+  #touch;
+
+  /** @param {LitElement} host */
+  constructor(host) {
+    this.#host = host;
+    host.addController(this);
+  }
+
+  hostUpdated() {
+    const panel = /** @type {HTMLElement | null} */ (
+      this.#host.renderRoot?.querySelector('[part~="panel"]') ?? null
+    );
+    if (panel === this.#panel) return;
+
+    this.#unbind();
+    this.#panel = panel;
+    this.#bind();
+  }
+
+  hostDisconnected() {
+    this.#unbind();
+  }
+
+  #bind() {
+    const panel = this.#panel;
+    if (!panel) return;
+    panel.addEventListener('touchstart', this.#onStart, { passive: true });
+    // Cancelling a move is the whole point, so this one cannot be passive.
+    panel.addEventListener('touchmove', this.#onMove, { passive: false });
+    panel.addEventListener('touchend', this.#onEnd, { passive: true });
+    panel.addEventListener('touchcancel', this.#onEnd, { passive: true });
+  }
+
+  #unbind() {
+    const panel = this.#panel;
+    if (!panel) return;
+    panel.removeEventListener('touchstart', this.#onStart);
+    panel.removeEventListener('touchmove', this.#onMove);
+    panel.removeEventListener('touchend', this.#onEnd);
+    panel.removeEventListener('touchcancel', this.#onEnd);
+    this.#panel = null;
+    this.#touch = undefined;
+  }
+
+  /** @param {TouchEvent} event */
+  #onStart = (event) => {
+    if (event.touches.length !== 1) {
+      this.#touch = undefined;
+      return;
+    }
+    const touch = event.touches[0];
+    this.#touch = { x: touch.clientX, y: touch.clientY, verdict: 'undecided' };
+  };
+
+  #onEnd = () => {
+    this.#touch = undefined;
+  };
+
+  /** @param {TouchEvent} event */
+  #onMove = (event) => {
+    const from = this.#touch;
+    if (!from) return;
+
+    // A second finger arriving turns this into a pinch. Hands off for the
+    // rest of the gesture, zoom included.
+    if (event.touches.length > 1) {
+      this.#touch = undefined;
+      return;
+    }
+
+    if (from.verdict === 'block') {
+      if (event.cancelable) event.preventDefault();
+      return;
+    }
+    if (from.verdict === 'allow') return;
+
+    const touch = event.touches[0];
+    const dx = touch.clientX - from.x;
+    const dy = touch.clientY - from.y;
+    // Too small to read a direction from, and too small for the browser to
+    // have started scrolling either.
+    if (Math.abs(dx) < THRESHOLD && Math.abs(dy) < THRESHOLD) return;
+
+    const vertical = Math.abs(dy) >= Math.abs(dx);
+    const allowed = this.#canScroll(event, vertical, vertical ? dy : dx);
+    from.verdict = allowed ? 'allow' : 'block';
+    if (!allowed && event.cancelable) event.preventDefault();
+  };
+
+  /**
+   * Is there something between the touch and the panel that can still scroll
+   * the way the finger is going?
+   *
+   * @param {TouchEvent} event
+   * @param {boolean} vertical
+   * @param {number} delta Positive when the finger moves down, or right.
+   * @returns {boolean}
+   */
+  #canScroll(event, vertical, delta) {
+    const panel = this.#panel;
+    if (!panel) return true;
+
+    for (const node of event.composedPath()) {
+      if (!(node instanceof HTMLElement)) continue;
+
+      if (this.#hasRoom(node, vertical, delta)) return true;
+      if (node === panel) break;
+    }
+    return false;
+  }
+
+  /**
+   * @param {HTMLElement} element
+   * @param {boolean} vertical
+   * @param {number} delta
+   * @returns {boolean}
+   */
+  #hasRoom(element, vertical, delta) {
+    const style = getComputedStyle(element);
+    const overflow = vertical ? style.overflowY : style.overflowX;
+    if (!SCROLLABLE.test(overflow)) return false;
+
+    const position = vertical ? element.scrollTop : element.scrollLeft;
+    const size = vertical ? element.clientHeight : element.clientWidth;
+    const content = vertical ? element.scrollHeight : element.scrollWidth;
+    if (content <= size + EDGE_SLACK) return false;
+
+    // A finger moving down pulls the content down, which means reading from
+    // further up: there has to be something above the current position.
+    return delta > 0 ? position > EDGE_SLACK : position < content - size - EDGE_SLACK;
+  }
+}

package/src/controllers/viewport-controller.js

@@ -0,0 +1,102 @@
+// @ts-check
+
+/** @import { ReactiveController, LitElement } from 'lit' */
+
+/**
+ * Past this the reader has pinched to zoom, and the widget stays out of it.
+ * A little over 1 because browsers report scales like 1.0000002.
+ */
+const ZOOMED = 1.01;
+
+/**
+ * Keeps the full-screen panel inside the part of the screen the reader can
+ * actually see.
+ *
+ * On a phone the panel is `position: fixed` across the whole viewport, and
+ * that viewport is not what is on screen once a keyboard slides up: the
+ * layout viewport keeps its full height, so the composer — and with it the
+ * last few messages — ends up behind the keyboard. iOS then scrolls the page
+ * to chase the focused field, which moves the fixed panel out of frame
+ * instead of helping. `dvh` is no use here either; it tracks the browser's
+ * own chrome collapsing, not the keyboard.
+ *
+ * `visualViewport` is the one thing that does report the visible box, so the
+ * panel is pinned to it: its top to `offsetTop`, its height to `height`. The
+ * composer lands just above the keyboard, and the conversation gets whatever
+ * is left.
+ *
+ * A pinch is left alone. Zooming is how a reader gets a closer look, and a
+ * panel that re-fitted itself to the magnified box would take that away by
+ * reflowing the text back to the same apparent size.
+ *
+ * @implements {ReactiveController}
+ */
+export class ViewportController {
+  /** @type {LitElement} */
+  #host;
+
+  /** @type {() => boolean} */
+  #enabled;
+
+  /** @type {(() => void) | undefined} */
+  #onChange;
+
+  /** True while the custom properties are set, to avoid pointless writes. */
+  #applied = false;
+
+  /**
+   * @param {LitElement} host
+   * @param {{ enabled: () => boolean }} options
+   */
+  constructor(host, { enabled }) {
+    this.#host = host;
+    this.#enabled = enabled;
+    host.addController(this);
+  }
+
+  hostConnected() {
+    const viewport = window.visualViewport;
+    if (!viewport) return;
+
+    this.#onChange = () => this.#apply();
+    // Resize is the keyboard arriving and leaving; scroll is iOS shifting the
+    // visible box around while it is up.
+    viewport.addEventListener('resize', this.#onChange);
+    viewport.addEventListener('scroll', this.#onChange);
+  }
+
+  hostDisconnected() {
+    const viewport = window.visualViewport;
+    if (viewport && this.#onChange) {
+      viewport.removeEventListener('resize', this.#onChange);
+      viewport.removeEventListener('scroll', this.#onChange);
+    }
+    this.#onChange = undefined;
+    this.#clear();
+  }
+
+  hostUpdated() {
+    this.#apply();
+  }
+
+  #apply() {
+    const viewport = window.visualViewport;
+    const panel = this.#host.renderRoot?.querySelector('[part~="panel"]');
+
+    if (!viewport || !panel || !this.#enabled() || viewport.scale > ZOOMED) {
+      this.#clear();
+      return;
+    }
+
+    this.#host.style.setProperty('--_chit-vv-top', `${Math.round(viewport.offsetTop)}px`);
+    this.#host.style.setProperty('--_chit-vv-height', `${Math.round(viewport.height)}px`);
+    this.#applied = true;
+  }
+
+  #clear() {
+    if (!this.#applied) return;
+    this.#host.style.removeProperty('--_chit-vv-top');
+    this.#host.style.removeProperty('--_chit-vv-height');
+    this.#applied = false;
+  }
+}

package/src/index.js

@@ -7,3 +7,37 @@ if (!customElements.get('chit-ui')) {
 
 export { ChitUI };
 export { Events } from './events.js';
+
+/**
+ * The public types, re-exported so a consumer can write
+ * `import type { Message } from '@hidemikimura/chit-ui'` instead of reaching
+ * into `dist/types/` for them.
+ *
+ * @typedef {import('./types.js').Role} Role
+ * @typedef {import('./types.js').MessageStatus} MessageStatus
+ * @typedef {import('./types.js').ChatState} ChatState
+ * @typedef {import('./types.js').Trigger} Trigger
+ * @typedef {import('./types.js').Device} Device
+ * @typedef {import('./types.js').Effect} Effect
+ * @typedef {import('./types.js').Position} Position
+ * @typedef {import('./types.js').BubbleTail} BubbleTail
+ * @typedef {import('./types.js').LoadingStyle} LoadingStyle
+ * @typedef {import('./types.js').MessageBase} MessageBase
+ * @typedef {import('./types.js').TextMessage} TextMessage
+ * @typedef {import('./types.js').HtmlMessage} HtmlMessage
+ * @typedef {import('./types.js').TemplateMessage} TemplateMessage
+ * @typedef {import('./types.js').ElementMessage} ElementMessage
+ * @typedef {import('./types.js').ComponentMessage} ComponentMessage
+ * @typedef {import('./types.js').Message} Message
+ * @typedef {import('./types.js').Animation} Animation
+ * @typedef {import('./types.js').Offset} Offset
+ * @typedef {import('./types.js').ClosedTheme} ClosedTheme
+ * @typedef {import('./types.js').OpenColors} OpenColors
+ * @typedef {import('./types.js').SpeakerTheme} SpeakerTheme
+ * @typedef {import('./types.js').LoadingTheme} LoadingTheme
+ * @typedef {import('./types.js').OpenTheme} OpenTheme
+ * @typedef {import('./types.js').Theme} Theme
+ * @typedef {import('./types.js').ResolvedClosed} ResolvedClosed
+ * @typedef {import('./types.js').ResolvedOpen} ResolvedOpen
+ * @typedef {import('./types.js').ResolvedTheme} ResolvedTheme
+ */

package/src/styles/composer.css.js

@@ -29,6 +29,24 @@ export const composerStyles = css`
     overflow-y: auto;
   }
 
+  /*
+   * iOS Safari zooms the page in whenever a field smaller than 16px takes
+   * focus, and it does not zoom back out when the field is done with — the
+   * reader is left with a widget wider than the screen and no obvious way
+   * back. Nothing in the page can undo that zoom short of pinning the
+   * viewport's scale, which would also take pinch-zoom away from everyone.
+   * So the field is kept at the size that never triggers it, and larger
+   * still if the theme's font is larger.
+   *
+   * Coarse pointers only: on a desktop the same rule would make the field
+   * stand out from the rest of the widget for no reason.
+   */
+  @media (pointer: coarse) {
+    [part~='input'] {
+      font-size: max(16px, 1em);
+    }
+  }
+
   [part~='input']::placeholder {
     color: var(--chit-color-input-placeholder);
   }