@inneropen/marvin-astro 1.1.0 → 1.2.0

package/src/components/FormRenderer.astro

@@ -0,0 +1,188 @@
+---
+/**
+ * FormRenderer — render a public form from a submittable entry type's field schema.
+ *
+ * A submittable entry type IS a form; its `schema_json.fields` ARE the form fields. Fetch the
+ * definition from the Marvin publishing API at build time — `GET /publish/{ws}/forms/{slug}`
+ * returns `{ formSchema: { fields }, metadata: { successMessage, honeypotField } }` — and pass it
+ * here. The form then renders from the same schema the submission validates against, so a form no
+ * longer has to be hand-coded per page or per site.
+ *
+ * Intentionally UNSTYLED (semantic markup + `data-*` hooks) so the consuming site owns the look;
+ * the only inline style is the visually-hidden honeypot trap.
+ */
+export interface FormFieldSchema {
+  key: string;
+  label: string;
+  /** text | textarea | select | number | boolean | date | datetime (others render as text). */
+  type: string;
+  required?: boolean;
+  placeholder?: string;
+  helpText?: string;
+  defaultValue?: unknown;
+  options?: string[]; // select
+  rows?: number; // textarea
+  min?: number;
+  max?: number;
+  step?: number;
+  pattern?: string; // text
+  format?: string; // 'email' | 'tel' | 'url' — hints the input type
+}
+
+export interface Props {
+  /** The entry type's field schema (`formSchema` from the publishing API). */
+  schema: { fields: FormFieldSchema[] } | null | undefined;
+  /** Where the form POSTs, e.g. `/api/forms/inquiry`. */
+  action: string;
+  /** Hidden anti-spam field name; omit to skip the honeypot. */
+  honeypotField?: string;
+  /** Message shown after a successful (JS) submit. */
+  successMessage?: string;
+  /** Submit button label. */
+  submitLabel?: string;
+  class?: string;
+}
+
+const {
+  schema,
+  action,
+  honeypotField,
+  successMessage = 'Thank you for your submission.',
+  submitLabel = 'Send',
+  class: className,
+} = Astro.props;
+
+const fields = schema?.fields ?? [];
+
+// A text field's input type — inferred from an explicit format hint or the field key.
+function textInputType(f: FormFieldSchema): string {
+  if (f.format === 'email' || f.key === 'email') return 'email';
+  if (f.format === 'tel' || /phone|tel/i.test(f.key)) return 'tel';
+  if (f.format === 'url' || f.key === 'url') return 'url';
+  return 'text';
+}
+---
+
+{fields.length > 0 && (
+  <form
+    method="post"
+    action={action}
+    data-marvin-form
+    data-success={successMessage}
+    class={className}
+  >
+    {honeypotField && (
+      <input
+        type="text"
+        name={honeypotField}
+        tabindex="-1"
+        autocomplete="off"
+        aria-hidden="true"
+        style="position:absolute;left:-9999px;width:1px;height:1px;opacity:0"
+      />
+    )}
+
+    {fields.map((f) => (
+      <div class="marvin-field" data-field-type={f.type}>
+        {f.type !== 'boolean' && (
+          <label for={`mf-${f.key}`}>
+            {f.label}
+            {f.required && <span aria-hidden="true"> *</span>}
+          </label>
+        )}
+
+        {(f.type === 'text' || f.type === 'number' || f.type === 'date' || f.type === 'datetime') && (
+          <input
+            id={`mf-${f.key}`}
+            name={f.key}
+            type={
+              f.type === 'number'
+                ? 'number'
+                : f.type === 'date'
+                  ? 'date'
+                  : f.type === 'datetime'
+                    ? 'datetime-local'
+                    : textInputType(f)
+            }
+            required={f.required}
+            placeholder={f.placeholder}
+            value={f.defaultValue as string | undefined}
+            min={f.min}
+            max={f.max}
+            step={f.step}
+            pattern={f.pattern}
+          />
+        )}
+
+        {f.type === 'textarea' && (
+          <textarea id={`mf-${f.key}`} name={f.key} required={f.required} placeholder={f.placeholder} rows={f.rows ?? 4}>
+            {f.defaultValue as string | undefined}
+          </textarea>
+        )}
+
+        {f.type === 'select' && (
+          <select id={`mf-${f.key}`} name={f.key} required={f.required}>
+            {!f.required && <option value="">{f.placeholder ?? 'Select…'}</option>}
+            {(f.options ?? []).map((o) => (
+              <option value={o} selected={f.defaultValue === o}>
+                {o}
+              </option>
+            ))}
+          </select>
+        )}
+
+        {f.type === 'boolean' && (
+          <label class="marvin-check" for={`mf-${f.key}`}>
+            <input id={`mf-${f.key}`} name={f.key} type="checkbox" value="true" required={f.required} />
+            <span>{f.label}</span>
+          </label>
+        )}
+
+        {f.helpText && <p class="marvin-help">{f.helpText}</p>}
+      </div>
+    ))}
+
+    <button type="submit">{submitLabel}</button>
+    <p data-marvin-status role="status" aria-live="polite" hidden></p>
+  </form>
+)}
+
+<script>
+  // Progressive enhancement: submit via fetch and show a status message. The native POST is the
+  // no-JS fallback, so the form works either way.
+  const forms = document.querySelectorAll<HTMLFormElement>('form[data-marvin-form]');
+  for (const form of forms) {
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      const status = form.querySelector<HTMLElement>('[data-marvin-status]');
+      const button = form.querySelector<HTMLButtonElement>('button[type="submit"]');
+      const data: Record<string, unknown> = {};
+      for (const [key, value] of new FormData(form).entries()) {
+        data[key] = value;
+      }
+      if (button) button.disabled = true;
+      try {
+        const res = await fetch(form.action, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+          body: JSON.stringify(data),
+        });
+        const body = await res.json().catch(() => ({ success: res.ok }));
+        if (status) {
+          status.hidden = false;
+          status.textContent = body.success
+            ? form.dataset.success || 'Thank you.'
+            : body.message || 'Something went wrong. Please try again.';
+        }
+        if (body.success) form.reset();
+      } catch {
+        if (status) {
+          status.hidden = false;
+          status.textContent = 'Could not send just now — please try again.';
+        }
+      } finally {
+        if (button) button.disabled = false;
+      }
+    });
+  }
+</script>

