@immense/vue-pom-generator 1.0.49 → 1.0.50

package/class-generation/index.ts

@@ -45,7 +45,7 @@ import {
 
 // Intentionally imported so tooling understands this exported helper is part of the
 // generated POM public surface (it is consumed by generated Playwright fixtures).
-import { setPlaywrightAnimationOptions } from "./Pointer";
+import { setPlaywrightAnimationOptions } from "./pointer";
 
 void setPlaywrightAnimationOptions;
 
@@ -919,7 +919,7 @@ async function generateSplitTypeScriptFiles(
     customPomImportNameCollisionBehavior: options.customPomImportNameCollisionBehavior,
   });
 
-  const runtimeBasePagePath = path.join(base, "_pom-runtime", "class-generation", "BasePage.ts");
+  const runtimeBasePagePath = path.join(base, "_pom-runtime", "class-generation", "base-page.ts");
   const files: GeneratedFileOutput[] = [];
 
   for (const [name, deps] of entries) {
@@ -2385,7 +2385,7 @@ function getRuntimeGeneratedAssetSpecs(baseDir: string, basePageClassPath: strin
   const runtimeClassGenSourceDir = resolvePluginAsset("../class-generation");
   const runtimeClassGenFiles = fs.readdirSync(runtimeClassGenSourceDir)
     .filter(file => file.endsWith(".ts"))
-    .filter(file => file !== "BasePage.ts" && file !== "index.ts")
+    .filter(file => file !== "base-page.ts" && file !== "index.ts")
     .sort((left, right) => left.localeCompare(right));
 
   return [
@@ -2401,8 +2401,8 @@ function getRuntimeGeneratedAssetSpecs(baseDir: string, basePageClassPath: strin
     })),
     {
       absolutePath: basePageClassPath,
-      description: "BasePage.ts",
-      outputPath: path.join(runtimeClassGenAbs, "BasePage.ts"),
+      description: "base-page.ts",
+      outputPath: path.join(runtimeClassGenAbs, "base-page.ts"),
     },
   ];
 }
@@ -2643,7 +2643,7 @@ async function generateAggregatedFiles(
     }
 
     // Aggregate mode goal: consolidate all generated POM classes into one file.
-    // Instead of inlining BasePage/Pointer helpers and stripping imports via regex, we
+    // Instead of inlining BasePage/Pointer/Callout helpers and stripping imports via regex, we
     // emit/copy those dependencies into the output folder and import them normally.
     //
     // This keeps output deterministic and avoids fragile source rewriting.
