@insitue/sdk 0.4.3 → 0.4.5

package/dist/capture-only.js

@@ -1,6 +1,6 @@
 import {
   mountCaptureOnly
-} from "./chunk-3XYBNSL6.js";
+} from "./chunk-SI2PTZTD.js";
 export {
   mountCaptureOnly
 };

package/dist/{chunk-3XYBNSL6.js → chunk-SI2PTZTD.js}

@@ -2106,14 +2106,30 @@ async function buildBundle(sel) {
   let screenshot;
   let screenshotUnavailable;
   if (el instanceof HTMLElement || el instanceof SVGElement) {
+    const pickedRect = el.getBoundingClientRect();
     const context = findContextAncestor(el);
-    const cr = context.getBoundingClientRect();
-    const cropRect = new DOMRect(
-      Math.max(0, cr.x),
-      Math.max(0, cr.y),
-      Math.min(window.innerWidth, cr.right) - Math.max(0, cr.x),
-      Math.min(window.innerHeight, cr.bottom) - Math.max(0, cr.y)
+    const ar = context.getBoundingClientRect();
+    const MIN_W = 420;
+    const MIN_H = 140;
+    const cropW = Math.min(
+      window.innerWidth,
+      Math.max(MIN_W, ar.width, pickedRect.width)
     );
+    const cropH = Math.min(
+      window.innerHeight,
+      Math.max(MIN_H, ar.height, pickedRect.height)
+    );
+    const pickedCx = pickedRect.x + pickedRect.width / 2;
+    const pickedCy = pickedRect.y + pickedRect.height / 2;
+    const cropX = Math.max(
+      0,
+      Math.min(window.innerWidth - cropW, pickedCx - cropW / 2)
+    );
+    const cropY = Math.max(
+      0,
+      Math.min(window.innerHeight - cropH, pickedCy - cropH / 2)
+    );
+    const cropRect = new DOMRect(cropX, cropY, cropW, cropH);
     const orig = {
       outline: el.style.outline,
       outlineOffset: el.style.outlineOffset
@@ -2466,6 +2482,106 @@ function defaultDeliver(draft) {
   } catch {
   }
 }
+function offlineHelpCard(reason, onClose) {
+  const ink = "#ececef";
+  const sub = "#a0a0aa";
+  const faint = "#6b6b75";
+  const line = "#26262d";
+  const surface = "#13131a";
+  const accent = "#5751e6";
+  const mono = 'ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace';
+  const sans = '-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif';
+  const title = reason === "companion" ? "Open claude to activate InSitue" : "Attach claude to start picking";
+  const lead = reason === "companion" ? "The local companion isn't reachable yet. Open a terminal in this project and start claude." : "The companion is running, but no claude session is listening. Run the slash command below to attach.";
+  const step1 = reason === "companion" ? "In your project directory, run:" : "In your existing claude session, run:";
+  const cmd1 = reason === "companion" ? "claude" : "/insitue:connect";
+  const step2 = reason === "companion" ? "Then inside claude, run:" : null;
+  const cmd2 = reason === "companion" ? "/insitue:connect" : null;
+  const code = (s3) => k(
+    "code",
+    {
+      style: `display:inline-block;font:600 12.5px/1.4 ${mono};color:${ink};background:#0c0c11;border:1px solid ${line};padding:6px 10px;border-radius:6px`
+    },
+    s3
+  );
+  return k(
+    "div",
+    {
+      style: `width:300px;font:13px/1.5 ${sans};color:${ink};background:${surface};border:1px solid ${line};border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.35);overflow:hidden`
+    },
+    [
+      k(
+        "div",
+        {
+          style: `display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px`
+        },
+        [
+          k(
+            "div",
+            { style: "display:flex;align-items:center;gap:9px" },
+            [
+              k("span", {
+                style: `width:9px;height:9px;border-radius:3px;background:${accent};box-shadow:0 1px 4px rgba(91,91,240,.4)`
+              }),
+              k(
+                "span",
+                {
+                  style: `font-weight:680;font-size:13.5px;letter-spacing:-.01em;color:${ink}`
+                },
+                title
+              )
+            ]
+          ),
+          k(
+            "button",
+            {
+              onClick: onClose,
+              style: `all:unset;cursor:pointer;color:${faint};font-size:18px;line-height:1;padding:2px 6px;border-radius:6px`,
+              title: "Dismiss"
+            },
+            "\xD7"
+          )
+        ]
+      ),
+      k(
+        "div",
+        { style: `padding:0 16px 14px;color:${sub}` },
+        [
+          k("p", { style: "margin:0 0 12px" }, lead),
+          k(
+            "div",
+            { style: "display:flex;flex-direction:column;gap:8px" },
+            [
+              k(
+                "div",
+                {
+                  style: `font-size:11.5px;color:${faint};letter-spacing:.04em;text-transform:uppercase;font-weight:600`
+                },
+                step1
+              ),
+              code(cmd1),
+              step2 ? k(
+                "div",
+                {
+                  style: `margin-top:6px;font-size:11.5px;color:${faint};letter-spacing:.04em;text-transform:uppercase;font-weight:600`
+                },
+                step2
+              ) : null,
+              cmd2 ? code(cmd2) : null
+            ]
+          ),
+          k(
+            "p",
+            {
+              style: `margin:14px 0 0;font-size:12px;color:${faint}`
+            },
+            "Don't have the plugin? Run /plugin marketplace add InSitue/insitue in claude, then /plugin install insitue."
+          )
+        ]
+      )
+    ]
+  );
+}
 function CaptureApp(props) {
   const isDev = props.sink.kind === "companion";
   const C3 = isDev ? DEV : CLOUD;
@@ -2478,6 +2594,8 @@ function CaptureApp(props) {
     isDev ? "connecting" : "idle"
   );
   const [companionDetail, setCompanionDetail] = d2("");
+  const [subscriberCount, setSubscriberCount] = d2(0);
+  const [showOfflineHelp, setShowOfflineHelp] = d2(false);
   const noteRef = A2(null);
   const companionRef = A2(null);
   y2(() => {
@@ -2491,12 +2609,14 @@ function CaptureApp(props) {
         onState: (s3, detail) => {
           setCompanionState(s3);
           if (detail) setCompanionDetail(detail);
+          if (s3 !== "connected") setSubscriberCount(0);
           if (s3 === "error" || s3 === "idle") {
             if (!cancelled) {
               reconnectTimer = setTimeout(connect, 2500);
             }
           }
-        }
+        },
+        onSubscribersAttached: (count) => setSubscriberCount(count)
       });
       companionRef.current = c3;
       void c3.connect();
@@ -2633,29 +2753,44 @@ function CaptureApp(props) {
   };
   if (phase === "idle" || phase === "picking") {
     const picking = phase === "picking";
-    const offline = isDev && companionState !== "connected";
+    const active = isDev && companionState === "connected" && subscriberCount > 0;
+    const muted = isDev && !active;
     if (isDev) {
-      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)";
+      const containerBg = muted ? C3.surface : CLOUD.accentSolid;
+      const containerBorder = muted ? `1px solid ${C3.line}` : "1px solid transparent";
+      const containerShadow = muted ? C3.shadow : `0 0 0 4px rgba(91,91,240,.16),0 12px 30px rgba(60,55,200,.42)`;
+      const innerBg = muted ? "#9a9aa4" : "#ffffff";
+      const innerShadow = muted ? "none" : "0 1px 3px rgba(0,0,0,.20)";
+      const onClickLauncher = picking ? void 0 : muted ? () => setShowOfflineHelp((v3) => !v3) : () => void startPick();
+      const tooltip = picking ? "Click an element \xB7 Esc to cancel" : muted ? "InSitue is muted \u2014 click for setup" : "Pick an element to talk to claude about";
       return k(
-        "button",
+        "div",
         {
-          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:${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"
+          style: "position:fixed;bottom:20px;right:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:12px"
         },
         [
-          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
+          showOfflineHelp && muted ? offlineHelpCard(
+            companionState === "connected" ? "subscriber" : "companion",
+            () => setShowOfflineHelp(false)
+          ) : null,
+          k(
+            "button",
+            {
+              onClick: onClickLauncher,
+              style: `all:unset;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: tooltip
+            },
+            [
+              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
+            ]
+          )
         ]
       );
     }
@@ -2920,8 +3055,8 @@ function CaptureApp(props) {
         k("span", {}, isDev ? "InSitue Dev \xB7 pick + describe \u2192 CLI" : ""),
         k(
           "span",
-          { title: `@insitue/sdk@${"0.4.3"}` },
-          `InSitue \xB7 v${"0.4.3"}`
+          { title: `@insitue/sdk@${"0.4.5"}` },
+          `InSitue \xB7 v${"0.4.5"}`
         )
       ]
     )

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   mountCaptureOnly
-} from "./chunk-3XYBNSL6.js";
+} from "./chunk-SI2PTZTD.js";
 
 // src/InSitue.tsx
 import { useEffect } from "react";
@@ -54,7 +54,7 @@ function InSitue({ port }) {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.4.3";
+var SDK_VERSION = "0.4.5";
 export {
   InSitue,
   InSitueCapture,

package/package.json

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