@ingcreators/annot-playwright 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @ingcreators/annot-playwright
 
+## 0.2.0
+
+### Minor Changes
+
+- 35e3ad7: `annotateScreenshot()` now accepts the annotation DSL added in `@ingcreators/annot-annotator@0.2.0`:
+
+  ```ts
+  import {
+    test,
+    expect,
+    type BboxAnnotation,
+  } from "@ingcreators/annot-playwright";
+
+  test("login form", async ({ page, annotator }, testInfo) => {
+    const submit = page.getByRole("button", { name: "Sign in" });
+    const box = (await submit.boundingBox())!;
+    const annotated = await annotator.annotateScreenshot(page, {
+      annotations: [
+        { type: "rect", bbox: box, intent: "error" },
+        {
+          type: "callout",
+          at: { x: 50, y: 50 },
+          targetBbox: box,
+          content: "Failing",
+        },
+      ] satisfies BboxAnnotation[],
+    });
+    await testInfo.attach("failure.png", { body: annotated });
+  });
+  ```
+
+  The existing `annotationsSvg: string` shape still works; the new `annotations: BboxAnnotation[]` is an additive overload. `intent` shorthand (`"info"` / `"warning"` / `"error"` / `"success"` / `"neutral"`) maps to the Annot design system's semantic colours so callers no longer think in raw hex values, and `callout` composes the rect + arrow + caption in a single entry.
+
+  `rectForBoundingBox` / `arrowBetween` / `textAt` are now thin re-exports from `@ingcreators/annot-annotator` rather than local helpers. Cosmetic delta: `arrowBetween`'s marker id prefix changed from `annot-pw-arrow-N` to `annot-arrow-N`; snapshot-on-SVG tests should expect this.
+
+  Also re-exports the bbox-flavour DSL types (`BboxAnnotation`, `BBox`, `Point`, `Intent`, `AnnotationStyle`, `BboxRedactRegion`, `RedactStyle`, …) from `@ingcreators/annot-annotator` so callers keep a single import line.
+
+### Patch Changes
+
+- Updated dependencies [92378f9]
+  - @ingcreators/annot-annotator@0.2.0
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -1,21 +1,22 @@
 # `@ingcreators/annot-playwright`
 
