@djangocfg/widget-chat 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/widget-chat",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "A transport-agnostic chat surface: a pure core, a store, primitives, a composer, and the assembled components a host mounts",
   "keywords": [
     "chat",
@@ -55,7 +55,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@djangocfg/widget-kit": "^0.1.13",
+    "@djangocfg/widget-kit": "^0.1.15",
     "@djangocfg/widget-media": "^0.1.9",
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
@@ -66,19 +66,19 @@
     "use-stick-to-bottom": "^1.1.6"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.583",
-    "@djangocfg/i18n": "^2.1.583",
-    "@djangocfg/ui-core": "^2.1.583",
+    "@djangocfg/api": "^2.1.585",
+    "@djangocfg/i18n": "^2.1.585",
+    "@djangocfg/ui-core": "^2.1.585",
     "lucide-react": "^0.545.0",
     "react": "^19.0.0",
     "remark-gfm": "^4.0.0",
     "streamdown": "^2.6.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.583",
-    "@djangocfg/i18n": "^2.1.583",
-    "@djangocfg/typescript-config": "^2.1.583",
-    "@djangocfg/ui-core": "^2.1.583",
+    "@djangocfg/api": "^2.1.585",
+    "@djangocfg/i18n": "^2.1.585",
+    "@djangocfg/typescript-config": "^2.1.585",
+    "@djangocfg/ui-core": "^2.1.585",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/composer/field/input.tsx

@@ -8,6 +8,7 @@ import {
   type Ref,
 } from "react";
 
+import { useTouchSafeStyle } from "@djangocfg/ui-core/hooks";
 import { FIELD_SIZING, useAutosize } from "./use-autosize";
 import { useComposer } from "../context";
 
@@ -89,6 +90,16 @@ export function ComposerInput({
   const { draft, setText, handlePaste, send, canSend } = useComposer();
   const ref = useRef<HTMLTextAreaElement | null>(null);
 
+  /**
+   * iOS WebKit auto-zoom prevention (iOS-only targeting).
+   *
+   * Returns max(16px, 1em) for iOS devices to prevent viewport zoom on focus.
+   * Android and desktop return undefined (keep optimal font-size).
+   *
+   * @see {@link @researches/2026-10-25__ios-webkit-auto-zoom}
+   */
+  const touchSafeFontSize = useTouchSafeStyle();
+
   /**
    * Fill the internal ref (autosize measures through it) and the host's, if
    * one was passed. A callback rather than handing the host `ref` directly:
@@ -195,14 +206,23 @@ export function ComposerInput({
        *
        * Empty on browsers without support, where the effect above sizes the box
        * instead. Never both — a written `height` would override this.
+       *
+       * iOS auto-zoom prevention: merge touchSafeFontSize if present (iOS-only).
+       * On Android/desktop, touchSafeFontSize is undefined and style remains unchanged.
        */
       // `fieldSizing` is newer than the pinned csstype, so the cast is the
       // property being real and the types being behind — not a shape being
       // forced. Remove it once csstype carries the property.
       style={
         FIELD_SIZING
-          ? ({ fieldSizing: "content", maxHeight: `${maxRows}lh` } as CSSProperties)
-          : undefined
+          ? ({
+              fieldSizing: "content",
+              maxHeight: `${maxRows}lh`,
+              ...(touchSafeFontSize && { fontSize: touchSafeFontSize }),
+            } as CSSProperties)
+          : touchSafeFontSize
+            ? ({ fontSize: touchSafeFontSize } as CSSProperties)
+            : undefined
       }
       onChange={onChange}
       onPaste={onPaste}

package/src/styles/composer.css

@@ -447,3 +447,44 @@
     transition: none;
   }
 }
+
+/* ============================================================================
+   iOS WebKit Auto-Zoom Prevention (CSS Baseline)
+   ========================================================================= */
+
+/**
+ * Prevents iOS Safari/Chrome from zooming viewport when textarea gets focus.
+ *
+ * **Problem**: iOS WebKit zooms when font-size < 16px, causing conversation
+ * to "fly away" and creating critical UX failure in chat interfaces.
+ *
+ * **Solution**: Multi-layer defense:
+ * 1. CSS baseline (works without JS) — @supports iOS detection + mobile media
+ * 2. React hook (useTouchSafeStyle) — precise iOS-only targeting via device detect
+ *
+ * **WCAG Compliance**: ✅ WCAG 2.1 AA (SC 1.4.4, 1.4.10)
+ * - No viewport restrictions (user-scalable=no would violate WCAG)
+ * - Text zoom still works via browser accessibility settings
+ * - Maintains 200% text zoom capability
+ *
+ * @see {@link @researches/2026-10-25__ios-webkit-auto-zoom} Research
+ * @see {@link @djangocfg/ui-core/hooks/device/useTouchSafeStyle} React hook
+ */
+
+/* iOS-specific via @supports (CSS feature detection) */
+@supports (-webkit-touch-callout: none) {
+  .composer-box textarea,
+  .composer-box input,
+  .composer-box select {
+    font-size: max(1rem, 16px);
+  }
+}
+
+/* Mobile baseline (all devices, fallback for browsers without @supports) */
+@media (max-width: 768px) {
+  .composer-box textarea,
+  .composer-box input,
+  .composer-box select {
+    font-size: max(1rem, 16px);
+  }
+}