libretto 0.5.0 → 0.5.1

package/src/shared/visualization/ghost-cursor.ts

@@ -3,45 +3,49 @@ import type { Page } from "playwright";
 export type GhostCursorStyle = "minimal" | "dot" | "screenstudio";
 
 export type GhostCursorOptions = {
-	style?: GhostCursorStyle;
-	color?: string;
-	size?: number;
-	zIndex?: number;
-	easing?: string;
-	minDurationMs?: number;
-	maxDurationMs?: number;
-	speedPxPerMs?: number;
+  style?: GhostCursorStyle;
+  color?: string;
+  size?: number;
+  zIndex?: number;
+  easing?: string;
+  minDurationMs?: number;
+  maxDurationMs?: number;
+  speedPxPerMs?: number;
 };
 
 const DEFAULTS: Required<GhostCursorOptions> = {
-	style: "minimal",
-	color: "rgba(255, 70, 70, 0.9)",
-	size: 20,
-	zIndex: 2147483646,
-	easing: "cubic-bezier(0.16, 1, 0.3, 1)",
-	minDurationMs: 100,
-	maxDurationMs: 600,
-	speedPxPerMs: 1.5,
+  style: "minimal",
+  color: "rgba(255, 70, 70, 0.9)",
+  size: 20,
+  zIndex: 2147483646,
+  easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+  minDurationMs: 100,
+  maxDurationMs: 600,
+  speedPxPerMs: 1.5,
 };
 
 const CURSOR_ID = "__libretto_ghost_cursor__";
 