-Playwright fixture for [`@ingcreators/annot-annotator`](../annotator/README.md).
+[![npm](https://img.shields.io/npm/v/@ingcreators/annot-playwright.svg)](https://www.npmjs.com/package/@ingcreators/annot-playwright)
+[![license](https://img.shields.io/npm/l/@ingcreators/annot-playwright.svg)](https://github.com/ingcreators/annot/blob/main/LICENSE)
+
+Playwright fixture for [`@ingcreators/annot-annotator`](https://www.npmjs.com/package/@ingcreators/annot-annotator).
 Emit annotated screenshots from test failures without leaving the
 test file.
 
-> **Status:** Workspace package, not yet published to npm. Becomes
-> installable in Phase 3 of the headless-annotator track (gated on
-> Changesets). The Phase 1 annotator it depends on is also
-> workspace-only until then.
-
-## Install (post-publish)
+## Install
 
 ```sh
 pnpm add -D @playwright/test @ingcreators/annot-playwright
+# or
+npm install --save-dev @playwright/test @ingcreators/annot-playwright
 ```
 
-(`@playwright/test` is a peer dependency.)
+`@playwright/test` is a peer dependency — bring your own pinned
+version.
 
 ## Usage
 

package/dist/fixture.d.ts

@@ -1,4 +1,4 @@
-import { Annotator } from '@ingcreators/annot-annotator';
+import { Annotator, BboxAnnotation } from '@ingcreators/annot-annotator';
 /**
  * Minimal Playwright `Page` surface the fixture relies on. The full
  * `@playwright/test` `Page` type is much wider, but importing it
@@ -22,12 +22,29 @@ export interface PageLike {
  *   Playwright `Page`, captures a screenshot, and overlays the
  *   caller-supplied annotation SVG.
  */
+/**
+ * Annotation input for `annotateScreenshot`. Either flavour works:
+ *
+ *   - `annotationsSvg: string` — raw SVG fragment, useful for the
+ *     `rectForBoundingBox` / `arrowBetween` / `textAt` primitives
+ *     and any custom SVG you compose yourself.
+ *   - `annotations: BboxAnnotation[]` — the DSL flavour added in
+ *     0.2.0. Each entry is a typed shape (`rect` / `circle` /
+ *     `arrow` / `text` / `callout` / `raw`) with an optional
+ *     `intent` shorthand mapping to design-system colours.
+ */
+export type AnnotateScreenshotOptions = {
+    annotationsSvg: string;
+    annotations?: never;
+    fullPage?: boolean;
+} | {
+    annotations: readonly BboxAnnotation[];
+    annotationsSvg?: never;
+    fullPage?: boolean;
+};
 export interface PlaywrightAnnotator {
     raw: Annotator;
-    annotateScreenshot(page: PageLike, opts: {
-        annotationsSvg: string;
-        fullPage?: boolean;
-    }): Promise<Uint8Array>;
+    annotateScreenshot(page: PageLike, opts: AnnotateScreenshotOptions): Promise<Uint8Array>;
 }
 /**
  * `test = base.extend({ annotator })` — drop-in replacement for
@@ -42,8 +59,8 @@ export declare const test: import('@playwright/test').TestType<import('@playwrig
  * — exported so callers who build their own Playwright fixture
  * (e.g. with extra fixtures composed on top) can still use the
  * one-call screenshot+annotate flow.
+ *
+ * Accepts either an `annotationsSvg: string` (raw SVG path) or an
+ * `annotations: BboxAnnotation[]` (DSL path added in 0.2.0).
  */
-export declare function annotateScreenshot(annotator: Annotator, page: PageLike, opts: {
-    annotationsSvg: string;
-    fullPage?: boolean;
-}): Promise<Uint8Array>;
+export declare function annotateScreenshot(annotator: Annotator, page: PageLike, opts: AnnotateScreenshotOptions): Promise<Uint8Array>;

package/dist/helpers.d.ts

@@ -1,43 +1 @@
-export interface BoundingBox {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export interface Point {
-    x: number;
-    y: number;
-}
-export interface RectOptions {
-    stroke?: string;
-    strokeWidth?: number;
-    fill?: string;
-}
-export interface ArrowOptions {
-    color?: string;
-    strokeWidth?: number;
-}
-export interface TextOptions {
-    color?: string;
-    fontSize?: number;
-    anchor?: "start" | "middle" | "end";
-}
-/**
- * Outline a bounding box (e.g. from `locator.boundingBox()`) with
- * an SVG `<rect>`. Defaults: red stroke, 2px width, no fill.
- */
-export declare function rectForBoundingBox(bbox: BoundingBox, opts?: RectOptions): string;
-/**
- * Draw an arrow from `from` to `to`. Inlines a unique-id `<marker>`
- * definition so the helper is self-contained — call it twice and
- * each call produces a distinct arrowhead marker (no collision
- * across uses on the same SVG).
- *
- * Defaults: red color, 2px stroke.
- */
-export declare function arrowBetween(from: Point, to: Point, opts?: ArrowOptions): string;
-/**
- * Drop a text label at a position. Defaults: red, 14px,
- * start-anchored.
- */
-export declare function textAt(at: Point, content: string, opts?: TextOptions): string;
+export { type ArrowOptions, arrowBetween, type BoundingBox, type RectOptions, rectForBoundingBox, type TextOptions, textAt, } from '@ingcreators/annot-annotator';

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export type { AnnotationStyle, BBox, BboxAnnotation, BboxArrowAnnotation, BboxCalloutAnnotation, BboxCircleAnnotation, BboxRectAnnotation, BboxRedactRegion, BboxTextAnnotation, Intent, Point, RawAnnotation, RedactStyle, } from '@ingcreators/annot-annotator';
+export { bboxAnnotationsToSvg } from '@ingcreators/annot-annotator';
 export { expect } from '@playwright/test';
-export { annotateScreenshot, type PageLike, type PlaywrightAnnotator, test, } from './fixture.js';
-export { type ArrowOptions, arrowBetween, type BoundingBox, type Point, type RectOptions, rectForBoundingBox, type TextOptions, textAt, } from './helpers.js';
+export { type AnnotateScreenshotOptions, annotateScreenshot, type PageLike, type PlaywrightAnnotator, test, } from './fixture.js';
+export { type ArrowOptions, arrowBetween, type BoundingBox, type RectOptions, rectForBoundingBox, type TextOptions, textAt, } from './helpers.js';

package/dist/index.js

@@ -1,53 +1,38 @@
-import { expect as e, test as t } from "@playwright/test";
-import { createAnnotator as n } from "@ingcreators/annot-annotator";
-//#region src/fixture.ts
-var r = t.extend({ annotator: async ({}, e) => {
-	let t = n();
-	await e({
-		raw: t,
-		annotateScreenshot: (e, n) => i(t, e, n)
-	});
-} });
-async function i(e, t, n) {
-	let r = await t.screenshot({ fullPage: n.fullPage }), { width: i, height: o } = a(r), s = `data:image/png;base64,${r.toString("base64")}`;
-	return e.toPng({
-		originalDataUrl: s,
-		annotationsSvg: n.annotationsSvg,
-		width: i,
-		height: o
-	});
-}
-function a(e) {
-	if (e.length < 24) throw Error("PNG too short to contain IHDR chunk");
-	let t = new DataView(e.buffer, e.byteOffset, e.byteLength);
-	return {
-		width: t.getUint32(16, !1),
-		height: t.getUint32(20, !1)
-	};
-}
-//#endregion
-//#region src/helpers.ts
-function o(e, t = {}) {
-	let n = t.stroke ?? "red", r = t.strokeWidth ?? 2, i = t.fill ?? "none";
-	return `<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" fill="${d(i)}" stroke="${d(n)}" stroke-width="${r}"/>`;
-}
-function s(e, t, n = {}) {
-	let r = n.color ?? "red", i = n.strokeWidth ?? 2, a = `annot-pw-arrow-${u()}`;
-	return `<defs><marker id="${a}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto" markerUnits="strokeWidth"><path d="M 0 0 L 10 5 L 0 10 z" fill="${d(r)}"/></marker></defs><line x1="${e.x}" y1="${e.y}" x2="${t.x}" y2="${t.y}" stroke="${d(r)}" stroke-width="${i}" marker-end="url(#${a})"/>`;
-}
-function c(e, t, n = {}) {
-	let r = n.color ?? "red", i = n.fontSize ?? 14, a = n.anchor ?? "start";
-	return `<text x="${e.x}" y="${e.y}" fill="${d(r)}" font-size="${i}" text-anchor="${a}">` + f(t) + "</text>";
-}
-var l = 0;
-function u() {
-	return l = l + 1 | 0, l;
-}
-function d(e) {
-	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
-}
-function f(e) {
-	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-//#endregion
-export { i as annotateScreenshot, s as arrowBetween, e as expect, o as rectForBoundingBox, r as test, c as textAt };
+import { createAnnotator as c, bboxAnnotationsToSvg as g } from "@ingcreators/annot-annotator";
+import { arrowBetween as m, bboxAnnotationsToSvg as S, rectForBoundingBox as v, textAt as P } from "@ingcreators/annot-annotator";
+import { test as f } from "@playwright/test";
+import { expect as A } from "@playwright/test";
+const u = f.extend({
+  // biome-ignore lint/correctness/noEmptyPattern: Playwright fixture signature requires the empty destructure.
+  annotator: async ({}, n) => {
+    const o = c();
+    await n({
+      raw: o,
+      annotateScreenshot: (t, e) => h(o, t, e)
+    });
+  }
+});
+async function h(n, o, t) {
+  const e = await o.screenshot({ fullPage: t.fullPage }), { width: a, height: r } = w(e), i = `data:image/png;base64,${e.toString("base64")}`, s = "annotations" in t && t.annotations !== void 0 ? g(t.annotations) : t.annotationsSvg ?? "";
+  return n.toPng({
+    originalDataUrl: i,
+    annotationsSvg: s,
+    width: a,
+    height: r
+  });
+}
+function w(n) {
+  if (n.length < 24)
+    throw new Error("PNG too short to contain IHDR chunk");
+  const o = new DataView(n.buffer, n.byteOffset, n.byteLength), t = o.getUint32(16, !1), e = o.getUint32(20, !1);
+  return { width: t, height: e };
+}
+export {
+  h as annotateScreenshot,
+  m as arrowBetween,
+  S as bboxAnnotationsToSvg,
+  A as expect,
+  v as rectForBoundingBox,
+  u as test,
+  P as textAt
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ingcreators/annot-playwright",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Playwright fixture for annotated screenshots — emit annotated PNGs from failing tests without leaving the test file. Pairs `test.extend({ annotator })` with the headless renderer from @ingcreators/annot-annotator.",
   "license": "Apache-2.0",
   "author": "ingcreators",
@@ -44,11 +44,11 @@
   "devDependencies": {
     "@playwright/test": "^1.50.0",
     "typescript": "^6.0.3",
-    "vite": "^8.0.13",
+    "vite": "^6.4.2",
     "vite-plugin-dts": "^5.0.0"
   },
   "dependencies": {
-    "@ingcreators/annot-annotator": "0.1.0"
+    "@ingcreators/annot-annotator": "0.2.0"
   },
   "peerDependencies": {
     "@playwright/test": "^1.40.0"