lynx-console 0.5.0 → 0.6.1

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

@@ -222,6 +222,35 @@ const useConsole = () => {
 	};
 };
 
+//#endregion
+//#region src/hooks/useLatestFcp.ts
+const pickFcp = (entry) => {
+	if (entry.entryType !== "metric" || entry.name !== "fcp") return void 0;
+	const raw = entry.rawEntry;
+	if (raw?.totalFcp?.duration !== void 0) return raw.totalFcp;
+	if (raw?.lynxFcp?.duration !== void 0) return raw.lynxFcp;
+};
+const useLatestFcp = () => {
+	const [fcp, setFcp] = (0, _lynx_js_react.useState)(() => {
+		const performances = globalThis.__LYNX_CONSOLE__?.state?.performances ?? [];
+		for (let i = performances.length - 1; i >= 0; i--) {
+			const entry = performances[i];
+			if (!entry) continue;
+			const found = pickFcp(entry);
+			if (found) return found;
+		}
+	});
+	(0, _lynx_js_react.useEffect)(() => {
+		const state = globalThis.__LYNX_CONSOLE__?.state;
+		if (!state?.subscribePerformance) return;
+		return state.subscribePerformance((entry) => {
+			const found = pickFcp(entry);
+			if (found) setFcp(found);
+		});
+	}, []);
+	return fcp;
+};
+
 //#endregion
 //#region src/hooks/useNetwork.ts
 const useNetwork = () => {
@@ -484,7 +513,8 @@ const LogPanel = ({ logs, clearLogs }) => {
 			params: {
 				position: logsRef.current.length - 1,
 				smooth
-			}
+			},
+			fail: () => {}
 		}).exec();
 	};
 	(0, _lynx_js_react.useEffect)(() => {
@@ -1368,22 +1398,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);
@@ -1394,15 +1444,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) => {
@@ -1410,26 +1460,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,
@@ -1457,9 +1515,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({}, () => {
@@ -1470,9 +1528,8 @@ 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`,
+	return <view className={"fb-wrapper"} style={{
+		...positionStyle,
 		transform: isDragging ? "scale(1.05)" : "scale(1)",
 		transition: `transform ${duration.d4} cubic-bezier(0.4, 0, 0.2, 1)`
 	}} {...handlers}>
@@ -1490,21 +1547,11 @@ 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();
+	const latestFcp = useLatestFcp();
 	const colors = (0, _lynx_js_react.useMemo)(() => getColors(theme), [theme]);
-	const latestFcp = (0, _lynx_js_react.useMemo)(() => {
-		for (let i = performances.length - 1; i >= 0; i--) {
-			const perf = performances[i];
-			if (perf && perf.entryType === "metric" && perf.name === "fcp") {
-				const metricEntry = perf.rawEntry;
-				if (metricEntry?.totalFcp?.duration !== void 0) return metricEntry.totalFcp;
-				if (metricEntry?.lynxFcp?.duration !== void 0) return metricEntry.lynxFcp;
-			}
-		}
-	}, [performances]);
 	(0, _lynx_js_react.useImperativeHandle)(ref, () => ({
 		open: () => {
 			setIsOpen(true);
@@ -1528,7 +1575,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,cAIE,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,cAIE,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}

package/dist/index.mjs

@@ -222,6 +222,35 @@ const useConsole = () => {
 	};
 };
 
+//#endregion
+//#region src/hooks/useLatestFcp.ts
+const pickFcp = (entry) => {
+	if (entry.entryType !== "metric" || entry.name !== "fcp") return void 0;
+	const raw = entry.rawEntry;
+	if (raw?.totalFcp?.duration !== void 0) return raw.totalFcp;
+	if (raw?.lynxFcp?.duration !== void 0) return raw.lynxFcp;
+};
+const useLatestFcp = () => {
+	const [fcp, setFcp] = useState(() => {
+		const performances = globalThis.__LYNX_CONSOLE__?.state?.performances ?? [];
+		for (let i = performances.length - 1; i >= 0; i--) {
+			const entry = performances[i];
+			if (!entry) continue;
+			const found = pickFcp(entry);
+			if (found) return found;
+		}
+	});
+	useEffect(() => {
+		const state = globalThis.__LYNX_CONSOLE__?.state;
+		if (!state?.subscribePerformance) return;
+		return state.subscribePerformance((entry) => {
+			const found = pickFcp(entry);
+			if (found) setFcp(found);
+		});
+	}, []);
+	return fcp;
+};
+
 //#endregion
 //#region src/hooks/useNetwork.ts
 const useNetwork = () => {
@@ -484,7 +513,8 @@ const LogPanel = ({ logs, clearLogs }) => {
 			params: {
 				position: logsRef.current.length - 1,
 				smooth
-			}
+			},
+			fail: () => {}
 		}).exec();
 	};
 	useEffect(() => {
@@ -1368,22 +1398,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);
@@ -1394,15 +1444,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) => {
@@ -1410,26 +1460,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,
@@ -1457,9 +1515,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({}, () => {
@@ -1470,9 +1528,8 @@ 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`,
+	return <view className={"fb-wrapper"} style={{
+		...positionStyle,
 		transform: isDragging ? "scale(1.05)" : "scale(1)",
 		transition: `transform ${duration.d4} cubic-bezier(0.4, 0, 0.2, 1)`
 	}} {...handlers}>
@@ -1490,21 +1547,11 @@ 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();
+	const latestFcp = useLatestFcp();
 	const colors = useMemo(() => getColors(theme), [theme]);
-	const latestFcp = useMemo(() => {
-		for (let i = performances.length - 1; i >= 0; i--) {
-			const perf = performances[i];
-			if (perf && perf.entryType === "metric" && perf.name === "fcp") {
-				const metricEntry = perf.rawEntry;
-				if (metricEntry?.totalFcp?.duration !== void 0) return metricEntry.totalFcp;
-				if (metricEntry?.lynxFcp?.duration !== void 0) return metricEntry.lynxFcp;
-			}
-		}
-	}, [performances]);
 	useImperativeHandle(ref, () => ({
 		open: () => {
 			setIsOpen(true);
@@ -1528,7 +1575,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