-function buildCursorSvg(style: GhostCursorStyle, color: string, size: number): string {
-	if (style === "dot") {
-		return `<div style="width:${size}px;height:${size}px;border-radius:50%;background:${color};"></div>`;
-	}
-	if (style === "screenstudio") {
-		return `<div style="width:${size * 1.4}px;height:${size * 1.4}px;border-radius:50%;background:${color};box-shadow:0 0 ${size * 0.6}px ${color};opacity:0.7;"></div>`;
-	}
-	// minimal: default arrow-like SVG cursor
-	return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+function buildCursorSvg(
+  style: GhostCursorStyle,
+  color: string,
+  size: number,
+): string {
+  if (style === "dot") {
+    return `<div style="width:${size}px;height:${size}px;border-radius:50%;background:${color};"></div>`;
+  }
+  if (style === "screenstudio") {
+    return `<div style="width:${size * 1.4}px;height:${size * 1.4}px;border-radius:50%;background:${color};box-shadow:0 0 ${size * 0.6}px ${color};opacity:0.7;"></div>`;
+  }
+  // minimal: default arrow-like SVG cursor
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path d="M5 3L19 12L12 13L9 20L5 3Z" fill="${color}" stroke="rgba(0,0,0,0.3)" stroke-width="1"/>
 	</svg>`;
 }
 
 function buildInitScript(opts: Required<GhostCursorOptions>): string {
-	const svg = buildCursorSvg(opts.style, opts.color, opts.size);
-	return `
+  const svg = buildCursorSvg(opts.style, opts.color, opts.size);
+  return `
 (function() {
 	if (document.getElementById("${CURSOR_ID}")) return;
 	var el = document.createElement("div");
@@ -56,145 +60,154 @@ function buildInitScript(opts: Required<GhostCursorOptions>): string {
 const installedPages = new WeakSet<Page>();
 
 export async function ensureGhostCursor(
-	page: Page,
-	options?: GhostCursorOptions,
+  page: Page,
+  options?: GhostCursorOptions,
 ): Promise<void> {
-	const existingOpts = (page as any).__librettoGhostCursorOpts as
-		| Required<GhostCursorOptions>
-		| undefined;
-	const opts = { ...DEFAULTS, ...(existingOpts ?? {}), ...options };
-	const initScript = buildInitScript(opts);
-
-	if (!installedPages.has(page)) {
-		installedPages.add(page);
-		await page.addInitScript({ content: initScript });
-	}
-
-	// Store options on the page for later use by move/click
-	(page as any).__librettoGhostCursorOpts = opts;
-
-	// Re-run in-page installer so cursor recovers after page.setContent() or DOM resets.
-	try {
-		await page.evaluate(new Function(initScript) as () => void);
-	} catch {
-		// Page might not be ready yet; addInitScript will handle on next navigation
-	}
+  const existingOpts = (page as any).__librettoGhostCursorOpts as
+    | Required<GhostCursorOptions>
+    | undefined;
+  const opts = { ...DEFAULTS, ...(existingOpts ?? {}), ...options };
+  const initScript = buildInitScript(opts);
+
+  if (!installedPages.has(page)) {
+    installedPages.add(page);
+    await page.addInitScript({ content: initScript });
+  }
+
+  // Store options on the page for later use by move/click
+  (page as any).__librettoGhostCursorOpts = opts;
+
+  // Re-run in-page installer so cursor recovers after page.setContent() or DOM resets.
+  try {
+    await page.evaluate(new Function(initScript) as () => void);
+  } catch {
+    // Page might not be ready yet; addInitScript will handle on next navigation
+  }
 }
 
 export async function moveGhostCursor(
-	page: Page,
-	target: { x: number; y: number; durationMs?: number },
+  page: Page,
+  target: { x: number; y: number; durationMs?: number },
 ): Promise<void> {
-	const opts: Required<GhostCursorOptions> =
-		(page as any).__librettoGhostCursorOpts ?? DEFAULTS;
-
-	const durationMs =
-		target.durationMs ??
-		Math.min(
-			opts.maxDurationMs,
-			Math.max(opts.minDurationMs, 200), // default ~200ms if no distance info
-		);
-
-	try {
-		await page.evaluate(
-			({ id, x, y, duration, easing }) => {
-				const el = document.getElementById(id);
-				if (!el) return;
-				el.style.opacity = "1";
-				el.style.transition = `transform ${duration}ms ${easing}`;
-				el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
-			},
-			{ id: CURSOR_ID, x: target.x, y: target.y, duration: durationMs, easing: opts.easing },
-		);
-
-		await page.waitForTimeout(durationMs);
-	} catch {
-		// Best-effort: page may have navigated
-	}
+  const opts: Required<GhostCursorOptions> =
+    (page as any).__librettoGhostCursorOpts ?? DEFAULTS;
+
+  const durationMs =
+    target.durationMs ??
+    Math.min(
+      opts.maxDurationMs,
+      Math.max(opts.minDurationMs, 200), // default ~200ms if no distance info
+    );
+
+  try {
+    await page.evaluate(
+      ({ id, x, y, duration, easing }) => {
+        const el = document.getElementById(id);
+        if (!el) return;
+        el.style.opacity = "1";
+        el.style.transition = `transform ${duration}ms ${easing}`;
+        el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+      },
+      {
+        id: CURSOR_ID,
+        x: target.x,
+        y: target.y,
+        duration: durationMs,
+        easing: opts.easing,
+      },
+    );
+
+    await page.waitForTimeout(durationMs);
+  } catch {
+    // Best-effort: page may have navigated
+  }
 }
 
 export async function moveGhostCursorWithDistance(
-	page: Page,
-	from: { x: number; y: number },
-	to: { x: number; y: number },
+  page: Page,
+  from: { x: number; y: number },
+  to: { x: number; y: number },
 ): Promise<void> {
-	const opts: Required<GhostCursorOptions> =
-		(page as any).__librettoGhostCursorOpts ?? DEFAULTS;
-
-	const dx = to.x - from.x;
-	const dy = to.y - from.y;
-	const distance = Math.sqrt(dx * dx + dy * dy);
-	const durationMs = Math.min(
-		opts.maxDurationMs,
-		Math.max(opts.minDurationMs, distance / opts.speedPxPerMs),
-	);
-
-	await moveGhostCursor(page, { x: to.x, y: to.y, durationMs });
+  const opts: Required<GhostCursorOptions> =
+    (page as any).__librettoGhostCursorOpts ?? DEFAULTS;
+
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const distance = Math.sqrt(dx * dx + dy * dy);
+  const durationMs = Math.min(
+    opts.maxDurationMs,
+    Math.max(opts.minDurationMs, distance / opts.speedPxPerMs),
+  );
+
+  await moveGhostCursor(page, { x: to.x, y: to.y, durationMs });
 }
 
 export async function ghostClick(
-	page: Page,
-	target: { x: number; y: number },
+  page: Page,
+  target: { x: number; y: number },
 ): Promise<void> {
-	try {
-		// Click feedback: scale down on "press"
-		await page.evaluate(
-			({ id, x, y }) => {
-				const el = document.getElementById(id);
-				if (!el) return;
-				el.style.transform = `translate3d(${x}px, ${y}px, 0) scale(0.93)`;
-				el.style.transition = "transform 80ms ease-out";
-			},
-			{ id: CURSOR_ID, x: target.x, y: target.y },
-		);
-		await page.waitForTimeout(100);
-
-		// Release: scale back up
-		await page.evaluate(
-			({ id, x, y }) => {
-				const el = document.getElementById(id);
-				if (!el) return;
-				el.style.transform = `translate3d(${x}px, ${y}px, 0) scale(1)`;
-				el.style.transition = "transform 120ms ease-out";
-			},
-			{ id: CURSOR_ID, x: target.x, y: target.y },
-		);
-		await page.waitForTimeout(130);
-	} catch {
-		// Best-effort
-	}
+  try {
+    // Click feedback: scale down on "press"
+    await page.evaluate(
+      ({ id, x, y }) => {
+        const el = document.getElementById(id);
+        if (!el) return;
+        el.style.transform = `translate3d(${x}px, ${y}px, 0) scale(0.93)`;
+        el.style.transition = "transform 80ms ease-out";
+      },
+      { id: CURSOR_ID, x: target.x, y: target.y },
+    );
+    await page.waitForTimeout(100);
+
+    // Release: scale back up
+    await page.evaluate(
+      ({ id, x, y }) => {
+        const el = document.getElementById(id);
+        if (!el) return;
+        el.style.transform = `translate3d(${x}px, ${y}px, 0) scale(1)`;
+        el.style.transition = "transform 120ms ease-out";
+      },
+      { id: CURSOR_ID, x: target.x, y: target.y },
+    );
+    await page.waitForTimeout(130);
+  } catch {
+    // Best-effort
+  }
 }
 
 export async function hideGhostCursor(page: Page): Promise<void> {
-	try {
-		await page.evaluate(
-			({ id }) => {
-				const el = document.getElementById(id);
-				if (!el) return;
-				el.style.transition = "opacity 300ms ease-out";
-				el.style.opacity = "0";
-			},
-			{ id: CURSOR_ID },
-		);
-	} catch {
-		// Best-effort
-	}
+  try {
+    await page.evaluate(
+      ({ id }) => {
+        const el = document.getElementById(id);
+        if (!el) return;
+        el.style.transition = "opacity 300ms ease-out";
+        el.style.opacity = "0";
+      },
+      { id: CURSOR_ID },
+    );
+  } catch {
+    // Best-effort
+  }
 }
 
 export async function getGhostCursorPosition(
-	page: Page,
+  page: Page,
 ): Promise<{ x: number; y: number } | null> {
-	try {
-		return await page.evaluate(({ id }) => {
-			const el = document.getElementById(id);
-			if (!el) return null;
-			const match = el.style.transform.match(
-				/translate3d\(\s*([\d.-]+)px\s*,\s*([\d.-]+)px/,
-			);
-			if (!match) return null;
-			return { x: parseFloat(match[1]!), y: parseFloat(match[2]!) };
-		}, { id: CURSOR_ID });
-	} catch {
-		return null;
-	}
+  try {
+    return await page.evaluate(
+      ({ id }) => {
+        const el = document.getElementById(id);
+        if (!el) return null;
+        const match = el.style.transform.match(
+          /translate3d\(\s*([\d.-]+)px\s*,\s*([\d.-]+)px/,
+        );
+        if (!match) return null;
+        return { x: parseFloat(match[1]!), y: parseFloat(match[2]!) };
+      },
+      { id: CURSOR_ID },
+    );
+  } catch {
+    return null;
+  }
 }

package/src/shared/visualization/highlight.ts

@@ -1,19 +1,19 @@
 import type { Page } from "playwright";
 
 export type HighlightOptions = {
-	color?: string;
-	zIndex?: number;
+  color?: string;
+  zIndex?: number;
 };
 
 const HIGHLIGHT_DEFAULTS = {
-	color: "rgba(59, 130, 246, 0.25)",
-	zIndex: 2147483645,
+  color: "rgba(59, 130, 246, 0.25)",
+  zIndex: 2147483645,
 };
 
 const LAYER_ID = "__libretto_highlight_layer__";
 
 function buildHighlightInitScript(opts: { zIndex: number }): string {
-	return `
+  return `
 (function() {
 	if (document.getElementById("${LAYER_ID}")) return;
 	var el = document.createElement("div");
@@ -27,59 +27,59 @@ function buildHighlightInitScript(opts: { zIndex: number }): string {
 const installedPages = new WeakSet<Page>();
 
 export async function ensureHighlightLayer(
-	page: Page,
-	options?: HighlightOptions,
+  page: Page,
+  options?: HighlightOptions,
 ): Promise<void> {
-	const existingOpts = (page as any).__librettoHighlightOpts as
-		| { color: string; zIndex: number }
-		| undefined;
-	const zIndex =
-		options?.zIndex ?? existingOpts?.zIndex ?? HIGHLIGHT_DEFAULTS.zIndex;
-	const initScript = buildHighlightInitScript({ zIndex });
-
-	if (!installedPages.has(page)) {
-		installedPages.add(page);
-		await page.addInitScript({ content: initScript });
-	}
-
-	// Store/refresh options for later.
-	(page as any).__librettoHighlightOpts = {
-		color: options?.color ?? existingOpts?.color ?? HIGHLIGHT_DEFAULTS.color,
-		zIndex,
-	};
-
-	// Re-run in-page installer so overlays recover after page.setContent() or DOM resets.
-	try {
-		await page.evaluate(new Function(initScript) as () => void);
-	} catch {
-		// Page may not be ready
-	}
+  const existingOpts = (page as any).__librettoHighlightOpts as
+    | { color: string; zIndex: number }
+    | undefined;
+  const zIndex =
+    options?.zIndex ?? existingOpts?.zIndex ?? HIGHLIGHT_DEFAULTS.zIndex;
+  const initScript = buildHighlightInitScript({ zIndex });
+
+  if (!installedPages.has(page)) {
+    installedPages.add(page);
+    await page.addInitScript({ content: initScript });
+  }
+
+  // Store/refresh options for later.
+  (page as any).__librettoHighlightOpts = {
+    color: options?.color ?? existingOpts?.color ?? HIGHLIGHT_DEFAULTS.color,
+    zIndex,
+  };
+
+  // Re-run in-page installer so overlays recover after page.setContent() or DOM resets.
+  try {
+    await page.evaluate(new Function(initScript) as () => void);
+  } catch {
+    // Page may not be ready
+  }
 }
 
 export type ShowHighlightParams = {
-	box: { x: number; y: number; width: number; height: number };
-	label?: string;
-	color?: string;
-	durationMs?: number;
+  box: { x: number; y: number; width: number; height: number };
+  label?: string;
+  color?: string;
+  durationMs?: number;
 };
 
 export async function showHighlight(
-	page: Page,
-	params: ShowHighlightParams,
+  page: Page,
+  params: ShowHighlightParams,
 ): Promise<void> {
-	const opts = (page as any).__librettoHighlightOpts ?? HIGHLIGHT_DEFAULTS;
-	const color = params.color ?? opts.color;
-	const durationMs = params.durationMs ?? 350;
-
-	try {
-		await page.evaluate(
-			({ layerId, box, color, label, durationMs }) => {
-				const layer = document.getElementById(layerId);
-				if (!layer) return;
-
-				const rect = document.createElement("div");
-				rect.className = "__libretto_highlight_rect__";
-				rect.style.cssText = `
+  const opts = (page as any).__librettoHighlightOpts ?? HIGHLIGHT_DEFAULTS;
+  const color = params.color ?? opts.color;
+  const durationMs = params.durationMs ?? 350;
+
+  try {
+    await page.evaluate(
+      ({ layerId, box, color, label, durationMs }) => {
+        const layer = document.getElementById(layerId);
+        if (!layer) return;
+
+        const rect = document.createElement("div");
+        rect.className = "__libretto_highlight_rect__";
+        rect.style.cssText = `
 					position:absolute;
 					left:${box.x}px;
 					top:${box.y}px;
@@ -93,10 +93,10 @@ export async function showHighlight(
 					opacity:1;
 				`;
 
-				if (label) {
-					const labelEl = document.createElement("div");
-					labelEl.textContent = label;
-					labelEl.style.cssText = `
+        if (label) {
+          const labelEl = document.createElement("div");
+          labelEl.textContent = label;
+          labelEl.style.cssText = `
 						position:absolute;
 						top:-22px;
 						left:0;
@@ -108,39 +108,42 @@ export async function showHighlight(
 						white-space:nowrap;
 						pointer-events:none;
 					`;
-					rect.appendChild(labelEl);
-				}
-
-				layer.appendChild(rect);
-
-				// Auto-fade after duration
-				setTimeout(() => {
-					rect.style.opacity = "0";
-					setTimeout(() => rect.remove(), 250);
-				}, durationMs);
-			},
-			{
-				layerId: LAYER_ID,
-				box: params.box,
-				color,
-				label: params.label,
-				durationMs,
-			},
-		);
-	} catch {
-		// Best-effort
-	}
+          rect.appendChild(labelEl);
+        }
+
+        layer.appendChild(rect);
+
+        // Auto-fade after duration
+        setTimeout(() => {
+          rect.style.opacity = "0";
+          setTimeout(() => rect.remove(), 250);
+        }, durationMs);
+      },
+      {
+        layerId: LAYER_ID,
+        box: params.box,
+        color,
+        label: params.label,
+        durationMs,
+      },
+    );
+  } catch {
+    // Best-effort
+  }
 }
 
 export async function clearHighlights(page: Page): Promise<void> {
-	try {
-		await page.evaluate(({ layerId }) => {
-			const layer = document.getElementById(layerId);
-			if (!layer) return;
-			const rects = layer.querySelectorAll(".__libretto_highlight_rect__");
-			rects.forEach((r) => r.remove());
-		}, { layerId: LAYER_ID });
-	} catch {
-		// Best-effort
-	}
+  try {
+    await page.evaluate(
+      ({ layerId }) => {
+        const layer = document.getElementById(layerId);
+        if (!layer) return;
+        const rects = layer.querySelectorAll(".__libretto_highlight_rect__");
+        rects.forEach((r) => r.remove());
+      },
+      { layerId: LAYER_ID },
+    );
+  } catch {
+    // Best-effort
+  }
 }

package/src/shared/visualization/index.ts

@@ -1,18 +1,18 @@
 export {
-	ensureGhostCursor,
-	moveGhostCursor,
-	moveGhostCursorWithDistance,
-	ghostClick,
-	hideGhostCursor,
-	getGhostCursorPosition,
-	type GhostCursorOptions,
-	type GhostCursorStyle,
+  ensureGhostCursor,
+  moveGhostCursor,
+  moveGhostCursorWithDistance,
+  ghostClick,
+  hideGhostCursor,
+  getGhostCursorPosition,
+  type GhostCursorOptions,
+  type GhostCursorStyle,
 } from "./ghost-cursor.js";
 
 export {
-	ensureHighlightLayer,
-	showHighlight,
-	clearHighlights,
-	type HighlightOptions,
-	type ShowHighlightParams,
+  ensureHighlightLayer,
+  showHighlight,
+  clearHighlights,
+  type HighlightOptions,
+  type ShowHighlightParams,
 } from "./highlight.js";

package/src/shared/workflow/workflow.ts

@@ -3,40 +3,34 @@ import type { MinimalLogger } from "../logger/logger.js";
 
 export const LIBRETTO_WORKFLOW_BRAND = Symbol.for("libretto.workflow");
 
-export type LibrettoWorkflowMetadata = {};
-
 export type LibrettoWorkflowContext<S = {}> = {
-	page: Page;
-	logger: MinimalLogger;
-	services: S;
+  session: string;
+  page: Page;
+  logger: MinimalLogger;
+  services: S;
 };
 
-export type LibrettoWorkflowHandler<Input = unknown, Output = unknown, S = {}> = (
-	ctx: LibrettoWorkflowContext<S>,
-	input: Input,
-) => Promise<Output>;
+export type LibrettoWorkflowHandler<
+  Input = unknown,
+  Output = unknown,
+  S = {},
+> = (ctx: LibrettoWorkflowContext<S>, input: Input) => Promise<Output>;
 
 export class LibrettoWorkflow<Input = unknown, Output = unknown, S = {}> {
-	public readonly [LIBRETTO_WORKFLOW_BRAND] = true;
-	public readonly metadata: LibrettoWorkflowMetadata;
-	private readonly handler: LibrettoWorkflowHandler<Input, Output, S>;
+  public readonly [LIBRETTO_WORKFLOW_BRAND] = true;
+  private readonly handler: LibrettoWorkflowHandler<Input, Output, S>;
 
-	constructor(
-		metadata: LibrettoWorkflowMetadata,
-		handler: LibrettoWorkflowHandler<Input, Output, S>,
-	) {
-		this.metadata = metadata;
-		this.handler = handler;
-	}
+  constructor(handler: LibrettoWorkflowHandler<Input, Output, S>) {
+    this.handler = handler;
+  }
 
-	async run(ctx: LibrettoWorkflowContext<S>, input: Input): Promise<Output> {
-		return this.handler(ctx, input);
-	}
+  async run(ctx: LibrettoWorkflowContext<S>, input: Input): Promise<Output> {
+    return this.handler(ctx, input);
+  }
 }
 
 export function workflow<Input = unknown, Output = unknown, S = {}>(
-	metadata: LibrettoWorkflowMetadata,
-	handler: LibrettoWorkflowHandler<Input, Output, S>,
+  handler: LibrettoWorkflowHandler<Input, Output, S>,
 ): LibrettoWorkflow<Input, Output, S> {
-	return new LibrettoWorkflow(metadata, handler);
+  return new LibrettoWorkflow(handler);
 }