adkit-react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,373 @@
+"use client";
+
+// src/AdSlot.tsx
+import * as React3 from "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
+import * as React from "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
+import * as React2 from "react";
+import { jsx, jsxs } from "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__ */ jsx(
+    "div",
+    {
+      ref: overlayRef,
+      className: "adkit-modal-overlay",
+      onClick: handleOverlayClick,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Book this ad space",
+      children: /* @__PURE__ */ jsxs("div", { className: "adkit-modal-card", children: [
+        /* @__PURE__ */ jsxs("h2", { className: "adkit-modal-headline", children: [
+          "Advertise directly on ",
+          typeof window !== "undefined" ? window.location.hostname : "this site",
+          "."
+        ] }),
+        /* @__PURE__ */ 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__ */ jsx("strong", { children: "right here" }),
+          "."
+        ] }),
+        /* @__PURE__ */ jsxs("ul", { className: "adkit-modal-bullets", children: [
+          /* @__PURE__ */ jsx("li", { children: "Exclusive placement, no other ads will be shown" }),
+          /* @__PURE__ */ jsx("li", { children: "Fixed price \u2014 no bidding, auctions, or fees" }),
+          /* @__PURE__ */ jsx("li", { children: "See your ad before you pay, no commitments" }),
+          /* @__PURE__ */ jsx("li", { children: "Track your ad's performance on your dashboard" }),
+          /* @__PURE__ */ jsx("li", { children: "Guaranteed to display 24/7 or your money back" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "adkit-modal-price-section", children: [
+          /* @__PURE__ */ jsxs("span", { className: "adkit-modal-price", children: [
+            formatted,
+            " / day"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "adkit-modal-price-helper", children: "Zero commitment. No minimum booking period." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "adkit-modal-actions", children: [
+          /* @__PURE__ */ jsx("button", { className: "adkit-modal-cta", onClick: handleBook, children: "Book this ad" }),
+          /* @__PURE__ */ jsx("span", { className: "adkit-modal-redirect-hint", children: "You'll be redirected to Adkit to upload your ad and choose dates." }),
+          /* @__PURE__ */ jsx("button", { className: "adkit-modal-cancel", onClick: onClose, children: "Cancel" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "adkit-modal-footer", children: [
+          "Powered by ",
+          /* @__PURE__ */ jsx("a", { href: "https://adkit.dev", target: "_blank", rel: "noopener noreferrer", children: "Adkit" })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/AdSlot.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "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__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "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__ */ jsx2("div", { className: "adkit-canvas", children: isActive ? /* @__PURE__ */ jsx2(
+          "a",
+          {
+            id: slot,
+            href: servedAd.linkUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            onClick: handleAdClick,
+            style: { display: "block", width: "100%", height: "100%" },
+            children: /* @__PURE__ */ jsx2(
+              "img",
+              {
+                src: servedAd.imageUrl,
+                alt: "",
+                style: { display: "block", width: "100%", height: "100%", objectFit: "contain" }
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx2("div", { id: `${slot}-placeholder`, className: "adkit-box", role: "button", tabIndex: 0, onClick: handlePlaceholderClick, children: /* @__PURE__ */ jsxs2("div", { className: "adkit-content", children: [
+          /* @__PURE__ */ jsx2("div", { className: "adkit-label", children: "Your ad here" }),
+          /* @__PURE__ */ jsxs2("div", { className: "adkit-price", children: [
+            "$",
+            formattedPrice,
+            "/day"
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "adkit-cta", children: [
+            isBanner ? "Rent" : "Rent this spot",
+            /* @__PURE__ */ jsx2("span", { className: "adkit-arrow", children: "\u2192" })
+          ] })
+        ] }) }) })
+      }
+    ),
+    !isActive && modalOpen && /* @__PURE__ */ jsx2(
+      BookingModal,
+      {
+        siteId,
+        slot,
+        price,
+        onClose: () => setModalOpen(false)
+      }
+    )
+  ] });
+}
+
+// src/AdkitProvider.tsx
+import * as React4 from "react";
+import { jsx as jsx3 } from "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__ */ jsx3(AdkitContext.Provider, { value, children });
+}
+export {
+  AdSlot,
+  AdkitProvider,
+  BookingModal,
+  useAdkit
+};

package/dist/styles.css

@@ -0,0 +1,284 @@
+/* src/styles.css */
+.adkit-slot {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  flex: 0 0 auto;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Noto Sans",
+    Helvetica,
+    Arial,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+.adkit-slot--default-width {
+  width: 100%;
+}
+.adkit-slot,
+.adkit-slot *,
+.adkit-canvas {
+  height: auto !important;
+  min-height: 0 !important;
+  max-height: none !important;
+}
+.adkit-canvas {
+  position: relative;
+  width: 100%;
+  aspect-ratio: var(--adkit-aspect) !important;
+  overflow: hidden;
+  background: var(--adkit-bg);
+}
+.adkit-canvas img {
+  width: auto !important;
+  height: auto !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  object-fit: contain !important;
+}
+.adkit-box {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px dashed var(--adkit-border);
+  border-radius: 10px;
+  background: transparent;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+.adkit-box:hover {
+  border-color: var(--adkit-border-hover);
+}
+.adkit-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: var(--adkit-padding);
+  gap: var(--adkit-gap);
+}
+.adkit-slot[data-adkit-ratio=banner] .adkit-content {
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 12px;
+}
+.adkit-slot[data-adkit-ratio=banner] .adkit-cta {
+  margin-left: auto;
+  margin-top: 0;
+}
+.adkit-label {
+  font-size: var(--adkit-label-size);
+  line-height: 1.2;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: var(--adkit-text-muted);
+}
+.adkit-price {
+  font-size: var(--adkit-price-size);
+  line-height: 1.1;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--adkit-text-strong);
+}
+.adkit-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: var(--adkit-cta-mt);
+  font-size: var(--adkit-cta-size);
+  line-height: 1.25;
+  font-weight: 500;
+  color: var(--adkit-text);
+  transition: color 0.15s ease;
+}
+.adkit-box:hover .adkit-cta {
+  color: var(--adkit-text-strong);
+}
+.adkit-arrow {
+  opacity: 0.5;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+.adkit-box:hover .adkit-arrow {
+  transform: translateX(2px);
+  opacity: 0.8;
+}
+.adkit-slot[data-adkit-size=sm] {
+  --adkit-label-size: 7px;
+  --adkit-price-size: 10px;
+  --adkit-cta-size: 6px;
+  --adkit-gap: 2px;
+  --adkit-cta-mt: 4px;
+  --adkit-padding: 0 8px;
+}
+.adkit-slot[data-adkit-size=md] {
+  --adkit-label-size: 9px;
+  --adkit-price-size: 14px;
+  --adkit-cta-size: 8px;
+  --adkit-gap: 4px;
+  --adkit-cta-mt: 8px;
+  --adkit-padding: 0 12px;
+}
+.adkit-slot[data-adkit-size=lg] {
+  --adkit-label-size: 11px;
+  --adkit-price-size: 18px;
+  --adkit-cta-size: 10px;
+  --adkit-gap: 4px;
+  --adkit-cta-mt: 10px;
+  --adkit-padding: 0 12px;
+}
+.adkit-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 999999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Noto Sans",
+    Helvetica,
+    Arial,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  animation: adkit-fade-in 0.18s ease-out;
+}
+.adkit-modal-card {
+  position: relative;
+  width: 92%;
+  max-width: 420px;
+  padding: 32px 28px 24px;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  color: #1a1a1a;
+  animation: adkit-slide-up 0.22s ease-out;
+}
+@keyframes adkit-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes adkit-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+.adkit-modal-headline {
+  margin: 0 0 8px;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+.adkit-modal-subhead {
+  margin: 0 0 20px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #555;
+}
+.adkit-modal-bullets {
+  margin: 0 0 20px;
+  padding: 0;
+  list-style: none;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #333;
+}
+.adkit-modal-bullets li {
+  margin-bottom: 4px;
+  padding-left: 24px;
+  position: relative;
+}
+.adkit-modal-bullets li::before {
+  content: "\2713";
+  position: absolute;
+  left: 0;
+  font-weight: 700;
+  color: #333;
+}
+.adkit-modal-price-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 24px;
+}
+.adkit-modal-price {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: #111;
+}
+.adkit-modal-price-helper {
+  font-size: 12px;
+  color: #888;
+}
+.adkit-modal-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.adkit-modal-cta {
+  display: block;
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  background: #111;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s ease;
+}
+.adkit-modal-cta:hover {
+  background: #333;
+}
+.adkit-modal-redirect-hint {
+  display: block;
+  text-align: center;
+  font-size: 11px;
+  color: #999;
+  line-height: 1.4;
+}
+.adkit-modal-cancel {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #888;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: center;
+  transition: color 0.15s ease;
+}
+.adkit-modal-cancel:hover {
+  color: #333;
+}
+.adkit-modal-footer {
+  margin-top: 16px;
+  text-align: center;
+  font-size: 11px;
+  color: #bbb;
+  letter-spacing: 0.02em;
+}

package/dist/styles.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+
+export {  }