lynx-console 0.4.0 → 0.6.0

package/README.md

@@ -182,6 +182,7 @@ You can also integrate it with a back press handler so that the console closes w
 | `theme`               | `"light" \| "dark"` | `"light"`   | Console UI theme                                 |
 | `safeAreaInsetBottom` | `string`            | `"50px"`    | Bottom safe area inset                           |
 | `customTabs`          | `CustomTab[]`       | `undefined` | Additional custom tabs to display in the console |
+| `initialPosition`     | `{ top?: number; left?: number; right?: number; bottom?: number }` | `{ right: 16, bottom: 84 }` | Initial position (px) of the floating button. Each side is independent, so you can anchor it to any corner (e.g. `{ top: 50, left: 16 }`). When both `top` and `bottom` (or both `left` and `right`) are set, `top`/`left` win. Once the user drags the button, the saved position takes precedence. |
 
 ### `CustomTab`
 

package/dist/index.cjs

@@ -2,6 +2,16 @@ import "./index.css";
 let _lynx_js_react = require("@lynx-js/react");
 let javascript_stringify = require("javascript-stringify");
 
+//#region src/hooks/useKeyboardHeight.ts
+function useKeyboardHeight() {
+	const [keyboardHeight, setKeyboardHeight] = (0, _lynx_js_react.useState)(0);
+	(0, _lynx_js_react.useLynxGlobalEventListener)("keyboardstatuschanged", (status, height) => {
+		setKeyboardHeight(status === "on" ? height : 0);
+	});
+	return keyboardHeight;
+}
+
+//#endregion
 //#region src/styles/theme.ts
 const colorMap = {
 	light: {
@@ -114,6 +124,7 @@ function BottomSheet({ children, title, footer, onClose, isOpen, shouldClose = f
 	const [dragStartHeight, setDragStartHeight] = (0, _lynx_js_react.useState)(savedHeight ?? DEFAULT_HEIGHT);
 	const [isOpening, setIsOpening] = (0, _lynx_js_react.useState)(true);
 	const [isClosing, setIsClosing] = (0, _lynx_js_react.useState)(false);
+	const keyboardHeight = useKeyboardHeight();
 	const handleClose = () => {
 		setIsClosing(true);
 		setTimeout(() => {
@@ -157,9 +168,9 @@ function BottomSheet({ children, title, footer, onClose, isOpen, shouldClose = f
       <view className="bs-overlay" bindtap={handleClose}>
         <view className="bs-content" catchtap={() => {}} style={{
 		background: colors.bg.layerFloating,
-		height: `${isDragging ? tempHeight : sheetHeight}px`,
+		height: `${keyboardHeight > 0 ? Math.min(MAX_HEIGHT, (isDragging ? tempHeight : sheetHeight) + keyboardHeight) : isDragging ? tempHeight : sheetHeight}px`,
 		transform: isOpening || isClosing ? "translateY(100%)" : "translateY(0)",
-		transition: isDragging ? "none" : `transform ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`
+		transition: isDragging ? "none" : `transform ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1), height ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`
 	}}>
           {}
           <view className="bs-handleContainer" bindtouchstart={handleTouchStart} bindtouchmove={handleTouchMove} bindtouchend={handleTouchEnd}>
@@ -173,7 +184,7 @@ function BottomSheet({ children, title, footer, onClose, isOpen, shouldClose = f
                 {title}
               </text>}
           </view>
-          <view className="bs-body" style={{ paddingBottom: safeAreaInsetBottom }}>
+          <view className="bs-body" style={{ paddingBottom: keyboardHeight > 0 ? `${keyboardHeight}px` : safeAreaInsetBottom }}>
             {children}
           </view>
           {footer && <view className="bs-footer">{footer}</view>}
@@ -1357,22 +1368,42 @@ const LONG_PRESS_DURATION = 400;
 const MOVE_THRESHOLD = 5;
 const DEFAULT_RIGHT = 16;
 const DEFAULT_BOTTOM = 84;
-let savedRight = DEFAULT_RIGHT;
-let savedBottom = DEFAULT_BOTTOM;
-function useLongPressDrag(onTap) {
-	const [right, setRight] = (0, _lynx_js_react.useState)(savedRight);
-	const [bottom, setBottom] = (0, _lynx_js_react.useState)(savedBottom);
+function resolveAnchors(initial) {
+	const vertical = initial?.top !== void 0 ? "top" : "bottom";
+	const horizontal = initial?.left !== void 0 ? "left" : "right";
+	const y = vertical === "top" ? initial?.top ?? 0 : initial?.bottom ?? DEFAULT_BOTTOM;
+	return {
+		vertical,
+		horizontal,
+		x: horizontal === "left" ? initial?.left ?? 0 : initial?.right ?? DEFAULT_RIGHT,
+		y
+	};
+}
+let saved = null;
+function useLongPressDrag(onTap, options) {
+	const anchors = resolveAnchors(options?.initialPosition);
+	const snapshot = saved;
+	let initX = anchors.x;
+	let initY = anchors.y;
+	if (snapshot !== null && snapshot.vertical === anchors.vertical && snapshot.horizontal === anchors.horizontal) {
+		initX = snapshot.x;
+		initY = snapshot.y;
+	}
+	const [x, setX] = (0, _lynx_js_react.useState)(initX);
+	const [y, setY] = (0, _lynx_js_react.useState)(initY);
 	const [phase, setPhase] = (0, _lynx_js_react.useState)("idle");
-	const [tempRight, setTempRight] = (0, _lynx_js_react.useState)(savedRight);
-	const [tempBottom, setTempBottom] = (0, _lynx_js_react.useState)(savedBottom);
+	const [tempX, setTempX] = (0, _lynx_js_react.useState)(initX);
+	const [tempY, setTempY] = (0, _lynx_js_react.useState)(initY);
 	const timerRef = (0, _lynx_js_react.useRef)(null);
 	const draggingRef = (0, _lynx_js_react.useRef)(false);
 	const startRef = (0, _lynx_js_react.useRef)({
 		x: 0,
 		y: 0,
-		r: 0,
-		b: 0
+		ax: 0,
+		ay: 0
 	});
+	const xSign = anchors.horizontal === "right" ? -1 : 1;
+	const ySign = anchors.vertical === "bottom" ? -1 : 1;
 	const clearTimer = () => {
 		if (timerRef.current) {
 			clearTimeout(timerRef.current);
@@ -1383,15 +1414,15 @@ function useLongPressDrag(onTap) {
 		startRef.current = {
 			x: e.detail.x,
 			y: e.detail.y,
-			r: right,
-			b: bottom
+			ax: x,
+			ay: y
 		};
 		draggingRef.current = false;
 		timerRef.current = setTimeout(() => {
 			draggingRef.current = true;
 			setPhase("dragging");
-			setTempRight(right);
-			setTempBottom(bottom);
+			setTempX(x);
+			setTempY(y);
 		}, LONG_PRESS_DURATION);
 	};
 	const handleTouchMove = (e) => {
@@ -1399,26 +1430,34 @@ function useLongPressDrag(onTap) {
 		const dy = e.detail.y - startRef.current.y;
 		if (!draggingRef.current && (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD)) clearTimer();
 		if (!draggingRef.current) return;
-		setTempRight(startRef.current.r - dx);
-		setTempBottom(startRef.current.b - dy);
+		setTempX(startRef.current.ax + xSign * dx);
+		setTempY(startRef.current.ay + ySign * dy);
 	};
 	const handleTouchEnd = () => {
 		clearTimer();
 		if (draggingRef.current) {
-			setRight(tempRight);
-			setBottom(tempBottom);
-			savedRight = tempRight;
-			savedBottom = tempBottom;
+			setX(tempX);
+			setY(tempY);
+			saved = {
+				vertical: anchors.vertical,
+				horizontal: anchors.horizontal,
+				x: tempX,
+				y: tempY
+			};
 			setPhase("releasing");
 			draggingRef.current = false;
 			setTimeout(() => setPhase("idle"), 300);
 		} else onTap();
 	};
 	const isDragging = phase === "dragging";
+	const currentX = isDragging ? tempX : x;
+	const currentY = isDragging ? tempY : y;
 	return {
 		phase,
-		right: isDragging ? tempRight : right,
-		bottom: isDragging ? tempBottom : bottom,
+		positionStyle: {
+			[anchors.horizontal]: `${currentX}px`,
+			[anchors.vertical]: `${currentY}px`
+		},
 		clearTimer,
 		handlers: {
 			catchtouchstart: handleTouchStart,
@@ -1446,9 +1485,9 @@ const SHINE_STYLES = {
 		transition: "opacity 300ms cubic-bezier(0.4, 0, 0.2, 1)"
 	}
 };
-const FloatingButton = ({ bindtap, children }) => {
+const FloatingButton = ({ bindtap, children, initialPosition }) => {
 	const colors = useThemeColors();
-	const { phase, right, bottom, clearTimer, handlers } = useLongPressDrag(bindtap);
+	const { phase, positionStyle, clearTimer, handlers } = useLongPressDrag(bindtap, { initialPosition });
 	const handleReload = () => {
 		try {
 			lynx.reload({}, () => {
@@ -1460,8 +1499,7 @@ const FloatingButton = ({ bindtap, children }) => {
 	};
 	const isDragging = phase === "dragging";
 	return <view className={"fb-wrapper"} consume-slide-event={[[-180, 180]]} style={{
-		right: `${right}px`,
-		bottom: `${bottom}px`,
+		...positionStyle,
 		transform: isDragging ? "scale(1.05)" : "scale(1)",
 		transition: `transform ${duration.d4} cubic-bezier(0.4, 0, 0.2, 1)`
 	}} {...handlers}>
@@ -1479,7 +1517,7 @@ const FloatingButton = ({ bindtap, children }) => {
 
 //#endregion
 //#region src/index.tsx
-const LynxConsole = (0, _lynx_js_react.forwardRef)(({ theme = "light", safeAreaInsetBottom = "50px", customTabs }, ref) => {
+const LynxConsole = (0, _lynx_js_react.forwardRef)(({ theme = "light", safeAreaInsetBottom = "50px", customTabs, initialPosition }, ref) => {
 	const [isOpen, setIsOpen] = (0, _lynx_js_react.useState)(false);
 	const [shouldClose, setShouldClose] = (0, _lynx_js_react.useState)(false);
 	const { performances } = usePerformance();
@@ -1517,7 +1555,7 @@ const LynxConsole = (0, _lynx_js_react.forwardRef)(({ theme = "light", safeAreaI
 		backgroundColor: colors.bg.layerDefault,
 		color: colors.fg.neutral
 	}}>
-          <FloatingButton bindtap={handleOpenBottomSheet}>
+          <FloatingButton bindtap={handleOpenBottomSheet} initialPosition={initialPosition}>
             <text className="fb-title t4" style={{
 		fontWeight: "400",
 		color: colors.palette.staticWhite

package/dist/index.d.cts

@@ -88,6 +88,12 @@ interface LynxConsoleProps {
   theme?: "light" | "dark";
   safeAreaInsetBottom?: string;
   customTabs?: CustomTab[];
+  initialPosition?: {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+  };
 }
 declare const LynxConsole: react.ForwardRefExoticComponent<LynxConsoleProps & react.RefAttributes<LynxConsoleHandle>>;
 //#endregion

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/index.tsx"],"mappings":";;;;;UAIiB,SAAA;EACf,GAAA;EACA,KAAA;EACA,aAAA,QAAqB,SAAA;AAAA;AAAA,KAKX,QAAA;AAAA,UAEK,QAAA;EACf,EAAA;EACA,KAAA,EAAO,QAAA;EACP,OAAA;EACA,SAAA;EACA,IAAA;AAAA;AAAA,KAIU,aAAA;AAAA,UAEK,YAAA;EACf,EAAA;EACA,GAAA;EACA,MAAA;EACA,MAAA,EAAQ,aAAA;EACR,UAAA;EACA,UAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,cAAA,GAAiB,MAAA;EACjB,WAAA;EACA,eAAA,GAAkB,MAAA;EAClB,YAAA;EACA,KAAA;AAAA;AAAA,KAIU,oBAAA;AAAA,UAEK,iBAAA;EACf,IAAA;EACA,QAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,YAAA;AAAA;AAAA,UAGe,oBAAA;EACf,EAAA;EACA,SAAA,EAAW,oBAAA;EACX,IAAA;EACA,SAAA;EACA,OAAA,GAAU,iBAAA;EACV,QAAA;AAAA;AAAA,QAIM,MAAA;EAAA,IACF,aAAA;IACF,KAAA;IAAA,CACC,GAAA;EAAA;EAAA,IAGC,gBAAA;IAGE,eAAA;MACE,GAAA,MAAS,IAAA;MACT,IAAA,MAAU,IAAA;MACV,KAAA,MAAW,IAAA;MACX,IAAA,MAAU,IAAA;IAAA;IAIZ,KAAA;MACE,IAAA,GAAO,QAAA;MACP,YAAA,GAAe,GAAA,EAAK,KAAA,EAAO,QAAA;MAC3B,YAAA,IAAgB,QAAA,GAAW,KAAA,EAAO,QAAA;MAElC,QAAA,GAAW,YAAA;MACX,WAAA,GAAc,GAAA,SAAY,YAAA;MAC1B,gBAAA,GAAmB,GAAA,EAAK,KAAA,EAAO,YAAA;MAC/B,gBAAA,IACE,QAAA,GAAW,KAAA,EAAO,YAAA;MAGpB,YAAA,GAAe,oBAAA;MACf,oBAAA,GAAuB,GAAA,EAAK,KAAA,EAAO,oBAAA;MACnC,oBAAA,IACE,QAAA,GAAW,KAAA,EAAO,oBAAA;IAAA;IAItB,qBAAA;EAAA;AAAA;;;UCnFS,iBAAA;EACf,IAAA;EACA,KAAA;EACA,MAAA;AAAA;AAAA,UAGe,gBAAA;EACf,KAAA;EACA,mBAAA;EACA,UAAA,GAAa,SAAA;AAAA;AAAA,cAcT,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/index.tsx"],"mappings":";;;;;UAIiB,SAAA;EACf,GAAA;EACA,KAAA;EACA,aAAA,QAAqB,SAAA;AAAA;AAAA,KAKX,QAAA;AAAA,UAEK,QAAA;EACf,EAAA;EACA,KAAA,EAAO,QAAA;EACP,OAAA;EACA,SAAA;EACA,IAAA;AAAA;AAAA,KAIU,aAAA;AAAA,UAEK,YAAA;EACf,EAAA;EACA,GAAA;EACA,MAAA;EACA,MAAA,EAAQ,aAAA;EACR,UAAA;EACA,UAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,cAAA,GAAiB,MAAA;EACjB,WAAA;EACA,eAAA,GAAkB,MAAA;EAClB,YAAA;EACA,KAAA;AAAA;AAAA,KAIU,oBAAA;AAAA,UAEK,iBAAA;EACf,IAAA;EACA,QAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,YAAA;AAAA;AAAA,UAGe,oBAAA;EACf,EAAA;EACA,SAAA,EAAW,oBAAA;EACX,IAAA;EACA,SAAA;EACA,OAAA,GAAU,iBAAA;EACV,QAAA;AAAA;AAAA,QAIM,MAAA;EAAA,IACF,aAAA;IACF,KAAA;IAAA,CACC,GAAA;EAAA;EAAA,IAGC,gBAAA;IAGE,eAAA;MACE,GAAA,MAAS,IAAA;MACT,IAAA,MAAU,IAAA;MACV,KAAA,MAAW,IAAA;MACX,IAAA,MAAU,IAAA;IAAA;IAIZ,KAAA;MACE,IAAA,GAAO,QAAA;MACP,YAAA,GAAe,GAAA,EAAK,KAAA,EAAO,QAAA;MAC3B,YAAA,IAAgB,QAAA,GAAW,KAAA,EAAO,QAAA;MAElC,QAAA,GAAW,YAAA;MACX,WAAA,GAAc,GAAA,SAAY,YAAA;MAC1B,gBAAA,GAAmB,GAAA,EAAK,KAAA,EAAO,YAAA;MAC/B,gBAAA,IACE,QAAA,GAAW,KAAA,EAAO,YAAA;MAGpB,YAAA,GAAe,oBAAA;MACf,oBAAA,GAAuB,GAAA,EAAK,KAAA,EAAO,oBAAA;MACnC,oBAAA,IACE,QAAA,GAAW,KAAA,EAAO,oBAAA;IAAA;IAItB,qBAAA;EAAA;AAAA;;;UCnFS,iBAAA;EACf,IAAA;EACA,KAAA;EACA,MAAA;AAAA;AAAA,UAGe,gBAAA;EACf,KAAA;EACA,mBAAA;EACA,UAAA,GAAa,SAAA;EACb,eAAA;IACE,GAAA;IACA,IAAA;IACA,KAAA;IACA,MAAA;EAAA;AAAA;AAAA,cAeE,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}

package/dist/index.d.mts

@@ -88,6 +88,12 @@ interface LynxConsoleProps {
   theme?: "light" | "dark";
   safeAreaInsetBottom?: string;
   customTabs?: CustomTab[];
+  initialPosition?: {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+  };
 }
 declare const LynxConsole: react.ForwardRefExoticComponent<LynxConsoleProps & react.RefAttributes<LynxConsoleHandle>>;
 //#endregion

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/index.tsx"],"mappings":";;;;;UAIiB,SAAA;EACf,GAAA;EACA,KAAA;EACA,aAAA,QAAqB,SAAA;AAAA;AAAA,KAKX,QAAA;AAAA,UAEK,QAAA;EACf,EAAA;EACA,KAAA,EAAO,QAAA;EACP,OAAA;EACA,SAAA;EACA,IAAA;AAAA;AAAA,KAIU,aAAA;AAAA,UAEK,YAAA;EACf,EAAA;EACA,GAAA;EACA,MAAA;EACA,MAAA,EAAQ,aAAA;EACR,UAAA;EACA,UAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,cAAA,GAAiB,MAAA;EACjB,WAAA;EACA,eAAA,GAAkB,MAAA;EAClB,YAAA;EACA,KAAA;AAAA;AAAA,KAIU,oBAAA;AAAA,UAEK,iBAAA;EACf,IAAA;EACA,QAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,YAAA;AAAA;AAAA,UAGe,oBAAA;EACf,EAAA;EACA,SAAA,EAAW,oBAAA;EACX,IAAA;EACA,SAAA;EACA,OAAA,GAAU,iBAAA;EACV,QAAA;AAAA;AAAA,QAIM,MAAA;EAAA,IACF,aAAA;IACF,KAAA;IAAA,CACC,GAAA;EAAA;EAAA,IAGC,gBAAA;IAGE,eAAA;MACE,GAAA,MAAS,IAAA;MACT,IAAA,MAAU,IAAA;MACV,KAAA,MAAW,IAAA;MACX,IAAA,MAAU,IAAA;IAAA;IAIZ,KAAA;MACE,IAAA,GAAO,QAAA;MACP,YAAA,GAAe,GAAA,EAAK,KAAA,EAAO,QAAA;MAC3B,YAAA,IAAgB,QAAA,GAAW,KAAA,EAAO,QAAA;MAElC,QAAA,GAAW,YAAA;MACX,WAAA,GAAc,GAAA,SAAY,YAAA;MAC1B,gBAAA,GAAmB,GAAA,EAAK,KAAA,EAAO,YAAA;MAC/B,gBAAA,IACE,QAAA,GAAW,KAAA,EAAO,YAAA;MAGpB,YAAA,GAAe,oBAAA;MACf,oBAAA,GAAuB,GAAA,EAAK,KAAA,EAAO,oBAAA;MACnC,oBAAA,IACE,QAAA,GAAW,KAAA,EAAO,oBAAA;IAAA;IAItB,qBAAA;EAAA;AAAA;;;UCnFS,iBAAA;EACf,IAAA;EACA,KAAA;EACA,MAAA;AAAA;AAAA,UAGe,gBAAA;EACf,KAAA;EACA,mBAAA;EACA,UAAA,GAAa,SAAA;AAAA;AAAA,cAcT,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/index.tsx"],"mappings":";;;;;UAIiB,SAAA;EACf,GAAA;EACA,KAAA;EACA,aAAA,QAAqB,SAAA;AAAA;AAAA,KAKX,QAAA;AAAA,UAEK,QAAA;EACf,EAAA;EACA,KAAA,EAAO,QAAA;EACP,OAAA;EACA,SAAA;EACA,IAAA;AAAA;AAAA,KAIU,aAAA;AAAA,UAEK,YAAA;EACf,EAAA;EACA,GAAA;EACA,MAAA;EACA,MAAA,EAAQ,aAAA;EACR,UAAA;EACA,UAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,cAAA,GAAiB,MAAA;EACjB,WAAA;EACA,eAAA,GAAkB,MAAA;EAClB,YAAA;EACA,KAAA;AAAA;AAAA,KAIU,oBAAA;AAAA,UAEK,iBAAA;EACf,IAAA;EACA,QAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,YAAA;AAAA;AAAA,UAGe,oBAAA;EACf,EAAA;EACA,SAAA,EAAW,oBAAA;EACX,IAAA;EACA,SAAA;EACA,OAAA,GAAU,iBAAA;EACV,QAAA;AAAA;AAAA,QAIM,MAAA;EAAA,IACF,aAAA;IACF,KAAA;IAAA,CACC,GAAA;EAAA;EAAA,IAGC,gBAAA;IAGE,eAAA;MACE,GAAA,MAAS,IAAA;MACT,IAAA,MAAU,IAAA;MACV,KAAA,MAAW,IAAA;MACX,IAAA,MAAU,IAAA;IAAA;IAIZ,KAAA;MACE,IAAA,GAAO,QAAA;MACP,YAAA,GAAe,GAAA,EAAK,KAAA,EAAO,QAAA;MAC3B,YAAA,IAAgB,QAAA,GAAW,KAAA,EAAO,QAAA;MAElC,QAAA,GAAW,YAAA;MACX,WAAA,GAAc,GAAA,SAAY,YAAA;MAC1B,gBAAA,GAAmB,GAAA,EAAK,KAAA,EAAO,YAAA;MAC/B,gBAAA,IACE,QAAA,GAAW,KAAA,EAAO,YAAA;MAGpB,YAAA,GAAe,oBAAA;MACf,oBAAA,GAAuB,GAAA,EAAK,KAAA,EAAO,oBAAA;MACnC,oBAAA,IACE,QAAA,GAAW,KAAA,EAAO,oBAAA;IAAA;IAItB,qBAAA;EAAA;AAAA;;;UCnFS,iBAAA;EACf,IAAA;EACA,KAAA;EACA,MAAA;AAAA;AAAA,UAGe,gBAAA;EACf,KAAA;EACA,mBAAA;EACA,UAAA,GAAa,SAAA;EACb,eAAA;IACE,GAAA;IACA,IAAA;IACA,KAAA;IACA,MAAA;EAAA;AAAA;AAAA,cAeE,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}

package/dist/index.mjs

@@ -1,7 +1,17 @@
 import "./index.css";
-import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "@lynx-js/react";
+import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useLynxGlobalEventListener, useMemo, useRef, useState } from "@lynx-js/react";
 import { stringify } from "javascript-stringify";
 
+//#region src/hooks/useKeyboardHeight.ts
+function useKeyboardHeight() {
+	const [keyboardHeight, setKeyboardHeight] = useState(0);
+	useLynxGlobalEventListener("keyboardstatuschanged", (status, height) => {
+		setKeyboardHeight(status === "on" ? height : 0);
+	});
+	return keyboardHeight;
+}
+
+//#endregion
 //#region src/styles/theme.ts
 const colorMap = {
 	light: {
@@ -114,6 +124,7 @@ function BottomSheet({ children, title, footer, onClose, isOpen, shouldClose = f
 	const [dragStartHeight, setDragStartHeight] = useState(savedHeight ?? DEFAULT_HEIGHT);
 	const [isOpening, setIsOpening] = useState(true);
 	const [isClosing, setIsClosing] = useState(false);
+	const keyboardHeight = useKeyboardHeight();
 	const handleClose = () => {
 		setIsClosing(true);
 		setTimeout(() => {
@@ -157,9 +168,9 @@ function BottomSheet({ children, title, footer, onClose, isOpen, shouldClose = f
       <view className="bs-overlay" bindtap={handleClose}>
         <view className="bs-content" catchtap={() => {}} style={{
 		background: colors.bg.layerFloating,
-		height: `${isDragging ? tempHeight : sheetHeight}px`,
+		height: `${keyboardHeight > 0 ? Math.min(MAX_HEIGHT, (isDragging ? tempHeight : sheetHeight) + keyboardHeight) : isDragging ? tempHeight : sheetHeight}px`,
 		transform: isOpening || isClosing ? "translateY(100%)" : "translateY(0)",
-		transition: isDragging ? "none" : `transform ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`
+		transition: isDragging ? "none" : `transform ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1), height ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`
 	}}>
           {}
           <view className="bs-handleContainer" bindtouchstart={handleTouchStart} bindtouchmove={handleTouchMove} bindtouchend={handleTouchEnd}>
@@ -173,7 +184,7 @@ function BottomSheet({ children, title, footer, onClose, isOpen, shouldClose = f
                 {title}
               </text>}
           </view>
-          <view className="bs-body" style={{ paddingBottom: safeAreaInsetBottom }}>
+          <view className="bs-body" style={{ paddingBottom: keyboardHeight > 0 ? `${keyboardHeight}px` : safeAreaInsetBottom }}>
             {children}
           </view>
           {footer && <view className="bs-footer">{footer}</view>}
@@ -1357,22 +1368,42 @@ const LONG_PRESS_DURATION = 400;
 const MOVE_THRESHOLD = 5;
 const DEFAULT_RIGHT = 16;
 const DEFAULT_BOTTOM = 84;
-let savedRight = DEFAULT_RIGHT;
-let savedBottom = DEFAULT_BOTTOM;
-function useLongPressDrag(onTap) {
-	const [right, setRight] = useState(savedRight);
-	const [bottom, setBottom] = useState(savedBottom);
+function resolveAnchors(initial) {
+	const vertical = initial?.top !== void 0 ? "top" : "bottom";
+	const horizontal = initial?.left !== void 0 ? "left" : "right";
+	const y = vertical === "top" ? initial?.top ?? 0 : initial?.bottom ?? DEFAULT_BOTTOM;
+	return {
+		vertical,
+		horizontal,
+		x: horizontal === "left" ? initial?.left ?? 0 : initial?.right ?? DEFAULT_RIGHT,
+		y
+	};
+}
+let saved = null;
+function useLongPressDrag(onTap, options) {
+	const anchors = resolveAnchors(options?.initialPosition);
+	const snapshot = saved;
+	let initX = anchors.x;
+	let initY = anchors.y;
+	if (snapshot !== null && snapshot.vertical === anchors.vertical && snapshot.horizontal === anchors.horizontal) {
+		initX = snapshot.x;
+		initY = snapshot.y;
+	}
+	const [x, setX] = useState(initX);
+	const [y, setY] = useState(initY);
 	const [phase, setPhase] = useState("idle");
-	const [tempRight, setTempRight] = useState(savedRight);
-	const [tempBottom, setTempBottom] = useState(savedBottom);
+	const [tempX, setTempX] = useState(initX);
+	const [tempY, setTempY] = useState(initY);
 	const timerRef = useRef(null);
 	const draggingRef = useRef(false);
 	const startRef = useRef({
 		x: 0,
 		y: 0,
-		r: 0,
-		b: 0
+		ax: 0,
+		ay: 0
 	});
+	const xSign = anchors.horizontal === "right" ? -1 : 1;
+	const ySign = anchors.vertical === "bottom" ? -1 : 1;
 	const clearTimer = () => {
 		if (timerRef.current) {
 			clearTimeout(timerRef.current);
@@ -1383,15 +1414,15 @@ function useLongPressDrag(onTap) {
 		startRef.current = {
 			x: e.detail.x,
 			y: e.detail.y,
-			r: right,
-			b: bottom
+			ax: x,
+			ay: y
 		};
 		draggingRef.current = false;
 		timerRef.current = setTimeout(() => {
 			draggingRef.current = true;
 			setPhase("dragging");
-			setTempRight(right);
-			setTempBottom(bottom);
+			setTempX(x);
+			setTempY(y);
 		}, LONG_PRESS_DURATION);
 	};
 	const handleTouchMove = (e) => {
@@ -1399,26 +1430,34 @@ function useLongPressDrag(onTap) {
 		const dy = e.detail.y - startRef.current.y;
 		if (!draggingRef.current && (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD)) clearTimer();
 		if (!draggingRef.current) return;
-		setTempRight(startRef.current.r - dx);
-		setTempBottom(startRef.current.b - dy);
+		setTempX(startRef.current.ax + xSign * dx);
+		setTempY(startRef.current.ay + ySign * dy);
 	};
 	const handleTouchEnd = () => {
 		clearTimer();
 		if (draggingRef.current) {
-			setRight(tempRight);
-			setBottom(tempBottom);
-			savedRight = tempRight;
-			savedBottom = tempBottom;
+			setX(tempX);
+			setY(tempY);
+			saved = {
+				vertical: anchors.vertical,
+				horizontal: anchors.horizontal,
+				x: tempX,
+				y: tempY
+			};
 			setPhase("releasing");
 			draggingRef.current = false;
 			setTimeout(() => setPhase("idle"), 300);
 		} else onTap();
 	};
 	const isDragging = phase === "dragging";
+	const currentX = isDragging ? tempX : x;
+	const currentY = isDragging ? tempY : y;
 	return {
 		phase,
-		right: isDragging ? tempRight : right,
-		bottom: isDragging ? tempBottom : bottom,
+		positionStyle: {
+			[anchors.horizontal]: `${currentX}px`,
+			[anchors.vertical]: `${currentY}px`
+		},
 		clearTimer,
 		handlers: {
 			catchtouchstart: handleTouchStart,
@@ -1446,9 +1485,9 @@ const SHINE_STYLES = {
 		transition: "opacity 300ms cubic-bezier(0.4, 0, 0.2, 1)"
 	}
 };
-const FloatingButton = ({ bindtap, children }) => {
+const FloatingButton = ({ bindtap, children, initialPosition }) => {
 	const colors = useThemeColors();
-	const { phase, right, bottom, clearTimer, handlers } = useLongPressDrag(bindtap);
+	const { phase, positionStyle, clearTimer, handlers } = useLongPressDrag(bindtap, { initialPosition });
 	const handleReload = () => {
 		try {
 			lynx.reload({}, () => {
@@ -1460,8 +1499,7 @@ const FloatingButton = ({ bindtap, children }) => {
 	};
 	const isDragging = phase === "dragging";
 	return <view className={"fb-wrapper"} consume-slide-event={[[-180, 180]]} style={{
-		right: `${right}px`,
-		bottom: `${bottom}px`,
+		...positionStyle,
 		transform: isDragging ? "scale(1.05)" : "scale(1)",
 		transition: `transform ${duration.d4} cubic-bezier(0.4, 0, 0.2, 1)`
 	}} {...handlers}>
@@ -1479,7 +1517,7 @@ const FloatingButton = ({ bindtap, children }) => {
 
 //#endregion
 //#region src/index.tsx
-const LynxConsole = forwardRef(({ theme = "light", safeAreaInsetBottom = "50px", customTabs }, ref) => {
+const LynxConsole = forwardRef(({ theme = "light", safeAreaInsetBottom = "50px", customTabs, initialPosition }, ref) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [shouldClose, setShouldClose] = useState(false);
 	const { performances } = usePerformance();
@@ -1517,7 +1555,7 @@ const LynxConsole = forwardRef(({ theme = "light", safeAreaInsetBottom = "50px",
 		backgroundColor: colors.bg.layerDefault,
 		color: colors.fg.neutral
 	}}>
-          <FloatingButton bindtap={handleOpenBottomSheet}>
+          <FloatingButton bindtap={handleOpenBottomSheet} initialPosition={initialPosition}>
             <text className="fb-title t4" style={{
 		fontWeight: "400",
 		color: colors.palette.staticWhite