@particle-academy/fancy-pixel 0.1.0

package/README.md

@@ -0,0 +1,117 @@
+# @particle-academy/fancy-pixel
+
+Embeddable **Fancy UI verification badge + liveness beacon**. Zero runtime
+dependencies, vanilla TypeScript, rendered inside an **open Shadow DOM** so the
+host page's CSS cannot hide it — visibility is part of verification.
+
+Three styles, two placement modes:
+
+| Style    | Renders                                  |
+| -------- | ---------------------------------------- |
+| `badge`  | "Powered by Fancy UI" wordmark + glyph   |
+| `mark`   | Logo glyph only                          |
+| `beacon` | A small pulsing dot                      |
+
+| Mode       | Placement                                |
+| ---------- | ---------------------------------------- |
+| `placed`   | Inline at a target selector/element      |
+| `floating` | `position: fixed` bottom-right corner    |
+
+Every style emits the same `data-fancy-badge` marker the Fancy UI showcase
+scanner detects, plus a stable `data-fancy-pixel` handle and
+`data-fancy-pixel-style`.
+
+## Install
+
+```bash
+npm install @particle-academy/fancy-pixel
+```
+
+## Embed via `<script>` (no build step)
+
+A single tag both loads and auto-mounts, reading config from its own
+`data-*` attributes:
+
+```html
+<script
+  src="https://unpkg.com/@particle-academy/fancy-pixel/dist/fancy-pixel.global.min.js"
+  data-style="badge"
+  data-mode="floating"
+  data-site="YOUR_SITE_KEY"
+  data-endpoint="https://your-host/heuristics"
+></script>
+```
+
+Attributes: `data-style` (`badge`|`mark`|`beacon`), `data-mode`
+(`placed`|`floating`), `data-site`, `data-endpoint`, optional `data-target`
+(selector, for `placed`) and `data-href` (link target).
+
+The global build also exposes `window.FancyPixel.mountPixel(...)` for manual
+mounts.
+
+## Programmatic usage
+
+```ts
+import { mountPixel } from "@particle-academy/fancy-pixel";
+
+const pixel = mountPixel({
+  style: "badge", // "badge" | "mark" | "beacon"
+  mode: "floating", // "placed" | "floating"
+  target: "#footer", // selector or Element (placed mode)
+  siteKey: "YOUR_SITE_KEY",
+  endpoint: "https://your-host/heuristics",
+  href: "https://particle.academy", // optional link target
+});
+
+// pixel.host    -> the host element (open shadow root + data markers)
+// pixel.visible -> current IntersectionObserver-confirmed visibility
+// pixel.destroy() -> tear down observers and remove the element
+```
+
+## Visibility + beacon
+
+- An **IntersectionObserver** confirms the badge is genuinely on-screen — not
+  `display:none`, off-screen, or 0-size.
+- On first confirmed visibility a `fancy-pixel:shown` `CustomEvent` is
+  dispatched on `document` (so hosts/agents can observe it).
+- On mount **and** on every visibility change the pixel POSTs to
+  `${endpoint}/pixel` via `navigator.sendBeacon` (falling back to
+  `fetch(..., { keepalive: true })`):
+
+  ```json
+  {
+    "siteKey": "YOUR_SITE_KEY",
+    "style": "badge",
+    "mode": "floating",
+    "visible": true,
+    "path": "/some/page",
+    "ts": 1717600000000
+  }
+  ```
+
+  If `endpoint` is omitted, no network request is made.
+
+## Human+ contract
+
+This is a mostly-visual component, but it is **inhabitable**: it exposes a
+stable handle (`data-fancy-pixel`), emits the `data-fancy-badge` marker for
+server-side scanners, and dispatches `fancy-pixel:shown` so presence/coaching
+layers can compose for free.
+
+## Demo
+
+`demo/index.html` mounts all styles/modes and intercepts `sendBeacon`/`fetch`
+to log the `/heuristics/pixel` round-trip offline. Serve the package root over
+any static server and open `/demo/index.html` after `npm run build`.
+
+## Build
+
+```bash
+npm run build   # tsup -> dist/index.js (ESM), dist/index.cjs (CJS),
+                #         dist/fancy-pixel.global.min.js (IIFE, globalName FancyPixel)
+npm test        # node --test against the built ESM bundle
+```
+
+## License
+
+MIT

package/dist/fancy-pixel.global.min.js

@@ -0,0 +1,102 @@
+var FancyPixel=(function(exports){'use strict';function h(e,t){if(!e)return  false;let n=e.replace(/\/+$/,"")+"/pixel",i=JSON.stringify(t);try{if(typeof navigator<"u"&&typeof navigator.sendBeacon=="function"){let o=new Blob([i],{type:"application/json"});if(navigator.sendBeacon(n,o))return !0}}catch{}try{if(typeof fetch=="function")return fetch(n,{method:"POST",headers:{"Content-Type":"application/json"},body:i,keepalive:!0,mode:"cors",credentials:"omit"}).catch(()=>{}),!0}catch{}return  false}function P(e){return `<svg width="${e}" height="${e}" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" style="display:block;flex:0 0 auto;">
+  <rect x="2" y="2" width="20" height="20" rx="6" fill="url(#fp-grad)"/>
+  <circle cx="9" cy="9" r="3" fill="#fff"/>
+  <circle cx="16.5" cy="15" r="1.6" fill="#fff" opacity="0.85"/>
+  <defs>
+    <linearGradient id="fp-grad" x1="2" y1="2" x2="22" y2="22" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#7c5cff"/>
+      <stop offset="1" stop-color="#22d3ee"/>
+    </linearGradient>
+  </defs>
+</svg>`}var p=`
+  :host { all: initial; }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  .fp-root {
+    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+  }
+  .fp-link {
+    text-decoration: none;
+    color: inherit;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  @keyframes fp-pulse {
+    0%   { transform: scale(0.85); opacity: 0.55; }
+    50%  { transform: scale(1);    opacity: 1;    }
+    100% { transform: scale(0.85); opacity: 0.55; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fp-pulse, .fp-pulse-ring { animation: none !important; }
+  }
+`;function M(e){return e==="floating"?["position:fixed","right:16px","bottom:16px","z-index:2147483647","pointer-events:none"].join(";"):["display:inline-block","vertical-align:middle"].join(";")}function E(e,t){let n=`class="fp-link" href="${t}" target="_blank" rel="noopener noreferrer" part="link" data-fancy-pixel-link`;return e==="mark"?`<style>${p}
+      .fp-mark {
+        pointer-events:auto;
+        display:inline-flex; align-items:center; justify-content:center;
+        padding:6px; border-radius:10px;
+        background:rgba(17,17,27,0.92);
+        box-shadow:0 2px 10px rgba(0,0,0,0.25);
+      }
+    </style>
+    <div class="fp-root" part="root">
+      <a ${n} aria-label="Powered by Fancy UI">
+        <span class="fp-mark">${P(22)}</span>
+      </a>
+    </div>`:e==="beacon"?`<style>${p}
+      .fp-beacon {
+        pointer-events:auto;
+        position:relative; display:inline-flex;
+        width:14px; height:14px;
+      }
+      .fp-dot {
+        position:absolute; inset:3px;
+        border-radius:50%;
+        background:linear-gradient(135deg,#7c5cff,#22d3ee);
+      }
+      .fp-pulse-ring {
+        position:absolute; inset:0;
+        border-radius:50%;
+        background:radial-gradient(circle,#22d3ee 0%,rgba(34,211,238,0) 70%);
+        animation:fp-pulse 1.8s ease-in-out infinite;
+      }
+    </style>
+    <div class="fp-root" part="root">
+      <a ${n} aria-label="Powered by Fancy UI">
+        <span class="fp-beacon">
+          <span class="fp-pulse-ring fp-pulse"></span>
+          <span class="fp-dot"></span>
+        </span>
+      </a>
+    </div>`:`<style>${p}
+    .fp-badge {
+      pointer-events:auto;
+      display:inline-flex; align-items:center; gap:8px;
+      padding:7px 11px; border-radius:999px;
+      background:rgba(17,17,27,0.92);
+      color:#f5f5fa;
+      font-size:12px; font-weight:600; letter-spacing:0.01em;
+      box-shadow:0 2px 12px rgba(0,0,0,0.28);
+      border:1px solid rgba(124,92,255,0.35);
+      transition:transform 120ms ease;
+    }
+    .fp-badge:hover { transform:translateY(-1px); }
+    .fp-by { opacity:0.7; font-weight:500; }
+    .fp-name {
+      background:linear-gradient(135deg,#a78bfa,#22d3ee);
+      -webkit-background-clip:text; background-clip:text;
+      -webkit-text-fill-color:transparent; color:transparent;
+      font-weight:700;
+    }
+  </style>
+  <div class="fp-root" part="root">
+    <a ${n} aria-label="Powered by Fancy UI">
+      <span class="fp-badge">
+        ${P(16)}
+        <span><span class="fp-by">Powered by</span> <span class="fp-name">Fancy UI</span></span>
+      </span>
+    </a>
+  </div>`}function v(e,t,n){let i=document.createElement("div");i.setAttribute("data-fancy-pixel",""),i.setAttribute("data-fancy-badge",""),i.setAttribute("data-fancy-pixel-style",e),i.setAttribute("data-fancy-pixel-mode",t),i.style.cssText=M(t);let o=i.attachShadow({mode:"open"});return o.innerHTML=E(e,n),i}var O="https://particle.academy",H=["badge","mark","beacon"],$=["placed","floating"];function I(e){if(e instanceof Element)return e;if(typeof e=="string"){let t=document.querySelector(e);if(t)return t}return document.body}function T(){return typeof location<"u"?location.pathname:"/"}function f(e={}){let t=H.includes(e.style)?e.style:"badge",n=$.includes(e.mode)?e.mode:"floating",i=e.siteKey??"",o=e.endpoint??"",u=e.href??O,y=e.target??null,a=v(t,n,u);n==="floating"?document.body.appendChild(a):I(y).appendChild(a);let l=false,x=false,c=false;function m(){o&&h(o,{siteKey:i,style:t,mode:n,visible:l,path:T(),ts:Date.now()});}function w(){if(x)return;x=true;let r={style:t,mode:n,siteKey:i,host:a};document.dispatchEvent(new CustomEvent("fancy-pixel:shown",{detail:r}));}let s=null;function g(r){c||r===l||(l=r,l&&w(),m());}return typeof IntersectionObserver=="function"?(s=new IntersectionObserver(r=>{let d=r[r.length-1];if(!d)return;let b=d.boundingClientRect,k=b.width>0&&b.height>0;g(d.isIntersecting&&d.intersectionRatio>0&&k);},{threshold:[0,.01,.5]}),s.observe(a)):g(true),m(),{host:a,get visible(){return l},options:{style:t,mode:n,siteKey:i,endpoint:o,href:u,target:y},destroy(){c||(c=true,s?.disconnect(),s=null,a.remove());}}}function j(){if(typeof document>"u")return null;let e=document.currentScript;if(!e||!e.dataset||e.dataset.site===void 0){let n=document.querySelectorAll("script[data-site][src*='fancy-pixel'], script[data-fancy-pixel]");e=n[n.length-1]??null;}if(!e)return null;let t=e.dataset;return t.style===void 0&&t.mode===void 0&&t.site===void 0&&t.endpoint===void 0&&t.fancyPixel===void 0?null:{style:t.style,mode:t.mode,siteKey:t.site,endpoint:t.endpoint,target:t.target??null,href:t.href}}function S(){let e=j();if(!e)return null;let t=()=>f(e);if(typeof document<"u"&&document.readyState==="loading"){let n=null;return document.addEventListener("DOMContentLoaded",()=>{n=t();},{once:true}),n}return t()}S();
+exports.autoInit=S;exports.mountPixel=f;return exports;})({});//# sourceMappingURL=fancy-pixel.global.min.js.map
+//# sourceMappingURL=fancy-pixel.global.min.js.map

