@dataimago/css 0.1.0-alpha.22 → 0.1.0-alpha.23

package/dist/quarto/_extensions/dataimago/pkgsite/dataimago-light.scss

@@ -0,0 +1,338 @@
+// @dataimago/css@0.1.0-alpha.23 dist/quarto/_extensions/dataimago/pkgsite/dataimago-light.scss · sha256:e456b3e8cfaa03df7fe5ac29bb6e8288454ee5daab29ff6470c45a12ff8d3f32 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.23 dataimago-sync
+// dataimago light theme for Quarto 1.8 — generated from the design tokens (tools/formats/quarto.mjs).
+// Bootstrap Sass variables are compile-time sRGB; runtime colours come from the custom properties below.
+
+/*-- scss:defaults --*/
+$body-bg: #ededeb !default;
+$body-color: #14140f !default;
+$headings-color: #14140f !default;
+$navbar-bg: #ededeb !default;
+$link-color: #434739 !default;
+$link-hover-color: #363a2e !default;
+$code-color: #1f618d !default;
+$code-bg: #faf2e3 !default;
+$border-color: #888785 !default;
+$font-family-sans-serif: Noto Sans, Fira Sans, system-ui, sans-serif !default;
+$font-family-monospace: Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace !default;
+$headings-font-family: Josefin Sans, Noto Sans, system-ui, sans-serif !default;
+$headings-font-weight: 500 !default;
+$h2-font-size: 1.875rem !default;
+$web-font-path: false !default;
+
+/*-- scss:rules --*/
+// ── Design tokens (contract custom properties) ───────────────────────
+:root {
+  --color-palette-ink-50: #f5f5f4;
+  --color-palette-ink-100: #e7e5e4;
+  --color-palette-ink-200: #d6d3d1;
+  --color-palette-ink-300: #a8a29e;
+  --color-palette-ink-400: #78716c;
+  --color-palette-ink-500: #57534e;
+  --color-palette-ink-600: #44403c;
+  --color-palette-ink-700: #292524;
+  --color-palette-ink-800: #1c1917;
+  --color-palette-ink-900: #0c0a09;
+  --color-palette-stone-50: #f7f7f6;
+  --color-palette-stone-100: #ededeb;
+  --color-palette-stone-200: #dcdcda;
+  --color-palette-stone-300: #c1c1bf;
+  --color-palette-stone-400: #a0a0a0;
+  --color-palette-stone-500: #7c7c7c;
+  --color-palette-stone-600: #5e5e5c;
+  --color-palette-stone-700: #424240;
+  --color-palette-stone-800: #292927;
+  --color-palette-stone-900: #14140f;
+  --color-palette-forest-50: #f0f1ed;
+  --color-palette-forest-100: #dde0d4;
+  --color-palette-forest-200: #bdc4ad;
+  --color-palette-forest-300: #98a384;
+  --color-palette-forest-400: #7e8a6b;
+  --color-palette-forest-500: #5e6749;
+  --color-palette-forest-600: #4d5640;
+  --color-palette-forest-700: #434739;
+  --color-palette-forest-800: #363a2e;
+  --color-palette-forest-900: #1f2218;
+  --color-palette-paper-50: #fefdfb;
+  --color-palette-paper-100: #fdf9f2;
+  --color-palette-paper-200: #faf2e3;
+  --color-palette-paper-300: #f5e8cf;
+  --color-palette-paper-400: #edd9b3;
+  --color-palette-paper-500: #e0c088;
+  --color-palette-copper-50: #fdf4ee;
+  --color-palette-copper-100: #fbe5d1;
+  --color-palette-copper-200: #f6c79c;
+  --color-palette-copper-300: #f0a467;
+  --color-palette-copper-400: #ea8441;
+  --color-palette-copper-500: #d46820;
+  --color-palette-copper-600: #b55017;
+  --color-palette-copper-700: #913d15;
+  --color-palette-copper-800: #753318;
+  --color-palette-copper-900: #612b16;
+  --color-palette-accent-50: #f0f8fc;
+  --color-palette-accent-300: #3498DB;
+  --color-palette-accent-400: #2980B9;
+  --color-palette-accent-500: #1f618d;
+  --color-palette-accent-600: #154d6f;
+  --color-palette-accent-700: #0f3a52;
+  --color-palette-presentation-blue-50: #f0f8fc;
+  --color-palette-presentation-blue-500: #3498DB;
+  --color-palette-presentation-blue-600: #2980B9;
+  --color-palette-presentation-blue-700: #1f618d;
+  --color-functional-success: #27AE60;
+  --color-functional-warning: #F39C12;
+  --color-functional-error: #E74C3C;
+  --color-functional-info: #3498DB;
+  --transition-quick: 0.15s ease;
+  --transition-standard: 0.25s ease-in-out;
+  --transition-smooth: 0.35s ease;
+  --transition-logo: 0.3s;
+  --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
+  --font-family-mono: Noto Sans Mono, SF Mono, Monaco, Inconsolata, monospace;
+  --font-family-display: var(--font-family-display-editorial);
+  --font-family-display-editorial: Josefin Sans, Noto Sans, system-ui, sans-serif;
+  --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
+  --font-family-brand: Futura, system-ui, sans-serif;
+  --font-family-math: Noto Sans Math, math;
+  --font-size-micro: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-readable: 1.125rem;
+  --font-size-emphasis: 1.25rem;
+  --font-size-heading-small: 1.5rem;
+  --font-size-heading-medium: 1.875rem;
+  --font-size-heading-large: 2.25rem;
+  --font-size-heading-xl: 3rem;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-heading-h1: var(--font-weight-medium);
+  --font-weight-heading-h2: var(--font-weight-medium);
+  --font-weight-heading-h3: var(--font-weight-normal);
+  --font-weight-heading-h4: var(--font-weight-light);
+  --font-weight-heading-h5: var(--font-weight-light);
+  --font-weight-heading-h6: var(--font-weight-light);
+  --font-weight-heading-subtitle: var(--font-weight-semibold);
+  --font-style-normal: normal;
+  --font-style-italic: italic;
+  --font-style-oblique: oblique;
+  --font-lineHeight-tight: 1.25;
+  --font-lineHeight-normal: 1.5;
+  --font-lineHeight-relaxed: 1.625;
+  --font-feature-settings-display: "lnum";
+  --font-feature-settings-body: "normal";
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  --color-dataviz-okabe-ito-orange: #E69F00;
+  --color-dataviz-okabe-ito-sky-blue: #56B4E9;
+  --color-dataviz-okabe-ito-bluish-green: #009E73;
+  --color-dataviz-okabe-ito-yellow: #F0E442;
+  --color-dataviz-okabe-ito-blue: #0072B2;
+  --color-dataviz-okabe-ito-vermillion: #D55E00;
+  --color-dataviz-okabe-ito-reddish-purple: #CC79A7;
+  --color-dataviz-categorical-1: #E69F00;
+  --color-dataviz-categorical-2: #56B4E9;
+  --color-dataviz-categorical-3: #009E73;
+  --color-dataviz-categorical-4: #F0E442;
+  --color-dataviz-categorical-5: #0072B2;
+  --color-dataviz-categorical-6: #D55E00;
+  --color-dataviz-categorical-7: #CC79A7;
+}
+
+:root, [data-bs-theme="light"] {
+  --color-surface-page: #ededeb;
+  --color-surface-page: color(display-p3 0.9294 0.9294 0.9223);
+  --color-surface-page-scrolled: #ededeb;
+  --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
+  --color-surface-elevated: #f7f7f6;
+  --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
+  --color-surface-sunken: #faf2e3;
+  --color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
+  --color-surface-navbar: #ededeb;
+  --color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
+  --color-surface-navbar-scrolled: #ededeb;
+  --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
+  --color-surface-code: #faf2e3;
+  --color-surface-code: color(display-p3 0.9749 0.9501 0.8963);
+  --color-border-subtle: rgba(12, 10, 9, 0.45);
+  --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
+  --color-border-moderate: rgba(12, 10, 9, 0.60);
+  --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
+  --color-border-strong: rgba(12, 10, 9, 0.75);
+  --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
+  --color-border-card: rgba(12, 10, 9, 0.60);
+  --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
+  --color-border-code: #d6d3d1;
+  --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
+  --color-content-primary: #14140f;
+  --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
+  --color-content-secondary: #6a6a6a;
+  --color-content-secondary: color(display-p3 0.4157 0.4157 0.4157);
+  --color-content-muted: #706964;
+  --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
+  --color-content-inverse: #fdf9f2;
+  --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
+  --color-interactive-primary: #434739;
+  --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
+  --color-interactive-hover: #363a2e;
+  --color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
+  --color-interactive-accent: #1f618d;
+  --color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
+  --color-interactive-focus: #434739;
+  --color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
+  --color-presentation-accent: #3498db;
+  --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
+  --color-presentation-accent-hover: #2980b9;
+  --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
+  --color-vertical-accent-dissertation: #b87333;
+  --color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
+  --color-vertical-accent-rpkg: #3b82f6;
+  --color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
+  --color-vertical-accent-SGPc: #5a6310;
+  --color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
+  --color-brand-mark-red: #cc0000;
+  --color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
+  --contrast-high: rgb(20, 20, 16);
+  --contrast-readable: rgb(20, 20, 16);
+  --contrast-medium: #7c7c7c;
+  --contrast-subtle: #7c7c7c;
+  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
+  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
+  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
+  --border-subtle: rgba(20, 20, 16, 0.47);
+  --border-moderate: rgba(20, 20, 16, 0.63);
+  --border-focus: #3498DB;
+  --navigation-hover-background: rgba(20, 20, 16, 0.05);
+  --navigation-active-background: rgba(20, 20, 16, 0.1);
+  --color-dataviz-okabe-ito-black: #000000;
+  --color-dataviz-categorical-8: #000000;
+  --color-dataviz-uncertainty-outer: #D6D6D6;
+  --color-dataviz-uncertainty-union: #9E9E9E;
+  --color-dataviz-uncertainty-inner: #333333;
+}
+
+// ── Quarto chrome → tokens ──────────────────────────────────────────────
+body {
+  background-color: var(--color-surface-page);
+  color: var(--color-content-primary);
+}
+
+h1, h2, h3, h4, h5, h6, .title {
+  color: var(--color-content-primary);
+  font-feature-settings: var(--font-feature-settings-display);
+}
+
+// Navbar chrome is brand voice: Josefin through the editorial variable (never the
+// Futura brand token). Tagged-language rules in lang.css still switch links to Noto;
+// the brand is never translated (display-family-split).
+.navbar-brand, .navbar-title, .navbar-nav .nav-link, .navbar-nav .dropdown-item {
+  font-family: var(--font-family-display-editorial);
+}
+
+math { font-family: var(--font-family-math); }
+
+// Links in running text are underlined: interactive.primary is about 1.9:1
+// against body text in light mode, so colour cannot be the only cue (WCAG 1.4.1).
+main.content :is(p, li, dd, td, blockquote, figcaption, .callout-body) a {
+  color: var(--color-interactive-primary);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+main.content :is(p, li, dd, td, blockquote, figcaption, .callout-body) a:hover {
+  color: var(--color-interactive-hover);
+}
+
+// Navigation and the outline stay plain.
+#TOC a, nav a, .sidebar a, .navbar a, a.footnote-ref, a.anchorjs-link {
+  text-decoration: none;
+}
+
+:not(pre) > code {
+  color: var(--color-interactive-accent);
+  background-color: var(--color-surface-code);
+}
+
+pre, div.sourceCode {
+  background-color: var(--color-surface-code);
+  border: 1px solid var(--color-border-code);
+}
+
+// Quarto themes its popups as [data-theme~="quarto"] at compile time ($body-bg);
+// match that specificity so the runtime token wins.
+.tippy-box, .tippy-box[data-theme~="quarto"] {
+  background-color: var(--color-surface-elevated);
+  color: var(--color-content-primary);
+  border: 1px solid var(--color-border-subtle);
+}
+
+.tippy-box[data-theme~="quarto"] > .tippy-backdrop {
+  background-color: var(--color-surface-elevated);
+}
+
+.callout {
+  background-color: var(--color-surface-elevated);
+  border-color: var(--color-border-subtle);
+}
+
+.column-margin, .margin-aside, figcaption {
+  color: var(--color-content-secondary);
+}
+
+// Elevated cards carry an edge: in dark mode surface.elevated is about 1.06:1
+// against surface.page, so a card without one disappears.
+.di-elevated, div.abstract {
+  background-color: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-md);
+}
+
+// ===== THEME TOGGLE STYLING =====
+// Light theme - show moon icon (switch to dark)
+
+.quarto-color-scheme-toggle .bi::before {
+  display: inline-block !important;
+  height: 1rem !important;
+  width: 1rem !important;
+  content: "" !important;
+  vertical-align: -0.125em !important;
+  background-repeat: no-repeat !important;
+  background-size: 1rem 1rem !important;
+  background-color: transparent !important;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2383838F" class="bi bi-moon" viewBox="0 0 16 16"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/></svg>') !important;
+  transition: background-image 0.25s ease;
+}
+
+.quarto-color-scheme-toggle:hover .bi::before {
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23000000" class="bi bi-moon" viewBox="0 0 16 16"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/></svg>') !important;
+  transition: background-image 0.25s ease;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .quarto-color-scheme-toggle .bi::before {
+    transition: none !important;
+  }
+}

