@fluxtrace/embed 0.0.0-stage → 3.9.1

package/README.md

@@ -1,3 +1,49 @@
-# Temporary Holding Version
+# @fluxtrace/embed
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Embed a FluxTrace dashboard in any web page with a single custom element.
+
+## Install
+
+```bash
+npm install @fluxtrace/embed
+```
+
+## Usage
+
+Load the script, then drop the element where you want the dashboard:
+
+```html
+<script type="module">
+  import "@fluxtrace/embed";
+</script>
+
+<fluxtrace-dashboard project-id="YOUR_PROJECT_ID"></fluxtrace-dashboard>
+```
+
+The package also ships an IIFE bundle that registers a `FluxtraceEmbed`
+global for use via a plain `<script>` tag.
+
+On connect, the element requests a short-lived embed token from your
+FluxTrace web app (`POST <host>/api/embed/token`) and renders the dashboard
+in a lazy-loaded `iframe`.
+
+## Attributes
+
+| Attribute    | Required | Default               | Description                                          |
+| ------------ | -------- | --------------------- | ---------------------------------------------------- |
+| `project-id` | yes      | —                     | Project to display. Shows an error note without it. |
+| `host`       | no       | current origin        | FluxTrace web app origin serving `/api/embed/token` |
+| `origin`     | no       | current origin        | Origin sent with the token request                   |
+| `height`     | no       | `720px`               | Iframe height                                        |
+| `user-id`    | no       | —                     | End user the embed is scoped to                      |
+| `from`       | no       | —                     | Start of the displayed range                         |
+| `to`         | no       | —                     | End of the displayed range                           |
+| `paths`      | no       | —                     | Comma-separated page paths to filter by              |
+| `ttl`        | no       | —                     | Token lifetime in seconds                            |
+
+## Notes
+
+- The element registers itself as `fluxtrace-dashboard` exactly once; importing
+  the package multiple times is safe.
+- Requires a browser with custom elements support. Nothing renders
+  server-side.

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+type DashboardElementOptions = {
+    projectId: string;
+    origin?: string;
+    host?: string;
+    height?: string;
+    userId?: string;
+    from?: string;
+    to?: string;
+    paths?: string[];
+    ttlSeconds?: number;
+};
+
+export type { DashboardElementOptions };

package/dist/index.global.js

@@ -0,0 +1,81 @@
+"use strict";
+var FluxtraceEmbed = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/index.ts
+  var index_exports = {};
+  var FluxtraceDashboard = class extends HTMLElement {
+    options = null;
+    connectedCallback() {
+      const projectId = this.getAttribute("project-id");
+      if (!projectId) {
+        this.textContent = "FluxTrace: project-id is required";
+        return;
+      }
+      const pathsRaw = this.getAttribute("paths");
+      const paths = pathsRaw ? pathsRaw.split(",").map((p) => p.trim()).filter(Boolean) : void 0;
+      const ttlRaw = this.getAttribute("ttl");
+      const ttlSeconds = ttlRaw ? Number(ttlRaw) : void 0;
+      this.options = {
+        projectId,
+        origin: this.getAttribute("origin") ?? window.location.origin,
+        host: this.getAttribute("host") ?? window.location.origin,
+        height: this.getAttribute("height") ?? "720px",
+        userId: this.getAttribute("user-id") ?? void 0,
+        from: this.getAttribute("from") ?? void 0,
+        to: this.getAttribute("to") ?? void 0,
+        paths: paths?.length ? paths : void 0,
+        ttlSeconds: ttlSeconds != null && Number.isFinite(ttlSeconds) ? ttlSeconds : void 0
+      };
+      void this.load();
+    }
+    async load() {
+      const options = this.options;
+      const response = await fetch(`${options.host}/api/embed/token`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({
+          projectId: options.projectId,
+          origin: options.origin,
+          userId: options.userId,
+          from: options.from,
+          to: options.to,
+          paths: options.paths,
+          ttlSeconds: options.ttlSeconds
+        })
+      });
+      if (!response.ok) {
+        this.textContent = "FluxTrace: unable to create embed token";
+        return;
+      }
+      const { token } = await response.json();
+      const iframe = document.createElement("iframe");
+      iframe.src = `${options.host}/embed/${encodeURIComponent(options.projectId)}?token=${encodeURIComponent(token)}`;
+      iframe.title = "FluxTrace dashboard";
+      iframe.loading = "lazy";
+      iframe.style.border = "0";
+      iframe.style.height = options.height ?? "720px";
+      iframe.style.width = "100%";
+      this.replaceChildren(iframe);
+    }
+  };
+  if (typeof window !== "undefined" && "customElements" in window) {
+    if (!customElements.get("fluxtrace-dashboard")) {
+      customElements.define("fluxtrace-dashboard", FluxtraceDashboard);
+    }
+  }
+  return __toCommonJS(index_exports);
+})();

package/dist/index.js

@@ -0,0 +1,62 @@
+// src/index.ts
+var FluxtraceDashboard = class extends HTMLElement {
+  options = null;
+  connectedCallback() {
+    const projectId = this.getAttribute("project-id");
+    if (!projectId) {
+      this.textContent = "FluxTrace: project-id is required";
+      return;
+    }
+    const pathsRaw = this.getAttribute("paths");
+    const paths = pathsRaw ? pathsRaw.split(",").map((p) => p.trim()).filter(Boolean) : void 0;
+    const ttlRaw = this.getAttribute("ttl");
+    const ttlSeconds = ttlRaw ? Number(ttlRaw) : void 0;
+    this.options = {
+      projectId,
+      origin: this.getAttribute("origin") ?? window.location.origin,
+      host: this.getAttribute("host") ?? window.location.origin,
+      height: this.getAttribute("height") ?? "720px",
+      userId: this.getAttribute("user-id") ?? void 0,
+      from: this.getAttribute("from") ?? void 0,
+      to: this.getAttribute("to") ?? void 0,
+      paths: paths?.length ? paths : void 0,
+      ttlSeconds: ttlSeconds != null && Number.isFinite(ttlSeconds) ? ttlSeconds : void 0
+    };
+    void this.load();
+  }
+  async load() {
+    const options = this.options;
+    const response = await fetch(`${options.host}/api/embed/token`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify({
+        projectId: options.projectId,
+        origin: options.origin,
+        userId: options.userId,
+        from: options.from,
+        to: options.to,
+        paths: options.paths,
+        ttlSeconds: options.ttlSeconds
+      })
+    });
+    if (!response.ok) {
+      this.textContent = "FluxTrace: unable to create embed token";
+      return;
+    }
+    const { token } = await response.json();
+    const iframe = document.createElement("iframe");
+    iframe.src = `${options.host}/embed/${encodeURIComponent(options.projectId)}?token=${encodeURIComponent(token)}`;
+    iframe.title = "FluxTrace dashboard";
+    iframe.loading = "lazy";
+    iframe.style.border = "0";
+    iframe.style.height = options.height ?? "720px";
+    iframe.style.width = "100%";
+    this.replaceChildren(iframe);
+  }
+};
+if (typeof window !== "undefined" && "customElements" in window) {
+  if (!customElements.get("fluxtrace-dashboard")) {
+    customElements.define("fluxtrace-dashboard", FluxtraceDashboard);
+  }
+}

package/package.json

@@ -1,6 +1,17 @@
 {
   "name": "@fluxtrace/embed",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "3.9.1",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,iife --global-name FluxtraceEmbed --dts --clean",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {}
+}