@magicpages/pagemoji 0.0.0-stage → 0.1.1

package/LICENSE

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

package/README.md

@@ -1,3 +1,39 @@
-# Temporary Holding Version
+# @magicpages/pagemoji
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Emoji reactions for any web page. Pick up to five emojis, and readers react with a click. No account, no cookies, no tracking.
+
+This package is the widget. Most sites don't need it: load the script from the free hosted server at `pagemoji.magicpages.co`, or from your own. Embed options, styling, privacy and self-hosting are in the [main README](https://github.com/magicpages/pagemoji#readme).
+
+```html
+<script src="https://pagemoji.magicpages.co/v1/pagemoji.js" defer></script>
+<pagemoji-reactions emojis="❤️ 👏 💡"></pagemoji-reactions>
+```
+
+## Bundling it yourself
+
+```sh
+npm install @magicpages/pagemoji
+```
+
+```js
+import { definePagemoji } from '@magicpages/pagemoji';
+
+definePagemoji({ api: 'https://pagemoji.magicpages.co' });
+```
+
+`definePagemoji` registers `<pagemoji-reactions>` and sets the server for widgets without an `api` attribute.
+
+## Generating embed code
+
+`@magicpages/pagemoji/embed` validates emoji input and writes the embed code, for building your own generator:
+
+```js
+import { embedCode, parseEmojis } from '@magicpages/pagemoji/embed';
+
+const { emojis } = parseEmojis('❤️ 👏 💡');
+embedCode('html', { emojis, server: 'https://pagemoji.magicpages.co' });
+```
+
+## License
+
+MIT

package/dist/element.d.ts

@@ -0,0 +1,9 @@
+export declare class PagemojiReactions extends HTMLElement {
+    #private;
+    connectedCallback(): void;
+}
+export interface DefineOptions {
+    /** Base URL of the Pagemoji server, used by widgets without an `api` attribute. */
+    api?: string;
+}
+export declare function definePagemoji(options?: DefineOptions): void;

package/dist/element.js

