duet-ui 0.2.1 → 0.2.3

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);
 }
@@ -504,7 +506,7 @@ export function Duet(props) {
             return null;
         const close = kind === "more" && !morph, rolling = menu !== kind;
         return (_jsxs(GlassSurface, { preset: "control", className: "duet-glass duet-menu", role: "menu", "data-style": morph ? "morph" : undefined, style: morph ? morphAt(anchor, items.length) : menuAt(anchor, items.length + (close ? 1 : 0)), "data-closing": rolling || undefined, onAnimationEnd: (e) => { if (rolling && (e.animationName === "duet-roll" || e.animationName === "duet-unmorph"))
-                setClosing(null); }, children: [items.map((a, i) => (_jsxs("button", { role: radio ? "menuitemradio" : "menuitem", "aria-checked": radio ? a.id === selected : undefined, "aria-label": a.label, className: "duet-menu-item", "data-on": (radio && a.id === selected) || undefined, "data-destructive": a.destructive || undefined, "data-sep": (a.destructive && i > 0 && !items[i - 1].destructive) || undefined, "data-tint": a.tint ? "" : undefined, style: { ...tint(a), ...(rolling ? undefined : { animationDelay: `${morph ? 0.12 + 0.04 * i : 0.14 + 0.06 * (items.length - i)}s` }) }, onClick: () => { setMenu(null); if (radio)
+                setClosing(null); }, children: [items.map((a, i) => (_jsxs("button", { role: radio ? "menuitemradio" : "menuitem", "aria-checked": radio ? a.id === selected : undefined, "aria-label": a.label, className: "duet-menu-item", "data-on": (radio && a.id === selected) || undefined, "data-destructive": a.destructive || undefined, "data-sep": (a.destructive && i > 0 && !items[i - 1].destructive) || undefined, "data-tint": a.tint ? "" : undefined, style: { ...tint(a), ...(rolling ? undefined : { animationDelay: `${morph ? 0.06 + 0.025 * i : 0.05 + 0.035 * (items.length - i)}s` }) }, onClick: () => { setMenu(null); if (radio)
                         select(a.id);
                     else
                         a.onPress?.(); }, children: [a.icon, morph && _jsx("span", { className: "duet-menu-label", children: a.label }), badge(a)] }, a.id))), close && _jsx("button", { className: "duet-menu-item", "aria-label": "Close", onClick: () => setMenu(null), children: _jsx(X, { size: 20 }) })] }));

package/dist/duet.css

@@ -163,9 +163,9 @@
 .duet-menu {
   position: fixed; z-index: 51; display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
   padding: 0 3px; overflow: hidden; transition: none;
-  animation: duet-unroll 0.44s var(--duet-spring-out) both, duet-thin 0.44s ease-out both;
+  animation: duet-unroll 0.36s var(--duet-spring-out) both, duet-thin 0.36s ease-out both;
 }
-.duet-menu[data-closing] { animation: duet-roll 0.26s cubic-bezier(0.32, 0.72, 0, 1) both, duet-thin 0.26s ease-out both; pointer-events: none; }
+.duet-menu[data-closing] { animation: duet-roll 0.22s cubic-bezier(0.32, 0.72, 0, 1) both, duet-thin 0.22s ease-out both; pointer-events: none; }
 /* A touch denser than the controls, so the strip under it does not compete with the menu icons. */
 .duet-menu::before { background-color: var(--duet-menu); }
 .duet-menu > * { animation: duet-fade 0.16s 0.03s var(--duet-spring-out) both; }
@@ -202,9 +202,9 @@
    circle (--x0/--y0 is its top-left) and springs out to the list; closing shrinks it back into the button. */
 .duet-menu[data-style="morph"] {
   flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 6px; border-radius: 22px;
-  animation: duet-morph 0.42s var(--duet-spring-out) both;
+  animation: duet-morph 0.36s var(--duet-spring-out) both;
 }
-.duet-menu[data-style="morph"][data-closing] { animation: duet-unmorph 0.24s cubic-bezier(0.32, 0.72, 0, 1) both; }
+.duet-menu[data-style="morph"][data-closing] { animation: duet-unmorph 0.2s cubic-bezier(0.32, 0.72, 0, 1) both; }
 .duet[data-side="left"] .duet-menu[data-style="morph"] { flex-direction: column; }
 .duet-menu[data-style="morph"] > .duet-menu-item {
   width: auto; height: 44px; border-radius: 16px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 12px;

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.3",
   "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",