@griddo/ax 11.12.1-rc.0 → 11.12.1-rc.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.12.1-rc.0",
+  "version": "11.12.1-rc.10",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "658c8d4628746910799f072fb0ab2603398804a0"
+  "gitHead": "eb32fff3cb2388110e448459eca5a251580ffc77"
 }

package/src/__tests__/components/Browser/Browser.test.tsx

@@ -70,7 +70,7 @@ describe("Browser component rendering", () => {
 
 		renderBrowser(defaultProps);
 
-		expect(screen.getByTestId("nav-actions-wrapper")).toBeInTheDocument();
+		expect(screen.queryByTestId("nav-actions-wrapper")).not.toBeInTheDocument();
 		expect(screen.queryByTestId("navbar-iframe-wrapper")).not.toBeInTheDocument();
 		expect(screen.getByTestId("browser-content-wrapper")).toBeInTheDocument();
 	});

package/src/__tests__/components/Fields/IntegrationsField/IntegrationsField.test.tsx

@@ -312,7 +312,7 @@ describe("Events", () => {
 		fireEvent.click(actionMenu[1]);
 
 		const buttonsDefault = screen.getAllByTestId("button-default");
-		fireEvent.click(buttonsDefault[4]);
+		fireEvent.click(buttonsDefault[buttonsDefault.length - 1]);
 
 		const integrationsWithDeletion = initialStore.integrations.integrations.slice(0, 3);
 

package/src/__tests__/components/Fields/UrlField/UrlField.test.tsx

@@ -290,6 +290,12 @@ describe("UrlField component rendering", () => {
 			render(Component, { store });
 		});
 
+		// Open FloatingPanel first
+		const pageField = screen.getByTestId("page-field");
+		await act(async () => {
+			fireEvent.click(pageField);
+		});
+
 		const selectComponents = screen.getAllByTestId("select-component");
 
 		await act(async () => {
@@ -384,6 +390,12 @@ describe("onClick events", () => {
 			render(Component, { store });
 		});
 
+		// Open FloatingPanel first
+		const pageField = screen.getByTestId("page-field");
+		await act(async () => {
+			fireEvent.click(pageField);
+		});
+
 		await act(async () => {
 			const selectionListItem = screen.getAllByTestId("selection-list-item");
 			selectionListItem[0].click();
@@ -430,10 +442,16 @@ describe("onClick events", () => {
 			render(Component, { store });
 		});
 
-		const selectionListItem = screen.getAllByTestId("selection-list-item");
 		const checkFieldInputs = screen.getAllByTestId("check-field-input");
 		const pageField = screen.getByTestId("page-field");
 
+		// Open FloatingPanel first
+		await act(async () => {
+			fireEvent.click(pageField);
+		});
+
+		const selectionListItem = screen.getAllByTestId("selection-list-item");
+
 		await act(async () => {
 			selectionListItem[0].click();
 			fireEvent.click(checkFieldInputs[0]);

package/src/__tests__/components/HeadingsPreviewModal/ErrorsBanner/ErrorItem/ErrorItem.test.tsx

@@ -20,6 +20,7 @@ const mockError: IHeadingError = {
 const defaultProps = {
 	error: mockError,
 	onSelectHeading: jest.fn(() => jest.fn()),
+	onDelete: jest.fn(),
 };
 
 const renderComponent = (props = defaultProps) =>

package/src/__tests__/hooks/modals.test.tsx

@@ -0,0 +1,303 @@
+import { act, renderHook } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { useModal, useModals } from "@ax/hooks";
+
+describe("useModal hook", () => {
+	beforeEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	afterEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	it("should initialize with false when no initialState provided", () => {
+		const { result } = renderHook(() => useModal());
+		expect(result.current.isOpen).toBe(false);
+	});
+
+	it("should initialize with provided initialState", () => {
+		const { result } = renderHook(() => useModal(true));
+		expect(result.current.isOpen).toBe(true);
+	});
+
+	it("should toggle modal state when toggleModal is called", () => {
+		const { result } = renderHook(() => useModal(false));
+		expect(result.current.isOpen).toBe(false);
+
+		act(() => {
+			result.current.toggleModal();
+		});
+
+		expect(result.current.isOpen).toBe(true);
+
+		act(() => {
+			result.current.toggleModal();
+		});
+
+		expect(result.current.isOpen).toBe(false);
+	});
+
+	it("should add modal-open class to body when modal opens and bodyBlock is true", () => {
+		const { result } = renderHook(() => useModal(false, true));
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+
+		act(() => {
+			result.current.toggleModal();
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+	});
+
+	it("should not add modal-open class to body when bodyBlock is false", () => {
+		const { result } = renderHook(() => useModal(false, false));
+
+		act(() => {
+			result.current.toggleModal();
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+	});
+
+	it("should check if modal-open class already exists before adding", () => {
+		document.body.classList.add("modal-open");
+
+		const { result } = renderHook(() => useModal(false, true));
+
+		act(() => {
+			result.current.toggleModal();
+		});
+
+		// Class should still be present
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+
+		// Count of modal-open should be 1
+		const classList = [...document.body.classList];
+		const count = classList.filter((c) => c === "modal-open").length;
+		expect(count).toBe(1);
+	});
+});
+
+describe("useModals hook", () => {
+	beforeEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	afterEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	it("should initialize all modals as closed", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2", "modal3"]));
+
+		expect(result.current.isOpen("modal1")).toBe(false);
+		expect(result.current.isOpen("modal2")).toBe(false);
+		expect(result.current.isOpen("modal3")).toBe(false);
+	});
+
+	it("should open a modal with openModal", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2"]));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+		expect(result.current.isOpen("modal2")).toBe(false);
+	});
+
+	it("should close a modal with closeModal", () => {
+		const { result } = renderHook(() => useModals(["modal1"]));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+
+		act(() => {
+			result.current.closeModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(false);
+	});
+
+	it("should toggle a modal with toggleModal", () => {
+		const { result } = renderHook(() => useModals(["modal1"]));
+
+		expect(result.current.isOpen("modal1")).toBe(false);
+
+		act(() => {
+			result.current.toggleModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+
+		act(() => {
+			result.current.toggleModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(false);
+	});
+
+	it("should handle multiple modals independently", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2", "modal3"]));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+		expect(result.current.isOpen("modal2")).toBe(false);
+		expect(result.current.isOpen("modal3")).toBe(false);
+
+		act(() => {
+			result.current.openModal("modal2");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+		expect(result.current.isOpen("modal2")).toBe(true);
+		expect(result.current.isOpen("modal3")).toBe(false);
+	});
+
+	it("should add modal-open class when a modal is opened", () => {
+		const { result } = renderHook(() => useModals(["modal1"], true));
+
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+	});
+
+	it("should remove modal-open class when all modals are closed", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2"], true));
+
+		act(() => {
+			result.current.openModal("modal1");
+			result.current.openModal("modal2");
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+
+		act(() => {
+			result.current.closeModal("modal1");
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+
+		act(() => {
+			result.current.closeModal("modal2");
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+	});
+
+	it("should close multiple modals individually", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2", "modal3"]));
+
+		act(() => {
+			result.current.openModal("modal1");
+			result.current.openModal("modal2");
+			result.current.openModal("modal3");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(true);
+		expect(result.current.isOpen("modal2")).toBe(true);
+		expect(result.current.isOpen("modal3")).toBe(true);
+
+		act(() => {
+			result.current.closeModal("modal1");
+			result.current.closeModal("modal2");
+			result.current.closeModal("modal3");
+		});
+
+		expect(result.current.isOpen("modal1")).toBe(false);
+		expect(result.current.isOpen("modal2")).toBe(false);
+		expect(result.current.isOpen("modal3")).toBe(false);
+	});
+
+	it("should not add modal-open class if bodyBlock is false", () => {
+		const { result } = renderHook(() => useModals(["modal1"], false));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+	});
+
+	it("should not duplicate modal-open class when multiple modals are open", () => {
+		const { result } = renderHook(() => useModals(["modal1", "modal2"], true));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		const classList1 = [...document.body.classList];
+		const count1 = classList1.filter((c) => c === "modal-open").length;
+
+		act(() => {
+			result.current.openModal("modal2");
+		});
+
+		const classList2 = [...document.body.classList];
+		const count2 = classList2.filter((c) => c === "modal-open").length;
+
+		expect(count1).toBe(1);
+		expect(count2).toBe(1);
+	});
+
+	it("should handle isOpen callback correctly", () => {
+		const { result } = renderHook(() => useModals(["modal1"]));
+
+		act(() => {
+			result.current.openModal("modal1");
+		});
+
+		const isOpenResult = result.current.isOpen("modal1");
+		expect(isOpenResult).toBe(true);
+	});
+});
+
+describe("useModal and useModals working together", () => {
+	beforeEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	afterEach(() => {
+		document.body.classList.remove("modal-open");
+	});
+
+	it("should verify both hooks add modal-open class independently", () => {
+		const { result: modalResult } = renderHook(() => useModal(false, true));
+		const { result: modalsResult } = renderHook(() => useModals(["modal1"], true));
+
+		// useModal should add class
+		act(() => {
+			modalResult.current.toggleModal();
+		});
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+
+		// useModals should keep class
+		act(() => {
+			modalsResult.current.openModal("modal1");
+		});
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+
+		// Closing useModal should keep class (useModals still open)
+		act(() => {
+			modalResult.current.toggleModal();
+		});
+		// Note: This depends on DOM check in useModal
+
+		// Closing useModals should remove class
+		act(() => {
+			modalsResult.current.closeModal("modal1");
+		});
+		expect(document.body.classList.contains("modal-open")).toBe(false);
+	});
+});

package/src/components/Browser/index.tsx

@@ -63,6 +63,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 	const isFormEditor = editorType === "form";
 	const isHeadingsEditor = editorType === "headings";
 	const isKeywordsEditor = editorType === "keywords";
+	const isZoomEditor = isPageEditor || isHeadingsEditor || isKeywordsEditor;
 
 	const frameWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -82,6 +83,8 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		localStorage.setItem("selectedID", "0");
 		(window as any).browserRef = null;
 
+		if (!isZoomEditor) return;
+
 		const el = frameWrapperRef.current;
 		if (!el) return;
 
@@ -99,7 +102,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		observer.observe(el);
 
 		return () => observer.disconnect();
-	}, []);
+	}, [isZoomEditor]);
 
 	// Fetch share data when in preview mode
 	useEffect(() => {
@@ -188,7 +191,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		}
 	};
 
-	const scaledWidth = !isPreview
+	const scaledWidth = isZoomEditor
 		? Math.floor(parseInt(dimensions.resolution) * (parseInt(dimensions.zoom) / 100))
 		: undefined;
 
@@ -201,8 +204,13 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 
 	return (
 		<S.OuterContainer ref={frameWrapperRef}>
-			<S.BrowserWrapper data-testid="browser-wrapper" ref={browserRef} scaledWidth={scaledWidth} isPreview={isPreview}>
-				{(isPageEditor || isHeadingsEditor || isKeywordsEditor) && (
+			<S.BrowserWrapper
+				data-testid="browser-wrapper"
+				ref={browserRef}
+				scaledWidth={scaledWidth}
+				isPreview={!isZoomEditor}
+			>
+				{isZoomEditor && (
 					<S.NavBar>
 						<S.NavUrl>{url}</S.NavUrl>
 						{isPreview ? (
@@ -247,30 +255,34 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 								</S.IconWrapper>
 							</S.NavActions>
 						) : (
-							<S.NavActions data-testid="nav-actions-wrapper">
-								<S.ResolutionWrapper>
-									<S.SelectLabel>Screen</S.SelectLabel>
-									<Select
-										name="resolution"
-										options={resolutionOptions}
-										value={dimensions.resolution}
-										onChange={handleResolutionChange}
-										type="round"
-										offSet="30%"
-										mandatory
-									/>
-								</S.ResolutionWrapper>
-								<S.ZoomWrapper>
-									<Select
-										name="zoom"
-										options={zoomOptionsWithDisabled}
-										value={dimensions.zoom}
-										onChange={handleZoomChange}
-										type="round"
-										mandatory
-									/>
-								</S.ZoomWrapper>
-							</S.NavActions>
+							<>
+								{showIframe && (
+									<S.NavActions data-testid="nav-actions-wrapper">
+										<S.ResolutionWrapper>
+											<S.SelectLabel>Screen</S.SelectLabel>
+											<Select
+												name="resolution"
+												options={resolutionOptions}
+												value={dimensions.resolution}
+												onChange={handleResolutionChange}
+												type="round"
+												offSet="30%"
+												mandatory
+											/>
+										</S.ResolutionWrapper>
+										<S.ZoomWrapper>
+											<Select
+												name="zoom"
+												options={zoomOptionsWithDisabled}
+												value={dimensions.zoom}
+												onChange={handleZoomChange}
+												type="round"
+												mandatory
+											/>
+										</S.ZoomWrapper>
+									</S.NavActions>
+								)}
+							</>
 						)}
 					</S.NavBar>
 				)}
@@ -284,11 +296,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 								$compact={isCompact}
 							/>
 						)}
-						<S.FrameWrapper
-							hasBorder={isPageEditor || isHeadingsEditor || isKeywordsEditor}
-							isFormEditor={isFormEditor}
-							data-testid="navbar-iframe-wrapper"
-						>
+						<S.FrameWrapper hasBorder={isZoomEditor} isFormEditor={isFormEditor} data-testid="navbar-iframe-wrapper">
 							{isPreview ? (
 								<iframe
 									title="Preview"
@@ -301,23 +309,23 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 							) : (
 								<div
 									style={{
-										width: `${scaledWidth}px`,
+										width: scaledWidth !== undefined ? `${scaledWidth}px` : "100%",
 										height: "100%",
 										overflow: "hidden",
-										flexShrink: 0,
+										flexShrink: isZoomEditor ? 0 : "unset",
 									}}
 								>
 									<iframe
 										title="Preview"
-										width={dimensions.resolution}
+										width={isZoomEditor ? dimensions.resolution : "100%"}
 										src={urlPreview}
 										loading="lazy"
 										className="frame-content"
 										style={{
 											display: "block",
-											transform: `scale(${parseInt(dimensions.zoom) / 100})`,
+											transform: isZoomEditor ? `scale(${parseInt(dimensions.zoom) / 100})` : "scale(1)",
 											transformOrigin: "0 0",
-											height: `${Math.round(100 / (parseInt(dimensions.zoom) / 100))}%`,
+											height: isZoomEditor ? `${Math.round(100 / (parseInt(dimensions.zoom) / 100))}%` : "100%",
 										}}
 									/>
 								</div>

package/src/components/Browser/style.tsx

@@ -70,7 +70,7 @@ const FrameWrapper = styled.div<{ hasBorder: boolean; isFormEditor: boolean }>`
   justify-content: center;
   flex: 1;
   min-height: 0;
-  padding: ${(p) => (p.isFormEditor ? p.theme.spacing.m : "0")};
+  padding: ${(p) => (p.isFormEditor ? `${p.theme.spacing.m} 0 0 ${p.theme.spacing.m}` : "0")};
 `;
 
 const OuterContainer = styled.div`

package/src/components/FloatingPanel/index.tsx

@@ -1,8 +1,8 @@
 import { memo, useRef } from "react";
 import { createPortal } from "react-dom";
 
-import { useHandleClickOutside } from "@ax/hooks";
 import { IconAction } from "@ax/components";
+import { useHandleClickOutside } from "@ax/hooks";
 
 import * as S from "./style";
 
@@ -43,6 +43,7 @@ const FloatingPanel = (props: IFloatingPanelProps): JSX.Element | null => {
 	return createPortal(
 		<S.Wrapper
 			data-testid="floating-panel"
+			data-is-open={isOpen}
 			ref={node}
 			isOpen={isOpen}
 			isOpenedSecond={isOpenedSecond}

package/src/components/HeadingsPreviewModal/ErrorsBanner/ErrorItem/index.tsx

@@ -7,7 +7,7 @@ import type { IHeadingError } from "../../utils";
 import * as S from "./style";
 
 const ErrorsItem = (props: IErrorsItemProps) => {
-	const { error, onSelectHeading } = props;
+	const { error, onSelectHeading, onDelete } = props;
 	const { message, description, headingIds } = error;
 
 	const [isOpen, setIsOpen] = useState(false);
@@ -54,7 +54,12 @@ const ErrorsItem = (props: IErrorsItemProps) => {
 								<Icon name={isOpen ? "UpArrow" : "DownArrow"} size="16" />
 							</S.IconWrapper>
 						)}
-						<S.IconWrapper onClick={() => setIsDeleted(true)}>
+						<S.IconWrapper
+							onClick={() => {
+								setIsDeleted(true);
+								onDelete();
+							}}
+						>
 							<Icon name="close" size="16" />
 						</S.IconWrapper>
 					</S.ErrorActions>
@@ -80,6 +85,7 @@ const ErrorsItem = (props: IErrorsItemProps) => {
 interface IErrorsItemProps {
 	error: IHeadingError;
 	onSelectHeading: (id: number) => () => void;
+	onDelete: () => void;
 }
 
 export default ErrorsItem;

package/src/components/HeadingsPreviewModal/ErrorsBanner/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { Icon } from "@ax/components";
 
@@ -11,8 +11,18 @@ const ErrorsBanner = (props: IErrorsBannerProps) => {
 	const { errors, onSelectHeading, isOpen, setIsOpen, resetKey } = props;
 
 	const [isDeleted, setIsDeleted] = useState(false);
+	const [deletedErrorIndices, setDeletedErrorIndices] = useState<Set<number>>(new Set());
 
-	if (isDeleted) {
+	const allErrorsDeleted = useMemo(
+		() => deletedErrorIndices.size === errors.length && errors.length > 0,
+		[deletedErrorIndices.size, errors.length],
+	);
+
+	const handleErrorDelete = (index: number) => {
+		setDeletedErrorIndices((prev) => new Set([...prev, index]));
+	};
+
+	if (isDeleted || allErrorsDeleted) {
 		return <></>;
 	}
 
@@ -37,8 +47,13 @@ const ErrorsBanner = (props: IErrorsBannerProps) => {
 					Review <strong>suggestions and warnings</strong> to enhance your page's search engine optimization.
 				</S.Description>
 				<S.ErrorListWrapper>
-					{errors.map((error) => (
-						<ErrorItem key={`${error.message}-${resetKey}`} error={error} onSelectHeading={onSelectHeading} />
+					{errors.map((error, index) => (
+						<ErrorItem
+							key={`${error.message}-${resetKey}`}
+							error={error}
+							onSelectHeading={onSelectHeading}
+							onDelete={() => handleErrorDelete(index)}
+						/>
 					))}
 				</S.ErrorListWrapper>
 			</S.ErrorsContent>

package/src/components/HeadingsPreviewModal/index.tsx

@@ -35,6 +35,7 @@ const HeadingsPreviewModal = (props: IHeadingsPreviewProps) => {
 			setHeadings(headings);
 		} else {
 			setHeadingsFilter("all");
+			window.scrollTo(0, 0);
 		}
 	}, [isOpen, getSEOHeadings, setHeadingsFilter]);
 

package/src/components/HeadingsPreviewModal/utils.tsx

@@ -67,12 +67,16 @@ const analyzeHeadings = (headings: HeadingNode[], isFiltering = false): IHeading
 
 	// 2. Check for incorrect nesting (skipped levels)
 	const nestingErrorIds: number[] = [];
+	let lastValidLevel = flatHeadings[0].level;
 	for (let i = 1; i < flatHeadings.length; i++) {
-		const prevLevel = flatHeadings[i - 1].level;
 		const currLevel = flatHeadings[i].level;
 
-		if (currLevel > prevLevel && currLevel - prevLevel > 1) {
+		if (currLevel > lastValidLevel + 1) {
+			// Heading skips levels - mark as error
 			nestingErrorIds.push(flatHeadings[i].id);
+		} else {
+			// Correct nesting - update last valid level
+			lastValidLevel = currLevel;
 		}
 	}
 	if (nestingErrorIds.length > 0) {
@@ -163,8 +167,8 @@ const parseHeadingsTree = (html: HTMLDivElement): HeadingNode[] => {
 
 		const style = iframeWindow.getComputedStyle(el);
 
-		// 1. Check CSS properties directly on element
-		if (style.display === "none" || style.visibility === "hidden" || parseFloat(style.opacity) === 0) {
+		// 1. Check CSS properties directly on element (only definite cases)
+		if (style.display === "none" || style.visibility === "hidden") {
 			return true;
 		}
 
@@ -175,33 +179,10 @@ const parseHeadingsTree = (html: HTMLDivElement): HeadingNode[] => {
 
 		// 3. Check dimensions (width or height is 0)
 		const rect = el.getBoundingClientRect();
-		if (rect.width === 0 || rect.height === 0) {
+		if (rect.width === 0 && rect.height === 0) {
 			return true;
 		}
 
-		// 4. Check if completely out of viewport
-		const frameRect = frameObject?.getBoundingClientRect();
-		if (frameRect) {
-			if (
-				rect.bottom < frameRect.top ||
-				rect.top > frameRect.bottom ||
-				rect.right < frameRect.left ||
-				rect.left > frameRect.right
-			) {
-				return true;
-			}
-		}
-
-		// 5. Check if element is covered by another element (elementFromPoint)
-		const centerX = rect.left + rect.width / 2;
-		const centerY = rect.top + rect.height / 2;
-		if (frameObject && centerX >= 0 && centerY >= 0 && centerX <= window.innerWidth && centerY <= window.innerHeight) {
-			const topElement = document.elementFromPoint(centerX, centerY);
-			if (topElement && topElement !== el && !el.contains(topElement)) {
-				return true;
-			}
-		}
-
 		return false;
 	};
 
@@ -230,17 +211,14 @@ const parseHeadingsTree = (html: HTMLDivElement): HeadingNode[] => {
 					}
 				}
 
-				// Check if ancestor is in collapsed navigation
+				// Check if ancestor is in collapsed navigation (only when explicitly collapsed)
 				const navSelector = "nav, header, [role='navigation'], .nav, .menu, .navbar, .sidebar";
 				if (node.matches(navSelector)) {
-					const ancestorRect = node.getBoundingClientRect();
 					const nodeHeight = parseFloat(style.height);
 					const nodeMaxHeight = parseFloat(style.maxHeight);
 
-					if (
-						(nodeHeight === 0 || nodeMaxHeight === 0 || style.overflow === "hidden") &&
-						(ancestorRect.height === 0 || ancestorRect.height < 10)
-					) {
+					// Only mark as hidden if height is explicitly 0
+					if ((nodeHeight === 0 || nodeMaxHeight === 0) && style.overflow === "hidden") {
 						return true;
 					}
 				}

package/src/components/KeywordsPreviewModal/index.tsx

@@ -39,11 +39,22 @@ const KeywordsPreviewModal = (props: IKeywordsPreviewProps) => {
 	const handleDeleteKeyword = (value: string) => {
 		setDeletedKeyword(value);
 		deleteKeyword(value);
+		setKeywordsFilter([]);
+	};
+
+	const handleCloseModal = () => {
+		setKeywordsFilter([]);
+		toggleModal();
+	};
+
+	const handleAddKeywords = (value: string[]) => {
+		setKeywordsFilter([]);
+		addKeywords(value);
 	};
 
 	return (
 		<S.Wrapper>
-			<FloatingPanel title="Keywords" toggleModal={toggleModal} closeOnOutsideClick={false} isOpen={isOpen} width={358}>
+			<FloatingPanel title="Keywords" toggleModal={handleCloseModal} closeOnOutsideClick={false} isOpen={isOpen} width={358}>
 				{isOpen && (
 					<S.KeywordsWrapper>
 						{keywordsFilter.length > 0 && (
@@ -79,7 +90,7 @@ const KeywordsPreviewModal = (props: IKeywordsPreviewProps) => {
 					</S.KeywordsWrapper>
 				)}
 			</FloatingPanel>
-			<AddKeywordsModal isOpen={isAddOpen} toggleModal={toggleAddModal} addNewKeyword={addKeywords} />
+			<AddKeywordsModal isOpen={isAddOpen} toggleModal={toggleAddModal} addNewKeyword={handleAddKeywords} />
 			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
 		</S.Wrapper>
 	);

package/src/components/Modal/index.tsx

@@ -81,6 +81,7 @@ const Modal = (props: IModalProps): JSX.Element | null => {
 					<S.ModalOverlay isChild={isChild} />
 					<S.ModalWrapper
 						data-testid="modal-wrapper"
+						data-is-open={isOpen}
 						isChild={isChild}
 						role="dialog"
 						aria-modal="true"

package/src/components/ResizePanel/index.tsx

@@ -11,18 +11,27 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 
 	const [rwidth, setRwidth] = useState(MIN_WIDTH);
 	const rightPanelRef = useRef<HTMLDivElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
 
 	const calculateFixedPanelMinWidth = (currentWidth: number) => {
-		const minWidth = 1280 - currentWidth - 32;
-		return minWidth < 500 ? "500px" : `${minWidth}px`;
+		const containerWidth = containerRef.current?.offsetWidth ?? 1280;
+		const minWidth = Math.max(500, containerWidth - currentWidth - 32);
+		return `${minWidth}px`;
 	};
 
 	useEffect(() => {
-		requestAnimationFrame(() => {
-			if (rightPanelRef.current) {
-				setRwidth(rightPanelRef.current.offsetWidth);
-			}
-		});
+		const updateWidth = () => {
+			requestAnimationFrame(() => {
+				if (rightPanelRef.current) {
+					setRwidth(rightPanelRef.current.offsetWidth);
+				}
+			});
+		};
+
+		updateWidth();
+
+		window.addEventListener("resize", updateWidth);
+		return () => window.removeEventListener("resize", updateWidth);
 	}, []);
 
 	const resize = (value: number) => {
@@ -30,7 +39,7 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 	};
 
 	return (
-		<>
+		<div ref={containerRef} style={{ display: "flex", width: "100%", height: "100%" }}>
 			<S.LeftPanel data-testid="left-panel">
 				{fixed ? (
 					<S.FixedPanel
@@ -48,7 +57,7 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 			<S.RightPanel ref={rightPanelRef} data-testid="right-panel" style={{ width: rwidth ? `${rwidth}px` : "auto" }}>
 				{rightPanel}
 			</S.RightPanel>
-		</>
+		</div>
 	);
 };
 

package/src/components/ResizePanel/style.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 const LeftPanel = styled.section`
   position: relative;
   flex-grow: 1;
-  min-width: 500px;
+  min-width: 620px;
 `;
 
 const RightPanel = styled.section`
@@ -12,7 +12,7 @@ const RightPanel = styled.section`
   padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
   flex-shrink: 0;
   min-width: 368px;
-  max-width: ${(p) => `calc(100% - 500px - ${p.theme.spacing.m})`};
+  max-width: ${(p) => `calc(100% - 620px - ${p.theme.spacing.m})`};
   flex-direction: column;
 `;
 

package/src/hooks/modals.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 const useModal = (initialState?: boolean, bodyBlock = true) => {
 	const [isOpen, setIsOpen] = useState(initialState || false);
@@ -11,17 +11,10 @@ const useModal = (initialState?: boolean, bodyBlock = true) => {
 			if (!document.body.classList.contains("modal-open")) {
 				document.body.classList.add("modal-open");
 			}
-			return () => {
-				// Solo eliminar si no hay otros modales abiertos
-				const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
-				if (modals.length <= 1) {
-					document.body.classList.remove("modal-open");
-				}
-			};
-		} else if (!bodyBlock || !isOpen) {
-			// Solo eliminar si no hay modales abiertos
-			const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
-			if (modals.length === 0) {
+		} else if (!isOpen && bodyBlock) {
+			// Solo remover si no hay otros modales o FloatingPanels abiertos
+			const hasOpenModals = document.querySelectorAll('[data-is-open="true"]').length > 0;
+			if (!hasOpenModals) {
 				document.body.classList.remove("modal-open");
 			}
 		}
@@ -70,18 +63,12 @@ const useModals = <T extends string>(modalKeys: readonly T[], bodyBlock = true)
 			if (!document.body.classList.contains("modal-open")) {
 				document.body.classList.add("modal-open");
 			}
-			return () => {
-				// Solo eliminar si no hay otros modales abiertos
-				const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
-				if (modals.length <= 1) {
-					document.body.classList.remove("modal-open");
-				}
-			};
-		}
-		// Solo eliminar si no hay modales abiertos
-		const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
-		if (modals.length === 0) {
-			document.body.classList.remove("modal-open");
+		} else if (!hasOpenModals) {
+			// Solo remover si no hay otros modales o FloatingPanels abiertos
+			const hasAnyOpenModals = document.querySelectorAll('[data-is-open="true"]').length > 0;
+			if (!hasAnyOpenModals) {
+				document.body.classList.remove("modal-open");
+			}
 		}
 	}, [openModals, bodyBlock]);
 

package/src/modules/FramePreview/HeadingsOverlay/index.tsx

@@ -23,6 +23,18 @@ const isEffectivelyVisible = (el: HTMLElement): boolean => {
 	return true;
 };
 
+const isInStickyOrFixed = (el: HTMLElement): boolean => {
+	let parent: HTMLElement | null = el.parentElement;
+	while (parent && parent !== document.body) {
+		const style = window.getComputedStyle(parent);
+		if (style.position === "sticky" || style.position === "fixed") {
+			return true;
+		}
+		parent = parent.parentElement;
+	}
+	return false;
+};
+
 const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 	const [boxes, setBoxes] = useState<HeadingBox[]>([]);
 	const rafRef = useRef<number>(0);
@@ -33,14 +45,18 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 			rafRef.current = requestAnimationFrame(() => {
 				const selector = headingFilter || "h1, h2, h3, h4, h5, h6";
 				const headings = Array.from(document.querySelectorAll<HTMLElement>(selector));
-				const scrollX = window.scrollX;
-				const scrollY = window.scrollY;
 				const boxes: HeadingBox[] = [];
 				for (let i = 0; i < headings.length; i++) {
 					const el = headings[i];
 					const rect = el.getBoundingClientRect();
 					if (rect.width === 0 && rect.height === 0) continue;
 					if (!isEffectivelyVisible(el)) continue;
+
+					// Para headings dentro de sticky/fixed, no sumar scroll de página
+					const inStickyOrFixed = isInStickyOrFixed(el);
+					const scrollX = inStickyOrFixed ? 0 : window.scrollX;
+					const scrollY = inStickyOrFixed ? 0 : window.scrollY;
+
 					boxes.push({
 						id: el.dataset.griddoid || `heading-${i}`,
 						tag: el.tagName.toLowerCase(),
@@ -55,18 +71,18 @@ const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
 
 		update();
 
+		document.fonts.ready.then(update);
+
 		window.addEventListener("resize", update);
-		window.addEventListener("scroll", update, true);
 		document.addEventListener("animationend", update, true);
 		document.addEventListener("transitionend", update, true);
 
 		const observer = new MutationObserver(update);
-		observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+		observer.observe(document.body, { childList: true, subtree: true });
 
 		return () => {
 			cancelAnimationFrame(rafRef.current);
 			window.removeEventListener("resize", update);
-			window.removeEventListener("scroll", update, true);
 			document.removeEventListener("animationend", update, true);
 			document.removeEventListener("transitionend", update, true);
 			observer.disconnect();

package/src/modules/FramePreview/HeadingsOverlay/style.tsx

@@ -21,8 +21,8 @@ const Label = styled.span<{ $color: string; $above?: boolean }>`
 		p.$above
 			? `
 		transform: none;
-		top: -25px;
-		left: 1px;
+		top: -20px;
+		left: -2px;
 	`
 			: `
 		transform: rotate(-90deg);

package/src/modules/FramePreview/utils.tsx

@@ -6,7 +6,10 @@ const addIdsToHeadings = (container: HTMLElement, headingFilter: string | null):
 		const text = heading.textContent?.trim();
 		if (!text) return;
 
-		heading.dataset.griddoid = `heading-${index + 1}`;
+		const id = `heading-${index + 1}`;
+		if (heading.dataset.griddoid !== id) {
+			heading.dataset.griddoid = id;
+		}
 	});
 };