adkit-react 0.1.0

package/dist/index.js

@@ -0,0 +1,412 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AdSlot: () => AdSlot,
+  AdkitProvider: () => AdkitProvider,
+  BookingModal: () => BookingModal,
+  useAdkit: () => useAdkit
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AdSlot.tsx
+var React3 = __toESM(require("react"));
+
+// src/eventClient.ts
+var API_URL = "https://adkit.dev/api/events";
+function sendEvent(payload) {
+  try {
+    fetch(API_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ ...payload, timestamp: Date.now() }),
+      keepalive: true
+    }).catch(() => {
+    });
+  } catch {
+  }
+}
+
+// src/AdkitContext.tsx
+var React = __toESM(require("react"));
+var AdkitContext = React.createContext(null);
+function useAdkit() {
+  const ctx = React.useContext(AdkitContext);
+  if (!ctx) {
+    throw new Error(
+      '[Adkit] <AdSlot /> must be used inside <AdkitProvider />. Wrap your app with <AdkitProvider siteId="your-site-id">.'
+    );
+  }
+  return ctx;
+}
+function deriveSlotIdentity(siteId, slot) {
+  return `${siteId}:${slot}`;
+}
+
+// src/BookingModal.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function BookingModal({ siteId, slot, price, onClose }) {
+  const overlayRef = React2.useRef(null);
+  React2.useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+  React2.useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+  const handleOverlayClick = (e) => {
+    if (e.target === overlayRef.current) onClose();
+  };
+  const dollars = price / 100;
+  const formatted = Number.isInteger(dollars) ? `$${dollars}` : `$${dollars.toFixed(2)}`;
+  const handleBook = () => {
+    const params = new URLSearchParams({
+      siteId,
+      slot,
+      price: String(price),
+      ref: window.location.href
+    });
+    window.location.href = `https://adkit.dev/book?${params.toString()}`;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: overlayRef,
+      className: "adkit-modal-overlay",
+      onClick: handleOverlayClick,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Book this ad space",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "adkit-modal-card", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", { className: "adkit-modal-headline", children: [
+          "Advertise directly on ",
+          typeof window !== "undefined" ? window.location.hostname : "this site",
+          "."
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "adkit-modal-subhead", children: [
+          "Rent this ad space for a fixed price and reach your target audience where they really are: ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "right here" }),
+          "."
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { className: "adkit-modal-bullets", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Exclusive placement, no other ads will be shown" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Fixed price \u2014 no bidding, auctions, or fees" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "See your ad before you pay, no commitments" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Track your ad's performance on your dashboard" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: "Guaranteed to display 24/7 or your money back" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "adkit-modal-price-section", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "adkit-modal-price", children: [
+            formatted,
+            " / day"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "adkit-modal-price-helper", children: "Zero commitment. No minimum booking period." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "adkit-modal-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "adkit-modal-cta", onClick: handleBook, children: "Book this ad" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "adkit-modal-redirect-hint", children: "You'll be redirected to Adkit to upload your ad and choose dates." }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "adkit-modal-cancel", onClick: onClose, children: "Cancel" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "adkit-modal-footer", children: [
+          "Powered by ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: "https://adkit.dev", target: "_blank", rel: "noopener noreferrer", children: "Adkit" })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/AdSlot.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var RATIO_CSS = {
+  "16:9": "16 / 9",
+  "4:3": "4 / 3",
+  "1:1": "1 / 1",
+  "9:16": "9 / 16",
+  "banner": "728 / 90"
+};
+var RATIO_VALUE = {
+  "16:9": 16 / 9,
+  "4:3": 4 / 3,
+  "1:1": 1,
+  "9:16": 9 / 16,
+  "banner": 728 / 90
+};
+var mountedSlots = /* @__PURE__ */ new Set();
+var SERVE_BASE = "https://adkit.dev";
+function useSystemDark() {
+  const [isDark, setIsDark] = React3.useState(false);
+  React3.useEffect(() => {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    setIsDark(mq.matches);
+    const handler = (e) => setIsDark(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return isDark;
+}
+function AdSlot({
+  slot,
+  siteId: manualSiteId,
+  aspectRatio,
+  price = 2500,
+  size = "lg",
+  theme = "auto",
+  className,
+  styles,
+  silent = false
+}) {
+  var _a, _b, _c, _d;
+  const slotRef = React3.useRef(null);
+  const hasViewedRef = React3.useRef(false);
+  const bookingIdRef = React3.useRef(void 0);
+  const systemDark = useSystemDark();
+  const [servedAd, setServedAd] = React3.useState({ status: "loading" });
+  React3.useEffect(() => {
+    bookingIdRef.current = servedAd.status === "active" ? servedAd.bookingId : void 0;
+  }, [servedAd]);
+  if (!aspectRatio) {
+    throw new Error("[Adkit] Missing aspectRatio. This prop is required and determines the ad format.");
+  }
+  if (!/^[A-Za-z0-9_-]+$/.test(slot)) {
+    throw new Error(`[Adkit] Invalid slot name "${slot}". Only letters, numbers, hyphens, and underscores allowed.`);
+  }
+  const ctx = React3.useContext(AdkitContext);
+  const siteId = manualSiteId != null ? manualSiteId : ctx == null ? void 0 : ctx.siteId;
+  if (!siteId) {
+    throw new Error('[Adkit] Missing siteId. Either wrap your app with <AdkitProvider siteId="..."> or pass siteId directly.');
+  }
+  const slotIdentity = deriveSlotIdentity(siteId, slot);
+  const expectedRatio = RATIO_VALUE[aspectRatio];
+  React3.useEffect(() => {
+    if (!ctx) return;
+    const isUnique = ctx.registerSlot(slotIdentity);
+    if (!isUnique) {
+      console.warn(`[Adkit] Duplicate slot "${slot}" detected on this page.`);
+      if (!silent) {
+        sendEvent({ type: "slot_duplicate", siteId, slot, pathname: window.location.pathname });
+      }
+    }
+    return () => ctx.unregisterSlot(slotIdentity);
+  }, [ctx, siteId, slotIdentity, slot, silent]);
+  React3.useEffect(() => {
+    if (silent || mountedSlots.has(slotIdentity)) return;
+    mountedSlots.add(slotIdentity);
+    sendEvent({
+      type: "slot_mount",
+      siteId,
+      slot,
+      pathname: typeof window !== "undefined" ? window.location.pathname : "",
+      price,
+      aspectRatio
+    });
+  }, [siteId, slotIdentity, slot, silent, price, aspectRatio]);
+  React3.useEffect(() => {
+    const ac = new AbortController();
+    fetch(`${SERVE_BASE}/api/serve?slotId=${encodeURIComponent(slotIdentity)}`, { signal: ac.signal }).then((res) => res.json()).then((data) => {
+      if (data && typeof data === "object" && !Array.isArray(data)) {
+        const d = data;
+        if (d.status === "active" && typeof d.imageUrl === "string" && typeof d.linkUrl === "string") {
+          const bookingId = typeof d.bookingId === "string" ? d.bookingId : void 0;
+          setServedAd({ status: "active", bookingId, imageUrl: d.imageUrl, linkUrl: d.linkUrl });
+          return;
+        }
+      }
+      setServedAd({ status: "empty" });
+    }).catch(() => setServedAd({ status: "empty" }));
+    return () => ac.abort();
+  }, [slotIdentity]);
+  React3.useEffect(() => {
+    if (silent) return;
+    const el = slotRef.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && entry.intersectionRatio >= 0.5 && !hasViewedRef.current) {
+          hasViewedRef.current = true;
+          const payload = {
+            type: "slot_view",
+            slotId: slotIdentity,
+            pathname: window.location.pathname,
+            viewport: { width: window.innerWidth, height: window.innerHeight }
+          };
+          if (bookingIdRef.current) payload.bookingId = bookingIdRef.current;
+          sendEvent(payload);
+          observer.disconnect();
+        }
+      },
+      { threshold: [0.5] }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [slotIdentity, siteId, slot, silent]);
+  React3.useEffect(() => {
+    const el = slotRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const checkRatio = () => {
+      const { width, height } = el.getBoundingClientRect();
+      if (width === 0 || height === 0) return;
+      const diff = Math.abs(width / height - expectedRatio) / expectedRatio;
+      if (diff > 0.05) {
+        console.warn("[Adkit] Slot aspect ratio mismatch. External CSS may be interfering.");
+      }
+    };
+    const observer = new ResizeObserver(checkRatio);
+    observer.observe(el);
+    checkRatio();
+    return () => observer.disconnect();
+  }, [expectedRatio]);
+  const [modalOpen, setModalOpen] = React3.useState(false);
+  const sendSlotClick = (bookingId) => {
+    if (typeof window === "undefined") return;
+    const payload = {
+      type: "slot_click",
+      slotId: slotIdentity,
+      pathname: window.location.pathname,
+      viewport: { width: window.innerWidth, height: window.innerHeight }
+    };
+    if (bookingId) payload.bookingId = bookingId;
+    sendEvent(payload);
+  };
+  const handlePlaceholderClick = () => {
+    if (silent) return;
+    sendSlotClick();
+    setModalOpen(true);
+  };
+  const handleAdClick = () => {
+    if (!silent && servedAd.status === "active") sendSlotClick(servedAd.bookingId);
+  };
+  const isDark = theme === "dark" ? true : theme === "light" ? false : systemDark;
+  const styleVars = {
+    "--adkit-aspect": RATIO_CSS[aspectRatio],
+    "--adkit-bg": (_a = styles == null ? void 0 : styles.backgroundColor) != null ? _a : "transparent",
+    "--adkit-text-muted": (_b = styles == null ? void 0 : styles.textColorSecondary) != null ? _b : isDark ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.6)",
+    "--adkit-text": (_c = styles == null ? void 0 : styles.textColorSecondary) != null ? _c : isDark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)",
+    "--adkit-text-strong": (_d = styles == null ? void 0 : styles.textColorPrimary) != null ? _d : isDark ? "rgba(255,255,255,0.9)" : "rgba(0,0,0,0.9)",
+    "--adkit-border": (styles == null ? void 0 : styles.borderColor) ? `color-mix(in srgb, ${styles.borderColor} 40%, transparent)` : isDark ? "rgba(255,255,255,0.22)" : "rgba(0,0,0,0.1)",
+    "--adkit-border-hover": (styles == null ? void 0 : styles.borderColor) ? `color-mix(in srgb, ${styles.borderColor} 60%, transparent)` : isDark ? "rgba(255,255,255,0.38)" : "rgba(0,0,0,0.2)"
+  };
+  const dollars = price / 100;
+  const formattedPrice = Number.isInteger(dollars) ? dollars.toLocaleString() : dollars.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  const isBanner = aspectRatio === "banner";
+  const isActive = servedAd.status === "active";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        ref: slotRef,
+        className: `adkit-slot ${className ? className : "adkit-slot--default-width"}`,
+        style: styleVars,
+        "data-adkit-site": siteId,
+        "data-adkit-slot": slot,
+        "data-adkit-ratio": aspectRatio,
+        "data-adkit-size": size,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "adkit-canvas", children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "a",
+          {
+            id: slot,
+            href: servedAd.linkUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            onClick: handleAdClick,
+            style: { display: "block", width: "100%", height: "100%" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "img",
+              {
+                src: servedAd.imageUrl,
+                alt: "",
+                style: { display: "block", width: "100%", height: "100%", objectFit: "contain" }
+              }
+            )
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { id: `${slot}-placeholder`, className: "adkit-box", role: "button", tabIndex: 0, onClick: handlePlaceholderClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "adkit-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "adkit-label", children: "Your ad here" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "adkit-price", children: [
+            "$",
+            formattedPrice,
+            "/day"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "adkit-cta", children: [
+            isBanner ? "Rent" : "Rent this spot",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "adkit-arrow", children: "\u2192" })
+          ] })
+        ] }) }) })
+      }
+    ),
+    !isActive && modalOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      BookingModal,
+      {
+        siteId,
+        slot,
+        price,
+        onClose: () => setModalOpen(false)
+      }
+    )
+  ] });
+}
+
+// src/AdkitProvider.tsx
+var React4 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AdkitProvider({ siteId, children }) {
+  const slotsRef = React4.useRef(/* @__PURE__ */ new Set());
+  const registerSlot = React4.useCallback((identity) => {
+    if (slotsRef.current.has(identity)) {
+      return false;
+    }
+    slotsRef.current.add(identity);
+    return true;
+  }, []);
+  const unregisterSlot = React4.useCallback((identity) => {
+    slotsRef.current.delete(identity);
+  }, []);
+  const value = React4.useMemo(
+    () => ({ siteId, registerSlot, unregisterSlot }),
+    [siteId, registerSlot, unregisterSlot]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AdkitContext.Provider, { value, children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AdSlot,
+  AdkitProvider,
+  BookingModal,
+  useAdkit
+});