duet-ui 0.2.1 → 0.2.2

package/README.md

@@ -67,7 +67,9 @@ Each mode has a band the controls may use, and Duet keeps every control inside i
 
 ### Only on the Duo
 
-`useDuet().duo` is true on an iPhone Duo in any posture, Safari or Home Screen, and false on other phones and desktops. It works outside `<Duet>`, so an existing app can switch to a Duo layout on it: render `<Duet>` only when it is true. `isDuo(signals)` is the same check for your own signals.
+`useDuet().duo` is true on an iPhone Duo in any posture, Safari or Home Screen, and false on other phones and desktops. iOS never names the model, so it takes two checks: an iPhone user agent (or Safari's desktop-site Mac agent with touch), and a screen or window size only the Duo has. It works outside `<Duet>`, so an existing app can switch to a Duo layout on it: render `<Duet>` only when it is true. `isDuo(signals)` is the same check for your own signals.
+
+`useDuet().browser` is `"safari"`, `"chrome"`, `"firefox"`, `"edge"`, `"webview"` (an in-app browser such as Instagram's) or `"other"`. Only Safari gets `column`: the others draw their own chrome where Safari leaves its column, so they get `inline`.
 
 The server can't tell, so `<DuoCookie>` tells it: it keeps a `duet-duo` cookie in step with the browser, and a new device reloads once into the right layout. In the Next.js App Router:
 

package/dist/chrome.js

@@ -47,6 +47,8 @@ function signals() {
         insetLeft: parseFloat(pad.paddingLeft) || 0,
         framed: window.top !== window,
         pixelRatio: devicePixelRatio,
+        userAgent: navigator.userAgent,
+        touchPoints: navigator.maxTouchPoints,
         standalone: navigator.standalone === true || matchMedia("(display-mode: standalone)").matches,
     };
 }
@@ -116,7 +118,7 @@ function subscribe(cb) {
         visualViewport?.removeEventListener("resize", on);
     };
 }
-const ssr = { mode: "column", duo: true, layout: "narrow", side: "right", width: 382, height: 580, offsetTop: 0, screenWidth: 466, screenHeight: 678, insetTop: 0, insetBottom: 0 };
+const ssr = { mode: "column", duo: true, browser: "safari", layout: "narrow", side: "right", width: 382, height: 580, offsetTop: 0, screenWidth: 466, screenHeight: 678, insetTop: 0, insetBottom: 0 };
 export function useDuet() {
     return useSyncExternalStore(subscribe, read, () => ssr);
 }

package/dist/geometry.d.ts