@@ -0,0 +1,302 @@
+import { MAX_EMOJIS_PER_WIDGET, MAX_KEYS_PER_REQUEST, isValidPageId, normalizeHost, pageRef, } from './protocol.js';
+const DEFAULT_EMOJIS = ['❤️', '👏', '💡'];
+// No cookies, and no page URL in a Referer header: the request itself carries
+// everything the server needs.
+const REQUEST = { credentials: 'omit', referrerPolicy: 'strict-origin' };
+// Every colour derives from the surrounding text colour and an accent, so the
+// widget fits light and dark themes without configuration. Ghost sites supply
+// their accent through --ghost-accent-color.
+const STYLES = `
+:host {
+  --_accent: var(--pagemoji-accent, var(--ghost-accent-color, currentColor));
+  display: block;
+  color: var(--pagemoji-fg, inherit);
+  font-size: var(--pagemoji-font-size, 0.9375rem);
+}
+:host([hidden]) { display: none; }
+.r {
+  display: flex; flex-wrap: wrap; align-items: center;
+  gap: var(--pagemoji-gap, 0.5rem);
+  justify-content: var(--pagemoji-justify, flex-start);
+}
+.l { margin-inline-end: 0.25rem; }
+button, .i {
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
+  font: inherit; color: inherit; line-height: 1;
+}
+button {
+  min-height: 2.25em;
+  padding: var(--pagemoji-padding, 0.3em 0.75em);
+  border: 1px solid var(--pagemoji-border, color-mix(in srgb, currentColor 14%, transparent));
+  border-radius: var(--pagemoji-radius, 999px);
+  background: var(--pagemoji-bg, color-mix(in srgb, currentColor 5%, transparent));
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 0.15s, border-color 0.15s;
+}
+button:hover { background: var(--pagemoji-bg-hover, color-mix(in srgb, currentColor 10%, transparent)); }
+button[aria-pressed='true'] {
+  border-color: var(--pagemoji-border-active, color-mix(in srgb, var(--_accent) 60%, transparent));
+  background: var(--pagemoji-bg-active, color-mix(in srgb, var(--_accent) 14%, transparent));
+}
+button:active { background: color-mix(in srgb, var(--_accent) 24%, transparent); }
+button:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }
+:host([variant='outline']) button:not(:hover, [aria-pressed='true']) { background: transparent; }
+:host([variant='plain']) button { padding-inline: 0.5em; border-color: transparent; }
+:host([variant='plain']) button:not(:hover, :active, [aria-pressed='true']) { background: transparent; }
+.e { position: relative; display: inline-block; }
+.g { display: inline-block; font-size: 1.2em; }
+.c { display: inline-block; min-width: 1ch; font-variant-numeric: tabular-nums; }
+.c:empty { display: none; }
+[aria-pressed='true'] .c { font-weight: 600; }
+.i .c { opacity: 0.75; }
+.p { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: 0.6em; pointer-events: none; }
+[hidden] { display: none !important; }
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .g { transition: transform 0.15s ease-out; }
+  button:hover .g { transform: scale(1.15); }
+}
+`;
+let defaultApi;
+function parseUrl(value) {
+    try {
+        return new URL(value, document.baseURI);
+    }
+    catch {
+        return null;
+    }
+}
+const BURST_SIZE = 6;
+export class PagemojiReactions extends HTMLElement {
+    static #queue = [];
+    #root = this.attachShadow({ mode: 'open' });
+    #api = '';
+    #ref = null;
+    #page = null;
+    #url = '';
+    #emojis = [];
+    #items = new Map();
+    #counts = {};
+    #pressed = new Set();
+    #busy = new Set();
+    connectedCallback() {
+        // Moving the element around the DOM must not fetch again.
+        if (this.#ref)
+            return;
+        const api = parseUrl(this.getAttribute('api') ?? defaultApi ?? '');
+        if (!api)
+            return;
+        this.#api = api.href.endsWith('/') ? api.href : `${api.href}/`;
+        const here = new URL(location.href);
+        let target = here;
+        const candidate = this.getAttribute('url') ??
+            document.querySelector('link[rel="canonical"]')?.href;
+        const parsed = candidate ? parseUrl(candidate) : null;
+        // A canonical URL on another host usually marks a republished post; the
+        // reactions still belong to this site.
+        if (parsed && normalizeHost(parsed.hostname) === normalizeHost(here.hostname))
+            target = parsed;
+        const page = this.getAttribute('page');
+        this.#page = page && isValidPageId(page) ? page : null;
+        this.#ref = pageRef(target, this.#page);
+        this.#url = here.origin + target.pathname;
+        const emojis = new Set((this.getAttribute('emojis') ?? '').split(/\s+/).filter(Boolean));
+        this.#emojis = emojis.size ? [...emojis].slice(0, MAX_EMOJIS_PER_WIDGET) : DEFAULT_EMOJIS;
+        if (PagemojiReactions.#queue.push(this) === 1) {
+            queueMicrotask(() => void PagemojiReactions.#flush());
+        }
+    }
+    /** One counts request per server, site and emoji set, however many widgets the page has. */
+    static async #flush() {
+        const widgets = PagemojiReactions.#queue;
+        PagemojiReactions.#queue = [];
+        const groups = new Map();
+        for (const widget of widgets) {
+            const id = [widget.#api, widget.#ref?.host, ...widget.#emojis].join(' ');
+            let group = groups.get(id);
+            if (!group)
+                groups.set(id, (group = []));
+            group.push(widget);
+        }
+        await Promise.all([...groups.values()].map((group) => PagemojiReactions.#load(group)));
+    }
+    static async #load(group) {
+        const [first] = group;
+        const host = first ? first.#ref?.host : undefined;
+        if (!first || !host)
+            return;
+        const keys = [...new Set(group.map((widget) => widget.#ref?.key ?? ''))];
+        for (let start = 0; start < keys.length; start += MAX_KEYS_PER_REQUEST) {
+            const query = new URLSearchParams({ host });
+            for (const key of keys.slice(start, start + MAX_KEYS_PER_REQUEST))
+                query.append('key', key);
+            for (const emoji of first.#emojis)
+                query.append('emoji', emoji);
+            try {
+                const response = await fetch(new URL(`v1/counts?${query}`, first.#api), REQUEST);
+                if (!response.ok)
+                    continue;
+                const { counts } = await response.json();
+                for (const widget of group) {
+                    const key = widget.#ref?.key ?? '';
+                    if (key in counts)
+                        widget.#show(counts[key] ?? {});
+                }
+            }
+            catch {
+                // Server unreachable: the widgets stay empty.
+            }
+        }
+    }
+    #show(counts) {
+        this.#counts = counts;
+        if (this.#items.size === 0)
+            this.#build();
+        this.#update();
+    }
+    #build() {
+        const readonly = this.hasAttribute('readonly');
+        const list = document.createElement('div');
+        list.className = 'r';
+        list.setAttribute('part', 'list');
+        const text = this.getAttribute('label')?.trim();
+        if (text) {
+            const label = document.createElement('span');
+            label.className = 'l';
+            label.setAttribute('part', 'label');
+            label.textContent = text;
+            list.append(label);
+        }
+        for (const emoji of this.#emojis) {
+            const element = document.createElement(readonly ? 'span' : 'button');
+            const burst = document.createElement('span');
+            const glyph = document.createElement('span');
+            const count = document.createElement('span');
+            burst.className = 'e';
+            glyph.className = 'g';
+            glyph.setAttribute('part', 'emoji');
+            count.className = 'c';
+            count.setAttribute('part', 'count');
+            glyph.textContent = emoji;
+            burst.append(glyph);
+            element.append(burst, count);
+            if (element instanceof HTMLButtonElement) {
+                element.type = 'button';
+                element.addEventListener('click', () => void this.#toggle(emoji));
+            }
+            else {
+                element.className = 'i';
+                element.setAttribute('part', 'item');
+            }
+            this.#items.set(emoji, { element, burst, glyph, count });
+            list.append(element);
+        }
+        const style = document.createElement('style');
+        style.textContent = STYLES;
+        this.#root.replaceChildren(style, list);
+    }
+    #update() {
+        const readonly = this.hasAttribute('readonly');
+        const format = new Intl.NumberFormat(undefined, { notation: 'compact' });
+        for (const [emoji, { element, count }] of this.#items) {
+            const value = this.#counts[emoji] ?? 0;
+            count.textContent = value > 0 ? format.format(value) : '';
+            if (readonly)
+                element.hidden = value === 0;
+            else {
+                const pressed = this.#pressed.has(emoji);
+                element.setAttribute('aria-pressed', String(pressed));
+                element.setAttribute('part', pressed ? 'button pressed' : 'button');
+            }
+        }
+    }
+    /**
+     * Feedback for the reader's own click, never for counts loading or changing
+     * by themselves. Adding celebrates; taking a reaction back stays quiet.
+     */
+    #animate(emoji, adding) {
+        const item = this.#items.get(emoji);
+        if (!item || !window.matchMedia?.('(prefers-reduced-motion: no-preference)').matches)
+            return;
+        const { burst, glyph, count } = item;
+        for (const animation of glyph.getAnimations())
+            animation.cancel();
+        glyph.animate({
+            transform: adding
+                ? ['scale(1)', 'scale(1.4)', 'scale(0.92)', 'scale(1)']
+                : ['scale(1)', 'scale(0.8)', 'scale(1)'],
+        }, { duration: adding ? 400 : 200, easing: 'ease-out' });
+        if (count.textContent) {
+            count.animate({ transform: [`translateY(${adding ? 0.4 : -0.4}em)`, 'none'], opacity: [0, 1] }, { duration: 200, easing: 'ease-out' });
+        }
+        if (!adding)
+            return;
+        const offset = Math.random();
+        for (let i = 0; i < BURST_SIZE; i++) {
+            const angle = ((i + offset) / BURST_SIZE) * 2 * Math.PI;
+            const distance = 1.3 + Math.random() * 0.5;
+            const particle = document.createElement('span');
+            particle.className = 'p';
+            particle.textContent = emoji;
+            particle.setAttribute('aria-hidden', 'true');
+            burst.append(particle);
+            particle.animate({
+                transform: [
+                    'scale(0.6)',
+                    `translate(${Math.cos(angle) * distance}em, ${Math.sin(angle) * distance}em) scale(0.3)`,
+                ],
+                opacity: [1, 1, 0],
+            }, { duration: 450, easing: 'cubic-bezier(0.2, 0.7, 0.3, 1)' }).onfinish = () => particle.remove();
+        }
+    }
+    async #toggle(emoji) {
+        if (this.#busy.has(emoji))
+            return;
+        this.#busy.add(emoji);
+        const adding = !this.#pressed.has(emoji);
+        const previous = this.#counts[emoji] ?? 0;
+        const flip = (on) => {
+            if (on)
+                this.#pressed.add(emoji);
+            else
+                this.#pressed.delete(emoji);
+        };
+        flip(adding);
+        this.#counts = { ...this.#counts, [emoji]: Math.max(0, previous + (adding ? 1 : -1)) };
+        this.#update();
+        this.#animate(emoji, adding);
+        const body = {
+            url: this.#url,
+            emoji,
+            action: adding ? 'add' : 'remove',
+            ...(this.#page ? { page: this.#page } : {}),
+        };
+        try {
+            const response = await fetch(new URL('v1/reactions', this.#api), {
+                ...REQUEST,
+                method: 'POST',
+                headers: { 'content-type': 'text/plain;charset=UTF-8' },
+                body: JSON.stringify(body),
+            });
+            if (!response.ok)
+                throw new Error(`HTTP ${response.status}`);
+            const result = await response.json();
+            this.#counts = result.counts;
+        }
+        catch {
+            flip(!adding);
+            this.#counts = { ...this.#counts, [emoji]: previous };
+        }
+        finally {
+            this.#busy.delete(emoji);
+            this.#update();
+        }
+    }
+}
+export function definePagemoji(options = {}) {
+    if (options.api)
+        defaultApi = options.api;
+    if (!customElements.get('pagemoji-reactions')) {
+        customElements.define('pagemoji-reactions', PagemojiReactions);
+    }
+}

package/dist/embed.d.ts

@@ -0,0 +1,41 @@
+/**
+ * What every generator needs: turn what a site owner typed or picked into a
+ * valid emoji selection, and that selection into embed code. Generators share
+ * this module so they all produce the same code.
+ */
+import { MAX_EMOJIS_PER_WIDGET } from './protocol.js';
+export { MAX_EMOJIS_PER_WIDGET };
+export declare function isEmoji(value: string): boolean;
+export interface EmojiSelection {
+    /** Valid, deduplicated, in input order, at most `MAX_EMOJIS_PER_WIDGET`. */
+    emojis: string[];
+    /** Input that isn't a single emoji. */
+    invalid: string[];
+    /** Valid emojis beyond the limit. */
+    dropped: string[];
+}
+/** Accepts emojis with or without spaces between them: `❤️👏` and `❤️ 👏` are the same. */
+export declare function parseEmojis(input: string): EmojiSelection;
+export type EmbedTarget = 
+/** Script and element, for any HTML page. */
+'html'
+/** One script tag for header/footer injection; mounts itself after the post body. */
+ | 'inject'
+/** Element for a Ghost `post.hbs`, keyed by post ID. */
+ | 'ghost-post'
+/** Read-only element for Ghost post cards. */
+ | 'ghost-card';
+/** `soft` is the default and needs no attribute. */
+export type WidgetVariant = 'soft' | 'outline' | 'plain';
+export interface EmbedOptions {
+    emojis: readonly string[];
+    /** Base URL of the Pagemoji server, e.g. `https://pagemoji.magicpages.co`. */
+    server: string;
+    variant?: WidgetVariant;
+    /** Text shown before the buttons, e.g. "What did you think?". Not used on cards. */
+    label?: string;
+    /** Where `inject` mounts the widget. Defaults to Ghost's post body. */
+    mount?: string;
+}
+export declare const DEFAULT_MOUNT = "after:.gh-content";
+export declare function embedCode(target: EmbedTarget, options: EmbedOptions): string;

package/dist/embed.js

@@ -0,0 +1,68 @@
+/**
+ * What every generator needs: turn what a site owner typed or picked into a
+ * valid emoji selection, and that selection into embed code. Generators share
+ * this module so they all produce the same code.
+ */
+import { MAX_EMOJIS_PER_WIDGET } from './protocol.js';
+export { MAX_EMOJIS_PER_WIDGET };
+/** A single fully-qualified emoji: skin tones, ZWJ sequences, flags and keycaps included. */
+const SINGLE_EMOJI = /^\p{RGI_Emoji}$/v;
+export function isEmoji(value) {
+    return SINGLE_EMOJI.test(value);
+}
+/** Accepts emojis with or without spaces between them: `❤️👏` and `❤️ 👏` are the same. */
+export function parseEmojis(input) {
+    const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+    const selection = { emojis: [], invalid: [], dropped: [] };
+    const seen = new Set();
+    for (const word of input.split(/\s+/).filter(Boolean)) {
+        for (const { segment } of segmenter.segment(word)) {
+            if (!isEmoji(segment)) {
+                selection.invalid.push(segment);
+            }
+            else if (!seen.has(segment)) {
+                seen.add(segment);
+                if (selection.emojis.length < MAX_EMOJIS_PER_WIDGET)
+                    selection.emojis.push(segment);
+                else
+                    selection.dropped.push(segment);
+            }
+        }
+    }
+    return selection;
+}
+export const DEFAULT_MOUNT = 'after:.gh-content';
+function escape(value) {
+    return value
+        .replaceAll('&', '&amp;')
+        .replaceAll('"', '&quot;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;');
+}
+export function embedCode(target, options) {
+    if (options.emojis.length === 0 || options.emojis.length > MAX_EMOJIS_PER_WIDGET) {
+        throw new RangeError(`Pick between 1 and ${MAX_EMOJIS_PER_WIDGET} emojis.`);
+    }
+    const emojis = escape(options.emojis.join(' '));
+    const script = escape(new URL('/v1/pagemoji.js', options.server).href);
+    const optional = [
+        options.variant && options.variant !== 'soft' ? `variant="${options.variant}"` : '',
+        options.label?.trim() ? `label="${escape(options.label.trim())}"` : '',
+    ].filter(Boolean);
+    const element = (...attributes) => `<pagemoji-reactions ${[...attributes, `emojis="${emojis}"`].join(' ')}></pagemoji-reactions>`;
+    switch (target) {
+        case 'html':
+            return `<script src="${script}" defer></script>\n${element(...optional)}`;
+        case 'inject':
+            return [
+                `<script src="${script}" defer`,
+                `  data-emojis="${emojis}"`,
+                ...optional.map((attribute) => `  data-${attribute}`),
+                `  data-mount="${escape(options.mount ?? DEFAULT_MOUNT)}"></script>`,
+            ].join('\n');
+        case 'ghost-post':
+            return element('page="{{id}}"', ...optional);
+        case 'ghost-card':
+            return element('page="{{id}}"', 'readonly');
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { PagemojiReactions, definePagemoji, type DefineOptions } from './element.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { PagemojiReactions, definePagemoji } from './element.js';

package/dist/pagemoji.js

@@ -0,0 +1,51 @@
+(function(){"use strict";const w=/^[A-Za-z0-9._:-]{1,200}$/;function S(i){return w.test(i)}function m(i){const t=i.toLowerCase().replace(/\.$/,"");return t.startsWith("www.")?t.slice(4):t}function k(i,t){const e=m(i.hostname);return t?{host:e,key:`id:${t}`}:{host:e,key:i.pathname.replace(/\/+$/,"")||"/"}}const A=["❤️","👏","💡"],g={credentials:"omit",referrerPolicy:"strict-origin"},x=`
+:host {
+  --_accent: var(--pagemoji-accent, var(--ghost-accent-color, currentColor));
+  display: block;
+  color: var(--pagemoji-fg, inherit);
+  font-size: var(--pagemoji-font-size, 0.9375rem);
+}
+:host([hidden]) { display: none; }
+.r {
+  display: flex; flex-wrap: wrap; align-items: center;
+  gap: var(--pagemoji-gap, 0.5rem);
+  justify-content: var(--pagemoji-justify, flex-start);
+}
+.l { margin-inline-end: 0.25rem; }
+button, .i {
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
+  font: inherit; color: inherit; line-height: 1;
+}
+button {
+  min-height: 2.25em;
+  padding: var(--pagemoji-padding, 0.3em 0.75em);
+  border: 1px solid var(--pagemoji-border, color-mix(in srgb, currentColor 14%, transparent));
+  border-radius: var(--pagemoji-radius, 999px);
+  background: var(--pagemoji-bg, color-mix(in srgb, currentColor 5%, transparent));
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 0.15s, border-color 0.15s;
+}
+button:hover { background: var(--pagemoji-bg-hover, color-mix(in srgb, currentColor 10%, transparent)); }
+button[aria-pressed='true'] {
+  border-color: var(--pagemoji-border-active, color-mix(in srgb, var(--_accent) 60%, transparent));
+  background: var(--pagemoji-bg-active, color-mix(in srgb, var(--_accent) 14%, transparent));
+}
+button:active { background: color-mix(in srgb, var(--_accent) 24%, transparent); }
+button:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }
+:host([variant='outline']) button:not(:hover, [aria-pressed='true']) { background: transparent; }
+:host([variant='plain']) button { padding-inline: 0.5em; border-color: transparent; }
+:host([variant='plain']) button:not(:hover, :active, [aria-pressed='true']) { background: transparent; }
+.e { position: relative; display: inline-block; }
+.g { display: inline-block; font-size: 1.2em; }
+.c { display: inline-block; min-width: 1ch; font-variant-numeric: tabular-nums; }
+.c:empty { display: none; }
+[aria-pressed='true'] .c { font-weight: 600; }
+.i .c { opacity: 0.75; }
+.p { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: 0.6em; pointer-events: none; }
+[hidden] { display: none !important; }
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .g { transition: transform 0.15s ease-out; }
+  button:hover .g { transform: scale(1.15); }
+}
+`;let b;function v(i){try{return new URL(i,document.baseURI)}catch{return null}}const y=6;class p extends HTMLElement{static#i=[];#u=this.attachShadow({mode:"open"});#n="";#e=null;#s=null;#p="";#o=[];#a=new Map;#t={};#r=new Set;#c=new Set;connectedCallback(){if(this.#e)return;const t=v(this.getAttribute("api")??b??"");if(!t)return;this.#n=t.href.endsWith("/")?t.href:`${t.href}/`;const e=new URL(location.href);let o=e;const a=this.getAttribute("url")??document.querySelector('link[rel="canonical"]')?.href,n=a?v(a):null;n&&m(n.hostname)===m(e.hostname)&&(o=n);const s=this.getAttribute("page");this.#s=s&&S(s)?s:null,this.#e=k(o,this.#s),this.#p=e.origin+o.pathname;const r=new Set((this.getAttribute("emojis")??"").split(/\s+/).filter(Boolean));this.#o=r.size?[...r].slice(0,5):A,p.#i.push(this)===1&&queueMicrotask(()=>void p.#d())}static async#d(){const t=p.#i;p.#i=[];const e=new Map;for(const o of t){const a=[o.#n,o.#e?.host,...o.#o].join(" ");let n=e.get(a);n||e.set(a,n=[]),n.push(o)}await Promise.all([...e.values()].map(o=>p.#h(o)))}static async#h(t){const[e]=t,o=e?e.#e?.host:void 0;if(!e||!o)return;const a=[...new Set(t.map(n=>n.#e?.key??""))];for(let n=0;n<a.length;n+=100){const s=new URLSearchParams({host:o});for(const r of a.slice(n,n+100))s.append("key",r);for(const r of e.#o)s.append("emoji",r);try{const r=await fetch(new URL(`v1/counts?${s}`,e.#n),g);if(!r.ok)continue;const{counts:c}=await r.json();for(const l of t){const h=l.#e?.key??"";h in c&&l.#m(c[h]??{})}}catch{}}}#m(t){this.#t=t,this.#a.size===0&&this.#f(),this.#l()}#f(){const t=this.hasAttribute("readonly"),e=document.createElement("div");e.className="r",e.setAttribute("part","list");const o=this.getAttribute("label")?.trim();if(o){const n=document.createElement("span");n.className="l",n.setAttribute("part","label"),n.textContent=o,e.append(n)}for(const n of this.#o){const s=document.createElement(t?"span":"button"),r=document.createElement("span"),c=document.createElement("span"),l=document.createElement("span");r.className="e",c.className="g",c.setAttribute("part","emoji"),l.className="c",l.setAttribute("part","count"),c.textContent=n,r.append(c),s.append(r,l),s instanceof HTMLButtonElement?(s.type="button",s.addEventListener("click",()=>void this.#b(n))):(s.className="i",s.setAttribute("part","item")),this.#a.set(n,{element:s,burst:r,glyph:c,count:l}),e.append(s)}const a=document.createElement("style");a.textContent=x,this.#u.replaceChildren(a,e)}#l(){const t=this.hasAttribute("readonly"),e=new Intl.NumberFormat(void 0,{notation:"compact"});for(const[o,{element:a,count:n}]of this.#a){const s=this.#t[o]??0;if(n.textContent=s>0?e.format(s):"",t)a.hidden=s===0;else{const r=this.#r.has(o);a.setAttribute("aria-pressed",String(r)),a.setAttribute("part",r?"button pressed":"button")}}}#g(t,e){const o=this.#a.get(t);if(!o||!window.matchMedia?.("(prefers-reduced-motion: no-preference)").matches)return;const{burst:a,glyph:n,count:s}=o;for(const c of n.getAnimations())c.cancel();if(n.animate({transform:e?["scale(1)","scale(1.4)","scale(0.92)","scale(1)"]:["scale(1)","scale(0.8)","scale(1)"]},{duration:e?400:200,easing:"ease-out"}),s.textContent&&s.animate({transform:[`translateY(${e?.4:-.4}em)`,"none"],opacity:[0,1]},{duration:200,easing:"ease-out"}),!e)return;const r=Math.random();for(let c=0;c<y;c++){const l=(c+r)/y*2*Math.PI,h=1.3+Math.random()*.5,u=document.createElement("span");u.className="p",u.textContent=t,u.setAttribute("aria-hidden","true"),a.append(u),u.animate({transform:["scale(0.6)",`translate(${Math.cos(l)*h}em, ${Math.sin(l)*h}em) scale(0.3)`],opacity:[1,1,0]},{duration:450,easing:"cubic-bezier(0.2, 0.7, 0.3, 1)"}).onfinish=()=>u.remove()}}async#b(t){if(this.#c.has(t))return;this.#c.add(t);const e=!this.#r.has(t),o=this.#t[t]??0,a=s=>{s?this.#r.add(t):this.#r.delete(t)};a(e),this.#t={...this.#t,[t]:Math.max(0,o+(e?1:-1))},this.#l(),this.#g(t,e);const n={url:this.#p,emoji:t,action:e?"add":"remove",...this.#s?{page:this.#s}:{}};try{const s=await fetch(new URL("v1/reactions",this.#n),{...g,method:"POST",headers:{"content-type":"text/plain;charset=UTF-8"},body:JSON.stringify(n)});if(!s.ok)throw new Error(`HTTP ${s.status}`);const r=await s.json();this.#t=r.counts}catch{a(!e),this.#t={...this.#t,[t]:o}}finally{this.#c.delete(t),this.#l()}}}function M(i={}){i.api&&(b=i.api),customElements.get("pagemoji-reactions")||customElements.define("pagemoji-reactions",p)}const f=document.currentScript,d=f instanceof HTMLScriptElement&&f.src?f:null;M(d?{api:new URL("../",d.src).href}:{});const E=d?.dataset.mount?.match(/^(before|after|prepend|append):(.+)$/);if(d&&E){const[,i,t=""]=E,e=()=>{const o=document.querySelector(t);if(!o)return;const a=document.createElement("pagemoji-reactions");for(const n of["emojis","page","variant","label"]){const s=d.dataset[n];s&&a.setAttribute(n,s)}i==="before"?o.before(a):i==="after"?o.after(a):i==="prepend"?o.prepend(a):o.append(a)};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()}})();

package/dist/protocol.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The contract between the widget and the server: limits, page identity and
+ * the JSON shapes on the wire. Both sides import this module, so a page key is
+ * computed by exactly one function.
+ */
+export declare const MAX_EMOJIS_PER_WIDGET = 5;
+export declare const MAX_KEYS_PER_REQUEST = 100;
+export interface PageRef {
+    host: string;
+    /** `id:<page id>` when the page has a stable ID, otherwise the path. */
+    key: string;
+}
+export declare function isValidPageId(value: string): boolean;
+/** Lowercase, without a trailing dot or a leading `www.`. */
+export declare function normalizeHost(hostname: string): string;
+/**
+ * The page a reaction belongs to. Paths start with `/` and IDs with `id:`, so
+ * the two kinds of key can never collide.
+ */
+export declare function pageRef(url: URL, pageId?: string | null): PageRef;
+/** `GET /v1/counts`: `{ [key]: { [emoji]: count } }` */
+export interface CountsResponse {
+    counts: Record<string, Record<string, number>>;
+}
+/**
+ * `POST /v1/reactions`. Sent as `text/plain` so the browser doesn't need a CORS
+ * preflight; the body is still JSON. `url` is origin and path only.
+ */
+export interface ReactionRequest {
+    url: string;
+    page?: string;
+    emoji: string;
+    action: 'add' | 'remove';
+}
+export interface ReactionResponse {
+    key: string;
+    /** False when the duplicate guard turned the request into a no-op. */
+    applied: boolean;
+    /** Every emoji counted on the page, not only the ones in this widget. */
+    counts: Record<string, number>;
+}
+export interface ErrorResponse {
+    error: string;
+}

package/dist/protocol.js

@@ -0,0 +1,26 @@
+/**
+ * The contract between the widget and the server: limits, page identity and
+ * the JSON shapes on the wire. Both sides import this module, so a page key is
+ * computed by exactly one function.
+ */
+export const MAX_EMOJIS_PER_WIDGET = 5;
+export const MAX_KEYS_PER_REQUEST = 100;
+const PAGE_ID = /^[A-Za-z0-9._:-]{1,200}$/;
+export function isValidPageId(value) {
+    return PAGE_ID.test(value);
+}
+/** Lowercase, without a trailing dot or a leading `www.`. */
+export function normalizeHost(hostname) {
+    const host = hostname.toLowerCase().replace(/\.$/, '');
+    return host.startsWith('www.') ? host.slice(4) : host;
+}
+/**
+ * The page a reaction belongs to. Paths start with `/` and IDs with `id:`, so
+ * the two kinds of key can never collide.
+ */
+export function pageRef(url, pageId) {
+    const host = normalizeHost(url.hostname);
+    if (pageId)
+        return { host, key: `id:${pageId}` };
+    return { host, key: url.pathname.replace(/\/+$/, '') || '/' };
+}

package/package.json

@@ -1,6 +1,42 @@
 {
   "name": "@magicpages/pagemoji",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Emoji reactions for any web page. No cookies, no tracking.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/magicpages/pagemoji.git",
+    "directory": "packages/widget"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./embed": {
+      "types": "./dist/embed.d.ts",
+      "default": "./dist/embed.js"
+    },
+    "./protocol": {
+      "types": "./dist/protocol.d.ts",
+      "default": "./dist/protocol.js"
+    },
+    "./pagemoji.js": "./dist/pagemoji.js"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "lint": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "jsdom": "25.0.1",
+    "typescript": "5.9.3",
+    "vite": "6.4.3",
+    "vitest": "4.1.11"
+  }
+}