@heyramzi/marketing 0.0.0-stage → 2.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ramzi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,93 @@
-# Temporary Holding Version
+# @heyramzi/marketing
 
-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.
+Marketing utilities for the vibe-kit ecosystem: analytics plumbing and a generic HTML→image rendering pipeline.
+
+## Features
+
+- **Umami analytics**: the browser script helper, a server tracker, a one-call unified tracker, the wire protocol for edge runtimes, and a reporting API client to read traffic back.
+- **Sentry**: a protocol split for runtimes that cannot load the SDK, and an SDK wrapper.
+- **Image generation (`imagegen`)**: Generic satori-based HTML to SVG/PNG/AVIF pipeline. Consumers bring their own templates.
+- **Brand and testimonials**: brand tokens and testimonial types, server loaders and Svelte surfaces.
+
+## Installation
+
+```bash
+pnpm add @heyramzi/marketing
+```
+
+## Usage
+
+### Analytics
+
+The analytics module provides wrappers for Umami tracking across different environments.
+
+#### Server-side (Node.js/SvelteKit)
+
+```typescript
+import { initServer, trackServer } from '@heyramzi/marketing/analytics/server';
+
+initServer({ websiteId: process.env.UMAMI_WEBSITE_ID });
+await trackServer('signup', { plan: 'pro' });
+```
+
+#### Script tag and browser tracking
+
+```svelte
+<script>
+  import { umamiScriptAttrs } from '@heyramzi/marketing/analytics/svelte';
+  import { initAnalytics, track } from '@heyramzi/marketing/analytics/unified';
+</script>
+
+<svelte:head>
+  <script defer {...umamiScriptAttrs("your-id")}></script>
+</svelte:head>
+```
+
+`analytics/unified` is the browser tracker: `initAnalytics` once (it returns a cleanup function), then `track`, `trackError`, `trackRevenue` and `setProfileId`.
+
+#### Reading traffic back out
+
+`analytics/unified` and `analytics/server` write events. `analytics/umami/reporting` reads them: websites, stats, metrics, time-series, sessions and live visitors. It is the one client for every runtime, so a Cloudflare Worker, a Node server and a CLI all read the same numbers the same way. Transport is the only thing injected.
+
+```typescript
+import { UmamiReportingClient } from "@heyramzi/marketing/analytics/umami/reporting";
+
+const client = new UmamiReportingClient({
+  apiUrl: process.env.UMAMI_API_URL,
+  username: process.env.UMAMI_USERNAME,
+  password: process.env.UMAMI_PASSWORD,
+  // Required when the Umami host sits behind Cloudflare Access, which answers
+  // an unauthenticated API call with an HTML login page instead of JSON.
+  accessClientId: process.env.CF_ACCESS_CLIENT_ID,
+  accessClientSecret: process.env.CF_ACCESS_CLIENT_SECRET,
+});
+```
+
+Note that the server returns the current window flat and the preceding window under `comparison`, not `{ value, prev }` per metric.
+
+### Image Generation
+
+Generic HTML→image pipeline built on satori + sharp. Supports SVG, PNG, and AVIF. Fonts can be loaded from `.ttf`, `.otf`, or `.woff2` files (woff2 is decoded transparently).
+
+```typescript
+import { html } from 'satori-html';
+import { loadFonts, renderImage } from '@heyramzi/marketing/imagegen';
+
+const fonts = await loadFonts([
+  { name: 'Manrope', path: '/path/to/manrope-700.woff2', weight: 700 },
+]);
+
+const markup = html`<div style="display:flex;">Hello</div>`;
+
+const png = await renderImage(markup, {
+  fonts,
+  size: { width: 1200, height: 630 },
+  format: 'png',
+});
+```
+
+Templates, handlers, and query-param plumbing belong in the consuming app. This package intentionally ships only the rendering primitives.
+
+## Development
+
+- `pnpm test`: Run vitest suites.

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@heyramzi/marketing",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2.0.1",
+  "description": "Umami analytics for client, server, and Svelte, plus a satori-based HTML-to-image pipeline.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heyramzi/ui.git",
+    "directory": "packages/marketing"
+  },
+  "files": [
+    "src",
+    "package.json"
+  ],
+  "type": "module",
+  "imports": {
+    "#src/*.js": "./src/*.ts",
+    "#src/*": "./src/*"
+  },
+  "exports": {
+    "./analytics/server": "./src/analytics/server.ts",
+    "./analytics/svelte": "./src/analytics/svelte.ts",
+    "./analytics/umami/protocol": "./src/analytics/umami/protocol.ts",
+    "./analytics/umami/reporting": "./src/analytics/umami/reporting.ts",
+    "./analytics/unified": "./src/analytics/unified.ts",
+    "./imagegen": "./src/imagegen/index.ts",
+    "./brand": "./src/brand/index.ts",
+    "./testimonials/types": "./src/testimonials/types.ts",
+    "./testimonials/server": "./src/testimonials/server.ts",
+    "./testimonials/render-content": "./src/testimonials/render-content.ts",
+    "./testimonials/svelte": {
+      "svelte": "./src/testimonials/svelte/index.ts",
+      "types": "./src/testimonials/svelte/index.ts",
+      "default": "./src/testimonials/svelte/index.ts"
+    },
+    "./errors/sentry": "./src/errors/sentry/index.ts",
+    "./errors/sentry/protocol": "./src/errors/sentry/protocol.ts"
+  },
+  "dependencies": {
+    "satori": "^0.35.0",
+    "satori-html": "^0.3.2",
+    "ultrahtml": "^1.7.0",
+    "wawoff2": "^2.0.1"
+  },
+  "devDependencies": {
+    "vite-plus": "^1.0.0",
+    "vitest": "^5.0.3"
+  },
+  "peerDependencies": {
+    "@heyramzi/utils": "^1.3.3",
+    "@mux/mux-player": ">=3.0.0",
+    "@umami/node": ">=0.4.0",
+    "phosphor-svelte": ">=3.0.0",
+    "sharp": ">=0.33.0"
+  },
+  "peerDependenciesMeta": {
+    "@umami/node": {
+      "optional": true
+    },
+    "phosphor-svelte": {
+      "optional": true
+    },
+    "@mux/mux-player": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "test": "vp test run"
+  }
 }