package/dist/quarto/_extensions/dataimago/pkgsite/filters/landing.lua

@@ -0,0 +1,233 @@
+-- @dataimago/css@0.1.0-alpha.23 dist/quarto/_extensions/dataimago/pkgsite/filters/landing.lua · sha256:84cdab2c95ff44271f4c3cf044d3a5d4886312d26c97417f276ab45ffa1e20ec · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.23 dataimago-sync
+-- landing.lua: replaces the author's `.di-landing` div with the package-site landing stage.
+-- Pandoc 3 Lua filter for Quarto >= 1.8. Metadata comes from `pkgsite` (index.qmd's `metadata-files`
+-- merges the generator's _landing.yml into it). A page with no `.di-landing` div is returned unchanged.
+--
+-- DOM order: pause control, then div.di-landing holding div.di-landing-intro, div.di-landing-overview (the
+-- author's content, still Pandoc blocks), div.di-landing-hero[aria-hidden], nav.di-landing-cards.
+-- The stage, the intro and the overview are real Pandoc Div nodes, never raw open/close tags around Pandoc
+-- content: Quarto's section-divs wraps every heading in <section>, and a section swallows a raw closing tag
+-- that follows it (a README's `##` headings put the hero and the cards inside the overview).
+-- A page that holds a `.di-landing` stage gets `toc: false`: the stage is the page, a TOC beside it is noise.
+-- Layout is pkgsite.scss's job; this file only produces markup.
+--
+-- Only the FIRST `.di-landing` div on a page is the stage; any later one is unwrapped (its content stays in
+-- place, without the class). The name falls back to `pagetitle`, then `title`; with none of them the intro
+-- (and its h1) is omitted. With no cards, nav.di-landing-cards is omitted. The visible pause label lives at the
+-- end of the intro (reachable and in reading order); the checkbox it toggles comes first in the stage.
+
+local stringify = pandoc.utils.stringify
+
+local function esc(s)
+  s = tostring(s or '')
+  s = s:gsub('&', '&amp;')
+  s = s:gsub('<', '&lt;')
+  s = s:gsub('>', '&gt;')
+  s = s:gsub('"', '&quot;')
+  return s
+end
+
+-- Metadata strings arrive as Inlines, parsed as markdown: `<it>` becomes a RawInline and would vanish
+-- under stringify. Rebuild the author's literal text from the inlines instead.
+local function text(v)
+  if v == nil then return '' end
+  local t = pandoc.utils.type(v)
+  if t == 'string' then return v end
+  if t == 'boolean' or t == 'number' then return tostring(v) end
+  if t == 'Inlines' then
+    local out = {}
+    for _, el in ipairs(v) do
+      if el.t == 'Str' then out[#out + 1] = el.text
+      elseif el.t == 'Space' or el.t == 'SoftBreak' then out[#out + 1] = ' '
+      elseif el.t == 'RawInline' or el.t == 'Code' then out[#out + 1] = el.text
+      else out[#out + 1] = stringify(el) end
+    end
+    return table.concat(out)
+  end
+  return stringify(v)
+end
+
+local function list(v)
+  if v == nil then return {} end
+  if pandoc.utils.type(v) == 'List' or pandoc.utils.type(v) == 'table' then return v end
+  return { v }
+end
+
+local function dirname(p)
+  return (p:match('^(.*)/[^/]*$')) or '.'
+end
+
+local function read_file(p)
+  local f = io.open(p, 'r')
+  if not f then return nil end
+  local s = f:read('a')
+  f:close()
+  return s
+end
+
+-- An inlined SVG must start at `<svg`: drop a provenance comment and an xml declaration.
+local function clean_svg(s)
+  s = s:gsub('^%s*<%?xml.-%?>%s*', '')
+  while s:match('^%s*<!%-%-') do s = s:gsub('^%s*<!%-%-.-%-%->%s*', '', 1) end
+  return (s:gsub('%s+$', ''))
+end
+
+local function project_dir()
+  if quarto and quarto.project and quarto.project.directory then return quarto.project.directory end
+  if quarto and quarto.doc and quarto.doc.input_file then return dirname(quarto.doc.input_file) end
+  local inputs = PANDOC_STATE and PANDOC_STATE.input_files
+  if inputs and inputs[1] then return dirname(inputs[1]) end
+  return '.'
+end
+
+local function extension_dir()
+  local script = PANDOC_SCRIPT_FILE or ''
+  return dirname(dirname(script)) -- <ext>/filters/landing.lua -> <ext>
+end
+
+
+local function fail(msg)
+  io.stderr:write('ERROR: landing.lua: ' .. msg .. '\n')
+  os.exit(1)
+end
+
+-- hero.src / hero.poster are project-relative: refuse an absolute path or any `..` segment.
+local function check_rel(key, v)
+  if v == '' then return end
+  if v:sub(1, 1) == '/' or v:sub(1, 1) == '\\' or v:match('^%a[%w+.-]*:') or v:find('\\', 1, true) then
+    fail('hero.' .. key .. ' must be a relative path inside the project, got: ' .. v)
+  end
+  for seg in (v .. '/'):gmatch('([^/]*)/') do
+    if seg == '..' then fail('hero.' .. key .. ' must not contain a ".." segment, got: ' .. v) end
+  end
+end
+
+-- Re-validate an SVG before it is inlined into the page: the leaf does not trust the generator's check.
+-- Returns nil when clean, else the reason. Comments are stripped first.
+local function svg_problem(raw)
+  local s = raw:gsub('<!%-%-.-%-%->', '')
+  local l = s:lower()
+  for _, t in ipairs({ 'script', 'foreignobject', 'iframe', 'object', 'embed' }) do
+    if l:find('<' .. t .. '[%s/>]') or l:find('<%w+:' .. t .. '[%s/>]') then return 'contains <' .. t .. '>' end
+  end
+  if l:find('<animate') or l:find('<%w+:animate') then return 'contains a SMIL animate element' end
+  if l:find('<set[%s/>]') or l:find('<%w+:set[%s/>]') then return 'contains a SMIL set element' end
+  if l:find('javascript:', 1, true) then return 'contains "javascript:"' end
+  if l:find('[%s"\'/]on%a+%s*=') then return 'contains an on* event-handler attribute' end
+  for body in l:gmatch('<style[^>]*>(.-)</style>') do
+    if body:find('<', 1, true) then return 'has "<" inside a <style> element' end
+  end
+  if l:find('<style[^>]*>[^<]*$') then return 'has an unterminated <style> element' end
+  for q, c in l:gmatch('url%s*%(%s*(["\']?)%s*(.?)') do
+    if c ~= '#' then return 'has a url() that does not point at a #fragment' end
+  end
+  for pos in l:gmatch('()href%s*=') do
+    local rest = s:sub(pos):match('^href%s*=%s*(.*)$') or ''
+    local q = rest:sub(1, 1)
+    local v
+    if q == '"' or q == "'" then v = rest:match('^' .. q .. '(.-)' .. q) or ''
+    else v = rest:match('^([^%s>]*)') end
+    if v:gsub('^%s+', ''):sub(1, 1) ~= '#' then return 'has an href that is not a #fragment: ' .. v:sub(1, 60) end
+  end
+  return nil
+end
+
+local function hero_html(hero)
+  local kind = text(hero and hero.kind)
+  if kind == '' then kind = 'fallback' end
+  if hero then
+    check_rel('src', text(hero.src))
+    check_rel('poster', text(hero.poster))
+  end
+  local open = '<div class="di-landing-hero" aria-hidden="true">'
+  if kind == 'svg' then
+    local src = text(hero.src)
+    local body = read_file(project_dir() .. '/' .. src)
+    if body then
+      local why = svg_problem(body)
+      if why then fail('hero.src ' .. src .. ' is not safe to inline: ' .. why) end
+      return open .. clean_svg(body) .. '</div>'
+    end
+    io.stderr:write('landing.lua: hero.src not found: ' .. src .. '; using the brand fallback\n')
+  elseif kind == 'js' then
+    local src, poster, alt = text(hero.src), text(hero.poster), text(hero.alt)
+    local img = poster ~= '' and ('<img src="' .. esc(poster) .. '" alt="' .. esc(alt) .. '">') or ''
+    return open .. '<div class="di-hero-mount" data-hero-src="' .. esc(src) .. '" data-hero-poster="'
+      .. esc(poster) .. '">' .. img .. '</div><script type="module" src="pkgsite-hero.js"></script></div>'
+  end
+  local body = read_file(extension_dir() .. '/hero-fallback.svg')
+  return open .. (body and clean_svg(body) or '') .. '</div>'
+end
+
+local function build(div, meta)
+  local p = meta.pkgsite or {}
+  local out = pandoc.List()
+  local stage = pandoc.List()
+  local function raw(s) stage:insert(pandoc.RawBlock('html', s)) end
+
+  local label = '<label class="di-hero-pause-label" for="di-hero-pause">'
+    .. '<span class="di-pause-on">Pause animation</span><span class="di-pause-off">Play animation</span></label>'
+  out:insert(pandoc.RawBlock('html', '<input type="checkbox" id="di-hero-pause" class="di-hero-pause-input">'))
+
+  local name = text(p.name)
+  if name == '' then name = text(meta.pagetitle) end
+  if name == '' then name = text(meta.title) end
+  if name ~= '' then
+    local intro = pandoc.List()
+    local function iraw(s) intro:insert(pandoc.RawBlock('html', s)) end
+    iraw('<h1 class="di-landing-name">' .. esc(name) .. '</h1>')
+    if text(p.title) ~= '' then iraw('<p class="di-landing-title">' .. esc(text(p.title)) .. '</p>') end
+    if text(p.version) ~= '' then iraw('<p class="di-landing-version">Version ' .. esc(text(p.version)) .. '</p>') end
+    local links = list(p.links)
+    if #links > 0 then
+      iraw('<ul class="pill-links">')
+      for _, l in ipairs(links) do
+        local a = pandoc.Link({ pandoc.Str(text(l.text)) }, text(l.href))
+        intro:insert(pandoc.Plain({ pandoc.RawInline('html', '<li>'), a, pandoc.RawInline('html', '</li>') }))
+      end
+      iraw('</ul>')
+    end
+    iraw('<p class="di-hero-pause">' .. label .. '</p>')
+    stage:insert(pandoc.Div(intro, pandoc.Attr('', { 'di-landing-intro' })))
+  else
+    raw('<div class="di-landing-controls"><p class="di-hero-pause">' .. label .. '</p></div>')
+  end
+
+  local content = nil
+  for _, b in ipairs(div.content) do
+    if b.t == 'Div' and b.classes:includes('di-landing-overview') then content = b.content end
+  end
+  stage:insert(pandoc.Div(content or div.content, pandoc.Attr('', { 'di-landing-overview' })))
+
+  raw(hero_html(p.hero))
+
+  local cards = list(p.cards)
+  if #cards > 0 then raw('<nav class="di-landing-cards" aria-label="Sections">') end
+  for _, c in ipairs(cards) do
+    local inl = {
+      pandoc.Span({ pandoc.Str(text(c.title)) }, pandoc.Attr('', { 'di-card-title' })),
+      pandoc.Span({ pandoc.Str(text(c.desc)) }, pandoc.Attr('', { 'di-card-desc' })),
+    }
+    local a = pandoc.Link(inl, text(c.href), '', pandoc.Attr('', { 'di-card' }, { { 'data-card', text(c.key) } }))
+    stage:insert(pandoc.Plain({ a }))
+  end
+  if #cards > 0 then raw('</nav>') end
+  out:insert(pandoc.Div(stage, pandoc.Attr('', { 'di-landing' })))
+  return out
+end
+
+function Pandoc(doc)
+  local found = false
+  local result = doc:walk({
+    Div = function(div)
+      if div.classes:includes('di-landing') then
+        if found then return div.content end -- a later one: unwrapped, content stays in place
+        found = true
+        return build(div, doc.meta)
+      end
+    end,
+  })
+  if not found then return nil end
+  result.meta.toc = false
+  return result
+end