@absolutejs/absolute 0.20.0-beta.56 → 0.20.0-beta.58

package/dist/mobile/remoteMacAgentEntry.js

@@ -826,6 +826,11 @@ const bridgeBootstrap = (path: string, safeAreaInsets: { bottom: number; left: n
 			send({ format: 3, kind: 'event', event: 'navigation', path });
 		}
 	};
+	globalThis.__absoluteRequestBack = () => {
+		const event = new CustomEvent('absolute:back-request', { cancelable: true });
+		if (!dispatchEvent(event)) return;
+		send({ format: 3, kind: 'event', event: 'back-unhandled', path: currentPath });
+	};
 	if (\${DEV_ORIGIN ? 'true' : 'false'}) {
 		const publishPath = () => {
 			const path = location.pathname + location.search + location.hash;
@@ -931,12 +936,12 @@ export function AbsoluteWebHost() {
 	}, [safeAreaInsets.bottom, safeAreaInsets.left, safeAreaInsets.right, safeAreaInsets.top]);
 	useEffect(() => {
 		const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
-			if (!canGoBack) return false;
-			webView.current?.goBack();
+			if (!indexUri) return false;
+			webView.current?.injectJavaScript('globalThis.__absoluteRequestBack?.(); true;');
 			return true;
 		});
 		return () => subscription.remove();
-	}, [canGoBack]);
+	}, [indexUri]);
 
 	const respond = (message: Record<string, unknown>) => {
 		const source = JSON.stringify(message).replaceAll('\\u2028', '\\\\u2028').replaceAll('\\u2029', '\\\\u2029');
@@ -976,6 +981,11 @@ export function AbsoluteWebHost() {
 			else activeWebPath.current = message.path;
 			return;
 		}
+		if (message.kind === 'event' && message.event === 'back-unhandled') {
+			if (canGoBack) webView.current?.goBack();
+			else BackHandler.exitApp();
+			return;
+		}
 		if (message.kind !== 'request' || typeof message.id !== 'string' || message.path !== activeWebPath.current) return;
 		try {
 			if (typeof message.params !== 'object' || message.params === null || Array.isArray(message.params)) throw new Error('Expo bridge method params are invalid.');

package/dist/mobile/shellBootstrap.js

@@ -1,5 +1,264 @@
+// src/mobile/uiPrimitives.ts
+var STYLE_ID = "absolute-mobile-ui-primitives";
+var NAVIGATION_EVENT = "absolute:navigation-change";
+var SHEET_EVENT = "absolute:sheet-change";
+var BACK_EVENT = "absolute:back-request";
+var ACTIVE_SHEET_SELECTOR = "dialog[data-absolute-sheet][open]";
+var TAB_LINK_SELECTOR = "[data-absolute-tab-bar] a[href]";
+var UI_STYLE = `
+[data-absolute-app-shell] {
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr) auto;
+	box-sizing: border-box;
+	min-height: var(--absolute-available-height, 100dvh);
+	padding-inline: var(--absolute-safe-area-inset-left, 0px) var(--absolute-safe-area-inset-right, 0px);
+}
+[data-absolute-app-header] {
+	padding-top: var(--absolute-safe-area-inset-top, 0px);
+}
+[data-absolute-app-main], [data-absolute-navigation-stack] {
+	min-width: 0;
+	min-height: 0;
+}
+[data-absolute-app-main] {
+	overflow: auto;
+	overscroll-behavior-y: contain;
+}
+[data-absolute-navigation-stack] {
+	view-transition-name: absolute-mobile-stack;
+}
+[data-absolute-tab-bar] {
+	display: flex;
+	align-items: stretch;
+	justify-content: space-around;
+	box-sizing: border-box;
+	padding-bottom: var(--absolute-safe-area-inset-bottom, 0px);
+	background: Canvas;
+	color: CanvasText;
+}
+[data-absolute-tab-bar] > a {
+	display: grid;
+	flex: 1 1 0;
+	min-width: 0;
+	min-height: 2.75rem;
+	place-items: center;
+	padding: 0.375rem 0.5rem;
+	color: inherit;
+	text-align: center;
+	text-decoration: none;
+	touch-action: manipulation;
+}
+[data-absolute-tab-bar] > a[aria-current="page"] {
+	font-weight: 700;
+}
+dialog[data-absolute-sheet] {
+	box-sizing: border-box;
+	width: min(100%, var(--absolute-sheet-max-width, 42rem));
+	max-height: min(90dvh, var(--absolute-available-height, 90dvh));
+	margin: auto auto 0;
+	padding: 1rem max(1rem, var(--absolute-safe-area-inset-right, 0px)) max(1rem, var(--absolute-safe-area-inset-bottom, 0px)) max(1rem, var(--absolute-safe-area-inset-left, 0px));
+	overflow: auto;
+	border: 1px solid color-mix(in srgb, CanvasText 18%, transparent);
+	border-radius: 1rem 1rem 0 0;
+	background: Canvas;
+	color: CanvasText;
+	box-shadow: 0 -0.5rem 2rem color-mix(in srgb, CanvasText 18%, transparent);
+}
+dialog[data-absolute-sheet]::backdrop {
+	background: color-mix(in srgb, CanvasText 38%, transparent);
+}
+@keyframes absolute-mobile-forward-old { to { opacity: 0; transform: translateX(-12%); } }
+@keyframes absolute-mobile-forward-new { from { opacity: 0; transform: translateX(12%); } }
+@keyframes absolute-mobile-back-old { to { opacity: 0; transform: translateX(12%); } }
+@keyframes absolute-mobile-back-new { from { opacity: 0; transform: translateX(-12%); } }
+html[data-absolute-navigation-direction="forward"]::view-transition-old(absolute-mobile-stack) { animation: 180ms ease both absolute-mobile-forward-old; }
+html[data-absolute-navigation-direction="forward"]::view-transition-new(absolute-mobile-stack) { animation: 180ms ease both absolute-mobile-forward-new; }
+html[data-absolute-navigation-direction="back"]::view-transition-old(absolute-mobile-stack) { animation: 180ms ease both absolute-mobile-back-old; }
+html[data-absolute-navigation-direction="back"]::view-transition-new(absolute-mobile-stack) { animation: 180ms ease both absolute-mobile-back-new; }
+html[data-absolute-reduced-motion="reduce"]::view-transition-old(absolute-mobile-stack),
+html[data-absolute-reduced-motion="reduce"]::view-transition-new(absolute-mobile-stack) { animation: none; }
+`;
+var currentPath = () => `${location.pathname}${location.search}${location.hash}`;
+var ensureStyle = () => {
+  let style = document.getElementById(STYLE_ID);
+  if (!(style instanceof HTMLStyleElement)) {
+    style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = UI_STYLE;
+    document.head.append(style);
+  }
+};
+var sheetById = (id) => {
+  const target = document.getElementById(id);
+  return target instanceof HTMLDialogElement && target.dataset.absoluteSheet !== undefined ? target : undefined;
+};
+var dispatchSheet = (sheet, open) => dispatchEvent(new CustomEvent(SHEET_EVENT, {
+  detail: { id: sheet.id, open }
+}));
+var focusSheet = (sheet) => {
+  const target = sheet.querySelector('[autofocus], button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  (target ?? sheet).focus();
+};
+var sheetOpeners = new WeakMap;
+var closeAbsoluteMobileSheet = (target) => {
+  const sheet = typeof target === "string" ? sheetById(target) : target;
+  if (!sheet || !sheet.open)
+    return false;
+  if (typeof sheet.close === "function")
+    sheet.close();
+  else
+    sheet.removeAttribute("open");
+  sheet.removeAttribute("aria-modal");
+  sheetOpeners.get(sheet)?.focus();
+  sheetOpeners.delete(sheet);
+  dispatchSheet(sheet, false);
+  return true;
+};
+var openAbsoluteMobileSheet = (target, opener) => {
+  const sheet = typeof target === "string" ? sheetById(target) : target;
+  if (!sheet || sheet.dataset.absoluteSheet === undefined)
+    return false;
+  const active = document.querySelector(ACTIVE_SHEET_SELECTOR);
+  if (active && active !== sheet)
+    closeAbsoluteMobileSheet(active);
+  if (opener)
+    sheetOpeners.set(sheet, opener);
+  if (!sheet.open) {
+    if (typeof sheet.showModal === "function")
+      sheet.showModal();
+    else
+      sheet.setAttribute("open", "");
+  }
+  sheet.setAttribute("aria-modal", "true");
+  focusSheet(sheet);
+  dispatchSheet(sheet, true);
+  return true;
+};
+var readAbsoluteMobileLinkIntent = (anchor) => {
+  const mode = anchor.dataset.absoluteLink;
+  if (mode === "back")
+    return { kind: "back" };
+  if (mode === "external")
+    return { kind: "external" };
+  return { kind: "navigate", replace: mode === "replace" };
+};
+var requestAbsoluteMobileBack = () => {
+  const event = new CustomEvent(BACK_EVENT, { cancelable: true });
+  return !dispatchEvent(event);
+};
+var normalizePathname = (value) => {
+  try {
+    return new URL(value, location.href).pathname.replace(/\/$/u, "") || "/";
+  } catch {
+    return;
+  }
+};
+var syncTabLinks = (path) => {
+  const activePath = normalizePathname(path);
+  if (!activePath)
+    return;
+  document.querySelectorAll(TAB_LINK_SELECTOR).forEach((anchor) => {
+    const candidate = normalizePathname(anchor.href);
+    const prefix = anchor.dataset.absoluteTabMatch === "prefix";
+    const active = candidate !== undefined && (prefix ? activePath === candidate || candidate !== "/" && activePath.startsWith(`${candidate}/`) : activePath === candidate);
+    if (active)
+      anchor.setAttribute("aria-current", "page");
+    else
+      anchor.removeAttribute("aria-current");
+  });
+};
+var installAbsoluteMobileUiPrimitives = () => {
+  let disposed = false;
+  let scheduled = false;
+  let path = currentPath();
+  const refreshDocument = (nextPath = path) => {
+    if (disposed || !document.head || !document.body)
+      return;
+    path = nextPath;
+    ensureStyle();
+    syncTabLinks(path);
+  };
+  const scheduleRefresh = () => {
+    if (scheduled || disposed)
+      return;
+    scheduled = true;
+    queueMicrotask(() => {
+      scheduled = false;
+      refreshDocument();
+    });
+  };
+  const handleClick = (event) => {
+    if (!(event.target instanceof Element))
+      return;
+    const opener = event.target.closest("[data-absolute-sheet-open]");
+    if (opener?.dataset.absoluteSheetOpen) {
+      if (openAbsoluteMobileSheet(opener.dataset.absoluteSheetOpen, opener))
+        event.preventDefault();
+      return;
+    }
+    const closer = event.target.closest("[data-absolute-sheet-close]");
+    const sheet = closer?.closest("dialog[data-absolute-sheet]");
+    if (sheet && closeAbsoluteMobileSheet(sheet)) {
+      event.preventDefault();
+      return;
+    }
+    if (event.target instanceof HTMLDialogElement && event.target.dataset.absoluteSheet !== undefined) {
+      const rect = event.target.getBoundingClientRect();
+      const outside = event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
+      if (outside && closeAbsoluteMobileSheet(event.target))
+        event.preventDefault();
+    }
+  };
+  const handleCancel = (event) => {
+    if (!(event.target instanceof HTMLDialogElement))
+      return;
+    if (event.target.dataset.absoluteSheet === undefined)
+      return;
+    event.preventDefault();
+    closeAbsoluteMobileSheet(event.target);
+  };
+  const handleBack = (event) => {
+    const active = document.querySelector(ACTIVE_SHEET_SELECTOR);
+    if (!active)
+      return;
+    event.preventDefault();
+    closeAbsoluteMobileSheet(active);
+  };
+  const observer = new MutationObserver(scheduleRefresh);
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true
+  });
+  addEventListener("click", handleClick);
+  addEventListener("cancel", handleCancel, true);
+  addEventListener(BACK_EVENT, handleBack);
+  refreshDocument();
+  return {
+    refreshDocument,
+    requestBack: requestAbsoluteMobileBack,
+    dispose: () => {
+      if (disposed)
+        return;
+      disposed = true;
+      observer.disconnect();
+      removeEventListener("click", handleClick);
+      removeEventListener("cancel", handleCancel, true);
+      removeEventListener(BACK_EVENT, handleBack);
+    },
+    navigate: (detail) => {
+      path = detail.to;
+      document.documentElement.dataset.absoluteNavigationDirection = detail.direction;
+      refreshDocument(path);
+      dispatchEvent(new CustomEvent(NAVIGATION_EVENT, {
+        detail
+      }));
+    }
+  };
+};
+
 // src/mobile/shellBootstrap.ts
 import { App } from "@capacitor/app";
+import { Browser } from "@capacitor/browser";
 
 // src/mobile/producerContextState.ts
 var ABSOLUTE_MOBILE_PRODUCER_STORAGE_KEY = Symbol.for("absolutejs.mobileProducerAsyncLocalStorage");
@@ -643,7 +902,7 @@ import {
   platform,
   systemBars
 } from "@absolutejs/devices";
-var STYLE_ID = "absolute-mobile-adaptive-shell";
+var STYLE_ID2 = "absolute-mobile-adaptive-shell";
 var ANNOUNCER_ID = "absolute-mobile-announcer";
 var HOST_METRICS_EVENT = "absolute:native-host-metrics";
 var STATUS_STYLE = `
@@ -691,11 +950,11 @@ var viewportSize = () => ({
   width: finitePixels(globalThis.visualViewport?.width ?? innerWidth)
 });
 var setPixels = (name, value) => document.documentElement.style.setProperty(name, `${finitePixels(value)}px`);
-var ensureStyle = () => {
-  let style = document.getElementById(STYLE_ID);
+var ensureStyle2 = () => {
+  let style = document.getElementById(STYLE_ID2);
   if (!(style instanceof HTMLStyleElement)) {
     style = document.createElement("style");
-    style.id = STYLE_ID;
+    style.id = STYLE_ID2;
     style.textContent = STATUS_STYLE;
     document.head.append(style);
   }
@@ -773,7 +1032,7 @@ var installAbsoluteMobileAdaptiveShell = async (devices = defaultDevices) => {
     if (disposed || !document.head || !document.body)
       return;
     ensureViewport();
-    ensureStyle();
+    ensureStyle2();
     const root = document.documentElement;
     const current = state();
     root.dataset.absoluteMobile = "";
@@ -913,6 +1172,19 @@ var pushNavigationHistory = (path) => {
     Reflect.get(bridge, "setPath").call(bridge, path);
   }
 };
+var replaceNavigationHistory = (path) => {
+  const state = { absoluteMobile: true };
+  if (!Reflect.get(globalThis, "__absoluteExpoBridge")) {
+    history.replaceState(state, "", path);
+    return;
+  }
+  const url = new URL(location.href);
+  url.search = "";
+  url.hash = "";
+  url.searchParams.set("absolutePath", path);
+  history.replaceState(state, "", url.href);
+  notifyExpoNavigationPath(path);
+};
 var notifyExpoNavigationPath = (path) => {
   const bridge = Reflect.get(globalThis, "__absoluteExpoBridge");
   if (typeof bridge === "object" && bridge !== null && typeof Reflect.get(bridge, "setPath") === "function") {
@@ -921,6 +1193,7 @@ var notifyExpoNavigationPath = (path) => {
 };
 var navigationGeneration = 0;
 var adaptiveShell;
+var uiPrimitives;
 var notifyCapacitorSystemBarsDomReady = () => {
   const provider = Reflect.get(globalThis, "CapacitorSystemBarsAndroidInterface");
   if (typeof provider !== "object" || provider === null)
@@ -974,33 +1247,63 @@ var installLocalPageStyle = (manifest, pageId, contract) => {
   link.dataset.absoluteMobilePageStyle = page.bundleHash;
   document.head.appendChild(link);
 };
-var navigate = async (manifest, path, pushHistory, fetchImpl) => {
-  await disposeAbsoluteMobilePage();
-  renderStatus("Loading…");
+var navigate = async (manifest, path, historyMode, fetchImpl) => {
+  const hadActivePage = document.body.dataset.absoluteMobilePageActive !== undefined;
+  if (!hadActivePage)
+    renderStatus("Loading…");
   const envelope = await fetchAbsoluteMobilePage(manifest, path, {
     ...fetchImpl ? { fetch: fetchImpl } : {}
   });
-  const activation = await activateAbsoluteMobilePage(envelope, {
-    loadPage: ({ contract, pageId }) => {
-      const page = manifest.pages.find((candidate) => candidate.pageId === pageId && candidate.contract === contract);
-      if (!page) {
-        throw new TypeError(`The embedded app does not contain ${pageId} contract ${contract}.`);
-      }
-      if (page.framework === "html" || page.framework === "htmx") {
-        return installAbsoluteMobileStaticDocument(manifest, page, localBundleUrl(manifest, pageId, contract));
+  let activation;
+  const commit = async () => {
+    await disposeAbsoluteMobilePage();
+    activation = await activateAbsoluteMobilePage(envelope, {
+      loadPage: ({ contract, pageId }) => {
+        const page = manifest.pages.find((candidate) => candidate.pageId === pageId && candidate.contract === contract);
+        if (!page) {
+          throw new TypeError(`The embedded app does not contain ${pageId} contract ${contract}.`);
+        }
+        if (page.framework === "html" || page.framework === "htmx") {
+          return installAbsoluteMobileStaticDocument(manifest, page, localBundleUrl(manifest, pageId, contract));
+        }
+        renderPageTarget();
+        installLocalPageStyle(manifest, pageId, contract);
+        return import(localBundleUrl(manifest, pageId, contract));
       }
-      renderPageTarget();
-      installLocalPageStyle(manifest, pageId, contract);
-      return import(localBundleUrl(manifest, pageId, contract));
-    }
-  });
+    });
+  };
+  const transitionDocument = document;
+  if (hadActivePage && document.documentElement.dataset.absoluteReducedMotion !== "reduce" && transitionDocument.startViewTransition) {
+    const transition = transitionDocument.startViewTransition(commit);
+    await transition.updateCallbackDone;
+    await transition.finished.catch(() => {
+      return;
+    });
+  } else
+    await commit();
+  if (!activation)
+    throw new TypeError("The mobile page did not produce an activation.");
   if (activation.kind === "upgrade-required") {
     renderStatus("This app version must be updated to continue.", "update");
     return;
   }
+  document.body.dataset.absoluteMobilePageActive = "";
   adaptiveShell?.refreshDocument();
-  if (pushHistory)
+  if (historyMode === "push")
     pushNavigationHistory(path);
+  else if (historyMode === "replace")
+    replaceNavigationHistory(path);
+};
+var openExternalLink = (anchor, event) => {
+  if (Reflect.get(globalThis, "__absoluteExpoBridge"))
+    return;
+  try {
+    const url = new URL(anchor.href);
+    if (url.username || url.password || url.protocol !== "http:" && url.protocol !== "https:")
+      return;
+    event.preventDefault();
+    Browser.open({ url: url.href }).catch(() => location.assign(url.href));
+  } catch {}
 };
 var installAnchorNavigation = (manifest, onNavigate) => {
   const handleClick = (event) => {
@@ -1009,12 +1312,23 @@ var installAnchorNavigation = (manifest, onNavigate) => {
     const anchor = event.target.closest("a[href]");
     if (!(anchor instanceof HTMLAnchorElement) || anchor.target)
       return;
+    const intent = readAbsoluteMobileLinkIntent(anchor);
+    if (intent.kind === "back") {
+      event.preventDefault();
+      if (!uiPrimitives?.requestBack())
+        history.back();
+      return;
+    }
+    if (intent.kind === "external") {
+      openExternalLink(anchor, event);
+      return;
+    }
     try {
       const path = resolveAbsoluteMobileNavigation(manifest, anchor.href, location.origin);
       if (!path)
         return;
       event.preventDefault();
-      onNavigate(path);
+      onNavigate(path, intent.kind === "navigate" && intent.replace ? "replace" : "forward", intent.kind === "navigate" && intent.replace);
     } catch {}
   };
   addEventListener("click", handleClick);
@@ -1041,21 +1355,29 @@ var installDeepLinks = async (manifest, onNavigate, authRedirectUri) => {
   } catch {}
   return listener;
 };
-var navigateWithFailureState = async (manifest, path, pushHistory, reinstallBrowserNavigation, fetchImpl) => {
+var navigateWithFailureState = async (manifest, path, historyMode, direction, from, reinstallBrowserNavigation, fetchImpl) => {
+  let completed = false;
   try {
-    await navigate(manifest, path, pushHistory, fetchImpl);
+    document.documentElement.dataset.absoluteNavigationDirection = direction;
+    await navigate(manifest, path, historyMode, fetchImpl);
+    completed = true;
   } catch (error) {
     console.error("[Absolute Mobile] Navigation failed:", error);
     renderStatus(document.documentElement.dataset.absoluteNetwork === "offline" ? "You are offline. Reconnect to load this page." : "Unable to load this page. Check your connection and retry.", "error");
   } finally {
     reinstallBrowserNavigation();
   }
+  if (completed)
+    uiPrimitives?.navigate({ direction, from, to: path });
 };
 var startAbsoluteMobileShell = async (options = {}) => {
   notifyCapacitorSystemBarsDomReady();
   await adaptiveShell?.dispose();
+  uiPrimitives?.dispose();
   adaptiveShell = await installAbsoluteMobileAdaptiveShell();
+  uiPrimitives = installAbsoluteMobileUiPrimitives();
   const manifest = await readManifest();
+  let activePath = initialNavigationPath(manifest.entry);
   const auth = manifest.auth && options.createAuth ? await options.createAuth(manifest.auth, {
     beforeSignOut: options.beforeSignOut
   }) : undefined;
@@ -1070,20 +1392,37 @@ var startAbsoluteMobileShell = async (options = {}) => {
   };
   const handlePopState = () => {
     const path = currentNavigationPath();
+    const from = activePath;
+    activePath = path;
     notifyExpoNavigationPath(path);
-    navigateWithFailureState(manifest, path, false, reinstallBrowserNavigation, applicationFetch);
+    navigateWithFailureState(manifest, path, "none", "back", from, reinstallBrowserNavigation, applicationFetch);
   };
   const reinstallBrowserNavigation = () => {
     removeAnchorNavigation();
     removeEventListener("popstate", handlePopState);
+    uiPrimitives?.dispose();
+    uiPrimitives = installAbsoluteMobileUiPrimitives();
+    uiPrimitives.refreshDocument(activePath);
     removeAnchorNavigation = installAnchorNavigation(manifest, onNavigate);
     addEventListener("popstate", handlePopState);
   };
-  const onNavigate = (path) => {
-    navigateWithFailureState(manifest, path, true, reinstallBrowserNavigation, applicationFetch);
+  const onNavigate = (path, direction = "forward", replace = false) => {
+    const from = activePath;
+    activePath = path;
+    navigateWithFailureState(manifest, path, replace ? "replace" : "push", direction, from, reinstallBrowserNavigation, applicationFetch);
   };
-  await navigateWithFailureState(manifest, initialNavigationPath(manifest.entry), false, reinstallBrowserNavigation, applicationFetch);
+  await navigateWithFailureState(manifest, activePath, "none", "replace", activePath, reinstallBrowserNavigation, applicationFetch);
   await installDeepLinks(manifest, onNavigate, auth?.redirectUri);
+  try {
+    await App.addListener("backButton", ({ canGoBack }) => {
+      if (uiPrimitives?.requestBack())
+        return;
+      if (canGoBack)
+        history.back();
+      else
+        App.exitApp();
+    });
+  } catch {}
 };
 export {
   startAbsoluteMobileShell