inline-chat-kit 0.51.0 → 0.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inline-chat-kit",
-  "version": "0.51.0",
+  "version": "0.54.0",
   "description": "An inline AI chat experience for React. The input is the message: it morphs into the bubble, the answer streams beneath it, and the parts around it — tool calls, reasoning, questions, artifacts, dictation — come with it.",
   "keywords": [
     "react",

package/theming.md

@@ -251,3 +251,54 @@ size the answer is set at instead of drifting away from it.
 already honours `prefers-reduced-motion` on its own: transforms and layout snap
 to their final values while opacity and colour still fade, so state stays
 legible without travelling.
+
+## On a phone: two things only the host can do
+
+**First, what a phone is for here.** The kit is built and tuned for desktop and
+tablet. It runs on a phone and does not break — see *Where it is meant to run*
+in the README for what holds up, what does not, and why the inline model is a
+weaker idea on a small screen. Everything below is true on a phone; none of it
+makes a phone the target.
+
+The kit sizes itself, expands its own hit areas on a coarse pointer, and keeps
+nothing wider than its container. Two mobile faults are outside it, because
+both live in the host document rather than in any component.
+
+**The viewport meta.** Add `viewport-fit=cover` if you want the safe-area
+insets to report anything but zero:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+```
+
+**The zoom on focus.** iOS zooms the page in to any editable whose text
+computes under 16px, and it does not zoom back out. Tapping the composer threw
+the conversation out of frame and left it there.
+
+**The kit handles this and you do not have to do anything.** Under
+`@media (pointer: coarse)` the type scale is raised and two tokens carry a
+floor:
+
+```css
+--ick-composer-size: max(1rem, var(--ick-text-sm));
+--ick-field-size:    max(1rem, var(--ick-text-md));
+```
+
+`max()` rather than a flat `1rem`, so a theme that puts the composer at 18px
+keeps 18 and a theme that puts it at 13 gets 16 — a floor, not an override.
+Anything somebody types into should draw at `--ick-field-size`; that is the
+token the guard in `tools/mobile/zoom-check.mjs` asserts against, in both
+engines, at phone width.
+
+There were three ways out and two of them were worse.
+
+| | |
+| --- | --- |
+| `maximum-scale=1` in the meta | Works. Takes pinch-zoom away from everybody, permanently, for a fault that lasts as long as somebody is typing. |
+| Lock the scale **while a field has focus** | What this repo shipped for a while — a hook rewriting the host's viewport meta on `pointerdown`. It cost two ordering bugs, one race, and a guard that switched itself off for good once the page was zoomed. None of it could be checked: no engine outside a real iPhone implements zoom-on-focus, so every green run proved nothing. |
+| **Stop being under 16px** | What the kit does. Checkable everywhere, and there is nothing left to go wrong. |
+
+The objection to the third was always that the composer would become the
+largest text on the page, bigger than the answer it turns into — true if only
+the composer moves. So the whole scale moves, on touch devices only. 12px
+reading text on a 390px screen was too small anyway.