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

package/dist/mobile/shellBootstrap.js

@@ -636,6 +636,254 @@ var http = createAbsoluteHttpClient();
 // src/mobile/shellHttp.ts
 var installAbsoluteMobileShellHttp = (origin, fetch2 = globalThis.fetch) => installAbsoluteHttpTransport(createAbsoluteHttpTransport({ fetch: fetch2, origin, runtime: "native" }));
 
+// src/mobile/adaptiveShell.ts
+import {
+  keyboard,
+  network,
+  platform,
+  systemBars
+} from "@absolutejs/devices";
+var STYLE_ID = "absolute-mobile-adaptive-shell";
+var ANNOUNCER_ID = "absolute-mobile-announcer";
+var HOST_METRICS_EVENT = "absolute:native-host-metrics";
+var STATUS_STYLE = `
+[data-absolute-mobile-status] {
+	display: grid;
+	min-height: var(--absolute-available-height, 100dvh);
+	place-items: center;
+	padding: max(1.5rem, var(--absolute-safe-area-inset-top, 0px)) max(1.5rem, var(--absolute-safe-area-inset-right, 0px)) max(1.5rem, var(--absolute-safe-area-inset-bottom, 0px)) max(1.5rem, var(--absolute-safe-area-inset-left, 0px));
+	box-sizing: border-box;
+	color: CanvasText;
+	background: Canvas;
+	font: 500 1rem/1.5 system-ui, sans-serif;
+	text-align: center;
+}
+[data-absolute-mobile-announcer] {
+	position: fixed;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+`;
+var DEFAULT_KEYBOARD = {
+  heightPx: 0,
+  visible: false
+};
+var DEFAULT_NETWORK = {
+  connected: true,
+  connectionType: "unknown"
+};
+var DEFAULT_PLATFORM = {
+  formFactor: "unknown",
+  isNative: true,
+  os: "unknown",
+  runtime: "capacitor"
+};
+var finitePixels = (value) => Number.isFinite(value) ? Math.max(0, Math.round(value ?? 0)) : 0;
+var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+var viewportSize = () => ({
+  height: finitePixels(globalThis.visualViewport?.height ?? innerHeight),
+  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);
+  if (!(style instanceof HTMLStyleElement)) {
+    style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = STATUS_STYLE;
+    document.head.append(style);
+  }
+};
+var ensureViewport = () => {
+  let viewport = document.head.querySelector('meta[name="viewport"]');
+  if (!viewport) {
+    viewport = document.createElement("meta");
+    viewport.name = "viewport";
+    document.head.prepend(viewport);
+  }
+  const values = new Set(viewport.content.split(",").map((value) => value.trim()).filter(Boolean));
+  values.add("width=device-width");
+  values.add("initial-scale=1");
+  values.add("viewport-fit=cover");
+  viewport.content = [...values].join(",");
+};
+var ensureAnnouncer = () => {
+  let announcer = document.getElementById(ANNOUNCER_ID);
+  if (!(announcer instanceof HTMLElement)) {
+    announcer = document.createElement("div");
+    announcer.id = ANNOUNCER_ID;
+    announcer.dataset.absoluteMobileAnnouncer = "";
+    announcer.setAttribute("aria-atomic", "true");
+    announcer.setAttribute("aria-live", "polite");
+    announcer.setAttribute("role", "status");
+    document.body.append(announcer);
+  }
+  return announcer;
+};
+var dispatchState = (state) => dispatchEvent(new CustomEvent("absolute:adaptive-shell-change", { detail: state }));
+var defaultDevices = {
+  keyboard,
+  network,
+  platform,
+  systemBars
+};
+var hostSafeAreaInsets = (value) => {
+  if (typeof value !== "object" || value === null)
+    return;
+  const candidate = Reflect.get(value, "safeAreaInsets");
+  if (typeof candidate !== "object" || candidate === null)
+    return;
+  const insets = {
+    bottom: Reflect.get(candidate, "bottom"),
+    left: Reflect.get(candidate, "left"),
+    right: Reflect.get(candidate, "right"),
+    top: Reflect.get(candidate, "top")
+  };
+  if (!isFiniteNumber(insets.bottom) || !isFiniteNumber(insets.left) || !isFiniteNumber(insets.right) || !isFiniteNumber(insets.top))
+    return;
+  return {
+    bottom: finitePixels(insets.bottom),
+    left: finitePixels(insets.left),
+    right: finitePixels(insets.right),
+    top: finitePixels(insets.top)
+  };
+};
+var installAbsoluteMobileAdaptiveShell = async (devices = defaultDevices) => {
+  let disposed = false;
+  let keyboardState = { ...DEFAULT_KEYBOARD };
+  let networkState = { ...DEFAULT_NETWORK };
+  let platformInfo = { ...DEFAULT_PLATFORM };
+  let viewport = viewportSize();
+  const subscriptions = [];
+  const state = () => ({
+    availableHeight: globalThis.visualViewport ? viewport.height : Math.max(0, viewport.height - keyboardState.heightPx),
+    keyboard: keyboardState,
+    network: networkState,
+    platform: platformInfo,
+    viewportHeight: viewport.height,
+    viewportWidth: viewport.width
+  });
+  const refreshDocument = () => {
+    if (disposed || !document.head || !document.body)
+      return;
+    ensureViewport();
+    ensureStyle();
+    const root = document.documentElement;
+    const current = state();
+    root.dataset.absoluteMobile = "";
+    root.dataset.absoluteRuntime = current.platform.runtime;
+    root.dataset.absolutePlatform = current.platform.os;
+    root.dataset.absoluteFormFactor = current.platform.formFactor;
+    root.dataset.absoluteKeyboard = current.keyboard.visible ? "visible" : "hidden";
+    root.dataset.absoluteNetwork = current.network.connected ? "online" : "offline";
+    root.dataset.absoluteConnection = current.network.connectionType;
+    root.dataset.absoluteReducedMotion = current.platform.prefersReducedMotion ? "reduce" : "no-preference";
+    const insets = current.platform.safeAreaInsets ?? {
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0
+    };
+    setPixels("--absolute-safe-area-inset-top", insets.top);
+    setPixels("--absolute-safe-area-inset-right", insets.right);
+    setPixels("--absolute-safe-area-inset-bottom", insets.bottom);
+    setPixels("--absolute-safe-area-inset-left", insets.left);
+    setPixels("--absolute-keyboard-height", current.keyboard.heightPx);
+    setPixels("--absolute-viewport-height", current.viewportHeight);
+    setPixels("--absolute-viewport-width", current.viewportWidth);
+    setPixels("--absolute-available-height", current.availableHeight);
+    ensureAnnouncer();
+  };
+  const publish = () => {
+    refreshDocument();
+    dispatchState(state());
+  };
+  const updateViewport = () => {
+    viewport = viewportSize();
+    devices.platform.getInfo().then((info) => {
+      platformInfo = info;
+      publish();
+      return;
+    }).catch(() => publish());
+  };
+  const updateKeyboard = (next) => {
+    keyboardState = {
+      heightPx: finitePixels(next.heightPx),
+      visible: next.visible
+    };
+    publish();
+  };
+  const updateNetwork = (next) => {
+    const changed = networkState.connected !== next.connected;
+    networkState = next;
+    publish();
+    if (changed || !next.connected)
+      ensureAnnouncer().textContent = next.connected ? "Connection restored." : "You are offline.";
+  };
+  const updateHostMetrics = (event) => {
+    const insets = hostSafeAreaInsets(Reflect.get(event, "detail"));
+    if (!insets)
+      return;
+    platformInfo = { ...platformInfo, safeAreaInsets: insets };
+    publish();
+  };
+  const installKeyboard = async () => {
+    const capability = await devices.keyboard.capability();
+    if (!capability.available)
+      return;
+    keyboardState = await devices.keyboard.getState();
+    subscriptions.push(await devices.keyboard.onChange(updateKeyboard));
+  };
+  try {
+    platformInfo = await devices.platform.getInfo();
+  } catch {}
+  const initialHostInsets = hostSafeAreaInsets(Reflect.get(globalThis, "__absoluteNativeHostMetrics"));
+  if (initialHostInsets)
+    platformInfo = {
+      ...platformInfo,
+      safeAreaInsets: initialHostInsets
+    };
+  try {
+    networkState = await devices.network.getStatus();
+    subscriptions.push(await devices.network.onChange(updateNetwork));
+  } catch {}
+  try {
+    await installKeyboard();
+  } catch {}
+  try {
+    const capability = await devices.systemBars.capability("appearance");
+    if (capability.available)
+      await devices.systemBars.setAppearance("automatic");
+  } catch {}
+  addEventListener("resize", updateViewport);
+  addEventListener(HOST_METRICS_EVENT, updateHostMetrics);
+  globalThis.visualViewport?.addEventListener("resize", updateViewport);
+  globalThis.visualViewport?.addEventListener("scroll", updateViewport);
+  publish();
+  if (!networkState.connected)
+    ensureAnnouncer().textContent = "You are offline.";
+  return {
+    refreshDocument,
+    state,
+    dispose: async () => {
+      if (disposed)
+        return;
+      disposed = true;
+      removeEventListener("resize", updateViewport);
+      removeEventListener(HOST_METRICS_EVENT, updateHostMetrics);
+      globalThis.visualViewport?.removeEventListener("resize", updateViewport);
+      globalThis.visualViewport?.removeEventListener("scroll", updateViewport);
+      await Promise.all(subscriptions.map((unsubscribe) => unsubscribe()));
+    }
+  };
+};
+
 // src/mobile/shellBootstrap.ts
 var MANIFEST_PATH = "./absolute-mobile-manifest.json";
 var STATUS_ID = "absolute-mobile-status";
