@merittdev/horus-lens 0.0.3 → 0.1.1

package/README.md

@@ -54,51 +54,14 @@ Lens('app', { release: 'v2.14.3', featureFlags: { newCheckout: true } });
 Lens('open'); // open the report panel programmatically
 ```
 
-### Dashboard (your own admin, no hosted dashboard)
+### Reviewing reports
 
-One component, one config. On an access-controlled page (your admin auth is the
-gate), read the credentials server-side and hand them to the component:
-
-```tsx
-// page.tsx — server component, env stays on the server
-import LensPageClient from './LensPageClient';
-
-export default function Page() {
-  return <LensPageClient config={{ projects: JSON.parse(process.env.LENS_PROJECTS ?? '[]') }} />;
-}
-
-// LensPageClient.tsx — client component
-'use client'
-import { LensProvider, LensAdmin, type LensAdminConfig } from '@merittdev/horus-lens/dashboard';
-import '@merittdev/horus-lens/dist/dashboard.css';
-
-export default function LensPageClient({ config }: { config: LensAdminConfig }) {
-  return (
-    <LensProvider config={config}>
-      <LensAdmin />
-    </LensProvider>
-  );
-}
-```
-
-```bash
-LENS_PROJECTS=[{"name":"front","accessId":"lai_…","secretKey":"las_…"}]
-```
-
-No projects yet? Pass `config={{ projects: [], adminToken: process.env.LENS_ADMIN_TOKEN }}`
-and the built-in wizard mints the first project and hands you that env line.
-
-You get the full surface: reports (search + pagination + shareable
-`?report=` deep links), replay player, integrations (OAuth to
-Linear/GitHub/Jira with provider-fed dropdowns), project switcher, onboarding.
-Light-first monochrome; dark mode via `theme="dark"`, `.dark`, or
-`[data-theme="dark"]`.
-
-Prefer keys to never reach the browser at all (shared machines, stricter
-compliance)? Use proxy mode instead: mount the package's server handlers and
-drop the `config` prop — see `@merittdev/horus-lens/server`
-(`createLensProxy` + `createLensProjectsRoute`). Piecemeal components
-(`ReportsTable`, `ReportDetail`, …) remain exported for custom layouts.
+This package is the **capture SDK only** — there's no dashboard to install. Once
+a report is submitted, review it in the **horus-cloud** workspace under its
+"Lens" section: reports (search + pagination + shareable deep links), the replay
+player, and issue-tracker integrations (OAuth to Linear/GitHub/Jira) all live
+there. Your `las_…` secret stays server-side in horus-cloud and never reaches the
+browser.
 
 ## When does the overlay appear?
 
@@ -111,9 +74,8 @@ import on the same check.
 
 - `lai_…` **access id** — public by design (like a GA measurement id). Enforced by a
   per-project origin allowlist and rate limits on the API.
-- `las_…` **secret key** — full project access. Read it server-side and hand it only
-  to access-controlled surfaces (your admin page via `<LensProvider config>`), CI, or
-  the management API — never a public page.
+- `las_…` **secret key** — full project access. Held server-side by horus-cloud
+  (the "Lens" workspace section), CI, or the management API — never a public page.
 
 The SDK talks to the hosted Lens API out of the box — no endpoint configuration.
 Self-hosting? Pass `endpoint` (React/script `init` config) to point anywhere else.

package/dist/browser.cjs

@@ -29000,93 +29000,11 @@ var ApiErrorSchema = external_exports.object({
   error: external_exports.string(),
   message: external_exports.string()
 });
-var IntegrationProviderSchema = external_exports.enum(["github", "jira", "linear"]);
-var IntegrationStatusSchema = external_exports.enum(["disconnected", "pending", "connected"]);
-var IntegrationConfigSchema = external_exports.object({
-  /** github: "owner/repo" issues target. */
-  repo: external_exports.string().optional(),
-  /** linear: team key (e.g. "ENG"); defaults to the first team when unset. */
-  teamKey: external_exports.string().optional(),
-  /** jira: project key (e.g. "BUG"). Required before issues can be created. */
-  projectKey: external_exports.string().optional(),
-  /** jira: issue type name. Defaults to "Bug", falling back to "Task". */
-  issueType: external_exports.string().optional()
-});
-var IntegrationSchema = external_exports.object({
-  provider: IntegrationProviderSchema,
-  status: IntegrationStatusSchema,
-  account: external_exports.string().nullable().default(null),
-  active: external_exports.boolean().default(false),
-  config: IntegrationConfigSchema.default({})
-});
-var S3ConfigInputSchema = external_exports.object({
-  bucket: external_exports.string().min(1),
-  region: external_exports.string().min(1),
-  endpoint: external_exports.string().url().optional(),
-  accessKeyId: external_exports.string().min(1),
-  secretAccessKey: external_exports.string().min(1),
-  forcePathStyle: external_exports.boolean().optional()
-});
-var S3ConfigPublicSchema = external_exports.object({
-  bucket: external_exports.string(),
-  region: external_exports.string(),
-  endpoint: external_exports.string().optional(),
-  forcePathStyle: external_exports.boolean().optional(),
-  /** e.g. "AKIA…F3D2" */
-  accessKeyIdMasked: external_exports.string()
-});
-var ProjectSchema = external_exports.object({
-  id: external_exports.string(),
-  name: external_exports.string(),
-  accessId: external_exports.string(),
-  allowedOrigins: external_exports.array(external_exports.string()),
-  /** Active issue destination; null until onboarding picks one. */
-  destination: IntegrationProviderSchema.nullable(),
-  /**
-   * The customer dashboard page hosting the Lens components (e.g.
-   * "https://admin.acme.com/lens"). Auto-created issues deep-link reports as
-   * `<dashboardUrl>?report=<id>` when set.
-   */
-  dashboardUrl: external_exports.string().nullable().default(null),
-  s3: S3ConfigPublicSchema.nullable(),
-  onboardedAt: external_exports.string().nullable(),
-  createdAt: external_exports.string()
-});
-var CreateProjectRequestSchema = external_exports.object({
-  name: external_exports.string().min(1).max(120),
-  allowedOrigins: external_exports.array(external_exports.string()).default([])
-});
-var CreateProjectResponseSchema = external_exports.object({
-  project: ProjectSchema,
-  accessId: external_exports.string(),
-  accessSecret: external_exports.string()
-});
-var UpdateProjectRequestSchema = external_exports.object({
-  name: external_exports.string().min(1).max(120).optional(),
-  allowedOrigins: external_exports.array(external_exports.string()).optional(),
-  onboarded: external_exports.boolean().optional(),
-  dashboardUrl: external_exports.string().url().nullable().optional()
-});
-var ListIntegrationsResponseSchema = external_exports.object({
-  integrations: external_exports.array(IntegrationSchema)
-});
-var ConnectIntegrationRequestSchema = external_exports.object({
-  /**
-   * Where the provider's OAuth dance should land the user afterwards —
-   * the calling dashboard's own URL. Packed into the signed `state` so the
-   * fixed API callback can redirect back to any consumer dashboard.
-   */
-  returnUrl: external_exports.string().url().optional()
-});
-var ConnectIntegrationResponseSchema = external_exports.object({
-  authorizeUrl: external_exports.string(),
-  provider: IntegrationProviderSchema
-});
 
 // ../core/dist/index.js
 var SDK_NAME = "@merittdev/horus-lens";
 var SDK_VERSION = "0.0.1";
-var DEFAULT_ENDPOINT = "https://api-lens.meritt.app";
+var DEFAULT_ENDPOINT = "https://api.horus.sh";
 var DEFAULT_REPLAY_WINDOW_MS = 15e3;
 var DEFAULT_MAX_CONSOLE_ENTRIES = 200;
 var DEFAULT_MAX_NETWORK_ENTRIES = 100;
@@ -29435,6 +29353,11 @@ var ReplayRecorder = class {
         emit: (event, isCheckout) => this.onEmit(event, isCheckout),
         checkoutEveryNms: this.windowMs,
         recordCanvas: false,
+        // Inline same-origin + CORS images as data URIs at snapshot time so the
+        // dashboard replay paints on a different origin (tainted cross-origin
+        // images fall back to their URL, which is fine for public CDNs).
+        inlineImages: true,
+        collectFonts: true,
         // Keep the Lens overlay itself out of every recording.
         blockSelector: `#${LENS_OVERLAY_HOST_ID}`
       });
