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

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

@@ -0,0 +1,212 @@
+-- @dataimago/css@0.1.0-alpha.24 dist/quarto/_extensions/dataimago/pkgsite/filters/provenance.lua · sha256:68e33df59cd4c88e1d4bd51bdd3ec45bfa62f64a1b27c8ed305cb59d4e49853b · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.24 dataimago-sync
+-- provenance.lua: the AI-composed label. Pandoc 3 Lua filter for Quarto >= 1.8.
+--
+-- A page whose front matter carries `knowledge:` gets a div.di-provenance before its first block; a page
+-- without the key is returned unchanged. The label is how a reader knows the page was drafted by a model and
+-- whether the maintainer has approved it, so the strings are fixed:
+--   draft:    AI-composed draft: not yet approved by the maintainer
+--   approved: AI-composed · drafted by {composer} from source {sha7} · {edited and }approved by {who}, {date} · How this page was made
+--   stale:    appends " · written against {sha7}; the code has changed since" to whichever label is shown
+--
+-- Rules:
+--  * Every interpolated value is a Pandoc Str, so the HTML writer escapes it.
+--  * source_sha must match ^[0-9a-f]{7,40}$ (shown as its first 7 characters) or the render fails: a malformed
+--    sha is never printed. source_url is linked only if it matches ^https?://; otherwise the sha is unlinked.
+--  * `about` is site-root relative; the href is prefixed with "../" once per directory the page sits below the
+--    project root, and a .qmd extension becomes .html. Absolute paths and URL schemes are not linked.
+--  * status: approved without composer, approved_by or approved_on fails the render: Phase D writes this block, so
+--    a gap is a generator bug, and a silent downgrade to "draft" would hide it. approved_on must be a real
+--    YYYY-MM-DD date; edited_by_author and stale must be YAML booleans (not "true", "yes" or 1).
+--  * Every failure names the page.
+
+local stringify = pandoc.utils.stringify
+
+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 trim(s) return (s:gsub('^%s+', ''):gsub('%s+$', '')) end
+
+local function page_name()
+  local input = quarto and quarto.doc and quarto.doc.input_file
+  if not input then
+    local inputs = PANDOC_STATE and PANDOC_STATE.input_files
+    input = inputs and inputs[1]
+  end
+  if not input then return '(unknown page)' end
+  local root = quarto and quarto.project and quarto.project.directory
+  if root then
+    root = root:gsub('/+$', '')
+    if input:sub(1, #root + 1) == root .. '/' then return input:sub(#root + 2) end
+  end
+  return input
+end
+
+local function warn(msg)
+  io.stderr:write('provenance.lua: WARNING: ' .. page_name() .. ': ' .. msg .. '\n')
+end
+
+-- Quarto's Lua environment logs error() and carries on, which would publish a page with no label (or the
+-- wrong one). Exiting non-zero is what actually refuses the render.
+local function fail(msg)
+  io.stderr:write('ERROR: provenance.lua: ' .. page_name() .. ': ' .. msg .. '\n')
+  os.exit(1)
+end
+
+-- plain text -> Str/Space inlines (Pandoc escapes them on output); leading and trailing spaces are kept
+local function words(s)
+  local out = pandoc.Inlines({})
+  for space, w in s:gmatch('(%s*)(%S+)') do
+    if space ~= '' then out:insert(pandoc.Space()) end
+    out:insert(pandoc.Str(w))
+  end
+  if s:match('%s$') then out:insert(pandoc.Space()) end
+  return out
+end
+
+local function append(dst, src)
+  for _, el in ipairs(src) do dst:insert(el) end
+end
+
+local function dirname(p) return (p:match('^(.*)/[^/]*$')) or '' end
+
+-- how many directories below the project root this page is
+local function depth()
+  local input = quarto and quarto.doc and quarto.doc.input_file
+  if not input then
+    local inputs = PANDOC_STATE and PANDOC_STATE.input_files
+    input = inputs and inputs[1]
+  end
+  local root = quarto and quarto.project and quarto.project.directory
+  if not input or not root then return 0 end
+  root = root:gsub('/+$', '')
+  local rel
+  if input:sub(1, #root + 1) == root .. '/' then rel = input:sub(#root + 2) else return 0 end
+  local dir = dirname(rel)
+  if dir == '' then return 0 end
+  local n = 0
+  for _ in dir:gmatch('[^/]+') do n = n + 1 end
+  return n
+end
+
+local function about_href(about)
+  about = trim(about)
+  if about == '' then return nil end
+  if about:sub(1, 1) == '/' or about:match('^%a[%w+.%-]*:') then
+    warn('knowledge.about must be a site-relative path; "' .. about .. '" is not linked')
+    return nil
+  end
+  for seg in about:gmatch('[^/]+') do
+    if seg == '..' then
+      warn('knowledge.about must not contain a ".." segment; "' .. about .. '" is not linked')
+      return nil
+    end
+  end
+  -- Quarto does not rewrite links inside a filter-built block, so point at the rendered page
+  about = about:gsub('%.qmd$', '.html')
+  about = about:gsub('%.qmd([#?])', '.html%1', 1)
+  return string.rep('../', depth()) .. about
+end
+
+local function sha7(sha)
+  sha = trim(sha)
+  if not (sha:match('^[0-9a-f]+$') and #sha >= 7 and #sha <= 40) then
+    fail('knowledge.source_sha must be 7 to 40 lowercase hex characters; refusing to print it')
+  end
+  return sha:sub(1, 7)
+end
+
+-- absent -> false; a YAML boolean -> itself; anything else (including the strings "true", "yes", "1") fails
+local function bool(k, key)
+  local v = k[key]
+  if v == nil then return false end
+  if type(v) == 'boolean' then return v end
+  fail('knowledge.' .. key .. ' must be a boolean (true or false), not "' .. text(v) .. '"')
+end
+
+local function valid_date(s)
+  local y, m, d = s:match('^(%d%d%d%d)-(%d%d)-(%d%d)$')
+  if not y then return false end
+  y, m, d = tonumber(y), tonumber(m), tonumber(d)
+  if m < 1 or m > 12 or d < 1 then return false end
+  local days = { 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 }
+  if (y % 4 == 0 and y % 100 ~= 0) or y % 400 == 0 then days[2] = 29 end
+  return d <= days[m]
+end
+
+function Pandoc(doc)
+  local k = doc.meta.knowledge
+  if k == nil then return nil end
+  if pandoc.utils.type(k) ~= 'table' and pandoc.utils.type(k) ~= 'Map' then
+    fail('knowledge: must be a mapping')
+  end
+  local function get(key) return trim(text(k[key])) end
+
+  local status = get('status')
+  if status ~= 'draft' and status ~= 'approved' then
+    fail('knowledge.status must be "draft" or "approved"')
+  end
+  local stale = bool(k, 'stale')
+  local sha_raw = get('source_sha')
+  local short
+  if sha_raw ~= '' then short = sha7(sha_raw) end
+  if (status == 'approved' or stale) and not short then
+    fail('knowledge.source_sha is required for an approved or stale page')
+  end
+
+  local approved = status == 'approved'
+  local edited = bool(k, 'edited_by_author')
+  if approved then
+    for _, key in ipairs({ 'composer', 'approved_by', 'approved_on' }) do
+      if get(key) == '' then fail('knowledge.status is approved but knowledge.' .. key .. ' is missing') end
+    end
+    if not valid_date(get('approved_on')) then
+      fail('knowledge.approved_on must be a real date written YYYY-MM-DD, not "' .. get('approved_on') .. '"')
+    end
+  end
+
+  local inl = pandoc.Inlines({})
+  if not approved then
+    append(inl, words('AI-composed draft: not yet approved by the maintainer'))
+  else
+    append(inl, words('AI-composed · drafted by ' .. get('composer') .. ' from source'))
+    inl:insert(pandoc.Space())
+    local url = get('source_url')
+    if url:match('^https?://') then
+      inl:insert(pandoc.Link({ pandoc.Str(short) }, url))
+    else
+      inl:insert(pandoc.Str(short))
+    end
+    local who = edited and 'edited and approved by ' or 'approved by '
+    append(inl, words(' · ' .. who .. get('approved_by') .. ', ' .. get('approved_on')))
+    local href = about_href(get('about'))
+    if href then
+      append(inl, words(' ·'))
+      inl:insert(pandoc.Space())
+      inl:insert(pandoc.Link(words('How this page was made'), href))
+    end
+  end
+  if stale then
+    append(inl, words(' · written against ' .. short .. '; the code has changed since'))
+  end
+
+  local classes = { 'di-provenance', approved and 'di-provenance-approved' or 'di-provenance-draft' }
+  if stale then classes[#classes + 1] = 'di-provenance-stale' end
+  local div = pandoc.Div({ pandoc.Para(inl) }, pandoc.Attr('', classes, { { 'role', 'note' } }))
+  doc.blocks:insert(1, div)
+  return doc
+end

package/dist/quarto/_extensions/dataimago/pkgsite/hero-fallback.svg

@@ -0,0 +1,53 @@
+<!-- @dataimago/css@0.1.0-alpha.24 dist/quarto/_extensions/dataimago/pkgsite/hero-fallback.svg · sha256:60a284fe66f799d46a383ddaba18712ac896aa05cece9b77d28f56e0767309f3 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.24 dataimago-sync -->
+<svg class="di-hero-fallback" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" preserveAspectRatio="xMidYMid meet" focusable="false">
+<style>
+.di-hero-fallback { display: block; width: 100%; height: 100%; }
+.di-hero-fallback .axis { stroke: var(--color-border-moderate, #8a8a85); stroke-width: 2; fill: none; stroke-linecap: round; }
+.di-hero-fallback .grid { stroke: var(--color-border-subtle, #c9c9c4); stroke-width: 1; fill: none; }
+.di-hero-fallback .curve { fill: none; stroke-width: 5; stroke-linecap: round; }
+.di-hero-fallback .c1 { stroke: var(--color-interactive-primary, #1d3b2f); }
+.di-hero-fallback .c2 { stroke: var(--color-dataviz-categorical-1, #0072b2); }
+.di-hero-fallback .c3 { stroke: var(--color-dataviz-categorical-2, #d55e00); }
+.di-hero-fallback .c4 { stroke: var(--color-dataviz-categorical-3, #009e73); }
+.di-hero-fallback .c5 { stroke: var(--color-dataviz-categorical-5, #0072b2); }
+.di-hero-fallback .c6 { stroke: var(--color-interactive-accent, #b45f06); }
+.di-hero-fallback .c7 { stroke: var(--color-content-secondary, #5b5b57); stroke-width: 3; }
+.di-hero-fallback .dot { stroke: none; }
+.di-hero-fallback .d1 { fill: var(--color-interactive-primary, #1d3b2f); }
+.di-hero-fallback .d3 { fill: var(--color-dataviz-categorical-2, #d55e00); }
+.di-hero-fallback .d5 { fill: var(--color-dataviz-categorical-5, #0072b2); }
+@media (prefers-reduced-motion: no-preference) {
+  .di-hero-fallback .curve {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1;
+    animation-name: di-hero-draw;
+    animation-duration: 2400ms;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: 3;
+    animation-fill-mode: both;
+  }
+  .di-hero-fallback .c2 { animation-delay: 120ms; }
+  .di-hero-fallback .c3 { animation-delay: 240ms; }
+  .di-hero-fallback .c4 { animation-delay: 360ms; }
+  .di-hero-fallback .c5 { animation-delay: 480ms; }
+  .di-hero-fallback .c6 { animation-delay: 600ms; }
+  .di-hero-fallback .c7 { animation-delay: 720ms; }
+  @keyframes di-hero-draw {
+    from { stroke-dashoffset: 1; }
+    to { stroke-dashoffset: 0; }
+  }
+}
+</style>
+<path class="grid" d="M80 560H720M80 400H720M80 240H720M80 80H720"/>
+<path class="axis" d="M80 80V720H720"/>
+<path class="curve c7" pathLength="1" d="M80 720C240 716 400 690 720 640"/>
+<path class="curve c6" pathLength="1" d="M80 720C230 700 400 640 720 520"/>
+<path class="curve c5" pathLength="1" d="M80 720C220 690 400 590 720 410"/>
+<path class="curve c4" pathLength="1" d="M80 720C210 670 390 540 720 310"/>
+<path class="curve c3" pathLength="1" d="M80 720C190 640 370 470 720 210"/>
+<path class="curve c2" pathLength="1" d="M80 720C170 600 340 400 720 140"/>
+<path class="curve c1" pathLength="1" d="M80 720C150 560 300 330 720 90"/>
+<circle class="dot d1" cx="720" cy="90" r="9"/>
+<circle class="dot d3" cx="720" cy="210" r="7"/>
+<circle class="dot d5" cx="720" cy="410" r="7"/>
+</svg>

package/dist/quarto/_extensions/dataimago/pkgsite/pkgsite-hero.js

@@ -0,0 +1,99 @@
+// @dataimago/css@0.1.0-alpha.24 dist/quarto/_extensions/dataimago/pkgsite/pkgsite-hero.js · sha256:372b3ff2e24a7f3ce0973f50abc31b491465ba0e973b6cf6f917ea41dd21ea5c · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.24 dataimago-sync
+/**
+ * pkgsite hero loader (spec "Hero inputs"). Loaded only for `hero.kind: js`.
+ *
+ * The module at `data-hero-src` is imported only when motion is allowed. Its default export is
+ * `mount(el, { signal }) -> { pause(), play(), destroy() }`; a result without pause and play is refused
+ * (motion-lint cannot see JS, so the contract is enforced here, at runtime). The poster stays visible until a
+ * mount succeeds, and on any failure, so the page never breaks. The module and the poster must come from the
+ * site's own origin (a data: poster in a raster type is the one exception).
+ */
+
+const REDUCED = '(prefers-reduced-motion: reduce)';
+
+const RASTER_DATA = /^data:image\/(png|jpeg|gif|webp)[;,]/i;
+
+export function initHeroes({
+  document: doc = globalThis.document,
+  window: win = globalThis.window,
+  importFn = (href) => import(href),
+  console: log = globalThis.console,
+} = {}) {
+  const none = { destroy() {}, ready: Promise.resolve() };
+  if (!doc || !win) return none;
+  if (win.matchMedia?.(REDUCED).matches) return none;
+  const mounts = [...doc.querySelectorAll('.di-hero-mount')].filter((el) => el.dataset.heroSrc);
+  if (mounts.length === 0) return none;
+
+  const ac = new AbortController();
+  const box = doc.getElementById('di-hero-pause');
+  const live = [];
+  let warned = false;
+  const warn = (msg, err) => {
+    if (warned) return;
+    warned = true;
+    log.warn(`pkgsite-hero: ${msg}`, err ?? '');
+  };
+  // Same scheme and origin as the page. blob:https://site/x reports the page's origin, so the scheme is compared
+  // too; data: and javascript: have origin "null", and a "null" page origin (file:) matches nothing.
+  const sameOrigin = (src) => {
+    try {
+      const u = new URL(src, doc.baseURI);
+      const b = new URL(doc.baseURI);
+      return b.origin !== 'null' && u.origin === b.origin && u.protocol === b.protocol;
+    } catch { return false; }
+  };
+
+  const set = (h, paused) => {
+    if (h.paused === paused) return;
+    try {
+      if (paused) h.api.pause(); else h.api.play();
+    } catch (err) {
+      return warn(`${h.el.dataset.heroSrc} threw from ${paused ? 'pause' : 'play'}`, err);
+    }
+    h.paused = paused;
+    h.el.dataset.heroState = paused ? 'paused' : 'playing';
+  };
+  const wanted = () => Boolean(box?.checked) || doc.visibilityState === 'hidden';
+  const sync = () => { const p = wanted(); for (const h of live) set(h, p); };
+  box?.addEventListener('change', sync, { signal: ac.signal });
+  doc.addEventListener('visibilitychange', sync, { signal: ac.signal });
+
+  const ready = Promise.all(mounts.map(async (el) => {
+    const src = el.dataset.heroSrc;
+    const poster = el.querySelector('img');
+    const ps = el.dataset.heroPoster;
+    if (poster && ps && !RASTER_DATA.test(ps) && !sameOrigin(ps)) {
+      poster.removeAttribute('src');
+      warn(`poster ${ps} is not from this site; dropped`);
+    }
+    if (!sameOrigin(src)) return warn(`${src} is not from this site; keeping the poster`);
+    let api;
+    try {
+      const mod = await importFn(new URL(src, doc.baseURI).href);
+      api = await mod.default(el, { signal: ac.signal });
+    } catch (err) {
+      return warn(`could not load ${src}; keeping the poster`, err);
+    }
+    if (!api || typeof api.pause !== 'function' || typeof api.play !== 'function') {
+      try { api?.destroy?.(); } catch { /* the poster stays either way */ }
+      return warn(`${src} must return { pause, play, destroy }; keeping the poster`);
+    }
+    if (ac.signal.aborted) { try { api.destroy?.(); } catch { /* gone */ } return; }
+    const h = { el, api, paused: false };
+    el.dataset.heroState = 'playing';
+    live.push(h);
+    if (poster) poster.hidden = true;
+    if (wanted()) set(h, true);
+  }));
+
+  return {
+    ready,
+    destroy() {
+      ac.abort();
+      for (const h of live) { try { h.api.destroy?.(); } catch { /* already gone */ } }
+    },
+  };
+}
+
+if (typeof document !== 'undefined') initHeroes();

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

@@ -0,0 +1,281 @@
+// @dataimago/css@0.1.0-alpha.24 dist/quarto/_extensions/dataimago/pkgsite/pkgsite.scss · sha256:18ca9b65e75a0517b19dc60ed34ea90637f34369373950da1a19ebe7444fe2be · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.24 dataimago-sync
+/*-- scss:rules --*/
+// Package-site layer on the dataimago tokens. Colours come only from the token custom
+// properties, so the light/dark pair switches at runtime. Josefin Sans carries headings and
+// labels; Noto Sans, Noto Sans Mono and Noto Sans Math carry everything else.
+
+code, kbd, pre, samp, .sourceCode { font-family: var(--font-family-mono); }
+.math.inline, .math.display { font-family: var(--font-family-math); }
+
+// ── Navbar: the page's own navbar; pinned or hiding, the landing hero sits at top: 0 ──
+.navbar {
+  border-bottom: 1px solid var(--color-border-subtle);
+  .navbar-title, .navbar-nav .nav-link {
+    font-family: var(--font-family-display);
+    letter-spacing: 0.02em;
+  }
+  .navbar-title { font-weight: var(--font-weight-normal); }
+  .navbar-brand-logo img { height: 2.4rem; width: auto; }
+  .pkg-version {
+    font-family: var(--font-family-sans);
+    font-size: 0.72rem;
+    color: var(--color-content-secondary);
+    margin-left: 0.4rem;
+  }
+}
+
+h1, h2, h3, h4, .title {
+  font-family: var(--font-family-display);
+  font-feature-settings: var(--font-feature-settings-display);
+}
+h1.title, .quarto-title h1 { font-weight: var(--font-weight-normal); letter-spacing: -0.01em; }
+
+// ── Kicker labels ──
+.kicker {
+  font-family: var(--font-family-display);
+  font-size: 0.8rem;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-content-secondary);
+  border-top: 2px solid var(--color-interactive-primary);
+  padding-top: var(--spacing-sm);
+  margin: var(--spacing-3xl) 0 var(--spacing-lg);
+}
+
+.pkg-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  margin: var(--spacing-sm) 0;
+  padding: 0;
+  list-style: none;
+  img { height: 20px; width: auto; }
+}
+
+// ── Pill links ──
+.pill-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  padding: 0;
+  margin: var(--spacing-md) 0;
+  list-style: none;
+}
+main.content .pill-links a {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35rem 0.9rem;
+  border: 1px solid var(--color-border-moderate);
+  border-radius: var(--radius-full);
+  color: var(--color-content-primary);
+  text-decoration: none !important;
+  font-size: 0.92rem;
+  transition: background-color var(--transition-quick), border-color var(--transition-quick);
+  &:hover { background-color: var(--navigation-hover-background); border-color: var(--color-interactive-primary); }
+  &:focus-visible { outline: 2px solid var(--color-interactive-focus); outline-offset: 2px; }
+}
+
+// ── Reference index ──
+.reference-index {
+  dl { display: grid; grid-template-columns: minmax(10rem, 18rem) 1fr; gap: var(--spacing-sm) var(--spacing-lg); }
+  dt { font-family: var(--font-family-mono); font-size: 0.92rem; }
+  dd { margin: 0; color: var(--color-content-secondary); }
+}
+@media (max-width: 575.98px) { .reference-index dl { grid-template-columns: 1fr; } }
+
+// ── Reference pages and articles ──
+main.content {
+  pre { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--spacing-md); }
+  table { width: 100%; }
+  h2 { font-size: 1.5rem; margin-top: var(--spacing-2xl); }
+}
+
+// ── Footer: the Center is credited here ──
+.nav-footer {
+  border-top: 1px solid var(--color-border-subtle);
+  font-size: 0.9rem;
+  color: var(--color-content-secondary);
+  a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
+}
+
+main.content dl:not(.quarto-listing-category) {
+  dt { font-family: var(--font-family-mono); font-size: 0.92rem; margin-top: var(--spacing-md); }
+  dd { margin-left: var(--spacing-lg); }
+}
+
+main.content .reference-index dl dt { margin-top: 0; }
+main.content .reference-index dl dd { margin-left: 0; }
+
+// ═══ The landing stage (landing.lua) ═══
+// DOM order: pause control, intro, overview, hero, cards. Small screens keep that order as one column with the
+// hero between intro and overview. On a large screen with motion allowed, the hero is pinned left (7fr), the
+// intro and overview scroll beside it (3fr), and the cards panel wipes over it. No JavaScript.
+
+.di-hero-pause-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.di-hero-pause { margin: var(--spacing-md) 0 0; }
+.di-hero-pause-label {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 44px;
+  padding: 0.25rem 1.1rem;
+  border: 1px solid var(--color-border-moderate);
+  border-radius: var(--radius-full);
+  background: var(--color-surface-elevated);
+  color: var(--color-content-primary);
+  font-family: var(--font-family-display);
+  font-size: 0.9rem;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: border-color 120ms ease, background-color 120ms ease;
+  &:hover { border-color: var(--color-interactive-primary); }
+  .di-pause-off { display: none; }
+}
+.di-hero-pause-input:focus-visible ~ .di-landing .di-hero-pause-label { outline: 2px solid var(--color-interactive-focus); outline-offset: 2px; }
+.di-hero-pause-input:checked ~ .di-landing .di-hero-pause-label {
+  .di-pause-on { display: none; }
+  .di-pause-off { display: inline; }
+}
+@media (prefers-reduced-motion: reduce) { .di-hero-pause { display: none; } }
+
+#di-hero-pause:checked ~ .di-landing .di-landing-hero * { animation-play-state: paused; }
+
+/* The landing filter sets toc: false; this is the belt for a TOC or margin column that still appears. */
+body:has(.di-landing) #TOC,
+body:has(.di-landing) #quarto-margin-sidebar { display: none; }
+
+.di-landing {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+  margin: 0;
+}
+.di-landing-intro { order: 1; padding: var(--spacing-2xl) var(--spacing-lg) 0; }
+.di-landing-hero { order: 2; max-height: 50vh; overflow: hidden; }
+.di-landing-overview { order: 3; padding-inline: var(--spacing-lg); }
+.di-landing-cards { order: 4; }
+
+.di-landing-hero svg, .di-landing-hero img { display: block; width: 100%; height: 100%; max-height: 50vh; object-fit: contain; }
+.di-hero-mount { width: 100%; height: 100%; }
+
+.di-landing-intro {
+  h1.di-landing-name {
+    font-family: var(--font-family-display);
+    font-weight: var(--font-weight-normal);
+    font-size: clamp(2.4rem, 5vw, 3.6rem);
+    line-height: var(--font-lineHeight-tight);
+    margin: 0;
+  }
+  .di-landing-title {
+    color: var(--color-content-secondary);
+    font-size: 1.1rem;
+    margin: var(--spacing-xs) 0 var(--spacing-md);
+    max-width: 42rem;
+  }
+  .di-landing-version { font-size: 0.75rem; color: var(--color-content-secondary); margin: 0; }
+}
+
+.di-landing-cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-md);
+  padding: var(--spacing-xl) var(--spacing-lg);
+  background: var(--color-surface-page);
+}
+@media (min-width: 640px) { .di-landing-cards { grid-template-columns: repeat(2, 1fr); } }
+
+a.di-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-border-card);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  color: var(--color-content-primary);
+  text-decoration: none !important;
+  transition: border-color 120ms ease, background-color 120ms ease;
+  &:hover { border-color: var(--color-interactive-primary); background-color: var(--navigation-hover-background); }
+  &:focus-visible { outline: 2px solid var(--color-interactive-focus); outline-offset: 2px; }
+  .di-card-title { font-family: var(--font-family-display); font-size: 1.15rem; font-weight: var(--font-weight-semibold); }
+  .di-card-desc { color: var(--color-content-secondary); font-size: 0.92rem; }
+}
+
+// A pinned navbar is fixed over the page, so the pinned hero starts below it. Quarto's headroom script puts a
+// headroom--* class on the header (a hiding navbar); a pinned navbar never gets one, so CSS alone tells them
+// apart. On a landing page the navbar is given a floor of 4rem (Quarto's own body padding-top is 64px) so the
+// offset is exact; every other page keeps Quarto's natural navbar height.
+
+// The wipe: only with motion allowed and room for a pinned stage.
+@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) and (min-height: 780px) {
+  .di-landing {
+    display: grid;
+    grid-template-columns: 7fr 3fr;
+    grid-template-rows: auto auto auto;
+    gap: 0;
+  }
+  .di-landing-hero {
+    grid-column: 1;
+    grid-row: 1 / 4;
+    position: sticky;
+    top: 0;
+    height: 100dvh;
+    max-height: none;
+    align-self: start;
+  }
+  body:has(.di-landing) #quarto-header .navbar { min-height: 4rem; }
+  // Pinned navbar: start below it (a new custom property would extend the frozen CSS-variable contract).
+  body.nav-fixed:has(#quarto-header:not([class*="headroom--"])) .di-landing-hero {
+    top: 4rem;
+    height: calc(100dvh - 4rem);
+  }
+  .di-landing-hero svg, .di-landing-hero img { max-height: none; }
+  .di-landing-intro {
+    grid-column: 2;
+    grid-row: 1;
+    min-height: 100dvh;
+    padding: 0 var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .di-landing-overview { grid-column: 2; grid-row: 2; padding: var(--spacing-xl); }
+  .di-landing-cards {
+    grid-column: 1 / -1;
+    grid-row: 3;
+    position: relative;
+    z-index: 1;
+    min-height: 100dvh;
+    align-content: center;
+    padding: var(--spacing-3xl) var(--spacing-xl);
+    background: var(--color-surface-page);
+    box-shadow: var(--shadow-prominent);
+  }
+}
+
+// AI-composed label (provenance.lua): quiet surface, secondary text, a left rule. The draft rule is stronger and
+// uses the accent token. Pairs: content-secondary on surface-elevated is a contrast-check role in both modes;
+// the rule is non-text and clears 3:1 against that surface (interactive-accent, light and dark).
+.di-provenance {
+  margin: 0 0 var(--spacing-lg);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-left: 3px solid var(--color-border-moderate);
+  background: var(--color-surface-elevated);
+  color: var(--color-content-secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  p { margin: 0; }
+  a { color: inherit; text-decoration: underline; }
+  &.di-provenance-draft { border-left-width: 6px; border-left-color: var(--color-interactive-accent); }
+}

package/dist/quarto/components.scss

@@ -1,4 +1,4 @@
-// @dataimago/css@0.1.0-alpha.22 dist/quarto/components.scss · sha256:a2b35c50f5dc36aa4cf337e7ff5ea4ec758890c6910776f5a3e1deb31ad44dd4 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.22 dataimago-sync
+// @dataimago/css@0.1.0-alpha.24 dist/quarto/components.scss · sha256:a2b35c50f5dc36aa4cf337e7ff5ea4ec758890c6910776f5a3e1deb31ad44dd4 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.24 dataimago-sync
 /*-- scss:rules --*/
 // dataimago components (.di-*) — generated from src/styles/components/.
 .di-figure-box {

package/dist/quarto/dataimago-dark.scss

@@ -1,4 +1,4 @@
-// @dataimago/css@0.1.0-alpha.22 dist/quarto/dataimago-dark.scss · sha256:f857888d73961ee714eea97a162915d1f3c28fa740fc88bf3a68e8728594d274 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.22 dataimago-sync
+// @dataimago/css@0.1.0-alpha.24 dist/quarto/dataimago-dark.scss · sha256:f857888d73961ee714eea97a162915d1f3c28fa740fc88bf3a68e8728594d274 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.24 dataimago-sync
 // dataimago dark 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.
 

package/dist/quarto/dataimago-light.scss

@@ -1,4 +1,4 @@
-// @dataimago/css@0.1.0-alpha.22 dist/quarto/dataimago-light.scss · sha256:e456b3e8cfaa03df7fe5ac29bb6e8288454ee5daab29ff6470c45a12ff8d3f32 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.22 dataimago-sync
+// @dataimago/css@0.1.0-alpha.24 dist/quarto/dataimago-light.scss · sha256:e456b3e8cfaa03df7fe5ac29bb6e8288454ee5daab29ff6470c45a12ff8d3f32 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.24 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.
 

package/dist/templates/KNOWLEDGE-explorer.md

@@ -1,4 +1,4 @@
-<!-- @dataimago/css@0.1.0-alpha.22 dist/templates/KNOWLEDGE-explorer.md · sha256:907c08638ed56813d453227759e29de08350465885d11f0efe94ec7ba8c42a50 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.22 dataimago-sync -->
+<!-- @dataimago/css@0.1.0-alpha.24 dist/templates/KNOWLEDGE-explorer.md · sha256:907c08638ed56813d453227759e29de08350465885d11f0efe94ec7ba8c42a50 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.24 dataimago-sync -->
 # {{PROJECT_NAME}} — Knowledge Base Operating Manual
 
 **Domain:** {{DOMAIN_NAME}}