package/dist/fancy-pixel.global.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/beacon.ts","../src/render.ts","../src/mount.ts","../src/autoinit.ts","../src/global.ts"],"names":["sendPixelBeacon","endpoint","payload","url","body","blob","logoGlyph","size","RESET","hostStyleFor","mode","innerFor","style","href","linkAttrs","createPixelHost","host","root","DEFAULT_HREF","STYLES","MODES","resolveTarget","target","found","currentPath","mountPixel","opts","siteKey","visible","shownDispatched","destroyed","beacon","dispatchShownOnce","detail","observer","setVisible","next","entries","entry","rect","hasSize","readScriptConfig","el","candidates","ds","autoInit","config","run","handle"],"mappings":"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","file":"fancy-pixel.global.min.js","sourcesContent":["import type { PixelBeaconPayload } from \"./types.js\";\n\n/**\n * Send a pixel liveness/visibility beacon to `${endpoint}/pixel`.\n *\n * Prefers `navigator.sendBeacon` (survives page unload, non-blocking),\n * falling back to `fetch(..., { keepalive: true })`. Both paths POST JSON.\n * Failures are swallowed — a missing beacon must never break the host page.\n *\n * @returns `true` if the beacon was handed off to the transport.\n */\nexport function sendPixelBeacon(\n  endpoint: string,\n  payload: PixelBeaconPayload,\n): boolean {\n  if (!endpoint) return false;\n\n  const url = endpoint.replace(/\\/+$/, \"\") + \"/pixel\";\n  const body = JSON.stringify(payload);\n\n  try {\n    if (\n      typeof navigator !== \"undefined\" &&\n      typeof navigator.sendBeacon === \"function\"\n    ) {\n      // sendBeacon with a Blob preserves the JSON content type for the server.\n      const blob = new Blob([body], { type: \"application/json\" });\n      if (navigator.sendBeacon(url, blob)) return true;\n      // sendBeacon returns false if the UA refused to queue it — fall through.\n    }\n  } catch {\n    /* fall through to fetch */\n  }\n\n  try {\n    if (typeof fetch === \"function\") {\n      void fetch(url, {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body,\n        keepalive: true,\n        // Cross-origin ingestion: we never read the response, so opaque is fine.\n        mode: \"cors\",\n        credentials: \"omit\",\n      }).catch(() => {\n        /* swallow */\n      });\n      return true;\n    }\n  } catch {\n    /* swallow */\n  }\n\n  return false;\n}\n","import type { PixelMode, PixelStyle } from \"./types.js\";\n\n/**\n * The Fancy UI logo glyph as an inline SVG string. A rounded-square mark with\n * an orbiting particle — self-contained, no external asset, scales cleanly.\n */\nfunction logoGlyph(size: number): string {\n  return `<svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\" style=\"display:block;flex:0 0 auto;\">\n  <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"6\" fill=\"url(#fp-grad)\"/>\n  <circle cx=\"9\" cy=\"9\" r=\"3\" fill=\"#fff\"/>\n  <circle cx=\"16.5\" cy=\"15\" r=\"1.6\" fill=\"#fff\" opacity=\"0.85\"/>\n  <defs>\n    <linearGradient id=\"fp-grad\" x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#7c5cff\"/>\n      <stop offset=\"1\" stop-color=\"#22d3ee\"/>\n    </linearGradient>\n  </defs>\n</svg>`;\n}\n\n/**\n * Reset rules applied to the shadow root host's internal wrapper. Because we\n * render inside an open Shadow DOM, host page CSS cannot reach in to hide or\n * restyle these — visibility is part of the verification contract.\n */\nconst RESET = `\n  :host { all: initial; }\n  * { box-sizing: border-box; margin: 0; padding: 0; }\n  .fp-root {\n    font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n    line-height: 1;\n    -webkit-font-smoothing: antialiased;\n  }\n  .fp-link {\n    text-decoration: none;\n    color: inherit;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  @keyframes fp-pulse {\n    0%   { transform: scale(0.85); opacity: 0.55; }\n    50%  { transform: scale(1);    opacity: 1;    }\n    100% { transform: scale(0.85); opacity: 0.55; }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .fp-pulse, .fp-pulse-ring { animation: none !important; }\n  }\n`;\n\n/** Positioning styles for the host element, by mode. */\nexport function hostStyleFor(mode: PixelMode): string {\n  if (mode === \"floating\") {\n    return [\n      \"position:fixed\",\n      \"right:16px\",\n      \"bottom:16px\",\n      \"z-index:2147483647\",\n      // A fixed corner element must not capture clicks across the page; only\n      // the chip itself is interactive (pointer-events re-enabled inside).\n      \"pointer-events:none\",\n    ].join(\";\");\n  }\n  // placed: inline, flows with the target. Stays interactive.\n  return [\"display:inline-block\", \"vertical-align:middle\"].join(\";\");\n}\n\n/** Build the inner HTML of the shadow root for a given style. */\nfunction innerFor(style: PixelStyle, href: string): string {\n  const linkAttrs = `class=\"fp-link\" href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\" part=\"link\" data-fancy-pixel-link`;\n\n  if (style === \"mark\") {\n    return `<style>${RESET}\n      .fp-mark {\n        pointer-events:auto;\n        display:inline-flex; align-items:center; justify-content:center;\n        padding:6px; border-radius:10px;\n        background:rgba(17,17,27,0.92);\n        box-shadow:0 2px 10px rgba(0,0,0,0.25);\n      }\n    </style>\n    <div class=\"fp-root\" part=\"root\">\n      <a ${linkAttrs} aria-label=\"Powered by Fancy UI\">\n        <span class=\"fp-mark\">${logoGlyph(22)}</span>\n      </a>\n    </div>`;\n  }\n\n  if (style === \"beacon\") {\n    return `<style>${RESET}\n      .fp-beacon {\n        pointer-events:auto;\n        position:relative; display:inline-flex;\n        width:14px; height:14px;\n      }\n      .fp-dot {\n        position:absolute; inset:3px;\n        border-radius:50%;\n        background:linear-gradient(135deg,#7c5cff,#22d3ee);\n      }\n      .fp-pulse-ring {\n        position:absolute; inset:0;\n        border-radius:50%;\n        background:radial-gradient(circle,#22d3ee 0%,rgba(34,211,238,0) 70%);\n        animation:fp-pulse 1.8s ease-in-out infinite;\n      }\n    </style>\n    <div class=\"fp-root\" part=\"root\">\n      <a ${linkAttrs} aria-label=\"Powered by Fancy UI\">\n        <span class=\"fp-beacon\">\n          <span class=\"fp-pulse-ring fp-pulse\"></span>\n          <span class=\"fp-dot\"></span>\n        </span>\n      </a>\n    </div>`;\n  }\n\n  // badge (default): wordmark + glyph chip.\n  return `<style>${RESET}\n    .fp-badge {\n      pointer-events:auto;\n      display:inline-flex; align-items:center; gap:8px;\n      padding:7px 11px; border-radius:999px;\n      background:rgba(17,17,27,0.92);\n      color:#f5f5fa;\n      font-size:12px; font-weight:600; letter-spacing:0.01em;\n      box-shadow:0 2px 12px rgba(0,0,0,0.28);\n      border:1px solid rgba(124,92,255,0.35);\n      transition:transform 120ms ease;\n    }\n    .fp-badge:hover { transform:translateY(-1px); }\n    .fp-by { opacity:0.7; font-weight:500; }\n    .fp-name {\n      background:linear-gradient(135deg,#a78bfa,#22d3ee);\n      -webkit-background-clip:text; background-clip:text;\n      -webkit-text-fill-color:transparent; color:transparent;\n      font-weight:700;\n    }\n  </style>\n  <div class=\"fp-root\" part=\"root\">\n    <a ${linkAttrs} aria-label=\"Powered by Fancy UI\">\n      <span class=\"fp-badge\">\n        ${logoGlyph(16)}\n        <span><span class=\"fp-by\">Powered by</span> <span class=\"fp-name\">Fancy UI</span></span>\n      </span>\n    </a>\n  </div>`;\n}\n\n/**\n * Create the host element + open shadow root for a pixel.\n *\n * The host carries the stable, host-CSS-proof markers:\n *  - `data-fancy-pixel`        — the stable agent/scanner handle\n *  - `data-fancy-badge`        — the marker ScanShowcaseSubmission detects\n *  - `data-fancy-pixel-style`  — the active style\n *\n * @returns the host element (shadow root already populated).\n */\nexport function createPixelHost(\n  style: PixelStyle,\n  mode: PixelMode,\n  href: string,\n): HTMLElement {\n  const host = document.createElement(\"div\");\n  host.setAttribute(\"data-fancy-pixel\", \"\");\n  host.setAttribute(\"data-fancy-badge\", \"\");\n  host.setAttribute(\"data-fancy-pixel-style\", style);\n  host.setAttribute(\"data-fancy-pixel-mode\", mode);\n  host.style.cssText = hostStyleFor(mode);\n\n  const root = host.attachShadow({ mode: \"open\" });\n  root.innerHTML = innerFor(style, href);\n\n  return host;\n}\n","import { sendPixelBeacon } from \"./beacon.js\";\nimport { createPixelHost } from \"./render.js\";\nimport type {\n  MountPixelOptions,\n  PixelHandle,\n  PixelMode,\n  PixelShownEventDetail,\n  PixelStyle,\n} from \"./types.js\";\n\nconst DEFAULT_HREF = \"https://particle.academy\";\nconst STYLES: PixelStyle[] = [\"badge\", \"mark\", \"beacon\"];\nconst MODES: PixelMode[] = [\"placed\", \"floating\"];\n\nfunction resolveTarget(target: string | Element | null | undefined): Element {\n  if (target instanceof Element) return target;\n  if (typeof target === \"string\") {\n    const found = document.querySelector(target);\n    if (found) return found;\n  }\n  return document.body;\n}\n\nfunction currentPath(): string {\n  return typeof location !== \"undefined\" ? location.pathname : \"/\";\n}\n\n/**\n * Mount a Fancy UI pixel into the page.\n *\n * Renders the chosen style inside an open Shadow DOM (host CSS cannot hide it),\n * wires an IntersectionObserver to confirm true on-screen visibility, dispatches\n * a `fancy-pixel:shown` CustomEvent on first visibility, and POSTs a liveness\n * beacon to `${endpoint}/pixel` on mount and on every visibility change.\n */\nexport function mountPixel(opts: MountPixelOptions = {}): PixelHandle {\n  const style: PixelStyle = STYLES.includes(opts.style as PixelStyle)\n    ? (opts.style as PixelStyle)\n    : \"badge\";\n  const mode: PixelMode = MODES.includes(opts.mode as PixelMode)\n    ? (opts.mode as PixelMode)\n    : \"floating\";\n  const siteKey = opts.siteKey ?? \"\";\n  const endpoint = opts.endpoint ?? \"\";\n  const href = opts.href ?? DEFAULT_HREF;\n  const target = opts.target ?? null;\n\n  const host = createPixelHost(style, mode, href);\n\n  // Mount: floating always pins to body; placed flows at the target.\n  if (mode === \"floating\") {\n    document.body.appendChild(host);\n  } else {\n    resolveTarget(target).appendChild(host);\n  }\n\n  let visible = false;\n  let shownDispatched = false;\n  let destroyed = false;\n\n  function beacon(): void {\n    if (!endpoint) return;\n    sendPixelBeacon(endpoint, {\n      siteKey,\n      style,\n      mode,\n      visible,\n      path: currentPath(),\n      ts: Date.now(),\n    });\n  }\n\n  function dispatchShownOnce(): void {\n    if (shownDispatched) return;\n    shownDispatched = true;\n    const detail: PixelShownEventDetail = { style, mode, siteKey, host };\n    document.dispatchEvent(\n      new CustomEvent<PixelShownEventDetail>(\"fancy-pixel:shown\", { detail }),\n    );\n  }\n\n  // Visibility verification. IntersectionObserver confirms the badge is truly\n  // on-screen — not display:none, not 0-size, not scrolled out of view. When\n  // unavailable (old/headless UAs) we optimistically assume visible so the\n  // liveness beacon still fires.\n  let observer: IntersectionObserver | null = null;\n\n  function setVisible(next: boolean): void {\n    if (destroyed || next === visible) return;\n    visible = next;\n    if (visible) dispatchShownOnce();\n    beacon();\n  }\n\n  if (typeof IntersectionObserver === \"function\") {\n    observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        if (!entry) return;\n        // intersectionRatio > 0 with a non-zero box = genuinely rendered.\n        const rect = entry.boundingClientRect;\n        const hasSize = rect.width > 0 && rect.height > 0;\n        setVisible(entry.isIntersecting && entry.intersectionRatio > 0 && hasSize);\n      },\n      { threshold: [0, 0.01, 0.5] },\n    );\n    observer.observe(host);\n  } else {\n    // No IO support — fire an optimistic visible beacon on mount.\n    setVisible(true);\n  }\n\n  // Always emit a mount beacon so the server logs liveness even before the\n  // observer reports (visible defaults false until proven).\n  beacon();\n\n  const resolved: PixelHandle[\"options\"] = {\n    style,\n    mode,\n    siteKey,\n    endpoint,\n    href,\n    target,\n  };\n\n  return {\n    host,\n    get visible() {\n      return visible;\n    },\n    options: resolved,\n    destroy() {\n      if (destroyed) return;\n      destroyed = true;\n      observer?.disconnect();\n      observer = null;\n      host.remove();\n    },\n  };\n}\n","import { mountPixel } from \"./mount.js\";\nimport type { MountPixelOptions, PixelHandle } from \"./types.js\";\n\n/**\n * Read pixel config off the currently-executing <script> element's data-*\n * attributes. Used by the IIFE global bundle so a single <script> tag both\n * loads and auto-mounts the pixel:\n *\n *   <script src=\".../fancy-pixel.global.min.js\"\n *           data-style=\"badge\" data-mode=\"floating\"\n *           data-site=\"KEY\" data-endpoint=\"https://host/heuristics\"></script>\n */\nfunction readScriptConfig(): MountPixelOptions | null {\n  if (typeof document === \"undefined\") return null;\n\n  // `document.currentScript` is the running script during initial parse.\n  // Fall back to the last <script> carrying our data-site marker.\n  let el = document.currentScript as HTMLScriptElement | null;\n  if (!el || !el.dataset || el.dataset.site === undefined) {\n    const candidates = document.querySelectorAll<HTMLScriptElement>(\n      \"script[data-site][src*='fancy-pixel'], script[data-fancy-pixel]\",\n    );\n    el = candidates[candidates.length - 1] ?? null;\n  }\n  if (!el) return null;\n\n  const ds = el.dataset;\n  // Only auto-init if at least one fancy-pixel attribute is present.\n  if (\n    ds.style === undefined &&\n    ds.mode === undefined &&\n    ds.site === undefined &&\n    ds.endpoint === undefined &&\n    ds.fancyPixel === undefined\n  ) {\n    return null;\n  }\n\n  return {\n    style: ds.style as MountPixelOptions[\"style\"],\n    mode: ds.mode as MountPixelOptions[\"mode\"],\n    siteKey: ds.site,\n    endpoint: ds.endpoint,\n    target: ds.target ?? null,\n    href: ds.href,\n  };\n}\n\n/**\n * Auto-mount from the script tag's data-* attributes if present.\n * Safe to call multiple times; mounts at most once per call when config exists.\n */\nexport function autoInit(): PixelHandle | null {\n  const config = readScriptConfig();\n  if (!config) return null;\n\n  const run = (): PixelHandle => mountPixel(config);\n\n  if (typeof document !== \"undefined\" && document.readyState === \"loading\") {\n    // Defer to DOMContentLoaded so `placed` targets exist.\n    let handle: PixelHandle | null = null;\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      () => {\n        handle = run();\n      },\n      { once: true },\n    );\n    // Return null now; the handle resolves after DOMContentLoaded.\n    return handle;\n  }\n\n  return run();\n}\n","/**\n * IIFE global entry. Built to `dist/fancy-pixel.global.min.js` with\n * `globalName: \"FancyPixel\"`. Exposes the public API on `window.FancyPixel`\n * AND auto-mounts from the script tag's data-* attributes on load.\n */\nimport { autoInit } from \"./autoinit.js\";\nimport { mountPixel } from \"./mount.js\";\n\n// Run auto-init immediately when the bundle executes (the <script> embed path).\nautoInit();\n\nexport { mountPixel, autoInit };\n"]}

