@insitue/sdk 0.3.2 → 0.4.0

package/README.md

@@ -116,7 +116,7 @@ interface InSitueCaptureProps {
 
 Every pick the widget submits has a usable source location.
 The picker walks React fiber `_debugSource` first (exact), then
-the `data-insitu-source` attribute injected by
+the `data-insitue-source` attribute injected by
 [`@insitue/sdk/babel`](#babel-plugin) (exact), then the nearest
 owning component's source (approximate). If even that fails,
 the widget refuses to send and asks the user to pick a parent
@@ -130,18 +130,18 @@ Send.
 
 Optional — only needed when your bundler doesn't expose React
 fiber `_debugSource` (Vite, some Webpack setups). Adds a
-`data-insitu-source="file:line:col"` attribute to every
+`data-insitue-source="file:line:col"` attribute to every
 intrinsic JSX element so source resolution stays exact.
 
 ```js
 // vite.config.ts
-import insituBabel from "@insitue/sdk/babel";
+import insitueBabel from "@insitue/sdk/babel";
 
 export default {
   plugins: [
     react({
       babel: {
-        plugins: [[insituBabel, { root: __dirname }]],
+        plugins: [[insitueBabel, { root: __dirname }]],
       },
     }),
   ],

package/dist/babel.d.ts

@@ -3,11 +3,11 @@ interface BabelTypes {
     jsxIdentifier(name: string): unknown;
     stringLiteral(value: string): unknown;
 }
-declare function insituSourcePlugin(babel: {
+declare function insitueSourcePlugin(babel: {
     types: BabelTypes;
 }): {
     name: string;
     visitor: Record<string, unknown>;
 };
 
-export { insituSourcePlugin as default };
+export { insitueSourcePlugin as default };

package/dist/babel.js

@@ -1,9 +1,9 @@
 // src/babel.ts
 import { relative, sep } from "path";
-function insituSourcePlugin(babel) {
+function insitueSourcePlugin(babel) {
   const t = babel.types;
   return {
-    name: "insitu-source",
+    name: "insitue-source",
     visitor: {
       JSXOpeningElement(path, state) {
         const node = path.node;
@@ -11,7 +11,7 @@ function insituSourcePlugin(babel) {
         const c0 = node.name.name[0];
         if (c0 < "a" || c0 > "z") return;
         if (node.attributes.some(
-          (a) => a.type === "JSXAttribute" && a.name?.name === "data-insitu-source"
+          (a) => a.type === "JSXAttribute" && a.name?.name === "data-insitue-source"
         ))
           return;
         const loc = node.loc;
@@ -23,7 +23,7 @@ function insituSourcePlugin(babel) {
         const value = `${rel}:${loc.start.line}:${loc.start.column + 1}`;
         node.attributes.push(
           t.jsxAttribute(
-            t.jsxIdentifier("data-insitu-source"),
+            t.jsxIdentifier("data-insitue-source"),
             t.stringLiteral(value)
           )
         );
@@ -32,5 +32,5 @@ function insituSourcePlugin(babel) {
   };
 }
 export {
-  insituSourcePlugin as default
+  insitueSourcePlugin as default
 };

package/dist/capture-only.d.ts

@@ -22,7 +22,7 @@ interface CaptureOnlyOptions {
     /**
      * Take over delivery yourself. Wins over `projectKey` AND `sink`.
      * Default (neither set + no companion reachable): console + JSON
-     * download + `window.__insitu_capture__` (useful for prod
+     * download + `window.__insitue_capture__` (useful for prod
      * validation).
      */
     onCapture?: (draft: IssueDraft, bundle: CaptureBundle) => void;

package/dist/capture-only.js

@@ -1,6 +1,6 @@
 import {
   mountCaptureOnly
-} from "./chunk-YU5T67XL.js";
+} from "./chunk-S25J3BL6.js";
 export {
   mountCaptureOnly
 };

package/dist/{chunk-YU5T67XL.js → chunk-S25J3BL6.js}

@@ -399,7 +399,7 @@ function D2(n2, t3) {
 
 // ../capture-core/dist/index.js
 var SKIP_TAGS = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE"]);
-var ATTR_DENY = /^(on|data-insitu)/i;
+var ATTR_DENY = /^(on|data-insitue)/i;
 var SECRETISH = /(token|secret|key|password|authorization|bearer)/i;
 function serializeNode(el, depth = 3, maxChildren = 12) {
   const attrs = {};
@@ -535,7 +535,7 @@ function toLoc(workspaceCwdRelative) {
 function fromAttribute(el) {
   let cur = el;
   for (let i3 = 0; cur && i3 < 8; i3++, cur = cur.parentElement) {
-    const raw = cur.getAttribute("data-insitu-source");
+    const raw = cur.getAttribute("data-insitue-source");
     if (raw) {
       const m3 = /^(.*):(\d+):(\d+)$/.exec(raw);
       if (m3) return { file: m3[1], line: Number(m3[2]), column: Number(m3[3]) };
@@ -693,12 +693,12 @@ function runtimeSnapshot() {
 // src/picker.ts
 var ACCENT = "#ff6b00";
 function isOurs(el) {
-  return !!el?.closest?.("#insitu-root, [data-insitu-layer]");
+  return !!el?.closest?.("#insitue-root, [data-insitue-layer]");
 }
 function beginPick(mode = "element") {
   return new Promise((resolve) => {
     const layer = document.createElement("div");
-    layer.setAttribute("data-insitu-layer", "");
+    layer.setAttribute("data-insitue-layer", "");
     Object.assign(layer.style, {
       position: "fixed",
       inset: "0",
@@ -1596,8 +1596,8 @@ var DEFAULT_SETTINGS = {
   disableLayer2: false
 };
 function storageKey() {
-  if (typeof location === "undefined") return "insitu:capture-settings";
-  return `insitu:capture-settings:${location.host}`;
+  if (typeof location === "undefined") return "insitue:capture-settings";
+  return `insitue:capture-settings:${location.host}`;
 }
 var cached = null;
 function getCaptureSettings() {
@@ -1669,7 +1669,7 @@ async function renderViewportCrop(cropRect, pixelRatio) {
     cacheBust: true,
     backgroundColor,
     imagePlaceholder: IMAGE_PLACEHOLDER,
-    filter: (n2) => !(n2 instanceof Element && n2.closest?.("#insitu-root, [data-insitu-layer]"))
+    filter: (n2) => !(n2 instanceof Element && n2.closest?.("#insitue-root, [data-insitue-layer]"))
   });
   const sx = window.scrollX;
   const sy = window.scrollY;
@@ -1700,7 +1700,7 @@ async function drawAbsoluteImagesOnto(ctx, cropRect, pixelRatio, failedImages) {
   const imgs = Array.from(
     document.querySelectorAll("img")
   ).filter(
-    (img) => !img.closest?.("#insitu-root, [data-insitu-layer]")
+    (img) => !img.closest?.("#insitue-root, [data-insitue-layer]")
   );
   const PER_IMAGE_TIMEOUT_MS = 3e3;
   await Promise.allSettled(
@@ -1823,7 +1823,7 @@ function detectUnrenderedImages(cropCtx, cropRect, cropCanvas, pixelRatio, faile
   const imgs = Array.from(
     document.querySelectorAll("img")
   ).filter(
-    (img) => !img.closest?.("#insitu-root, [data-insitu-layer]")
+    (img) => !img.closest?.("#insitue-root, [data-insitue-layer]")
   );
   for (const img of imgs) {
     if (failedImages.has(img)) continue;
@@ -1891,7 +1891,7 @@ function assessCaptureQuality(cropRect, failedImages) {
   };
   const all = document.querySelectorAll("img, video, canvas");
   for (const el of all) {
-    if (el instanceof Element && el.closest?.("#insitu-root, [data-insitu-layer]")) {
+    if (el instanceof Element && el.closest?.("#insitue-root, [data-insitue-layer]")) {
       continue;
     }
     const r3 = el.getBoundingClientRect();
@@ -2002,11 +2002,11 @@ async function retryDisplayMedia() {
   return s3 != null;
 }
 function hideOverlayLayersBriefly() {
-  const id = "insitu-capture-hide";
+  const id = "insitue-capture-hide";
   const style = document.createElement("style");
   style.id = id;
   style.textContent = `
-    #insitu-root, [data-insitu-layer] { visibility: hidden !important; }
+    #insitue-root, [data-insitue-layer] { visibility: hidden !important; }
   `;
   document.head.appendChild(style);
   return () => {
@@ -2202,7 +2202,7 @@ async function buildBundle(sel) {
     // got set above (an unexpected fallthrough), surface that fact
     // so the widget never renders a blank where a result should be.
     // The structured diagnostic below tells future-me exactly which
-    // branch ran, surfaced as `__insitu_capture__.bundle` in dev.
+    // branch ran, surfaced as `__insitue_capture__.bundle` in dev.
     ...screenshotUnavailable ? { screenshotUnavailable } : !screenshot ? {
       screenshotUnavailable: el ? `screenshot path didn't set a result (el=${el.tagName.toLowerCase()}; rasterisable=${el instanceof HTMLElement || el instanceof SVGElement})` : "no element selected"
     } : {},
@@ -2240,7 +2240,7 @@ var CompanionClient = class {
     this.events.onState("connecting");
     let token;
     try {
-      const res = await fetch(`${this.base}/insitu/handshake`);
+      const res = await fetch(`${this.base}/insitue/handshake`);
       if (!res.ok) throw new Error(`handshake ${res.status}`);
       token = (await res.json()).token;
     } catch (e3) {
@@ -2448,7 +2448,7 @@ var DEV = {
   buttonInk: "#0f0f12"
 };
 function defaultDeliver(draft) {
-  globalThis.__insitu_capture__ = {
+  globalThis.__insitue_capture__ = {
     title: draft.title,
     body: draft.body,
     bundle: draft.bundle
@@ -2534,7 +2534,7 @@ function CaptureApp(props) {
     }
   };
   const sink = new IssueTrackerSink(async (draft) => {
-    globalThis.__insitu_capture__ = {
+    globalThis.__insitue_capture__ = {
       title: draft.title,
       body: draft.body,
       bundle: draft.bundle
@@ -2634,34 +2634,46 @@ function CaptureApp(props) {
   if (phase === "idle" || phase === "picking") {
     const picking = phase === "picking";
     const offline = isDev && companionState !== "connected";
+    if (isDev) {
+      const dotColor = offline ? "#9a9aa4" : CLOUD.accentSolid;
+      const innerShadow = offline ? "none" : `0 1px 4px ${CLOUD.accentRing}`;
+      return k(
+        "button",
+        {
+          onClick: picking ? void 0 : () => void startPick(),
+          style: `all:unset;position:fixed;bottom:20px;right:20px;z-index:2147483000;display:flex;align-items:center;justify-content:center;width:38px;height:38px;cursor:${picking ? "default" : "pointer"};background:${C3.surface};border:1px solid ${C3.line};border-radius:50%;box-shadow:${C3.shadow}`,
+          title: picking ? "Click an element \xB7 Esc to cancel" : offline ? "InSitue companion not running \u2014 start `claude` with /insitue:connect" : "Pick an element to talk to claude about"
+        },
+        [
+          k("span", {
+            style: `width:11px;height:11px;border-radius:3px;background:${dotColor};box-shadow:${innerShadow};${picking ? "animation:ipulse 1.1s ease-in-out infinite" : ""}`
+          }),
+          picking ? k(
+            "style",
+            {},
+            "@keyframes ipulse{0%,100%{opacity:.45}50%{opacity:1}}"
+          ) : null
+        ]
+      );
+    }
     return k(
       "button",
       {
         onClick: picking ? void 0 : () => void startPick(),
         style: `all:unset;position:fixed;bottom:20px;right:20px;z-index:2147483000;display:flex;align-items:center;gap:9px;cursor:${picking ? "default" : "pointer"};padding:11px 16px;font:600 13.5px/1 ${C3.sans};color:${C3.ink};background:${C3.surface};border:1px solid ${C3.line};border-radius:999px;box-shadow:${C3.shadow};letter-spacing:-.01em`,
-        title: isDev ? offline ? "InSitue companion not running \u2014 start `claude` with /insitue:connect" : "Pick an element to talk to claude about" : "Report a problem"
+        title: "Report a problem"
       },
       picking ? [
         k("span", {
           style: `width:9px;height:9px;border-radius:50%;background:${C3.accentSolid};animation:ipulse 1.1s ease-in-out infinite`
         }),
-        k("span", { style: `color:${C3.sub}` }, isDev ? "Click an element" : "Click the broken element"),
+        k("span", { style: `color:${C3.sub}` }, "Click the broken element"),
         k("span", { style: `color:${C3.faint}` }, "\xB7 Esc to cancel"),
         k(
           "style",
           {},
           "@keyframes ipulse{0%,100%{opacity:.35}50%{opacity:1}}"
         )
-      ] : isDev ? [
-        k("span", {
-          style: `width:9px;height:9px;border-radius:50%;background:${offline ? "#9a9aa4" : "#5fd190"};box-shadow:${offline ? "none" : "0 0 6px #5fd190"}`
-        }),
-        k("span", {}, "InSitue Dev"),
-        k(
-          "span",
-          { style: `color:${C3.faint};font-family:${C3.mono};font-size:11px` },
-          offline ? "offline" : "\u2192 claude"
-        )
       ] : [dot, "Report a problem"]
     );
   }
@@ -2905,8 +2917,8 @@ function CaptureApp(props) {
         k("span", {}, isDev ? "InSitue Dev \xB7 pick + describe \u2192 CLI" : ""),
         k(
           "span",
-          { title: `@insitue/sdk@${"0.3.2"}` },
-          `InSitue \xB7 v${"0.3.2"}`
+          { title: `@insitue/sdk@${"0.4.0"}` },
+          `InSitue \xB7 v${"0.4.0"}`
         )
       ]
     )
@@ -2919,8 +2931,8 @@ function mountCaptureOnly(opts = {}) {
   }
   const sink = resolveSink(opts);
   const host = document.createElement("div");
-  host.id = "insitu-capture-root";
-  host.setAttribute("data-insitu", "");
+  host.id = "insitue-capture-root";
+  host.setAttribute("data-insitue", "");
   document.body.appendChild(host);
   const shadow = host.attachShadow({ mode: "open" });
   const mount = document.createElement("div");

package/dist/index.d.ts

@@ -16,7 +16,7 @@ interface InSitueCaptureProps {
     /**
      * Take over delivery yourself. Wins over `projectKey` AND
      * `sink`. Default (none set + no companion reachable): console +
-     * JSON download + `window.__insitu_capture__`.
+     * JSON download + `window.__insitue_capture__`.
      */
     onCapture?: (draft: IssueDraft, bundle: CaptureBundle) => void;
     /**

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   mountCaptureOnly
-} from "./chunk-YU5T67XL.js";
+} from "./chunk-S25J3BL6.js";
 
 // src/InSitue.tsx
 import { useEffect } from "react";
@@ -54,7 +54,7 @@ function InSitue({ port }) {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.3.2";
+var SDK_VERSION = "0.4.0";
 export {
   InSitue,
   InSitueCapture,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insitue/sdk",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "InSitue capture SDK — drop one snippet into your deployed app; your users point at a bug, InSitue opens a verified pull request.",
   "license": "MIT",
   "type": "module",
@@ -51,7 +51,7 @@
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
     "vitest": "^3.2.4",
-    "@insitue/capture-core": "0.2.0"
+    "@insitue/capture-core": "0.3.0"
   },
   "repository": {
     "type": "git",