package/src/analytics/server.test.ts

@@ -0,0 +1,282 @@
+import { describe, it, expect, vi, beforeEach } from "vite-plus/test";
+
+// The server module holds module-level singletons (client, _config).
+// Each test resets them by calling vi.resetModules() + re-importing.
+
+async function freshImport() {
+  vi.resetModules();
+  return import("#src/analytics/server.js");
+}
+
+beforeEach(() => {
+  vi.resetModules();
+});
+
+// ---- initServer ----
+
+describe("initServer", () => {
+  it("stores config so that subsequent trackServer calls succeed", async () => {
+    const mockTrack = vi.fn().mockResolvedValue(undefined);
+
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServer } = await freshImport();
+    initServer({ hostUrl: "https://umami.example.com", websiteId: "abc-123" });
+    trackServer("test_event");
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(mockTrack).toHaveBeenCalledWith({ name: "test_event" });
+  });
+
+  it("throws when trackServer is called without prior initServer", async () => {
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    vi.doMock("@umami/node", () => ({ Umami: class {} }));
+
+    const { trackServer } = await freshImport();
+    trackServer("orphan_event");
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      "[analytics] Server track failed:",
+      expect.objectContaining({ message: "Call initServer() before tracking events" }),
+    );
+  });
+});
+
+// ---- trackServer ----
+
+describe("trackServer", () => {
+  it("builds a payload with only name when no data or url is given", async () => {
+    const mockTrack = vi.fn().mockResolvedValue(undefined);
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServer } = await freshImport();
+    initServer({ hostUrl: "https://umami.example.com", websiteId: "abc-123" });
+    trackServer("signup");
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(mockTrack).toHaveBeenCalledWith({ name: "signup" });
+  });
+
+  it("includes data in the payload when provided", async () => {
+    const mockTrack = vi.fn().mockResolvedValue(undefined);
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServer } = await freshImport();
+    initServer({ hostUrl: "https://umami.example.com", websiteId: "abc-123" });
+    trackServer("feature_used", { feature: "export", count: 5 });
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(mockTrack).toHaveBeenCalledWith({
+      name: "feature_used",
+      data: { feature: "export", count: 5 },
+    });
+  });
+
+  it("includes url in the payload when provided", async () => {
+    const mockTrack = vi.fn().mockResolvedValue(undefined);
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServer } = await freshImport();
+    initServer({ hostUrl: "https://umami.example.com", websiteId: "abc-123" });
+    trackServer("page_view", undefined, "/pricing");
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(mockTrack).toHaveBeenCalledWith({ name: "page_view", url: "/pricing" });
+  });
+
+  it("includes both data and url when both are provided", async () => {
+    const mockTrack = vi.fn().mockResolvedValue(undefined);
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServer } = await freshImport();
+    initServer({ hostUrl: "https://umami.example.com", websiteId: "abc-123" });
+    trackServer("click", { label: "CTA" }, "/home");
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(mockTrack).toHaveBeenCalledWith({
+      name: "click",
+      data: { label: "CTA" },
+      url: "/home",
+    });
+  });
+
+  it("logs an error and does not throw when track rejects", async () => {
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const mockTrack = vi.fn().mockRejectedValue(new Error("network failure"));
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServer } = await freshImport();
+    initServer({ hostUrl: "https://umami.example.com", websiteId: "abc-123" });
+    trackServer("risky_event");
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(consoleSpy).toHaveBeenCalledWith("[analytics] Server track failed:", expect.any(Error));
+  });
+
+  it("reuses the same Umami instance across multiple calls", async () => {
+    const mockTrack = vi.fn().mockResolvedValue(undefined);
+    let constructorCallCount = 0;
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        constructor() {
+          constructorCallCount++;
+        }
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServer } = await freshImport();
+    initServer({ hostUrl: "https://umami.example.com", websiteId: "abc-123" });
+    trackServer("first");
+    // Wait for the first getClient() promise to resolve and set the cached client
+    await new Promise((r) => setTimeout(r, 10));
+    trackServer("second");
+    await new Promise((r) => setTimeout(r, 10));
+
+    expect(constructorCallCount).toBe(1);
+    expect(mockTrack).toHaveBeenCalledTimes(2);
+  });
+});
+
+// ---- trackServerRevenue ----
+
+describe("trackServerRevenue", () => {
+  it("tracks a revenue event with revenue and currency merged into data", async () => {
+    const mockTrack = vi.fn().mockResolvedValue(undefined);
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServerRevenue } = await freshImport();
+    initServer({ hostUrl: "https://umami.example.com", websiteId: "abc-123" });
+    trackServerRevenue("purchase", 49.99, "USD");
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(mockTrack).toHaveBeenCalledWith({
+      name: "purchase",
+      data: { revenue: 49.99, currency: "USD" },
+    });
+  });
+
+  it("merges extra EventData alongside revenue and currency", async () => {
+    const mockTrack = vi.fn().mockResolvedValue(undefined);
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServerRevenue } = await freshImport();
+    initServer({ hostUrl: "https://umami.example.com", websiteId: "abc-123" });
+    trackServerRevenue("subscription", 9.99, "EUR", { plan: "pro" });
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(mockTrack).toHaveBeenCalledWith({
+      name: "subscription",
+      data: { plan: "pro", revenue: 9.99, currency: "EUR" },
+    });
+  });
+
+  it("passes url to the underlying trackServer call", async () => {
+    const mockTrack = vi.fn().mockResolvedValue(undefined);
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServerRevenue } = await freshImport();
+    initServer({ hostUrl: "https://umami.example.com", websiteId: "abc-123" });
+    trackServerRevenue("checkout", 19.99, "USD", undefined, "/checkout");
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(mockTrack).toHaveBeenCalledWith({
+      name: "checkout",
+      data: { revenue: 19.99, currency: "USD" },
+      url: "/checkout",
+    });
+  });
+});
+
+// ---- initServer config forwarding ----
+
+describe("initServer config forwarding", () => {
+  it("passes hostUrl and websiteId to the Umami constructor", async () => {
+    let capturedConfig = null;
+    const mockTrack = vi.fn().mockResolvedValue(undefined);
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        constructor(cfg: unknown) {
+          capturedConfig = cfg;
+        }
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServer } = await freshImport();
+    initServer({ hostUrl: "https://analytics.myapp.io", websiteId: "xyz-789" });
+    trackServer("init_test");
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(capturedConfig).toEqual({
+      hostUrl: "https://analytics.myapp.io",
+      websiteId: "xyz-789",
+      userAgent: "Server",
+    });
+  });
+
+  it("forwards a custom userAgent to the Umami constructor", async () => {
+    let capturedConfig = null;
+    const mockTrack = vi.fn().mockResolvedValue(undefined);
+    vi.doMock("@umami/node", () => ({
+      Umami: class {
+        constructor(cfg: unknown) {
+          capturedConfig = cfg;
+        }
+        track = mockTrack;
+      },
+    }));
+
+    const { initServer, trackServer } = await freshImport();
+    initServer({
+      hostUrl: "https://umami.example.com",
+      websiteId: "abc-123",
+      userAgent: "MyBot/1.0",
+    });
+    trackServer("ua_test");
+    await new Promise((r) => setTimeout(r, 0));
+
+    expect(capturedConfig).toEqual({
+      hostUrl: "https://umami.example.com",
+      websiteId: "abc-123",
+      userAgent: "MyBot/1.0",
+    });
+  });
+});