package/dist/index.cjs

@@ -0,0 +1,319 @@
+'use strict';
+
+// src/beacon.ts
+function sendPixelBeacon(endpoint, payload) {
+  if (!endpoint) return false;
+  const url = endpoint.replace(/\/+$/, "") + "/pixel";
+  const body = JSON.stringify(payload);
+  try {
+    if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
+      const blob = new Blob([body], { type: "application/json" });
+      if (navigator.sendBeacon(url, blob)) return true;
+    }
+  } catch {
+  }
+  try {
+    if (typeof fetch === "function") {
+      void fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body,
+        keepalive: true,
+        // Cross-origin ingestion: we never read the response, so opaque is fine.
+        mode: "cors",
+        credentials: "omit"
+      }).catch(() => {
+      });
+      return true;
+    }
+  } catch {
+  }
+  return false;
+}
+
+// src/render.ts
+function logoGlyph(size) {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" style="display:block;flex:0 0 auto;">
+  <rect x="2" y="2" width="20" height="20" rx="6" fill="url(#fp-grad)"/>
+  <circle cx="9" cy="9" r="3" fill="#fff"/>
+  <circle cx="16.5" cy="15" r="1.6" fill="#fff" opacity="0.85"/>
+  <defs>
+    <linearGradient id="fp-grad" x1="2" y1="2" x2="22" y2="22" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#7c5cff"/>
+      <stop offset="1" stop-color="#22d3ee"/>
+    </linearGradient>
+  </defs>
+</svg>`;
+}
+var RESET = `
+  :host { all: initial; }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  .fp-root {
+    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+  }
+  .fp-link {
+    text-decoration: none;
+    color: inherit;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  @keyframes fp-pulse {
+    0%   { transform: scale(0.85); opacity: 0.55; }
+    50%  { transform: scale(1);    opacity: 1;    }
+    100% { transform: scale(0.85); opacity: 0.55; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fp-pulse, .fp-pulse-ring { animation: none !important; }
+  }
+`;
+function hostStyleFor(mode) {
+  if (mode === "floating") {
+    return [
+      "position:fixed",
+      "right:16px",
+      "bottom:16px",
+      "z-index:2147483647",
+      // A fixed corner element must not capture clicks across the page; only
+      // the chip itself is interactive (pointer-events re-enabled inside).
+      "pointer-events:none"
+    ].join(";");
+  }
+  return ["display:inline-block", "vertical-align:middle"].join(";");
+}
+function innerFor(style, href) {
+  const linkAttrs = `class="fp-link" href="${href}" target="_blank" rel="noopener noreferrer" part="link" data-fancy-pixel-link`;
+  if (style === "mark") {
+    return `<style>${RESET}
+      .fp-mark {
+        pointer-events:auto;
+        display:inline-flex; align-items:center; justify-content:center;
+        padding:6px; border-radius:10px;
+        background:rgba(17,17,27,0.92);
+        box-shadow:0 2px 10px rgba(0,0,0,0.25);
+      }
+    </style>
+    <div class="fp-root" part="root">
+      <a ${linkAttrs} aria-label="Powered by Fancy UI">
+        <span class="fp-mark">${logoGlyph(22)}</span>
+      </a>
+    </div>`;
+  }
+  if (style === "beacon") {
+    return `<style>${RESET}
+      .fp-beacon {
+        pointer-events:auto;
+        position:relative; display:inline-flex;
+        width:14px; height:14px;
+      }
+      .fp-dot {
+        position:absolute; inset:3px;
+        border-radius:50%;
+        background:linear-gradient(135deg,#7c5cff,#22d3ee);
+      }
+      .fp-pulse-ring {
+        position:absolute; inset:0;
+        border-radius:50%;
+        background:radial-gradient(circle,#22d3ee 0%,rgba(34,211,238,0) 70%);
+        animation:fp-pulse 1.8s ease-in-out infinite;
+      }
+    </style>
+    <div class="fp-root" part="root">
+      <a ${linkAttrs} aria-label="Powered by Fancy UI">
+        <span class="fp-beacon">
+          <span class="fp-pulse-ring fp-pulse"></span>
+          <span class="fp-dot"></span>
+        </span>
+      </a>
+    </div>`;
+  }
+  return `<style>${RESET}
+    .fp-badge {
+      pointer-events:auto;
+      display:inline-flex; align-items:center; gap:8px;
+      padding:7px 11px; border-radius:999px;
+      background:rgba(17,17,27,0.92);
+      color:#f5f5fa;
+      font-size:12px; font-weight:600; letter-spacing:0.01em;
+      box-shadow:0 2px 12px rgba(0,0,0,0.28);
+      border:1px solid rgba(124,92,255,0.35);
+      transition:transform 120ms ease;
+    }
+    .fp-badge:hover { transform:translateY(-1px); }
+    .fp-by { opacity:0.7; font-weight:500; }
+    .fp-name {
+      background:linear-gradient(135deg,#a78bfa,#22d3ee);
+      -webkit-background-clip:text; background-clip:text;
+      -webkit-text-fill-color:transparent; color:transparent;
+      font-weight:700;
+    }
+  </style>
+  <div class="fp-root" part="root">
+    <a ${linkAttrs} aria-label="Powered by Fancy UI">
+      <span class="fp-badge">
+        ${logoGlyph(16)}
+        <span><span class="fp-by">Powered by</span> <span class="fp-name">Fancy UI</span></span>
+      </span>
+    </a>
+  </div>`;
+}
+function createPixelHost(style, mode, href) {
+  const host = document.createElement("div");
+  host.setAttribute("data-fancy-pixel", "");
+  host.setAttribute("data-fancy-badge", "");
+  host.setAttribute("data-fancy-pixel-style", style);
+  host.setAttribute("data-fancy-pixel-mode", mode);
+  host.style.cssText = hostStyleFor(mode);
+  const root = host.attachShadow({ mode: "open" });
+  root.innerHTML = innerFor(style, href);
+  return host;
+}
+
+// src/mount.ts
+var DEFAULT_HREF = "https://particle.academy";
+var STYLES = ["badge", "mark", "beacon"];
+var MODES = ["placed", "floating"];
+function resolveTarget(target) {
+  if (target instanceof Element) return target;
+  if (typeof target === "string") {
+    const found = document.querySelector(target);
+    if (found) return found;
+  }
+  return document.body;
+}
+function currentPath() {
+  return typeof location !== "undefined" ? location.pathname : "/";
+}
+function mountPixel(opts = {}) {
+  const style = STYLES.includes(opts.style) ? opts.style : "badge";
+  const mode = MODES.includes(opts.mode) ? opts.mode : "floating";
+  const siteKey = opts.siteKey ?? "";
+  const endpoint = opts.endpoint ?? "";
+  const href = opts.href ?? DEFAULT_HREF;
+  const target = opts.target ?? null;
+  const host = createPixelHost(style, mode, href);
+  if (mode === "floating") {
+    document.body.appendChild(host);
+  } else {
+    resolveTarget(target).appendChild(host);
+  }
+  let visible = false;
+  let shownDispatched = false;
+  let destroyed = false;
+  function beacon() {
+    if (!endpoint) return;
+    sendPixelBeacon(endpoint, {
+      siteKey,
+      style,
+      mode,
+      visible,
+      path: currentPath(),
+      ts: Date.now()
+    });
+  }
+  function dispatchShownOnce() {
+    if (shownDispatched) return;
+    shownDispatched = true;
+    const detail = { style, mode, siteKey, host };
+    document.dispatchEvent(
+      new CustomEvent("fancy-pixel:shown", { detail })
+    );
+  }
+  let observer = null;
+  function setVisible(next) {
+    if (destroyed || next === visible) return;
+    visible = next;
+    if (visible) dispatchShownOnce();
+    beacon();
+  }
+  if (typeof IntersectionObserver === "function") {
+    observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[entries.length - 1];
+        if (!entry) return;
+        const rect = entry.boundingClientRect;
+        const hasSize = rect.width > 0 && rect.height > 0;
+        setVisible(entry.isIntersecting && entry.intersectionRatio > 0 && hasSize);
+      },
+      { threshold: [0, 0.01, 0.5] }
+    );
+    observer.observe(host);
+  } else {
+    setVisible(true);
+  }
+  beacon();
+  const resolved = {
+    style,
+    mode,
+    siteKey,
+    endpoint,
+    href,
+    target
+  };
+  return {
+    host,
+    get visible() {
+      return visible;
+    },
+    options: resolved,
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      observer?.disconnect();
+      observer = null;
+      host.remove();
+    }
+  };
+}
+
+// src/autoinit.ts
+function readScriptConfig() {
+  if (typeof document === "undefined") return null;
+  let el = document.currentScript;
+  if (!el || !el.dataset || el.dataset.site === void 0) {
+    const candidates = document.querySelectorAll(
+      "script[data-site][src*='fancy-pixel'], script[data-fancy-pixel]"
+    );
+    el = candidates[candidates.length - 1] ?? null;
+  }
+  if (!el) return null;
+  const ds = el.dataset;
+  if (ds.style === void 0 && ds.mode === void 0 && ds.site === void 0 && ds.endpoint === void 0 && ds.fancyPixel === void 0) {
+    return null;
+  }
+  return {
+    style: ds.style,
+    mode: ds.mode,
+    siteKey: ds.site,
+    endpoint: ds.endpoint,
+    target: ds.target ?? null,
+    href: ds.href
+  };
+}
+function autoInit() {
+  const config = readScriptConfig();
+  if (!config) return null;
+  const run = () => mountPixel(config);
+  if (typeof document !== "undefined" && document.readyState === "loading") {
+    let handle = null;
+    document.addEventListener(
+      "DOMContentLoaded",
+      () => {
+        handle = run();
+      },
+      { once: true }
+    );
+    return handle;
+  }
+  return run();
+}
+
+exports.autoInit = autoInit;
+exports.createPixelHost = createPixelHost;
+exports.hostStyleFor = hostStyleFor;
+exports.mountPixel = mountPixel;
+exports.sendPixelBeacon = sendPixelBeacon;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/beacon.ts","../src/render.ts","../src/mount.ts","../src/autoinit.ts"],"names":[],"mappings":"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","file":"index.cjs","sourcesContent":["import type { PixelBeaconPayload } from \"./types.js\";\n\n/**\n * Send a pixel liveness/visibility beacon to `${endpoint}/pixel`.\n *\n * Prefers `navigator.sendBeacon` (survives page unload, non-blocking),\n * falling back to `fetch(..., { keepalive: true })`. Both paths POST JSON.\n * Failures are swallowed — a missing beacon must never break the host page.\n *\n * @returns `true` if the beacon was handed off to the transport.\n */\nexport function sendPixelBeacon(\n  endpoint: string,\n  payload: PixelBeaconPayload,\n): boolean {\n  if (!endpoint) return false;\n\n  const url = endpoint.replace(/\\/+$/, \"\") + \"/pixel\";\n  const body = JSON.stringify(payload);\n\n  try {\n    if (\n      typeof navigator !== \"undefined\" &&\n      typeof navigator.sendBeacon === \"function\"\n    ) {\n      // sendBeacon with a Blob preserves the JSON content type for the server.\n      const blob = new Blob([body], { type: \"application/json\" });\n      if (navigator.sendBeacon(url, blob)) return true;\n      // sendBeacon returns false if the UA refused to queue it — fall through.\n    }\n  } catch {\n    /* fall through to fetch */\n  }\n\n  try {\n    if (typeof fetch === \"function\") {\n      void fetch(url, {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body,\n        keepalive: true,\n        // Cross-origin ingestion: we never read the response, so opaque is fine.\n        mode: \"cors\",\n        credentials: \"omit\",\n      }).catch(() => {\n        /* swallow */\n      });\n      return true;\n    }\n  } catch {\n    /* swallow */\n  }\n\n  return false;\n}\n","import type { PixelMode, PixelStyle } from \"./types.js\";\n\n/**\n * The Fancy UI logo glyph as an inline SVG string. A rounded-square mark with\n * an orbiting particle — self-contained, no external asset, scales cleanly.\n */\nfunction logoGlyph(size: number): string {\n  return `<svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\" style=\"display:block;flex:0 0 auto;\">\n  <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"6\" fill=\"url(#fp-grad)\"/>\n  <circle cx=\"9\" cy=\"9\" r=\"3\" fill=\"#fff\"/>\n  <circle cx=\"16.5\" cy=\"15\" r=\"1.6\" fill=\"#fff\" opacity=\"0.85\"/>\n  <defs>\n    <linearGradient id=\"fp-grad\" x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#7c5cff\"/>\n      <stop offset=\"1\" stop-color=\"#22d3ee\"/>\n    </linearGradient>\n  </defs>\n</svg>`;\n}\n\n/**\n * Reset rules applied to the shadow root host's internal wrapper. Because we\n * render inside an open Shadow DOM, host page CSS cannot reach in to hide or\n * restyle these — visibility is part of the verification contract.\n */\nconst RESET = `\n  :host { all: initial; }\n  * { box-sizing: border-box; margin: 0; padding: 0; }\n  .fp-root {\n    font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n    line-height: 1;\n    -webkit-font-smoothing: antialiased;\n  }\n  .fp-link {\n    text-decoration: none;\n    color: inherit;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  @keyframes fp-pulse {\n    0%   { transform: scale(0.85); opacity: 0.55; }\n    50%  { transform: scale(1);    opacity: 1;    }\n    100% { transform: scale(0.85); opacity: 0.55; }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .fp-pulse, .fp-pulse-ring { animation: none !important; }\n  }\n`;\n\n/** Positioning styles for the host element, by mode. */\nexport function hostStyleFor(mode: PixelMode): string {\n  if (mode === \"floating\") {\n    return [\n      \"position:fixed\",\n      \"right:16px\",\n      \"bottom:16px\",\n      \"z-index:2147483647\",\n      // A fixed corner element must not capture clicks across the page; only\n      // the chip itself is interactive (pointer-events re-enabled inside).\n      \"pointer-events:none\",\n    ].join(\";\");\n  }\n  // placed: inline, flows with the target. Stays interactive.\n  return [\"display:inline-block\", \"vertical-align:middle\"].join(\";\");\n}\n\n/** Build the inner HTML of the shadow root for a given style. */\nfunction innerFor(style: PixelStyle, href: string): string {\n  const linkAttrs = `class=\"fp-link\" href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\" part=\"link\" data-fancy-pixel-link`;\n\n  if (style === \"mark\") {\n    return `<style>${RESET}\n      .fp-mark {\n        pointer-events:auto;\n        display:inline-flex; align-items:center; justify-content:center;\n        padding:6px; border-radius:10px;\n        background:rgba(17,17,27,0.92);\n        box-shadow:0 2px 10px rgba(0,0,0,0.25);\n      }\n    </style>\n    <div class=\"fp-root\" part=\"root\">\n      <a ${linkAttrs} aria-label=\"Powered by Fancy UI\">\n        <span class=\"fp-mark\">${logoGlyph(22)}</span>\n      </a>\n    </div>`;\n  }\n\n  if (style === \"beacon\") {\n    return `<style>${RESET}\n      .fp-beacon {\n        pointer-events:auto;\n        position:relative; display:inline-flex;\n        width:14px; height:14px;\n      }\n      .fp-dot {\n        position:absolute; inset:3px;\n        border-radius:50%;\n        background:linear-gradient(135deg,#7c5cff,#22d3ee);\n      }\n      .fp-pulse-ring {\n        position:absolute; inset:0;\n        border-radius:50%;\n        background:radial-gradient(circle,#22d3ee 0%,rgba(34,211,238,0) 70%);\n        animation:fp-pulse 1.8s ease-in-out infinite;\n      }\n    </style>\n    <div class=\"fp-root\" part=\"root\">\n      <a ${linkAttrs} aria-label=\"Powered by Fancy UI\">\n        <span class=\"fp-beacon\">\n          <span class=\"fp-pulse-ring fp-pulse\"></span>\n          <span class=\"fp-dot\"></span>\n        </span>\n      </a>\n    </div>`;\n  }\n\n  // badge (default): wordmark + glyph chip.\n  return `<style>${RESET}\n    .fp-badge {\n      pointer-events:auto;\n      display:inline-flex; align-items:center; gap:8px;\n      padding:7px 11px; border-radius:999px;\n      background:rgba(17,17,27,0.92);\n      color:#f5f5fa;\n      font-size:12px; font-weight:600; letter-spacing:0.01em;\n      box-shadow:0 2px 12px rgba(0,0,0,0.28);\n      border:1px solid rgba(124,92,255,0.35);\n      transition:transform 120ms ease;\n    }\n    .fp-badge:hover { transform:translateY(-1px); }\n    .fp-by { opacity:0.7; font-weight:500; }\n    .fp-name {\n      background:linear-gradient(135deg,#a78bfa,#22d3ee);\n      -webkit-background-clip:text; background-clip:text;\n      -webkit-text-fill-color:transparent; color:transparent;\n      font-weight:700;\n    }\n  </style>\n  <div class=\"fp-root\" part=\"root\">\n    <a ${linkAttrs} aria-label=\"Powered by Fancy UI\">\n      <span class=\"fp-badge\">\n        ${logoGlyph(16)}\n        <span><span class=\"fp-by\">Powered by</span> <span class=\"fp-name\">Fancy UI</span></span>\n      </span>\n    </a>\n  </div>`;\n}\n\n/**\n * Create the host element + open shadow root for a pixel.\n *\n * The host carries the stable, host-CSS-proof markers:\n *  - `data-fancy-pixel`        — the stable agent/scanner handle\n *  - `data-fancy-badge`        — the marker ScanShowcaseSubmission detects\n *  - `data-fancy-pixel-style`  — the active style\n *\n * @returns the host element (shadow root already populated).\n */\nexport function createPixelHost(\n  style: PixelStyle,\n  mode: PixelMode,\n  href: string,\n): HTMLElement {\n  const host = document.createElement(\"div\");\n  host.setAttribute(\"data-fancy-pixel\", \"\");\n  host.setAttribute(\"data-fancy-badge\", \"\");\n  host.setAttribute(\"data-fancy-pixel-style\", style);\n  host.setAttribute(\"data-fancy-pixel-mode\", mode);\n  host.style.cssText = hostStyleFor(mode);\n\n  const root = host.attachShadow({ mode: \"open\" });\n  root.innerHTML = innerFor(style, href);\n\n  return host;\n}\n","import { sendPixelBeacon } from \"./beacon.js\";\nimport { createPixelHost } from \"./render.js\";\nimport type {\n  MountPixelOptions,\n  PixelHandle,\n  PixelMode,\n  PixelShownEventDetail,\n  PixelStyle,\n} from \"./types.js\";\n\nconst DEFAULT_HREF = \"https://particle.academy\";\nconst STYLES: PixelStyle[] = [\"badge\", \"mark\", \"beacon\"];\nconst MODES: PixelMode[] = [\"placed\", \"floating\"];\n\nfunction resolveTarget(target: string | Element | null | undefined): Element {\n  if (target instanceof Element) return target;\n  if (typeof target === \"string\") {\n    const found = document.querySelector(target);\n    if (found) return found;\n  }\n  return document.body;\n}\n\nfunction currentPath(): string {\n  return typeof location !== \"undefined\" ? location.pathname : \"/\";\n}\n\n/**\n * Mount a Fancy UI pixel into the page.\n *\n * Renders the chosen style inside an open Shadow DOM (host CSS cannot hide it),\n * wires an IntersectionObserver to confirm true on-screen visibility, dispatches\n * a `fancy-pixel:shown` CustomEvent on first visibility, and POSTs a liveness\n * beacon to `${endpoint}/pixel` on mount and on every visibility change.\n */\nexport function mountPixel(opts: MountPixelOptions = {}): PixelHandle {\n  const style: PixelStyle = STYLES.includes(opts.style as PixelStyle)\n    ? (opts.style as PixelStyle)\n    : \"badge\";\n  const mode: PixelMode = MODES.includes(opts.mode as PixelMode)\n    ? (opts.mode as PixelMode)\n    : \"floating\";\n  const siteKey = opts.siteKey ?? \"\";\n  const endpoint = opts.endpoint ?? \"\";\n  const href = opts.href ?? DEFAULT_HREF;\n  const target = opts.target ?? null;\n\n  const host = createPixelHost(style, mode, href);\n\n  // Mount: floating always pins to body; placed flows at the target.\n  if (mode === \"floating\") {\n    document.body.appendChild(host);\n  } else {\n    resolveTarget(target).appendChild(host);\n  }\n\n  let visible = false;\n  let shownDispatched = false;\n  let destroyed = false;\n\n  function beacon(): void {\n    if (!endpoint) return;\n    sendPixelBeacon(endpoint, {\n      siteKey,\n      style,\n      mode,\n      visible,\n      path: currentPath(),\n      ts: Date.now(),\n    });\n  }\n\n  function dispatchShownOnce(): void {\n    if (shownDispatched) return;\n    shownDispatched = true;\n    const detail: PixelShownEventDetail = { style, mode, siteKey, host };\n    document.dispatchEvent(\n      new CustomEvent<PixelShownEventDetail>(\"fancy-pixel:shown\", { detail }),\n    );\n  }\n\n  // Visibility verification. IntersectionObserver confirms the badge is truly\n  // on-screen — not display:none, not 0-size, not scrolled out of view. When\n  // unavailable (old/headless UAs) we optimistically assume visible so the\n  // liveness beacon still fires.\n  let observer: IntersectionObserver | null = null;\n\n  function setVisible(next: boolean): void {\n    if (destroyed || next === visible) return;\n    visible = next;\n    if (visible) dispatchShownOnce();\n    beacon();\n  }\n\n  if (typeof IntersectionObserver === \"function\") {\n    observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        if (!entry) return;\n        // intersectionRatio > 0 with a non-zero box = genuinely rendered.\n        const rect = entry.boundingClientRect;\n        const hasSize = rect.width > 0 && rect.height > 0;\n        setVisible(entry.isIntersecting && entry.intersectionRatio > 0 && hasSize);\n      },\n      { threshold: [0, 0.01, 0.5] },\n    );\n    observer.observe(host);\n  } else {\n    // No IO support — fire an optimistic visible beacon on mount.\n    setVisible(true);\n  }\n\n  // Always emit a mount beacon so the server logs liveness even before the\n  // observer reports (visible defaults false until proven).\n  beacon();\n\n  const resolved: PixelHandle[\"options\"] = {\n    style,\n    mode,\n    siteKey,\n    endpoint,\n    href,\n    target,\n  };\n\n  return {\n    host,\n    get visible() {\n      return visible;\n    },\n    options: resolved,\n    destroy() {\n      if (destroyed) return;\n      destroyed = true;\n      observer?.disconnect();\n      observer = null;\n      host.remove();\n    },\n  };\n}\n","import { mountPixel } from \"./mount.js\";\nimport type { MountPixelOptions, PixelHandle } from \"./types.js\";\n\n/**\n * Read pixel config off the currently-executing <script> element's data-*\n * attributes. Used by the IIFE global bundle so a single <script> tag both\n * loads and auto-mounts the pixel:\n *\n *   <script src=\".../fancy-pixel.global.min.js\"\n *           data-style=\"badge\" data-mode=\"floating\"\n *           data-site=\"KEY\" data-endpoint=\"https://host/heuristics\"></script>\n */\nfunction readScriptConfig(): MountPixelOptions | null {\n  if (typeof document === \"undefined\") return null;\n\n  // `document.currentScript` is the running script during initial parse.\n  // Fall back to the last <script> carrying our data-site marker.\n  let el = document.currentScript as HTMLScriptElement | null;\n  if (!el || !el.dataset || el.dataset.site === undefined) {\n    const candidates = document.querySelectorAll<HTMLScriptElement>(\n      \"script[data-site][src*='fancy-pixel'], script[data-fancy-pixel]\",\n    );\n    el = candidates[candidates.length - 1] ?? null;\n  }\n  if (!el) return null;\n\n  const ds = el.dataset;\n  // Only auto-init if at least one fancy-pixel attribute is present.\n  if (\n    ds.style === undefined &&\n    ds.mode === undefined &&\n    ds.site === undefined &&\n    ds.endpoint === undefined &&\n    ds.fancyPixel === undefined\n  ) {\n    return null;\n  }\n\n  return {\n    style: ds.style as MountPixelOptions[\"style\"],\n    mode: ds.mode as MountPixelOptions[\"mode\"],\n    siteKey: ds.site,\n    endpoint: ds.endpoint,\n    target: ds.target ?? null,\n    href: ds.href,\n  };\n}\n\n/**\n * Auto-mount from the script tag's data-* attributes if present.\n * Safe to call multiple times; mounts at most once per call when config exists.\n */\nexport function autoInit(): PixelHandle | null {\n  const config = readScriptConfig();\n  if (!config) return null;\n\n  const run = (): PixelHandle => mountPixel(config);\n\n  if (typeof document !== \"undefined\" && document.readyState === \"loading\") {\n    // Defer to DOMContentLoaded so `placed` targets exist.\n    let handle: PixelHandle | null = null;\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      () => {\n        handle = run();\n      },\n      { once: true },\n    );\n    // Return null now; the handle resolves after DOMContentLoaded.\n    return handle;\n  }\n\n  return run();\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,107 @@
+/**
+ * Public types for @particle-academy/fancy-pixel.
+ *
+ * The pixel is an embeddable verification badge + liveness beacon. Three
+ * visual styles, two placement modes. All styles emit the same
+ * `data-fancy-badge` marker the showcase scanner already detects.
+ */
+/** Visual style of the pixel. */
+type PixelStyle = "badge" | "mark" | "beacon";
+/** Placement mode. `placed` mounts inline at a target; `floating` pins a fixed corner. */
+type PixelMode = "placed" | "floating";
+/** Options accepted by {@link mountPixel}. */
+interface MountPixelOptions {
+    /** Visual style. Default `"badge"`. */
+    style?: PixelStyle;
+    /** Placement mode. Default `"floating"`. */
+    mode?: PixelMode;
+    /**
+     * For `placed` mode: a CSS selector string or an Element to mount inside.
+     * Ignored in `floating` mode. Defaults to `document.body`.
+     */
+    target?: string | Element | null;
+    /** Site identifier sent with every beacon. Required for meaningful beacons. */
+    siteKey?: string;
+    /**
+     * Base URL of the fancy-heuristics ingestion host. The pixel POSTs to
+     * `${endpoint}/pixel`. If omitted, no beacon is sent.
+     */
+    endpoint?: string;
+    /**
+     * Wordmark/link target. Defaults to `https://particle.academy`.
+     * Applies to `badge` (whole chip) and `mark` (glyph).
+     */
+    href?: string;
+}
+/** The payload POSTed to `${endpoint}/pixel`. Matches the frozen wire contract. */
+interface PixelBeaconPayload {
+    siteKey: string;
+    style: PixelStyle;
+    mode: PixelMode;
+    visible: boolean;
+    path: string;
+    ts: number;
+}
+/** Handle returned by {@link mountPixel} for programmatic control. */
+interface PixelHandle {
+    /** The host element carrying the open shadow root and data markers. */
+    readonly host: HTMLElement;
+    /** Whether the pixel is currently confirmed visible by the IntersectionObserver. */
+    readonly visible: boolean;
+    /** Resolved options. */
+    readonly options: Required<Omit<MountPixelOptions, "target">> & {
+        target: string | Element | null;
+    };
+    /** Tear down observers and remove the host element. */
+    destroy(): void;
+}
+/** Detail of the `fancy-pixel:shown` CustomEvent dispatched on `document`. */
+interface PixelShownEventDetail {
+    style: PixelStyle;
+    mode: PixelMode;
+    siteKey: string;
+    host: HTMLElement;
+}
+
+/**
+ * Mount a Fancy UI pixel into the page.
+ *
+ * Renders the chosen style inside an open Shadow DOM (host CSS cannot hide it),
+ * wires an IntersectionObserver to confirm true on-screen visibility, dispatches
+ * a `fancy-pixel:shown` CustomEvent on first visibility, and POSTs a liveness
+ * beacon to `${endpoint}/pixel` on mount and on every visibility change.
+ */
+declare function mountPixel(opts?: MountPixelOptions): PixelHandle;
+
+/**
+ * Auto-mount from the script tag's data-* attributes if present.
+ * Safe to call multiple times; mounts at most once per call when config exists.
+ */
+declare function autoInit(): PixelHandle | null;
+
+/**
+ * Send a pixel liveness/visibility beacon to `${endpoint}/pixel`.
+ *
+ * Prefers `navigator.sendBeacon` (survives page unload, non-blocking),
+ * falling back to `fetch(..., { keepalive: true })`. Both paths POST JSON.
+ * Failures are swallowed — a missing beacon must never break the host page.
+ *
+ * @returns `true` if the beacon was handed off to the transport.
+ */
+declare function sendPixelBeacon(endpoint: string, payload: PixelBeaconPayload): boolean;
+
+/** Positioning styles for the host element, by mode. */
+declare function hostStyleFor(mode: PixelMode): string;
+/**
+ * Create the host element + open shadow root for a pixel.
+ *
+ * The host carries the stable, host-CSS-proof markers:
+ *  - `data-fancy-pixel`        — the stable agent/scanner handle
+ *  - `data-fancy-badge`        — the marker ScanShowcaseSubmission detects
+ *  - `data-fancy-pixel-style`  — the active style
+ *
+ * @returns the host element (shadow root already populated).
+ */
+declare function createPixelHost(style: PixelStyle, mode: PixelMode, href: string): HTMLElement;
+
+export { type MountPixelOptions, type PixelBeaconPayload, type PixelHandle, type PixelMode, type PixelShownEventDetail, type PixelStyle, autoInit, createPixelHost, hostStyleFor, mountPixel, sendPixelBeacon };

package/dist/index.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Public types for @particle-academy/fancy-pixel.
+ *
+ * The pixel is an embeddable verification badge + liveness beacon. Three
+ * visual styles, two placement modes. All styles emit the same
+ * `data-fancy-badge` marker the showcase scanner already detects.
+ */
+/** Visual style of the pixel. */
+type PixelStyle = "badge" | "mark" | "beacon";
+/** Placement mode. `placed` mounts inline at a target; `floating` pins a fixed corner. */
+type PixelMode = "placed" | "floating";
+/** Options accepted by {@link mountPixel}. */
+interface MountPixelOptions {
+    /** Visual style. Default `"badge"`. */
+    style?: PixelStyle;
+    /** Placement mode. Default `"floating"`. */
+    mode?: PixelMode;
+    /**
+     * For `placed` mode: a CSS selector string or an Element to mount inside.
+     * Ignored in `floating` mode. Defaults to `document.body`.
+     */
+    target?: string | Element | null;
+    /** Site identifier sent with every beacon. Required for meaningful beacons. */
+    siteKey?: string;
+    /**
+     * Base URL of the fancy-heuristics ingestion host. The pixel POSTs to
+     * `${endpoint}/pixel`. If omitted, no beacon is sent.
+     */
+    endpoint?: string;
+    /**
+     * Wordmark/link target. Defaults to `https://particle.academy`.
+     * Applies to `badge` (whole chip) and `mark` (glyph).
+     */
+    href?: string;
+}
+/** The payload POSTed to `${endpoint}/pixel`. Matches the frozen wire contract. */
+interface PixelBeaconPayload {
+    siteKey: string;
+    style: PixelStyle;
+    mode: PixelMode;
+    visible: boolean;
+    path: string;
+    ts: number;
+}
+/** Handle returned by {@link mountPixel} for programmatic control. */
+interface PixelHandle {
+    /** The host element carrying the open shadow root and data markers. */
+    readonly host: HTMLElement;
+    /** Whether the pixel is currently confirmed visible by the IntersectionObserver. */
+    readonly visible: boolean;
+    /** Resolved options. */
+    readonly options: Required<Omit<MountPixelOptions, "target">> & {
+        target: string | Element | null;
+    };
+    /** Tear down observers and remove the host element. */
+    destroy(): void;
+}
+/** Detail of the `fancy-pixel:shown` CustomEvent dispatched on `document`. */
+interface PixelShownEventDetail {
+    style: PixelStyle;
+    mode: PixelMode;
+    siteKey: string;
+    host: HTMLElement;
+}
+
+/**
+ * Mount a Fancy UI pixel into the page.
+ *
+ * Renders the chosen style inside an open Shadow DOM (host CSS cannot hide it),
+ * wires an IntersectionObserver to confirm true on-screen visibility, dispatches
+ * a `fancy-pixel:shown` CustomEvent on first visibility, and POSTs a liveness
+ * beacon to `${endpoint}/pixel` on mount and on every visibility change.
+ */
+declare function mountPixel(opts?: MountPixelOptions): PixelHandle;
+
+/**
+ * Auto-mount from the script tag's data-* attributes if present.
+ * Safe to call multiple times; mounts at most once per call when config exists.
+ */
+declare function autoInit(): PixelHandle | null;
+
+/**
+ * Send a pixel liveness/visibility beacon to `${endpoint}/pixel`.
+ *
+ * Prefers `navigator.sendBeacon` (survives page unload, non-blocking),
+ * falling back to `fetch(..., { keepalive: true })`. Both paths POST JSON.
+ * Failures are swallowed — a missing beacon must never break the host page.
+ *
+ * @returns `true` if the beacon was handed off to the transport.
+ */
+declare function sendPixelBeacon(endpoint: string, payload: PixelBeaconPayload): boolean;
+
+/** Positioning styles for the host element, by mode. */
+declare function hostStyleFor(mode: PixelMode): string;
+/**
+ * Create the host element + open shadow root for a pixel.
+ *
+ * The host carries the stable, host-CSS-proof markers:
+ *  - `data-fancy-pixel`        — the stable agent/scanner handle
+ *  - `data-fancy-badge`        — the marker ScanShowcaseSubmission detects
+ *  - `data-fancy-pixel-style`  — the active style
+ *
+ * @returns the host element (shadow root already populated).
+ */
+declare function createPixelHost(style: PixelStyle, mode: PixelMode, href: string): HTMLElement;
+
+export { type MountPixelOptions, type PixelBeaconPayload, type PixelHandle, type PixelMode, type PixelShownEventDetail, type PixelStyle, autoInit, createPixelHost, hostStyleFor, mountPixel, sendPixelBeacon };

package/dist/index.js

@@ -0,0 +1,313 @@
+// src/beacon.ts
+function sendPixelBeacon(endpoint, payload) {
+  if (!endpoint) return false;
+  const url = endpoint.replace(/\/+$/, "") + "/pixel";
+  const body = JSON.stringify(payload);
+  try {
+    if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
+      const blob = new Blob([body], { type: "application/json" });
+      if (navigator.sendBeacon(url, blob)) return true;
+    }
+  } catch {
+  }
+  try {
+    if (typeof fetch === "function") {
+      void fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body,
+        keepalive: true,
+        // Cross-origin ingestion: we never read the response, so opaque is fine.
+        mode: "cors",
+        credentials: "omit"
+      }).catch(() => {
+      });
+      return true;
+    }
+  } catch {
+  }
+  return false;
+}
+
+// src/render.ts
+function logoGlyph(size) {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" style="display:block;flex:0 0 auto;">
+  <rect x="2" y="2" width="20" height="20" rx="6" fill="url(#fp-grad)"/>
+  <circle cx="9" cy="9" r="3" fill="#fff"/>
+  <circle cx="16.5" cy="15" r="1.6" fill="#fff" opacity="0.85"/>
+  <defs>
+    <linearGradient id="fp-grad" x1="2" y1="2" x2="22" y2="22" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#7c5cff"/>
+      <stop offset="1" stop-color="#22d3ee"/>
+    </linearGradient>
+  </defs>
+</svg>`;
+}
+var RESET = `
+  :host { all: initial; }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  .fp-root {
+    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+  }
+  .fp-link {
+    text-decoration: none;
+    color: inherit;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  @keyframes fp-pulse {
+    0%   { transform: scale(0.85); opacity: 0.55; }
+    50%  { transform: scale(1);    opacity: 1;    }
+    100% { transform: scale(0.85); opacity: 0.55; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fp-pulse, .fp-pulse-ring { animation: none !important; }
+  }
+`;
+function hostStyleFor(mode) {
+  if (mode === "floating") {
+    return [
+      "position:fixed",
+      "right:16px",
+      "bottom:16px",
+      "z-index:2147483647",
+      // A fixed corner element must not capture clicks across the page; only
+      // the chip itself is interactive (pointer-events re-enabled inside).
+      "pointer-events:none"
+    ].join(";");
+  }
+  return ["display:inline-block", "vertical-align:middle"].join(";");
+}
+function innerFor(style, href) {
+  const linkAttrs = `class="fp-link" href="${href}" target="_blank" rel="noopener noreferrer" part="link" data-fancy-pixel-link`;
+  if (style === "mark") {
+    return `<style>${RESET}
+      .fp-mark {
+        pointer-events:auto;
+        display:inline-flex; align-items:center; justify-content:center;
+        padding:6px; border-radius:10px;
+        background:rgba(17,17,27,0.92);
+        box-shadow:0 2px 10px rgba(0,0,0,0.25);
+      }
+    </style>
+    <div class="fp-root" part="root">
+      <a ${linkAttrs} aria-label="Powered by Fancy UI">
+        <span class="fp-mark">${logoGlyph(22)}</span>
+      </a>
+    </div>`;
+  }
+  if (style === "beacon") {
+    return `<style>${RESET}
+      .fp-beacon {
+        pointer-events:auto;
+        position:relative; display:inline-flex;
+        width:14px; height:14px;
+      }
+      .fp-dot {
+        position:absolute; inset:3px;
+        border-radius:50%;
+        background:linear-gradient(135deg,#7c5cff,#22d3ee);
+      }
+      .fp-pulse-ring {
+        position:absolute; inset:0;
+        border-radius:50%;
+        background:radial-gradient(circle,#22d3ee 0%,rgba(34,211,238,0) 70%);
+        animation:fp-pulse 1.8s ease-in-out infinite;
+      }
+    </style>
+    <div class="fp-root" part="root">
+      <a ${linkAttrs} aria-label="Powered by Fancy UI">
+        <span class="fp-beacon">
+          <span class="fp-pulse-ring fp-pulse"></span>
+          <span class="fp-dot"></span>
+        </span>
+      </a>
+    </div>`;
+  }
+  return `<style>${RESET}
+    .fp-badge {
+      pointer-events:auto;
+      display:inline-flex; align-items:center; gap:8px;
+      padding:7px 11px; border-radius:999px;
+      background:rgba(17,17,27,0.92);
+      color:#f5f5fa;
+      font-size:12px; font-weight:600; letter-spacing:0.01em;
+      box-shadow:0 2px 12px rgba(0,0,0,0.28);
+      border:1px solid rgba(124,92,255,0.35);
+      transition:transform 120ms ease;
+    }
+    .fp-badge:hover { transform:translateY(-1px); }
+    .fp-by { opacity:0.7; font-weight:500; }
+    .fp-name {
+      background:linear-gradient(135deg,#a78bfa,#22d3ee);
+      -webkit-background-clip:text; background-clip:text;
+      -webkit-text-fill-color:transparent; color:transparent;
+      font-weight:700;
+    }
+  </style>
+  <div class="fp-root" part="root">
+    <a ${linkAttrs} aria-label="Powered by Fancy UI">
+      <span class="fp-badge">
+        ${logoGlyph(16)}
+        <span><span class="fp-by">Powered by</span> <span class="fp-name">Fancy UI</span></span>
+      </span>
+    </a>
+  </div>`;
+}
+function createPixelHost(style, mode, href) {
+  const host = document.createElement("div");
+  host.setAttribute("data-fancy-pixel", "");
+  host.setAttribute("data-fancy-badge", "");
+  host.setAttribute("data-fancy-pixel-style", style);
+  host.setAttribute("data-fancy-pixel-mode", mode);
+  host.style.cssText = hostStyleFor(mode);
+  const root = host.attachShadow({ mode: "open" });
+  root.innerHTML = innerFor(style, href);
+  return host;
+}
+
+// src/mount.ts
+var DEFAULT_HREF = "https://particle.academy";
+var STYLES = ["badge", "mark", "beacon"];
+var MODES = ["placed", "floating"];
+function resolveTarget(target) {
+  if (target instanceof Element) return target;
+  if (typeof target === "string") {
+    const found = document.querySelector(target);
+    if (found) return found;
+  }
+  return document.body;
+}
+function currentPath() {
+  return typeof location !== "undefined" ? location.pathname : "/";
+}
+function mountPixel(opts = {}) {
+  const style = STYLES.includes(opts.style) ? opts.style : "badge";
+  const mode = MODES.includes(opts.mode) ? opts.mode : "floating";
+  const siteKey = opts.siteKey ?? "";
+  const endpoint = opts.endpoint ?? "";
+  const href = opts.href ?? DEFAULT_HREF;
+  const target = opts.target ?? null;
+  const host = createPixelHost(style, mode, href);
+  if (mode === "floating") {
+    document.body.appendChild(host);
+  } else {
+    resolveTarget(target).appendChild(host);
+  }
+  let visible = false;
+  let shownDispatched = false;
+  let destroyed = false;
+  function beacon() {
+    if (!endpoint) return;
+    sendPixelBeacon(endpoint, {
+      siteKey,
+      style,
+      mode,
+      visible,
+      path: currentPath(),
+      ts: Date.now()
+    });
+  }
+  function dispatchShownOnce() {
+    if (shownDispatched) return;
+    shownDispatched = true;
+    const detail = { style, mode, siteKey, host };
+    document.dispatchEvent(
+      new CustomEvent("fancy-pixel:shown", { detail })
+    );
+  }
+  let observer = null;
+  function setVisible(next) {
+    if (destroyed || next === visible) return;
+    visible = next;
+    if (visible) dispatchShownOnce();
+    beacon();
+  }
+  if (typeof IntersectionObserver === "function") {
+    observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[entries.length - 1];
+        if (!entry) return;
+        const rect = entry.boundingClientRect;
+        const hasSize = rect.width > 0 && rect.height > 0;
+        setVisible(entry.isIntersecting && entry.intersectionRatio > 0 && hasSize);
+      },
+      { threshold: [0, 0.01, 0.5] }
+    );
+    observer.observe(host);
+  } else {
+    setVisible(true);
+  }
+  beacon();
+  const resolved = {
+    style,
+    mode,
+    siteKey,
+    endpoint,
+    href,
+    target
+  };
+  return {
+    host,
+    get visible() {
+      return visible;
+    },
+    options: resolved,
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      observer?.disconnect();
+      observer = null;
+      host.remove();
+    }
+  };
+}
+
+// src/autoinit.ts
+function readScriptConfig() {
+  if (typeof document === "undefined") return null;
+  let el = document.currentScript;
+  if (!el || !el.dataset || el.dataset.site === void 0) {
+    const candidates = document.querySelectorAll(
+      "script[data-site][src*='fancy-pixel'], script[data-fancy-pixel]"
+    );
+    el = candidates[candidates.length - 1] ?? null;
+  }
+  if (!el) return null;
+  const ds = el.dataset;
+  if (ds.style === void 0 && ds.mode === void 0 && ds.site === void 0 && ds.endpoint === void 0 && ds.fancyPixel === void 0) {
+    return null;
+  }
+  return {
+    style: ds.style,
+    mode: ds.mode,
+    siteKey: ds.site,
+    endpoint: ds.endpoint,
+    target: ds.target ?? null,
+    href: ds.href
+  };
+}
+function autoInit() {
+  const config = readScriptConfig();
+  if (!config) return null;
+  const run = () => mountPixel(config);
+  if (typeof document !== "undefined" && document.readyState === "loading") {
+    let handle = null;
+    document.addEventListener(
+      "DOMContentLoaded",
+      () => {
+        handle = run();
+      },
+      { once: true }
+    );
+    return handle;
+  }
+  return run();
+}
+
+export { autoInit, createPixelHost, hostStyleFor, mountPixel, sendPixelBeacon };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/beacon.ts","../src/render.ts","../src/mount.ts","../src/autoinit.ts"],"names":[],"mappings":";AAWO,SAAS,eAAA,CACd,UACA,OAAA,EACS;AACT,EAAA,IAAI,CAAC,UAAU,OAAO,KAAA;AAEtB,EAAA,MAAM,GAAA,GAAM,QAAA,CAAS,OAAA,CAAQ,MAAA,EAAQ,EAAE,CAAA,GAAI,QAAA;AAC3C,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,SAAA,CAAU,OAAO,CAAA;AAEnC,EAAA,IAAI;AACF,IAAA,IACE,OAAO,SAAA,KAAc,WAAA,IACrB,OAAO,SAAA,CAAU,eAAe,UAAA,EAChC;AAEA,MAAA,MAAM,IAAA,GAAO,IAAI,IAAA,CAAK,CAAC,IAAI,CAAA,EAAG,EAAE,IAAA,EAAM,kBAAA,EAAoB,CAAA;AAC1D,MAAA,IAAI,SAAA,CAAU,UAAA,CAAW,GAAA,EAAK,IAAI,GAAG,OAAO,IAAA;AAAA,IAE9C;AAAA,EACF,CAAA,CAAA,MAAQ;AAAA,EAER;AAEA,EAAA,IAAI;AACF,IAAA,IAAI,OAAO,UAAU,UAAA,EAAY;AAC/B,MAAA,KAAK,MAAM,GAAA,EAAK;AAAA,QACd,MAAA,EAAQ,MAAA;AAAA,QACR,OAAA,EAAS,EAAE,cAAA,EAAgB,kBAAA,EAAmB;AAAA,QAC9C,IAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA;AAAA,QAEX,IAAA,EAAM,MAAA;AAAA,QACN,WAAA,EAAa;AAAA,OACd,CAAA,CAAE,KAAA,CAAM,MAAM;AAAA,MAEf,CAAC,CAAA;AACD,MAAA,OAAO,IAAA;AAAA,IACT;AAAA,EACF,CAAA,CAAA,MAAQ;AAAA,EAER;AAEA,EAAA,OAAO,KAAA;AACT;;;AChDA,SAAS,UAAU,IAAA,EAAsB;AACvC,EAAA,OAAO,CAAA,YAAA,EAAe,IAAI,CAAA,UAAA,EAAa,IAAI,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA,CAAA;AAW7C;AAOA,IAAM,KAAA,GAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AA0BP,SAAS,aAAa,IAAA,EAAyB;AACpD,EAAA,IAAI,SAAS,UAAA,EAAY;AACvB,IAAA,OAAO;AAAA,MACL,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,oBAAA;AAAA;AAAA;AAAA,MAGA;AAAA,KACF,CAAE,KAAK,GAAG,CAAA;AAAA,EACZ;AAEA,EAAA,OAAO,CAAC,sBAAA,EAAwB,uBAAuB,CAAA,CAAE,KAAK,GAAG,CAAA;AACnE;AAGA,SAAS,QAAA,CAAS,OAAmB,IAAA,EAAsB;AACzD,EAAA,MAAM,SAAA,GAAY,yBAAyB,IAAI,CAAA,6EAAA,CAAA;AAE/C,EAAA,IAAI,UAAU,MAAA,EAAQ;AACpB,IAAA,OAAO,UAAU,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAA,EAUf,SAAS,CAAA;AAAA,8BAAA,EACY,SAAA,CAAU,EAAE,CAAC,CAAA;AAAA;AAAA,UAAA,CAAA;AAAA,EAG3C;AAEA,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,UAAU,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAA,EAmBf,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAAA,CAAA;AAAA,EAOlB;AAGA,EAAA,OAAO,UAAU,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAA,EAsBf,SAAS,CAAA;AAAA;AAAA,QAAA,EAER,SAAA,CAAU,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA;AAKvB;AAYO,SAAS,eAAA,CACd,KAAA,EACA,IAAA,EACA,IAAA,EACa;AACb,EAAA,MAAM,IAAA,GAAO,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AACzC,EAAA,IAAA,CAAK,YAAA,CAAa,oBAAoB,EAAE,CAAA;AACxC,EAAA,IAAA,CAAK,YAAA,CAAa,oBAAoB,EAAE,CAAA;AACxC,EAAA,IAAA,CAAK,YAAA,CAAa,0BAA0B,KAAK,CAAA;AACjD,EAAA,IAAA,CAAK,YAAA,CAAa,yBAAyB,IAAI,CAAA;AAC/C,EAAA,IAAA,CAAK,KAAA,CAAM,OAAA,GAAU,YAAA,CAAa,IAAI,CAAA;AAEtC,EAAA,MAAM,OAAO,IAAA,CAAK,YAAA,CAAa,EAAE,IAAA,EAAM,QAAQ,CAAA;AAC/C,EAAA,IAAA,CAAK,SAAA,GAAY,QAAA,CAAS,KAAA,EAAO,IAAI,CAAA;AAErC,EAAA,OAAO,IAAA;AACT;;;ACrKA,IAAM,YAAA,GAAe,0BAAA;AACrB,IAAM,MAAA,GAAuB,CAAC,OAAA,EAAS,MAAA,EAAQ,QAAQ,CAAA;AACvD,IAAM,KAAA,GAAqB,CAAC,QAAA,EAAU,UAAU,CAAA;AAEhD,SAAS,cAAc,MAAA,EAAsD;AAC3E,EAAA,IAAI,MAAA,YAAkB,SAAS,OAAO,MAAA;AACtC,EAAA,IAAI,OAAO,WAAW,QAAA,EAAU;AAC9B,IAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AAC3C,IAAA,IAAI,OAAO,OAAO,KAAA;AAAA,EACpB;AACA,EAAA,OAAO,QAAA,CAAS,IAAA;AAClB;AAEA,SAAS,WAAA,GAAsB;AAC7B,EAAA,OAAO,OAAO,QAAA,KAAa,WAAA,GAAc,QAAA,CAAS,QAAA,GAAW,GAAA;AAC/D;AAUO,SAAS,UAAA,CAAW,IAAA,GAA0B,EAAC,EAAgB;AACpE,EAAA,MAAM,QAAoB,MAAA,CAAO,QAAA,CAAS,KAAK,KAAmB,CAAA,GAC7D,KAAK,KAAA,GACN,OAAA;AACJ,EAAA,MAAM,OAAkB,KAAA,CAAM,QAAA,CAAS,KAAK,IAAiB,CAAA,GACxD,KAAK,IAAA,GACN,UAAA;AACJ,EAAA,MAAM,OAAA,GAAU,KAAK,OAAA,IAAW,EAAA;AAChC,EAAA,MAAM,QAAA,GAAW,KAAK,QAAA,IAAY,EAAA;AAClC,EAAA,MAAM,IAAA,GAAO,KAAK,IAAA,IAAQ,YAAA;AAC1B,EAAA,MAAM,MAAA,GAAS,KAAK,MAAA,IAAU,IAAA;AAE9B,EAAA,MAAM,IAAA,GAAO,eAAA,CAAgB,KAAA,EAAO,IAAA,EAAM,IAAI,CAAA;AAG9C,EAAA,IAAI,SAAS,UAAA,EAAY;AACvB,IAAA,QAAA,CAAS,IAAA,CAAK,YAAY,IAAI,CAAA;AAAA,EAChC,CAAA,MAAO;AACL,IAAA,aAAA,CAAc,MAAM,CAAA,CAAE,WAAA,CAAY,IAAI,CAAA;AAAA,EACxC;AAEA,EAAA,IAAI,OAAA,GAAU,KAAA;AACd,EAAA,IAAI,eAAA,GAAkB,KAAA;AACtB,EAAA,IAAI,SAAA,GAAY,KAAA;AAEhB,EAAA,SAAS,MAAA,GAAe;AACtB,IAAA,IAAI,CAAC,QAAA,EAAU;AACf,IAAA,eAAA,CAAgB,QAAA,EAAU;AAAA,MACxB,OAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAM,WAAA,EAAY;AAAA,MAClB,EAAA,EAAI,KAAK,GAAA;AAAI,KACd,CAAA;AAAA,EACH;AAEA,EAAA,SAAS,iBAAA,GAA0B;AACjC,IAAA,IAAI,eAAA,EAAiB;AACrB,IAAA,eAAA,GAAkB,IAAA;AAClB,IAAA,MAAM,MAAA,GAAgC,EAAE,KAAA,EAAO,IAAA,EAAM,SAAS,IAAA,EAAK;AACnE,IAAA,QAAA,CAAS,aAAA;AAAA,MACP,IAAI,WAAA,CAAmC,mBAAA,EAAqB,EAAE,QAAQ;AAAA,KACxE;AAAA,EACF;AAMA,EAAA,IAAI,QAAA,GAAwC,IAAA;AAE5C,EAAA,SAAS,WAAW,IAAA,EAAqB;AACvC,IAAA,IAAI,SAAA,IAAa,SAAS,OAAA,EAAS;AACnC,IAAA,OAAA,GAAU,IAAA;AACV,IAAA,IAAI,SAAS,iBAAA,EAAkB;AAC/B,IAAA,MAAA,EAAO;AAAA,EACT;AAEA,EAAA,IAAI,OAAO,yBAAyB,UAAA,EAAY;AAC9C,IAAA,QAAA,GAAW,IAAI,oBAAA;AAAA,MACb,CAAC,OAAA,KAAY;AACX,QAAA,MAAM,KAAA,GAAQ,OAAA,CAAQ,OAAA,CAAQ,MAAA,GAAS,CAAC,CAAA;AACxC,QAAA,IAAI,CAAC,KAAA,EAAO;AAEZ,QAAA,MAAM,OAAO,KAAA,CAAM,kBAAA;AACnB,QAAA,MAAM,OAAA,GAAU,IAAA,CAAK,KAAA,GAAQ,CAAA,IAAK,KAAK,MAAA,GAAS,CAAA;AAChD,QAAA,UAAA,CAAW,KAAA,CAAM,cAAA,IAAkB,KAAA,CAAM,iBAAA,GAAoB,KAAK,OAAO,CAAA;AAAA,MAC3E,CAAA;AAAA,MACA,EAAE,SAAA,EAAW,CAAC,CAAA,EAAG,IAAA,EAAM,GAAG,CAAA;AAAE,KAC9B;AACA,IAAA,QAAA,CAAS,QAAQ,IAAI,CAAA;AAAA,EACvB,CAAA,MAAO;AAEL,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB;AAIA,EAAA,MAAA,EAAO;AAEP,EAAA,MAAM,QAAA,GAAmC;AAAA,IACvC,KAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,OAAO;AAAA,IACL,IAAA;AAAA,IACA,IAAI,OAAA,GAAU;AACZ,MAAA,OAAO,OAAA;AAAA,IACT,CAAA;AAAA,IACA,OAAA,EAAS,QAAA;AAAA,IACT,OAAA,GAAU;AACR,MAAA,IAAI,SAAA,EAAW;AACf,MAAA,SAAA,GAAY,IAAA;AACZ,MAAA,QAAA,EAAU,UAAA,EAAW;AACrB,MAAA,QAAA,GAAW,IAAA;AACX,MAAA,IAAA,CAAK,MAAA,EAAO;AAAA,IACd;AAAA,GACF;AACF;;;AC/HA,SAAS,gBAAA,GAA6C;AACpD,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,IAAA;AAI5C,EAAA,IAAI,KAAK,QAAA,CAAS,aAAA;AAClB,EAAA,IAAI,CAAC,MAAM,CAAC,EAAA,CAAG,WAAW,EAAA,CAAG,OAAA,CAAQ,SAAS,MAAA,EAAW;AACvD,IAAA,MAAM,aAAa,QAAA,CAAS,gBAAA;AAAA,MAC1B;AAAA,KACF;AACA,IAAA,EAAA,GAAK,UAAA,CAAW,UAAA,CAAW,MAAA,GAAS,CAAC,CAAA,IAAK,IAAA;AAAA,EAC5C;AACA,EAAA,IAAI,CAAC,IAAI,OAAO,IAAA;AAEhB,EAAA,MAAM,KAAK,EAAA,CAAG,OAAA;AAEd,EAAA,IACE,EAAA,CAAG,KAAA,KAAU,MAAA,IACb,EAAA,CAAG,SAAS,MAAA,IACZ,EAAA,CAAG,IAAA,KAAS,MAAA,IACZ,EAAA,CAAG,QAAA,KAAa,MAAA,IAChB,EAAA,CAAG,eAAe,MAAA,EAClB;AACA,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,OAAO;AAAA,IACL,OAAO,EAAA,CAAG,KAAA;AAAA,IACV,MAAM,EAAA,CAAG,IAAA;AAAA,IACT,SAAS,EAAA,CAAG,IAAA;AAAA,IACZ,UAAU,EAAA,CAAG,QAAA;AAAA,IACb,MAAA,EAAQ,GAAG,MAAA,IAAU,IAAA;AAAA,IACrB,MAAM,EAAA,CAAG;AAAA,GACX;AACF;AAMO,SAAS,QAAA,GAA+B;AAC7C,EAAA,MAAM,SAAS,gBAAA,EAAiB;AAChC,EAAA,IAAI,CAAC,QAAQ,OAAO,IAAA;AAEpB,EAAA,MAAM,GAAA,GAAM,MAAmB,UAAA,CAAW,MAAM,CAAA;AAEhD,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,IAAe,QAAA,CAAS,eAAe,SAAA,EAAW;AAExE,IAAA,IAAI,MAAA,GAA6B,IAAA;AACjC,IAAA,QAAA,CAAS,gBAAA;AAAA,MACP,kBAAA;AAAA,MACA,MAAM;AACJ,QAAA,MAAA,GAAS,GAAA,EAAI;AAAA,MACf,CAAA;AAAA,MACA,EAAE,MAAM,IAAA;AAAK,KACf;AAEA,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,OAAO,GAAA,EAAI;AACb","file":"index.js","sourcesContent":["import type { PixelBeaconPayload } from \"./types.js\";\n\n/**\n * Send a pixel liveness/visibility beacon to `${endpoint}/pixel`.\n *\n * Prefers `navigator.sendBeacon` (survives page unload, non-blocking),\n * falling back to `fetch(..., { keepalive: true })`. Both paths POST JSON.\n * Failures are swallowed — a missing beacon must never break the host page.\n *\n * @returns `true` if the beacon was handed off to the transport.\n */\nexport function sendPixelBeacon(\n  endpoint: string,\n  payload: PixelBeaconPayload,\n): boolean {\n  if (!endpoint) return false;\n\n  const url = endpoint.replace(/\\/+$/, \"\") + \"/pixel\";\n  const body = JSON.stringify(payload);\n\n  try {\n    if (\n      typeof navigator !== \"undefined\" &&\n      typeof navigator.sendBeacon === \"function\"\n    ) {\n      // sendBeacon with a Blob preserves the JSON content type for the server.\n      const blob = new Blob([body], { type: \"application/json\" });\n      if (navigator.sendBeacon(url, blob)) return true;\n      // sendBeacon returns false if the UA refused to queue it — fall through.\n    }\n  } catch {\n    /* fall through to fetch */\n  }\n\n  try {\n    if (typeof fetch === \"function\") {\n      void fetch(url, {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body,\n        keepalive: true,\n        // Cross-origin ingestion: we never read the response, so opaque is fine.\n        mode: \"cors\",\n        credentials: \"omit\",\n      }).catch(() => {\n        /* swallow */\n      });\n      return true;\n    }\n  } catch {\n    /* swallow */\n  }\n\n  return false;\n}\n","import type { PixelMode, PixelStyle } from \"./types.js\";\n\n/**\n * The Fancy UI logo glyph as an inline SVG string. A rounded-square mark with\n * an orbiting particle — self-contained, no external asset, scales cleanly.\n */\nfunction logoGlyph(size: number): string {\n  return `<svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\" style=\"display:block;flex:0 0 auto;\">\n  <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"6\" fill=\"url(#fp-grad)\"/>\n  <circle cx=\"9\" cy=\"9\" r=\"3\" fill=\"#fff\"/>\n  <circle cx=\"16.5\" cy=\"15\" r=\"1.6\" fill=\"#fff\" opacity=\"0.85\"/>\n  <defs>\n    <linearGradient id=\"fp-grad\" x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" gradientUnits=\"userSpaceOnUse\">\n      <stop stop-color=\"#7c5cff\"/>\n      <stop offset=\"1\" stop-color=\"#22d3ee\"/>\n    </linearGradient>\n  </defs>\n</svg>`;\n}\n\n/**\n * Reset rules applied to the shadow root host's internal wrapper. Because we\n * render inside an open Shadow DOM, host page CSS cannot reach in to hide or\n * restyle these — visibility is part of the verification contract.\n */\nconst RESET = `\n  :host { all: initial; }\n  * { box-sizing: border-box; margin: 0; padding: 0; }\n  .fp-root {\n    font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n    line-height: 1;\n    -webkit-font-smoothing: antialiased;\n  }\n  .fp-link {\n    text-decoration: none;\n    color: inherit;\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  @keyframes fp-pulse {\n    0%   { transform: scale(0.85); opacity: 0.55; }\n    50%  { transform: scale(1);    opacity: 1;    }\n    100% { transform: scale(0.85); opacity: 0.55; }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .fp-pulse, .fp-pulse-ring { animation: none !important; }\n  }\n`;\n\n/** Positioning styles for the host element, by mode. */\nexport function hostStyleFor(mode: PixelMode): string {\n  if (mode === \"floating\") {\n    return [\n      \"position:fixed\",\n      \"right:16px\",\n      \"bottom:16px\",\n      \"z-index:2147483647\",\n      // A fixed corner element must not capture clicks across the page; only\n      // the chip itself is interactive (pointer-events re-enabled inside).\n      \"pointer-events:none\",\n    ].join(\";\");\n  }\n  // placed: inline, flows with the target. Stays interactive.\n  return [\"display:inline-block\", \"vertical-align:middle\"].join(\";\");\n}\n\n/** Build the inner HTML of the shadow root for a given style. */\nfunction innerFor(style: PixelStyle, href: string): string {\n  const linkAttrs = `class=\"fp-link\" href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\" part=\"link\" data-fancy-pixel-link`;\n\n  if (style === \"mark\") {\n    return `<style>${RESET}\n      .fp-mark {\n        pointer-events:auto;\n        display:inline-flex; align-items:center; justify-content:center;\n        padding:6px; border-radius:10px;\n        background:rgba(17,17,27,0.92);\n        box-shadow:0 2px 10px rgba(0,0,0,0.25);\n      }\n    </style>\n    <div class=\"fp-root\" part=\"root\">\n      <a ${linkAttrs} aria-label=\"Powered by Fancy UI\">\n        <span class=\"fp-mark\">${logoGlyph(22)}</span>\n      </a>\n    </div>`;\n  }\n\n  if (style === \"beacon\") {\n    return `<style>${RESET}\n      .fp-beacon {\n        pointer-events:auto;\n        position:relative; display:inline-flex;\n        width:14px; height:14px;\n      }\n      .fp-dot {\n        position:absolute; inset:3px;\n        border-radius:50%;\n        background:linear-gradient(135deg,#7c5cff,#22d3ee);\n      }\n      .fp-pulse-ring {\n        position:absolute; inset:0;\n        border-radius:50%;\n        background:radial-gradient(circle,#22d3ee 0%,rgba(34,211,238,0) 70%);\n        animation:fp-pulse 1.8s ease-in-out infinite;\n      }\n    </style>\n    <div class=\"fp-root\" part=\"root\">\n      <a ${linkAttrs} aria-label=\"Powered by Fancy UI\">\n        <span class=\"fp-beacon\">\n          <span class=\"fp-pulse-ring fp-pulse\"></span>\n          <span class=\"fp-dot\"></span>\n        </span>\n      </a>\n    </div>`;\n  }\n\n  // badge (default): wordmark + glyph chip.\n  return `<style>${RESET}\n    .fp-badge {\n      pointer-events:auto;\n      display:inline-flex; align-items:center; gap:8px;\n      padding:7px 11px; border-radius:999px;\n      background:rgba(17,17,27,0.92);\n      color:#f5f5fa;\n      font-size:12px; font-weight:600; letter-spacing:0.01em;\n      box-shadow:0 2px 12px rgba(0,0,0,0.28);\n      border:1px solid rgba(124,92,255,0.35);\n      transition:transform 120ms ease;\n    }\n    .fp-badge:hover { transform:translateY(-1px); }\n    .fp-by { opacity:0.7; font-weight:500; }\n    .fp-name {\n      background:linear-gradient(135deg,#a78bfa,#22d3ee);\n      -webkit-background-clip:text; background-clip:text;\n      -webkit-text-fill-color:transparent; color:transparent;\n      font-weight:700;\n    }\n  </style>\n  <div class=\"fp-root\" part=\"root\">\n    <a ${linkAttrs} aria-label=\"Powered by Fancy UI\">\n      <span class=\"fp-badge\">\n        ${logoGlyph(16)}\n        <span><span class=\"fp-by\">Powered by</span> <span class=\"fp-name\">Fancy UI</span></span>\n      </span>\n    </a>\n  </div>`;\n}\n\n/**\n * Create the host element + open shadow root for a pixel.\n *\n * The host carries the stable, host-CSS-proof markers:\n *  - `data-fancy-pixel`        — the stable agent/scanner handle\n *  - `data-fancy-badge`        — the marker ScanShowcaseSubmission detects\n *  - `data-fancy-pixel-style`  — the active style\n *\n * @returns the host element (shadow root already populated).\n */\nexport function createPixelHost(\n  style: PixelStyle,\n  mode: PixelMode,\n  href: string,\n): HTMLElement {\n  const host = document.createElement(\"div\");\n  host.setAttribute(\"data-fancy-pixel\", \"\");\n  host.setAttribute(\"data-fancy-badge\", \"\");\n  host.setAttribute(\"data-fancy-pixel-style\", style);\n  host.setAttribute(\"data-fancy-pixel-mode\", mode);\n  host.style.cssText = hostStyleFor(mode);\n\n  const root = host.attachShadow({ mode: \"open\" });\n  root.innerHTML = innerFor(style, href);\n\n  return host;\n}\n","import { sendPixelBeacon } from \"./beacon.js\";\nimport { createPixelHost } from \"./render.js\";\nimport type {\n  MountPixelOptions,\n  PixelHandle,\n  PixelMode,\n  PixelShownEventDetail,\n  PixelStyle,\n} from \"./types.js\";\n\nconst DEFAULT_HREF = \"https://particle.academy\";\nconst STYLES: PixelStyle[] = [\"badge\", \"mark\", \"beacon\"];\nconst MODES: PixelMode[] = [\"placed\", \"floating\"];\n\nfunction resolveTarget(target: string | Element | null | undefined): Element {\n  if (target instanceof Element) return target;\n  if (typeof target === \"string\") {\n    const found = document.querySelector(target);\n    if (found) return found;\n  }\n  return document.body;\n}\n\nfunction currentPath(): string {\n  return typeof location !== \"undefined\" ? location.pathname : \"/\";\n}\n\n/**\n * Mount a Fancy UI pixel into the page.\n *\n * Renders the chosen style inside an open Shadow DOM (host CSS cannot hide it),\n * wires an IntersectionObserver to confirm true on-screen visibility, dispatches\n * a `fancy-pixel:shown` CustomEvent on first visibility, and POSTs a liveness\n * beacon to `${endpoint}/pixel` on mount and on every visibility change.\n */\nexport function mountPixel(opts: MountPixelOptions = {}): PixelHandle {\n  const style: PixelStyle = STYLES.includes(opts.style as PixelStyle)\n    ? (opts.style as PixelStyle)\n    : \"badge\";\n  const mode: PixelMode = MODES.includes(opts.mode as PixelMode)\n    ? (opts.mode as PixelMode)\n    : \"floating\";\n  const siteKey = opts.siteKey ?? \"\";\n  const endpoint = opts.endpoint ?? \"\";\n  const href = opts.href ?? DEFAULT_HREF;\n  const target = opts.target ?? null;\n\n  const host = createPixelHost(style, mode, href);\n\n  // Mount: floating always pins to body; placed flows at the target.\n  if (mode === \"floating\") {\n    document.body.appendChild(host);\n  } else {\n    resolveTarget(target).appendChild(host);\n  }\n\n  let visible = false;\n  let shownDispatched = false;\n  let destroyed = false;\n\n  function beacon(): void {\n    if (!endpoint) return;\n    sendPixelBeacon(endpoint, {\n      siteKey,\n      style,\n      mode,\n      visible,\n      path: currentPath(),\n      ts: Date.now(),\n    });\n  }\n\n  function dispatchShownOnce(): void {\n    if (shownDispatched) return;\n    shownDispatched = true;\n    const detail: PixelShownEventDetail = { style, mode, siteKey, host };\n    document.dispatchEvent(\n      new CustomEvent<PixelShownEventDetail>(\"fancy-pixel:shown\", { detail }),\n    );\n  }\n\n  // Visibility verification. IntersectionObserver confirms the badge is truly\n  // on-screen — not display:none, not 0-size, not scrolled out of view. When\n  // unavailable (old/headless UAs) we optimistically assume visible so the\n  // liveness beacon still fires.\n  let observer: IntersectionObserver | null = null;\n\n  function setVisible(next: boolean): void {\n    if (destroyed || next === visible) return;\n    visible = next;\n    if (visible) dispatchShownOnce();\n    beacon();\n  }\n\n  if (typeof IntersectionObserver === \"function\") {\n    observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        if (!entry) return;\n        // intersectionRatio > 0 with a non-zero box = genuinely rendered.\n        const rect = entry.boundingClientRect;\n        const hasSize = rect.width > 0 && rect.height > 0;\n        setVisible(entry.isIntersecting && entry.intersectionRatio > 0 && hasSize);\n      },\n      { threshold: [0, 0.01, 0.5] },\n    );\n    observer.observe(host);\n  } else {\n    // No IO support — fire an optimistic visible beacon on mount.\n    setVisible(true);\n  }\n\n  // Always emit a mount beacon so the server logs liveness even before the\n  // observer reports (visible defaults false until proven).\n  beacon();\n\n  const resolved: PixelHandle[\"options\"] = {\n    style,\n    mode,\n    siteKey,\n    endpoint,\n    href,\n    target,\n  };\n\n  return {\n    host,\n    get visible() {\n      return visible;\n    },\n    options: resolved,\n    destroy() {\n      if (destroyed) return;\n      destroyed = true;\n      observer?.disconnect();\n      observer = null;\n      host.remove();\n    },\n  };\n}\n","import { mountPixel } from \"./mount.js\";\nimport type { MountPixelOptions, PixelHandle } from \"./types.js\";\n\n/**\n * Read pixel config off the currently-executing <script> element's data-*\n * attributes. Used by the IIFE global bundle so a single <script> tag both\n * loads and auto-mounts the pixel:\n *\n *   <script src=\".../fancy-pixel.global.min.js\"\n *           data-style=\"badge\" data-mode=\"floating\"\n *           data-site=\"KEY\" data-endpoint=\"https://host/heuristics\"></script>\n */\nfunction readScriptConfig(): MountPixelOptions | null {\n  if (typeof document === \"undefined\") return null;\n\n  // `document.currentScript` is the running script during initial parse.\n  // Fall back to the last <script> carrying our data-site marker.\n  let el = document.currentScript as HTMLScriptElement | null;\n  if (!el || !el.dataset || el.dataset.site === undefined) {\n    const candidates = document.querySelectorAll<HTMLScriptElement>(\n      \"script[data-site][src*='fancy-pixel'], script[data-fancy-pixel]\",\n    );\n    el = candidates[candidates.length - 1] ?? null;\n  }\n  if (!el) return null;\n\n  const ds = el.dataset;\n  // Only auto-init if at least one fancy-pixel attribute is present.\n  if (\n    ds.style === undefined &&\n    ds.mode === undefined &&\n    ds.site === undefined &&\n    ds.endpoint === undefined &&\n    ds.fancyPixel === undefined\n  ) {\n    return null;\n  }\n\n  return {\n    style: ds.style as MountPixelOptions[\"style\"],\n    mode: ds.mode as MountPixelOptions[\"mode\"],\n    siteKey: ds.site,\n    endpoint: ds.endpoint,\n    target: ds.target ?? null,\n    href: ds.href,\n  };\n}\n\n/**\n * Auto-mount from the script tag's data-* attributes if present.\n * Safe to call multiple times; mounts at most once per call when config exists.\n */\nexport function autoInit(): PixelHandle | null {\n  const config = readScriptConfig();\n  if (!config) return null;\n\n  const run = (): PixelHandle => mountPixel(config);\n\n  if (typeof document !== \"undefined\" && document.readyState === \"loading\") {\n    // Defer to DOMContentLoaded so `placed` targets exist.\n    let handle: PixelHandle | null = null;\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      () => {\n        handle = run();\n      },\n      { once: true },\n    );\n    // Return null now; the handle resolves after DOMContentLoaded.\n    return handle;\n  }\n\n  return run();\n}\n"]}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@particle-academy/fancy-pixel",
+  "version": "0.1.0",
+  "description": "Embeddable Fancy UI verification badge + liveness beacon. Zero-dependency vanilla TS, Shadow-DOM rendered (host CSS can't hide it), with an IntersectionObserver visibility check and a sendBeacon liveness ping. Badge / Mark / Beacon styles, placed / floating modes.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Particle-Academy/fancy-pixel.git"
+  },
+  "homepage": "https://github.com/Particle-Academy/fancy-pixel#readme",
+  "bugs": "https://github.com/Particle-Academy/fancy-pixel/issues",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/fancy-pixel.global.min.js",
+  "jsdelivr": "./dist/fancy-pixel.global.min.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./global": "./dist/fancy-pixel.global.min.js"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "test": "node --test",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "tsup"
+  },
+  "keywords": [
+    "fancy-ui",
+    "badge",
+    "verification",
+    "beacon",
+    "pixel",
+    "shadow-dom",
+    "human-plus",
+    "agent",
+    "analytics"
+  ],
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}