@ytspar/sweetlink 1.12.1 → 1.13.0

package/claude-skills/screenshot/SKILL.md

@@ -132,6 +132,7 @@ These scenarios require multi-step browser state that Sweetlink cannot maintain
 | **Click then screenshot** (when click triggers navigation/animation) | Same statefulness issue — click and screenshot may not share the same page | `open` -> `click` -> `screenshot` |
 | **Multi-step interactions** (type + submit + wait for result) | Each command is stateless | `open` -> `type` -> `press Enter` -> `screenshot` |
 | **Custom viewport dimensions** (not `mobile`/`tablet` presets) | `--viewport` only supports named presets | `agent-browser open --viewport 1600x900` or use Sweetlink `--force-cdp` with preset |
+| **Verifying SVG content** (colors, icons, shapes) | html2canvas does not render SVG elements — they appear blank/missing. Fine for layout checks where SVG content doesn't matter, but wrong when the SVGs themselves are what you're verifying (e.g., icon colors, logo accuracy) | Use Sweetlink with `--force-cdp`, or `agent-browser open` -> `screenshot` |
 
 > **Self-updating rule:** When you encounter a NEW Sweetlink failure mode not listed above — i.e., you try Sweetlink, it fails or produces incorrect results for a reason that would apply generally (not a transient network/server issue) — you MUST append a new row to this table before continuing with the Agent-Browser fallback. This keeps the list exhaustive and prevents future sessions from repeating the same mistake.
 
@@ -341,6 +342,7 @@ pnpm sweetlink screenshot --selector ".fixed-component" --output .tmp/screenshot
 | DOM queries | Sweetlink (`query`) | |
 | Click then screenshot same page | **Agent-Browser** | Sweetlink can't guarantee state between commands |
 | Navigate to specific page | Sweetlink (`--url` flag) | |
+| Verifying SVG content (icons, colors) | Sweetlink (`--force-cdp`) or **Agent-Browser** | html2canvas can't render SVGs; only matters when SVG content is what you're checking |
 | Viewport testing (mobile/tablet) | Sweetlink (`--force-cdp --viewport`) | |
 | Custom viewport dimensions | **Agent-Browser** | Sweetlink only supports named presets |
 | Non-dev-server URL | Agent-Browser | |

package/dist/next.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Sweetlink Next.js Plugin
+ *
+ * Zero-config integration for Next.js projects.
+ * Wraps your Next.js config to automatically start the Sweetlink WebSocket server in dev mode.
+ *
+ * Usage:
+ * ```javascript
+ * // next.config.mjs
+ * import { withSweetlink } from '@ytspar/sweetlink/next';
+ *
+ * const nextConfig = { ... };
+ * export default withSweetlink(nextConfig);
+ * ```
+ *
+ * Port detection (in order of precedence):
+ * 1. process.argv: `--port 3002` or `-p 3002`
+ * 2. process.env.PORT
+ * 3. Default: 3000
+ */
+export interface WithSweetlinkOptions {
+    /**
+     * Override the app port detection. If not specified, auto-detected from
+     * process.argv (--port / -p) or process.env.PORT, defaulting to 3000.
+     */
+    port?: number;
+}
+/**
+ * Wrap a Next.js config to auto-start Sweetlink in development.
+ *
+ * Mirrors the Vite plugin (`@ytspar/sweetlink/vite`) pattern:
+ * - Detects the app port from CLI args
+ * - Starts the WebSocket server on `appPort + 6223`
+ * - Registers graceful shutdown handlers
+ * - No-ops in production
+ */
+export declare function withSweetlink<T>(nextConfig: T, options?: WithSweetlinkOptions): T;
+export default withSweetlink;
+//# sourceMappingURL=next.d.ts.map

package/dist/next.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/next.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAKH,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA+BD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,oBAAoB,GAAG,CAAC,CAwBjF;AAED,eAAe,aAAa,CAAC"}

package/dist/next.js

