@konvert7/promoot 0.4.0 → 0.5.0

package/README.md

@@ -85,6 +85,13 @@ visitor's browser fetches regardless of how that HTML was produced.
 `className` and `style` land on the container, and the internal structure carries
 `data-promoot-*` attributes plus `promoot-*` class names you can target.
 
+**It inherits your page rather than painting over it.** Unless the owner picked a
+typeface in their dashboard, the block sets `font: inherit` and renders in whatever face
+your page already uses, webfont included — something the iframe version can never do,
+because nothing crosses an iframe boundary. Corner radius and outline width come from the
+owner's settings too, and each falls back to the shipped value if your Promoot server is
+older than those controls.
+
 The block **never declares a colour scheme of its own**. Its palette uses `light-dark()`,
 which resolves against the scheme it inherits from your page — so a light-only site keeps
 a light panel even for a visitor whose OS prefers dark, and a dark site gets a dark one.

package/dist/promoot-block.js

@@ -13,9 +13,6 @@ async function loadBlock(embedUrl) {
         return null;
     }
 }
-// Every rule is scoped to this one block, and it never declares a colour scheme
-// of its own: the palette uses light-dark(), which resolves against the scheme
-// inherited from the host page, so a light-only site keeps a light panel.
 // A keyframe name cannot be scoped to a selector, so it carries the slot's own
 // id instead, stripped to the characters a css identifier may hold.
 function breatheName(slotId, face) {
@@ -27,7 +24,7 @@ const mono = "ui-monospace, SFMono-Regular, Menlo, monospace";
 function billboardCss(payload, scope) {
     const rest = breatheName(payload.slot.id, "rest");
     const ghost = breatheName(payload.slot.id, "ghost");
-    return `${scope} .promoot-bb { position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }
+    return `${scope} .promoot-bb { position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box; border: var(--border, 1px) solid var(--edge); border-radius: var(--radius, 10px); background: var(--surface); overflow: hidden; font-family: var(--font, inherit); }
 ${scope} .promoot-bb:hover { border-color: var(--edge-hover); }
 ${scope} .promoot-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 16px; box-sizing: border-box; text-align: center; transition: opacity .3s ease; }
 ${scope} .promoot-bb:hover .promoot-rest { opacity: 0; }
@@ -48,13 +45,16 @@ ${scope} .promoot-ghost-body { display: block; font-size: 12px; color: var(--mut
 @keyframes ${rest} { 0%, 55%, 100% { opacity: 1; } 70%, 85% { opacity: 0; } }
 @keyframes ${ghost} { 0%, 55%, 100% { opacity: 0; } 70%, 85% { opacity: 1; } }`;
 }
+// Every rule is scoped to this one block, and it never declares a colour scheme
+// of its own: the palette uses light-dark(), which resolves against the scheme
+// inherited from the host page, so a light-only site keeps a light panel.
 export function scopedCss(payload) {
     const scope = `[data-promoot-slot="${payload.slot.id}"]`;
     return `${scope} { ${payload.paletteVars}; position: relative; display: block; width: 100%; max-width: ${payload.slot.widthPx}px; height: auto; max-height: ${payload.slot.heightPx}px; aspect-ratio: ${payload.slot.widthPx} / ${payload.slot.heightPx}; }
 ${scope} a { text-decoration: none; }
 ${scope} .promoot-ad { display: block; position: relative; height: 100%; width: 100%; }
 ${scope} .promoot-ad > img { display: block; height: 100%; width: 100%; object-fit: cover; }
-${scope} .promoot-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 100%; box-sizing: border-box; padding: 6px 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); overflow: hidden; text-align: center; font-family: system-ui, -apple-system, sans-serif; }
+${scope} .promoot-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 100%; box-sizing: border-box; padding: 6px 12px; border: var(--border, 1px) solid var(--edge); border-radius: var(--radius, 10px); background: var(--surface); overflow: hidden; text-align: center; font-family: var(--font, inherit); }
 ${scope} .promoot-ad:hover .promoot-text { border-color: var(--edge-hover); background: var(--surface-hover); }
 ${scope} .promoot-mark { position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 1px; border-radius: 6px; background: var(--edge); color: var(--surface); font-weight: 700; font-size: 12px; overflow: hidden; }
 ${scope} .promoot-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@@ -62,7 +62,7 @@ ${scope} .promoot-text > span:not(.promoot-mark) { max-width: 100%; white-space:
 ${scope} .promoot-text .promoot-headline { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }
 ${scope} .promoot-text .promoot-desc { font-size: 12px; color: var(--muted); line-height: 1.25; }
 ${scope} .promoot-text .promoot-host { font-size: 11px; color: var(--muted); line-height: 1.25; }
-${scope} .promoot-cta { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; height: 100%; justify-content: center; padding: 0 10px; text-align: center; border: 1px dashed var(--edge); border-radius: 10px; box-sizing: border-box; color: var(--muted); background: var(--surface); font-family: system-ui, -apple-system, sans-serif; }
+${scope} .promoot-cta { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; height: 100%; justify-content: center; padding: 0 10px; text-align: center; border: var(--border, 1px) dashed var(--edge); border-radius: var(--radius, 10px); box-sizing: border-box; color: var(--muted); background: var(--surface); font-family: var(--font, inherit); }
 ${scope} .promoot-cta:hover { border-color: var(--edge-hover); background: var(--surface-hover); }
 ${scope} .promoot-cta strong { font-size: 14px; color: var(--ink); }
 ${scope} .promoot-cta .promoot-pitch { font-size: 13px; color: var(--ink); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konvert7/promoot",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Render a Promoot sponsor slot inline as a React server component, with views counted by the visitor's own browser.",
   "type": "module",
   "main": "./dist/index.js",