@nuniapp/widget 0.1.2 → 0.1.4

package/README.md

@@ -18,13 +18,13 @@ Get a project ID by running: npx @nuniapp/cli@latest init (it prints the ID and
 Steps:
 1. Detect the framework and package manager.
 2. If the app uses React (Next.js, Vite, Remix, React Router, TanStack Start, etc.):
-   - Install @nuniapp/react.
+   - Install @nuniapp/react@latest.
    - Render <Nuni project="PROJECT_ID" /> once, globally, in the root layout or app entry (for Next.js App Router: app/layout.tsx, inside <body>). It is already a client component.
 3. Otherwise, if there is a bundler (Vue, Svelte, Astro, Angular, etc.):
-   - Install @nuniapp/widget.
+   - Install @nuniapp/widget@latest.
    - Call init({ project: "PROJECT_ID" }) once on the client, in the app entry or root layout. import { init } from "@nuniapp/widget".
 4. If there is no bundler (plain HTML, WordPress, Webflow): add this before </body> on every page:
-   <script src="https://cdn.jsdelivr.net/npm/@nuniapp/widget@0/dist/nuni.global.js" data-project="PROJECT_ID" defer></script>
+   <script src="https://cdn.jsdelivr.net/npm/@nuniapp/widget@latest/dist/nuni.global.js" data-project="PROJECT_ID" defer></script>
 5. Commit the project ID directly in the code. It is public, not a secret. Do not put it in an env var.
 6. Do not add Nuni to server-only code, and do not load it more than once.
 7. If the site sends a Content-Security-Policy, allow connect-src https://*.convex.cloud wss://*.convex.cloud https://*.convex.site (and script-src cdn.jsdelivr.net for the script tag).
@@ -38,8 +38,8 @@ Docs: https://nuni.praveenjuge.com/quickstart
 Or do it yourself:
 
 ```sh
-npx @nuniapp/cli init   # prints your project ID and the snippet for your framework
-npm install @nuniapp/widget
+npx @nuniapp/cli@latest init   # prints your project ID and the snippet for your framework
+npm install @nuniapp/widget@latest
 ```
 
 ```ts
@@ -52,7 +52,7 @@ Using React? Use [`@nuniapp/react`](https://www.npmjs.com/package/@nuniapp/react
 
 ```html
 <script
-  src="https://cdn.jsdelivr.net/npm/@nuniapp/widget@0/dist/nuni.global.js"
+  src="https://cdn.jsdelivr.net/npm/@nuniapp/widget@latest/dist/nuni.global.js"
   data-project="nuni_..."
   defer
 ></script>
@@ -60,11 +60,12 @@ Using React? Use [`@nuniapp/react`](https://www.npmjs.com/package/@nuniapp/react
 
 ## Options
 
-| Option                                 | Description                                                                                |
-| -------------------------------------- | ------------------------------------------------------------------------------------------ |
-| `project`                              | Your public project ID. Commit it; it is not a secret.                                     |
-| `getPageKey(url)`                      | Optional. Decide which URLs share comments. Defaults to the path, ignoring query and hash. |
-| `convexUrl`, `convexSiteUrl`, `appUrl` | Optional. For self-hosting or local development.                                           |
+| Option                                 | Description                                                                                                |
+| -------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `project`                              | Your public project ID. Commit it; it is not a secret.                                                     |
+| `getPageKey(url)`                      | Optional. Decide which URLs share comments. Defaults to the path, ignoring query and hash.                 |
+| `convexUrl`, `convexSiteUrl`, `appUrl` | Optional. For self-hosting or local development.                                                           |
+| `capture`                              | Optional. Owner-only page context per comment: `{ console, network, dom, screenshot }`, all on by default. |
 
 `init` returns `{ destroy() }`.
 

package/dist/index.d.ts

@@ -10,13 +10,49 @@ interface NuniOptions {
   appUrl?: string;
   /** Custom page key. Comments are matched by this; defaults to the normalized path. */
   getPageKey?: (url: URL) => string;
+  /**
+   * Extra context attached to each comment for the project owner and their
+   * coding agent. Everything is on by default; set a key to `false` to stop
+   * capturing it.
+   */
+  capture?: {
+    /** Recent console errors and warnings. */
+    console?: boolean;
+    /** Recent failed requests (method, origin + path, status). */
+    network?: boolean;
+    /** The element's markup (form values removed) and key styles. */
+    dom?: boolean;
+    /** An image of the element and its surroundings. */
+    screenshot?: boolean;
+  };
 }
 export declare const VERSION: string;
 //#endregion
-//#region src/index.d.ts
-export interface NuniInstance {
+//#region src/screenshot.d.ts
+/**
+ * Screenshots are loaded lazily (a separate chunk for npm users, a separate
+ * script for the CDN build), so the widget itself stays small.
+ */
+interface ScreenshotOptions {
+  /** Nuni's own host element, left out of the image. */
+  exclude: Element;
+  /** Outline color drawn around the commented element. */
+  accent: string;
+}
+type CaptureScreenshot = (el: Element, options: ScreenshotOptions) => Promise<Blob | null>;
+declare global {
+  interface Window {
+    /** Set by nuni-screenshot.global.js (the CDN build). */
+    __nuniScreenshot?: CaptureScreenshot;
+  }
+}
+//#endregion
+//#region src/mount.d.ts
+interface NuniInstance {
   destroy(): void;
 }
+//#endregion
+//#region src/index.d.ts
 /**
  * Mount Nuni on the page. Call once on the client. Calling it again with the
  * same project shares the mounted widget; it is removed when every handle is
@@ -25,4 +61,4 @@ export interface NuniInstance {
  */
 export declare function init(options: NuniOptions): NuniInstance;
 //#endregion
-export type { NuniOptions };
+export type { NuniInstance, NuniOptions };