@@ -0,0 +1,84 @@
+/**
+ * Sweetlink Next.js Plugin
+ *
+ * Zero-config integration for Next.js projects.
+ * Wraps your Next.js config to automatically start the Sweetlink WebSocket server in dev mode.
+ *
+ * Usage:
+ * ```javascript
+ * // next.config.mjs
+ * import { withSweetlink } from '@ytspar/sweetlink/next';
+ *
+ * const nextConfig = { ... };
+ * export default withSweetlink(nextConfig);
+ * ```
+ *
+ * Port detection (in order of precedence):
+ * 1. process.argv: `--port 3002` or `-p 3002`
+ * 2. process.env.PORT
+ * 3. Default: 3000
+ */
+import { closeSweetlink, initSweetlink } from './server/index.js';
+import { WS_PORT_OFFSET } from './types.js';
+/**
+ * Detect the Next.js dev server port from CLI args or environment.
+ *
+ * Next.js `--port` flag does NOT set process.env.PORT, so we parse argv directly.
+ */
+function detectNextPort() {
+    const args = process.argv;
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        // --port 3002 or -p 3002
+        if ((arg === '--port' || arg === '-p') && args[i + 1]) {
+            const port = parseInt(args[i + 1], 10);
+            if (!isNaN(port))
+                return port;
+        }
+        // --port=3002
+        if (arg?.startsWith('--port=')) {
+            const port = parseInt(arg.split('=')[1], 10);
+            if (!isNaN(port))
+                return port;
+        }
+    }
+    if (process.env.PORT) {
+        const port = parseInt(process.env.PORT, 10);
+        if (!isNaN(port))
+            return port;
+    }
+    return 3000;
+}
+/**
+ * Wrap a Next.js config to auto-start Sweetlink in development.
+ *
+ * Mirrors the Vite plugin (`@ytspar/sweetlink/vite`) pattern:
+ * - Detects the app port from CLI args
+ * - Starts the WebSocket server on `appPort + 6223`
+ * - Registers graceful shutdown handlers
+ * - No-ops in production
+ */
+export function withSweetlink(nextConfig, options) {
+    if (process.env.NODE_ENV !== 'development')
+        return nextConfig;
+    const appPort = options?.port ?? detectNextPort();
+    const wsPort = appPort + WS_PORT_OFFSET;
+    initSweetlink({
+        port: wsPort,
+        appPort,
+        onReady: (actualPort) => {
+            if (actualPort !== wsPort) {
+                console.log(`[Sweetlink] Using port ${actualPort} (${wsPort} was in use)`);
+            }
+            console.log(`[Sweetlink] Ready for devbar connections (app port: ${appPort})`);
+        },
+    });
+    const handleShutdown = () => {
+        closeSweetlink();
+    };
+    process.on('SIGTERM', handleShutdown);
+    process.on('SIGINT', handleShutdown);
+    return nextConfig;
+}
+export default withSweetlink;
+//# sourceMappingURL=next.js.map

package/dist/next.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"next.js","sourceRoot":"","sources":["../src/next.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAU5C;;;;GAIG;AACH,SAAS,cAAc;IACrB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAC1B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QACpB,yBAAyB;QACzB,IAAI,CAAC,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YACtD,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAE,EAAE,EAAE,CAAC,CAAC;YACxC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;gBAAE,OAAO,IAAI,CAAC;QAChC,CAAC;QACD,cAAc;QACd,IAAI,GAAG,EAAE,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;YAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAE,EAAE,EAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;gBAAE,OAAO,IAAI,CAAC;QAChC,CAAC;IACH,CAAC;IAED,IAAI,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;IAChC,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAAI,UAAa,EAAE,OAA8B;IAC5E,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa;QAAE,OAAO,UAAU,CAAC;IAE9D,MAAM,OAAO,GAAG,OAAO,EAAE,IAAI,IAAI,cAAc,EAAE,CAAC;IAClD,MAAM,MAAM,GAAG,OAAO,GAAG,cAAc,CAAC;IAExC,aAAa,CAAC;QACZ,IAAI,EAAE,MAAM;QACZ,OAAO;QACP,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE;YACtB,IAAI,UAAU,KAAK,MAAM,EAAE,CAAC;gBAC1B,OAAO,CAAC,GAAG,CAAC,0BAA0B,UAAU,KAAK,MAAM,cAAc,CAAC,CAAC;YAC7E,CAAC;YACD,OAAO,CAAC,GAAG,CAAC,uDAAuD,OAAO,GAAG,CAAC,CAAC;QACjF,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,GAAS,EAAE;QAChC,cAAc,EAAE,CAAC;IACnB,CAAC,CAAC;IACF,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;IAErC,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ytspar/sweetlink",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "description": "Autonomous development toolkit for AI agents - screenshots, DOM queries, console logs, and JavaScript execution via WebSocket and Chrome DevTools Protocol",
   "keywords": [
     "autonomous-development",
@@ -80,6 +80,10 @@
     "./auto": {
       "types": "./dist/auto.d.ts",
       "import": "./dist/auto.js"
+    },
+    "./next": {
+      "types": "./dist/next.d.ts",
+      "import": "./dist/next.js"
     }
   },
   "bin": {
@@ -100,6 +104,14 @@
     "node": ">=20.0.0"
   },
   "private": false,
+  "scripts": {
+    "prepublishOnly": "node ../../scripts/check-release-notes.mjs && rm -rf dist && tsc",
+    "build": "rm -rf dist && tsc",
+    "test": "vitest run",
+    "dev": "node dist/cli/sweetlink-dev.js",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist claude-context"
+  },
   "peerDependencies": {
     "axe-core": "^4.0.0",
     "html2canvas-pro": "^2.0.0",
@@ -146,12 +158,5 @@
   "bugs": {
     "url": "https://github.com/ytspar/devbar/issues"
   },
-  "homepage": "https://github.com/ytspar/devbar/tree/main/packages/sweetlink#readme",
-  "scripts": {
-    "build": "rm -rf dist && tsc",
-    "test": "vitest run",
-    "dev": "node dist/cli/sweetlink-dev.js",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist claude-context"
-  }
-}
+  "homepage": "https://github.com/ytspar/devbar/tree/main/packages/sweetlink#readme"
+}