dev-annotate 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 dev-annotate contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# dev-annotate
+
+Dev-only on-screen annotation tool. Scribble (pen / text / numbered pins)
+directly on the live page in any browser — including mobile — take an **OS
+screenshot**, and upload it so an AI agent (or you) can read it and fix the UI.
+
+> **Why OS screenshots?** The real pixels (horizontal table scroll, WebGL
+> backgrounds, `backdrop-filter`, …) can't be faithfully re-rendered by
+> html2canvas-style DOM rasterization, and mobile browsers can't use
+> `getDisplayMedia`. So the tool never re-composites: the human takes the OS
+> screenshot and uploads the real bytes.
+
+## Install
+
+```
+npm i -D dev-annotate
+```
+
+## Core (framework-agnostic)
+
+```ts
+import { initDevAnnotation } from 'dev-annotate'
+
+// call this ONLY in development (you decide how to gate it)
+if (import.meta.env?.DEV) {
+  const destroy = initDevAnnotation({
+    endpoint: '/api/dev/save-annotation', // where the upload is POSTed
+    // colors, sizes, shortcutKey, zIndexBase are optional
+  })
+  // call destroy() on HMR/unmount to avoid duplicate UI
+}
+```
+
+`initDevAnnotation(options?)` returns a `destroy()` function that removes all
+injected DOM and listeners.
+
+## Server (h3 / Nitro)
+
+```ts
+import { createSaveAnnotationHandler } from 'dev-annotate/server'
+export default createSaveAnnotationHandler({ dir: '.playwright-mcp/design-review' })
+```
+
+Or use the pure writer directly:
+
+```ts
+import { saveAnnotationBytes } from 'dev-annotate/server'
+const { path, bytes } = saveAnnotationBytes(buffer, { mime: 'image/png' })
+```
+
+## Nuxt
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['dev-annotate/nuxt'],
+  devAnnotate: { /* endpoint, colors, sizes, dir, ... */ },
+})
+```
+
+The module only activates in dev; it registers the client plugin and a POST
+handler at `endpoint` (default `/api/dev/save-annotation`).
+
+## CLI — show annotations to your AI
+
+```
+npx dev-annotate latest [-n N] [--json] [--dir D]   # newest path(s)
+npx dev-annotate list   [-n N] [--json] [--dir D]   # all, newest first
+npx dev-annotate watch  [--json] [--dir D]          # print on new file
+npx dev-annotate clean  [--keep N | --all] [--yes]  # tidy up
+```
+
+Drop `templates/agent-instructions.md` into your `CLAUDE.md` / `AGENTS.md` so
+your agent knows the read → fix → verify → clean loop.
+
+## Other frameworks (Vite / React / Next)
+
+The core is plain DOM with zero deps. Gate it to dev and call
+`initDevAnnotation()` once; for uploads, implement an endpoint that receives a
+multipart `file` and writes the bytes (mirror `saveAnnotationBytes`). Adapters
+for Vite/Next are not bundled yet — the two steps above are all you need.
+
+## License
+
+MIT

package/dist/cli.d.ts

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+interface Io {
+    cwd?: string;
+    log?: (s: string) => void;
+    error?: (s: string) => void;
+}
+declare function runCli(argv: string[], io?: Io): number;
+
+export { runCli };

package/dist/cli.js

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+
+// src/cli/index.ts
+import { resolve as resolve2 } from "path";
+import { realpathSync, unlinkSync, watch as fsWatch } from "fs";
+import { fileURLToPath } from "url";
+
+// src/shared/store.ts
+import { existsSync, readdirSync, statSync } from "fs";
+import { join } from "path";
+var ANNOTATED_RE = /^annotated-.*\.(png|jpe?g|webp)$/i;
+function listAnnotations(dir, limit) {
+  if (!existsSync(dir)) return [];
+  const files = readdirSync(dir).filter((name) => ANNOTATED_RE.test(name)).map((name) => {
+    const path = join(dir, name);
+    const st = statSync(path);
+    return { path, name, bytes: st.size, mtimeMs: st.mtimeMs };
+  }).sort((a, b) => b.mtimeMs - a.mtimeMs);
+  return typeof limit === "number" ? files.slice(0, limit) : files;
+}
+function latestAnnotation(dir) {
+  return listAnnotations(dir, 1)[0];
+}
+
+// src/server/save.ts
+import { mkdirSync, writeFileSync } from "fs";
+import { resolve } from "path";
+var DEFAULT_DIR = ".playwright-mcp/design-review";
+
+// src/cli/index.ts
+function parseFlags(args) {
+  const f = { json: false, all: false, yes: false };
+  for (let i = 0; i < args.length; i++) {
+    const a = args[i];
+    if (a === "--json") f.json = true;
+    else if (a === "--all") f.all = true;
+    else if (a === "--yes") f.yes = true;
+    else if (a === "-n") f.n = Number(args[++i] ?? "");
+    else if (a === "--keep") f.keep = Number(args[++i] ?? "");
+    else if (a === "--dir") f.dir = args[++i] ?? void 0;
+  }
+  return f;
+}
+var USAGE = `usage: dev-annotate <latest|list|watch|clean> [options]
+  latest [-n N] [--json] [--dir D]   newest annotation path(s)
+  list   [-n N] [--json] [--dir D]   all annotations, newest first
+  watch  [--json] [--dir D]          print path when a new annotation arrives
+  clean  [--keep N | --all] [--yes] [--dir D]   delete old/all annotations
+
+  --dir D  annotation directory (default: ${DEFAULT_DIR})`;
+function runCli(argv, io = {}) {
+  const log = io.log ?? ((s) => process.stdout.write(s + "\n"));
+  const error = io.error ?? ((s) => process.stderr.write(s + "\n"));
+  const cwd = io.cwd ?? process.cwd();
+  const [cmd, ...rest] = argv;
+  const flags = parseFlags(rest);
+  const dir = resolve2(cwd, flags.dir ?? DEFAULT_DIR);
+  const emit = (files) => {
+    if (flags.json) log(JSON.stringify(files.map((f) => ({ path: f.path, name: f.name, bytes: f.bytes, mtimeMs: f.mtimeMs })), null, 2));
+    else for (const f of files) log(f.path);
+  };
+  switch (cmd) {
+    case "latest": {
+      const files = listAnnotations(dir, flags.n ?? 1);
+      if (files.length === 0) {
+        error("no annotations found");
+        return 1;
+      }
+      emit(files);
+      return 0;
+    }
+    case "list": {
+      emit(listAnnotations(dir, flags.n));
+      return 0;
+    }
+    case "clean": {
+      const all = listAnnotations(dir);
+      const keep = flags.all ? 0 : flags.keep ?? 0;
+      const targets = all.slice(keep);
+      if (targets.length === 0) {
+        log("nothing to delete");
+        return 0;
+      }
+      if (!flags.yes) {
+        log(`would delete ${targets.length} file(s) (pass --yes to confirm):`);
+        for (const f of targets) log(f.path);
+        return 0;
+      }
+      for (const f of targets) unlinkSync(f.path);
+      log(`deleted ${targets.length} file(s)`);
+      return 0;
+    }
+    case "watch": {
+      log(`watching ${dir} \u2026 (Ctrl+C to stop)`);
+      const latest = latestAnnotation(dir);
+      let lastMtime = latest?.mtimeMs ?? 0;
+      fsWatch(dir, () => {
+        const f = latestAnnotation(dir);
+        if (f && f.mtimeMs > lastMtime) {
+          lastMtime = f.mtimeMs;
+          if (flags.json) log(JSON.stringify({ path: f.path, name: f.name, bytes: f.bytes, mtimeMs: f.mtimeMs }));
+          else log(f.path);
+        }
+      });
+      return 0;
+    }
+    default:
+      error(USAGE);
+      return 2;
+  }
+}
+var invokedPath = process.argv[1];
+if (invokedPath) {
+  try {
+    if (realpathSync(invokedPath) === fileURLToPath(import.meta.url)) {
+      process.exitCode = runCli(process.argv.slice(2));
+    }
+  } catch {
+  }
+}
+export {
+  runCli
+};

package/dist/core/client.d.ts

@@ -0,0 +1,5 @@
+import { D as DevAnnotationOptions } from '../types-BzKl2hyk.js';
+
+declare function initDevAnnotation(options?: DevAnnotationOptions): () => void;
+
+export { DevAnnotationOptions, initDevAnnotation };