@contentrain/astro-kit 0.1.1 → 0.3.0

package/components/nav/meta.json

@@ -4,27 +4,100 @@
   "description": "Site navigation: an inline list with hover/focus submenus on wide screens and a toggle on narrow ones that opens a native popover drawer or a <details> dropdown. No JavaScript.",
   "category": "chrome",
   "uses": [],
-  "shared": ["types.ts"],
+  "shared": [
+    "types.ts"
+  ],
   "variants": {
-    "mobile": { "options": ["popover", "details"], "default": "popover", "description": "Narrow-screen menu: a side drawer (Popover API) or a dropdown under the toggle." },
-    "align": { "options": ["start", "end", "center"], "default": "end", "description": "Horizontal alignment of the inline list." },
-    "density": { "options": ["compact", "comfortable"], "default": "compact", "description": "Gap and text size of the inline list." }
+    "mobile": {
+      "options": [
+        "popover",
+        "details"
+      ],
+      "default": "popover",
+      "description": "Narrow-screen menu: a side drawer (Popover API) or a dropdown under the toggle."
+    },
+    "align": {
+      "options": [
+        "start",
+        "end",
+        "center"
+      ],
+      "default": "end",
+      "description": "Horizontal alignment of the inline list."
+    },
+    "density": {
+      "options": [
+        "compact",
+        "comfortable"
+      ],
+      "default": "compact",
+      "description": "Gap and text size of the inline list."
+    }
   },
   "props": {
-    "items": { "type": "array", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "newTab": { "type": "boolean" }, "children": { "type": "array" } } }, "description": "Menu entries; one level of children is shown." },
-    "label": { "type": "string", "description": "Accessible name of the navigation landmark (ui-strings nav.label)." },
-    "menuLabel": { "type": "string", "description": "Text of the narrow-screen toggle (ui-strings nav.menu)." },
-    "closeLabel": { "type": "string", "description": "Text of the drawer's close button (ui-strings nav.close)." },
-    "id": { "type": "string", "description": "Unique id when a page renders two navigations." }
+    "items": {
+      "type": "array",
+      "required": true,
+      "items": {
+        "type": "object",
+        "fields": {
+          "label": {
+            "type": "string",
+            "required": true
+          },
+          "href": {
+            "type": "url",
+            "required": true
+          },
+          "newTab": {
+            "type": "boolean"
+          },
+          "children": {
+            "type": "array"
+          }
+        }
+      },
+      "description": "Menu entries; one level of children is shown."
+    },
+    "label": {
+      "type": "string",
+      "description": "Accessible name of the navigation landmark (ui-strings nav.label)."
+    },
+    "menuLabel": {
+      "type": "string",
+      "description": "Text of the narrow-screen toggle (ui-strings nav.menu)."
+    },
+    "closeLabel": {
+      "type": "string",
+      "description": "Text of the drawer's close button (ui-strings nav.close)."
+    },
+    "id": {
+      "type": "string",
+      "description": "Unique id when a page renders two navigations."
+    },
+    "part": {
+      "type": "string",
+      "description": "What the navigation is, for checks that find a page's parts (data-cr-part), e.g. \"nav-header\"."
+    }
   },
   "slots": {},
   "js": "none",
   "dependencies": {},
   "sources": {
-    "gutenberg": ["core/navigation", "core/page-list"],
-    "elementor": ["elementor/nav-menu"],
-    "divi": ["divi/et_pb_menu", "divi/et_pb_fullwidth_menu"],
-    "classic": ["classic/nav-menu"]
+    "gutenberg": [
+      "core/navigation",
+      "core/page-list"
+    ],
+    "elementor": [
+      "elementor/nav-menu"
+    ],
+    "divi": [
+      "divi/et_pb_menu",
+      "divi/et_pb_fullwidth_menu"
+    ],
+    "classic": [
+      "classic/nav-menu"
+    ]
   },
   "a11y": "A <nav> landmark with a label; the current page carries aria-current. Submenus open on :focus-within as well as hover. The drawer is a native popover: Escape and light dismiss close it and focus returns to the toggle."
 }

package/components/newsletter/Newsletter.astro

