duet-ui 0.2.4 → 0.3.0

package/dist/chrome.js

@@ -118,7 +118,7 @@ function subscribe(cb) {
         visualViewport?.removeEventListener("resize", on);
     };
 }
-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 };
+const ssr = { mode: "column", duo: true, browser: "safari", device: "duo", standalone: false, 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/duet.css

@@ -228,6 +228,10 @@ html:has(> body .duet-scroller), html:has(> body .duet-scroller) > body { height
    edge, so there the scroller is an in-document box that runs on under the column. The document still never
    scrolls, so the chrome layer never moves. */
 html[data-duet-mode="column"] .duet-scroller { position: absolute; width: calc(100% + var(--duet-inset-right)); bottom: auto; height: calc(100% + var(--duet-inset-bottom)); }
+/* That overflow widens the document, and touch-action on <html> stops at this scroll container, so without its own
+   a sideways swipe pans the whole page, chrome and all, into the column. Carousels inside are scrollers of their own
+   and still pan. */
+html[data-duet-mode="column"] .duet-scroller { touch-action: pan-y; }
 /* Safari's URL pill floats under the page's bottom edge: the scroller runs on under it (above) and this spacer lets
    the last content scroll clear of it. */
 .duet-scroller::after { content: ""; display: block; height: var(--duet-inset-bottom, 0px); }

package/dist/geometry.d.ts

@@ -109,6 +109,10 @@ export interface Context {
     split?: boolean;
     /** The browser the page runs in (see browserOf). Only Safari gets the column. */
     browser: Browser;
+    /** The device the page runs on (see deviceOf). */
+    device: Device;
+    /** Opened from the Home Screen as a web app, not in a browser tab. */
+    standalone: boolean;
 }
 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
@@ -123,6 +127,11 @@ export type Browser = "safari" | "chrome" | "firefox" | "edge" | "webview" | "ot
 /** 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;
+export type Device = "duo" | "iphone" | "ipad" | "android" | "desktop";
+/** The Duo by its sizes (isDuo), other iOS devices by their screen's short side (an iPad's is 744pt or more,
+ *  and iPadOS sends a Mac UA with touch), Android by its UA. Without a UA (an emulator's signals) only the
+ *  sizes count. */
+export declare function deviceOf(s: Signals): Device;
 /** 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

@@ -75,6 +75,21 @@ export function browserOf(ua) {
         return "safari";
     return "other";
 }
+/** The Duo by its sizes (isDuo), other iOS devices by their screen's short side (an iPad's is 744pt or more,
+ *  and iPadOS sends a Mac UA with touch), Android by its UA. Without a UA (an emulator's signals) only the
+ *  sizes count. */
+export function deviceOf(s) {
+    if (isDuo(s))
+        return "duo";
+    const ua = s.userAgent ?? "";
+    if (/iPad/.test(ua) || (isIOS(s) && Math.min(s.screenWidth, s.screenHeight) >= 700))
+        return "ipad";
+    if (isIOS(s))
+        return "iphone";
+    if (/Android/.test(ua))
+        return "android";
+    return "desktop";
+}
 /** 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. */
@@ -91,12 +106,12 @@ 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), browser = browserOf(s.userAgent);
+    const duo = isDuo(s), browser = browserOf(s.userAgent), device = deviceOf(s), standalone = s.standalone;
     // 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, 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 };
+        return { mode: "strip", duo, browser, device, standalone, 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, browser, width: s.innerWidth, height: s.innerHeight, offsetTop: 0, insetTop: s.insetTop, insetBottom: s.insetBottom };
+    const base = { duo, browser, device, standalone, 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)

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 { 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";
+export { browserOf, detect, deviceOf, isDuo, isIOS, isSplit, plan, magnet, DUO, INLINE_WIDTH, MAGNET, WIDE, type Browser, type Context, type Device, 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 { browserOf, detect, isDuo, isIOS, isSplit, plan, magnet, DUO, INLINE_WIDTH, MAGNET, WIDE } from "./geometry.js";
+export { browserOf, detect, deviceOf, 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.4",
+  "version": "0.3.0",
   "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",