@@ -29541,7 +29464,7 @@ var ReplayRecorder = class {
     console.warn("[lens] rrweb recording unavailable; replay disabled", err);
   }
 };
-async function captureScreenshot(excludeHost) {
+async function captureScreenshot(excludeHost, crop) {
   if (typeof document === "undefined" || typeof window === "undefined") return null;
   try {
     const viewportPixels = window.innerWidth * window.innerHeight || 1;
@@ -29575,12 +29498,50 @@ async function captureScreenshot(excludeHost) {
       );
       return null;
     }
+    if (crop) {
+      const cropped = await cropBlob(blob2, crop, scale);
+      return cropped ?? blob2;
+    }
     return blob2;
   } catch (err) {
     console.warn("[lens] screenshot capture failed:", err);
     return null;
   }
 }
+async function cropBlob(blob2, crop, scale) {
+  try {
+    if (typeof createImageBitmap !== "function" || typeof document === "undefined") return null;
+    const bitmap = await createImageBitmap(blob2);
+    let sx = Math.round(crop.x * scale);
+    let sy = Math.round(crop.y * scale);
+    let sw = Math.round(crop.width * scale);
+    let sh = Math.round(crop.height * scale);
+    sx = Math.max(0, Math.min(sx, bitmap.width));
+    sy = Math.max(0, Math.min(sy, bitmap.height));
+    sw = Math.min(sw, bitmap.width - sx);
+    sh = Math.min(sh, bitmap.height - sy);
+    if (sw <= 0 || sh <= 0) {
+      bitmap.close?.();
+      return null;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = sw;
+    canvas.height = sh;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      bitmap.close?.();
+      return null;
+    }
+    ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, sw, sh);
+    bitmap.close?.();
+    return await new Promise((resolve) => {
+      canvas.toBlob((out) => resolve(out), "image/jpeg", 0.82);
+    });
+  } catch (err) {
+    console.warn("[lens] screenshot crop failed:", err);
+    return null;
+  }
+}
 function parseBrowser(ua) {
   if (!ua) return void 0;
   const checks = [
@@ -29845,7 +29806,7 @@ var LensClient = class {
     const wantErrors = include.errors !== false;
     const wantScreenshot = include.screenshot !== false;
     const wantDom = include.dom !== false;
-    const screenshotPromise = this.screenshotEnabled && wantScreenshot ? captureScreenshot(input2.excludeFromScreenshot) : Promise.resolve(null);
+    const screenshotPromise = this.screenshotEnabled && wantScreenshot ? captureScreenshot(input2.excludeFromScreenshot, input2.screenshotCrop) : Promise.resolve(null);
     const replayEvents = wantReplay ? this.replay?.snapshot() ?? [] : [];
     const errorEntries = this.errorBuffer.drain();
     const consoleTail = this.consoleBuffer.tail(CONSOLE_TAIL_SIZE);
@@ -30081,6 +30042,13 @@ var Annotator = class {
   list() {
     return this.annotations.map((a) => ({ ...a, viewport: { ...a.viewport } }));
   }
+  /**
+   * Live rendered rect elements (fixed-positioned, viewport coords). Exposed so
+   * the overlay can derive a document-space bounding box for screenshot crop.
+   */
+  rects() {
+    return [...this.renderedRects];
+  }
   clear() {
     this.annotations = [];
     for (const rect of this.renderedRects) rect.remove();
@@ -31358,11 +31326,13 @@ var Overlay = class {
   }
   async submit(comment2, include) {
     const annotations = this.annotator.list();
+    const screenshotCrop = this.computeAnnotationCrop();
     const result2 = await this.deps.client.submitReport({
       comment: comment2 || void 0,
       annotations,
       target: this.target ?? void 0,
       excludeFromScreenshot: this.host,
+      screenshotCrop,
       include
     });
     this.target = null;
@@ -31371,6 +31341,35 @@ var Overlay = class {
     this.deps.client.discardRecording();
     return result2;
   }
+  /**
+   * Union the marked rects into a single bounding box in DOCUMENT coordinates,
+   * or `undefined` if nothing is marked (→ full-page screenshot). Each rect is
+   * fixed-positioned, so getBoundingClientRect() gives viewport coords; add the
+   * page scroll offset to convert to document space.
+   */
+  computeAnnotationCrop() {
+    const rects = this.annotator.rects();
+    if (rects.length === 0) return void 0;
+    const scrollX = window.scrollX || window.pageXOffset || 0;
+    const scrollY = window.scrollY || window.pageYOffset || 0;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const rect of rects) {
+      const r = rect.getBoundingClientRect();
+      const left = r.left + scrollX;
+      const top = r.top + scrollY;
+      minX = Math.min(minX, left);
+      minY = Math.min(minY, top);
+      maxX = Math.max(maxX, left + r.width);
+      maxY = Math.max(maxY, top + r.height);
+    }
+    const width = maxX - minX;
+    const height = maxY - minY;
+    if (!(width > 0) || !(height > 0)) return void 0;
+    return { x: minX, y: minY, width, height };
+  }
   dismiss() {
     this.deps.onDismiss();
     this.destroy();