@@ -0,0 +1,110 @@
+---
+// A newsletter sign-up that posts straight to the list provider's hosted form
+// endpoint (Mailchimp, Kit, MailerLite, Brevo, Buttondown): a plain HTML form,
+// no script, no server of ours. The provider shows its own confirmation page,
+// in a new tab by default so the reader keeps the site. The action must be
+// the named provider's hosted endpoint (exact host and path) — a WordPress-side
+// handler (MC4WP, Divi signup, Jetpack) is dead on a static site — or, for
+// `other`, an https address off the site's own origin. Otherwise the section
+// renders nothing; the migration plan lists such a sign-up for review instead
+// of placing it.
+import { tv } from 'tailwind-variants'
+import Section from '../_shared/Section.astro'
+import { newsletterForm } from './newsletter'
+
+const newsletter = tv({
+  slots: {
+    box: 'flex flex-col gap-6',
+    copy: 'flex flex-col gap-3',
+    heading: 'text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
+    intro: 'max-w-xl text-pretty opacity-85',
+    form: 'flex flex-col gap-3',
+    field: 'flex min-w-0 flex-col gap-1.5',
+    label: 'text-sm font-semibold',
+    input: 'min-h-11 w-full rounded-[var(--radius-control,var(--radius-md))] border border-line bg-surface px-3 py-2 text-base text-ink placeholder:text-ink-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    submit: 'inline-flex min-h-11 items-center justify-center rounded-[var(--radius-control,var(--radius-md))] px-5 py-2.5 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 bg-accent text-accent-ink hover:bg-ink hover:text-surface',
+    note: 'text-sm opacity-75',
+  },
+  variants: {
+    layout: {
+      inline: { box: 'md:flex-row md:items-end md:justify-between md:gap-12', copy: 'md:max-w-md', form: 'md:flex-row md:items-end md:shrink-0' },
+      stacked: { box: 'mx-auto max-w-xl items-stretch text-center', intro: 'mx-auto', form: 'text-start' },
+    },
+    // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
+    tone: {
+      default: {},
+      muted: {},
+      inverse: { submit: 'hover:bg-surface hover:text-ink' },
+      accent: { intro: 'opacity-100', note: 'opacity-100', submit: 'bg-ink text-surface hover:bg-surface hover:text-ink' },
+    },
+  },
+  defaultVariants: { layout: 'inline', tone: 'muted' },
+})
+
+interface Props {
+  /** The provider's form endpoint (Mailchimp `https://….list-manage.com/subscribe/post?u=…&id=…`, Kit `https://app.kit.com/forms/<id>/subscriptions`, …). */
+  action: string
+  provider?: 'mailchimp' | 'kit' | 'mailerlite' | 'brevo' | 'buttondown' | 'other' | undefined
+  /** Field name for the address when the provider is `other` or names it differently. */
+  emailName?: string | undefined
+  /** Ask for a first name too (when the provider takes one). */
+  askName?: boolean | undefined
+  heading?: string | undefined
+  intro?: string | undefined
+  /** Small print under the form (privacy, frequency). */
+  note?: string | undefined
+  /** ui-strings newsletter.email */
+  emailLabel?: string | undefined
+  /** ui-strings newsletter.name */
+  nameLabel?: string | undefined
+  /** ui-strings newsletter.submit */
+  submitLabel?: string | undefined
+  /** Open the provider's confirmation page in a new tab. */
+  newTab?: boolean | undefined
+  layout?: 'inline' | 'stacked' | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  id?: string | undefined
+}
+
+const {
+  action, provider = 'mailchimp', emailName, askName = false, heading, intro, note,
+  emailLabel = 'Email address', nameLabel = 'First name', submitLabel = 'Subscribe', newTab = true,
+  layout, tone = 'muted', id = 'newsletter',
+} = Astro.props
+const form = newsletterForm(provider, action, { email: emailName }, Astro.site)
+const s = newsletter({ layout, tone })
+const headingId = heading ? `${id}-title` : undefined
+// `rel` on a form is HTML (the provider's page gets no opener and no referrer) but not in Astro's form attribute types.
+const formRel: Record<string, string> = newTab ? { rel: 'noopener noreferrer' } : {}
+---
+{form && (
+  <Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
+    <div class={s.box()}>
+      {(heading || intro) && (
+        <div class={s.copy()}>
+          {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+          {intro && <p class={s.intro()}>{intro}</p>}
+        </div>
+      )}
+      <div class="flex flex-col gap-2">
+        <form method="post" action={form.action} target={newTab ? '_blank' : undefined} {...formRel} class={s.form()} aria-labelledby={headingId} aria-label={headingId ? undefined : submitLabel}>
+          {askName && form.name && (
+            <div class={s.field()}>
+              <label for={`${id}-name`} class={s.label()}>{nameLabel}</label>
+              <input id={`${id}-name`} name={form.name} type="text" autocomplete="given-name" class={s.input()} />
+            </div>
+          )}
+          <div class={s.field({ class: 'md:min-w-72' })}>
+            <label for={`${id}-email`} class={s.label()}>{emailLabel}</label>
+            <input id={`${id}-email`} name={form.email} type="email" required autocomplete="email" inputmode="email" class={s.input()} />
+          </div>
+          {form.hidden.map(field => (
+            <div aria-hidden="true" class="absolute -left-[5000px]"><input type="text" name={field.name} value={field.value} tabindex="-1" autocomplete="off" /></div>
+          ))}
+          <button type="submit" class={s.submit()}>{submitLabel}</button>
+        </form>
+        {note && <p class={s.note()}>{note}</p>}
+      </div>
+    </div>
+  </Section>
+)}

package/components/newsletter/fixtures.json

@@ -0,0 +1,6 @@
+[
+  {"name": "mailchimp-inline-muted", "props": {"action": "https://example.us21.list-manage.com/subscribe/post?u=0a1b2c3d&id=9f8e7d", "heading": "Letters from the field", "intro": "One long read a month, nothing else.", "note": "Unsubscribe any time. We never share your address.", "id": "newsletter-mailchimp"}},
+  {"name": "kit-stacked-name", "props": {"action": "https://app.kit.com/forms/1234567/subscriptions", "provider": "kit", "askName": true, "layout": "stacked", "tone": "default", "heading": "Join the journal", "submitLabel": "Sign me up", "id": "newsletter-kit"}},
+  {"name": "brevo-inverse", "props": {"action": "https://a1b2c3d4.sibforms.com/serve/MUIFAB", "provider": "brevo", "tone": "inverse", "heading": "News from the studio", "id": "newsletter-brevo"}},
+  {"name": "other-accent", "props": {"action": "https://buttondown.com/api/emails/embed-subscribe/journal", "provider": "buttondown", "tone": "accent", "id": "newsletter-accent"}}
+]

package/components/newsletter/meta.json

@@ -0,0 +1,105 @@
+{
+  "id": "newsletter",
+  "name": "Newsletter sign-up",
+  "description": "A newsletter sign-up that posts straight to the list provider's hosted form endpoint (Mailchimp, Kit, MailerLite, Brevo, Buttondown): a plain HTML form with no script and no server of ours. The provider shows its own confirmation page. The action must be the named provider's endpoint (exact host and path; `other`: https off the site's origin), otherwise nothing renders. WordPress-side sign-up plugins (MC4WP, Divi signup, Jetpack) post through the site and are not mapped here: the plan lists them for review.",
+  "category": "section",
+  "uses": [],
+  "shared": [
+    "Section.astro"
+  ],
+  "variants": {
+    "layout": {
+      "options": [
+        "inline",
+        "stacked"
+      ],
+      "default": "inline",
+      "description": "inline: copy beside the form on wide screens. stacked: one centred column."
+    },
+    "tone": {
+      "options": [
+        "default",
+        "muted",
+        "inverse",
+        "accent"
+      ],
+      "default": "muted",
+      "description": "Section background."
+    }
+  },
+  "props": {
+    "action": {
+      "type": "url",
+      "required": true,
+      "description": "The provider's hosted form endpoint (Mailchimp *.list-manage.com/subscribe/post, Kit app.kit.com/forms/<n>/subscriptions, MailerLite assets.mailerlite.com/jsonp/<n>/forms/<n>/subscribe, Brevo *.sibforms.com/serve/, Buttondown buttondown.com/api/emails/embed-subscribe/). At migration the engine reads it from the source form element (`dom:form@action`) into the section's content, where it stays editable in Studio; it never passes through the fact pack or a model."
+    },
+    "provider": {
+      "type": "select",
+      "options": [
+        "mailchimp",
+        "kit",
+        "mailerlite",
+        "brevo",
+        "buttondown",
+        "other"
+      ],
+      "default": "mailchimp",
+      "description": "Names the fields the endpoint expects (Mailchimp EMAIL/FNAME + its bot-trap field, Kit email_address, MailerLite fields[email], Brevo EMAIL, Buttondown email)."
+    },
+    "emailName": {
+      "type": "string",
+      "description": "Field name for the address when the provider is other or names it differently."
+    },
+    "askName": {
+      "type": "boolean",
+      "default": false,
+      "description": "Ask for a first name too, when the provider takes one (the source form had a name field)."
+    },
+    "heading": {
+      "type": "string",
+      "description": "Section heading."
+    },
+    "intro": {
+      "type": "text",
+      "description": "A line or two about the newsletter."
+    },
+    "note": {
+      "type": "string",
+      "description": "Small print under the form (privacy, frequency)."
+    },
+    "emailLabel": {
+      "type": "string",
+      "description": "ui-strings newsletter.email."
+    },
+    "nameLabel": {
+      "type": "string",
+      "description": "ui-strings newsletter.name."
+    },
+    "submitLabel": {
+      "type": "string",
+      "description": "ui-strings newsletter.submit."
+    },
+    "newTab": {
+      "type": "boolean",
+      "default": true,
+      "description": "Open the provider's confirmation page in a new tab (the reader keeps the site)."
+    },
+    "id": {
+      "type": "string",
+      "description": "Section id, unique per page (two sign-ups on one page need two ids): the heading gets `<id>-title`, the inputs `<id>-email`/`<id>-name`."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "classic": [
+      "classic/mailchimp",
+      "classic/kit",
+      "classic/mailerlite",
+      "classic/brevo",
+      "classic/buttondown"
+    ]
+  },
+  "a11y": "Every input has a visible label and the address field is type=email, required, with autocomplete=email, so the browser validates it and announces errors without script. The form is named by the section heading (or the submit label). Mailchimp's bot-trap field is aria-hidden, off screen and out of the tab order."
+}

package/components/newsletter/newsletter.ts

@@ -0,0 +1,73 @@
+// How a newsletter provider's hosted form endpoint wants its fields named, and
+// whether an action really is that endpoint. The form posts straight to the
+// provider — no script, no server of our own — so the names have to be the
+// provider's, and the address has to be the provider's: a WordPress-side
+// handler (MC4WP posting to its own page, Divi's admin-ajax, Jetpack) is dead
+// on a static site, and a POST to it would lose every sign-up without a sound.
+
+export type NewsletterProvider = 'mailchimp' | 'kit' | 'mailerlite' | 'brevo' | 'buttondown' | 'other'
+
+export interface NewsletterForm {
+  action: string
+  email: string
+  /** First-name field, when the provider takes one. */
+  name: string | null
+  /** Hidden fields the provider expects (Mailchimp's bot trap). */
+  hidden: Array<{ name: string, value: string }>
+}
+
+interface Endpoint {
+  email: string
+  name: string | null
+  /** The provider's hosted form endpoint: exact host (or a subdomain of an exact parent) and path. */
+  accepts: (url: URL) => boolean
+}
+
+/** A subdomain of `parent`, one or two labels deep (Mailchimp: `<account>.us21.list-manage.com`). */
+const sub = (host: string, parent: string): boolean => host.endsWith(`.${parent}`) && /^[a-z0-9-]+(?:\.[a-z0-9-]+)?$/.test(host.slice(0, -parent.length - 1))
+
+export const NEWSLETTER_ENDPOINTS: Record<Exclude<NewsletterProvider, 'other'>, Endpoint> = {
+  mailchimp: { email: 'EMAIL', name: 'FNAME', accepts: u => sub(u.hostname, 'list-manage.com') && u.pathname.startsWith('/subscribe/post') },
+  kit: { email: 'email_address', name: 'fields[first_name]', accepts: u => ['app.kit.com', 'app.convertkit.com'].includes(u.hostname) && /^\/forms\/\d+\/subscriptions\/?$/.test(u.pathname) },
+  mailerlite: { email: 'fields[email]', name: 'fields[name]', accepts: u => u.hostname === 'assets.mailerlite.com' && /^\/jsonp\/\d+\/forms\/\d+\/subscribe\/?$/.test(u.pathname) },
+  brevo: { email: 'EMAIL', name: 'FIRSTNAME', accepts: u => sub(u.hostname, 'sibforms.com') && u.pathname.startsWith('/serve/') },
+  buttondown: { email: 'email', name: null, accepts: u => u.hostname === 'buttondown.com' && u.pathname.startsWith('/api/emails/embed-subscribe/') },
+}
+
+const WP_HANDLER = /^\/(?:wp-admin|wp-json|wp-login\.php|xmlrpc\.php)(?:\/|$)|admin-ajax\.php|admin-post\.php/
+
+/** The provider whose hosted endpoint an action is, or null. What the migration uses to choose `provider`. */
+export function newsletterProviderOf(action: string): Exclude<NewsletterProvider, 'other'> | null {
+  let url: URL
+  try { url = new URL(action.trim()) }
+  catch { return null }
+  if (url.protocol !== 'https:') return null
+  return (Object.entries(NEWSLETTER_ENDPOINTS) as Array<[Exclude<NewsletterProvider, 'other'>, Endpoint]>).find(([, e]) => e.accepts(url))?.[0] ?? null
+}
+
+/**
+ * The form for a provider and its action; `null` when the action cannot deliver: not https, not the named
+ * provider's hosted endpoint, or (for `other`) the site's own origin — a static site cannot receive a POST.
+ */
+export function newsletterForm(provider: NewsletterProvider, action: string, names: { email?: string | undefined, name?: string | undefined } = {}, siteOrigin?: string | URL | undefined): NewsletterForm | null {
+  let url: URL
+  try { url = new URL(action.trim()) }
+  catch { return null }
+  if (url.protocol !== 'https:') return null
+  if (provider !== 'other' && !NEWSLETTER_ENDPOINTS[provider].accepts(url)) return null
+  if (provider === 'other') {
+    const own = siteOrigin ? new URL(String(siteOrigin)).hostname.replace(/^www\./, '') : null
+    if (own && url.hostname.replace(/^www\./, '') === own) return null
+    // A WordPress handler on any host (the old site under another name, a staging copy) is just as dead.
+    if (WP_HANDLER.test(url.pathname) || url.searchParams.has('wc-ajax')) return null
+  }
+  const preset = provider === 'other' ? { email: 'email', name: null } : NEWSLETTER_ENDPOINTS[provider]
+  const hidden: NewsletterForm['hidden'] = []
+  // Mailchimp drops a submission whose `b_<u>_<id>` field is filled: the field a bot fills and a person never sees.
+  if (provider === 'mailchimp') {
+    const u = url.searchParams.get('u')
+    const id = url.searchParams.get('id')
+    if (u && id && /^\w+$/.test(u) && /^\w+$/.test(id)) hidden.push({ name: `b_${u}_${id}`, value: '' })
+  }
+  return { action: url.href, email: names.email || preset.email, name: names.name || preset.name, hidden }
+}

package/components/pagination/Pagination.astro

@@ -50,7 +50,7 @@ const shown = [...new Set([1, current - 2, current - 1, current, current + 1, cu
   .toSorted((a, b) => a - b)
 ---
 {total > 1 && (
-  <nav aria-label={label} class={slots.root()}>
+  <nav aria-label={label} data-cr-part="pagination" class={slots.root()}>
     {current > 1
       ? <a href={href(current - 1)} rel="prev" class:list={[slots.item(), slots.link()]}><span aria-hidden="true">←</span> <span class="max-sm:sr-only">{prevLabel}</span></a>
       : style === 'simple' && <span />}

package/components/post-card/PostCard.astro

@@ -8,10 +8,10 @@ import type { ImageInput, LinkInput } from '../_shared/types'
 const card = tv({
   slots: {
     root: 'group relative flex gap-4',
-    media: 'shrink-0 overflow-hidden rounded-[var(--radius-card)]',
+    media: 'shrink-0 overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
     body: 'flex min-w-0 flex-col gap-2',
     meta: 'flex flex-wrap items-center gap-x-2 text-sm text-ink-muted',
-    title: 'leading-snug font-semibold text-balance text-ink',
+    title: 'leading-snug [font-weight:var(--font-weight-heading,600)] text-balance text-ink',
     excerpt: 'text-ink-muted',
   },
   variants: {

package/components/slider/Slider.astro

@@ -27,9 +27,9 @@ const slider = tv({
       square: { image: 'aspect-square' },
     },
     caption: {
-      below: { image: 'rounded-[var(--radius-card)]', caption: 'pt-4' },
+      below: { image: 'rounded-[var(--radius-image,var(--radius-card))]', caption: 'pt-4' },
       // Over the image on wide screens; under it on phones, where the image is too short to hold text.
-      overlay: { image: 'rounded-[var(--radius-card)] md:rounded-none', slide: 'md:rounded-[var(--radius-card)]', caption: 'pt-4 md:absolute md:inset-x-0 md:bottom-0 md:bg-gradient-to-t md:from-ink/80 md:to-transparent md:p-6 md:pt-16 md:text-surface' },
+      overlay: { image: 'rounded-[var(--radius-image,var(--radius-card))] md:rounded-none', slide: 'md:rounded-[var(--radius-image,var(--radius-card))]', caption: 'pt-4 md:absolute md:inset-x-0 md:bottom-0 md:bg-gradient-to-t md:from-ink/80 md:to-transparent md:p-6 md:pt-16 md:text-surface' },
     },
   },
   defaultVariants: { perView: '1', aspect: 'wide', caption: 'overlay' },
@@ -72,7 +72,7 @@ const arrow = 'absolute top-1/2 z-10 hidden size-11 -translate-y-1/2 items-cente
           <KitImage image={slide.image} sizes={sizes} priority={index === 0} class={slots.image()} />
           {(slide.title || slide.text || slide.action) && (
             <div class={slots.caption()}>
-              {slide.title && <p class="text-xl font-semibold text-balance">{slide.title}</p>}
+              {slide.title && <p class="text-xl [font-weight:var(--font-weight-heading,600)] text-balance">{slide.title}</p>}
               {slide.text && <p class="opacity-85">{slide.text}</p>}
               {slide.action && <Button action={slide.action} size="sm" class="mt-2" />}
             </div>

package/components/tabs/Tabs.astro

@@ -14,12 +14,12 @@ export interface TabItem {
 
 const tabs = tv({
   slots: {
-    heading: 'mb-8 text-2xl font-bold tracking-tight text-balance md:text-3xl',
+    heading: 'mb-8 text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
     root: 'group/tabs flex flex-col gap-6',
     list: 'hidden gap-1 group-data-[ready]/tabs:flex',
     trigger: 'cursor-pointer rounded-md px-4 py-2 text-sm font-medium whitespace-nowrap opacity-75 transition hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent data-[selected]:opacity-100',
     panel: 'prose-site prose max-w-none text-current',
-    title: 'mb-3 text-lg font-semibold group-data-[ready]/tabs:sr-only',
+    title: 'mb-3 text-lg [font-weight:var(--font-weight-heading,600)] group-data-[ready]/tabs:sr-only',
   },
   variants: {
     style: {

package/components/testimonial/Testimonial.astro

@@ -16,7 +16,7 @@ export interface TestimonialItem {
 
 const testimonial = tv({
   slots: {
-    heading: 'mb-10 text-2xl font-bold tracking-tight text-balance md:text-3xl',
+    heading: 'mb-10 text-2xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-3xl',
     list: 'grid gap-6',
     card: 'flex h-full flex-col gap-6',
     quote: 'text-pretty',

package/dist/index.d.mts

@@ -14,8 +14,8 @@ declare const BUILDER_PREFIX: Record<KitBuilder, string>;
  */
 declare function isBuilderElement(builder: KitBuilder, name: string): boolean;
 type KitCategory = 'chrome' | 'section' | 'content' | 'primitive';
-/** Client JavaScript a component ships: none, Embla (carousel), Zag.js (accessible widget) or the Studio runtime. */
-type KitJs = 'none' | 'embla' | 'zag' | 'studio';
+/** Client JavaScript a component ships: none, a few lines of dependency-free script (`vanilla`), Embla (carousel), Zag.js (accessible widget) or the Studio runtime. */
+type KitJs = 'none' | 'vanilla' | 'embla' | 'zag' | 'studio';
 type KitProp = FieldDef & {
   description: string;
 };
@@ -97,6 +97,11 @@ interface MappingTable {
   version: string;
   /** What an element no rule covers becomes when no decision is made: rich text. */
   fallback: 'prose';
+  /**
+   * Attribute values the builder leaves out of its data while they are at their default, per element:
+   * Elementor saves no `video_type` for a YouTube video. `when.attr` and `attr:` read through them.
+   */
+  defaults?: Record<string, Record<string, string | number | boolean>>;
   rules: MappingRule[];
 }
 /** Problems with a mapping table against the catalog, one line each; empty when it is sound. */
@@ -111,8 +116,10 @@ interface MappingNode {
   attrs?: Record<string, unknown>;
   children?: MappingNode[];
 }
+/** An element's attributes with the builder's unsaved defaults filled in. */
+declare function attrsOf(node: MappingNode, defaults?: MappingTable['defaults']): Record<string, unknown>;
 /** Whether a rule's `match` (with an optional `:qualifier`) and `when.attr` fit an element. */
-declare function ruleMatches(rule: MappingRule, node: MappingNode): boolean;
+declare function ruleMatches(rule: MappingRule, node: MappingNode, defaults?: MappingTable['defaults']): boolean;
 /**
  * Apply a table to a tree: the outermost matching element owns its whole subtree, and nothing inside
  * it is matched again — a header template part holding the site title and logo is one header, not three.
@@ -146,5 +153,5 @@ declare function loadMapping(builder: KitBuilder): Promise<MappingTable>;
 /** The published catalog (`catalog.json`). */
 declare function loadCatalog(): Promise<KitCatalog>;
 //#endregion
-export { BUILDER_PREFIX, CATALOG_FORMAT, CopyPlan, KIT_BUILDERS, KIT_COMPONENTS_DIR, KIT_DIR, KitBuilder, KitCatalog, KitCategory, KitComponent, KitComponentMeta, KitJs, KitProp, KitVariant, MAPPING_FORMAT, MAPPING_VALUE_PATTERN, MappingNode, MappingRule, MappingTable, claimMatches, componentsForSource, copyComponents, isBuilderElement, loadCatalog, loadMapping, planCopy, ruleMatches, rulesFor, unmappedSources, validateCatalog, validateMapping };
+export { BUILDER_PREFIX, CATALOG_FORMAT, CopyPlan, KIT_BUILDERS, KIT_COMPONENTS_DIR, KIT_DIR, KitBuilder, KitCatalog, KitCategory, KitComponent, KitComponentMeta, KitJs, KitProp, KitVariant, MAPPING_FORMAT, MAPPING_VALUE_PATTERN, MappingNode, MappingRule, MappingTable, attrsOf, claimMatches, componentsForSource, copyComponents, isBuilderElement, loadCatalog, loadMapping, planCopy, ruleMatches, rulesFor, unmappedSources, validateCatalog, validateMapping };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/catalog.ts","../src/mapping.ts","../src/copy.ts","../src/index.ts"],"mappings":";;;cAWa,cAAA;;KAGD,UAAA;AAAA,cACC,YAAA,WAAuB,UAAA;;cAGvB,cAAA,EAAgB,MAAA,CAAO,UAAA;;AAJpC;;;;iBAgBgB,gBAAA,CAAiB,OAAA,EAAS,UAAA,EAAY,IAAA;AAAA,KAK1C,WAAA;;KAGA,KAAA;AAAA,KAEA,OAAA,GAAU,QAAA;EAAa,WAAA;AAAA;AAAA,UAElB,UAAA;EACf,OAAA;EACA,OAAA;EACA,WAAA;AAAA;;UAIe,gBAAA;EACf,EAAA;EACA,IAAA;EACA,WAAA;EACA,QAAA,EAAU,WAAA;EAvBsD;EAyBhE,IAAA;EApBU;EAsBV,MAAA;EACA,QAAA,EAAU,MAAA,SAAe,UAAA;EACzB,KAAA,EAAO,MAAA,SAAe,OAAA;EAxBD;EA0BrB,KAAA,EAAO,MAAA;EACP,EAAA,EAAI,KAAA;;EAEJ,YAAA,EAAc,MAAA;EA1BC;EA4Bf,OAAA,EAAS,OAAA,CAAQ,MAAA,CAAO,UAAA;EA1BP;EA4BjB,IAAA;AAAA;;UAIe,YAAA,SAAqB,gBAAA;EA9BX;EAgCzB,KAAA;AAAA;AAAA,UAGe,UAAA;EACf,MAAA,SAAe,cAAA;EAjCf;EAmCA,MAAA;EAnCW;EAqCX,YAAA,EAAc,MAAA;EACd,UAAA,EAAY,YAAA;AAAA;;iBAIE,eAAA,CAAgB,OAAA,EAAS,UAAA;;iBA6BzB,mBAAA,CAAoB,OAAA,EAAS,UAAA,EAAY,OAAA,WAAkB,YAAA;;;cC5F9D,cAAA;AAAA,cAEA,qBAAA,EAAqB,MAAA;AAAA,UAEjB,WAAA;EDjBU;ECmBzB,KAAA;EDnByB;ECqBzB,IAAA;IAAS,IAAA,GAAO,MAAA;IAA2C,KAAA;EAAA;EDlBvC;ECoBpB,SAAA;EACA,OAAA,GAAU,MAAA;EDpBoF;ECsB9F,IAAA;EDtBkC;ECwBlC,KAAA;EACA,KAAA,GAAQ,MAAA;EDjBT;ECmBC,IAAA;EDxB2B;EC0B3B,IAAA;EDdc;ECgBd,IAAA,GAAO,MAAA;AAAA;AAAA,UAGQ,YAAA;EACf,MAAA,SAAe,cAAA;EACf,OAAA,EAAS,UAAA;EDrB2C;ECuBpD,OAAA;EDvBgE;ECyBhE,QAAA;EACA,KAAA,EAAO,WAAA;AAAA;;iBAIO,eAAA,CAAgB,KAAA,EAAO,YAAA,EAAc,OAAA,EAAS,UAAA;ADtB9D;AAAA,iBC+DgB,eAAA,CAAgB,KAAA,EAAO,YAAA,EAAc,OAAA,EAAS,UAAA;;iBAO9C,QAAA,CAAS,KAAA,EAAO,YAAA,EAAc,OAAA,WAAkB,WAAA;;UAO/C,WAAA;EACf,IAAA;EACA,KAAA,GAAQ,MAAA;EACR,QAAA,GAAW,WAAA;AAAA;AD5Eb;AAAA,iBCgFgB,WAAA,CAAY,IAAA,EAAM,WAAA,EAAa,IAAA,EAAM,WAAA;;;;;iBAerC,YAAA,CAAa,KAAA,EAAO,WAAA,IAAe,KAAA,EAAO,YAAA,EAAc,IAAA;EAAe,IAAA;EAAc,IAAA,EAAM,WAAA;EAAa,IAAA,EAAM,WAAA;AAAA;;;;cC9HjH,OAAA;AAAA,UAEI,QAAA;EFFU;EEIzB,UAAA;EFJyB;EEMzB,KAAA,EAAO,MAAA;EFHG;EEKV,YAAA,EAAc,MAAA;AAAA;AAAA,iBAGA,QAAA,CAAS,OAAA,EAAS,UAAA,EAAY,GAAA,sBAAyB,QAAA;;iBAwBjD,cAAA,CAAe,IAAA,EAAM,QAAA,EAAU,OAAA,UAAiB,QAAA,WAAmB,OAAA;;;;cCjC5E,kBAAA;;iBAGS,WAAA,CAAY,OAAA,EAAS,UAAA,GAAa,OAAA,CAAQ,YAAA;;iBAK1C,WAAA,CAAA,GAAe,OAAA,CAAQ,UAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/catalog.ts","../src/mapping.ts","../src/copy.ts","../src/index.ts"],"mappings":"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"}

package/dist/index.mjs

@@ -95,13 +95,14 @@ async function copyComponents(plan, kitRoot, siteRoot) {
 //#endregion
 //#region src/mapping.ts
 const MAPPING_FORMAT = "astro-kit-mapping@1";
-const MAPPING_VALUE_PATTERN = /^(?:field:[\w-]+|media:[\w-]+|ref:[\w-]+\.[\w-]+|href:(?:self|[\w-]+)|term:[\w-]+|ui:[\w.-]+|const:(?:true|false|-?\d+(?:\.\d+)?|[a-z][a-z0-9_-]{0,31})|site:[\w-]+|menu:(?:primary|footer)|page:(?:base|current|total|breadcrumb)|attr:[\w.-]+|(?:dom|img|link|html):[^@]*(?:@[\w-]+)?)$/;
+const MAPPING_VALUE_PATTERN = /^(?:field:[\w-]+|media:[\w-]+|ref:[\w-]+\.[\w-]+|href:(?:self|[\w-]+)|term:[\w-]+|ui:[\w.-]+|const:(?:true|false|-?\d+(?:\.\d+)?|[a-z][a-z0-9_-]{0,31})|site:[\w-]+|menu:(?:primary|footer)|page:(?:base|current|total|breadcrumb)|attr:[\w.-]+|class:[\w*-]+=(?:[a-z][\w-]*)?\|(?:[a-z][\w-]*)?|(?:dom|img|link|html):[^@]*(?:@[\w-]+)?)$/;
 /** Problems with a mapping table against the catalog, one line each; empty when it is sound. */
 function validateMapping(table, catalog) {
 	const problems = [];
 	if (table.format !== "astro-kit-mapping@1") problems.push(`format is not ${MAPPING_FORMAT}`);
 	if (!KIT_BUILDERS.includes(table.builder)) problems.push(`unknown builder ${table.builder}`);
 	if (!/^\d+$/.test(table.version)) problems.push("version is not an integer string");
+	for (const element of Object.keys(table.defaults ?? {})) if (!isBuilderElement(table.builder, element)) problems.push(`defaults ${element}: not a ${table.builder} element`);
 	const components = new Map(catalog.components.map((c) => [c.id, c]));
 	const seen = /* @__PURE__ */ new Set();
 	for (const rule of table.rules) {
@@ -115,8 +116,12 @@ function validateMapping(table, catalog) {
 			problems.push(`${at}: component ${rule.component} is not in the catalog`);
 			continue;
 		}
-		for (const [axis, value] of Object.entries(rule.variant ?? {})) if (!c.variants[axis]) problems.push(`${at}: ${c.id} has no variant axis ${axis}`);
-		else if (!c.variants[axis].options.includes(value)) problems.push(`${at}: ${c.id}.${axis} has no option ${value}`);
+		for (const [axis, value] of Object.entries(rule.variant ?? {})) {
+			const choice = /^class:[\w*-]+=([a-z][\w-]*)?\|([a-z][\w-]*)?$/.exec(value);
+			const options = choice ? [choice[1], choice[2]].filter((option) => option !== void 0) : [value];
+			if (!c.variants[axis]) problems.push(`${at}: ${c.id} has no variant axis ${axis}`);
+			else for (const missing of options.filter((option) => !c.variants[axis].options.includes(option))) problems.push(`${at}: ${c.id}.${axis} has no option ${missing}`);
+		}
 		for (const [prop, value] of Object.entries({
 			...rule.props,
 			...rule.into ? {} : rule.item
@@ -150,11 +155,18 @@ function unmappedSources(table, catalog) {
 function rulesFor(table, element) {
 	return table.rules.filter((r) => r.match === element || r.match.split(":")[0] === element).toSorted((a, b) => Number(!!b.when || b.match.includes(":")) - Number(!!a.when || a.match.includes(":")));
 }
+/** An element's attributes with the builder's unsaved defaults filled in. */
+function attrsOf(node, defaults = {}) {
+	return {
+		...defaults[node.name],
+		...node.attrs
+	};
+}
 /** Whether a rule's `match` (with an optional `:qualifier`) and `when.attr` fit an element. */
-function ruleMatches(rule, node) {
+function ruleMatches(rule, node, defaults) {
 	const [name, qualifier] = rule.match.split(":");
 	if (name !== node.name) return false;
-	const attrs = node.attrs ?? {};
+	const attrs = attrsOf(node, defaults);
 	if (qualifier && ![
 		attrs.area,
 		attrs.slug,
@@ -172,7 +184,7 @@ function ruleMatches(rule, node) {
 function claimMatches(nodes, table, path = "0") {
 	return nodes.flatMap((node, i) => {
 		const at = `${path}.${i}`;
-		const rule = rulesFor(table, node.name).find((r) => ruleMatches(r, node));
+		const rule = rulesFor(table, node.name).find((r) => ruleMatches(r, node, table.defaults));
 		return rule ? [{
 			path: at,
 			node,
@@ -194,6 +206,6 @@ async function loadCatalog() {
 	return JSON.parse(await readFile(join(PACKAGE_ROOT, "catalog.json"), "utf8"));
 }
 //#endregion
-export { BUILDER_PREFIX, CATALOG_FORMAT, KIT_BUILDERS, KIT_COMPONENTS_DIR, KIT_DIR, MAPPING_FORMAT, MAPPING_VALUE_PATTERN, claimMatches, componentsForSource, copyComponents, isBuilderElement, loadCatalog, loadMapping, planCopy, ruleMatches, rulesFor, unmappedSources, validateCatalog, validateMapping };
+export { BUILDER_PREFIX, CATALOG_FORMAT, KIT_BUILDERS, KIT_COMPONENTS_DIR, KIT_DIR, MAPPING_FORMAT, MAPPING_VALUE_PATTERN, attrsOf, claimMatches, componentsForSource, copyComponents, isBuilderElement, loadCatalog, loadMapping, planCopy, ruleMatches, rulesFor, unmappedSources, validateCatalog, validateMapping };
 
 //# sourceMappingURL=index.mjs.map