duet-ui 0.2.0 → 0.2.1

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
@@ -126,7 +126,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

@@ -169,17 +169,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 +361,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 +383,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

@@ -118,12 +118,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

@@ -63,13 +63,16 @@ export const isSplit = (s) => !s.standalone && Math.abs(s.outerWidth - 469) <= 1
  *  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) {
+    // 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 };
     }
     const base = { duo, width: s.innerWidth, height: s.innerHeight, offsetTop: 0, insetTop: s.insetTop, insetBottom: s.insetBottom };
@@ -81,7 +84,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 +93,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "duet-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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",