@@ -672,6 +920,7 @@ var notifyExpoNavigationPath = (path) => {
   }
 };
 var navigationGeneration = 0;
+var adaptiveShell;
 var notifyCapacitorSystemBarsDomReady = () => {
   const provider = Reflect.get(globalThis, "CapacitorSystemBarsAndroidInterface");
   if (typeof provider !== "object" || provider === null)
@@ -691,18 +940,20 @@ var readManifest = async () => {
   const manifest = await response.json();
   return manifest;
 };
-var renderStatus = (message) => {
+var renderStatus = (message, kind = "loading") => {
   document.title = "AbsoluteJS";
   document.head.innerHTML = '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">';
-  document.body.innerHTML = `<main id="${STATUS_ID}" role="status"></main>`;
+  document.body.innerHTML = `<main id="${STATUS_ID}" data-absolute-mobile-status="${kind}" role="status" aria-atomic="true" aria-live="polite"></main>`;
   const status = document.getElementById(STATUS_ID);
   if (status)
     status.textContent = message;
+  adaptiveShell?.refreshDocument();
 };
 var renderPageTarget = () => {
   document.title = "AbsoluteJS";
   document.head.innerHTML = '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">';
   document.body.innerHTML = '<div id="root"></div>';
+  adaptiveShell?.refreshDocument();
 };
 var localBundleUrl = (manifest, pageId, contract) => {
   const page = manifest.pages.find((candidate) => candidate.pageId === pageId && candidate.contract === contract);
@@ -744,9 +995,10 @@ var navigate = async (manifest, path, pushHistory, fetchImpl) => {
     }
   });
   if (activation.kind === "upgrade-required") {
-    renderStatus("This app version must be updated to continue.");
+    renderStatus("This app version must be updated to continue.", "update");
     return;
   }
+  adaptiveShell?.refreshDocument();
   if (pushHistory)
     pushNavigationHistory(path);
 };
