@insitue/sdk 0.1.14 → 0.3.1

package/dist/index.d.ts

@@ -1,49 +1,76 @@
 import { IssueDraft, CaptureBundle } from '@insitue/capture-core';
-export { InSitueOptions, mountInSitue } from './overlay.js';
+import { CaptureSink } from './capture-only.js';
 export { CaptureOnlyOptions, mountCaptureOnly } from './capture-only.js';
 
-interface InSitueProps {
-    /** Companion loopback port (default 5747). */
-    port?: number;
-}
-declare function InSitue({ port }: InSitueProps): null;
 interface InSitueCaptureProps {
     /**
      * Publishable project key (e.g. `pk_…`). When set, captures POST
      * to the InSitue cloud automatically. Origin-pinned + quota-gated
-     * server-side, so safe to ship in your production bundle.
+     * server-side, so safe to ship in your production bundle. Auto-
+     * selects `sink: { kind: "cloud" }` unless `sink` is set
+     * explicitly.
      */
     projectKey?: string;
-    /** Override the ingest endpoint (default = InSitue cloud). */
+    /** Override the ingest endpoint (cloud sink). */
     endpoint?: string;
     /**
-     * Take over delivery yourself. Wins over `projectKey`. Default
-     * (neither set): console + JSON download + `window.__insitu_capture__`.
+     * Take over delivery yourself. Wins over `projectKey` AND
+     * `sink`. Default (none set + no companion reachable): console +
+     * JSON download + `window.__insitu_capture__`.
      */
     onCapture?: (draft: IssueDraft, bundle: CaptureBundle) => void;
+    /**
+     * Explicit sink override. Most callers leave this undefined and
+     * rely on auto-detection (projectKey → cloud, otherwise →
+     * companion).
+     */
+    sink?: CaptureSink;
     /**
      * Default the user's "Always pixel-perfect screenshots" setting
-     * to `true` on mount — every capture uses the `getDisplayMedia`
-     * OS-compositor path, paying a one-time tab-share permission per
-     * session in exchange for screenshots that are pixel-accurate
-     * across any content (next/image, video, canvas, cross-origin).
+     * to `true` on mount — every capture uses `getDisplayMedia`,
+     * paying a one-time tab-share permission per session in exchange
+     * for screenshots that are pixel-accurate across any content
+     * (next/image, video, canvas, cross-origin).
      *
-     * Recommended for dev / dogfood, where capture quality matters
-     * more than the permission UX. Not the default — production
-     * end-users shouldn't see a permission dialog they didn't ask for.
+     * Recommended for dev / dogfood; not for production end-users.
      */
     defaultPixelPerfect?: boolean;
 }
 /**
- * `<InSitueCapture />` — the prod capture-only path. UNLIKE
- * `<InSitue />` it does NOT bail in a production build: capture-only
- * is exactly what prod runs (no companion to refuse). It never touches
- * fs/agent/WS; the same bundle just flows to the configured sink.
+ * The canonical InSitue widget. Use this for both prod (with
+ * `projectKey`) and dev (without). One mount, one component, the
+ * UI and theme adapt to the sink.
+ */
+declare function InSitueCapture({ projectKey, endpoint, onCapture, sink, defaultPixelPerfect, }: InSitueCaptureProps): null;
+interface InSitueProps {
+    /**
+     * Companion loopback port (default 5747). Only meaningful when
+     * not also passing `projectKey` — when `projectKey` is set, the
+     * widget ships to the cloud sink and this is ignored.
+     */
+    port?: number;
+}
+/**
+ * `<InSitue />` — backward-compat dev alias.
+ *
+ * Equivalent to `<InSitueCapture sink={{ kind: "companion", port }} />`.
+ * Kept so existing `<InSitue />` mounts (callers that imported the
+ * pre-0.3.0 chat overlay) keep compiling. The behaviour is the
+ * unified widget, NOT the removed chat overlay — the in-overlay
+ * thread, diff display, and SESSION history are gone in 0.3.0.
+ *
+ * For new code, prefer `<InSitueCapture />`.
+ */
+declare function InSitue({ port }: InSitueProps): null;
+
+/**
+ * `@insitue/sdk` — the InSitue capture widget for browser apps.
  *
- * The simplest path: set `projectKey` and the SDK POSTs captures to
- * the InSitue cloud automatically.
+ * One component, two sinks. `<InSitueCapture />` is the canonical
+ * mount; `<InSitue />` is a backward-compat dev alias (companion
+ * sink). The chat-style overlay that existed pre-0.3.0 has been
+ * removed in favour of the unified widget.
  */
