emdash-plugin-avdeb 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
-## 0.1.0 — unreleased
+## 0.1.1 — 2026-10-03
+
+- Fix: product photos were cropped and cards restyled when an embed sat inside a post body whose theme
+  styles bare elements (e.g. `.article-content img { margin: 1.75em 0 }`, global `img { height: auto }`,
+  `.article-content a { text-decoration: underline }`, `article h3 { font-size }`). Layout-critical
+  resets now use real class specificity; the rest stays `:where()`-wrapped. New tokens
+  `--avdeb-title-size`, `--avdeb-title-leading`, `--avdeb-heading-size`, `--avdeb-items-margin`,
+  `--avdeb-items-pad`, `--avdeb-link-deco`, `--avdeb-btn-bg`, `--avdeb-btn-color`. The embed root gets
+  `not-prose` (Tailwind Typography).
+
+## 0.1.0 — 2026-10-03
 
 - First release: AVDEB Products / AVDEB Product / AVDEB Button Portable Text blocks; grid, carousel, list
   and spotlight layouts; horizontal, hero and compact single-product styles; template components

package/README.md

@@ -4,7 +4,7 @@ Embed [AVDEB](https://avdeb.com/developers/#emdash) products in an [EmDash](http
 
 - **Three editor blocks** — type `/` in any rich-text field: **AVDEB Products**, **AVDEB Product**, **AVDEB Button**. Paste a creator, category or product link and the source is detected automatically.
 - **Four layouts** — grid, carousel (scroll-snap, keyboard + arrow buttons), list ("shop the post") and spotlight (first product featured). Single products as compact card, horizontal card or hero, with your own badge and note.
-- **Looks native on any theme** — container queries (embeds adapt to the column they sit in, not the viewport), inherit / light / dark / system themes, three card styles, accent colour, corner radius, image shape. Every selector is `:where()`-wrapped, so your CSS always wins.
+- **Looks native on any theme** — container queries (embeds adapt to the column they sit in, not the viewport), inherit / light / dark / system themes, three card styles, accent colour, corner radius, image shape. Styling selectors are `:where()`-wrapped, so your CSS always wins; a small layout guard keeps post-body styles (`.prose img`, `.entry-content a`, `article h3`) from cropping images or restyling the cards.
 - **Fast and resilient** — products are fetched server-side, cached in plugin KV per query, and the last good copy is served for a week if AVDEB is unreachable. Identical embeds on one page share a single lookup.
 - **Honest links** — referral links get `rel="sponsored"`; an optional disclosure line appears under embeds that carry a code.
 - **Private by default** — no third-party scripts, no cookies, no iframes, no tracking. The only client JS is ~40 lines for carousel arrows.
@@ -119,7 +119,9 @@ Everything is a CSS custom property on `.avdeb` (embeds) or `.avdeb-cta` (button
 .avdeb[data-theme="dark"] { --avdeb-card-bg: #111; }
 ```
 
-Also available: `--avdeb-surface`, `--avdeb-border-soft`, `--avdeb-media-bg`, `--avdeb-muted`, `--avdeb-badge-bg`, `--avdeb-badge-text`, `--avdeb-shadow-hover`, `--avdeb-pad`, `--avdeb-ratio`. BEM classes (`.avdeb-card__title`, `.avdeb-badge--sale`, …) are stable.
+Also available: `--avdeb-surface`, `--avdeb-border-soft`, `--avdeb-media-bg`, `--avdeb-muted`, `--avdeb-badge-bg`, `--avdeb-badge-text`, `--avdeb-shadow-hover`, `--avdeb-pad`, `--avdeb-ratio`, `--avdeb-title-size`, `--avdeb-title-leading`, `--avdeb-heading-size`, `--avdeb-items-margin`, `--avdeb-items-pad`, `--avdeb-link-deco`, and on buttons `--avdeb-btn-bg` / `--avdeb-btn-color`. BEM classes (`.avdeb-card__title`, `.avdeb-badge--sale`, …) are stable.
+
+Embeds sit inside your post body, where themes often style bare elements (`.prose img { margin }`, `.entry-content a { text-decoration: underline }`). Layout-critical properties — image sizing/margins/borders, title and heading size and margins, link colour/underline, list indentation — are therefore guarded with real class specificity (`.avdeb .avdeb-card …`, 0,3,x) so those rules can't crop photos or restyle cards. Change them through the custom properties above, or with a more specific selector. The embed root also carries `not-prose`, so Tailwind Typography skips it.
 
 ## How it works
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "emdash-plugin-avdeb",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "Embed AVDEB products in EmDash CMS — grid, carousel, list and spotlight blocks with your affiliate or creator referral link",
 	"type": "module",
 	"main": "src/index.ts",

package/src/astro/Button.astro

@@ -6,126 +6,149 @@ import type { ContextData } from "../payload.ts";
 import { relFor } from "../view.ts";
 
 interface Props {
-	context: ContextData | null;
-	href: string;
-	label: string;
-	variant?: ButtonVariant;
-	align?: Alignment;
-	class?: string;
+    context: ContextData | null;
+    href: string;
+    label: string;
+    variant?: ButtonVariant;
+    align?: Alignment;
+    class?: string;
 }
 
-const { context, href, label, variant = "solid", align = "start", class: className } = Astro.props;
+const {
+    context,
+    href,
+    label,
+    variant = "solid",
+    align = "start",
+    class: className,
+} = Astro.props;
 const url = avdebLink(href, context?.ref ?? "");
 const accent = context?.display.accentColor;
 const newTab = context?.display.newTab ?? false;
 ---
 
-<p class:list={["avdeb-cta", `avdeb-cta--${align}`, className]} style={accent ? `--avdeb-accent:${accent}` : undefined}>
-	{
-		url ? (
-			<a class:list={["avdeb-btn", `avdeb-btn--${variant}`]} href={url} rel={relFor(url)} target={newTab ? "_blank" : undefined}>
-				<span>{label}</span>
-				<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M3 8h9.5M8.5 4 12.5 8l-4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
-			</a>
-		) : (
-			<span>{label}</span>
-		)
-	}
+<p
+    class:list={["avdeb-cta", `avdeb-cta--${align}`, className]}
+    style={accent ? `--avdeb-accent:${accent}` : undefined}
+>
+    {url ? (
+        <a
+            class:list={["avdeb-btn", `avdeb-btn--${variant}`]}
+            href={url}
+            rel={relFor(url)}
+            target={newTab ? "_blank" : undefined}
+        >
+            <span>{label}</span>
+            <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+                <path
+                    d="M3 8h9.5M8.5 4 12.5 8l-4 4"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.6"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                />
+            </svg>
+        </a>
+    ) : (
+        <span>{label}</span>
+    )}
 </p>
 
 <style is:global>
-	:where(.avdeb-cta) {
-		--avdeb-accent: #3b6548;
-		--avdeb-accent-contrast: #fff;
-		display: flex;
-		margin-block: 1.75em;
-	}
-
-	:where(.avdeb-cta--center) {
-		justify-content: center;
-	}
-
-	:where(.avdeb-cta--end) {
-		justify-content: flex-end;
-	}
-
-	:where(.avdeb-btn) {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.55em;
-		padding: 0.85em 1.4em;
-		border: 1.5px solid var(--avdeb-accent);
-		border-radius: 999px;
-		font: inherit;
-		font-weight: 600;
-		line-height: 1.1;
-		text-decoration: none;
-		transition:
-			transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
-			box-shadow 0.2s,
-			background-color 0.2s,
-			color 0.2s;
-	}
-
-	:where(.avdeb-btn svg) {
-		flex: none;
-		transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
-	}
-
-	:where(.avdeb-btn:hover) :where(svg) {
-		transform: translateX(3px);
-	}
-
-	:where(.avdeb-btn:dir(rtl)) :where(svg) {
-		scale: -1 1;
-	}
-
-	:where(.avdeb-btn:focus-visible) {
-		outline: 2px solid var(--avdeb-accent);
-		outline-offset: 3px;
-	}
-
-	:where(.avdeb-btn--solid) {
-		background: var(--avdeb-accent);
-		color: var(--avdeb-accent-contrast);
-		box-shadow: 0 10px 24px -12px var(--avdeb-accent);
-	}
-
-	:where(.avdeb-btn--solid:hover) {
-		transform: translateY(-1px);
-		box-shadow: 0 14px 30px -12px var(--avdeb-accent);
-	}
-
-	:where(.avdeb-btn--outline) {
-		background: transparent;
-		color: var(--avdeb-accent);
-	}
-
-	:where(.avdeb-btn--outline:hover) {
-		background: var(--avdeb-accent);
-		color: var(--avdeb-accent-contrast);
-	}
-
-	:where(.avdeb-btn--link) {
-		padding: 0;
-		border: 0;
-		border-radius: 0;
-		background: none;
-		color: var(--avdeb-accent);
-	}
-
-	:where(.avdeb-btn--link:hover) {
-		text-decoration: underline;
-		text-underline-offset: 0.2em;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		:where(.avdeb-btn, .avdeb-btn svg) {
-			transition: none;
-		}
-
-		:where(.avdeb-btn:hover, .avdeb-btn:hover svg) {
-			transform: none;
-		}
-	}
+    :where(.avdeb-cta) {
+        --avdeb-accent: #3b6548;
+        --avdeb-accent-contrast: #fff;
+        display: flex;
+        margin-block: 1.75em;
+    }
+
+    :where(.avdeb-cta--center) {
+        justify-content: center;
+    }
+
+    :where(.avdeb-cta--end) {
+        justify-content: flex-end;
+    }
+
+    :where(.avdeb-btn) {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.55em;
+        padding: 0.85em 1.4em;
+        border: 1.5px solid var(--avdeb-accent);
+        border-radius: 999px;
+        font: inherit;
+        line-height: 1.1;
+        transition:
+            transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+            box-shadow 0.2s,
+            background-color 0.2s,
+            color 0.2s;
+    }
+
+    :where(.avdeb-btn svg) {
+        flex: none;
+        transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+
+    :where(.avdeb-btn:hover) :where(svg) {
+        transform: translateX(3px);
+    }
+
+    :where(.avdeb-btn:dir(rtl)) :where(svg) {
+        scale: -1 1;
+    }
+
+    :where(.avdeb-btn:focus-visible) {
+        outline: 2px solid var(--avdeb-accent);
+        outline-offset: 3px;
+    }
+
+    :where(.avdeb-btn--solid) {
+        --avdeb-btn-bg: var(--avdeb-accent);
+        --avdeb-btn-color: var(--avdeb-accent-contrast);
+        box-shadow: 0 10px 24px -12px var(--avdeb-accent);
+    }
+
+    :where(.avdeb-btn--solid:hover) {
+        transform: translateY(-1px);
+        box-shadow: 0 14px 30px -12px var(--avdeb-accent);
+    }
+
+    :where(.avdeb-btn--outline:hover) {
+        --avdeb-btn-bg: var(--avdeb-accent);
+        --avdeb-btn-color: var(--avdeb-accent-contrast);
+    }
+
+    :where(.avdeb-btn--link) {
+        padding: 0;
+        border: 0;
+        border-radius: 0;
+    }
+
+    :where(.avdeb-btn--link:hover) {
+        --avdeb-link-deco: underline;
+        text-underline-offset: 0.2em;
+    }
+
+    /* Guard: post-body styles like `.entry-content a { color; text-decoration: underline }` would
+       otherwise recolour and underline the button. Real specificity (0,3,0); restyle via the
+       --avdeb-btn-bg / --avdeb-btn-color / --avdeb-accent custom properties. */
+    .avdeb-cta > .avdeb-btn[href] {
+        background: var(--avdeb-btn-bg, transparent);
+        color: var(--avdeb-btn-color, var(--avdeb-accent));
+        font-weight: 600;
+        text-decoration-line: var(--avdeb-link-deco, none);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        :where(.avdeb-btn, .avdeb-btn svg) {
+            transition: none;
+        }
+
+        :where(.avdeb-btn:hover, .avdeb-btn:hover svg) {
+            transform: none;
+        }
+    }
 </style>

package/src/astro/Embed.astro

@@ -72,6 +72,7 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
     <section
         class:list={[
             "avdeb",
+            "not-prose",
             `avdeb--${layout}`,
             single && `avdeb--${single.variant}`,
             `avdeb--${display.cardStyle}`,
@@ -420,6 +421,11 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
         --avdeb-cols: 3;
         --avdeb-radius: 16px;
         --avdeb-ratio: 1 / 1;
+        --avdeb-heading-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
+        --avdeb-title-size: 1rem;
+        --avdeb-title-leading: 1.35;
+        --avdeb-items-margin: 0;
+        --avdeb-items-pad: 0;
 
         container: avdeb / inline-size;
         margin-block: 2em;
@@ -550,15 +556,11 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
     }
 
     :where(.avdeb__heading) {
-        margin: 0;
         font-family: var(--avdeb-font-title);
-        font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
-        line-height: 1.2;
         letter-spacing: -0.01em;
     }
 
     :where(.avdeb__intro) {
-        margin: 0.4rem 0 0;
         max-inline-size: 62ch;
         color: var(--avdeb-muted, currentColor);
         opacity: var(--avdeb-muted-opacity);
@@ -576,16 +578,13 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
         display: inline-flex;
         align-items: center;
         gap: 0.3em;
-        color: var(--avdeb-accent-text);
         font-size: 0.95em;
-        font-weight: 600;
-        text-decoration: none;
         white-space: nowrap;
+        text-underline-offset: 0.2em;
     }
 
     :where(.avdeb__all:hover) {
-        text-decoration: underline;
-        text-underline-offset: 0.2em;
+        --avdeb-link-deco: underline;
     }
 
     :where(.avdeb__all svg, .avdeb-card__cta svg, .avdeb-btn svg) {
@@ -648,17 +647,12 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
         display: grid;
         grid-template-columns: repeat(var(--avdeb-cols), minmax(0, 1fr));
         gap: var(--avdeb-gap);
-        margin: 0;
-        padding: 0;
-        list-style: none;
     }
 
     :where(.avdeb__item) {
         container: avdeb-item / inline-size;
         display: flex;
         min-inline-size: 0;
-        margin: 0;
-        padding: 0;
     }
 
     @container avdeb (max-width: 46rem) {
@@ -708,8 +702,8 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
         overscroll-behavior-x: contain;
         scroll-snap-type: x mandatory;
         scrollbar-width: none;
-        padding: 0.35rem 0.35rem 1.25rem;
-        margin: -0.35rem -0.35rem -1.25rem;
+        --avdeb-items-pad: 0.35rem 0.35rem 1.25rem;
+        --avdeb-items-margin: -0.35rem -0.35rem -1.25rem;
         scroll-padding-inline: 0.35rem;
     }
 
@@ -802,7 +796,7 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
         :where(.avdeb--minimal)
             :where(.avdeb-card:hover)
             :where(.avdeb-card__link) {
-            text-decoration: underline;
+            --avdeb-link-deco: underline;
             text-underline-offset: 0.2em;
         }
 
@@ -832,10 +826,6 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
     }
 
     :where(.avdeb-card__media img) {
-        display: block;
-        inline-size: 100%;
-        block-size: 100%;
-        object-fit: cover;
         transition: transform 0.7s var(--avdeb-ease);
     }
 
@@ -896,7 +886,6 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
     }
 
     :where(.avdeb-card__by) {
-        margin: 0;
         color: var(--avdeb-muted, currentColor);
         opacity: var(--avdeb-muted-opacity);
         font-size: 0.8rem;
@@ -905,20 +894,15 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
 
     :where(.avdeb-card__title) {
         display: -webkit-box;
-        margin: 0;
         overflow: hidden;
         font-family: var(--avdeb-font-title);
-        font-size: 1rem;
         font-weight: 600;
-        line-height: 1.35;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
         line-clamp: 2;
     }
 
     :where(.avdeb-card__link) {
-        color: inherit;
-        text-decoration: none;
         outline: none;
     }
 
@@ -937,7 +921,6 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
     }
 
     :where(.avdeb-card__note) {
-        margin: 0.4rem 0 0;
         padding-inline-start: 0.85rem;
         border-inline-start: 3px solid var(--avdeb-accent);
         font-size: 0.95rem;
@@ -958,7 +941,6 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
         display: flex;
         align-items: baseline;
         gap: 0.45em;
-        margin: 0;
         font-size: 1.02rem;
         font-weight: 700;
         font-variant-numeric: tabular-nums;
@@ -1065,8 +1047,8 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
     }
 
     :where(.avdeb-card--featured) :where(.avdeb-card__title) {
-        font-size: clamp(1.15rem, 0.9rem + 1.6cqi, 1.6rem);
-        line-height: 1.25;
+        --avdeb-title-size: clamp(1.15rem, 0.9rem + 1.6cqi, 1.6rem);
+        --avdeb-title-leading: 1.25;
         -webkit-line-clamp: 3;
         line-clamp: 3;
     }
@@ -1111,7 +1093,7 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
     }
 
     :where(.avdeb-card--hero) :where(.avdeb-card__title) {
-        font-size: clamp(1.35rem, 1rem + 2.4cqi, 2.15rem);
+        --avdeb-title-size: clamp(1.35rem, 1rem + 2.4cqi, 2.15rem);
         letter-spacing: -0.015em;
         -webkit-line-clamp: 4;
         line-clamp: 4;
@@ -1156,7 +1138,6 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
         display: flex;
         align-items: center;
         gap: 0.45em;
-        margin: 1.1rem 0 0;
         color: var(--avdeb-muted, currentColor);
         opacity: var(--avdeb-muted-opacity);
         font-size: 0.78rem;
@@ -1167,6 +1148,93 @@ const hasHeader = Boolean(heading || intro || allHref || isCarousel);
         flex: none;
     }
 
+    /* ── Guard against article / prose styles ───────────────────────────────── */
+    /* Embeds live inside post bodies, whose themes style bare elements (`.prose img { margin }`,
+       `.entry-content a { text-decoration: underline }`, `article h3 { font-size }`, global
+       `img { height: auto }`). Those beat the zero-specificity :where() rules above and break the
+       cards: cropped photos, huge underlined titles, indented grids. So these layout-critical resets
+       use real class specificity (0,3,x). Restyle them with the --avdeb-* properties (title/heading
+       size, items margin/padding, link decoration) or a selector of higher specificity. */
+    .avdeb .avdeb__items[role="list"] {
+        margin: var(--avdeb-items-margin);
+        padding: var(--avdeb-items-pad);
+        list-style: none;
+    }
+
+    .avdeb .avdeb__items .avdeb__item {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .avdeb .avdeb__items .avdeb__item::marker {
+        content: none;
+    }
+
+    .avdeb .avdeb-card .avdeb-card__media img {
+        display: block;
+        inline-size: 100%;
+        max-inline-size: none;
+        block-size: 100%;
+        max-block-size: none;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        border-radius: 0;
+        box-shadow: none;
+        object-fit: cover;
+    }
+
+    .avdeb .avdeb__header .avdeb__heading {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        color: inherit;
+        font-size: var(--avdeb-heading-size);
+        line-height: 1.2;
+    }
+
+    .avdeb .avdeb-card .avdeb-card__title {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        color: inherit;
+        font-size: var(--avdeb-title-size);
+        line-height: var(--avdeb-title-leading);
+    }
+
+    .avdeb .avdeb-card .avdeb-card__link,
+    .avdeb .avdeb__tools .avdeb__all {
+        background: none;
+        font-weight: inherit;
+        text-decoration-line: var(--avdeb-link-deco, none);
+    }
+
+    .avdeb .avdeb-card .avdeb-card__link {
+        color: inherit;
+    }
+
+    .avdeb .avdeb__tools .avdeb__all {
+        color: var(--avdeb-accent-text);
+        font-weight: 600;
+    }
+
+    .avdeb .avdeb-card :is(.avdeb-card__by, .avdeb-card__price) {
+        margin: 0;
+    }
+
+    .avdeb .avdeb-card .avdeb-card__note {
+        margin: 0.4rem 0 0;
+    }
+
+    .avdeb .avdeb__header .avdeb__intro {
+        margin: 0.4rem 0 0;
+    }
+
+    .avdeb > .avdeb__disclosure.avdeb__disclosure {
+        margin: 1.1rem 0 0;
+    }
+
     /* ── Motion & print ─────────────────────────────────────────────────────── */
     @media (prefers-reduced-motion: reduce) {
         :where(.avdeb) :where(*) {

package/src/constants.ts

@@ -1,7 +1,7 @@
 /** Shared identifiers and limits. Pure module: no EmDash or Astro imports. */
 
 export const PLUGIN_ID = "avdeb-products";
-export const VERSION = "0.1.0";
+export const VERSION = "0.1.1";
 
 export const API_HOST = "api.avdeb.com";
 export const API_BASE = `https://${API_HOST}/v1/catalog`;