wormkey-overlay 0.4.0

package/dist/auto.d.ts

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        __WORMKEY_OVERLAY_URL__?: string;
+    }
+}
+export declare function auto(scriptUrl?: string): boolean;

package/dist/auto.js

@@ -0,0 +1,19 @@
+export function auto(scriptUrl) {
+    if (typeof document === "undefined")
+        return false;
+    const src = scriptUrl ??
+        window.__WORMKEY_OVERLAY_URL__ ??
+        document.querySelector('meta[name="wormkey-overlay-url"]')?.getAttribute("content") ??
+        "";
+    if (!src)
+        return false;
+    if (document.querySelector(`script[data-wormkey-overlay="1"]`))
+        return true;
+    const script = document.createElement("script");
+    script.defer = true;
+    script.src = src;
+    script.dataset.wormkeyOverlay = "1";
+    document.head.appendChild(script);
+    return true;
+}
+auto();

package/dist/express.d.ts

@@ -0,0 +1,13 @@
+export interface ExpressOverlayOptions {
+    scriptUrl: string;
+}
+interface ReqLike {
+    [k: string]: unknown;
+}
+interface ResLike {
+    send: (body: unknown) => unknown;
+    getHeader: (name: string) => unknown;
+}
+type NextLike = () => void;
+export declare function wormkeyOverlayMiddleware(options: ExpressOverlayOptions): (_req: ReqLike, res: ResLike, next: NextLike) => void;
+export {};

package/dist/express.js

@@ -0,0 +1,16 @@
+export function wormkeyOverlayMiddleware(options) {
+    return function overlay(_req, res, next) {
+        const send = res.send.bind(res);
+        res.send = ((body) => {
+            const contentType = String(res.getHeader("content-type") ?? "");
+            if (typeof body === "string" &&
+                contentType.includes("text/html") &&
+                !body.includes("data-wormkey-overlay=\"1\"")) {
+                const tag = `<script defer data-wormkey-overlay=\"1\" src=\"${options.scriptUrl}\"></script>`;
+                body = body.includes("</head>") ? body.replace("</head>", `${tag}</head>`) : `${tag}${body}`;
+            }
+            return send(body);
+        });
+        next();
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { auto } from "./auto.js";
+export { wormkeyOverlayMiddleware } from "./express.js";
+export { WormkeyOverlay } from "./react.js";

package/dist/index.js

@@ -0,0 +1,3 @@
+export { auto } from "./auto.js";
+export { wormkeyOverlayMiddleware } from "./express.js";
+export { WormkeyOverlay } from "./react.js";

package/dist/react.d.ts

@@ -0,0 +1,21 @@
+export interface WormkeyOverlayProps {
+    /** Full overlay script URL, e.g. https://wormkey.run/.wormkey/overlay.js?slug=pale-snow-91 */
+    scriptUrl?: string;
+    /** Gateway base URL (e.g. https://wormkey.run). Use with slug. */
+    gatewayUrl?: string;
+    /** Slug for the wormhole. If omitted and viewing at /s/:slug, derived from URL. */
+    slug?: string;
+}
+/**
+ * Wormkey overlay bar for owners. Import in your RootLayout.
+ * Loads the overlay script from the gateway; API requests go to the gateway (not the page origin).
+ *
+ * @example
+ * // Option 1: Full script URL (from CLI output or session)
+ * <WormkeyOverlay scriptUrl="https://wormkey.run/.wormkey/overlay.js?slug=pale-snow-91" />
+ *
+ * @example
+ * // Option 2: Gateway + slug (slug from env or derived from URL when viewing at /s/:slug)
+ * <WormkeyOverlay gatewayUrl="https://wormkey.run" slug={slug} />
+ */
+export declare function WormkeyOverlay({ scriptUrl, gatewayUrl, slug: slugProp }: WormkeyOverlayProps): null;

package/dist/react.js

@@ -0,0 +1,34 @@
+"use client";
+import { useEffect } from "react";
+/**
+ * Wormkey overlay bar for owners. Import in your RootLayout.
+ * Loads the overlay script from the gateway; API requests go to the gateway (not the page origin).
+ *
+ * @example
+ * // Option 1: Full script URL (from CLI output or session)
+ * <WormkeyOverlay scriptUrl="https://wormkey.run/.wormkey/overlay.js?slug=pale-snow-91" />
+ *
+ * @example
+ * // Option 2: Gateway + slug (slug from env or derived from URL when viewing at /s/:slug)
+ * <WormkeyOverlay gatewayUrl="https://wormkey.run" slug={slug} />
+ */
+export function WormkeyOverlay({ scriptUrl, gatewayUrl, slug: slugProp }) {
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const slug = slugProp ??
+            (typeof window !== "undefined" && window.location.pathname.match(/^\/s\/([^/]+)/)?.[1]);
+        const base = gatewayUrl?.replace(/\/$/, "") ?? process.env.NEXT_PUBLIC_WORMKEY_GATEWAY_URL;
+        const url = scriptUrl ?? (base && slug ? `${base}/.wormkey/overlay.js?slug=${slug}` : null);
+        if (!url)
+            return;
+        if (document.querySelector('[data-wormkey-overlay="1"]'))
+            return;
+        const script = document.createElement("script");
+        script.src = url;
+        script.defer = true;
+        script.setAttribute("data-wormkey-overlay", "1");
+        document.body.appendChild(script);
+    }, [scriptUrl, gatewayUrl, slugProp]);
+    return null;
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "wormkey-overlay",
+  "version": "0.4.0",
+  "description": "Wormkey in-app overlay helpers",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./auto": "./dist/auto.js",
+    "./express": "./dist/express.js",
+    "./react": "./dist/react.js"
+  },
+  "scripts": {
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "typescript": "^5.3.0"
+  }
+}