duet-ui 0.1.1 → 0.2.1

package/README.md

@@ -19,15 +19,20 @@ On the closed Duo, Safari keeps a narrow column beside the page for its own butt
 ## Usage
 
 ```tsx
-import { Duet } from "duet-ui";
-import "duet-ui/styles.css";
+"use client";
+import { Duet, type DuetItem } from "duet-ui";
+
+const TABS = [
+  { id: "home", label: "Home", icon: <House size={24} /> },
+  { id: "search", label: "Search", icon: <Search size={24} /> },
+] as const satisfies readonly DuetItem[];
 
 export function App() {
-  const [tab, setTab] = useState("home");
+  const [tab, setTab] = useState<(typeof TABS)[number]["id"]>("home");
   return (
     <Duet
       tabs={{ items: TABS, selected: tab, onSelect: setTab }}
-      actions={[{ id: "share", label: "Share", icon: <Share />, onPress: share }]}
+      actions={[{ id: "share", label: "Share", icon: <Share size={22} />, onPress: share }]}
       minimizeOnScroll
     >
       <Page tab={tab} />
@@ -36,7 +41,9 @@ export function App() {
 }
 ```
 
-Add `viewport-fit=cover` to the viewport meta so the safe areas reach the page. Duet appends `shrink-to-fit=no` itself, so Safari doesn't zoom a split-view pane out to fit the column layer. 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.
 
 ## Modes
 
@@ -45,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
@@ -60,7 +67,27 @@ 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. The server can't tell, so before hydration `duo` is true; remember the answer in a cookie if the server should render the right layout first.
+`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.
+
+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:
+
+```tsx
+// app/page.tsx, a server component
+import { cookies } from "next/headers";
+import { DuoCookie } from "duet-ui";
+
+export default async function Page() {
+  const duo = (await cookies()).get("duet-duo")?.value === "1";
+  return (
+    <>
+      <DuoCookie rendered={duo} />
+      {duo ? <DuoApp /> : <DesktopApp />}
+    </>
+  );
+}
+```
+
+Pass `onChange={() => router.refresh()}` from a client component to re-render without a reload.
 
 ### In-app preview
 
@@ -74,7 +101,7 @@ Links opened from social and mail apps land in the in-app Safari preview (`SFSaf
 | `leading` | Its own group under back, like SwiftUI `.topBarLeading` |
 | `actions` | Like `.primaryAction`; collapses into "…" when it would reach the tabs. Items with `destructive: true` only ever show in "…", last, in red |
 | `primary` | The one main action (compose, new). Narrow: just above the tabs. Wide: under back, at the top. Folds into "…" last, only when the band has no room for both |
-| `tabs` | `{ items, selected, onSelect, search? }`. `search` adds a search tab as the last item |
+| `tabs` | `{ items, selected, onSelect, search? }`. `search` adds a search tab as the last item. Each tab keeps its scroll position |
 | `searchButton` | A round search button at the bottom when there are no tabs |
 | `close` | A sheet or card is open: the strip holds only a close button until it is cleared |
 | `accessory` | A view docked by the tabs, like `.tabViewBottomAccessory` (a mini player) |
@@ -99,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.d.ts

@@ -13,7 +13,11 @@ export interface DuetItem {
     /** Deletes or discards: lives only in "…", last, in red, after a separator (blueprint). */
     destructive?: boolean;
 }
