duet-ui 0.2.0 → 0.2.2

package/README.md

@@ -41,7 +41,7 @@ export function App() {
 }
 ```
 
-That is the whole setup. The styles come with the component, and Duet adds `viewport-fit=cover` and `shrink-to-fit=no` to the viewport meta itself (the safe areas only reach the page with the first; the second keeps Safari from zooming a split-view pane out). Each tab keeps its own scroll position, and tapping the selected tab scrolls back to the top. On other phones and browsers Duet falls back to the `inline` strip.
+That is the whole setup. The styles come with the component, and Duet adds `viewport-fit=cover` and `shrink-to-fit=no` to every viewport meta itself, including ones the framework adds later (the safe areas only reach the page with the first; the second keeps Safari from zooming a split-view pane out). Each tab keeps its own scroll position, and tapping the selected tab scrolls back to the top. On other phones and browsers Duet falls back to the `inline` strip.
 
 Icons are yours, any library: 24pt in tabs, 21 to 22pt on round buttons matches the system. `as const` types the tab ids, so `onSelect` takes `setTab` without a cast.
 
@@ -52,7 +52,7 @@ Duet picks a mode from the window size, safe areas and display mode. `useDuet()`
 | Mode | When | Controls |
 | --- | --- | --- |
 | `strip` | Home Screen app, closed | In the slim strip beside the page, like a native app |
-| `column` | Safari tab, closed or a split-view pane | Painted into the column Safari leaves empty, so the page keeps its full width. In split view both columns get the controls, since a pane can't tell which side it is on, and each shows only its own |
+| `column` | Safari tab, closed, windowed or a split-view pane | Painted into the column Safari leaves empty, so the page keeps its full width. In split view both columns get the controls, since a pane can't tell which side it is on, and each shows only its own |
 | `inline` | Unfolded, landscape, in-app preview | An 84pt strip inside the page. Drag it to either side; the choice is remembered |
 
 ### Claimable space
@@ -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:
 
@@ -126,7 +128,7 @@ The page spans the whole window and the controls float over it, so backgrounds r
 - `column(maxWidth, pad)`: a centred reading column. It centres on the whole window and moves aside from the controls only as far as it must. The `duet-column` class does the same in CSS (`--duet-max`, `--duet-pad`).
 - `bleed(pad)`: a full-width band (hero, sticky bar, list row). The band runs under the controls, its content is padded back beside them. `bleed(false)` runs content itself edge to edge (a map, an image).
 
-The insets are exposed as `--duet-inset-left`, `--duet-inset-right` and `--duet-inset-top` (the strip's top blur in Home Screen apps). Inside `<DuetPanes>` each pane gets its own: only the pane next to the controls is inset.
+The insets are exposed as `--duet-inset-left`, `--duet-inset-right`, `--duet-inset-top` (the strip's top blur in Home Screen apps) and `--duet-inset-bottom` (Safari's floating URL pill in column mode: the page runs on under it, and the scroller ends with that much space so the last content scrolls clear). Inside `<DuetPanes>` each pane gets its own: only the pane next to the controls is inset.
 
 ## Panes
 

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);
 }
@@ -169,17 +171,21 @@ function useMinimized(on, scroller) {
  *  shows only its own column, and a tap there names the side (`tapSide`). */
 let tapSide = "right";
 /** Without shrink-to-fit=no Safari zooms a split pane out to fit the layer's overflow, which reads as another
- *  window size and flips the mode. It applies even when set late, but must land before the first column paint. */
+ *  window size and flips the mode. It applies even when set late, but must land before the first column paint.
+ *  Safari reads the last viewport meta, and frameworks add their own after load (Next.js renders a second one on
+ *  the client, device trace 2026-10-25), so every one is patched. */
 function viewport(key, value) {
-    let meta = document.querySelector("meta[name=viewport]");
-    if (!meta) {
-        meta = document.createElement("meta");
+    const metas = document.querySelectorAll("meta[name=viewport]");
+    if (!metas.length) {
+        const meta = document.createElement("meta");
         meta.name = "viewport";
         meta.content = "width=device-width,initial-scale=1";
         document.head.appendChild(meta);
+        return viewport(key, value);
     }
-    if (!meta.content.includes(key))
-        meta.content += `,${key}=${value}`;
+    for (const meta of metas)
+        if (!meta.content.includes(key))
+            meta.content += `,${key}=${value}`;
 }
 if (typeof document !== "undefined")
     viewport("shrink-to-fit", "no");
@@ -357,10 +363,13 @@ export function Duet(props) {
         // iOS blurs the top of a Home Screen web app (scroll-edge effect) without reporting a safe-area
         // inset, closed and unfolded; pages pad their top content by this much to stay sharp.
         r.setProperty("--duet-inset-top", ctx.mode === "strip" ? `${DUO.edgeBlur}px` : "0px");
+        // Safari's URL pill floats below the layout viewport (the column holds nothing above the page), so the scroller
+        // runs on under it like a document that scrolls, and the last content scrolls clear of it.
+        r.setProperty("--duet-inset-bottom", ctx.mode === "column" ? `${Math.max(0, ctx.screenHeight - ctx.height)}px` : "0px");
         document.documentElement.dataset.duetMode = ctx.mode;
         document.documentElement.toggleAttribute("data-duet-emulated", !!emulated);
         document.documentElement.toggleAttribute("data-duet-split", split);
-    }, [ctx.mode, ctx.side, ctx.screenWidth, ctx.width, split]);
+    }, [ctx.mode, ctx.side, ctx.screenWidth, ctx.screenHeight, ctx.width, ctx.height, split]);
     const [nav, nav2] = useColumnLayer(ctx.mode === "column", split, column);
     useEffect(() => {
         // Any touch outside the chrome closes an open menu, like a native context menu.
@@ -376,7 +385,14 @@ export function Duet(props) {
     useSideDrag(ctx.mode === "inline" ? ctx.side : null, nav, () => { setMenu(null); setScrub(null); });
     // The safe areas only reach the page with viewport-fit=cover. Set on mount, not on import, so a page that only
     // imports DuoCookie keeps its own viewport on other phones.
-    useLayout(() => viewport("viewport-fit", "cover"), []);
+    useLayout(() => {
+        const patch = () => { viewport("viewport-fit", "cover"); viewport("shrink-to-fit", "no"); };
+        patch();
+        // Keep them patched when the framework adds or rewrites a viewport meta later.
+        const watch = new MutationObserver(patch);
+        watch.observe(document.head, { childList: true, subtree: true, attributes: true, attributeFilter: ["content"] });
+        return () => watch.disconnect();
+    }, []);
     const selected = p.tabs?.selected;
     // Each tab keeps its own scroll position in the inner scroller; the selected tab again scrolls to the top.
     const scrolls = useRef(new Map());

package/dist/duet.css

@@ -48,6 +48,8 @@
 /* Press lift, as iOS Liquid Glass: a separate button swells to ~1.4x and its glass turns lighter, then springs
    back on release. Items inside a shared surface (groups, the full tab pill) lift as a bubble of their own. */
 .duet-glass { transition: top 0.35s cubic-bezier(0.32, 0.72, 0, 1), height 0.35s cubic-bezier(0.32, 0.72, 0, 1), scale 0.5s var(--duet-spring-in); }
+/* Minimizing on scroll, as native .onScrollDown: the pill shrinks to the one button in about 0.24s. */
+.duet-pill[data-min] { transition-duration: 0.24s, 0.24s, 0.4s; }
 .duet-glass::before { transition: background-color 0.25s; }
 :is(.duet-round, .duet-pill[data-min]):has(:active) { scale: 1.4; z-index: 52; transition-duration: 0.35s, 0.35s, 0.45s; transition-timing-function: ease, ease, var(--duet-spring-out); }
 :is(.duet-round, .duet-pill[data-min]):has(:active)::before { background-color: var(--duet-lift); }
@@ -82,8 +84,8 @@
 /* Letting go eases everything back together, without overshoot, so the swell and the lens melt away as one. */
 .duet-pill:not([data-min]) {
   --lx: 0px; --ly: 0px; --lm: 1; --pad: 6.35px; padding: var(--pad) 3px; touch-action: none; transform-origin: 100% 50%;
-  --duet-settle: 0.42s cubic-bezier(0.32, 0.72, 0, 1);
-  transition: top var(--duet-settle), height var(--duet-settle), left var(--duet-settle), width var(--duet-settle), --pad var(--duet-settle), scale var(--duet-settle),
+  --duet-settle: 0.42s cubic-bezier(0.32, 0.72, 0, 1); --duet-grow: 0.26s cubic-bezier(0.32, 0.72, 0, 1);
+  transition: top var(--duet-grow), height var(--duet-grow), left var(--duet-grow), width var(--duet-grow), --pad var(--duet-settle), scale var(--duet-settle),
     --li 0.4s cubic-bezier(0.32, 0.72, 0, 1), --lx var(--duet-settle), --ly var(--duet-settle), --lm var(--duet-settle);
 }
 .duet[data-side="left"] .duet-pill { transform-origin: 0 50%; }
@@ -123,6 +125,9 @@
   -webkit-mask: linear-gradient(#000 var(--y0), transparent var(--y0), transparent var(--y1), #000 var(--y1));
   mask: linear-gradient(#000 var(--y0), transparent var(--y0), transparent var(--y1), #000 var(--y1));
 }
+/* Expanding from the minimized button, the other tabs come out of a blur as the pill grows (native: about 0.2s). */
+.duet-pill:not([data-min]) > .duet-tab:not([data-on]), .duet-pill-badges > span { animation: duet-tab-in 0.22s ease-out; }
+@keyframes duet-tab-in { from { opacity: 0; filter: blur(6px); scale: 0.7; } }
 .duet-pill-badges { position: absolute; z-index: 2; left: 3px; right: 3px; top: var(--pad); pointer-events: none; }
 .duet-pill-badges > span { display: block; position: relative; height: 50px; }
 .duet-tab > svg { transition: translate var(--duet-settle, 0.3s), scale var(--duet-settle, 0.3s); }
@@ -222,12 +227,15 @@ html:has(> body .duet-scroller), html:has(> body .duet-scroller) > body { height
    column() or bleed(). Safari's column only shows in-document content and clips fixed boxes at the viewport
    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)); }
+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)); }
+/* 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); }
 /* Split pane: a column on each side (the pane's own is on its outer edge, which the page cannot see); the
    document is scrolled one column across (chrome.tsx). */
 html[data-duet-mode="column"][data-duet-split] .duet-scroller { width: calc(100% + var(--duet-inset-left) + var(--duet-inset-right)); }
-/* Emulated (the site's web Duo): the frame already spans the column. */
-html[data-duet-mode="column"][data-duet-emulated] .duet-scroller { width: 100%; }
+/* Emulated (the site's web Duo): the frame already spans the column and runs under the pill. */
+html[data-duet-mode="column"][data-duet-emulated] .duet-scroller { width: 100%; height: 100%; }
 
 /* Safari tab: an in-document layer at the document top (which never scrolls), so controls can paint in
    Safari's column.

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. */
@@ -118,12 +131,13 @@ export declare const isSplit: (s: Signals) => boolean;
 export declare function detect(s: Signals, preferred?: Side, allowColumn?: boolean): Context;
 /** Mode flips are a feedback loop when the layout of one mode changes the signals into the other (the
  *  column layer's overflow resizing Safari's viewport). Three flips within FLIP_WINDOW pin the page to inline.
- *  The pin lifts when the window changes size, or after `until`: moving a split-view pane to the other side
+ *  Flips only count while the window keeps its size. The pin lifts when the window changes size, or after `until`: moving a split-view pane to the other side
  *  flips the mode a few times without changing the window's size. Each re-pin for the same window doubles
  *  the wait, so a real loop settles instead of flickering. */
 export interface Damper {
     mode?: Mode;
     flips: number[];
+    key?: string;
     pinned?: string;
     until?: number;
     ttl?: number;

package/dist/geometry.js

@@ -53,27 +53,52 @@ 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
  *  side of the page. In-document content paints into it once the document spans both columns (84 + 385 + 84)
  *  and is scrolled 84 across, with `shrink-to-fit=no` in the viewport meta, or Safari zooms the pane out to
- *  fit the wider document (simulator probes, 2026-10-25). */
-const SAFARI_COLUMN = { width: [80, 88], chrome: [76, 102], height: [675, 681] };
+ *  fit the wider document (simulator probes, 2026-10-25). Windowed Safari (floating, or beside the Home Screen)
+ *  keeps the column at other window sizes (device 2026-10-25: 453x661 and 450x670 outer, 369x591 inner), and a
+ *  pane with the compact URL bar has 75pt of chrome, so any portrait Safari window on the Duo with the column counts. */
+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);
-    if (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 };
+    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, 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
@@ -81,7 +106,7 @@ export function detect(s, preferred, allowColumn = true) {
     // Safari's page viewport starts at screen top and ends above its address bar (382x580 of 466x678).
     if (column && isSplit(s))
         return { ...base, mode: "column", layout: layoutOf(s.innerWidth), side: "right", screenWidth: s.outerWidth, screenHeight: s.outerHeight, split: true };
-    if (column && within(s.outerHeight, SAFARI_COLUMN.height))
+    if (column && duo)
         return { ...base, mode: "column", layout: layoutOf(s.innerWidth), side: "right", screenWidth: s.outerWidth, screenHeight: s.outerHeight };
     const preview = isPreview(s), split = isSplit(s);
     return { ...base, mode: "inline", layout: layoutOf(s.innerWidth), side: preferred ?? (preview ? "left" : "right"), screenWidth: s.innerWidth, screenHeight: s.innerHeight, ...(preview && { preview }), ...(split && { split }) };
@@ -90,15 +115,17 @@ const FLIP_WINDOW = 2000;
 export const PIN_TTL = 3000;
 export function stable(d, s, preferred, now) {
     const key = `${s.outerWidth}x${s.outerHeight}`;
-    if (d.pinned && d.pinned !== key)
-        Object.assign(d, { pinned: undefined, ttl: undefined, flips: [] });
+    // A loop keeps the window size; a fold or rotation passes through other sizes, so only same-size flips count.
+    if (d.key !== key)
+        Object.assign(d, { key, pinned: undefined, ttl: undefined, flips: [] });
     if (d.pinned && now >= d.until)
         Object.assign(d, { pinned: undefined, flips: [] });
     let c = detect(s, preferred, !d.pinned);
     if (d.mode && c.mode !== d.mode) {
         d.flips = [...d.flips.filter((t) => now - t < FLIP_WINDOW), now];
         if (d.flips.length >= 3) {
-            d.ttl = d.ttl ? d.ttl * 2 : PIN_TTL;
+            // Doubles only when the loop resumes as the last pin lifts; a later pane move starts from PIN_TTL again.
+            d.ttl = d.ttl && d.until !== undefined && now - d.until < FLIP_WINDOW ? d.ttl * 2 : PIN_TTL;
             Object.assign(d, { pinned: key, until: now + d.ttl });
             c = detect(s, preferred, false);
         }

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.0",
+  "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",