akanjs 2.3.6-rc.3 → 2.3.6-rc.4

package/client/csrTypes.ts

@@ -20,10 +20,10 @@ export type PageSafeAreaConfig =
 export interface PageConfig {
   transition?: TransitionType;
   safeArea?: PageSafeAreaConfig;
-  /** Top chrome reservation in px. Use 0 or omit for no reservation. */
-  topInset?: number;
-  /** Bottom chrome reservation in px. Use 0 or omit for no reservation. */
-  bottomInset?: number;
+  /** Top chrome reservation in px. Use true for the default 48px reservation. */
+  topInset?: number | boolean;
+  /** Bottom chrome reservation in px. Use true for the default 48px reservation. */
+  bottomInset?: number | boolean;
   gesture?: boolean;
   cache?: boolean;
   /**

package/client/frameConfig.ts

@@ -24,6 +24,7 @@ const pageConfigKeys = new Set<keyof PageConfig>([
   "bottomSafeAreaColor",
 ]);
 const transitionTypes = new Set<TransitionType>(["none", "fade", "bottomUp", "stack", "scaleOut"]);
+const DEFAULT_BOOLEAN_INSET = 48;
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null && !Array.isArray(value);
@@ -43,16 +44,18 @@ export function validatePageConfig(routeKey: string, config?: PageConfig) {
     throw new Error(`[route-convention] unsupported pageConfig.transition "${pageConfig.transition}" in ${routeKey}`);
   }
   if (pageConfig.topInset !== undefined && !isValidInsetValue(pageConfig.topInset)) {
-    throw new Error(`[route-convention] pageConfig.topInset in ${routeKey} must be a non-negative px number.`);
+    throw new Error(`[route-convention] pageConfig.topInset in ${routeKey} must be a boolean or non-negative px number.`);
   }
   if (pageConfig.bottomInset !== undefined && !isValidInsetValue(pageConfig.bottomInset)) {
-    throw new Error(`[route-convention] pageConfig.bottomInset in ${routeKey} must be a non-negative px number.`);
+    throw new Error(
+      `[route-convention] pageConfig.bottomInset in ${routeKey} must be a boolean or non-negative px number.`,
+    );
   }
   validateSafeAreaConfig(routeKey, pageConfig.safeArea);
 }
 
-function isValidInsetValue(value: unknown): value is number {
-  return typeof value === "number" && Number.isFinite(value) && value >= 0;
+function isValidInsetValue(value: unknown): value is NonNullable<PageConfig["topInset"]> {
+  return typeof value === "boolean" || (typeof value === "number" && Number.isFinite(value) && value >= 0);
 }
 
 function validateSafeAreaConfig(routeKey: string, safeArea?: PageSafeAreaConfig) {
@@ -134,8 +137,8 @@ export function resolvePageState({
     transition,
     topSafeArea: safeArea.top,
     bottomSafeArea: safeArea.bottom,
-    topInset: config.topInset ?? 0,
-    bottomInset: config.bottomInset ?? 0,
+    topInset: resolveInset(config.topInset),
+    bottomInset: resolveInset(config.bottomInset),
     gesture: explicitKeys.gesture ? (config.gesture ?? false) : transition === "none" ? false : (config.gesture ?? false),
     cache: config.cache ?? false,
     topSafeAreaColor: config.topSafeAreaColor ?? "var(--color-base-100, Canvas)",
@@ -143,6 +146,12 @@ export function resolvePageState({
   };
 }
 
+function resolveInset(inset: PageConfig["topInset"]): number {
+  if (inset === true) return DEFAULT_BOOLEAN_INSET;
+  if (inset === false || inset === undefined) return 0;
+  return inset;
+}
+
 function getPlatformFrameProfile(platform: DevicePlatform): PageConfig {
   if (platform === "ios") return { safeArea: true, transition: "stack" };
   if (platform === "android") return { safeArea: { android: "auto" }, transition: "scaleOut", gesture: false };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.3.6-rc.3",
+  "version": "2.3.6-rc.4",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/types/client/csrTypes.d.ts

@@ -14,10 +14,10 @@ export type PageSafeAreaConfig = boolean | "top" | "bottom" | {
 export interface PageConfig {
     transition?: TransitionType;
     safeArea?: PageSafeAreaConfig;
-    /** Top chrome reservation in px. Use 0 or omit for no reservation. */
-    topInset?: number;
-    /** Bottom chrome reservation in px. Use 0 or omit for no reservation. */
-    bottomInset?: number;
+    /** Top chrome reservation in px. Use true for the default 48px reservation. */
+    topInset?: number | boolean;
+    /** Bottom chrome reservation in px. Use true for the default 48px reservation. */
+    bottomInset?: number | boolean;
     gesture?: boolean;
     cache?: boolean;
     /**