@ingcreators/annot-annotator 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @ingcreators/annot-annotator
 
+## 0.2.0
+
+### Minor Changes
+
+- 92378f9: Public DSL surface (since 0.2.0). The annotation DSL that was previously private to `@ingcreators/annot-mcp` now lives on the annotator package so any Annot consumer (test runtimes, AI agents, plugin authors) can use the same vocabulary.
+
+  New exports:
+  - Types: `BBox`, `Point`, `Intent`, `AnnotationStyle`, `BboxAnnotation` (`rect` / `circle` / `arrow` / `text` / `callout` / `raw`), `RawAnnotation`, `BboxRedactRegion`, `RedactStyle`.
+  - Converter: `bboxAnnotationsToSvg(annotations)` returns the SVG fragment string `createAnnotator(...).toPng({ annotationsSvg })` accepts.
+  - SVG primitives: `rectForBoundingBox`, `arrowBetween`, `textAt`, plus `BoundingBox` / `RectOptions` / `ArrowOptions` / `TextOptions`.
+  - JSON Schemas: `SHARED_DEFS`, `BBOX_ANNOTATION_SCHEMA`, `BBOX_REDACT_REGION_SCHEMA` (drop into MCP tool `inputSchema` `$defs` blocks).
+
+  The `intent` shorthand (`"info"` / `"warning"` / `"error"` / `"success"` / `"neutral"`) resolves to the Annot design system's semantic colour tokens automatically — no more thinking in raw hex values.
+
+  Marker id prefix in `arrowBetween` changed from `annot-pw-arrow-N` (previous helper in `@ingcreators/annot-playwright`) / `annot-mcp-arrow-N` (previous helper in `@ingcreators/annot-mcp`) to the package-neutral `annot-arrow-N`. Snapshot-on-SVG tests should expect this minor cosmetic delta.
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -1,18 +1,17 @@
 # `@ingcreators/annot-annotator`
 