-declare function InSitueCapture({ projectKey, endpoint, onCapture, defaultPixelPerfect, }: InSitueCaptureProps): null;
 
 /** Build-time-inlined version of `@insitue/sdk` (from package.json).
  *  Exposed so the host app can self-verify which SDK build is loaded
@@ -51,4 +78,4 @@ declare function InSitueCapture({ projectKey, endpoint, onCapture, defaultPixelP
  *  the capture widget footer so a screenshot proves the build. */
 declare const SDK_VERSION: string;
 
-export { InSitue, InSitueCapture, type InSitueCaptureProps, type InSitueProps, SDK_VERSION };
+export { CaptureSink, InSitue, InSitueCapture, type InSitueCaptureProps, type InSitueProps, SDK_VERSION };

package/dist/index.js

@@ -1,45 +1,47 @@
 import {
   mountCaptureOnly
-} from "./chunk-7EQRP6O4.js";
-import {
-  mountInSitue
-} from "./chunk-QTG3I7DC.js";
-import "./chunk-HECY6THB.js";
+} from "./chunk-BCKDBCPG.js";
 
 // src/InSitue.tsx
 import { useEffect } from "react";
-function InSitue({ port }) {
+function InSitueCapture({
+  projectKey,
+  endpoint,
+  onCapture,
+  sink,
+  defaultPixelPerfect
+}) {
   useEffect(() => {
-    const nodeEnv = typeof process !== "undefined" ? process.env?.NODE_ENV : void 0;
-    if (nodeEnv === "production") return;
     let active = true;
     let dispose;
-    void import("./overlay.js").then((m) => {
-      if (active) dispose = m.mountInSitue(port === void 0 ? {} : { port });
+    void import("./capture-only.js").then((m) => {
+      if (active) {
+        dispose = m.mountCaptureOnly({
+          ...projectKey ? { projectKey } : {},
+          ...endpoint ? { endpoint } : {},
+          ...onCapture ? { onCapture } : {},
+          ...sink ? { sink } : {},
+          ...defaultPixelPerfect === true ? { defaultPixelPerfect } : {}
+        });
+      }
     });
     return () => {
       active = false;
       dispose?.();
     };
-  }, [port]);
+  }, [projectKey, endpoint, onCapture, sink, defaultPixelPerfect]);
   return null;
 }
-function InSitueCapture({
-  projectKey,
-  endpoint,
-  onCapture,
-  defaultPixelPerfect
-}) {
+function InSitue({ port }) {
   useEffect(() => {
+    const nodeEnv = typeof process !== "undefined" ? process.env?.NODE_ENV : void 0;
+    if (nodeEnv === "production") return;
     let active = true;
     let dispose;
     void import("./capture-only.js").then((m) => {
       if (active) {
         dispose = m.mountCaptureOnly({
-          projectKey,
-          endpoint,
-          onCapture,
-          defaultPixelPerfect
+          sink: port === void 0 ? { kind: "companion" } : { kind: "companion", port }
         });
       }
     });
@@ -47,16 +49,15 @@ function InSitueCapture({
       active = false;
       dispose?.();
     };
-  }, [projectKey, endpoint, onCapture, defaultPixelPerfect]);
+  }, [port]);
   return null;
 }
 
 // src/index.ts
-var SDK_VERSION = "0.1.14";
+var SDK_VERSION = "0.3.1";
 export {
   InSitue,
   InSitueCapture,
   SDK_VERSION,
-  mountCaptureOnly,
-  mountInSitue
+  mountCaptureOnly
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insitue/sdk",
-  "version": "0.1.14",
+  "version": "0.3.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",
@@ -13,11 +13,6 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./overlay": {
-      "types": "./dist/overlay.d.ts",
-      "import": "./dist/overlay.js",
-      "default": "./dist/overlay.js"
-    },
     "./capture-only": {
       "types": "./dist/capture-only.d.ts",
       "import": "./dist/capture-only.js",
@@ -56,7 +51,7 @@
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
     "vitest": "^3.2.4",
-    "@insitue/capture-core": "0.0.0"
+    "@insitue/capture-core": "0.2.0"
   },
   "repository": {
     "type": "git",

package/dist/chunk-7EQRP6O4.js

@@ -1,400 +0,0 @@
-import {
-  IssueTrackerSink,
-  R,
-  beginPick,
-  buildBundle,
-  d,
-  installRuntimeCollectors,
-  k,
-  onDisplayMediaChange,
-  retryDisplayMedia,
-  setCaptureSettings,
-  stopDisplayMedia,
-  y
-} from "./chunk-HECY6THB.js";
-
-// src/capture-only.ts
-var DEFAULT_INGEST = "https://www.insitue.com/api/v1/capture";
-async function postCapture(endpoint, projectKey, draft) {
-  try {
-    await fetch(endpoint, {
-      method: "POST",
-      headers: {
-        "content-type": "application/json",
-        "x-insitue-key": projectKey
-      },
-      body: JSON.stringify({
-        bundle: draft.bundle,
-        note: draft.bundle.userNote ?? null,
-        projectKey
-        // belt + braces — header is the contract, body is the fallback
-      }),
-      credentials: "omit",
-      keepalive: true
-    });
-  } catch {
-  }
-}
-var C = {
-  ink: "#16161a",
-  sub: "#6b6c77",
-  faint: "#9a9aa4",
-  line: "#e9e9ee",
-  surface: "#ffffff",
-  surface2: "#f6f6f9",
-  accent: "linear-gradient(180deg,#6b63ff,#5751e6)",
-  accentRing: "rgba(91,91,240,.30)",
-  green: "#117a52",
-  sans: '-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif',
-  mono: 'ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace',
-  shadow: "0 12px 40px rgba(20,20,35,.16),0 2px 8px rgba(20,20,35,.08)"
-};
-function defaultDeliver(draft) {
-  globalThis.__insitu_capture__ = {
-    title: draft.title,
-    body: draft.body,
-    bundle: draft.bundle
-  };
-  console.info("[insitue] capture:", draft.title);
-  try {
-    const blob = new Blob([JSON.stringify(draft, null, 2)], {
-      type: "application/json"
-    });
-    const a = document.createElement("a");
-    a.href = URL.createObjectURL(blob);
-    a.download = `insitue-capture-${Date.now()}.json`;
-    a.click();
-    URL.revokeObjectURL(a.href);
-  } catch {
-  }
-}
-function CaptureOnlyApp(props) {
-  const [phase, setPhase] = d("idle");
-  const [bundle, setBundle] = d(null);
-  const [note, setNote] = d("");
-  const [tabCaptureActive, setTabCaptureActive] = d(false);
-  const [tabCaptureDenied, setTabCaptureDenied] = d(false);
-  y(() => {
-    return onDisplayMediaChange((active, reason) => {
-      setTabCaptureActive(active);
-      if (reason === "denied") setTabCaptureDenied(true);
-      if (reason === "granted") setTabCaptureDenied(false);
-    });
-  }, []);
-  const retryWithPixelPerfect = async () => {
-    if (!bundle?.target?.selector) {
-      await retryDisplayMedia();
-      return;
-    }
-    const granted = await retryDisplayMedia();
-    if (granted) {
-      setPhase("picking");
-      const sel = await beginPick("element").catch(() => null);
-      if (sel) {
-        setBundle(await buildBundle(sel));
-        setPhase("compose");
-      } else {
-        setPhase("compose");
-      }
-    }
-  };
-  const sink = new IssueTrackerSink(async (draft) => {
-    globalThis.__insitu_capture__ = {
-      title: draft.title,
-      body: draft.body,
-      bundle: draft.bundle
-    };
-    if (props.onCapture) {
-      props.onCapture(draft, draft.bundle);
-    } else if (props.projectKey) {
-      await postCapture(
-        props.endpoint ?? DEFAULT_INGEST,
-        props.projectKey,
-        draft
-      );
-    } else {
-      defaultDeliver(draft);
-    }
-  });
-  y(() => {
-    if (phase !== "sent") return;
-    const t2 = setTimeout(() => {
-      setPhase("idle");
-      setBundle(null);
-      setNote("");
-    }, 2400);
-    return () => clearTimeout(t2);
-  }, [phase]);
-  const startPick = async () => {
-    setPhase("picking");
-    try {
-      const sel = await beginPick("element");
-      if (!sel) {
-        setPhase("idle");
-        return;
-      }
-      setBundle(await buildBundle(sel));
-      setPhase("compose");
-    } catch {
-      setPhase("idle");
-    }
-  };
-  const send = async () => {
-    if (!bundle) return;
-    setPhase("sending");
-    const withNote = note.trim() ? { ...bundle, userNote: note.trim() } : bundle;
-    try {
-      await sink.submit(withNote);
-    } finally {
-      setPhase("sent");
-    }
-  };
-  const reset = () => {
-    setPhase("idle");
-    setBundle(null);
-    setNote("");
-  };
-  const dot = k("span", {
-    style: `width:9px;height:9px;border-radius:3px;background:${C.accent};box-shadow:0 1px 4px ${C.accentRing}`
-  });
-  if (phase === "idle" || phase === "picking") {
-    const picking = phase === "picking";
-    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 ${C.sans};color:${C.ink};background:${C.surface};border:1px solid ${C.line};border-radius:999px;box-shadow:${C.shadow};letter-spacing:-.01em`
-      },
-      picking ? [
-        k("span", {
-          style: `width:9px;height:9px;border-radius:50%;background:#5751e6;animation:ipulse 1.1s ${"ease-in-out"} infinite`
-        }),
-        k("span", { style: `color:${C.sub}` }, "Click the broken element"),
-        k("span", { style: `color:${C.faint}` }, "\xB7 Esc to cancel"),
-        k(
-          "style",
-          {},
-          "@keyframes ipulse{0%,100%{opacity:.35}50%{opacity:1}}"
-        )
-      ] : [dot, "Report a problem"]
-    );
-  }
-  const t = bundle?.target;
-  const targetLabel = t?.componentStack?.[0]?.name ?? t?.selector?.split(">").pop()?.trim() ?? "selection";
-  const card = (children) => k(
-    "div",
-    {
-      style: `position:fixed;bottom:20px;right:20px;z-index:2147483000;width:344px;font:14px/1.55 ${C.sans};color:${C.ink};background:${C.surface};border:1px solid ${C.line};border-radius:16px;box-shadow:${C.shadow};overflow:hidden`
-    },
-    children
-  );
-  if (phase === "sent") {
-    return card([
-      k(
-        "div",
-        { style: "padding:30px 22px;text-align:center" },
-        [
-          k(
-            "div",
-            {
-              style: `width:46px;height:46px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;background:${C.accent};box-shadow:0 6px 18px ${C.accentRing}`
-            },
-            "\u2713"
-          ),
-          k(
-            "div",
-            { style: "font-weight:680;font-size:15px;letter-spacing:-.01em" },
-            "Report sent"
-          ),
-          k(
-            "div",
-            { style: `color:${C.sub};margin-top:5px;font-size:13px` },
-            "The team has everything to reproduce and fix this \u2014 no follow-up needed."
-          )
-        ]
-      )
-    ]);
-  }
-  const sending = phase === "sending";
-  return card([
-    k(
-      "div",
-      {
-        style: `display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid ${C.line}`
-      },
-      [
-        k(
-          "div",
-          { style: "display:flex;align-items:center;gap:8px;font-weight:680;letter-spacing:-.01em" },
-          [dot, "Report a problem"]
-        ),
-        k(
-          "button",
-          {
-            onClick: reset,
-            style: `all:unset;cursor:pointer;color:${C.faint};font-size:16px;line-height:1;padding:2px 4px`
-          },
-          "\u2715"
-        )
-      ]
-    ),
-    k("div", { style: "padding:16px" }, [
-      k(
-        "div",
-        {
-          style: `display:flex;align-items:center;gap:8px;padding:9px 11px;background:${C.surface2};border:1px solid ${C.line};border-radius:10px;font:12px/1.3 ${C.mono};color:${C.sub};margin-bottom:12px`
-        },
-        [
-          k("span", { style: `color:#5751e6` }, "\u25CE"),
-          k(
-            "span",
-            {
-              style: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
-            },
-            `${targetLabel}${t?.source ? ` \xB7 ${t.source.file.split("/").pop()}` : ""}`
-          )
-        ]
-      ),
-      bundle?.screenshot ? k("img", {
-        src: bundle.screenshot.dataUrl,
-        style: `width:100%;max-height:120px;object-fit:cover;border:1px solid ${C.line};border-radius:10px;margin-bottom:12px`
-      }) : bundle?.screenshotUnavailable ? k(
-        "div",
-        {
-          style: `font-size:12px;color:${C.faint};background:${C.surface2};border:1px solid ${C.line};border-radius:10px;padding:10px;margin-bottom:12px;word-break:break-word`
-        },
-        // Surface the actual reason inline — helps diagnose
-        // when a capture lands empty without expecting it.
-        `Screenshot unavailable \u2014 ${bundle.screenshotUnavailable}`
-      ) : null,
-      // Nudge: the screenshot is structurally OK but some content
-      // couldn't be embedded (non-CORS img / video / canvas). Offer
-      // a one-tap upgrade to pixel-perfect mode + re-pick.
-      bundle?.screenshot?.qualityNote && !tabCaptureActive ? k(
-        "div",
-        {
-          style: `display:flex;align-items:center;gap:8px;padding:9px 11px;background:#fff7ed;border:1px solid #fbd9b1;color:#8a4b00;border-radius:10px;font-size:12px;margin-bottom:12px`
-        },
-        [
-          k(
-            "span",
-            { style: "flex:1" },
-            "Some content didn't capture cleanly. Enable tab capture for a pixel-perfect screenshot."
-          ),
-          k(
-            "button",
-            {
-              onClick: () => void retryWithPixelPerfect(),
-              style: `all:unset;cursor:pointer;color:#5751e6;font-weight:600;padding:2px 8px;border:1px solid #c5c2ff;border-radius:6px;background:#fff`
-            },
-            "Enable"
-          )
-        ]
-      ) : null,
-      // Active badge — tells the user why the browser's red "tab
-      // sharing" indicator is on + lets them stop it.
-      tabCaptureActive ? k(
-        "div",
-        {
-          style: `display:flex;align-items:center;gap:8px;padding:7px 11px;background:#ecfdf5;border:1px solid #b6e6cf;color:#117a52;border-radius:10px;font-size:11.5px;margin-bottom:12px`
-        },
-        [
-          k("span", {
-            style: "width:8px;height:8px;border-radius:50%;background:#117a52;box-shadow:0 0 6px #117a52"
-          }),
-          k(
-            "span",
-            { style: "flex:1" },
-            "Tab capture active \u2014 screenshots are pixel-perfect."
-          ),
-          k(
-            "button",
-            {
-              onClick: () => stopDisplayMedia("user"),
-              style: `all:unset;cursor:pointer;color:#117a52;font-weight:600;padding:2px 6px`
-            },
-            "Stop"
-          )
-        ]
-      ) : null,
-      k("textarea", {
-        value: note,
-        rows: 3,
-        placeholder: "What's wrong? (optional but helps)",
-        disabled: sending,
-        onInput: (e) => setNote(e.target.value),
-        style: `width:100%;box-sizing:border-box;font:14px/1.5 ${C.sans};color:${C.ink};background:${C.surface};border:1px solid #d8d8de;border-radius:10px;padding:10px 12px;resize:none;outline:none`
-      }),
-      k("div", { style: "display:flex;gap:8px;margin-top:12px" }, [
-        k(
-          "button",
-          {
-            onClick: sending ? void 0 : () => void send(),
-            disabled: sending,
-            style: `flex:1;all:unset;text-align:center;cursor:${sending ? "default" : "pointer"};padding:11px;font:680 13.5px/1 ${C.sans};color:#fff;background:${C.accent};border-radius:10px;box-shadow:0 2px 10px ${C.accentRing};opacity:${sending ? ".7" : "1"}`
-          },
-          sending ? "Sending\u2026" : "Send report"
-        ),
-        k(
-          "button",
-          {
-            onClick: () => void startPick(),
-            style: `all:unset;cursor:pointer;padding:11px 14px;font:600 13.5px/1 ${C.sans};color:${C.sub};background:${C.surface2};border:1px solid ${C.line};border-radius:10px`
-          },
-          "Re-pick"
-        )
-      ])
-    ]),
-    k(
-      "div",
-      {
-        style: `display:flex;justify-content:space-between;padding:9px 16px;border-top:1px solid ${C.line};color:${C.faint};font-size:11px`
-      },
-      [
-        // No "Secrets scrubbed" badge — the redaction is narrow
-        // (regex on attr-names + console.log args; see
-        // packages/sdk/src/runtime.ts safeArg, capture-core/dom.ts
-        // serializeNode). Visible password VALUES, URL query
-        // params, and any text rendered in the screenshot pixels
-        // are NOT scrubbed — claiming otherwise misleads reporters
-        // about what's safe to capture. If we ever build real
-        // form-value redaction the badge can come back.
-        k("span", {}, ""),
-        k(
-          "span",
-          { title: `@insitue/sdk@${"0.1.14"}` },
-          `InSitue \xB7 v${"0.1.14"}`
-        )
-      ]
-    )
-  ]);
-}
-function mountCaptureOnly(opts = {}) {
-  installRuntimeCollectors();
-  if (opts.defaultPixelPerfect === true) {
-    setCaptureSettings({ alwaysPixelPerfect: true });
-  }
-  const host = document.createElement("div");
-  host.id = "insitu-capture-root";
-  host.setAttribute("data-insitu", "");
-  document.body.appendChild(host);
-  const shadow = host.attachShadow({ mode: "open" });
-  const mount = document.createElement("div");
-  shadow.appendChild(mount);
-  R(
-    k(CaptureOnlyApp, {
-      projectKey: opts.projectKey,
-      endpoint: opts.endpoint,
-      onCapture: opts.onCapture
-    }),
-    mount
-  );
-  return () => {
-    R(null, mount);
-    host.remove();
-  };
-}
-
-export {
-  mountCaptureOnly
-};