@inneropen/marvin-astro 2.0.0 → 2.1.0

package/dist/types-4VdGN9e_.d.ts

@@ -0,0 +1,243 @@
+import { g as MarvinSiteEmbeds } from './embeds-BTNryQA6.js';
+import { MarvinEntry, Entry, CollectionEntry, MarvinEntryListItem } from '@inneropen/marvin-sdk';
+
+/**
+ * Privacy & cookie disclosures: the published `site.privacy` shape, read tolerantly.
+ *
+ * Marvin keeps the structured facts a privacy/cookie policy page needs (who the controller is,
+ * which processors handle visitor data, which cookies and storage entries the site sets). The
+ * components in this package render them and, when any entry is not strictly necessary, run a
+ * consent banner.
+ *
+ * Declared here rather than imported from `@inneropen/marvin-sdk` so the package works with SDKs
+ * that predate `site.privacy`. Both the published camelCase keys and snake_case are accepted, and
+ * a malformed entry is dropped rather than failing the site build.
+ */
+type CookieCategory = 'necessary' | 'preferences' | 'analytics' | 'marketing';
+/** The categories a visitor can switch on; `necessary` is always on and never asked. */
+type ConsentCategory = Exclude<CookieCategory, 'necessary'>;
+declare const COOKIE_CATEGORIES: readonly CookieCategory[];
+declare const CONSENT_CATEGORIES: readonly ConsentCategory[];
+/** Who is responsible for the site's data (the GDPR "controller"). */
+type PrivacyController = {
+    legalName: string;
+    contactEmail?: string;
+    address?: string;
+    euRepresentative?: string;
+    dpoEmail?: string;
+};
+/** A third party that handles visitor data on the site's behalf. */
+type PrivacyProcessor = {
+    name: string;
+    purpose?: string;
+    dataCategories: string[];
+    region?: string;
+    transferBasis?: string;
+    dpaUrl?: string;
+    privacyUrl?: string;
+};
+/** A cookie (or similar storage entry) the site sets. */
+type PrivacyCookie = {
+    name: string;
+    provider: string;
+    purpose: string;
+    duration?: string;
+    category: CookieCategory;
+};
+type PrivacyConsent = {
+    policyEntrySlug?: string;
+    cookiePolicyEntrySlug?: string;
+    /** ISO date (`YYYY-MM-DD`) the disclosures were last checked. */
+    lastReviewed?: string;
+    /** A manual re-prompt bump: changing it asks every visitor again. */
+    version?: string;
+};
+type SitePrivacy = {
+    controller?: PrivacyController;
+    processors: PrivacyProcessor[];
+    cookies: PrivacyCookie[];
+    consent: PrivacyConsent;
+    /** True when any cookie is not `necessary`: those need prior consent. */
+    bannerRequired: boolean;
+};
+/** True when any listed cookie needs consent. */
+declare function cookiesNeedConsent(cookies: readonly Pick<PrivacyCookie, 'category'>[]): boolean;
+/**
+ * Normalize `site.privacy`; `undefined` when the server doesn't send it (or sends a non-object).
+ * `bannerRequired` is taken from the payload when it is a boolean and computed from the cookies
+ * otherwise.
+ */
+declare function sitePrivacy(raw: unknown): SitePrivacy | undefined;
+/**
+ * The version a visitor's choice is bound to: FNV-1a over the sorted, non-necessary
+ * `category|name|provider` triples (plus `consent.version`, a manual bump). Adding, removing or
+ * re-categorising a cookie changes it and asks everyone again; rewording a purpose, changing a
+ * duration, or moving `lastReviewed` does not.
+ */
+declare function consentVersion(privacy: SitePrivacy | undefined): string;
+/** The optional categories that appear in the cookie list, in display order. */
+declare function consentCategories(privacy: SitePrivacy | undefined): ConsentCategory[];
+
+/**
+ * Site-integration types.
+ *
+ * These are the *resolved* shapes a site renders from — Marvin's raw payloads normalized,
+ * defaulted, and made non-optional where a template would otherwise need a guard on every
+ * use. Nothing here is specific to a particular site's design system.
+ */
+
+/**
+ * Any entry shape the published API can hand back. `MarvinEntry`/`Entry` carry `data_json`;
+ * `CollectionEntry`/`MarvinEntryListItem` (list items) do not — see the `hydrate` repository
+ * option.
+ */
+type MarvinContentEntry = MarvinEntry | Entry | CollectionEntry | MarvinEntryListItem;
+/** Criteria for picking one asset off an entry's `assets[]`. */
+type AssetSelectOptions = {
+    role?: string;
+    roles?: string[];
+    usage?: string;
+    usages?: string[];
+    type?: string;
+    types?: string[];
+    mimeType?: string;
+    /** Also accept assets carrying neither a role nor a usage. */
+    allowUnroled?: boolean;
+};
+/** A resolved image: a URL plus the presentation hints stored alongside the asset. */
+type ApiImage = {
+    src: string;
+    alt: string;
+    /** CSS `object-position` value, e.g. `"40% 65%"`. */
+    focalPoint?: string;
+};
+/** A resolved link to an attached resource (material, construction detail, document…). */
+type ApiResourceLink = {
+    name: string;
+    /** The resource type, e.g. `'material'`, `'construction'`. */
+    type: string;
+    /** The relationship role, e.g. `'primary-material'`. */
+    role?: string;
+    slug?: string;
+    href?: string;
+};
+/**
+ * Resolved SEO / social-sharing metadata for the site. Mirrors Marvin's SiteSeo, with identity
+ * fallbacks already applied (title/description/siteName never empty). The rendering layer
+ * (SeoHead) turns this into the actual `<meta>`/Open Graph/Twitter tags.
+ */
+type ApiSeo = {
+    title: string;
+    titleTemplate?: string;
+    description: string;
+    keywords: string[];
+    robots: string;
+    image?: string;
+    imageAlt?: string;
+    ogType: string;
+    siteName: string;
+    twitterCard: string;
+    twitterHandle?: string;
+    twitterCreator?: string;
+    fbAppId?: string;
+    themeColor?: string;
+    publisher?: string;
+    canonicalUrl?: string;
+    verification: {
+        google?: string;
+        bing?: string;
+        pinterest?: string;
+        yandex?: string;
+    };
+};
+type ApiSite = {
+    workspaceSlug?: string;
+    workspaceName?: string;
+    name: string;
+    title: string;
+    tagline?: string;
+    description: string;
+    canonicalUrl?: string;
+    logo?: string;
+    favicon?: string;
+    /** Round maker's stamp / seal — `site_metadata_json.brand.seal`, when it is a URL. */
+    seal?: string;
+    /**
+     * Brand-asset registry: every `site_metadata_json.brand.<name>` that is a URL, path or data URI,
+     * used as-is. Bare asset slugs are left out (Marvin no longer serves assets by slug).
+     */
+    brand?: Record<string, string>;
+    locale: string;
+    timezone: string;
+    email?: string;
+    imprint?: string;
+    social: Record<string, string>;
+    seo: ApiSeo;
+    /**
+     * Embed privacy mode, consent text and the frame sources a `frame-src` CSP must allow.
+     * Absent when the server predates media embeds.
+     */
+    embeds?: MarvinSiteEmbeds;
+    /**
+     * Privacy & cookie disclosures (`site.privacy`), normalized by `sitePrivacy`. Absent when the
+     * server predates them or none are configured.
+     */
+    privacy?: SitePrivacy;
+    metadata: Record<string, unknown>;
+};
+type ApiNavigationLink = {
+    label: string;
+    href: string;
+    description?: string;
+    external: boolean;
+    /** Membership role from the nav collection (e.g. `'primary'`, `'legal'`). Drives grouping. */
+    role?: string;
+};
+type ApiSocialLink = ApiNavigationLink & {
+    icon: string;
+};
+type ApiSiteChrome = {
+    site: ApiSite;
+    mainNavigation: ApiNavigationLink[];
+    footerNavigation: ApiNavigationLink[][];
+    /** Legal links (`role: 'legal'` in the footer nav collection), e.g. Terms/Privacy. */
+    legalLinks: ApiNavigationLink[];
+    socialLinks: ApiSocialLink[];
+    inquiry?: ApiNavigationLink;
+};
+type ApiActionVariant = 'primary' | 'secondary';
+type ApiPageAction = ApiNavigationLink & {
+    variant: ApiActionVariant;
+};
+type ApiHeroAction = ApiPageAction;
+type ApiHero = {
+    kicker: string;
+    headline: string;
+    body: string;
+    actions: ApiHeroAction[];
+    layout: 'split' | 'centered';
+    image?: {
+        src?: string;
+        alt: string;
+        focalPoint?: string;
+        dominantColor?: string;
+        fit?: 'cover' | 'contain';
+        caption?: string;
+        credit?: string;
+        orientation?: string;
+    };
+};
+/**
+ * A section-landing header driven by a Marvin `page` entry (e.g. `bench-notes`, `projects`).
+ * The entry is linkable in nav (collection membership) AND supplies the landing's title, intro,
+ * and hero — so the top of an index page stops being static. Absent fields resolve to
+ * `undefined` so callers fall back to their existing copy/illustration.
+ */
+type SectionLanding = {
+    title?: string;
+    /** The `body` field (or summary) rendered from markdown to HTML — render with `set:html`. */
+    introHtml?: string;
+    hero?: string;
+};
+
+export { type ApiSite as A, CONSENT_CATEGORIES as C, type MarvinContentEntry as M, type PrivacyConsent as P, type SectionLanding as S, type ApiSeo as a, type ApiSiteChrome as b, type ApiNavigationLink as c, type ApiSocialLink as d, type AssetSelectOptions as e, type ApiImage as f, type ApiResourceLink as g, type ApiActionVariant as h, type ApiHero as i, type ApiHeroAction as j, type ApiPageAction as k, COOKIE_CATEGORIES as l, type ConsentCategory as m, type CookieCategory as n, type PrivacyController as o, type PrivacyCookie as p, type PrivacyProcessor as q, type SitePrivacy as r, consentCategories as s, consentVersion as t, cookiesNeedConsent as u, sitePrivacy as v };

