@aparte/plugin-cards 0.0.0-stage → 0.29.1

package/dist/media.js

@@ -0,0 +1,610 @@
+import { c as carousel } from "./carousel-DwgHvriV.js";
+import { b as defineCard, q as str, r as word, e as el, h as formatNumber, m as glyph, k as formatUnit, s as safeUrl, w as webUrl, p as num, K as KIT_WORDS } from "./format-BFq79ydr.js";
+const svg = (body) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">${body}</svg>`;
+const IMAGE = svg('<rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><circle cx="9" cy="9.5" r="1.6"/><path d="m4 17.5 4.6-4.6a1.4 1.4 0 0 1 2 0l3.4 3.4 1.6-1.6a1.4 1.4 0 0 1 2 0l2.9 2.9"/>');
+const FILM = svg('<rect x="3.5" y="5" width="17" height="14" rx="2.5"/><path d="M7.5 5v14M16.5 5v14M3.5 9.5h4M3.5 14.5h4M16.5 9.5h4M16.5 14.5h4"/>');
+const NOTE = svg('<path d="M9.5 17.5V6l10-2v11.5"/><circle cx="7" cy="17.5" r="2.5"/><circle cx="17" cy="15.5" r="2.5"/>');
+const FRAMES = svg('<rect x="7" y="3.5" width="13.5" height="11.5" rx="2.2"/><path d="M17 18.5a2 2 0 0 1-2 2H5.5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2"/><path d="m7.5 13 3-3 2.5 2.5 1.5-1.5 3.5 3.5"/>');
+const PLAY = '<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 5.6v12.8a1 1 0 0 0 1.5.86l10.2-6.4a1 1 0 0 0 0-1.72L10 4.74a1 1 0 0 0-1.5.86z"/></svg>';
+const EXPAND = svg('<path d="M14.5 4.5h5v5M9.5 19.5h-5v-5M19.5 4.5l-6 6M4.5 19.5l6-6"/>');
+const EXTERNAL = svg('<path d="M13.5 4.5h6v6M19.5 4.5l-8 8"/><path d="M17.5 13.5v4a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h4"/>');
+const CAMERA = svg('<path d="M4.5 8h3l1.6-2.3h5.8L16.5 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13" r="3.3"/>');
+function kindGlyph(kind) {
+  return kind === "video" ? FILM : kind === "audio" ? NOTE : IMAGE;
+}
+const mediaStyles = '/* =========================================\n   The media card — @aparte/plugin-cards/media\n   =========================================\n   Three variants of one card, chosen by `data-variant` on its root:\n     single    one medium, large: an image at its own shape within a height (a button that\n               opens the lightbox), a video in the browser\'s player, a sound under a header\n               with its cover and a waveform, a YouTube page as a poster that links out.\n               One medium is drawn this way whatever the variant.\n     gallery   a mosaic: two to six tiles, the first larger from three, "+n" on the last\n               when there are more. Several media in `single` are drawn this way too.\n     strip     square thumbnails that scroll sideways.\n   Every tile opens the lightbox: a native <dialog> wearing core\'s `.aparte-dialog`, its\n   picture on a dark stage.\n   Every colour is a core token or a `--aparte-media-*` one here. The stage is black in\n   either theme — what a photo is looked at on — and so is the scrim over a picture: they\n   sit on images, not on the page\'s ground.\n   */\n\n.aparte-media-card {\n  /* The tallest a picture is drawn on the card. */\n  --aparte-media-max-block: 22rem;\n  /* The seams of the mosaic. */\n  --aparte-media-gap: 2px;\n  /* The tint of a placeholder, a cover without a picture, the waveform. */\n  --aparte-media-tint: var(--aparte-primary);\n  --aparte-media-stage: #0b0b0d;\n  --aparte-media-on-stage: #ffffff;\n  --aparte-media-scrim: rgb(0 0 0 / 0.55);\n  --aparte-media-lightbox-block: min(72dvh, 44rem);\n}\n\n.aparte-media-card:has(> .aparte-media--single) { --aparte-rich-card-max-inline-size: 24rem; }\n.aparte-media-card:has(> .aparte-media--strip) { --aparte-rich-card-max-inline-size: 30rem; }\n\n.aparte-media {\n  min-inline-size: 0;\n  margin: 0;\n  color: var(--aparte-text);\n}\n\n/* ── What stands behind a picture ────────────────────────────────────── */\n\n.aparte-media__placeholder {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  display: grid;\n  place-items: center;\n  background:\n    radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--aparte-media-tint) 14%, transparent), transparent 60%),\n    color-mix(in oklab, var(--aparte-media-tint) 8%, var(--aparte-surface-2));\n  color: color-mix(in oklab, var(--aparte-media-tint) 55%, var(--aparte-text-muted));\n}\n\n.aparte-media__placeholder-glyph { --aparte-rich-card-glyph-size: 1.75rem; opacity: 0.85; }\n\n.aparte-media__img {\n  position: relative;\n  z-index: 1;\n  display: block;\n}\n\n/* ── One image, at its own shape ─────────────────────────────────────── */\n\n.aparte-media--single {\n  display: flex;\n  flex-direction: column;\n  padding: var(--aparte-space-4) var(--aparte-space-4) var(--aparte-space-5);\n}\n\n.aparte-media__frame {\n  position: relative;\n  display: block;\n  inline-size: 100%;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  isolation: isolate;\n  border: 0;\n  border-radius: var(--aparte-radius-lg);\n  background: var(--aparte-surface-2);\n  color: inherit;\n  font: inherit;\n}\n\n/* Nothing known of its shape: the picture sets the frame\'s size, within the card and the height. */\n.aparte-media__frame[data-kind="image"] {\n  align-self: center;\n  inline-size: fit-content;\n  max-inline-size: 100%;\n  cursor: zoom-in;\n}\n\n.aparte-media__frame[data-kind="image"] > .aparte-media__img {\n  inline-size: auto;\n  block-size: auto;\n  max-inline-size: 100%;\n  max-block-size: var(--aparte-media-max-block);\n}\n\n/* Its shape known: the frame is drawn at it from the start — as wide as the card allows,\n   narrower when the height would pass the limit — and the picture fills it. */\n.aparte-media__frame[data-kind="image"][data-sized] {\n  inline-size: min(100%, calc(var(--aparte-media-max-block) * var(--aparte-media-ratio-n)));\n  aspect-ratio: var(--aparte-media-ratio);\n}\n\n.aparte-media__frame[data-kind="image"][data-sized] > .aparte-media__img {\n  inline-size: 100%;\n  block-size: 100%;\n  max-block-size: none;\n  object-fit: cover;\n}\n\n/* Loading with no shape known, or failed: a box of a reasonable size around the placeholder. */\n.aparte-media__frame[data-kind="image"]:not([data-sized]):is([data-loading], [data-broken]) {\n  inline-size: 100%;\n  min-block-size: 10rem;\n}\n\n.aparte-media__frame[data-kind="image"] > .aparte-media__img {\n  transition: transform var(--aparte-duration-slower, 0.3s) ease, filter var(--aparte-duration-slower, 0.3s) ease;\n}\n\n.aparte-media__frame[data-kind="image"]:hover > .aparte-media__img { transform: scale(1.025); }\n\n.aparte-media__frame:focus-visible {\n  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);\n  outline-offset: var(--aparte-focus-outline-offset);\n}\n\n/* "See it larger": a frosted disc in the corner, shown on hover and focus. */\n.aparte-media__zoom {\n  --aparte-rich-card-glyph-size: 2rem;\n  position: absolute;\n  inset-block-start: var(--aparte-space-4);\n  inset-inline-end: var(--aparte-space-4);\n  z-index: 2;\n  padding: 0.4rem;\n  border-radius: var(--aparte-radius-full);\n  background: var(--aparte-media-scrim);\n  color: var(--aparte-media-on-stage);\n  backdrop-filter: blur(6px);\n  opacity: 0;\n  transition: opacity var(--aparte-duration-base, 0.15s) ease;\n}\n\n.aparte-media__frame:hover > .aparte-media__zoom,\n.aparte-media__frame:focus-visible > .aparte-media__zoom { opacity: 1; }\n\n.aparte-media__frame[data-broken] > .aparte-media__zoom { display: none; }\n\n/* ── A video ─────────────────────────────────────────────────────────── */\n\n.aparte-media__frame--video,\n.aparte-media__external,\n.aparte-media__lb-video {\n  aspect-ratio: var(--aparte-media-ratio, 16 / 9);\n  max-block-size: var(--aparte-media-max-block);\n  background: var(--aparte-media-stage);\n}\n\n.aparte-media__video {\n  display: block;\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: contain;\n  background: var(--aparte-media-stage);\n}\n\n/* A page that plays it elsewhere: its poster, a disc with the triangle, the site, the length. */\n.aparte-media__external {\n  color: var(--aparte-media-on-stage);\n  text-decoration: none;\n}\n\n.aparte-media__external > .aparte-media__img {\n  position: absolute;\n  inset: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n  transition: transform var(--aparte-duration-slower, 0.3s) ease;\n}\n\n.aparte-media__external:hover > .aparte-media__img { transform: scale(1.03); }\n\n.aparte-media__external:focus-visible {\n  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);\n  outline-offset: var(--aparte-focus-outline-offset);\n}\n\n.aparte-media__play {\n  position: absolute;\n  inset-block-start: 50%;\n  inset-inline-start: 50%;\n  z-index: 2;\n  display: grid;\n  place-items: center;\n  inline-size: 3.5rem;\n  block-size: 3.5rem;\n  border-radius: var(--aparte-radius-full);\n  background: var(--aparte-media-scrim);\n  color: var(--aparte-media-on-stage);\n  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25) inset, 0 6px 20px -6px rgb(0 0 0 / 0.6);\n  backdrop-filter: blur(6px);\n  translate: -50% -50%;\n  transition: background-color var(--aparte-duration-base, 0.15s) ease, scale var(--aparte-duration-base, 0.15s) ease;\n}\n\n/* `translate` is physical: in a right-to-left page the start edge is the right one. */\n.aparte-media__play:dir(rtl) { translate: 50% -50%; }\n\n.aparte-media__play-glyph { --aparte-rich-card-glyph-size: 1.5rem; margin-inline-start: 0.15rem; }\n.aparte-media__play:dir(rtl) .aparte-media__play-glyph { margin-inline: 0 0.15rem; transform: scaleX(-1); }\n\n.aparte-media__play--sm { inline-size: 2.5rem; block-size: 2.5rem; }\n.aparte-media__play--sm .aparte-media__play-glyph { --aparte-rich-card-glyph-size: 1.1rem; }\n\n.aparte-media__external:hover .aparte-media__play,\n.aparte-media__tile:hover .aparte-media__play {\n  background: var(--aparte-primary);\n  scale: 1.08;\n}\n\n.aparte-media__site,\n.aparte-media__duration {\n  position: absolute;\n  inset-block-end: var(--aparte-space-4);\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--aparte-space-2);\n  padding: var(--aparte-space-1) var(--aparte-space-3);\n  border-radius: var(--aparte-radius-sm);\n  background: var(--aparte-media-scrim);\n  color: var(--aparte-media-on-stage);\n  font-size: var(--aparte-font-size-xs);\n  font-weight: var(--aparte-font-weight-semibold);\n  line-height: 1.3;\n  white-space: nowrap;\n}\n\n.aparte-media__site { inset-inline-start: var(--aparte-space-4); }\n.aparte-media__duration { inset-inline-end: var(--aparte-space-4); }\n.aparte-media__site-glyph { --aparte-rich-card-glyph-size: 0.8rem; }\n\n/* ── A sound ─────────────────────────────────────────────────────────── */\n\n.aparte-media__audio {\n  display: grid;\n  gap: var(--aparte-space-4);\n  padding: var(--aparte-space-3) var(--aparte-space-2) 0;\n}\n\n.aparte-media__audio-head {\n  display: flex;\n  align-items: center;\n  gap: var(--aparte-space-5);\n  min-inline-size: 0;\n}\n\n.aparte-media__cover {\n  position: relative;\n  flex: none;\n  inline-size: 3.5rem;\n  block-size: 3.5rem;\n  overflow: hidden;\n  border-radius: var(--aparte-radius-lg);\n  box-shadow: 0 4px 14px -8px color-mix(in oklab, var(--aparte-media-tint) 70%, black);\n}\n\n.aparte-media__cover > .aparte-media__img {\n  position: absolute;\n  inset: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n\n.aparte-media__cover > .aparte-media__placeholder {\n  background: linear-gradient(135deg, color-mix(in oklab, var(--aparte-media-tint) 30%, var(--aparte-surface-1)), color-mix(in oklab, var(--aparte-media-tint) 10%, var(--aparte-surface-2)));\n}\n\n.aparte-media__audio-text {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--aparte-space-1);\n  min-inline-size: 0;\n}\n\n.aparte-media__audio-title,\n.aparte-media__audio-credit {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.aparte-media__audio-title {\n  font-size: var(--aparte-font-size-base);\n  font-weight: var(--aparte-font-weight-semibold);\n}\n\n.aparte-media__audio-credit,\n.aparte-media__audio-length {\n  color: var(--aparte-text-muted);\n  font-size: var(--aparte-font-size-sm);\n}\n\n.aparte-media__audio-length { flex: none; }\n\n/* A waveform that is only decoration: bars cut by a mask, their tops following a fixed\n   envelope cut by a polygon. It shows no real level, so it says nothing to a reader. */\n.aparte-media__wave {\n  display: block;\n  block-size: 2.25rem;\n  background: linear-gradient(90deg,\n    var(--aparte-media-tint) 0%,\n    color-mix(in oklab, var(--aparte-media-tint) 70%, transparent) 50%,\n    color-mix(in oklab, var(--aparte-media-tint) 28%, transparent) 50%,\n    color-mix(in oklab, var(--aparte-media-tint) 28%, transparent) 100%);\n  background-size: 200% 100%;\n  background-position: 100% 0;\n  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px);\n  mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px);\n  clip-path: polygon(\n    0% 35%, 5% 22.5%, 10% 30%, 15% 10%, 20% 20%, 25% 2.5%, 30% 15%, 35% 27.5%, 40% 7.5%, 45% 25%, 50% 12.5%,\n    55% 32.5%, 60% 5%, 65% 20%, 70% 30%, 75% 15%, 80% 25%, 85% 10%, 90% 27.5%, 95% 35%, 100% 37.5%,\n    100% 62.5%, 95% 65%, 90% 72.5%, 85% 90%, 80% 75%, 75% 85%, 70% 70%, 65% 80%, 60% 95%, 55% 67.5%,\n    50% 87.5%, 45% 75%, 40% 92.5%, 35% 72.5%, 30% 85%, 25% 97.5%, 20% 80%, 15% 90%, 10% 70%, 5% 77.5%, 0% 65%);\n}\n\n/* While it plays, the colour sweeps across the bars. */\n.aparte-media__audio[data-playing] .aparte-media__wave {\n  animation: aparte-media-wave 2.4s linear infinite;\n}\n\n@keyframes aparte-media-wave {\n  from { background-position: 100% 0; }\n  to { background-position: 0% 0; }\n}\n\n.aparte-media__player {\n  display: block;\n  inline-size: 100%;\n  block-size: 2.5rem;\n}\n\n/* ── Under a medium ──────────────────────────────────────────────────── */\n\n.aparte-media__figcaption {\n  display: flex;\n  flex-direction: column;\n  gap: var(--aparte-space-1);\n  min-inline-size: 0;\n  padding: var(--aparte-space-4) var(--aparte-space-2) 0;\n}\n\n.aparte-media__title {\n  font-size: var(--aparte-font-size-base);\n  font-weight: var(--aparte-font-weight-semibold);\n  letter-spacing: -0.005em;\n  line-height: 1.3;\n  overflow-wrap: anywhere;\n}\n\n.aparte-media__caption {\n  display: -webkit-box;\n  margin: 0;\n  overflow: hidden;\n  color: var(--aparte-text-muted);\n  font-size: var(--aparte-font-size-md);\n  line-height: 1.45;\n  overflow-wrap: anywhere;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 4;\n}\n\n.aparte-media__meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--aparte-space-2) var(--aparte-space-5);\n  margin-block-start: var(--aparte-space-2);\n  color: var(--aparte-text-muted);\n  font-size: var(--aparte-font-size-sm);\n}\n\n.aparte-media__credit {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--aparte-space-2);\n  min-inline-size: 0;\n}\n\n.aparte-media__source {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--aparte-space-1);\n  border-radius: var(--aparte-radius-xs);\n  color: var(--aparte-primary-ink, var(--aparte-text));\n  font-weight: var(--aparte-font-weight-medium);\n  text-decoration: none;\n}\n\n.aparte-media__source:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 0.18em;\n}\n\n.aparte-media__source:focus-visible {\n  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);\n  outline-offset: var(--aparte-focus-outline-offset);\n}\n\n.aparte-media__line-glyph { --aparte-rich-card-glyph-size: 0.95rem; }\n.aparte-media__source .aparte-media__line-glyph { --aparte-rich-card-glyph-size: 0.8rem; }\n\n/* ── Tiles: the mosaic\'s and the strip\'s ─────────────────────────────── */\n\n.aparte-media__tile {\n  position: relative;\n  display: block;\n  inline-size: 100%;\n  block-size: 100%;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  border: 0;\n  background: var(--aparte-surface-2);\n  color: inherit;\n  font: inherit;\n  cursor: zoom-in;\n}\n\n.aparte-media__tile > .aparte-media__img {\n  position: absolute;\n  inset: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n  transition: transform var(--aparte-duration-slower, 0.3s) ease, filter var(--aparte-duration-slower, 0.3s) ease;\n}\n\n.aparte-media__tile:hover > .aparte-media__img {\n  transform: scale(1.05);\n  filter: brightness(1.05);\n}\n\n/* The focus ring is drawn inside the tile, over the picture: tiles touch each other and the\n   card\'s edge, so a ring outside would be cut. Two rings, so it reads on any picture. */\n.aparte-media__tile::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.aparte-media__tile:focus-visible { outline: none; }\n\n.aparte-media__tile:focus-visible::after {\n  box-shadow:\n    inset 0 0 0 var(--aparte-focus-outline-width) var(--aparte-border-focus),\n    inset 0 0 0 calc(var(--aparte-focus-outline-width) * 2) var(--aparte-surface-1);\n}\n\n.aparte-media__tile[data-kind="audio"] { cursor: pointer; }\n\n.aparte-media__tile-title {\n  position: absolute;\n  inset-inline: var(--aparte-space-3);\n  inset-block-end: var(--aparte-space-3);\n  z-index: 2;\n  overflow: hidden;\n  color: var(--aparte-text);\n  font-size: var(--aparte-font-size-xs);\n  font-weight: var(--aparte-font-weight-semibold);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.aparte-media__tile .aparte-media__duration {\n  inset-block-end: var(--aparte-space-3);\n  inset-inline-end: var(--aparte-space-3);\n}\n\n/* "+3": how many more the lightbox holds, over the last tile. */\n.aparte-media__more {\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  display: grid;\n  place-items: center;\n  background: var(--aparte-media-scrim);\n  color: var(--aparte-media-on-stage);\n  font-size: var(--aparte-font-size-2xl);\n  font-weight: var(--aparte-font-weight-semibold);\n  letter-spacing: -0.01em;\n  backdrop-filter: blur(1.5px);\n  transition: background-color var(--aparte-duration-base, 0.15s) ease;\n}\n\n.aparte-media__tile:hover > .aparte-media__more { background: rgb(0 0 0 / 0.42); }\n\n/* ── Gallery: the mosaic ─────────────────────────────────────────────── */\n\n.aparte-media--gallery {\n  display: flex;\n  flex-direction: column;\n}\n\n/* A six-column grid laid out per count, so every count fills its box with no hole:\n     2  two squares\n     3  a large square, two small ones stacked beside it\n     4  a wide one over three\n     5  two over three\n     6  a large square, two beside it, three under it */\n.aparte-media__grid {\n  display: grid;\n  grid-template-columns: repeat(6, minmax(0, 1fr));\n  gap: var(--aparte-media-gap);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  aspect-ratio: 3 / 2;\n}\n\n.aparte-media__grid > * {\n  display: flex;\n  grid-column: span 2;\n  min-inline-size: 0;\n  min-block-size: 0;\n}\n\n.aparte-media__grid > * > .aparte-media__tile { flex: 1; }\n\n.aparte-media__grid[data-count="2"] { grid-template-rows: minmax(0, 1fr); aspect-ratio: 2 / 1; }\n.aparte-media__grid[data-count="2"] > * { grid-column: span 3; }\n\n.aparte-media__grid[data-count="3"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }\n.aparte-media__grid[data-count="3"] > :first-child { grid-column: span 4; grid-row: span 2; }\n\n.aparte-media__grid[data-count="4"] { grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); aspect-ratio: 4 / 3; }\n.aparte-media__grid[data-count="4"] > :first-child { grid-column: span 6; }\n\n.aparte-media__grid[data-count="5"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }\n.aparte-media__grid[data-count="5"] > :nth-child(-n + 2) { grid-column: span 3; }\n\n.aparte-media__grid[data-count="6"] { grid-template-rows: repeat(3, minmax(0, 1fr)); aspect-ratio: 1; }\n.aparte-media__grid[data-count="6"] > :first-child { grid-column: span 4; grid-row: span 2; }\n\n/* The collection\'s line: under the mosaic, over the strip. */\n.aparte-media__heading {\n  display: flex;\n  align-items: center;\n  gap: var(--aparte-space-3);\n  min-inline-size: 0;\n  color: var(--aparte-text-muted);\n  font-size: var(--aparte-font-size-md);\n}\n\n.aparte-media--gallery > .aparte-media__heading { padding: var(--aparte-space-4) var(--aparte-space-6) var(--aparte-space-5); }\n\n.aparte-media__heading-title {\n  overflow: hidden;\n  color: var(--aparte-text);\n  font-weight: var(--aparte-font-weight-semibold);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.aparte-media__heading-title + .aparte-media__count::before {\n  content: "·";\n  margin-inline-end: var(--aparte-space-3);\n}\n\n.aparte-media__count { flex: none; }\n\n/* ── Strip: square thumbnails in the kit\'s carousel ──────────────────── */\n\n.aparte-media--strip {\n  display: grid;\n  gap: var(--aparte-space-5);\n  padding: var(--aparte-space-5) var(--aparte-space-6) var(--aparte-space-6);\n}\n\n.aparte-media--strip .aparte-rich-card__carousel {\n  --aparte-rich-card-slide-size: 7rem;\n  --aparte-rich-card-slide-gap: var(--aparte-space-4);\n}\n\n.aparte-media__thumb {\n  display: flex;\n  flex-direction: column;\n  gap: var(--aparte-space-2);\n  min-inline-size: 0;\n}\n\n.aparte-media__thumb > .aparte-media__tile {\n  block-size: auto;\n  aspect-ratio: 1;\n  border-radius: var(--aparte-radius-lg);\n  box-shadow: 0 0 0 var(--aparte-border-width) color-mix(in oklab, var(--aparte-text) 8%, transparent);\n  transition: translate var(--aparte-duration-base, 0.15s) ease, box-shadow var(--aparte-duration-base, 0.15s) ease;\n}\n\n.aparte-media__thumb > .aparte-media__tile:hover {\n  translate: 0 -2px;\n  box-shadow: 0 10px 20px -14px rgb(0 0 0 / 0.55);\n}\n\n.aparte-media__thumb-title {\n  overflow: hidden;\n  color: var(--aparte-text-muted);\n  font-size: var(--aparte-font-size-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── The lightbox ────────────────────────────────────────────────────── */\n\n/* Two classes: it must win over the recipe\'s `--lg` whatever order the sheets land in. */\n.aparte-dialog.aparte-media__lightbox { --aparte-dialog-width: 56rem; }\n\n.aparte-media__lb-head { padding-block-end: var(--aparte-space-4); }\n\n.aparte-media__lb-heading {\n  display: flex;\n  flex: 1;\n  align-items: baseline;\n  gap: var(--aparte-space-4);\n  min-inline-size: 0;\n}\n\n.aparte-media__lb-title {\n  flex: 0 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.aparte-media__lb-counter {\n  flex: none;\n  color: var(--aparte-text-muted);\n  font-size: var(--aparte-font-size-sm);\n  font-variant-numeric: tabular-nums;\n}\n\n/* The stage: the picture on black, as large as the window lets it be. */\n.aparte-media__lb-body {\n  position: relative;\n  display: grid;\n  min-block-size: 12rem;\n  background: var(--aparte-media-stage);\n}\n\n.aparte-media__lb-stage {\n  display: grid;\n  place-items: center;\n  min-inline-size: 0;\n  max-block-size: var(--aparte-media-lightbox-block);\n}\n\n.aparte-media__lb-picture {\n  position: relative;\n  display: grid;\n  place-items: center;\n  inline-size: 100%;\n  min-block-size: 12rem;\n}\n\n.aparte-media__lb-picture > .aparte-media__placeholder {\n  background: none;\n  color: rgb(255 255 255 / 0.4);\n}\n\n.aparte-media__lb-picture:not([data-loading], [data-broken]) > .aparte-media__placeholder { display: none; }\n\n.aparte-media__lb-img {\n  position: relative;\n  z-index: 1;\n  display: block;\n  inline-size: auto;\n  block-size: auto;\n  max-inline-size: 100%;\n  max-block-size: var(--aparte-media-lightbox-block);\n  object-fit: contain;\n}\n\n.aparte-media__lb-video {\n  inline-size: 100%;\n  max-block-size: var(--aparte-media-lightbox-block);\n}\n\n.aparte-media__lb-stage > .aparte-media__external {\n  inline-size: 100%;\n  max-block-size: var(--aparte-media-lightbox-block);\n  border-radius: 0;\n}\n\n.aparte-media__lb-stage > .aparte-media__audio {\n  inline-size: min(100% - var(--aparte-space-8) * 2, 28rem);\n  margin: var(--aparte-space-8);\n  padding: var(--aparte-space-6);\n  border-radius: var(--aparte-radius-xl);\n  background: var(--aparte-surface-1);\n}\n\n.aparte-media__lb-nav {\n  position: absolute;\n  inset-block-start: 50%;\n  z-index: 2;\n  translate: 0 -50%;\n  box-shadow: 0 2px 12px -2px rgb(0 0 0 / 0.45);\n}\n\n.aparte-media__lb-nav--prev { inset-inline-start: var(--aparte-space-5); }\n.aparte-media__lb-nav--next { inset-inline-end: var(--aparte-space-5); }\n.aparte-media__lb-nav:dir(rtl) { transform: scaleX(-1); }\n\n/* At either end the button stays where it is, and stays focusable — a disabled button\n   would drop the keyboard\'s focus out of the dialog — but says it leads nowhere. */\n.aparte-media__lb-nav[aria-disabled="true"] {\n  opacity: 0.35;\n  cursor: default;\n}\n\n.aparte-media__lb-caption {\n  display: flex;\n  flex-direction: column;\n  gap: var(--aparte-space-1);\n  padding: var(--aparte-space-5) var(--aparte-space-6) var(--aparte-space-6);\n}\n\n.aparte-media__lb-caption[hidden] { display: none; }\n\n.aparte-media__lb-caption > .aparte-media__caption { -webkit-line-clamp: 6; }\n\n/* ── Loading ─────────────────────────────────────────────────────────── */\n\n.aparte-media-card[data-state="loading"] .aparte-media__sk-frame {\n  block-size: auto;\n  aspect-ratio: 4 / 3;\n  border-radius: var(--aparte-radius-lg);\n}\n\n.aparte-media-card[data-state="loading"] .aparte-media__sk-cell {\n  block-size: auto;\n  border-radius: 0;\n}\n\n.aparte-media-card[data-state="loading"] .aparte-media__sk-line { inline-size: 60%; }\n.aparte-media-card[data-state="loading"] .aparte-media__sk-line--short { inline-size: 35%; }\n\n.aparte-media__sk-row {\n  display: flex;\n  gap: var(--aparte-space-4);\n  overflow: hidden;\n}\n\n.aparte-media-card[data-state="loading"] .aparte-media__sk-thumb {\n  flex: none;\n  inline-size: 7rem;\n  block-size: 7rem;\n  border-radius: var(--aparte-radius-lg);\n}\n\n/* ── Small screens, and stillness ────────────────────────────────────── */\n\n@media (max-width: 380px) {\n  .aparte-media-card { --aparte-media-max-block: 18rem; }\n  .aparte-media--single { padding: var(--aparte-space-3) var(--aparte-space-3) var(--aparte-space-4); }\n  .aparte-media--strip { padding: var(--aparte-space-4) var(--aparte-space-5) var(--aparte-space-5); }\n  .aparte-media--strip .aparte-rich-card__carousel { --aparte-rich-card-slide-size: 6rem; }\n  .aparte-media__play { inline-size: 3rem; block-size: 3rem; }\n  .aparte-media__lb-nav--prev { inset-inline-start: var(--aparte-space-3); }\n  .aparte-media__lb-nav--next { inset-inline-end: var(--aparte-space-3); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .aparte-media__frame:hover > .aparte-media__img,\n  .aparte-media__tile:hover > .aparte-media__img,\n  .aparte-media__external:hover > .aparte-media__img { transform: none; }\n  .aparte-media__thumb > .aparte-media__tile:hover { translate: none; }\n  .aparte-media__external:hover .aparte-media__play,\n  .aparte-media__tile:hover .aparte-media__play { scale: none; }\n  .aparte-media__audio[data-playing] .aparte-media__wave { animation: none; }\n}\n';
+const M = {
+  cardsMediaTitle: { en: "Media", fr: "Médias", de: "Medien", es: "Multimedia", it: "Contenuti multimediali", ja: "メディア", ko: "미디어", pt: "Mídia", ru: "Медиа", zh: "媒体" },
+  cardsMediaPhotoCount: { en: "{n} photos", fr: "{n} photos", de: "{n} Fotos", es: "{n} fotos", it: "{n} foto", ja: "写真{n}枚", ko: "사진 {n}장", pt: "{n} fotos", ru: "Фото: {n}", zh: "{n} 张照片" },
+  cardsMediaVideoCount: { en: "{n} videos", fr: "{n} vidéos", de: "{n} Videos", es: "{n} vídeos", it: "{n} video", ja: "動画{n}本", ko: "동영상 {n}개", pt: "{n} vídeos", ru: "Видео: {n}", zh: "{n} 个视频" },
+  cardsMediaCount: { en: "{n} items", fr: "{n} éléments", de: "{n} Elemente", es: "{n} elementos", it: "{n} elementi", ja: "メディア{n}件", ko: "미디어 {n}개", pt: "{n} itens", ru: "Файлов: {n}", zh: "{n} 个媒体" },
+  cardsMediaImage: { en: "Image", fr: "Image", de: "Bild", es: "Imagen", it: "Immagine", ja: "画像", ko: "이미지", pt: "Imagem", ru: "Изображение", zh: "图片" },
+  cardsMediaVideo: { en: "Video", fr: "Vidéo", de: "Video", es: "Vídeo", it: "Video", ja: "動画", ko: "동영상", pt: "Vídeo", ru: "Видео", zh: "视频" },
+  cardsMediaAudio: { en: "Audio", fr: "Audio", de: "Audio", es: "Audio", it: "Audio", ja: "音声", ko: "오디오", pt: "Áudio", ru: "Аудио", zh: "音频" },
+  cardsMediaMore: { en: "{n} more", fr: "{n} de plus", de: "{n} weitere", es: "{n} más", it: "altri {n}", ja: "ほか{n}件", ko: "{n}개 더", pt: "mais {n}", ru: "ещё {n}", zh: "另外 {n} 个" },
+  cardsMediaView: { en: "View larger", fr: "Agrandir", de: "Vergrößern", es: "Ampliar", it: "Ingrandisci", ja: "拡大表示", ko: "크게 보기", pt: "Ampliar", ru: "Увеличить", zh: "放大查看" },
+  cardsMediaClose: { en: "Close", fr: "Fermer", de: "Schließen", es: "Cerrar", it: "Chiudi", ja: "閉じる", ko: "닫기", pt: "Fechar", ru: "Закрыть", zh: "关闭" },
+  cardsMediaWatchOn: { en: "Watch on {site}", fr: "Regarder sur {site}", de: "Auf {site} ansehen", es: "Ver en {site}", it: "Guarda su {site}", ja: "{site}で見る", ko: "{site}에서 보기", pt: "Assistir no {site}", ru: "Смотреть на {site}", zh: "在 {site} 上观看" }
+};
+const KIND_WORD = { image: "cardsMediaImage", video: "cardsMediaVideo", audio: "cardsMediaAudio" };
+const MAX_MEDIA = 24;
+const GALLERY_TILES = 6;
+const IMAGE_EXT = /\.(jpe?g|png|gif|webp|avif|svg|bmp|ico|heic|heif|jxl)$/i;
+const VIDEO_EXT = /\.(mp4|m4v|webm|mov|ogv|mkv|m3u8|mpd)$/i;
+const AUDIO_EXT = /\.(mp3|m4a|aac|wav|ogg|oga|opus|flac|weba)$/i;
+function videoSite(url) {
+  const host = new URL(url).hostname.replace(/^(www|m)\./, "");
+  if (host === "youtu.be" || /(^|\.)youtube(-nocookie)?\.com$/.test(host)) return "YouTube";
+  if (/(^|\.)vimeo\.com$/.test(host)) return "Vimeo";
+  return void 0;
+}
+function kindOfWord(value) {
+  const s = str(value)?.toLowerCase();
+  if (!s) return void 0;
+  if (/^image\/|^(image|photo|picture|img|gif|illustration|drawing)s?$/.test(s)) return "image";
+  if (/^video\/|^application\/(x-mpegurl|vnd\.apple\.mpegurl|dash\+xml)$|^(video|movie|clip|film)s?$/.test(s)) return "video";
+  if (/^audio\/|^(audio|sound|music|song|track|podcast|voice|recording)s?$/.test(s)) return "audio";
+  return void 0;
+}
+function streamType(m) {
+  if (m.mimeType && /^application\/(x-mpegurl|vnd\.apple\.mpegurl|dash\+xml)$/i.test(m.mimeType)) return m.mimeType;
+  const path = new URL(m.src).pathname;
+  if (/\.m3u8$/i.test(path)) return "application/vnd.apple.mpegurl";
+  if (/\.mpd$/i.test(path)) return "application/dash+xml";
+  return void 0;
+}
+function playsHere(m) {
+  const type = streamType(m);
+  return !type || document.createElement("video").canPlayType(type) !== "";
+}
+function kindOfUrl(url) {
+  const path = new URL(url).pathname;
+  if (IMAGE_EXT.test(path)) return "image";
+  if (VIDEO_EXT.test(path)) return "video";
+  if (AUDIO_EXT.test(path)) return "audio";
+  return void 0;
+}
+function readDuration(value) {
+  const n = num(value);
+  if (n !== void 0) return n >= 0 ? n : void 0;
+  const s = str(value);
+  if (!s) return void 0;
+  const clock = /^(?:(\d+):)?(\d{1,2}):(\d{2})(?:\.\d+)?$/.exec(s);
+  if (clock) {
+    const [h, m, sec] = [Number(clock[1] ?? 0), Number(clock[2]), Number(clock[3])];
+    if (sec > 59 || clock[1] !== void 0 && m > 59) return void 0;
+    return h * 3600 + m * 60 + sec;
+  }
+  const iso = /^PT(?:(\d+(?:\.\d+)?)H)?(?:(\d+(?:\.\d+)?)M)?(?:(\d+(?:\.\d+)?)S)?$/i.exec(s);
+  if (iso && (iso[1] || iso[2] || iso[3])) return Number(iso[1] ?? 0) * 3600 + Number(iso[2] ?? 0) * 60 + Number(iso[3] ?? 0);
+  return void 0;
+}
+function textOf(value) {
+  if (value && typeof value === "object") {
+    const o = value;
+    return str(o["name"] ?? o["title"] ?? o["text"] ?? o["username"]);
+  }
+  return str(value);
+}
+function linkOf(value) {
+  const first = Array.isArray(value) ? value[0] : value;
+  if (!first || typeof first !== "object") return first;
+  const o = first;
+  for (const key of ["url", "src", "href", "uri", "link", "regular", "large2x", "large", "medium", "original", "full", "small"]) {
+    if (typeof o[key] === "string") return o[key];
+  }
+  return void 0;
+}
+function address(value) {
+  const s = str(linkOf(value));
+  if (!s || !(/^https?:\/\//i.test(s) || s.startsWith("/"))) return void 0;
+  if (s.startsWith("/") && !s.startsWith("//")) {
+    const own = safeUrl(s);
+    return own && /^https?:/i.test(own) ? own : void 0;
+  }
+  return webUrl(s.startsWith("//") ? `https:${s}` : s) ?? void 0;
+}
+const positive = (value) => {
+  const n = num(value);
+  return n !== void 0 && n > 0 ? n : void 0;
+};
+function readMedium(raw) {
+  const value = typeof raw === "string" ? { src: raw } : raw;
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const r = value;
+  const urls = r["urls"] && typeof r["urls"] === "object" ? r["urls"] : {};
+  const videoFile = Array.isArray(r["video_files"]) ? r["video_files"].find((f) => address(f?.["link"])) : void 0;
+  const sources = [
+    ["src", r["src"]],
+    ["videoFile", videoFile?.["link"]],
+    ["image", r["image"]],
+    ["imageUrl", r["imageUrl"] ?? r["image_url"]],
+    ["urls", urls["regular"] ?? urls["full"] ?? urls["small"] ?? urls["raw"]],
+    ["contentUrl", r["contentUrl"] ?? r["fileUrl"] ?? r["file_url"]],
+    ["url", r["url"]],
+    ["link", r["link"]],
+    ["href", r["href"]],
+    ["thumbnail", r["thumbnail"]]
+  ];
+  let src;
+  let from = "";
+  for (const [key, candidate] of sources) {
+    const url = address(candidate);
+    if (url) {
+      src = url;
+      from = key;
+      break;
+    }
+  }
+  if (!src) return null;
+  const page = [r["page"], r["pageUrl"], r["page_url"], r["links"]?.["html"], from === "url" ? void 0 : r["url"], from === "link" ? void 0 : r["link"], r["sourceUrl"], r["source_url"]].map(address).find((v) => v && v !== src);
+  const poster = [r["poster"], r["thumb"], r["preview"], r["previewUrl"], r["preview_url"], urls["small"], from === "thumbnail" ? void 0 : r["thumbnail"], videoFile ? r["image"] : void 0, r["cover"], r["artwork"]].map(address).find((v) => v && v !== src);
+  const mimeType = str(r["mimeType"] ?? r["mime_type"] ?? r["mime"] ?? r["contentType"] ?? r["content_type"] ?? r["encodingFormat"] ?? videoFile?.["file_type"]);
+  const site = videoSite(src);
+  const kind = site ? "video" : kindOfWord(r["kind"] ?? r["mediaType"] ?? r["media_type"] ?? r["type"]) ?? kindOfWord(mimeType) ?? (videoFile ? "video" : void 0) ?? kindOfUrl(src) ?? "image";
+  const creditText = textOf(r["credit"] ?? r["author"] ?? r["photographer"] ?? r["artist"] ?? r["creator"] ?? r["user"] ?? r["source"] ?? r["attribution"] ?? r["channelTitle"] ?? r["channel"]);
+  const width = positive(r["width"] ?? r["w"]);
+  const height = positive(r["height"] ?? r["h"]);
+  const ms = positive(r["duration_ms"] ?? r["durationMs"]);
+  const duration = ms !== void 0 ? ms / 1e3 : readDuration(r["duration"] ?? r["length"] ?? r["durationSeconds"] ?? r["duration_seconds"]);
+  return {
+    kind,
+    src,
+    ...site ? { site } : {},
+    poster,
+    title: textOf(r["title"] ?? r["name"]),
+    caption: textOf(r["caption"] ?? r["description"] ?? r["revised_prompt"] ?? r["revisedPrompt"] ?? r["summary"]),
+    credit: creditText && !/^https?:\/\//i.test(creditText) ? creditText : void 0,
+    alt: str(r["alt"] ?? r["altText"] ?? r["alt_text"] ?? r["alt_description"] ?? r["revised_prompt"]),
+    // Both or neither: one side alone says nothing of the shape.
+    ...width && height ? { width, height } : {},
+    duration,
+    mimeType: mimeType?.includes("/") ? mimeType : void 0,
+    url: page
+  };
+}
+function readMedia(raw) {
+  const value = typeof raw === "string" ? [raw] : raw;
+  if (!value || typeof value !== "object") return null;
+  let title;
+  let list;
+  if (Array.isArray(value)) {
+    list = value;
+  } else {
+    const r = value;
+    const nested = ["items", "media", "images", "photos", "videos", "results", "data", "files"].map((k) => r[k]).find(Array.isArray);
+    if (nested) {
+      list = nested;
+      title = str(r["title"]);
+    } else {
+      list = [value];
+    }
+  }
+  const items = list.map(readMedium).filter((m) => m !== null).slice(0, MAX_MEDIA);
+  return items.length ? { ...title ? { title } : {}, items } : null;
+}
+function formatDuration(config, seconds) {
+  const total = Math.round(seconds);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = total % 60;
+  const plain = (v) => formatNumber(config, v, { useGrouping: false });
+  const two = (v) => formatNumber(config, v, { minimumIntegerDigits: 2, useGrouping: false });
+  return h ? `${plain(h)}:${two(m)}:${two(s)}` : `${plain(m)}:${two(s)}`;
+}
+function spokenDuration(config, seconds) {
+  const total = Math.round(seconds);
+  const parts = [[Math.floor(total / 3600), "hour"], [Math.floor(total % 3600 / 60), "minute"], [total % 60, "second"]];
+  const said = parts.filter(([v]) => v > 0).map(([v, unit]) => formatUnit(config, v, unit));
+  return said.length ? said.join(" ") : formatUnit(config, 0, "second");
+}
+function isoDuration(seconds) {
+  const total = Math.round(seconds);
+  return `PT${Math.floor(total / 3600)}H${Math.floor(total % 3600 / 60)}M${total % 60}S`;
+}
+const kindWord = (config, kind) => word(config, KIND_WORD[kind], M[KIND_WORD[kind]]);
+function nameOf(config, m, index) {
+  const own = m.title ?? m.alt ?? m.caption;
+  if (own) return own;
+  return index === void 0 ? kindWord(config, m.kind) : `${kindWord(config, m.kind)} ${formatNumber(config, index + 1)}`;
+}
+const altOf = (config, m, index) => m.alt ?? nameOf(config, m, index);
+function countLabel(config, items) {
+  const n = formatNumber(config, items.length);
+  if (items.every((m) => m.kind === "image")) return word(config, "cardsMediaPhotoCount", M.cardsMediaPhotoCount, { n });
+  if (items.every((m) => m.kind === "video")) return word(config, "cardsMediaVideoCount", M.cardsMediaVideoCount, { n });
+  return word(config, "cardsMediaCount", M.cardsMediaCount, { n });
+}
+function placeholder(kind) {
+  return el(
+    "span",
+    { class: "aparte-media__placeholder", attrs: { "aria-hidden": "true" } },
+    glyph(kindGlyph(kind), "aparte-rich-card__glyph aparte-media__placeholder-glyph")
+  );
+}
+function picture(ctx, holder, src, alt, className = "aparte-media__img") {
+  const img = el("img", { class: className, attrs: { src, loading: "lazy", decoding: "async" } });
+  if (alt) ctx.bind(img, alt, "alt");
+  else img.setAttribute("alt", "");
+  img.addEventListener("load", () => holder.removeAttribute("data-loading"), { once: true });
+  img.addEventListener("error", () => {
+    img.remove();
+    holder.removeAttribute("data-loading");
+    holder.setAttribute("data-broken", "");
+  }, { once: true });
+  return img;
+}
+function reserve(holder, m) {
+  if (!m.width || !m.height) return;
+  holder.style.setProperty("--aparte-media-ratio", `${m.width} / ${m.height}`);
+  holder.style.setProperty("--aparte-media-ratio-n", String(m.width / m.height));
+  holder.setAttribute("data-sized", "");
+}
+function durationOf(ctx, seconds, className, hidden = false) {
+  const node = el("time", { class: className, attrs: { datetime: isoDuration(seconds), "aria-hidden": hidden ? "true" : void 0 } });
+  ctx.bind(node, () => formatDuration(ctx.config, seconds));
+  return node;
+}
+const hostOf = (url) => new URL(url).hostname.replace(/^www\./, "");
+function imageFrame(ctx, m, open) {
+  const frame = el("button", { class: "aparte-media__frame", attrs: { type: "button", "aria-haspopup": "dialog", "data-kind": "image", "data-loading": "" } });
+  reserve(frame, m);
+  frame.append(
+    placeholder("image"),
+    picture(ctx, frame, m.src, () => altOf(ctx.config, m)),
+    glyph(EXPAND, "aparte-rich-card__glyph aparte-media__zoom")
+  );
+  ctx.bind(frame, () => word(ctx.config, "cardsMediaView", M.cardsMediaView), "title");
+  frame.addEventListener("click", () => open(frame));
+  return frame;
+}
+function videoFrame(ctx, m, className = "aparte-media__frame aparte-media__frame--video") {
+  const frame = el("div", { class: className, attrs: { "data-kind": "video" } });
+  reserve(frame, m);
+  const video = el("video", {
+    class: "aparte-media__video",
+    attrs: { controls: true, preload: "metadata", playsinline: true, src: m.src, poster: m.poster }
+  });
+  ctx.bind(video, () => nameOf(ctx.config, m), "aria-label");
+  frame.append(video);
+  return frame;
+}
+function externalFrame(ctx, m) {
+  const href = m.site ? m.src : m.url ?? m.src;
+  const site = m.site ?? hostOf(href);
+  const frame = el("a", {
+    class: "aparte-media__frame aparte-media__external",
+    attrs: { href, target: "_blank", rel: "noopener noreferrer", "data-kind": "video" }
+  });
+  reserve(frame, m);
+  frame.append(placeholder("video"));
+  if (m.poster) frame.append(picture(ctx, frame, m.poster, null));
+  frame.append(
+    el("span", { class: "aparte-media__play", attrs: { "aria-hidden": "true" } }, glyph(PLAY, "aparte-rich-card__glyph aparte-media__play-glyph")),
+    el("span", { class: "aparte-media__site", attrs: { "aria-hidden": "true" } }, glyph(EXTERNAL, "aparte-rich-card__glyph aparte-media__site-glyph"), site)
+  );
+  if (m.duration !== void 0) frame.append(durationOf(ctx, m.duration, "aparte-media__duration", true));
+  ctx.bind(frame, () => `${nameOf(ctx.config, m)} — ${word(ctx.config, "cardsMediaWatchOn", M.cardsMediaWatchOn, { site })}`, "aria-label");
+  return frame;
+}
+function audioBlock(ctx, m) {
+  const cover = el("span", { class: "aparte-media__cover", attrs: { "data-kind": "audio" } }, placeholder("audio"));
+  if (m.poster) cover.append(picture(ctx, cover, m.poster, null));
+  const title = el("div", { class: "aparte-media__audio-title" });
+  ctx.bind(title, () => m.title ?? kindWord(ctx.config, "audio"));
+  const text = el(
+    "div",
+    { class: "aparte-media__audio-text" },
+    title,
+    m.credit ? el("div", { class: "aparte-media__audio-credit", text: m.credit }) : null
+  );
+  const head = el(
+    "div",
+    { class: "aparte-media__audio-head" },
+    cover,
+    text,
+    m.duration !== void 0 ? durationOf(ctx, m.duration, "aparte-media__audio-length") : null
+  );
+  const audio = el("audio", { class: "aparte-media__player", attrs: { controls: true, preload: "metadata", src: m.src } });
+  ctx.bind(audio, () => nameOf(ctx.config, m), "aria-label");
+  const block = el(
+    "div",
+    { class: "aparte-media__audio", attrs: { "data-kind": "audio" } },
+    head,
+    el("span", { class: "aparte-media__wave", attrs: { "aria-hidden": "true" } }),
+    audio
+  );
+  audio.addEventListener("play", () => block.setAttribute("data-playing", ""));
+  for (const stop of ["pause", "ended", "emptied"]) audio.addEventListener(stop, () => block.removeAttribute("data-playing"));
+  return block;
+}
+function captionOf(m, withTitle, tag = "figcaption") {
+  const title = withTitle && m.title ? el("div", { class: "aparte-media__title", text: m.title }) : null;
+  const caption = m.caption && m.caption !== m.title ? el("p", { class: "aparte-media__caption", text: m.caption }) : null;
+  const credit = m.credit && m.kind !== "audio" ? el("span", { class: "aparte-media__credit" }, glyph(m.kind === "image" ? CAMERA : kindGlyph(m.kind), "aparte-rich-card__glyph aparte-media__line-glyph"), el("span", { text: m.credit })) : null;
+  const source = m.url ? el(
+    "a",
+    { class: "aparte-media__source", attrs: { href: m.url, target: "_blank", rel: "noopener noreferrer" } },
+    el("span", { text: hostOf(m.url) }),
+    glyph(EXTERNAL, "aparte-rich-card__glyph aparte-media__line-glyph")
+  ) : null;
+  const meta = credit || source ? el("div", { class: "aparte-media__meta" }, credit, source) : null;
+  if (!title && !caption && !meta) return null;
+  return el(tag, { class: "aparte-media__figcaption" }, title, caption, meta);
+}
+function stageOf(ctx, m, open, index) {
+  if (m.kind === "audio") return audioBlock(ctx, m);
+  if (m.site || m.kind === "video" && !playsHere(m)) return externalFrame(ctx, m);
+  if (m.kind === "video") return videoFrame(ctx, m, open ? void 0 : "aparte-media__lb-video");
+  if (open) return imageFrame(ctx, m, open);
+  const box = el("div", { class: "aparte-media__lb-picture", attrs: { "data-loading": "" } }, placeholder("image"));
+  const img = picture(ctx, box, m.src, () => altOf(ctx.config, m, index), "aparte-media__lb-img");
+  img.removeAttribute("loading");
+  box.append(img);
+  return box;
+}
+function tileOf(ctx, m, index, more, open) {
+  const tile = el("button", { class: "aparte-media__tile", attrs: { type: "button", "aria-haspopup": "dialog", "data-kind": m.kind } });
+  tile.append(placeholder(m.kind));
+  const still = m.kind === "image" ? m.poster ?? m.src : m.poster;
+  if (still) tile.append(picture(ctx, tile, still, null, "aparte-media__img"));
+  if (m.kind === "video") {
+    tile.append(el(
+      "span",
+      { class: "aparte-media__play aparte-media__play--sm", attrs: { "aria-hidden": "true" } },
+      glyph(PLAY, "aparte-rich-card__glyph aparte-media__play-glyph")
+    ));
+  }
+  if (m.kind === "audio" && m.title) tile.append(el("span", { class: "aparte-media__tile-title", attrs: { "aria-hidden": "true" }, text: m.title }));
+  if (m.duration !== void 0 && m.kind !== "image") tile.append(durationOf(ctx, m.duration, "aparte-media__duration", true));
+  if (more > 0) {
+    const plus = el("span", { class: "aparte-media__more", attrs: { "aria-hidden": "true" } });
+    ctx.bind(plus, () => `+${formatNumber(ctx.config, more)}`);
+    tile.append(plus);
+  }
+  ctx.bind(tile, () => {
+    const parts = [nameOf(ctx.config, m, index)];
+    if (m.kind !== "image" && (m.title ?? m.alt ?? m.caption)) parts.push(kindWord(ctx.config, m.kind));
+    if (m.duration !== void 0 && m.kind !== "image") parts.push(spokenDuration(ctx.config, m.duration));
+    if (more > 0) parts.push(word(ctx.config, "cardsMediaMore", M.cardsMediaMore, { n: formatNumber(ctx.config, more) }));
+    return parts.join(", ");
+  }, "aria-label");
+  tile.addEventListener("click", () => open(index, tile));
+  return tile;
+}
+function headingOf(ctx, data) {
+  const count = el("span", { class: "aparte-media__count" });
+  ctx.bind(count, () => countLabel(ctx.config, data.items));
+  return el(
+    "div",
+    { class: "aparte-media__heading" },
+    glyph(FRAMES, "aparte-rich-card__glyph aparte-media__line-glyph"),
+    data.title ? el("span", { class: "aparte-media__heading-title", text: data.title }) : null,
+    count
+  );
+}
+let lightboxes = 0;
+function live(ctx, target, compute, attr) {
+  ctx.bind(target, compute, attr);
+  return () => attr ? target.setAttribute(attr, compute()) : target.textContent = compute();
+}
+function lightbox(ctx, items, host) {
+  let dialog = null;
+  let index = 0;
+  let opener = null;
+  let stage;
+  let caption;
+  const refresh = [];
+  const navs = [];
+  const many = items.length > 1;
+  function shut() {
+    if (!dialog) return;
+    if (typeof dialog.close === "function") {
+      dialog.close();
+    } else {
+      dialog.removeAttribute("open");
+      dialog.dispatchEvent(new Event("close"));
+    }
+  }
+  function show(i) {
+    index = Math.max(0, Math.min(items.length - 1, i));
+    const m = items[index];
+    stage.setAttribute("data-kind", m.kind);
+    stage.replaceChildren(stageOf(ctx, m, null, many ? index : void 0));
+    caption.replaceChildren(...captionOf(m, false, "div")?.childNodes ?? []);
+    caption.hidden = !caption.childNodes.length;
+    for (const update of refresh) update();
+    for (const [button, dir] of navs) button.setAttribute("aria-disabled", String(dir < 0 ? index === 0 : index === items.length - 1));
+  }
+  function go(i) {
+    if (i >= 0 && i < items.length && i !== index) show(i);
+  }
+  function navButton(dir) {
+    const button = el("button", {
+      class: `aparte-btn aparte-btn--icon aparte-btn--circle aparte-btn--surface aparte-media__lb-nav aparte-media__lb-nav--${dir < 0 ? "prev" : "next"}`,
+      attrs: { type: "button" }
+    });
+    button.innerHTML = ctx.config.getIcon(dir < 0 ? "prevBranch" : "nextBranch");
+    ctx.bind(button, () => word(ctx.config, dir < 0 ? "cardsPrevious" : "cardsNext", dir < 0 ? KIT_WORDS.cardsPrevious : KIT_WORDS.cardsNext), "aria-label");
+    button.addEventListener("click", () => go(index + dir));
+    navs.push([button, dir]);
+    return button;
+  }
+  function onKey(event) {
+    if (event.target?.closest?.("video, audio")) return;
+    const rtl = typeof getComputedStyle === "function" && getComputedStyle(dialog).direction === "rtl";
+    let to;
+    if (event.key === "ArrowRight" || event.key === "ArrowLeft") to = index + (event.key === "ArrowRight" ? 1 : -1) * (rtl ? -1 : 1);
+    else if (event.key === "Home") to = 0;
+    else if (event.key === "End") to = items.length - 1;
+    else if (event.key === "Escape" && typeof dialog.showModal !== "function") {
+      event.preventDefault();
+      shut();
+      return;
+    }
+    if (to === void 0) return;
+    event.preventDefault();
+    go(to);
+  }
+  function build() {
+    const id = `aparte-media-lightbox-${++lightboxes}`;
+    const title = el("h2", { class: "aparte-dialog__title aparte-media__lb-title", attrs: { id } });
+    refresh.push(live(ctx, title, () => nameOf(ctx.config, items[index], many ? index : void 0)));
+    const heading = el("div", { class: "aparte-media__lb-heading" }, title);
+    if (many) {
+      const counter = el("span", { class: "aparte-media__lb-counter" });
+      refresh.push(live(ctx, counter, () => word(ctx.config, "cardsSlide", KIT_WORDS.cardsSlide, {
+        n: formatNumber(ctx.config, index + 1),
+        total: formatNumber(ctx.config, items.length)
+      })));
+      heading.append(counter);
+    }
+    const close = el("button", { class: "aparte-btn aparte-btn--icon aparte-btn--sm aparte-btn--ghost aparte-dialog__close aparte-media__lb-close", attrs: { type: "button" } });
+    close.innerHTML = ctx.config.getIcon("close");
+    ctx.bind(close, () => word(ctx.config, "cardsMediaClose", M.cardsMediaClose), "aria-label");
+    close.addEventListener("click", shut);
+    stage = el("div", { class: "aparte-media__lb-stage" });
+    caption = el("div", { class: "aparte-media__lb-caption" });
+    const body = el("div", { class: "aparte-media__lb-body" }, stage);
+    if (many) body.append(navButton(-1), navButton(1));
+    const node = el(
+      "dialog",
+      { class: "aparte-dialog aparte-dialog--lg aparte-media__lightbox", attrs: { "aria-labelledby": id } },
+      el("div", { class: "aparte-dialog__header aparte-media__lb-head" }, heading, close),
+      body,
+      caption
+    );
+    node.addEventListener("keydown", onKey);
+    node.addEventListener("close", () => {
+      for (const media of stage.querySelectorAll("video, audio")) if (!media.paused) media.pause();
+      opener?.focus();
+    });
+    return node;
+  }
+  return (i, from) => {
+    if (!dialog) {
+      dialog = build();
+      host().append(dialog);
+    }
+    opener = from;
+    show(i);
+    if (typeof dialog.showModal === "function") {
+      if (!dialog.open) dialog.showModal();
+    } else {
+      dialog.setAttribute("open", "");
+    }
+  };
+}
+function render(data, ctx) {
+  const [first] = data.items;
+  let root;
+  const open = lightbox(ctx, data.items, () => root);
+  if (data.items.length === 1) {
+    root = el(
+      "figure",
+      { class: "aparte-media aparte-media--single", attrs: { "data-kind": first.kind } },
+      stageOf(ctx, first, (from) => open(0, from)),
+      captionOf(first, first.kind !== "audio")
+    );
+    return [root];
+  }
+  if (ctx.variant === "strip") {
+    const slides = data.items.map((m, i) => el(
+      "div",
+      { class: "aparte-media__thumb" },
+      tileOf(ctx, m, i, 0, open),
+      m.title ? el("span", { class: "aparte-media__thumb-title", attrs: { "aria-hidden": "true" }, text: m.title }) : null
+    ));
+    root = el(
+      "div",
+      { class: "aparte-media aparte-media--strip" },
+      headingOf(ctx, data),
+      carousel(ctx, slides, { label: () => data.title ?? countLabel(ctx.config, data.items) })
+    );
+    return [root];
+  }
+  const shown = data.items.slice(0, GALLERY_TILES);
+  const more = data.items.length - shown.length;
+  const grid = el(
+    "ul",
+    { class: "aparte-media__grid", attrs: { "data-count": shown.length } },
+    ...shown.map((m, i) => el("li", { class: "aparte-media__cell" }, tileOf(ctx, m, i, i === shown.length - 1 ? more : 0, open)))
+  );
+  ctx.bind(grid, () => data.title ?? countLabel(ctx.config, data.items), "aria-label");
+  root = el("div", { class: "aparte-media aparte-media--gallery" }, grid, headingOf(ctx, data));
+  return [root];
+}
+function skeleton(partial2, ctx) {
+  const block = (cls, kind = "rect") => el("span", { class: `aparte-skeleton aparte-skeleton--${kind} ${cls}`, attrs: { "aria-hidden": "true" } });
+  const known = partial2?.title ?? partial2?.items?.[0]?.title;
+  if (ctx.variant === "gallery") {
+    return [el(
+      "div",
+      { class: "aparte-media aparte-media--gallery" },
+      el("div", { class: "aparte-media__grid", attrs: { "data-count": 4 } }, ...Array.from({ length: 4 }, () => block("aparte-media__sk-cell"))),
+      el("div", { class: "aparte-media__heading" }, known ? el("span", { class: "aparte-media__heading-title", text: known }) : block("aparte-media__sk-line", "text"))
+    )];
+  }
+  if (ctx.variant === "strip") {
+    return [el(
+      "div",
+      { class: "aparte-media aparte-media--strip" },
+      el("div", { class: "aparte-media__heading" }, known ? el("span", { class: "aparte-media__heading-title", text: known }) : block("aparte-media__sk-line", "text")),
+      el("div", { class: "aparte-media__sk-row" }, ...Array.from({ length: 4 }, () => block("aparte-media__sk-thumb")))
+    )];
+  }
+  return [el(
+    "div",
+    { class: "aparte-media aparte-media--single" },
+    block("aparte-media__sk-frame"),
+    el(
+      "div",
+      { class: "aparte-media__figcaption" },
+      known ? el("div", { class: "aparte-media__title", text: known }) : block("aparte-media__sk-line", "text"),
+      block("aparte-media__sk-line aparte-media__sk-line--short", "text")
+    )
+  )];
+}
+function label(data, ctx) {
+  const items = data?.items ?? [];
+  if (items.length === 1) return nameOf(ctx.config, items[0]);
+  if (items.length > 1) return data.title ?? countLabel(ctx.config, items);
+  return data?.title ?? word(ctx.config, "cardsMediaTitle", M.cardsMediaTitle);
+}
+function fallback(data, ctx) {
+  const lines = data.items.map((m, i) => {
+    const name = nameOf(ctx.config, m, data.items.length > 1 ? i : void 0);
+    const credit = m.credit ? ` — ${m.credit}` : "";
+    const length = m.duration !== void 0 ? ` (${formatDuration(ctx.config, m.duration)})` : "";
+    return `${name}${credit}${length}: ${m.src}`;
+  });
+  return data.title ? `${data.title}:
+${lines.join("\n")}` : lines.join("\n");
+}
+function partial(input) {
+  const title = str(input["prompt"] ?? input["query"] ?? input["q"] ?? input["search"] ?? input["title"]);
+  return title ? { title } : null;
+}
+const mediaCard = defineCard({
+  name: "media",
+  variants: ["single", "gallery", "strip"],
+  styles: mediaStyles,
+  icon: FRAMES,
+  normalize: readMedia,
+  render,
+  skeleton,
+  label,
+  fallback,
+  partial
+});
+function setupMediaCard(options = {}) {
+  return mediaCard.setup(options);
+}
+export {
+  formatDuration,
+  mediaCard,
+  readDuration,
+  readMedia,
+  setupMediaCard
+};
+//# sourceMappingURL=media.js.map