@@ -794,13 +1046,15 @@ var navigateWithFailureState = async (manifest, path, pushHistory, reinstallBrow
     await navigate(manifest, path, pushHistory, fetchImpl);
   } catch (error) {
     console.error("[Absolute Mobile] Navigation failed:", error);
-    renderStatus("Unable to load this page. Check your connection and retry.");
+    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();
   }
 };
 var startAbsoluteMobileShell = async (options = {}) => {
   notifyCapacitorSystemBarsDomReady();
+  await adaptiveShell?.dispose();
+  adaptiveShell = await installAbsoluteMobileAdaptiveShell();
   const manifest = await readManifest();
   const auth = manifest.auth && options.createAuth ? await options.createAuth(manifest.auth, {
     beforeSignOut: options.beforeSignOut

package/dist/react/index.js

@@ -1470,6 +1470,20 @@ var init_spaRouteManifest = __esm(() => {
   init_resolveConvention();
 });
 
+// src/core/browserTranslation.ts
+var BASELINE_MARKER = "__ABSOLUTE_SSR_TEXT_BASELINES__", BROWSER_TRANSLATION_BASELINE_SCRIPT, browserTranslationBaselineTag = () => `<script>${BROWSER_TRANSLATION_BASELINE_SCRIPT}</script>`, injectBrowserTranslationBaseline = (html) => {
+  if (html.includes(BASELINE_MARKER))
+    return html;
+  const script = browserTranslationBaselineTag();
+  const closingBodyIndex = html.lastIndexOf("</body>");
+  if (closingBodyIndex < 0)
+    return `${html}${script}`;
+  return `${html.slice(0, closingBodyIndex)}${script}${html.slice(closingBodyIndex)}`;
+};
+var init_browserTranslation = __esm(() => {
+  BROWSER_TRANSLATION_BASELINE_SCRIPT = "window.__ABSOLUTE_SSR_TEXT_BASELINES__=new WeakMap();" + "{const r=document.body,b=window.__ABSOLUTE_SSR_TEXT_BASELINES__;" + 'if(r)for(const e of [r,...r.querySelectorAll("*")]){' + "const t=new Map();for(const [i,n]of[...e.childNodes].entries())" + 'if(n.nodeType===3)t.set(i,n.nodeValue??"");if(t.size)b.set(e,t);}}';
+});
+
 // src/core/islandManifest.ts
 var toIslandFrameworkSegment = (framework) => framework[0]?.toUpperCase() + framework.slice(1), collectFrameworkIslands = (manifest, prefix) => {
   const entries = {};
@@ -1924,7 +1938,7 @@ var routeContextCache, cacheRouteData = (pagePath, data) => {
   }
   return html + snippet;
 }, injectSsrScripts = (html, requestId, indexPath, requestContext) => {
-  let result = html;
+  let result = injectBeforeClose(html, browserTranslationBaselineTag());
   const registeredScripts = getAndClearClientScripts(requestId);
   if (registeredScripts.length > 0) {
     result = injectBeforeClose(result, generateClientScriptCode(registeredScripts));
@@ -1960,6 +1974,7 @@ var routeContextCache, cacheRouteData = (pagePath, data) => {
 };
 var init_ssrRender = __esm(() => {
   init_registerClientScript();
+  init_browserTranslation();
   routeContextCache = new Map;
   selectorCache = new Map;
 });
@@ -4704,6 +4719,7 @@ var runWithStreamingSlotWarningScope = (task, metadata) => ensureWarningStorage(
 // src/react/pageHandler.ts
 init_spaRouteManifest();
 init_resolveConvention();
+init_browserTranslation();
 var withRequestUrl = (props, url) => Object.assign(Object.create(null), props, { url });
 var resolveRequestPathname = (request) => {
   if (!request)
@@ -4757,7 +4773,7 @@ var handleReactPageRequest = async (input) => {
       const refreshSetup = buildRefreshSetup();
       const stream = await renderToReadableStream(element, {
         bootstrapModules: [resolvedIndex],
-        bootstrapScriptContent: propsScript + refreshSetup || undefined,
+        bootstrapScriptContent: BROWSER_TRANSLATION_BASELINE_SCRIPT + propsScript + refreshSetup,
         onError(error) {
           console.error("[SSR] React streaming error:", error);
         }
@@ -4953,5 +4969,5 @@ export {
   useIslandStore
 };
 
-//# debugId=E00833F113ECF61A64756E2164756E21
+//# debugId=8AAED68C3E533F4B64756E2164756E21
 //# sourceMappingURL=index.js.map