package/dist/types.d.ts

@@ -1,162 +1,3 @@
-import { g as MarvinSiteEmbeds } from './embeds-BTNryQA6.js';
-export { a as MarvinEmbed, b as MarvinEmbedIframe, c as MarvinEmbedKind, d as MarvinEmbedLink, e as MarvinEmbedMode, f as MarvinEmbedStatus, M as MarvinEmbeds } from './embeds-BTNryQA6.js';
-import { MarvinEntry, Entry, CollectionEntry, MarvinEntryListItem } from '@inneropen/marvin-sdk';
-
-/**
- * Site-integration types.
- *
- * These are the *resolved* shapes a site renders from — Marvin's raw payloads normalized,
- * defaulted, and made non-optional where a template would otherwise need a guard on every
- * use. Nothing here is specific to a particular site's design system.
- */
-
-/**
- * Any entry shape the published API can hand back. `MarvinEntry`/`Entry` carry `data_json`;
- * `CollectionEntry`/`MarvinEntryListItem` (list items) do not — see the `hydrate` repository
- * option.
- */
-type MarvinContentEntry = MarvinEntry | Entry | CollectionEntry | MarvinEntryListItem;
-/** Criteria for picking one asset off an entry's `assets[]`. */
-type AssetSelectOptions = {
-    role?: string;
-    roles?: string[];
-    usage?: string;
-    usages?: string[];
-    type?: string;
-    types?: string[];
-    mimeType?: string;
-    /** Also accept assets carrying neither a role nor a usage. */
-    allowUnroled?: boolean;
-};
-/** A resolved image: a URL plus the presentation hints stored alongside the asset. */
-type ApiImage = {
-    src: string;
-    alt: string;
-    /** CSS `object-position` value, e.g. `"40% 65%"`. */
-    focalPoint?: string;
-};
-/** A resolved link to an attached resource (material, construction detail, document…). */
-type ApiResourceLink = {
-    name: string;
-    /** The resource type, e.g. `'material'`, `'construction'`. */
-    type: string;
-    /** The relationship role, e.g. `'primary-material'`. */
-    role?: string;
-    slug?: string;
-    href?: string;
-};
-/**
- * Resolved SEO / social-sharing metadata for the site. Mirrors Marvin's SiteSeo, with identity
- * fallbacks already applied (title/description/siteName never empty). The rendering layer
- * (SeoHead) turns this into the actual `<meta>`/Open Graph/Twitter tags.
- */
-type ApiSeo = {
-    title: string;
-    titleTemplate?: string;
-    description: string;
-    keywords: string[];
-    robots: string;
-    image?: string;
-    imageAlt?: string;
-    ogType: string;
-    siteName: string;
-    twitterCard: string;
-    twitterHandle?: string;
-    twitterCreator?: string;
-    fbAppId?: string;
-    themeColor?: string;
-    publisher?: string;
-    canonicalUrl?: string;
-    verification: {
-        google?: string;
-        bing?: string;
-        pinterest?: string;
-        yandex?: string;
-    };
-};
-type ApiSite = {
-    workspaceSlug?: string;
-    workspaceName?: string;
-    name: string;
-    title: string;
-    tagline?: string;
-    description: string;
-    canonicalUrl?: string;
-    logo?: string;
-    favicon?: string;
-    /** Round maker's stamp / seal — `site_metadata_json.brand.seal`, when it is a URL. */
-    seal?: string;
-    /**
-     * Brand-asset registry: every `site_metadata_json.brand.<name>` that is a URL, path or data URI,
-     * used as-is. Bare asset slugs are left out (Marvin no longer serves assets by slug).
-     */
-    brand?: Record<string, string>;
-    locale: string;
-    timezone: string;
-    email?: string;
-    imprint?: string;
-    social: Record<string, string>;
-    seo: ApiSeo;
-    /**
-     * Embed privacy mode, consent text and the frame sources a `frame-src` CSP must allow.
-     * Absent when the server predates media embeds.
-     */
-    embeds?: MarvinSiteEmbeds;
-    metadata: Record<string, unknown>;
-};
-type ApiNavigationLink = {
-    label: string;
-    href: string;
-    description?: string;
-    external: boolean;
-    /** Membership role from the nav collection (e.g. `'primary'`, `'legal'`). Drives grouping. */
-    role?: string;
-};
-type ApiSocialLink = ApiNavigationLink & {
-    icon: string;
-};
-type ApiSiteChrome = {
-    site: ApiSite;
-    mainNavigation: ApiNavigationLink[];
-    footerNavigation: ApiNavigationLink[][];
-    /** Legal links (`role: 'legal'` in the footer nav collection), e.g. Terms/Privacy. */
-    legalLinks: ApiNavigationLink[];
-    socialLinks: ApiSocialLink[];
-    inquiry?: ApiNavigationLink;
-};
-type ApiActionVariant = 'primary' | 'secondary';
-type ApiPageAction = ApiNavigationLink & {
-    variant: ApiActionVariant;
-};
-type ApiHeroAction = ApiPageAction;
-type ApiHero = {
-    kicker: string;
-    headline: string;
-    body: string;
-    actions: ApiHeroAction[];
-    layout: 'split' | 'centered';
-    image?: {
-        src?: string;
-        alt: string;
-        focalPoint?: string;
-        dominantColor?: string;
-        fit?: 'cover' | 'contain';
-        caption?: string;
-        credit?: string;
-        orientation?: string;
-    };
-};
-/**
- * A section-landing header driven by a Marvin `page` entry (e.g. `bench-notes`, `projects`).
- * The entry is linkable in nav (collection membership) AND supplies the landing's title, intro,
- * and hero — so the top of an index page stops being static. Absent fields resolve to
- * `undefined` so callers fall back to their existing copy/illustration.
- */
-type SectionLanding = {
-    title?: string;
-    /** The `body` field (or summary) rendered from markdown to HTML — render with `set:html`. */
-    introHtml?: string;
-    hero?: string;
-};
-
-export { type ApiActionVariant, type ApiHero, type ApiHeroAction, type ApiImage, type ApiNavigationLink, type ApiPageAction, type ApiResourceLink, type ApiSeo, type ApiSite, type ApiSiteChrome, type ApiSocialLink, type AssetSelectOptions, type MarvinContentEntry, MarvinSiteEmbeds, type SectionLanding };
+export { a as MarvinEmbed, b as MarvinEmbedIframe, c as MarvinEmbedKind, d as MarvinEmbedLink, e as MarvinEmbedMode, f as MarvinEmbedStatus, M as MarvinEmbeds, g as MarvinSiteEmbeds } from './embeds-BTNryQA6.js';
+export { h as ApiActionVariant, i as ApiHero, j as ApiHeroAction, f as ApiImage, c as ApiNavigationLink, k as ApiPageAction, g as ApiResourceLink, a as ApiSeo, A as ApiSite, b as ApiSiteChrome, d as ApiSocialLink, e as AssetSelectOptions, m as ConsentCategory, n as CookieCategory, M as MarvinContentEntry, P as PrivacyConsent, o as PrivacyController, p as PrivacyCookie, q as PrivacyProcessor, S as SectionLanding, r as SitePrivacy } from './types-4VdGN9e_.js';
+import '@inneropen/marvin-sdk';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inneropen/marvin-astro",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Site integration for Marvin CMS on Astro — repositories, site chrome, and payload normalization",
   "type": "module",
   "exports": {

package/src/components/ConsentBanner.astro

@@ -0,0 +1,87 @@
+---
+/**
+ * ConsentBanner — put this once in your layout, first thing in `<body>`.
+ *
+ * Renders nothing (and ships no script or CSS) unless `privacy.bannerRequired`, i.e. at least one
+ * listed cookie or storage entry is not `necessary`. When it does render, the markup is `hidden`
+ * and the consent runtime reveals it only when the visitor has no valid choice, so without
+ * JavaScript there is no dead banner and nothing optional loads.
+ *
+ * Accept all and Reject all are the same size and style; Customise opens a native <dialog> with
+ * one unticked checkbox per category the site lists. The choice is stored in
+ * `localStorage['marvin-consent']` for `maxAgeDays` (default 180, refusals included) and is
+ * bound to a hash of the optional cookie list: change the list and visitors are asked again.
+ *
+ * Gate optional scripts with `<script type="text/plain" data-consent="analytics" data-src="…">`
+ * or `<template data-consent="marketing">`; see `consent.ts`. A gated script on a site whose
+ * `bannerRequired` is false never runs (a dev build warns about it).
+ *
+ * `embeds="marketing"` additionally loads click-to-load embeds once that category is allowed.
+ * Off by default: the click on a facade is already the visitor's consent.
+ */
+import { consentCategories, consentVersion, cookiesNeedConsent } from '../privacy.js';
+import type { SitePrivacy } from '../privacy.js';
+import ConsentBannerView from './ConsentBannerView.astro';
+import { DEFAULT_MAX_AGE_DAYS, consentLabels, type ConsentLabelOverrides } from './privacy-text.js';
+
+interface Props {
+  /** `site.privacy`. */
+  privacy: SitePrivacy | null | undefined;
+  /** Link to the cookie/privacy policy page, shown in the banner and dialog. */
+  policyHref?: string;
+  labels?: ConsentLabelOverrides;
+  /** How long a choice (including a refusal) is remembered. Default 180. */
+  maxAgeDays?: number;
+  /** Also activate click-to-load embeds once this category is allowed. */
+  embeds?: 'preferences' | 'analytics' | 'marketing';
+  /**
+   * Inline `consent.css` next to the markup (default), so it ships only where the banner renders.
+   * Set false to import `@inneropen/marvin-astro/components/consent.css` yourself, e.g. under a
+   * CSP that forbids inline styles.
+   */
+  inlineStyles?: boolean;
+  /** Dev warning when `data-consent` markup exists but no banner renders. Default: dev builds. */
+  warn?: boolean;
+  class?: string;
+}
+
+const {
+  privacy,
+  policyHref,
+  maxAgeDays = DEFAULT_MAX_AGE_DAYS,
+  embeds,
+  inlineStyles = true,
+  warn = import.meta.env?.DEV === true,
+  class: className,
+} = Astro.props;
+
+const required = !!privacy && (privacy.bannerRequired || cookiesNeedConsent(privacy.cookies));
+const labels = consentLabels(Astro.props.labels);
+const categories = consentCategories(privacy ?? undefined);
+const optional = (privacy?.cookies ?? []).filter((cookie) => cookie.category !== 'necessary');
+const cookieNames = Object.fromEntries(
+  categories.map((category) => [
+    category,
+    optional.filter((cookie) => cookie.category === category).map((cookie) => cookie.name),
+  ])
+);
+---
+
+{required && (
+  <ConsentBannerView
+    version={consentVersion(privacy ?? undefined)}
+    categories={categories}
+    cookieNames={cookieNames}
+    labels={labels}
+    policyHref={policyHref}
+    maxAgeDays={maxAgeDays}
+    embeds={embeds}
+    inlineStyles={inlineStyles}
+    class={className}
+  />
+)}
+{!required && warn && (
+  <script is:inline>
+    if (document.querySelector('[data-consent]')) console.warn('[marvin-astro] Found data-consent markup, but <ConsentBanner> rendered nothing because site.privacy lists no optional cookie. Those scripts will never run. List the cookie in Marvin, or drop data-consent.');
+  </script>
+)}

package/src/components/ConsentBannerView.astro

@@ -0,0 +1,104 @@
+---
+/**
+ * The markup and script of <ConsentBanner>, split out so Astro only ships this component's script
+ * and CSS on pages where the banner is actually rendered. Use <ConsentBanner>.
+ */
+import type { ConsentCategory } from '../privacy.js';
+import type { ConsentLabels } from './privacy-text.js';
+// Inlined where it renders rather than imported: Astro ships an imported stylesheet on every page
+// that merely imports the component, which would put banner CSS on banner-free sites.
+import consentCss from './consent.css?raw';
+
+interface Props {
+  version: string;
+  categories: ConsentCategory[];
+  cookieNames: Record<string, string[]>;
+  labels: ConsentLabels;
+  policyHref?: string;
+  maxAgeDays: number;
+  embeds?: string;
+  inlineStyles?: boolean;
+  class?: string;
+}
+
+const { version, categories, cookieNames, labels, policyHref, maxAgeDays, embeds, inlineStyles = true, class: className } = Astro.props;
+// A site-relative path is a normal policy link; anything that isn't http(s) once resolved
+// (javascript:, data:, …) is dropped.
+function safeHref(value?: string): string | undefined {
+  if (!value) return undefined;
+  try {
+    return ['http:', 'https:'].includes(new URL(value, 'https://placeholder.invalid').protocol) ? value : undefined;
+  } catch {
+    return undefined;
+  }
+}
+const href = safeHref(policyHref);
+// consent.css has no strings, so dropping comments and collapsing whitespace is safe.
+const css = consentCss.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\s+/g, ' ').trim();
+---
+
+{inlineStyles && <style is:inline set:html={css} />}
+<div
+  class={['marvin-consent', className].filter(Boolean).join(' ')}
+  data-marvin-consent-banner
+  data-version={version}
+  data-max-age={String(maxAgeDays)}
+  data-categories={categories.join(' ')}
+  data-cookies={JSON.stringify(cookieNames)}
+  data-embeds={embeds}
+>
+  <section class="marvin-consent__bar" data-marvin-consent-bar aria-labelledby="marvin-consent-title" hidden>
+    <div class="marvin-consent__text">
+      <p class="marvin-consent__title" id="marvin-consent-title">{labels.title}</p>
+      <p class="marvin-consent__body">
+        {labels.body}
+        {href && (<>{' '}<a href={href}>{labels.policyLink}</a></>)}
+      </p>
+    </div>
+    <div class="marvin-consent__actions">
+      <button type="button" class="marvin-consent__button" data-marvin-consent-action="accept">{labels.acceptAll}</button>
+      <button type="button" class="marvin-consent__button" data-marvin-consent-action="reject">{labels.rejectAll}</button>
+      <button type="button" class="marvin-consent__button marvin-consent__button--customise" data-marvin-consent-action="customise">{labels.customise}</button>
+    </div>
+  </section>
+
+  <dialog class="marvin-consent__dialog" aria-labelledby="marvin-consent-dialog-title" aria-describedby="marvin-consent-dialog-body">
+    <h2 class="marvin-consent__title" id="marvin-consent-dialog-title">{labels.dialogTitle}</h2>
+    <p class="marvin-consent__body" id="marvin-consent-dialog-body">
+      {labels.dialogBody}
+      {href && (<>{' '}<a href={href}>{labels.policyLink}</a></>)}
+    </p>
+    <div class="marvin-consent__category">
+      <label class="marvin-consent__label">
+        <input type="checkbox" checked disabled aria-describedby="marvin-consent-desc-necessary" />
+        <span>{labels.categories.necessary}</span>
+      </label>
+      <p class="marvin-consent__description" id="marvin-consent-desc-necessary">{labels.categoryDescriptions.necessary}</p>
+    </div>
+    {categories.map((category) => (
+      <div class="marvin-consent__category">
+        <label class="marvin-consent__label">
+          <input type="checkbox" name={category} data-marvin-consent-category={category} aria-describedby={`marvin-consent-desc-${category}`} />
+          <span>{labels.categories[category]}</span>
+        </label>
+        <p class="marvin-consent__description" id={`marvin-consent-desc-${category}`}>{labels.categoryDescriptions[category]}</p>
+        {cookieNames[category]?.length ? (
+          <p class="marvin-consent__cookies">
+            {labels.cookiesList}: {cookieNames[category]!.map((name, index) => (
+              <>{index > 0 && ', '}<code>{name}</code></>
+            ))}
+          </p>
+        ) : null}
+      </div>
+    ))}
+    <div class="marvin-consent__actions">
+      <button type="button" class="marvin-consent__button" data-marvin-consent-action="save">{labels.save}</button>
+    </div>
+  </dialog>
+</div>
+
+<script>
+  import { installConsent } from './consent';
+
+  installConsent(document);
+</script>

package/src/components/CookieSettingsLink.astro

@@ -0,0 +1,28 @@
+---
+/**
+ * CookieSettingsLink — a "Cookie settings" link for a footer.
+ *
+ * A real link to the cookie/privacy policy page, so it works without JavaScript. With JavaScript
+ * and a rendered <ConsentBanner>, a click opens the Customise dialog instead. Pass `privacy` to
+ * render nothing on a site that has no optional cookies (and so no banner).
+ */
+import type { SitePrivacy } from '../privacy.js';
+import { cookiesNeedConsent } from '../privacy.js';
+import { consentLabels } from './privacy-text.js';
+
+interface Props {
+  /** The cookie/privacy policy page. */
+  href: string;
+  label?: string;
+  /** `site.privacy`; when given and no banner is required, nothing renders. */
+  privacy?: SitePrivacy | null;
+  class?: string;
+}
+
+const { href, label, privacy, class: className } = Astro.props;
+const visible = privacy === undefined || (!!privacy && (privacy.bannerRequired || cookiesNeedConsent(privacy.cookies)));
+---
+
+{visible && (
+  <a class={['marvin-consent-link', className].filter(Boolean).join(' ')} href={href} data-marvin-consent-open>{label ?? consentLabels().settingsLink}</a>
+)}