package/src/analytics/server.ts

@@ -0,0 +1,72 @@
+/**
+ * Server-side Umami tracking via @umami/node.
+ * Reliable for revenue and critical events — bypasses ad blockers.
+ *
+ * Requires `@umami/node` peer dependency.
+ */
+
+import type { EventData } from "#src/analytics/types.js";
+
+type UmamiNodeClient = {
+  track: (payload: Record<string, unknown>) => Promise<unknown>;
+};
+
+type UmamiNodeModule = {
+  Umami: new (config: {
+    hostUrl: string;
+    websiteId: string;
+    userAgent?: string;
+  }) => UmamiNodeClient;
+};
+
+let client: UmamiNodeClient | null = null;
+
+type ServerConfig = {
+  hostUrl: string;
+  websiteId: string;
+  userAgent?: string;
+};
+
+let _config: ServerConfig | null = null;
+
+/** Initialize the server-side Umami client. Call once at startup. */
+export function initServer(config: ServerConfig): void {
+  _config = config;
+}
+
+async function getClient(): Promise<UmamiNodeClient> {
+  if (client) return client;
+  if (!_config) throw new Error("Call initServer() before tracking events");
+
+  const { Umami } = (await import("@umami/node")) as UmamiNodeModule;
+  client = new Umami({
+    hostUrl: _config.hostUrl,
+    websiteId: _config.websiteId,
+    userAgent: _config.userAgent ?? "Server",
+  });
+  return client;
+}
+
+/** Fire-and-forget server-side event tracking. Never throws. */
+export function trackServer(name: string, data?: EventData, url?: string): void {
+  const payload: { name: string; data?: EventData; url?: string } = { name };
+  if (data) payload.data = data;
+  if (url) payload.url = url;
+
+  getClient()
+    .then((c) => c.track(payload))
+    .catch((err: unknown) => {
+      console.error("[analytics] Server track failed:", err);
+    });
+}
+
+/** Track a server-side revenue event. Revenue must be in dollars (not cents). */
+export function trackServerRevenue(
+  name: string,
+  revenue: number,
+  currency: string,
+  data?: EventData,
+  url?: string,
+): void {
+  trackServer(name, { ...data, revenue, currency }, url);
+}