@@ -2651,12 +2651,13 @@ async function generateAggregatedFiles(
     const runtimeClassGenRel = `${runtimeDirRel}/class-generation`;
 
     imports.push(`import type { PwLocator, PwPage } from "${runtimeClassGenRel}/playwright-types";`);
-    imports.push(`import { BasePage } from "${runtimeClassGenRel}/BasePage";`);
-    imports.push(`import type { Fluent } from "${runtimeClassGenRel}/BasePage";`);
+    imports.push(`import { BasePage } from "${runtimeClassGenRel}/base-page";`);
+    imports.push(`import type { Fluent } from "${runtimeClassGenRel}/base-page";`);
     imports.push(`export * from "${runtimeDirRel}/click-instrumentation";`);
     imports.push(`export * from "${runtimeClassGenRel}/playwright-types";`);
-    imports.push(`export * from "${runtimeClassGenRel}/Pointer";`);
-    imports.push(`export * from "${runtimeClassGenRel}/BasePage";`);
+    imports.push(`export * from "${runtimeClassGenRel}/callout";`);
+    imports.push(`export * from "${runtimeClassGenRel}/pointer";`);
+    imports.push(`export * from "${runtimeClassGenRel}/base-page";`);
 
     const customPomImportResolution = resolveCustomPomImportResolution(generatedClassNames, projectRoot, {
       customPomDir: options.customPomDir,

package/class-generation/{Pointer.ts → pointer.ts}

@@ -1,11 +1,7 @@
+import { Callout, type ElementTarget } from "./callout";
 import type { PwLocator, PwPage } from "./playwright-types";
 
-// ---------------------------------------------------------------------------
-// Cursor visual overlay helpers
-// ---------------------------------------------------------------------------
-
 const __PW_CURSOR_ID__ = "__pw_cursor__";
-const __PW_CURSOR_ANNOTATION_ID__ = "__pw_cursor_annotation__";
 const __PW_EDITABLE_DESCENDANT_SELECTOR__
 	= "input, textarea, select, [contenteditable=''], [contenteditable='true'], [contenteditable]:not([contenteditable='false'])";
 
@@ -22,7 +18,6 @@ const __PW_CURSOR_PNG__ =
 	+ "ONcpr3PrXy9VfS473M/D7H+TLmrqsXtOGctvxvMv2oVNP+Av0uHbzbxyJaywyUjx8TlnPY2YxqkD"
 	+ "dAAAAABJRU5ErkJggg==";
 
-// Per-page cursor position (viewport coords). WeakMap so pages can be GC'd.
 const __pw_cursor_positions__ = new WeakMap<object, { x: number; y: number }>();
 
 function __pw_get_cursor_pos__(page: PwPage): { x: number; y: number } {
@@ -35,52 +30,28 @@ function __pw_set_cursor_pos__(page: PwPage, x: number, y: number): void {
 
 async function __pw_ensure_cursor__(page: PwPage): Promise<void> {
 	const exists = await page.evaluate(
-		({ cursorId, annotationId }: { cursorId: string; annotationId: string }) =>
-			document.getElementById(cursorId) != null && document.getElementById(annotationId) != null,
-		{ cursorId: __PW_CURSOR_ID__, annotationId: __PW_CURSOR_ANNOTATION_ID__ },
+		({ cursorId }: { cursorId: string }) => document.getElementById(cursorId) != null,
+		{ cursorId: __PW_CURSOR_ID__ },
 	);
 	if (exists) return;
 
-	// Reset tracked position for this page.
 	__pw_set_cursor_pos__(page, 0, 0);
 
 	await page.evaluate(
-		({ id, src, annotationId }: { id: string; src: string; annotationId: string }) => {
+		({ id, src }: { id: string; src: string }) => {
 			const img = document.createElement("img");
 			img.setAttribute("src", src);
 			img.setAttribute("id", id);
-			// position:fixed keeps coordinates viewport-relative (matching Playwright boundingBox).
 			img.setAttribute(
 				"style",
 				"position:fixed;z-index:2147483647;pointer-events:none;left:0;top:0;transform-origin:0 0;",
 			);
 			document.body.appendChild(img);
-
-			const annotation = document.createElement("div");
-			annotation.setAttribute("id", annotationId);
-			annotation.setAttribute(
-				"style",
-				[
-					"position:fixed",
-					"z-index:2147483647",
-					"pointer-events:none",
-					"left:18px",
-					"top:18px",
-					"max-width:320px",
-					"padding:6px 10px",
-					"border-radius:999px",
-					"background:rgba(15,23,42,0.92)",
-					"color:#f8fafc",
-					"font:600 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-					"box-shadow:0 12px 30px rgba(15,23,42,0.35)",
-					"opacity:0",
-					"white-space:normal",
-					"transform:translate3d(0,0,0)",
-				].join(";"),
-			);
-			document.body.appendChild(annotation);
 		},
-		{ id: __PW_CURSOR_ID__, src: __PW_CURSOR_PNG__, annotationId: __PW_CURSOR_ANNOTATION_ID__ },
+		{
+			id: __PW_CURSOR_ID__,
+			src: __PW_CURSOR_PNG__,
+		},
 	);
 }
 
@@ -168,8 +139,6 @@ export interface AfterPointerClickInfo {
 
 export type AfterPointerClick = (info: AfterPointerClickInfo) => void | Promise<void>;
 
-type ElementTarget = string | PwLocator;
-
 // ---------------------------------------------------------------------------
 // Pointer class
 // ---------------------------------------------------------------------------
@@ -177,10 +146,12 @@ type ElementTarget = string | PwLocator;
 export class Pointer {
 	private readonly page: PwPage;
 	private readonly testIdAttribute: string;
+	private readonly callout: Callout;
 
-	public constructor(page: PwPage, testIdAttribute: string) {
+	public constructor(page: PwPage, testIdAttribute: string, callout?: Callout) {
 		this.page = page;
 		this.testIdAttribute = (testIdAttribute ?? "data-testid").trim() || "data-testid";
+		this.callout = callout ?? new Callout(page);
 	}
 
 	private toLocator(target: ElementTarget): PwLocator {
@@ -234,13 +205,14 @@ export class Pointer {
 	public async animateCursorToElement(
 		target: ElementTarget,
 		executeClick: boolean = true,
-		delayMs: number = 100,
+		delayMs: number = 1000,
 		annotationText: string = "",
 		options?: {
 			afterClick?: AfterPointerClick;
 		},
 	): Promise<void> {
 		const locator = this.toLocator(target);
+		const trimmedAnnotationText = annotationText.trim();
 
 		try {
 			await locator.first().scrollIntoViewIfNeeded();
@@ -253,6 +225,13 @@ export class Pointer {
 		const animEnabled = opts.enabled !== false;
 
 		if (!animEnabled) {
+			if (trimmedAnnotationText) {
+				await this.callout.showForElement(locator, trimmedAnnotationText);
+			}
+			else {
+				await this.callout.hide();
+			}
+
 			// Fast path: no animations.
 			const extraDelay = Math.max(0, opts.extraDelayMs ?? 0);
 			if (extraDelay > 0) await this.page.waitForTimeout(extraDelay);
@@ -274,7 +253,6 @@ export class Pointer {
 		const clickDelayMs = opts.pointer?.clickDelayMilliseconds ?? 0;
 		const extraDelayMs = Math.max(0, opts.extraDelayMs ?? 0);
 		const actionDelayMs = Math.max(0, delayMs);
-		const trimmedAnnotationText = annotationText.trim();
 
 		// Inject the visual cursor if it doesn't exist yet.
 		await __pw_ensure_cursor__(this.page);
@@ -287,74 +265,76 @@ export class Pointer {
 			const { x: startX, y: startY } = __pw_get_cursor_pos__(this.page);
 			const distance = Math.sqrt((endX - startX) ** 2 + (endY - startY) ** 2);
 
-			if (moveDurationMs > 0 && distance > 0) {
-				// Glide the cursor image using a CSS transition.
-				await this.page.evaluate(
-					({ id, annotationId, sx, sy, ex, ey, dur, style, annotationText }: {
-						id: string; annotationId: string; sx: number; sy: number; ex: number; ey: number; dur: number; style: string; annotationText: string;
-					}) => {
-						const el = document.getElementById(id);
-						const annotation = document.getElementById(annotationId);
-						if (!el) return;
-						el.style.transition = "";
-						el.style.willChange = "left, top";
-						el.style.left = `${sx}px`;
-						el.style.top = `${sy}px`;
-						if (annotation) {
-							annotation.textContent = annotationText;
-							annotation.style.transition = "";
-							annotation.style.willChange = "left, top, opacity";
-							annotation.style.left = `${sx + 18}px`;
-							annotation.style.top = `${sy + 22}px`;
-							annotation.style.opacity = annotationText ? "1" : "0";
-						}
-						// Force reflow so the browser registers the start position before transitioning.
+			const shouldAnimate = moveDurationMs > 0 && distance > 0;
+			await this.page.evaluate(
+				({
+					dur,
+					ex,
+					ey,
+					id,
+					style,
+					sx,
+					sy,
+					animate,
+				}: {
+					dur: number;
+					ex: number;
+					ey: number;
+					id: string;
+					style: string;
+					sx: number;
+					sy: number;
+					animate: boolean;
+				}) => {
+					const el = document.getElementById(id);
+					if (!el) {
+						return;
+					}
+
+					el.style.transition = "";
+					el.style.willChange = "left, top";
+					el.style.left = `${animate ? sx : ex}px`;
+					el.style.top = `${animate ? sy : ey}px`;
+
+					if (animate) {
 						void el.offsetWidth;
-						void annotation?.offsetWidth;
 						el.style.transition = `left ${dur}ms ${style}, top ${dur}ms ${style}`;
 						el.style.left = `${ex}px`;
 						el.style.top = `${ey}px`;
-						if (annotation) {
-							annotation.style.transition = `left ${dur}ms ${style}, top ${dur}ms ${style}, opacity 120ms ease-in-out`;
-							annotation.style.left = `${ex + 18}px`;
-							annotation.style.top = `${ey + 22}px`;
-						}
-					},
-					{
-						id: __PW_CURSOR_ID__,
-						annotationId: __PW_CURSOR_ANNOTATION_ID__,
-						sx: startX,
-						sy: startY,
-						ex: endX,
-						ey: endY,
-						dur: moveDurationMs,
-						style: transitionStyle,
-						annotationText: trimmedAnnotationText,
-					},
-				);
-				// Wait for the animation to finish.
-				await this.page.waitForTimeout(moveDurationMs + 25);
+					}
+				},
+				{
+					dur: moveDurationMs,
+					ex: endX,
+					ey: endY,
+					id: __PW_CURSOR_ID__,
+					style: transitionStyle,
+					sx: startX,
+					sy: startY,
+					animate: shouldAnimate,
+				},
+			);
+
+			if (trimmedAnnotationText) {
+				await this.callout.showForElement(locator, trimmedAnnotationText, {
+					skipScroll: true,
+					targetBox: box,
+				});
 			}
 			else {
-				// Teleport (distance 0 or duration 0).
-				await this.page.evaluate(
-					({ id, annotationId, x, y, annotationText }: { id: string; annotationId: string; x: number; y: number; annotationText: string }) => {
-						const el = document.getElementById(id);
-						if (el) { el.style.left = `${x}px`; el.style.top = `${y}px`; }
-						const annotation = document.getElementById(annotationId);
-						if (annotation) {
-							annotation.textContent = annotationText;
-							annotation.style.left = `${x + 18}px`;
-							annotation.style.top = `${y + 22}px`;
-							annotation.style.opacity = annotationText ? "1" : "0";
-						}
-					},
-					{ id: __PW_CURSOR_ID__, annotationId: __PW_CURSOR_ANNOTATION_ID__, x: endX, y: endY, annotationText: trimmedAnnotationText },
-				);
+				await this.callout.hide();
+			}
+
+			if (shouldAnimate) {
+				// Wait for the animation to finish.
+				await this.page.waitForTimeout(moveDurationMs + 25);
 			}
 
 			__pw_set_cursor_pos__(this.page, endX, endY);
 		}
+		else {
+			await this.callout.hide();
+		}
 
 		// Apply action delay + extra delay.
 		const totalDelay = actionDelayMs + extraDelayMs;
@@ -394,7 +374,7 @@ export class Pointer {
 		target: ElementTarget,
 		text: string,
 		executeClick: boolean = true,
-		delayMs: number = 100,
+		delayMs: number = 1000,
 		annotationText: string = "",
 		options?: {
 			afterClick?: AfterPointerClick;

package/dist/class-generation/{BasePage.d.ts → base-page.d.ts}

@@ -1,5 +1,5 @@
 import type { PwLocator, PwPage } from "./playwright-types";
-import type { AfterPointerClick } from "./Pointer";
+import type { AfterPointerClick } from "./pointer";
 /**
  * A chainable, thenable wrapper around a page object.
  *
@@ -35,6 +35,7 @@ export declare class ObjectId {
 export declare class BasePage {
     protected page: PwPage;
     protected readonly testIdAttribute: string;
+    private readonly callout;
     private readonly pointer;
     /**
      * @param {Page} page - Playwright page object
@@ -54,6 +55,9 @@ export declare class BasePage {
     protected animateCursorToElement(target: string | PwLocator, executeClick?: boolean, delayMs?: number, annotationText?: string, options?: {
         afterClick?: AfterPointerClick;
     }): Promise<void>;
+    showCallout(target: string | PwLocator, annotationText: string): Promise<void>;
+    showCalloutByTestId(testId: string, annotationText: string): Promise<void>;
+    hideCallout(): Promise<void>;
     /**
      * Creates an indexable proxy for keyed elements so generated POMs can expose
      * ergonomic accessors like:
@@ -133,4 +137,4 @@ export declare class BasePage {
     protected selectByTestId(testId: string, value: string): Promise<void>;
 }
 export {};
-//# sourceMappingURL=BasePage.d.ts.map
+//# sourceMappingURL=base-page.d.ts.map

package/dist/class-generation/base-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-page.d.ts","sourceRoot":"","sources":["../../class-generation/base-page.ts"],"names":[],"mappings":"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"}

package/dist/class-generation/callout.d.ts

@@ -0,0 +1,20 @@
+import type { PwLocator, PwPage } from "./playwright-types";
+export type ElementTarget = string | PwLocator;
+export interface CalloutTargetBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ShowCalloutOptions {
+    skipScroll?: boolean;
+    targetBox?: CalloutTargetBox;
+}
+export declare class Callout {
+    private readonly page;
+    constructor(page: PwPage);
+    private toLocator;
+    hide(): Promise<void>;
+    showForElement(target: ElementTarget, annotationText: string, options?: ShowCalloutOptions): Promise<void>;
+}
+//# sourceMappingURL=callout.d.ts.map

package/dist/class-generation/callout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../class-generation/callout.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAiE5D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,gBAAgB;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAsBD,MAAM,WAAW,kBAAkB;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AA0ZD,qBAAa,OAAO;IACnB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAS;gBAEX,IAAI,EAAE,MAAM;IAI/B,OAAO,CAAC,SAAS;IAIJ,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAkCrB,cAAc,CAC1B,MAAM,EAAE,aAAa,EACrB,cAAc,EAAE,MAAM,EACtB,OAAO,CAAC,EAAE,kBAAkB,GAC1B,OAAO,CAAC,IAAI,CAAC;CA6QhB"}

package/dist/class-generation/floating-ui.d.ts

@@ -0,0 +1,100 @@
+declare function detectOverflow(state: any, options: any): Promise<{
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}>;
+declare var computePosition: (reference: any, floating: any, config: any) => Promise<{
+    x: any;
+    y: any;
+    placement: any;
+    strategy: any;
+    middlewareData: {};
+}>;
+declare var arrow: (options: any) => {
+    name: string;
+    options: any;
+    fn(state: any): Promise<{
+        data?: undefined;
+        reset?: undefined;
+    } | {
+        [x: string]: any;
+        data: {
+            alignmentOffset?: number | undefined;
+            centerOffset: number;
+        };
+        reset: boolean;
+    }>;
+};
+declare var autoPlacement: (options: any) => {
+    name: string;
+    options: any;
+    fn(state: any): Promise<{
+        reset?: undefined;
+        data?: undefined;
+    } | {
+        reset: {
+            placement: any;
+        };
+        data?: undefined;
+    } | {
+        data: {
+            index: any;
+            overflows: any[];
+        };
+        reset: {
+            placement: any;
+        };
+    }>;
+};
+declare var flip: (options: any) => {
+    name: string;
+    options: any;
+    fn(state: any): Promise<{
+        data?: undefined;
+        reset?: undefined;
+    } | {
+        data: {
+            index: any;
+            overflows: any;
+        };
+        reset: {
+            placement: any;
+        };
+    } | {
+        reset: {
+            placement: any;
+        };
+        data?: undefined;
+    }>;
+};
+declare var offset: (options: any) => {
+    name: string;
+    options: any;
+    fn(state: any): Promise<{
+        x?: undefined;
+        y?: undefined;
+        data?: undefined;
+    } | {
+        x: any;
+        y: any;
+        data: {
+            placement: any;
+            x: number;
+            y: number;
+        };
+    }>;
+};
+declare var shift: (options: any) => {
+    name: string;
+    options: any;
+    fn(state: any): Promise<any>;
+};
+declare var limitShift: (options: any) => {
+    options: any;
+    fn(state: any): {
+        [x: string]: any;
+    };
+};
+export { arrow, autoPlacement, computePosition, detectOverflow, flip, limitShift, offset, shift };
+//# sourceMappingURL=floating-ui.d.ts.map

package/dist/class-generation/floating-ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-ui.d.ts","sourceRoot":"","sources":["../../class-generation/floating-ui.ts"],"names":[],"mappings":"AA2LA,iBAAe,cAAc,CAAC,KAAK,KAAA,EAAE,OAAO,KAAA;;;;;GAuD3C;AAED,QAAA,IAAI,eAAe,GAAU,cAAS,EAAE,aAAQ,EAAE,WAAM;;;;;;EAsFvD,CAAC;AACF,QAAA,IAAI,KAAK,GAAI,YAAO;;;;;;;;;;;;;;CA6DlB,CAAC;AAUH,QAAA,IAAI,aAAa,GAAY,YAAO;;;;;;;;;;;;;;;;;;;;CAsFnC,CAAC;AACF,QAAA,IAAI,IAAI,GAAY,YAAO;;;;;;;;;;;;;;;;;;;;CA4G1B,CAAC;AAuCF,QAAA,IAAI,MAAM,GAAY,YAAO;;;;;;;;;;;;;;;;CA6B5B,CAAC;AACF,QAAA,IAAI,KAAK,GAAY,YAAO;;;;CAwE3B,CAAC;AACF,QAAA,IAAI,UAAU,GAAY,YAAO;;;;;CAgEhC,CAAC;AACF,OAAO,EACL,KAAK,EACL,aAAa,EACb,eAAe,EACf,cAAc,EACd,IAAI,EACJ,UAAU,EACV,MAAM,EACN,KAAK,EACN,CAAC"}

package/dist/class-generation/{Pointer.d.ts → pointer.d.ts}

@@ -1,4 +1,5 @@
-import type { PwLocator, PwPage } from "./playwright-types";
+import { Callout, type ElementTarget } from "./callout";
+import type { PwPage } from "./playwright-types";
 export interface PlaywrightAnimationOptions {
     /**
      * Set to false to disable all animations and delays. Clicks/fills still happen.
@@ -49,11 +50,11 @@ export interface AfterPointerClickInfo {
     instrumented: boolean;
 }
 export type AfterPointerClick = (info: AfterPointerClickInfo) => void | Promise<void>;
-type ElementTarget = string | PwLocator;
 export declare class Pointer {
     private readonly page;
     private readonly testIdAttribute;
-    constructor(page: PwPage, testIdAttribute: string);
+    private readonly callout;
+    constructor(page: PwPage, testIdAttribute: string, callout?: Callout);
     private toLocator;
     private getTestId;
     private isEditableElement;
@@ -65,5 +66,4 @@ export declare class Pointer {
         afterClick?: AfterPointerClick;
     }): Promise<void>;
 }
-export {};
-//# sourceMappingURL=Pointer.d.ts.map
+//# sourceMappingURL=pointer.d.ts.map

package/dist/class-generation/pointer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer.d.ts","sourceRoot":"","sources":["../../class-generation/pointer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,KAAK,EAAa,MAAM,EAAE,MAAM,oBAAoB,CAAC;AA4D5D,MAAM,WAAW,0BAA0B;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,sDAAsD;IACtD,OAAO,CAAC,EAAE;QACT;;;;WAIG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAE9B;;;WAGG;QACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAAC;QAE7E;;;WAGG;QACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;KAChC,CAAC;IAEF,uCAAuC;IACvC,QAAQ,CAAC,EAAE;QACV;;;WAGG;QACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAC/B,CAAC;CACF;AASD,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,0BAA0B,GAAG,IAAI,CAavF;AAED,MAAM,WAAW,qBAAqB;IACrC,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAMtF,qBAAa,OAAO;IACnB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAS;IAC9B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAS;IACzC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAU;gBAEf,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO;IAM3E,OAAO,CAAC,SAAS;YAIH,SAAS;YAMT,iBAAiB;YAmBjB,sBAAsB;IAmBvB,sBAAsB,CAClC,MAAM,EAAE,aAAa,EACrB,YAAY,GAAE,OAAc,EAC5B,OAAO,GAAE,MAAa,EACtB,cAAc,GAAE,MAAW,EAC3B,OAAO,CAAC,EAAE;QACT,UAAU,CAAC,EAAE,iBAAiB,CAAC;KAC/B,GACC,OAAO,CAAC,IAAI,CAAC;IAgKH,qCAAqC,CACjD,MAAM,EAAE,aAAa,EACrB,IAAI,EAAE,MAAM,EACZ,YAAY,GAAE,OAAc,EAC5B,OAAO,GAAE,MAAa,EACtB,cAAc,GAAE,MAAW,EAC3B,OAAO,CAAC,EAAE;QACT,UAAU,CAAC,EAAE,iBAAiB,CAAC;KAC/B,GACC,OAAO,CAAC,IAAI,CAAC;CAiBhB"}

package/dist/index.cjs

@@ -3928,7 +3928,7 @@ async function generateSplitTypeScriptFiles(componentHierarchyMap, vueFilesPathM
     customPomImportAliases: options.customPomImportAliases,
     customPomImportNameCollisionBehavior: options.customPomImportNameCollisionBehavior
   });
-  const runtimeBasePagePath = path.join(base, "_pom-runtime", "class-generation", "BasePage.ts");
+  const runtimeBasePagePath = path.join(base, "_pom-runtime", "class-generation", "base-page.ts");
   const files = [];
   for (const [name, deps] of entries) {
     const filePath = generatedTsFilePathByComponent.get(name);
@@ -5077,7 +5077,7 @@ function getRuntimeGeneratedAssetSpecs(baseDir, basePageClassPath) {
   const runtimeDirAbs = path.join(baseDir, "_pom-runtime");
   const runtimeClassGenAbs = path.join(runtimeDirAbs, "class-generation");
   const runtimeClassGenSourceDir = resolvePluginAsset("../class-generation");
-  const runtimeClassGenFiles = fs.readdirSync(runtimeClassGenSourceDir).filter((file) => file.endsWith(".ts")).filter((file) => file !== "BasePage.ts" && file !== "index.ts").sort((left, right) => left.localeCompare(right));
+  const runtimeClassGenFiles = fs.readdirSync(runtimeClassGenSourceDir).filter((file) => file.endsWith(".ts")).filter((file) => file !== "base-page.ts" && file !== "index.ts").sort((left, right) => left.localeCompare(right));
   return [
     {
       absolutePath: resolvePluginAsset("../click-instrumentation.ts"),
@@ -5091,8 +5091,8 @@ function getRuntimeGeneratedAssetSpecs(baseDir, basePageClassPath) {
     })),
     {
       absolutePath: basePageClassPath,
-      description: "BasePage.ts",
-      outputPath: path.join(runtimeClassGenAbs, "BasePage.ts")
+      description: "base-page.ts",
+      outputPath: path.join(runtimeClassGenAbs, "base-page.ts")
     }
   ];
 }
@@ -5259,12 +5259,13 @@ async function generateAggregatedFiles(componentHierarchyMap, vueFilesPathMap, b
     const runtimeDirRel = "./_pom-runtime";
     const runtimeClassGenRel = `${runtimeDirRel}/class-generation`;
     imports.push(`import type { PwLocator, PwPage } from "${runtimeClassGenRel}/playwright-types";`);
-    imports.push(`import { BasePage } from "${runtimeClassGenRel}/BasePage";`);
-    imports.push(`import type { Fluent } from "${runtimeClassGenRel}/BasePage";`);
+    imports.push(`import { BasePage } from "${runtimeClassGenRel}/base-page";`);
+    imports.push(`import type { Fluent } from "${runtimeClassGenRel}/base-page";`);
     imports.push(`export * from "${runtimeDirRel}/click-instrumentation";`);
     imports.push(`export * from "${runtimeClassGenRel}/playwright-types";`);
-    imports.push(`export * from "${runtimeClassGenRel}/Pointer";`);
-    imports.push(`export * from "${runtimeClassGenRel}/BasePage";`);
+    imports.push(`export * from "${runtimeClassGenRel}/callout";`);
+    imports.push(`export * from "${runtimeClassGenRel}/pointer";`);
+    imports.push(`export * from "${runtimeClassGenRel}/base-page";`);
     const customPomImportResolution = resolveCustomPomImportResolution(generatedClassNames, projectRoot, {
       customPomDir: options.customPomDir,
       customPomImportAliases: options.customPomImportAliases,
@@ -6823,14 +6824,19 @@ function createBuildProcessorPlugin(options) {
         return null;
       });
       if (!fs.existsSync(basePageClassPath)) {
-        this.error(`BasePage.ts not found at ${basePageClassPath}. Ensure it is included in the build.`);
+        this.error(`Base page runtime file not found at ${basePageClassPath}. Ensure it is included in the build.`);
       }
       this.addWatchFile(basePageClassPath);
-      const pointerPath = path.resolve(path.dirname(basePageClassPath), "Pointer.ts");
+      const pointerPath = path.resolve(path.dirname(basePageClassPath), "pointer.ts");
       if (!fs.existsSync(pointerPath)) {
-        this.error(`Pointer.ts not found at ${pointerPath}. Ensure it is included in the build.`);
+        this.error(`pointer.ts not found at ${pointerPath}. Ensure it is included in the build.`);
       }
       this.addWatchFile(pointerPath);
+      const calloutPath = path.resolve(path.dirname(basePageClassPath), "callout.ts");
+      if (!fs.existsSync(calloutPath)) {
+        this.error(`callout.ts not found at ${calloutPath}. Ensure it is included in the build.`);
+      }
+      this.addWatchFile(calloutPath);
     },
     async buildEnd(error) {
       if (error) {
@@ -7163,7 +7169,14 @@ function createDevProcessorPlugin(options) {
       };
       const watchedVueGlobs = scanDirs.map((dir) => path.resolve(projectRootRef.current, dir, "**", "*.vue"));
       const watchedPluginGlob = path.resolve(projectRootRef.current, "vite-plugins", "vue-pom-generator", "**", "*.ts");
-      server.watcher.add([...watchedVueGlobs, watchedPluginGlob, basePageClassPath]);
+      const runtimeDir = path.dirname(basePageClassPath);
+      server.watcher.add([
+        ...watchedVueGlobs,
+        watchedPluginGlob,
+        basePageClassPath,
+        path.resolve(runtimeDir, "pointer.ts"),
+        path.resolve(runtimeDir, "callout.ts")
+      ]);
       scheduleVueFileRegenLocal = (filePath, source) => {
         pendingChangedVueFiles.add(filePath);
         logDebug(`queued(${source}): files=${pendingChangedVueFiles.size} deleted=${pendingDeletedComponents.size}`);
@@ -7352,9 +7365,9 @@ function createSupportPlugins(options) {
   const resolvedRouterEntry = resolveRouterEntry2();
   const getDefaultBasePageClassPath = () => {
     try {
-      return node_url.fileURLToPath(new URL("../class-generation/BasePage.ts", typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("index.cjs", document.baseURI).href));
+      return node_url.fileURLToPath(new URL("../class-generation/base-page.ts", typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("index.cjs", document.baseURI).href));
     } catch {
-      return path.resolve(__dirname, "..", "class-generation", "BasePage.ts");
+      return path.resolve(__dirname, "..", "class-generation", "base-page.ts");
     }
   };
   const basePageClassPath = basePageClassPathOverride ?? getDefaultBasePageClassPath();