duet-ui 0.3.0 → 0.4.0-rc.2

package/dist/signals.js

@@ -0,0 +1,129 @@
+const watchers = new Set();
+// A desktop page that draws a Duo around this page in an iframe (the site's web Duo) sends the signals the
+// real device would give: `postMessage({ type: "duet:signals", signals }, origin)`. Same origin only. The page
+// says `duet:ready` once it listens, so the host answers then instead of guessing when the page has loaded.
+let emulated = null;
+if (typeof window !== "undefined" && window.top !== window) {
+    addEventListener("message", (e) => {
+        if (e.source !== parent || e.origin !== location.origin || e.data?.type !== "duet:signals")
+            return;
+        emulated = e.data.signals;
+        watchers.forEach((f) => f());
+    });
+    parent.postMessage({ type: "duet:ready" }, location.origin);
+}
+/** The signals a host page sends into this iframe, if any (see above). */
+export const emulatedSignals = () => emulated;
+let probe = null;
+/** The current signals, read from the window (or the emulating host page). Browser only. */
+export function readSignals() {
+    if (emulated)
+        return emulated;
+    if (!probe) {
+        probe = document.createElement("div");
+        probe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;"
+            + "padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)";
+        document.body.appendChild(probe);
+    }
+    const pad = getComputedStyle(probe);
+    return {
+        innerWidth: innerWidth,
+        innerHeight: innerHeight,
+        outerWidth: outerWidth,
+        outerHeight: outerHeight,
+        visualHeight: visualViewport?.height ?? innerHeight,
+        insetTop: parseFloat(pad.paddingTop) || 0,
+        insetBottom: parseFloat(pad.paddingBottom) || 0,
+        screenWidth: innerWidth > innerHeight ? Math.max(screen.width, screen.height) : Math.min(screen.width, screen.height),
+        screenHeight: innerWidth > innerHeight ? Math.min(screen.width, screen.height) : Math.max(screen.width, screen.height),
+        insetRight: parseFloat(pad.paddingRight) || 0,
+        insetLeft: parseFloat(pad.paddingLeft) || 0,
+        framed: window.top !== window,
+        pixelRatio: devicePixelRatio,
+        userAgent: navigator.userAgent,
+        touchPoints: navigator.maxTouchPoints,
+        angle: screen.orientation?.angle ?? (((window.orientation ?? 0) + 360) % 360),
+        standalone: navigator.standalone === true || matchMedia("(display-mode: standalone)").matches,
+        scale: visualViewport?.scale ?? 1,
+    };
+}
+/** Geometry after an event is not final: a fold moves outerWidth up to ~2s after the viewport, and nothing fires when
+ *  it lands. So every event starts a settle: poll every `poll` ms until outer, inner and visual sizes hold for `quiet`
+ *  ms, re-reading on each change and once at the end. A page far narrower or wider than its window (more than `lag`
+ *  apart: Safari's column is 84) is a fold caught halfway, so it does not count as holding until `cap`. After `cap` ms
+ *  settling() turns false even if sizes still move, but polling goes on until they hold, so a real feedback loop
+ *  cannot keep restarting the settle. */
+export const SETTLE = { poll: 100, quiet: 500, cap: 2000, lag: 100 };
+const subs = new Set();
+let settle;
+// Insets count too: the bottom inset lands only after viewport-fit=cover is set, and the preview rule reads it.
+const insets = () => { if (!probe)
+    return ""; const p = getComputedStyle(probe); return `${p.paddingBottom} ${p.paddingLeft} ${p.paddingRight}`; };
+const sizes = () => `${outerWidth}x${outerHeight} ${innerWidth}x${innerHeight} ${visualViewport?.height ?? innerHeight} ${insets()}`;
+const notify = () => subs.forEach((f) => f());
+function kick() {
+    if (settle) {
+        settle.since = Date.now();
+        return;
+    }
+    const now = Date.now();
+    settle = { start: now, since: now, last: sizes(), capped: false, timer: setInterval(tick, SETTLE.poll) };
+}
+function tick() {
+    const s = settle, now = Date.now(), k = sizes(), capped = now - s.start >= SETTLE.cap;
+    const changed = k !== s.last, lagging = Math.abs(outerWidth - innerWidth) > SETTLE.lag;
+    if (changed)
+        [s.last, s.since] = [k, now];
+    if (now - s.since >= SETTLE.quiet && (!lagging || capped)) {
+        clearInterval(s.timer);
+        settle = undefined;
+        return notify();
+    }
+    // Re-read on a change, and once as settling() turns false.
+    if (changed || (capped && !s.capped))
+        notify();
+    s.capped = capped;
+}
+/** True while the window is still settling after a geometry event, for at most SETTLE.cap: mode flips then are the
+ *  transition, not a feedback loop, so stable() must not count them. */
+let pages = 0;
+/** Bumped on pageshow and whenever the page becomes visible: the page may now be in another container (the in-app
+ *  preview's "Open in Safari" hands it to a tab without reloading), so stable() decides the preview afresh. */
+export const epoch = () => pages;
+export const settling = () => !!settle && Date.now() - settle.start < SETTLE.cap;
+/** Calls `cb` whenever the signals may have changed, so it can call readSignals() and detect() again: on resize,
+ *  rotation (a turn from one landscape to the other keeps the window size, so screen.orientation too), the keyboard
+ *  (visualViewport), and on pageshow and visibilitychange, as when an in-app preview's "Open in Safari" hands the
+ *  page to a Safari tab without reloading it. Each event, and the call itself (a fresh tab settles with no event),
+ *  starts a settle (SETTLE): `cb` runs at once, on every size change while it polls, and once when sizes hold.
+ *  Returns the unsubscribe. Browser only. */
+export function watchSignals(cb) {
+    const on = () => { kick(); cb(); };
+    const shown = () => { pages++; on(); };
+    const visible = () => { if (document.visibilityState === "visible")
+        shown(); };
+    const win = ["resize", "orientationchange"];
+    win.forEach((e) => addEventListener(e, on));
+    addEventListener("pageshow", shown);
+    document.addEventListener("visibilitychange", visible);
+    screen.orientation?.addEventListener("change", on);
+    visualViewport?.addEventListener("resize", on);
+    subs.add(cb);
+    watchers.add(cb);
+    kick();
+    const t = setTimeout(cb, 0);
+    return () => {
+        subs.delete(cb);
+        watchers.delete(cb);
+        clearTimeout(t);
+        if (!subs.size && settle) {
+            clearInterval(settle.timer);
+            settle = undefined;
+        }
+        win.forEach((e) => removeEventListener(e, on));
+        removeEventListener("pageshow", shown);
+        document.removeEventListener("visibilitychange", visible);
+        screen.orientation?.removeEventListener("change", on);
+        visualViewport?.removeEventListener("resize", on);
+    };
+}