package/src/components/LinkCard.astro

@@ -0,0 +1,42 @@
+---
+/**
+ * LinkCard — the plain-link fallback for an embed that can't (or shouldn't) be framed: a provider
+ * Marvin couldn't resolve, a removed video, or a site that doesn't frame anything.
+ *
+ * Matches Marvin's published link card: the title, plus "on {Provider}" when the title is the
+ * media's real title (without one, the title is already "Watch on YouTube"). Pass an `embed`, or
+ * `href`/`title`/`providerName` directly. Only http(s) links render.
+ */
+import type { MarvinEmbed } from '../embeds.js';
+import { safeLinkHref } from './embed-frame.js';
+
+interface Props {
+  embed?: MarvinEmbed | null;
+  href?: string | null;
+  title?: string | null;
+  providerName?: string | null;
+  class?: string;
+}
+
+const { embed, class: className } = Astro.props;
+const href = safeLinkHref(
+  Astro.props.href || embed?.link?.href || embed?.canonicalUrl || embed?.url
+);
+const realTitle = Astro.props.title || embed?.title || undefined;
+const title = realTitle || embed?.link?.title || href;
+const providerName = Astro.props.providerName || embed?.link?.providerName || embed?.providerName;
+---
+
+{href && (
+  <a
+    class={['marvin-embed-link', className].filter(Boolean).join(' ')}
+    href={href}
+    rel="noopener noreferrer"
+    data-provider={embed?.provider}
+  >
+    <span class="marvin-embed-link__title">{title}</span>
+    {realTitle && providerName && (
+      <span class="marvin-embed-link__provider">on {providerName}</span>
+    )}
+  </a>
+)}

package/src/components/embed-frame.ts