@@ -80,6 +80,10 @@ export interface Signals {
     framed?: boolean;
     /** devicePixelRatio: tells the in-app preview's 375x667 window from an iPhone SE's (2x). */
     pixelRatio?: number;
+    /** navigator.userAgent and maxTouchPoints: tell iOS and Safari apart (see isIOS, browserOf). Unknown (an
+     *  emulator's signals) restricts nothing. */
+    userAgent?: string;
+    touchPoints?: number;
 }
 export interface Context {
     mode: Mode;
@@ -103,6 +107,8 @@ export interface Context {
     /** A Safari split-view pane on the open Duo (see isSplit). In column mode nothing tells which pane it is, so
      *  the controls are drawn in both columns, each pane showing only its own (chrome.tsx); `side` is moot. */
     split?: boolean;
+    /** The browser the page runs in (see browserOf). Only Safari gets the column. */
+    browser: Browser;
 }
 export type Layout = "narrow" | "wide";
 /** Page width from which two panes fit. The page spans the window, controls floating over it: the open Duo gives
@@ -110,6 +116,13 @@ export type Layout = "narrow" | "wide";
 export declare const WIDE = 600;
 export declare const isPreview: (s: Signals) => boolean;
 export declare const isDuo: (s: Signals) => boolean;
+/** iOS has no model in its UA, so the sizes above say Duo; the UA says iPhone. Safari's "Request Desktop Website"
+ *  sends a Mac UA, told from a Mac by touch. undefined when the signals carry no UA. */
+export declare const isIOS: (s: Signals) => boolean | undefined;
+export type Browser = "safari" | "chrome" | "firefox" | "edge" | "webview" | "other";
+/** Every iOS browser is WebKit; the others name themselves in the UA. An in-app web view (Instagram, Facebook)
+ *  drops the "Safari/" token; the in-app Safari preview keeps it, and is Safari. */
+export declare function browserOf(ua: string | undefined): Browser;
 /** A Safari split-view pane: its window is 469x669 in either pane. Nothing tells the left pane from the right
  *  (device probe 2026-10-25: screenX, availLeft, insets, visualViewport and touch screenX read the same in both),
  *  though Safari's column sits on the pane's outer edge. So the inline side is remembered apart for split view. */

package/dist/geometry.js

@@ -53,11 +53,32 @@ export const isPreview = (s) => !s.standalone && s.pixelRatio === PREVIEW.pixelR
  *  Other phones and desktops never match, so apps can switch to a Duo layout on it alone. */
 const DUO_SIZES = [[466, 678], [669, 951], [469, 669]];
 const duoSize = (w, h) => DUO_SIZES.some(([a, b]) => Math.abs(Math.min(w, h) - a) <= 1 && Math.abs(Math.max(w, h) - b) <= 1);
-export const isDuo = (s) => duoSize(s.screenWidth, s.screenHeight) || duoSize(s.outerWidth, s.outerHeight);
+export const isDuo = (s) => isIOS(s) !== false && (duoSize(s.screenWidth, s.screenHeight) || duoSize(s.outerWidth, s.outerHeight));
+/** iOS has no model in its UA, so the sizes above say Duo; the UA says iPhone. Safari's "Request Desktop Website"
+ *  sends a Mac UA, told from a Mac by touch. undefined when the signals carry no UA. */
+export const isIOS = (s) => s.userAgent === undefined ? undefined
+    : /iPhone|iPod/.test(s.userAgent) || (/Macintosh/.test(s.userAgent) && (s.touchPoints ?? 0) > 1);
+/** Every iOS browser is WebKit; the others name themselves in the UA. An in-app web view (Instagram, Facebook)
+ *  drops the "Safari/" token; the in-app Safari preview keeps it, and is Safari. */
+export function browserOf(ua) {
+    if (ua === undefined)
+        return "safari";
+    if (/EdgiOS|Edg\//.test(ua))
+        return "edge";
+    if (/CriOS|Chrome\//.test(ua))
+        return "chrome";
+    if (/FxiOS|Firefox\//.test(ua))
+        return "firefox";
+    if (/AppleWebKit/.test(ua) && !/Safari\//.test(ua))
+        return "webview";
+    if (/Version\/[\d.]+.*Safari\//.test(ua) && !/OPiOS|OPT\/|GSA\/|Ddg\//.test(ua))
+        return "safari";
+    return "other";
+}
 /** A Safari split-view pane: its window is 469x669 in either pane. Nothing tells the left pane from the right
  *  (device probe 2026-10-25: screenX, availLeft, insets, visualViewport and touch screenX read the same in both),
  *  though Safari's column sits on the pane's outer edge. So the inline side is remembered apart for split view. */
-export const isSplit = (s) => !s.standalone && Math.abs(s.outerWidth - 469) <= 1 && Math.abs(s.outerHeight - 669) <= 1;
+export const isSplit = (s) => !s.standalone && isIOS(s) !== false && Math.abs(s.outerWidth - 469) <= 1 && Math.abs(s.outerHeight - 669) <= 1;
 /** Measured on the Duo simulator: Safari's column is 84pt wide (outer − inner), the chrome below the
  *  page is 98pt (80 with the compact URL bar), the window is the closed screen's 678pt tall. A split-view
  *  pane on the open Duo (469x669 outer, 385x571 inner) has the same column on its outer edge, so either
@@ -70,13 +91,14 @@ const SAFARI_COLUMN = { width: [80, 88], chrome: [68, 102] };
 const within = (v, [a, b]) => v >= a && v <= b;
 /** preferred: the side the user picked for inline controls, if any. */
 export function detect(s, preferred, allowColumn = true) {
-    const duo = isDuo(s);
+    const duo = isDuo(s), browser = browserOf(s.userAgent);
     // Only a Home Screen app owns the strip: a Safari tab reports the column as an 84pt inset for a frame while folding.
     if (s.standalone && (s.insetRight >= 60 || s.insetLeft >= 60)) {
-        return { mode: "strip", duo, layout: layoutOf(s.innerWidth), side: s.insetRight >= 60 ? "right" : "left", width: s.innerWidth, height: s.innerHeight, offsetTop: Math.max(0, s.screenHeight - s.innerHeight), screenWidth: s.screenWidth, screenHeight: s.screenHeight, insetTop: s.insetTop, insetBottom: s.insetBottom };
+        return { mode: "strip", duo, browser, layout: layoutOf(s.innerWidth), side: s.insetRight >= 60 ? "right" : "left", width: s.innerWidth, height: s.innerHeight, offsetTop: Math.max(0, s.screenHeight - s.innerHeight), screenWidth: s.screenWidth, screenHeight: s.screenHeight, insetTop: s.insetTop, insetBottom: s.insetBottom };
     }
-    const base = { duo, width: s.innerWidth, height: s.innerHeight, offsetTop: 0, insetTop: s.insetTop, insetBottom: s.insetBottom };
-    const column = allowColumn && !s.standalone && !s.framed
+    const base = { duo, browser, width: s.innerWidth, height: s.innerHeight, offsetTop: 0, insetTop: s.insetTop, insetBottom: s.insetBottom };
+    // Other iOS browsers draw their own chrome where Safari has its column: inline for them.
+    const column = allowColumn && !s.standalone && !s.framed && browser === "safari"
         && within(s.outerWidth - s.innerWidth, SAFARI_COLUMN.width)
         && within(s.outerHeight - s.innerHeight, SAFARI_COLUMN.chrome)
         && s.innerHeight > s.innerWidth // landscape moves Safari's column buttons around

package/dist/index.d.ts

@@ -2,4 +2,4 @@ export { Duet, DuoCookie, useDuet, type DuetProps, type DuetItem, type DuetTab }
 export { bleed, column } from "./layout.ts";
 export { DuetPanes, DuetPaneBar, usePanes, type DuetPanesProps, type DuetPaneBarProps } from "./duet-panes.tsx";
 export { panes, backFrom, type PaneWindow } from "./panes.ts";
-export { detect, isDuo, isSplit, plan, magnet, DUO, INLINE_WIDTH, MAGNET, WIDE, type Context, type Layout, type Mode, type Plan, type Side, type Signals, type Spec } from "./geometry.ts";
+export { browserOf, detect, isDuo, isIOS, isSplit, plan, magnet, DUO, INLINE_WIDTH, MAGNET, WIDE, type Browser, type Context, type Layout, type Mode, type Plan, type Side, type Signals, type Spec } from "./geometry.ts";

package/dist/index.js

@@ -2,4 +2,4 @@ export { Duet, DuoCookie, useDuet } from "./chrome.js";
 export { bleed, column } from "./layout.js";
 export { DuetPanes, DuetPaneBar, usePanes } from "./duet-panes.js";
 export { panes, backFrom } from "./panes.js";
-export { detect, isDuo, isSplit, plan, magnet, DUO, INLINE_WIDTH, MAGNET, WIDE } from "./geometry.js";
+export { browserOf, detect, isDuo, isIOS, isSplit, plan, magnet, DUO, INLINE_WIDTH, MAGNET, WIDE } from "./geometry.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "duet-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Native-feeling controls for React web apps on the foldable iPhone: the side strip, Safari's column, split view and Home Screen apps.",
   "license": "MIT",
   "type": "module",