package/dist/theme.d.ts

@@ -0,0 +1,22 @@
+/** Light or dark, or follow the system. */
+export type Appearance = "auto" | "light" | "dark";
+/** How the app's own icons are drawn. The chrome's system glyphs (back, close, "…", search) keep theirs. */
+export interface DuetIcons {
+    /** Icons in round buttons, groups and menus. Number is px. Default 22. */
+    size?: number | string;
+    /** Icons in the tab pill. Number is px. Default 24. */
+    tabSize?: number | string;
+    /** Stroke width of SVG line icons (Lucide and the like), the way SF Symbols have a weight. Default 2. */
+    weight?: number;
+    /** Colour of icons that are not selected. Default: the ink, black in light and white in dark. */
+    color?: string;
+}
+export interface DuetTheme {
+    /** Accent for the selected tab, the active menu item and the primary button, like iOS's tintColor. */
+    tint?: string;
+    icons?: DuetIcons;
+}
+/** The custom properties a theme sets; unset fields are left to the stylesheet (and to your CSS). */
+export declare function themeVars({ tint, icons }: DuetTheme): Record<string, string>;
+/** GlassyUI's theme for an appearance (and the older `dark` flag): undefined follows the system. */
+export declare function glassTheme(appearance?: Appearance, dark?: boolean): "light" | "dark" | undefined;

package/dist/theme.js

@@ -0,0 +1,27 @@
+// The small theming surface: an accent (iOS tintColor), an appearance (overrideUserInterfaceStyle) and how
+// your icons are drawn. Everything lands as --duet-* custom properties on each strip, so plain CSS can set the
+// same tokens instead (see duet.css). No JSX here, so the tests import it directly.
+const px = (v) => (typeof v === "number" ? `${v}px` : v);
+/** The custom properties a theme sets; unset fields are left to the stylesheet (and to your CSS). */
+export function themeVars({ tint, icons = {} }) {
+    const v = {};
+    if (tint)
+        v["--duet-tint"] = tint;
+    if (icons.size !== undefined)
+        v["--duet-icon-size"] = px(icons.size);
+    if (icons.tabSize !== undefined)
+        v["--duet-tab-icon-size"] = px(icons.tabSize);
+    if (icons.weight !== undefined)
+        v["--duet-icon-weight"] = String(icons.weight);
+    if (icons.color)
+        v["--duet-icon"] = icons.color;
+    return v;
+}
+/** GlassyUI's theme for an appearance (and the older `dark` flag): undefined follows the system. */
+export function glassTheme(appearance, dark) {
+    if (appearance && appearance !== "auto")
+        return appearance;
+    if (appearance === "auto")
+        return undefined;
+    return dark === undefined ? undefined : dark ? "dark" : "light";
+}

package/package.json

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