@insitue/sdk 0.1.0

package/dist/chunk-BYR4ZXVS.js

@@ -0,0 +1,300 @@
+import {
+  IssueTrackerSink,
+  R,
+  beginPick,
+  buildBundle,
+  d,
+  installRuntimeCollectors,
+  k,
+  y
+} from "./chunk-6SMY7D6U.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 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`
+        },
+        "Screenshot unavailable \u2014 sending the rest."
+      ) : 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`
+      },
+      [k("span", {}, "\u{1F512} Secrets scrubbed automatically"), k("span", {}, "InSitue")]
+    )
+  ]);
+}
+function mountCaptureOnly(opts = {}) {
+  installRuntimeCollectors();
+  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
+};