package/src/analytics/svelte.test.ts

@@ -0,0 +1,141 @@
+import { describe, it, expect } from "vite-plus/test";
+import { umamiScriptAttrs, umamiPreconnectAttrs } from "#src/analytics/svelte.js";
+
+const DEFAULT_HOST = "https://your-umami-instance.com";
+
+describe("umamiScriptAttrs", () => {
+  it("returns src and data-website-id using the default host when no options are given", () => {
+    const attrs = umamiScriptAttrs("my-website-id");
+    expect(attrs).toEqual({
+      src: `${DEFAULT_HOST}/script.js`,
+      "data-website-id": "my-website-id",
+    });
+  });
+
+  it("uses a custom hostUrl when provided", () => {
+    const attrs = umamiScriptAttrs("my-website-id", {
+      hostUrl: "https://custom.umami.io",
+    });
+    expect(attrs.src).toBe("https://custom.umami.io/script.js");
+  });
+
+  it("sets data-website-id from the first argument", () => {
+    const attrs = umamiScriptAttrs("site-abc");
+    expect(attrs["data-website-id"]).toBe("site-abc");
+  });
+
+  it("adds data-domains when domains are provided", () => {
+    const attrs = umamiScriptAttrs("site-id", {
+      domains: ["myapp.com", "www.myapp.com"],
+    });
+    expect(attrs["data-domains"]).toBe("myapp.com,www.myapp.com");
+  });
+
+  it("does not add data-domains when domains array is empty", () => {
+    const attrs = umamiScriptAttrs("site-id", { domains: [] });
+    expect(attrs).not.toHaveProperty("data-domains");
+  });
+
+  it("does not add data-domains when domains option is absent", () => {
+    const attrs = umamiScriptAttrs("site-id");
+    expect(attrs).not.toHaveProperty("data-domains");
+  });
+
+  it("adds data-before-send when beforeSend is provided", () => {
+    const attrs = umamiScriptAttrs("site-id", { beforeSend: "umamiBeforeSend" });
+    expect(attrs["data-before-send"]).toBe("umamiBeforeSend");
+  });
+
+  it("does not add data-before-send when beforeSend is absent", () => {
+    const attrs = umamiScriptAttrs("site-id");
+    expect(attrs).not.toHaveProperty("data-before-send");
+  });
+
+  it("adds data-do-not-track=true when doNotTrack is true", () => {
+    const attrs = umamiScriptAttrs("site-id", { doNotTrack: true });
+    expect(attrs["data-do-not-track"]).toBe("true");
+  });
+
+  it("does not add data-do-not-track when doNotTrack is false", () => {
+    const attrs = umamiScriptAttrs("site-id", { doNotTrack: false });
+    expect(attrs).not.toHaveProperty("data-do-not-track");
+  });
+
+  it("does not add data-do-not-track when doNotTrack is absent", () => {
+    const attrs = umamiScriptAttrs("site-id");
+    expect(attrs).not.toHaveProperty("data-do-not-track");
+  });
+
+  it("adds data-performance=true when performance is true", () => {
+    const attrs = umamiScriptAttrs("site-id", { performance: true });
+    expect(attrs["data-performance"]).toBe("true");
+  });
+
+  it("does not add data-performance when performance is false or absent", () => {
+    expect(umamiScriptAttrs("site-id")).not.toHaveProperty("data-performance");
+    expect(umamiScriptAttrs("site-id", { performance: false })).not.toHaveProperty(
+      "data-performance",
+    );
+  });
+
+  it("adds data-tag when tag is provided", () => {
+    const attrs = umamiScriptAttrs("site-id", { tag: "v2" });
+    expect(attrs["data-tag"]).toBe("v2");
+  });
+
+  it("all optional attributes can be combined", () => {
+    const attrs = umamiScriptAttrs("site-id", {
+      hostUrl: "https://u.example.com",
+      domains: ["app.com"],
+      beforeSend: "handler",
+      doNotTrack: true,
+      performance: true,
+      tag: "release-42",
+    });
+    expect(attrs).toEqual({
+      src: "https://u.example.com/script.js",
+      "data-website-id": "site-id",
+      "data-domains": "app.com",
+      "data-before-send": "handler",
+      "data-do-not-track": "true",
+      "data-performance": "true",
+      "data-tag": "release-42",
+    });
+  });
+});
+
+describe("umamiPreconnectAttrs", () => {
+  it("returns preconnect and dns-prefetch objects with the default host", () => {
+    const result = umamiPreconnectAttrs();
+    expect(result.preconnect).toEqual({
+      rel: "preconnect",
+      href: DEFAULT_HOST,
+    });
+    expect(result.dnsPrefetch).toEqual({
+      rel: "dns-prefetch",
+      href: DEFAULT_HOST,
+    });
+  });
+
+  it("uses the provided hostUrl", () => {
+    const result = umamiPreconnectAttrs("https://analytics.example.com");
+    expect(result.preconnect.href).toBe("https://analytics.example.com");
+    expect(result.dnsPrefetch.href).toBe("https://analytics.example.com");
+  });
+
+  it("preconnect has rel=preconnect", () => {
+    const result = umamiPreconnectAttrs();
+    expect(result.preconnect.rel).toBe("preconnect");
+  });
+
+  it("dnsPrefetch has rel=dns-prefetch", () => {
+    const result = umamiPreconnectAttrs();
+    expect(result.dnsPrefetch.rel).toBe("dns-prefetch");
+  });
+
+  it("both entries point to the same host", () => {
+    const customHost = "https://my-umami.io";
+    const result = umamiPreconnectAttrs(customHost);
+    expect(result.preconnect.href).toBe(result.dnsPrefetch.href);
+  });
+});