+[![npm](https://img.shields.io/npm/v/@ingcreators/annot-annotator.svg)](https://www.npmjs.com/package/@ingcreators/annot-annotator)
+[![license](https://img.shields.io/npm/l/@ingcreators/annot-annotator.svg)](https://github.com/ingcreators/annot/blob/main/LICENSE)
+
 Headless annotator — produce annotated screenshots from Node without
 a browser. Reads an `ImageRecord`-shaped input (base image + saved
 annotations SVG) and emits a PNG or the merged SVG.
 
-> **Status:** Workspace package, not yet published to npm. The public
-> API is stable; the package becomes installable in Phase 3 of the
-> headless-annotator track (gated on Changesets).
->
-> Companion package: `@ingcreators/annot-playwright` (Phase 2 of the
-> same track) — a Playwright fixture composing this annotator into
-> idiomatic `test.extend({ annotator })` form.
+Companion package: [`@ingcreators/annot-playwright`](https://www.npmjs.com/package/@ingcreators/annot-playwright) —
+a Playwright fixture composing this annotator into idiomatic
+`test.extend({ annotator })` form.
 
-## Install (post-publish)
+## Install
 
 ```sh
 npm install @ingcreators/annot-annotator
@@ -20,6 +19,10 @@ npm install @ingcreators/annot-annotator
 pnpm add @ingcreators/annot-annotator
 ```
 
+Peer runtime requirements: Node 20+. The package depends on
+`@resvg/resvg-js` (native binding via `@napi-rs`) — npm install
+fetches the platform-matched prebuild automatically.
+
 ## Usage
 
 ```ts

package/dist/dsl/schema.d.ts

@@ -0,0 +1,239 @@
+/** Common subschemas to spread into a tool's `$defs` block. */
+export declare const SHARED_DEFS: {
+    BBox: {
+        type: string;
+        required: string[];
+        additionalProperties: boolean;
+        properties: {
+            x: {
+                type: string;
+            };
+            y: {
+                type: string;
+            };
+            width: {
+                type: string;
+                minimum: number;
+            };
+            height: {
+                type: string;
+                minimum: number;
+            };
+        };
+    };
+    Point: {
+        type: string;
+        required: string[];
+        additionalProperties: boolean;
+        properties: {
+            x: {
+                type: string;
+            };
+            y: {
+                type: string;
+            };
+        };
+    };
+    Intent: {
+        type: string;
+        enum: string[];
+    };
+    AnnotationStyle: {
+        type: string;
+        additionalProperties: boolean;
+        properties: {
+            intent: {
+                $ref: string;
+            };
+            stroke: {
+                type: string;
+            };
+            strokeWidth: {
+                type: string;
+                minimum: number;
+            };
+            fill: {
+                type: string;
+            };
+            color: {
+                type: string;
+            };
+        };
+    };
+};
+export declare const BBOX_ANNOTATION_SCHEMA: {
+    oneOf: ({
+        type: string;
+        required: string[];
+        additionalProperties: boolean;
+        properties: {
+            type: {
+                const: string;
+            };
+            bbox: {
+                $ref: string;
+            };
+            intent: {
+                $ref: string;
+            };
+            stroke: {
+                type: string;
+            };
+            strokeWidth: {
+                type: string;
+                minimum: number;
+            };
+            fill: {
+                type: string;
+            };
+            color: {
+                type: string;
+            };
+        };
+    } | {
+        type: string;
+        required: string[];
+        additionalProperties: boolean;
+        properties: {
+            type: {
+                const: string;
+            };
+            center: {
+                $ref: string;
+            };
+            radius: {
+                type: string;
+                minimum: number;
+            };
+            intent: {
+                $ref: string;
+            };
+            stroke: {
+                type: string;
+            };
+            strokeWidth: {
+                type: string;
+                minimum: number;
+            };
+            fill: {
+                type: string;
+            };
+            color: {
+                type: string;
+            };
+        };
+    } | {
+        type: string;
+        required: string[];
+        additionalProperties: boolean;
+        properties: {
+            type: {
+                const: string;
+            };
+            from: {
+                $ref: string;
+            };
+            to: {
+                $ref: string;
+            };
+            intent: {
+                $ref: string;
+            };
+            stroke: {
+                type: string;
+            };
+            strokeWidth: {
+                type: string;
+                minimum: number;
+            };
+            color: {
+                type: string;
+            };
+        };
+    } | {
+        type: string;
+        required: string[];
+        additionalProperties: boolean;
+        properties: {
+            type: {
+                const: string;
+            };
+            at: {
+                $ref: string;
+            };
+            content: {
+                type: string;
+            };
+            fontSize: {
+                type: string;
+                minimum: number;
+            };
+            anchor: {
+                type: string;
+                enum: string[];
+            };
+            intent: {
+                $ref: string;
+            };
+            color: {
+                type: string;
+            };
+        };
+    } | {
+        type: string;
+        required: string[];
+        additionalProperties: boolean;
+        properties: {
+            type: {
+                const: string;
+            };
+            at: {
+                $ref: string;
+            };
+            targetBbox: {
+                $ref: string;
+            };
+            content: {
+                type: string;
+            };
+            intent: {
+                $ref: string;
+            };
+            stroke: {
+                type: string;
+            };
+            color: {
+                type: string;
+            };
+        };
+    } | {
+        type: string;
+        required: string[];
+        additionalProperties: boolean;
+        properties: {
+            type: {
+                const: string;
+            };
+            svgFragment: {
+                type: string;
+            };
+        };
+    })[];
+};
+export declare const BBOX_REDACT_REGION_SCHEMA: {
+    type: string;
+    required: string[];
+    additionalProperties: boolean;
+    properties: {
+        bbox: {
+            $ref: string;
+        };
+        style: {
+            type: string;
+            enum: string[];
+        };
+        color: {
+            type: string;
+        };
+    };
+};

package/dist/dsl/svg-primitives.d.ts

@@ -0,0 +1,32 @@
+import { BBox, Point } from './types.js';
+/**
+ * Back-compat alias retained because the original
+ * `@ingcreators/annot-playwright` helpers exposed this name.
+ * Prefer importing `BBox` from `@ingcreators/annot-annotator`
+ * directly.
+ */
+export type BoundingBox = BBox;
+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 with an SVG `<rect>`. */
+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.
+ */
+export declare function arrowBetween(from: Point, to: Point, opts?: ArrowOptions): string;
+/** Drop a text label at a position. */
+export declare function textAt(at: Point, content: string, opts?: TextOptions): string;

package/dist/dsl/to-svg.d.ts

@@ -0,0 +1,11 @@
+import { BboxAnnotation } from './types.js';
+/**
+ * Convert a list of bbox-flavour annotations into a single SVG
+ * fragment string. The fragment is suitable as the
+ * `annotationsSvg` payload for `createAnnotator(...).toPng()` /
+ * `.toSvg()`.
+ *
+ * Emits bare fragments (no outer `<svg>` wrapper); the annotator's
+ * sanitiser wraps them at rasterise time.
+ */
+export declare function bboxAnnotationsToSvg(annotations: readonly BboxAnnotation[]): string;

package/dist/dsl/types.d.ts

@@ -0,0 +1,66 @@
+/** Axis-aligned bounding box. Coordinates are page pixels. */
+export interface BBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Point in page pixels. */
+export interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * Semantic colour shorthand. Resolves to the Annot design system's
+ * matching token (e.g. `intent: "error"` → `--annot-color-error`).
+ * Explicit `stroke` / `color` / `fill` on an annotation override
+ * the intent-derived defaults.
+ */
+export type Intent = "info" | "warning" | "error" | "success" | "neutral";
+/** Style overrides shared across most annotation shapes. */
+export interface AnnotationStyle {
+    intent?: Intent;
+    stroke?: string;
+    strokeWidth?: number;
+    fill?: string;
+    color?: string;
+}
+export type BboxRectAnnotation = AnnotationStyle & {
+    type: "rect";
+    bbox: BBox;
+};
+export type BboxCircleAnnotation = AnnotationStyle & {
+    type: "circle";
+    center: Point;
+    radius: number;
+};
+export type BboxArrowAnnotation = AnnotationStyle & {
+    type: "arrow";
+    from: Point;
+    to: Point;
+};
+export type BboxTextAnnotation = AnnotationStyle & {
+    type: "text";
+    at: Point;
+    content: string;
+    fontSize?: number;
+    anchor?: "start" | "middle" | "end";
+};
+export type BboxCalloutAnnotation = AnnotationStyle & {
+    type: "callout";
+    at: Point;
+    targetBbox: BBox;
+    content: string;
+};
+export interface RawAnnotation {
+    type: "raw";
+    svgFragment: string;
+}
+export type BboxAnnotation = BboxRectAnnotation | BboxCircleAnnotation | BboxArrowAnnotation | BboxTextAnnotation | BboxCalloutAnnotation | RawAnnotation;
+export type RedactStyle = "solid" | "mosaic" | "blur";
+export interface BboxRedactRegion {
+    bbox: BBox;
+    style?: RedactStyle;
+    /** CSS colour, applied only when `style` is `"solid"`. */
+    color?: string;
+}

package/dist/index.d.ts

@@ -1 +1,5 @@
 export { type Annotator, type AnnotatorInput, type AnnotatorOptions, createAnnotator, } from './annotator.js';
+export { BBOX_ANNOTATION_SCHEMA, BBOX_REDACT_REGION_SCHEMA, SHARED_DEFS, } from './dsl/schema.js';
+export { type ArrowOptions, arrowBetween, type BoundingBox, type RectOptions, rectForBoundingBox, type TextOptions, textAt, } from './dsl/svg-primitives.js';
+export { bboxAnnotationsToSvg } from './dsl/to-svg.js';
+export type { AnnotationStyle, BBox, BboxAnnotation, BboxArrowAnnotation, BboxCalloutAnnotation, BboxCircleAnnotation, BboxRectAnnotation, BboxRedactRegion, BboxTextAnnotation, Intent, Point, RawAnnotation, RedactStyle, } from './dsl/types.js';

package/dist/index.js

@@ -1,80 +1,317 @@
-import { Resvg as e } from "@resvg/resvg-js";
-import { DOMParser as t, XMLSerializer as n } from "@xmldom/xmldom";
-//#region ../core/src/editor/svg-format.ts
-var r = "data-annot-version";
-//#endregion
-//#region src/sanitise-svg.ts
-function i(e) {
-	if (!e || e.trim().length === 0) return "";
-	let r = new t(), i;
-	try {
-		i = r.parseFromString(e, "image/svg+xml");
-	} catch {
-		return "";
-	}
-	let o = i.documentElement;
-	if (!o) return "";
-	let s = new n(), c = "";
-	for (let e = 0; e < o.childNodes.length; e++) {
-		let t = o.childNodes.item(e);
-		if (!t || t.nodeType !== 1) continue;
-		let n = t, r = n.localName ?? n.tagName ?? "";
-		if (r === "defs") {
-			let e = a(n);
-			e !== null && (c += s.serializeToString(e));
-			continue;
-		}
-		if (!(r === "image" && !n.getAttribute("data-redact-style")) && n.getAttribute("id") !== "ui-overlay") {
-			if (n.getAttribute("id") === "annotations") {
-				for (let e = 0; e < n.childNodes.length; e++) {
-					let t = n.childNodes.item(e);
-					t && t.nodeType === 1 && (c += s.serializeToString(t));
-				}
-				continue;
-			}
-			c += s.serializeToString(n);
-		}
-	}
-	return c;
+import { Resvg as b } from "@resvg/resvg-js";
+import { DOMParser as w, XMLSerializer as B } from "@xmldom/xmldom";
+const S = "1", N = "data-annot-version";
+function T(e) {
+  if (!e || e.trim().length === 0)
+    return "";
+  const t = new w();
+  let r;
+  try {
+    r = t.parseFromString(e, "image/svg+xml");
+  } catch {
+    return "";
+  }
+  const n = r.documentElement;
+  if (!n) return "";
+  const o = new B();
+  let i = "";
+  for (let d = 0; d < n.childNodes.length; d++) {
+    const f = n.childNodes.item(d);
+    if (!f || f.nodeType !== 1) continue;
+    const s = f, p = s.localName ?? s.tagName ?? "";
+    if (p === "defs") {
+      const c = A(s);
+      c !== null && (i += o.serializeToString(c));
+      continue;
+    }
+    if (!(p === "image" && !s.getAttribute("data-redact-style")) && s.getAttribute("id") !== "ui-overlay") {
+      if (s.getAttribute("id") === "annotations") {
+        for (let c = 0; c < s.childNodes.length; c++) {
+          const u = s.childNodes.item(c);
+          u && u.nodeType === 1 && (i += o.serializeToString(u));
+        }
+        continue;
+      }
+      i += o.serializeToString(s);
+    }
+  }
+  return i;
 }
+function A(e) {
+  const t = e.cloneNode(!0);
+  for (let r = t.childNodes.length - 1; r >= 0; r--) {
+    const n = t.childNodes.item(r);
+    if (!n || n.nodeType !== 1) continue;
+    const o = n;
+    (o.localName ?? o.tagName ?? "") === "style" && o.hasAttribute("data-annot-fonts") && t.removeChild(n);
+  }
+  return t.childNodes.length === 0 ? null : t;
+}
+function H(e = {}) {
+  const t = {
+    loadSystemFonts: e.loadSystemFonts ?? !1,
+    ...e.fontFiles ? { fontFiles: e.fontFiles } : {},
+    ...e.fontDirs ? { fontDirs: e.fontDirs } : {},
+    ...e.defaultFontFamily ? { defaultFontFamily: e.defaultFontFamily } : {}
+  };
+  return {
+    toSvg(r) {
+      return m(r);
+    },
+    toPng(r) {
+      const n = m(r);
+      return new b(n, {
+        fitTo: { mode: "width", value: r.width },
+        background: "rgba(0, 0, 0, 0)",
+        font: t
+      }).render().asPng();
+    }
+  };
+}
+function m(e) {
+  const t = "http://www.w3.org/2000/svg", r = "http://www.w3.org/1999/xlink", n = T(e.annotationsSvg);
+  return `<svg xmlns="${t}" xmlns:xlink="${r}" ${N}="${S}" width="${e.width}" height="${e.height}" viewBox="0 0 ${e.width} ${e.height}"><image href="${e.originalDataUrl}" width="${e.width}" height="${e.height}"/>` + n + "</svg>";
+}
+const K = {
+  BBox: {
+    type: "object",
+    required: ["x", "y", "width", "height"],
+    additionalProperties: !1,
+    properties: {
+      x: { type: "number" },
+      y: { type: "number" },
+      width: { type: "number", minimum: 0 },
+      height: { type: "number", minimum: 0 }
+    }
+  },
+  Point: {
+    type: "object",
+    required: ["x", "y"],
+    additionalProperties: !1,
+    properties: {
+      x: { type: "number" },
+      y: { type: "number" }
+    }
+  },
+  Intent: {
+    type: "string",
+    enum: ["info", "warning", "error", "success", "neutral"]
+  },
+  AnnotationStyle: {
+    type: "object",
+    additionalProperties: !1,
+    properties: {
+      intent: { $ref: "#/$defs/Intent" },
+      stroke: { type: "string" },
+      strokeWidth: { type: "number", minimum: 0 },
+      fill: { type: "string" },
+      color: { type: "string" }
+    }
+  }
+}, F = {
+  type: "object",
+  required: ["type", "bbox"],
+  additionalProperties: !1,
+  properties: {
+    type: { const: "rect" },
+    bbox: { $ref: "#/$defs/BBox" },
+    intent: { $ref: "#/$defs/Intent" },
+    stroke: { type: "string" },
+    strokeWidth: { type: "number", minimum: 0 },
+    fill: { type: "string" },
+    color: { type: "string" }
+  }
+}, v = {
+  type: "object",
+  required: ["type", "center", "radius"],
+  additionalProperties: !1,
+  properties: {
+    type: { const: "circle" },
+    center: { $ref: "#/$defs/Point" },
+    radius: { type: "number", minimum: 0 },
+    intent: { $ref: "#/$defs/Intent" },
+    stroke: { type: "string" },
+    strokeWidth: { type: "number", minimum: 0 },
+    fill: { type: "string" },
+    color: { type: "string" }
+  }
+}, O = {
+  type: "object",
+  required: ["type", "from", "to"],
+  additionalProperties: !1,
+  properties: {
+    type: { const: "arrow" },
+    from: { $ref: "#/$defs/Point" },
+    to: { $ref: "#/$defs/Point" },
+    intent: { $ref: "#/$defs/Intent" },
+    stroke: { type: "string" },
+    strokeWidth: { type: "number", minimum: 0 },
+    color: { type: "string" }
+  }
+}, W = {
+  type: "object",
+  required: ["type", "at", "content"],
+  additionalProperties: !1,
+  properties: {
+    type: { const: "text" },
+    at: { $ref: "#/$defs/Point" },
+    content: { type: "string" },
+    fontSize: { type: "number", minimum: 0 },
+    anchor: { type: "string", enum: ["start", "middle", "end"] },
+    intent: { $ref: "#/$defs/Intent" },
+    color: { type: "string" }
+  }
+}, P = {
+  type: "object",
+  required: ["type", "at", "targetBbox", "content"],
+  additionalProperties: !1,
+  properties: {
+    type: { const: "callout" },
+    at: { $ref: "#/$defs/Point" },
+    targetBbox: { $ref: "#/$defs/BBox" },
+    content: { type: "string" },
+    intent: { $ref: "#/$defs/Intent" },
+    stroke: { type: "string" },
+    color: { type: "string" }
+  }
+}, I = {
+  type: "object",
+  required: ["type", "svgFragment"],
+  additionalProperties: !1,
+  properties: {
+    type: { const: "raw" },
+    svgFragment: { type: "string" }
+  }
+}, Y = {
+  oneOf: [F, v, O, W, P, I]
+}, J = {
+  type: "object",
+  required: ["bbox"],
+  additionalProperties: !1,
+  properties: {
+    bbox: { $ref: "#/$defs/BBox" },
+    style: { type: "string", enum: ["solid", "mosaic", "blur"] },
+    color: { type: "string" }
+  }
+};
+function $(e, t = {}) {
+  const r = t.stroke ?? "red", n = t.strokeWidth ?? 2, o = t.fill ?? "none";
+  return `<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" fill="${l(o)}" stroke="${l(r)}" stroke-width="${n}"/>`;
+}
+function k(e, t, r = {}) {
+  const n = r.color ?? "red", o = r.strokeWidth ?? 2, i = `annot-arrow-${_()}`;
+  return `<defs><marker id="${i}" 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="${l(n)}"/></marker></defs><line x1="${e.x}" y1="${e.y}" x2="${t.x}" y2="${t.y}" stroke="${l(n)}" stroke-width="${o}" marker-end="url(#${i})"/>`;
+}
+function x(e, t, r = {}) {
+  const n = r.color ?? "red", o = r.fontSize ?? 14, i = r.anchor ?? "start";
+  return `<text x="${e.x}" y="${e.y}" fill="${l(n)}" font-size="${o}" text-anchor="${i}">` + E(t) + "</text>";
+}
+let g = 0;
+function _() {
+  return g = g + 1 | 0, g;
+}
+function l(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function E(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+const R = {
+  info: { stroke: "#3b82f6", fill: "rgba(59, 130, 246, 0.12)", text: "#1e40af" },
+  warning: { stroke: "#f59e0b", fill: "rgba(245, 158, 11, 0.12)", text: "#92400e" },
+  error: { stroke: "#ef4444", fill: "rgba(239, 68, 68, 0.12)", text: "#991b1b" },
+  success: { stroke: "#10b981", fill: "rgba(16, 185, 129, 0.12)", text: "#065f46" },
+  neutral: { stroke: "#6b7280", fill: "rgba(107, 114, 128, 0.12)", text: "#374151" }
+}, z = "error";
 function a(e) {
-	let t = e.cloneNode(!0);
-	for (let e = t.childNodes.length - 1; e >= 0; e--) {
-		let n = t.childNodes.item(e);
-		if (!n || n.nodeType !== 1) continue;
-		let r = n;
-		(r.localName ?? r.tagName ?? "") === "style" && r.hasAttribute("data-annot-fonts") && t.removeChild(n);
-	}
-	return t.childNodes.length === 0 ? null : t;
-}
-//#endregion
-//#region src/annotator.ts
-function o(t = {}) {
-	let n = {
-		loadSystemFonts: t.loadSystemFonts ?? !1,
-		...t.fontFiles ? { fontFiles: t.fontFiles } : {},
-		...t.fontDirs ? { fontDirs: t.fontDirs } : {},
-		...t.defaultFontFamily ? { defaultFontFamily: t.defaultFontFamily } : {}
-	};
-	return {
-		toSvg(e) {
-			return s(e);
-		},
-		toPng(t) {
-			return new e(s(t), {
-				fitTo: {
-					mode: "width",
-					value: t.width
-				},
-				background: "rgba(0, 0, 0, 0)",
-				font: n
-			}).render().asPng();
-		}
-	};
-}
-function s(e) {
-	let t = i(e.annotationsSvg);
-	return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ${r}="1" width="${e.width}" height="${e.height}" viewBox="0 0 ${e.width} ${e.height}"><image href="${e.originalDataUrl}" width="${e.width}" height="${e.height}"/>` + t + "</svg>";
-}
-//#endregion
-export { o as createAnnotator };
+  const t = e.intent ?? z, r = R[t];
+  return {
+    stroke: e.stroke ?? r.stroke,
+    fill: e.fill ?? "none",
+    text: e.color ?? r.text
+  };
+}
+function Q(e) {
+  return e.map(j).join("");
+}
+function j(e) {
+  switch (e.type) {
+    case "rect":
+      return q(e);
+    case "circle":
+      return C(e);
+    case "arrow":
+      return X(e);
+    case "text":
+      return D(e);
+    case "callout":
+      return L(e);
+    case "raw":
+      return M(e);
+  }
+}
+function q(e) {
+  const t = a(e);
+  return $(e.bbox, {
+    stroke: t.stroke,
+    strokeWidth: e.strokeWidth ?? 2,
+    fill: t.fill
+  });
+}
+function C(e) {
+  const t = a(e), r = e.strokeWidth ?? 2;
+  return `<circle cx="${e.center.x}" cy="${e.center.y}" r="${e.radius}" fill="${y(t.fill)}" stroke="${y(t.stroke)}" stroke-width="${r}"/>`;
+}
+function X(e) {
+  const t = a(e);
+  return k(e.from, e.to, {
+    color: t.stroke,
+    strokeWidth: e.strokeWidth ?? 2
+  });
+}
+function D(e) {
+  const t = a(e);
+  return x(e.at, e.content, {
+    color: t.text,
+    fontSize: e.fontSize ?? 14,
+    anchor: e.anchor ?? "start"
+  });
+}
+function L(e) {
+  const t = a(e), r = e.targetBbox, n = U(r, e.at);
+  return $(r, {
+    stroke: t.stroke,
+    strokeWidth: e.strokeWidth ?? 2,
+    fill: t.fill
+  }) + k(e.at, n, {
+    color: t.stroke,
+    strokeWidth: 2
+  }) + x(e.at, e.content, {
+    color: t.text,
+    fontSize: 14,
+    anchor: "start"
+  });
+}
+function M(e) {
+  return e.svgFragment;
+}
+function U(e, t) {
+  const r = h(t.x, e.x, e.x + e.width), n = h(t.y, e.y, e.y + e.height);
+  return { x: r, y: n };
+}
+function h(e, t, r) {
+  return Math.min(Math.max(e, t), r);
+}
+function y(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+export {
+  Y as BBOX_ANNOTATION_SCHEMA,
+  J as BBOX_REDACT_REGION_SCHEMA,
+  K as SHARED_DEFS,
+  k as arrowBetween,
+  Q as bboxAnnotationsToSvg,
+  H as createAnnotator,
+  $ as rectForBoundingBox,
+  x as textAt
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ingcreators/annot-annotator",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Headless annotator — render annotated screenshots from Node without a browser. Built on @resvg/resvg-js. Pairs with @ingcreators/annot-playwright for fail-on-test annotated reports.",
   "license": "Apache-2.0",
   "author": "ingcreators",
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "typescript": "^6.0.3",
-    "vite": "^8.0.13",
+    "vite": "^6.4.2",
     "vite-plugin-dts": "^5.0.0",
     "@ingcreators/annot-core": "0.1.0"
   },