-export interface DuetProps {
+/** A tab: an item whose id is one of the app's tab ids. */
+export type DuetTab<T extends string = string> = DuetItem & {
+    id: T;
+};
+export interface DuetProps<T extends string = string> {
     /** Back button, top of the strip. */
     back?: false | {
         label?: string;
@@ -27,12 +31,14 @@ export interface DuetProps {
     /** The screen's main action (New chat, Compose), a tinted round button: by the thumb above the tabs where one
      *  pane shows, at the top under back where two do. */
     primary?: DuetItem;
-    /** Tab pill at the bottom of the strip. `search` adds a `role: .search` tab as the last item. */
+    /** Tab pill at the bottom of the strip. `search` adds a `role: .search` tab as the last item. The ids are typed
+     *  from `items`: declare them `as const` and `onSelect` gets the union, so `setTab` fits without a cast. Each tab
+     *  keeps its own scroll position, and tapping the selected tab scrolls it to the top, like a native tab bar. */
     tabs?: {
-        items: DuetItem[];
-        selected: string;
-        onSelect: (id: string) => void;
-        search?: DuetItem;
+        items: readonly DuetTab<T>[];
+        selected: NoInfer<T>;
+        onSelect: (id: NoInfer<T>) => void;
+        search?: DuetTab<T>;
     };
     /** Searchable without tabs: a round search button at the bottom of the strip. */
     searchButton?: () => void;
@@ -56,4 +62,12 @@ export interface DuetProps {
     children?: ReactNode;
 }
 export declare function useDuet(): Context;
-export declare function Duet(p: DuetProps): import("react").JSX.Element;
+/** Tells the server whether this browser is an iPhone Duo, so it can render the Duo layout from the first byte.
+ *  The server can't tell on its own, so it renders what the `duet-duo` cookie says (`"1"` on a Duo) and passes that
+ *  as `rendered`. When the browser disagrees, this sets the cookie and calls `onChange`, by default a reload, so a
+ *  new device switches layout once and never again. Renders nothing; works outside `<Duet>`. */
+export declare function DuoCookie({ rendered, onChange }: {
+    rendered: boolean;
+    onChange?: (duo: boolean) => void;
+}): null;
+export declare function Duet<T extends string = string>(props: DuetProps<T>): import("react").JSX.Element;

package/dist/chrome.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { ArrowLeftRight, ChevronLeft, Ellipsis, Search, X } from "./icons.js";
 import { DUO, INLINE_WIDTH, ISLAND, MORPH, isSplit, magnet, plan, stable } from "./geometry.js";
 import { GlassProvider } from "./glassyui/glass-provider.js";
@@ -120,6 +120,23 @@ const ssr = { mode: "column", duo: true, layout: "narrow", side: "right", width:
 export function useDuet() {
     return useSyncExternalStore(subscribe, read, () => ssr);
 }
+/** Tells the server whether this browser is an iPhone Duo, so it can render the Duo layout from the first byte.
+ *  The server can't tell on its own, so it renders what the `duet-duo` cookie says (`"1"` on a Duo) and passes that
+ *  as `rendered`. When the browser disagrees, this sets the cookie and calls `onChange`, by default a reload, so a
+ *  new device switches layout once and never again. Renders nothing; works outside `<Duet>`. */
+export function DuoCookie({ rendered, onChange = () => location.reload() }) {
+    const { duo } = useDuet();
+    // Before hydration useDuet() answers for the server (a Duo); only the browser's own answer counts.
+    const hydrated = useSyncExternalStore(noop, () => true, () => false);
+    useEffect(() => {
+        if (!hydrated || duo === rendered)
+            return;
+        document.cookie = duo ? "duet-duo=1; path=/; max-age=31536000; samesite=lax" : "duet-duo=; path=/; max-age=0";
+        onChange(duo);
+    }, [hydrated, duo, rendered]); // eslint-disable-line react-hooks/exhaustive-deps -- onChange may be a fresh arrow each render
+    return null;
+}
+const noop = () => () => { };
 function useMinimized(on, scroller) {
     const [min, setMin] = useState(false);
     useEffect(() => {
@@ -152,14 +169,24 @@ 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. */
-function noShrink() {
-    const meta = document.querySelector("meta[name=viewport]");
-    if (meta && !/shrink-to-fit/.test(meta.content))
-        meta.content += ",shrink-to-fit=no";
+ *  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) {
+    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);
+    }
+    for (const meta of metas)
+        if (!meta.content.includes(key))
+            meta.content += `,${key}=${value}`;
 }
 if (typeof document !== "undefined")
-    noShrink();
+    viewport("shrink-to-fit", "no");
 function useColumnLayer(on, split, column) {
     const refs = [useRef(null), useRef(null)];
     useEffect(() => {
@@ -277,7 +304,10 @@ function useSideDrag(side, nav, onStart) {
     }, [side, nav]); // eslint-disable-line react-hooks/exhaustive-deps -- onStart only resets menu and scrub state
 }
 // --- rendering ----------------------------------------------------------------------------------
-export function Duet(p) {
+// useLayoutEffect warns during SSR on React 18.
+const useLayout = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export function Duet(props) {
+    const p = props; // tab ids are only typed at the boundary
     const ctx = useDuet();
     const scroller = useRef(null);
     const minimized = useMinimized(!!p.minimizeOnScroll, scroller);
@@ -331,10 +361,13 @@ export function Duet(p) {
         // 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.
@@ -348,7 +381,31 @@ export function Duet(p) {
         return () => removeEventListener("pointerdown", close);
     }, [menu, nav, nav2]); // eslint-disable-line react-hooks/exhaustive-deps -- setMenu only reads menu
     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(() => {
+        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());
+    const select = (id) => {
+        const el = scroller.current;
+        if (id === selected)
+            el?.scrollTo({ top: 0, behavior: "smooth" });
+        else {
+            if (el && selected !== undefined)
+                scrolls.current.set(selected, el.scrollTop);
+            p.tabs.onSelect(id);
+        }
+    };
+    useLayout(() => { if (scroller.current && selected !== undefined)
+        scroller.current.scrollTop = scrolls.current.get(selected) ?? 0; }, [selected]);
     const badge = (a) => a.badge !== undefined && a.badge !== "" && _jsx("span", { className: "duet-badge", children: a.badge });
     const tint = (a) => a.tint ? { "--duet-tint": a.tint } : undefined;
     const item = (a) => _jsxs("button", { className: "duet-item", "aria-label": a.label, onClick: a.onPress, children: [a.icon, badge(a)] }, a.id);
@@ -372,7 +429,7 @@ export function Duet(p) {
     const glideTo = (id) => {
         if (id !== selected)
             settle();
-        p.tabs.onSelect(id);
+        select(id);
     };
     // Scrub: holding or dragging on the full pill swells it and shows labels; a lens follows the finger over the
     // tabs and the tab under it lights up; lifting selects it. A quick tap just glides the lens to the tab.
@@ -416,7 +473,7 @@ export function Duet(p) {
                 setScrub(null);
                 settle();
                 if (t)
-                    p.tabs.onSelect(t.id);
+                    select(t.id);
             }
             else if (tapped) {
                 const t = tabItems[tabAt(e.currentTarget, e.clientY)];
@@ -448,7 +505,7 @@ export function Duet(p) {
         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)
-                        p.tabs.onSelect(a.id);
+                        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

@@ -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/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Duet, useDuet, type DuetProps, type DuetItem } from "./chrome.tsx";
+export { Duet, DuoCookie, useDuet, type DuetProps, type DuetItem, type DuetTab } from "./chrome.tsx";
 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";

package/dist/index.js

@@ -1,4 +1,4 @@
-export { Duet, useDuet } from "./chrome.js";
+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";

package/package.json

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