instruckt 0.4.27 → 0.4.28

package/README.md

@@ -10,13 +10,9 @@ Framework-agnostic JS core with adapters for Livewire, Vue, Svelte, and React.
 npm install instruckt
 ```
 
-Or load via CDN:
+## Quick Start
 
-```html
-<script src="https://cdn.jsdelivr.net/npm/instruckt/dist/instruckt.iife.js"></script>
-```
-
-## Quick Start: Vite Plugin
+### Vite Plugin
 
 The easiest way to use instruckt is with the Vite plugin. It handles client injection and provides a built-in dev API server — no backend required.
 
@@ -31,27 +27,19 @@ export default defineConfig({
 
 That's it for SPA apps (Vue, React, Svelte with Vite). The plugin auto-injects the client via `transformIndexHtml`.
 
-### SSR Frameworks (SvelteKit, Nuxt, etc.)
-
-For frameworks that don't use `index.html`, import the virtual module in your layout:
+### Laravel
 
-```js
-// SvelteKit: src/routes/+layout.svelte
-import 'virtual:instruckt'
+Use the **[instruckt-laravel](https://github.com/joshcirre/instruckt-laravel)** package — it provides the backend API, MCP tools, JSON file storage, and handles install/uninstall automatically:
 
-// Nuxt: plugins/instruckt.client.ts
-import 'virtual:instruckt'
+```bash
+composer require joshcirre/instruckt-laravel --dev
+php artisan instruckt:install
 ```
 
-The virtual module is SSR-safe — it only initializes in the browser.
-
-### Laravel
-
-The Vite plugin works alongside the Laravel package. Set `server: false` so Laravel handles the backend:
+The install command adds the Vite plugin to your `vite.config.js` with `server: false` (Laravel owns the backend), configures MCP for your AI agent, and adds the virtual import to your JS entry point.
 
 ```js
-// vite.config.ts
-import laravel from 'laravel-vite-plugin'
+// vite.config.js (added automatically by install command)
 import instruckt from 'instruckt/vite'
 
 export default defineConfig({
@@ -66,14 +54,25 @@ export default defineConfig({
 })
 ```
 
-Then in your app entry:
+### SSR Frameworks (SvelteKit, Nuxt, etc.)
+
+For frameworks that don't use `index.html`, import the virtual module in your layout:
 
 ```js
-// resources/js/app.js
+// SvelteKit: src/routes/+layout.svelte
+import 'virtual:instruckt'
+
+// Nuxt: plugins/instruckt.client.ts
 import 'virtual:instruckt'
 ```
 
-### Vite Plugin Options
+The virtual module is SSR-safe — it only initializes in the browser.
+
+### Astro
+
+See **[instruckt-astro](https://github.com/sgasser/instruckt-astro)** for a community-maintained Astro integration.
+
+## Vite Plugin Options
 
 ```js
 instruckt({
@@ -120,15 +119,6 @@ const instruckt = new Instruckt({
 })
 ```
 
-Or with the IIFE build:
-
-```html
-<script src="/path/to/instruckt.iife.js"></script>
-<script>
-  Instruckt.init({ endpoint: '/instruckt' })
-</script>
-```
-
 ### Framework-Specific Manual Setup
 
 instruckt is a browser-only library. In SSR frameworks without the Vite plugin, make sure it only loads on the client.
@@ -237,10 +227,6 @@ export default function RootLayout({ children }) {
 
 </details>
 
-### Astro
-
-See **[instruckt-astro](https://github.com/sgasser/instruckt-astro)** for a community-maintained Astro integration.
-
 ## How It Works
 
 1. A floating toolbar appears in your app
@@ -355,7 +341,7 @@ The Vite plugin includes a dev API server that saves annotations and screenshots
 
 ### Laravel
 
-**[instruckt-laravel](https://github.com/joshcirre/instruckt-laravel)** — Laravel package with JSON file storage, MCP tools, Blade component, and API routes.
+**[instruckt-laravel](https://github.com/joshcirre/instruckt-laravel)** — Laravel package with JSON file storage, MCP tools, Blade component, and API routes. Includes `artisan instruckt:install` which auto-configures the Vite plugin, MCP, and agent skills.
 
 ### Custom Backend
 

package/dist/instruckt.cjs.js

@@ -549,7 +549,7 @@ var ICONS = {
   logo: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>`
 };
 var Toolbar = class {
-  constructor(position, callbacks, keys) {
+  constructor(position, callbacks, keys, tools) {
     this.position = position;
     this.callbacks = callbacks;
     this.fabBadge = null;
@@ -560,9 +560,15 @@ var Toolbar = class {
     this.dragging = false;
     this.dragOffset = { x: 0, y: 0 };
     this.keys = keys != null ? keys : {};
+    this.tools = tools != null ? tools : {};
     this.build();
     this.setupDrag();
   }
+  /** Whether a built-in tool should be shown (default true if not specified). */
+  show(id) {
+    const v = this.tools[id];
+    return v !== false;
+  }
   build() {
     var _a2, _b, _c, _d, _e;
     this.host = document.createElement("div");
@@ -621,17 +627,18 @@ var Toolbar = class {
       d.className = "divider";
       return d;
     };
-    this.toolbarEl.append(
-      this.annotateBtn,
-      screenshotBtn,
-      mkDiv(),
-      this.freezeBtn,
-      mkDiv(),
-      this.copyBtn,
-      clearWrap,
-      mkDiv(),
-      minimizeBtn
-    );
+    const toAppend = [];
+    const add = (el) => {
+      if (toAppend.length > 0) toAppend.push(mkDiv());
+      toAppend.push(el);
+    };
+    if (this.show("annotate")) add(this.annotateBtn);
+    if (this.show("screenshot")) add(screenshotBtn);
+    if (this.show("freeze")) add(this.freezeBtn);
+    if (this.show("copy")) add(this.copyBtn);
+    if (this.show("clear_page") || this.show("clear_all")) add(clearWrap);
+    if (this.show("minimize")) add(minimizeBtn);
+    this.toolbarEl.append(...toAppend);
     this.shadow.appendChild(this.toolbarEl);
     this.fab = document.createElement("button");
     this.fab.className = "fab";
@@ -3305,7 +3312,7 @@ var _Instruckt = class _Instruckt {
       onClearPage: () => this.clearPage(),
       onClearAll: () => this.clearEverything(),
       onMinimize: (min) => this.onMinimize(min)
-    }, this.config.keys);
+    }, this.config.keys, this.config.tools);
     this.highlight = new ElementHighlight();
     this.popup = new AnnotationPopup();
     this.markers = new AnnotationMarkers((annotation) => this.onMarkerClick(annotation));
@@ -3344,7 +3351,7 @@ var _Instruckt = class _Instruckt {
     this.isAnnotating = false;
     this.isFrozen = false;
     document.querySelectorAll("[data-instruckt]").forEach((el) => el.remove());
-    this.toolbar = new Toolbar(this.config.position, this.makeToolbarCallbacks());
+    this.toolbar = new Toolbar(this.config.position, this.makeToolbarCallbacks(), this.config.keys, this.config.tools);
     if (wasMinimized) this.toolbar.minimize();
     this.markers = new AnnotationMarkers((annotation) => this.onMarkerClick(annotation));
     this.highlight = new ElementHighlight();