@insitue/sdk 0.3.3 → 0.4.1

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-4NBN3ZZC.js";
+} from "./chunk-CZVN4TEZ.js";
 export {
   mountCaptureOnly
 };

package/dist/{chunk-4NBN3ZZC.js → chunk-CZVN4TEZ.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
@@ -2635,20 +2635,28 @@ function CaptureApp(props) {
     const picking = phase === "picking";
     const offline = isDev && companionState !== "connected";
     if (isDev) {
-      const dotColor = offline ? "#9a9aa4" : CLOUD.accentSolid;
-      const ringColor = offline ? "rgba(154,154,164,.4)" : "rgba(87,81,230,.45)";
+      const containerBg = offline ? C3.surface : CLOUD.accentSolid;
+      const containerBorder = offline ? `1px solid ${C3.line}` : "1px solid transparent";
+      const containerShadow = offline ? C3.shadow : `0 0 0 4px rgba(91,91,240,.16),0 12px 30px rgba(60,55,200,.42)`;
+      const innerBg = offline ? "#9a9aa4" : "#ffffff";
+      const innerShadow = offline ? "none" : "0 1px 3px rgba(0,0,0,.20)";
       return k(
         "button",
         {
           onClick: picking ? void 0 : () => void startPick(),
-          style: `all:unset;position:fixed;bottom:20px;right:20px;z-index:2147483000;width:20px;height:20px;border-radius:5px;background:${dotColor};box-shadow:0 4px 14px ${ringColor};cursor:${picking ? "default" : "pointer"};${picking ? "animation:ipulse 1.1s ease-in-out infinite;" : ""}transition:transform .15s ease`,
+          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:${containerBg};border:${containerBorder};border-radius:50%;box-shadow:${containerShadow};transition:background .18s ease,box-shadow .18s ease`,
           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"
         },
-        picking ? k(
-          "style",
-          {},
-          "@keyframes ipulse{0%,100%{opacity:.45}50%{opacity:1}}"
-        ) : null
+        [
+          k("span", {
+            style: `width:11px;height:11px;border-radius:3px;background:${innerBg};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(
@@ -2912,8 +2920,8 @@ function CaptureApp(props) {
         k("span", {}, isDev ? "InSitue Dev \xB7 pick + describe \u2192 CLI" : ""),
         k(
           "span",
-          { title: `@insitue/sdk@${"0.3.3"}` },
-          `InSitue \xB7 v${"0.3.3"}`
+          { title: `@insitue/sdk@${"0.4.1"}` },
+          `InSitue \xB7 v${"0.4.1"}`
         )
       ]
     )
@@ -2926,8 +2934,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-4NBN3ZZC.js";
+} from "./chunk-CZVN4TEZ.js";
 
 // src/InSitue.tsx
 import { useEffect } from "react";
@@ -54,7 +54,7 @@ function InSitue({ port }) {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.3.3";
+var SDK_VERSION = "0.4.1";
 export {
   InSitue,
   InSitueCapture,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insitue/sdk",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "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",