@monimesl/dot-renderer-react 0.1.0-alpha.27 → 0.1.0-alpha.29

package/dist/components/footer.js

@@ -1,6 +1,6 @@
 import { useTheme } from "../theme.js";
 import { SPACE } from "./tokens.js";
-import { insets, paddingStyle } from "./padding.js";
+import { HOME_INDICATOR, insets, pinnedPaddingStyle } from "./padding.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/footer.tsx
 const Footer = ({ children, ...padding }) => {
@@ -14,7 +14,8 @@ const Footer = ({ children, ...padding }) => {
 			display: "flex",
 			flexDirection: "column",
 			gap: SPACE.medium,
-			...paddingStyle(padding, insets(SPACE.medium, 0)),
+			...pinnedPaddingStyle(padding, insets(SPACE.medium, 0)),
+			marginBottom: `calc(-1 * ${HOME_INDICATOR})`,
 			background: colors.background
 		},
 		children

package/dist/components/padding.js

@@ -26,5 +26,13 @@ function sidePadding(pageSpace, ownPixels) {
 	if (pageSpace === void 0) return ownPixels;
 	return SPACE[pageSpace];
 }
+const HOME_INDICATOR = "env(safe-area-inset-bottom, 0px)";
+function pinnedPaddingStyle(props, ownInsets) {
+	const style = paddingStyle(props, ownInsets);
+	return {
+		...style,
+		paddingBottom: `calc(${style.paddingBottom}px + ${HOME_INDICATOR})`
+	};
+}
 //#endregion
-export { insets, paddingStyle };
+export { HOME_INDICATOR, insets, paddingStyle, pinnedPaddingStyle };

package/dist/components/sheet.js

@@ -2,7 +2,7 @@ import { FONT_FAMILY, useTheme } from "../theme.js";
 import { CARD_RADIUS_SCALE, FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
 import { CLOSE_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
-import { paddingStyle } from "./padding.js";
+import { pinnedPaddingStyle } from "./padding.js";
 import { DialogBackdrop } from "../vendor/@base-ui/react/dialog/backdrop/DialogBackdrop.js";
 import { DialogClose } from "../vendor/@base-ui/react/dialog/close/DialogClose.js";
 import { DialogPopup } from "../vendor/@base-ui/react/dialog/popup/DialogPopup.js";
@@ -45,7 +45,7 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 					gap: SPACE.medium,
 					maxHeight: "85vh",
 					overflowY: "auto",
-					...paddingStyle(padding, {
+					...pinnedPaddingStyle(padding, {
 						top: 16,
 						start: 16,
 						end: 16,

package/dist/components/view.js

@@ -1,9 +1,11 @@
 import { useTheme } from "../theme.js";
 import { SPACE } from "./tokens.js";
 import { insets, paddingStyle } from "./padding.js";
+import { Footer as Footer$1 } from "./footer.js";
 import { pressable } from "./pressable.js";
 import { boxStyle } from "./box.js";
 import { createEvent } from "@monimesl/dot-core";
+import { Children, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/view.tsx
 const ALIGN = {
@@ -38,6 +40,7 @@ const View$1 = (props) => {
 		...boxStyle(props, theme, card ? CARD_LOOK : void 0),
 		cursor: onTap ? "pointer" : void 0
 	};
+	if (endsWithFooter(children)) style.paddingBottom = 0;
 	if (grow) {
 		style.flexGrow = 1;
 		style.minWidth = 0;
@@ -50,5 +53,9 @@ const View$1 = (props) => {
 		children
 	});
 };
+function endsWithFooter(children) {
+	const last = Children.toArray(children).at(-1);
+	return isValidElement(last) && last.type === Footer$1;
+}
 //#endregion
 export { View$1 as View };

package/dist/root.js

@@ -1,4 +1,5 @@
 import { FONT_FAMILY, ThemeContext, resolveTheme, useTheme } from "./theme.js";
+import { HOME_INDICATOR } from "./components/padding.js";
 import { PortalContainerContext } from "./portal.js";
 import { PageRoot } from "./page-root.js";
 import { PullToRefresh } from "./pull-to-refresh.js";
@@ -54,7 +55,9 @@ function DefaultSurface({ children }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-surface",
 		style: {
+			boxSizing: "border-box",
 			minHeight: "100vh",
+			paddingBottom: HOME_INDICATOR,
 			display: "flex",
 			flexDirection: "column",
 			background: colors.background,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-renderer-react",
-  "version": "0.1.0-alpha.27",
+  "version": "0.1.0-alpha.29",
   "description": "React renderer for Dot webviews",
   "type": "module",
   "repository": {
@@ -29,8 +29,8 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "uqr": "^0.1.3",
-    "@monimesl/dot-core": "0.1.0-alpha.27",
-    "@monimesl/dot-webview": "0.1.0-alpha.27"
+    "@monimesl/dot-core": "0.1.0-alpha.29",
+    "@monimesl/dot-webview": "0.1.0-alpha.29"
   },
   "devDependencies": {
     "@base-ui/react": "1.8.0",
@@ -46,7 +46,7 @@
     "tsdown": "^0.23.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.1",
-    "@monimesl/dot-service": "0.1.0-alpha.27"
+    "@monimesl/dot-service": "0.1.0-alpha.29"
   },
   "publishConfig": {
     "access": "public"