@@ -0,0 +1,168 @@
+/**
+ * The iframe rules shared by `<Embed>` (server) and `<EmbedLoader>` (browser).
+ *
+ * A click-to-load facade carries its iframe as data: `data-marvin-embed-attrs` (a JSON object of
+ * attributes) and `data-marvin-embed-hosts` (the frame hosts it may load). The loader builds the
+ * iframe from those attributes alone, keeps only the allow-listed ones, and refuses any `src`
+ * that isn't https on an allowed host. Nothing from the page is ever parsed as HTML.
+ *
+ * This module has no imports so the browser bundle stays a few hundred bytes.
+ */
+
+/** Every attribute the loader will set on an iframe. Anything else in the data is dropped. */
+export const IFRAME_ATTRIBUTES: readonly string[] = [
+  'src',
+  'title',
+  'allow',
+  'sandbox',
+  'referrerpolicy',
+  'loading',
+  'style',
+];
+
+/** Inline style that could fetch or execute something, or break out of the attribute. */
+const UNSAFE_STYLE = /url\s*\(|expression\s*\(|@import|javascript:|\\|[<>]/i;
+
+/**
+ * A frame-source entry reduced to a lowercase host pattern: `example.com` or `*.example.com`.
+ * Accepts the forms a CSP `frame-src` list uses (`https://example.com`, `example.com:443`,
+ * `https://*.example.com/path`).
+ */
+export function frameHostPattern(source: unknown): string | undefined {
+  if (typeof source !== 'string') return undefined;
+  const host = source
+    .trim()
+    .toLowerCase()
+    .replace(/^[a-z][a-z0-9+.-]*:\/\//, '')
+    .replace(/[/?#].*$/, '')
+    .replace(/:\d+$/, '');
+  return /^(\*\.)?[a-z0-9-]+(\.[a-z0-9-]+)*$/.test(host) ? host : undefined;
+}
+
+/** True when `src` is an https URL whose host matches one of `hosts`. */
+export function isAllowedFrameSrc(src: unknown, hosts: readonly unknown[]): src is string {
+  if (typeof src !== 'string') return false;
+  let url: URL;
+  try {
+    url = new URL(src);
+  } catch {
+    return false;
+  }
+  if (url.protocol !== 'https:' || url.username || url.password) return false;
+
+  const host = url.hostname.toLowerCase();
+  return hosts.some((entry) => {
+    const pattern = frameHostPattern(entry);
+    if (!pattern) return false;
+    if (pattern.startsWith('*.')) {
+      const suffix = pattern.slice(1); // ".example.com"
+      return host.endsWith(suffix) && host.length > suffix.length;
+    }
+    return host === pattern;
+  });
+}
+
+/**
+ * The attributes to put on the iframe, or `undefined` when the src isn't allowed.
+ *
+ * Only {@link IFRAME_ATTRIBUTES} survive, with string (or number) values; an unsafe `style` is
+ * dropped. `src` comes from `attrs.src`, falling back to `fallbackSrc` (the facade's
+ * `data-marvin-embed-src`); either way it must pass the host check.
+ */
+export function iframeAttributes(
+  attrs: unknown,
+  hosts: readonly unknown[],
+  fallbackSrc?: string | null
+): Record<string, string> | undefined {
+  if (!attrs || typeof attrs !== 'object' || Array.isArray(attrs)) return undefined;
+
+  const safe: Record<string, string> = {};
+  for (const [rawKey, rawValue] of Object.entries(attrs as Record<string, unknown>)) {
+    const key = rawKey.toLowerCase();
+    if (!IFRAME_ATTRIBUTES.includes(key)) continue;
+    if (typeof rawValue !== 'string' && typeof rawValue !== 'number') continue;
+    const value = String(rawValue);
+    if (key === 'style' && UNSAFE_STYLE.test(value)) continue;
+    safe[key] = value;
+  }
+
+  const src = safe.src ?? fallbackSrc ?? undefined;
+  if (!isAllowedFrameSrc(src, hosts)) return undefined;
+  safe.src = src;
+  safe.title ||= 'Embedded media';
+  return safe;
+}
+
+/** `href` when it is an absolute http(s) URL, else `undefined` (no `javascript:` links). */
+export function safeLinkHref(href: unknown): string | undefined {
+  if (typeof href !== 'string') return undefined;
+  try {
+    const url = new URL(href.trim());
+    return url.protocol === 'https:' || url.protocol === 'http:' ? url.href : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function parseJson(value: string | null): unknown {
+  if (!value) return undefined;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return undefined;
+  }
+}
+
+/** The facade buttons the loader acts on. */
+export const FACADE_SELECTOR = 'button[data-marvin-embed-attrs], button[data-marvin-embed-src]';
+
+/**
+ * Swap one facade button for its iframe. Returns the iframe, or `null` when the data is refused
+ * (the facade is then marked `marvin-embed--blocked` and its plain link stays usable).
+ */
+export function activateEmbedFacade(button: Element, doc: Document): HTMLIFrameElement | null {
+  const hosts = parseJson(button.getAttribute('data-marvin-embed-hosts'));
+  const attributes = iframeAttributes(
+    parseJson(button.getAttribute('data-marvin-embed-attrs')),
+    Array.isArray(hosts) ? hosts : [],
+    button.getAttribute('data-marvin-embed-src')
+  );
+  const figure = button.closest('.marvin-embed');
+
+  if (!attributes) {
+    figure?.classList.add('marvin-embed--blocked');
+    button.setAttribute('disabled', '');
+    return null;
+  }
+
+  const iframe = doc.createElement('iframe');
+  // `src` last, after sandbox/allow are in place.
+  for (const [name, value] of Object.entries(attributes)) {
+    if (name !== 'src') iframe.setAttribute(name, value);
+  }
+  iframe.setAttribute('src', attributes.src);
+
+  button.replaceWith(iframe);
+  figure?.classList.remove('marvin-embed--facade');
+  figure?.classList.add('marvin-embed--loaded');
+  // Keyboard users pressed Enter/Space on the button that just vanished; keep their place.
+  iframe.focus();
+  return iframe;
+}
+
+const INSTALLED = '__marvinEmbedLoader';
+
+/** One delegated click listener per document, covering facades added later too. */
+export function installEmbedLoader(doc: Document): void {
+  const marker = doc as Document & { [INSTALLED]?: boolean };
+  if (marker[INSTALLED]) return;
+  marker[INSTALLED] = true;
+
+  doc.addEventListener('click', (event) => {
+    const target = event.target as Element | null;
+    const button = typeof target?.closest === 'function' ? target.closest(FACADE_SELECTOR) : null;
+    if (!button) return;
+    event.preventDefault();
+    activateEmbedFacade(button, doc);
+  });
+}

package/src/components/embeds.css

@@ -0,0 +1,137 @@
+/*
+ * Base styles for Marvin media embeds.
+ *
+ * Every selector is wrapped in :where() so it carries zero specificity: any site rule wins.
+ * Theme through the custom properties below rather than overriding the rules.
+ *
+ *   --marvin-embed-aspect      aspect ratio of a player (default 16 / 9)
+ *   --marvin-embed-height      fixed player height (audio/podcast default 152px)
+ *   --marvin-embed-max-width   max width of an embed (default 100%)
+ *   --marvin-embed-margin      outer margin (default 1.5em 0)
+ *   --marvin-embed-radius      corner radius (default 0.5rem)
+ *   --marvin-embed-bg          facade background (default #111)
+ *   --marvin-embed-fg          facade text colour (default #fff)
+ *   --marvin-embed-muted       secondary text (default currentColor at 70%)
+ *   --marvin-embed-border      link-card border (default 1px solid currentColor at 20%)
+ *   --marvin-embed-focus       focus ring colour (default Highlight)
+ *
+ * Marvin sets one of --marvin-embed-aspect (video; 9/16 for Shorts) or --marvin-embed-height
+ * (audio, podcast, playlist) on every player's figure; the defaults above are only fallbacks.
+ *
+ * Markup (Marvin's published html and <Embed> alike):
+ *   figure.marvin-embed.marvin-embed--{video|audio|podcast|playlist}[.marvin-embed--facade]
+ *     iframe                                   (direct mode)
+ *     button.marvin-embed__load                (click-to-load facade)
+ *       span.marvin-embed__provider  span.marvin-embed__title  span.marvin-embed__consent
+ *     a.marvin-embed__link                     (facade fallback link)
+ *   a.marvin-embed-link                        (link card)
+ *     span.marvin-embed-link__title  span.marvin-embed-link__provider
+ */
+
+:where(.marvin-embed) {
+  display: block;
+  max-width: var(--marvin-embed-max-width, 100%);
+  margin: var(--marvin-embed-margin, 1.5em 0);
+  padding: 0;
+}
+
+/* The player, and the facade button standing in for it, share one box. */
+:where(.marvin-embed) :where(iframe, .marvin-embed__load) {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--marvin-embed-height, auto);
+  aspect-ratio: var(--marvin-embed-aspect, 16 / 9);
+  border: 0;
+  border-radius: var(--marvin-embed-radius, 0.5rem);
+}
+
+/* Audio and podcast players are always fixed-height; a playlist may be either (a YouTube playlist
+ * is 16/9, a Spotify one 352px), so it keeps the general rule above. */
+:where(.marvin-embed--audio, .marvin-embed--podcast) :where(iframe, .marvin-embed__load) {
+  height: var(--marvin-embed-height, 152px);
+  aspect-ratio: auto;
+}
+
+/* Facade */
+:where(.marvin-embed__load) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  padding: 1em;
+  background: var(--marvin-embed-bg, #111);
+  color: var(--marvin-embed-fg, #fff);
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+}
+
+:where(.marvin-embed__load):focus-visible {
+  outline: 3px solid var(--marvin-embed-focus, Highlight);
+  outline-offset: 2px;
+}
+
+:where(.marvin-embed__load):disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+:where(.marvin-embed__provider) {
+  font-size: 0.75em;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  opacity: 0.8;
+}
+
+:where(.marvin-embed__title) {
+  font-weight: 600;
+}
+
+:where(.marvin-embed__consent) {
+  font-size: 0.85em;
+  opacity: 0.8;
+}
+
+/* A short fixed-height facade (a single track or episode) has little room: tighten it up. */
+:where(.marvin-embed--audio, .marvin-embed--podcast) :where(.marvin-embed__load) {
+  gap: 0.25em;
+  padding: 0.5em 1em;
+}
+
+:where(.marvin-embed__link) {
+  display: inline-block;
+  margin-top: 0.5em;
+  font-size: 0.85em;
+  color: var(--marvin-embed-muted, inherit);
+}
+
+/* Link card (status link / unavailable) */
+:where(.marvin-embed-link) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  max-width: var(--marvin-embed-max-width, 100%);
+  margin: var(--marvin-embed-margin, 1.5em 0);
+  padding: 0.75em 1em;
+  border: var(--marvin-embed-border, 1px solid color-mix(in srgb, currentColor 20%, transparent));
+  border-radius: var(--marvin-embed-radius, 0.5rem);
+  color: inherit;
+  text-decoration: none;
+}
+
+:where(.marvin-embed-link):focus-visible {
+  outline: 3px solid var(--marvin-embed-focus, Highlight);
+  outline-offset: 2px;
+}
+
+:where(.marvin-embed-link__title) {
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+:where(.marvin-embed-link__provider) {
+  font-size: 0.85em;
+  color: var(--marvin-embed-muted, color-mix(in srgb, currentColor 70%, transparent));
+}

package/src/components/index.ts

@@ -0,0 +1,29 @@
+/**
+ * `@inneropen/marvin-astro/components` — Astro components for Marvin content (formerly
+ * `@inneropen/marvin-renderers-core/astro`).
+ *
+ * Shipped as source and compiled by the consuming site's Astro build. For `astro.config.mjs`,
+ * import `marvinIntegration` from `@inneropen/marvin-astro/components/integration` instead: this
+ * entry pulls in `.astro` files.
+ */
+
+export {
+  PageRenderer,
+  ArticleRenderer,
+  FaqRenderer,
+  NavigationRenderer,
+  astroRegistry,
+  coreRendererPackage,
+  getRenderer,
+} from './registry.js';
+
+export { default as EntryRenderer } from './EntryRenderer.astro';
+export { default as FormRenderer } from './FormRenderer.astro';
+export { default as Embed } from './Embed.astro';
+export { default as LinkCard } from './LinkCard.astro';
+export { default as EmbedLoader } from './EmbedLoader.astro';
+export { marvinIntegration } from './integration.js';
+export { iframeAttributes, installEmbedLoader, isAllowedFrameSrc } from './embed-frame.js';
+
+// The framework-agnostic renderer logic, so one import covers a renderer component's needs.
+export * from '../renderers/index.js';

package/src/components/integration.ts

@@ -0,0 +1,62 @@
+import type { AstroIntegration } from 'astro';
+import { createMarvinClient } from '@inneropen/marvin-sdk';
+import { validateRenderers } from '../renderers/validation.js';
+import type { RendererCheckOptions } from '../renderers/validation-types.js';
+
+/**
+ * Build-time check that every rendered entry type in the workspace has a renderer in `registry`.
+ * Import it from `@inneropen/marvin-astro/components/integration` in `astro.config.mjs` (that
+ * path has no `.astro` imports, so the config loader can read it).
+ */
+export function marvinIntegration(options: RendererCheckOptions): AstroIntegration {
+  const { registry, strict = false, ignore } = options;
+
+  return {
+    name: '@inneropen/marvin-astro/renderers',
+    hooks: {
+      'astro:config:done': async ({ logger }) => {
+        const apiUrl = options.apiUrl || process.env.MARVIN_API_URL;
+        const siteToken = options.siteToken || process.env.MARVIN_SITE_CLIENT_TOKEN;
+        const workspaceSlug = process.env.MARVIN_WORKSPACE_SLUG;
+
+        if (!apiUrl || !siteToken || !workspaceSlug) {
+          logger.warn(
+            'Skipping renderer validation — missing MARVIN_API_URL, MARVIN_SITE_CLIENT_TOKEN, or MARVIN_WORKSPACE_SLUG'
+          );
+          return;
+        }
+
+        let workspaceRenderers;
+        try {
+          const client = createMarvinClient({ apiUrl, siteClientToken: siteToken, workspaceSlug });
+          workspaceRenderers = await client.renderers.list();
+        } catch (error) {
+          logger.warn(
+            `Renderer validation failed — could not reach Marvin API: ${error instanceof Error ? error.message : error}`
+          );
+          return;
+        }
+
+        const result = validateRenderers(workspaceRenderers, registry, { ignore });
+
+        if (result.missing.length === 0) {
+          logger.info(
+            `All ${result.total} entry type renderer(s) covered`
+          );
+          return;
+        }
+
+        const lines = result.missing.map(
+          (m) => `  - "${m.renderer}" for entry type "${m.entryTypeName}" (${m.entryTypeSlug})`
+        );
+        const message = `Missing ${result.missing.length} renderer(s):\n${lines.join('\n')}`;
+
+        if (strict) {
+          throw new Error(message);
+        }
+
+        logger.warn(message);
+      },
+    },
+  };
+}

package/src/components/markdown.ts

@@ -0,0 +1,4 @@
+import { createMarkdownRenderer } from '../markdown.js';
+
+/** The renderer Page/Article use when the site doesn't pass its own. */
+export const defaultRenderMarkdown = createMarkdownRenderer();

package/src/components/registry.ts

@@ -0,0 +1,34 @@
+import PageRenderer from './renderers/PageRenderer.astro';
+import ArticleRenderer from './renderers/ArticleRenderer.astro';
+import FaqRenderer from './renderers/FaqRenderer.astro';
+import NavigationRenderer from './renderers/NavigationRenderer.astro';
+import {
+  CORE_RENDERER_PACKAGE,
+  createRendererPackage,
+  createRegistry,
+} from '../renderers/registry.js';
+import type { CoreRendererName } from '../renderers/types.js';
+import packageJson from '../../package.json';
+
+export { PageRenderer, ArticleRenderer, FaqRenderer, NavigationRenderer };
+
+const rendererMap: Record<CoreRendererName, typeof PageRenderer> = {
+  page: PageRenderer,
+  article: ArticleRenderer,
+  faq: FaqRenderer,
+  navigation: NavigationRenderer,
+};
+
+export const astroRegistry = createRegistry(rendererMap);
+
+// Named after the package Marvin's system entry types declare, so a package registry keyed by
+// `renderingJson.package` still finds these renderers.
+export const coreRendererPackage = createRendererPackage({
+  packageName: CORE_RENDERER_PACKAGE,
+  version: packageJson.version,
+  renderers: rendererMap,
+});
+
+export function getRenderer(name: string) {
+  return astroRegistry.get(name);
+}