@ox-content/vite-plugin 3.0.0-alpha.17 → 3.0.0-alpha.18

package/dist/reader-chrome.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"reader-chrome.mjs","names":[],"sources":["../src/reader-chrome.ts"],"sourcesContent":["import { importNapiModuleSync } from \"./napi\";\nimport type { ReaderChromeOptions, ResolvedReaderChrome } from \"./types\";\n\nexport type { ReaderChromeOptions, ResolvedReaderChrome };\n\ntype EnabledReaderChrome = Exclude<ResolvedReaderChrome, false>;\n\nexport type ReaderChromeInput = boolean | ReaderChromeOptions | EnabledReaderChrome | undefined;\n\nconst EMPTY_ATTRIBUTES = Object.freeze({}) as Readonly<Record<string, \"\">>;\n\n/**\n * Resolve the public reader-chrome option shape.\n *\n * `true` mirrors `ssg.readerChrome: true`: copy, outbound-link decoration, and\n * back-to-top are enabled. Object fields default on, so `{ copy: false }`\n * disables only the copy button.\n */\nexport function resolveReaderChromeInput(input: ReaderChromeInput = true): ResolvedReaderChrome {\n  if (!input) {\n    return false;\n  }\n  if (input === true) {\n    return { copy: true, externalLinks: true, backToTop: true };\n  }\n  return {\n    copy: input.copy ?? true,\n    externalLinks: input.externalLinks ?? true,\n    backToTop: input.backToTop ?? true,\n  };\n}\n\n/**\n * Apply the same native reader-chrome HTML transform used by the built-in SSG.\n *\n * This rewrites rendered article HTML. It wraps fenced `<pre>` blocks for copy\n * controls and decorates outbound links when enabled. Back-to-top remains a\n * document-shell control, so it is exposed through the asset helpers.\n */\nexport function applyReaderChromeHtml(html: string, input: ReaderChromeInput = true): string {\n  const chrome = resolveReaderChromeInput(input);\n  if (!chrome || (!chrome.copy && !chrome.externalLinks)) {\n    return html;\n  }\n  return importNapiModuleSync().applySsgReaderChromeHtml(html, {\n    copy: chrome.copy,\n    externalLinks: chrome.externalLinks,\n    backToTop: chrome.backToTop,\n  });\n}\n\n/**\n * Root attributes consumed by the browser runtime.\n */\nexport function readerChromeAttributes(\n  input: ReaderChromeInput = true,\n): Readonly<Record<string, \"\">> {\n  const chrome = resolveReaderChromeInput(input);\n  if (!readerChromeIsEnabled(chrome)) {\n    return EMPTY_ATTRIBUTES;\n  }\n\n  return {\n    \"data-ox-reader-chrome\": \"\",\n    ...(chrome.copy ? { \"data-ox-copy\": \"\" as const } : {}),\n    ...(chrome.externalLinks ? { \"data-ox-external-links\": \"\" as const } : {}),\n    ...(chrome.backToTop ? { \"data-ox-back-to-top\": \"\" as const } : {}),\n  };\n}\n\n/**\n * Render the root attributes as a leading-space HTML fragment.\n *\n * Useful in template strings: `<article${renderReaderChromeAttributes()}>`.\n */\nexport function renderReaderChromeAttributes(input: ReaderChromeInput = true): string {\n  return Object.keys(readerChromeAttributes(input))\n    .map((name) => ` ${name}`)\n    .join(\"\");\n}\n\n/**\n * CSS shared by the built-in SSG and custom hosts.\n */\nexport function readerChromeCss(input: ReaderChromeInput = true): string {\n  return readerChromeIsEnabled(resolveReaderChromeInput(input))\n    ? importNapiModuleSync().getSsgReaderChromeCss()\n    : \"\";\n}\n\n/**\n * Auto-initializing script shared by the built-in SSG and custom hosts.\n */\nexport function readerChromeScript(input: ReaderChromeInput = true): string {\n  return readerChromeNeedsJs(resolveReaderChromeInput(input))\n    ? importNapiModuleSync().getSsgReaderChromeScript()\n    : \"\";\n}\n\n/**\n * Inline stylesheet tag for hosts that do not import\n * `@ox-content/vite-plugin/styles/reader-chrome.css`.\n */\nexport function renderReaderChromeStyleTag(input: ReaderChromeInput = true): string {\n  const css = readerChromeCss(input);\n  return css ? `<style data-ox-style=\"reader-chrome\">\\n${css}</style>` : \"\";\n}\n\n/**\n * Inline auto-init script for static hosts that do not bundle\n * `@ox-content/vite-plugin/reader-chrome/client`.\n */\nexport function renderReaderChromeScriptTag(input: ReaderChromeInput = true): string {\n  const js = readerChromeScript(input);\n  return js ? `<script data-ox-script=\"reader-chrome\">\\n${js}</script>` : \"\";\n}\n\nexport function readerChromeIsEnabled(\n  chrome: ResolvedReaderChrome,\n): chrome is Exclude<ResolvedReaderChrome, false> {\n  return Boolean(chrome && (chrome.copy || chrome.externalLinks || chrome.backToTop));\n}\n\nexport function readerChromeNeedsJs(chrome: ResolvedReaderChrome): boolean {\n  return Boolean(chrome && (chrome.copy || chrome.backToTop));\n}\n"],"mappings":";;AASA,MAAM,mBAAmB,OAAO,OAAO,CAAC,CAAC;;;;;;;;AASzC,SAAgB,yBAAyB,QAA2B,MAA4B;CAC9F,IAAI,CAAC,OACH,OAAO;CAET,IAAI,UAAU,MACZ,OAAO;EAAE,MAAM;EAAM,eAAe;EAAM,WAAW;CAAK;CAE5D,OAAO;EACL,MAAM,MAAM,QAAQ;EACpB,eAAe,MAAM,iBAAiB;EACtC,WAAW,MAAM,aAAa;CAChC;AACF;;;;;;;;AASA,SAAgB,sBAAsB,MAAc,QAA2B,MAAc;CAC3F,MAAM,SAAS,yBAAyB,KAAK;CAC7C,IAAI,CAAC,UAAW,CAAC,OAAO,QAAQ,CAAC,OAAO,eACtC,OAAO;CAET,OAAO,qBAAqB,CAAC,CAAC,yBAAyB,MAAM;EAC3D,MAAM,OAAO;EACb,eAAe,OAAO;EACtB,WAAW,OAAO;CACpB,CAAC;AACH;;;;AAKA,SAAgB,uBACd,QAA2B,MACG;CAC9B,MAAM,SAAS,yBAAyB,KAAK;CAC7C,IAAI,CAAC,sBAAsB,MAAM,GAC/B,OAAO;CAGT,OAAO;EACL,yBAAyB;EACzB,GAAI,OAAO,OAAO,EAAE,gBAAgB,GAAY,IAAI,CAAC;EACrD,GAAI,OAAO,gBAAgB,EAAE,0BAA0B,GAAY,IAAI,CAAC;EACxE,GAAI,OAAO,YAAY,EAAE,uBAAuB,GAAY,IAAI,CAAC;CACnE;AACF;;;;;;AAOA,SAAgB,6BAA6B,QAA2B,MAAc;CACpF,OAAO,OAAO,KAAK,uBAAuB,KAAK,CAAC,CAAC,CAC9C,KAAK,SAAS,IAAI,MAAM,CAAC,CACzB,KAAK,EAAE;AACZ;;;;AAKA,SAAgB,gBAAgB,QAA2B,MAAc;CACvE,OAAO,sBAAsB,yBAAyB,KAAK,CAAC,IACxD,qBAAqB,CAAC,CAAC,sBAAsB,IAC7C;AACN;;;;AAKA,SAAgB,mBAAmB,QAA2B,MAAc;CAC1E,OAAO,oBAAoB,yBAAyB,KAAK,CAAC,IACtD,qBAAqB,CAAC,CAAC,yBAAyB,IAChD;AACN;;;;;AAMA,SAAgB,2BAA2B,QAA2B,MAAc;CAClF,MAAM,MAAM,gBAAgB,KAAK;CACjC,OAAO,MAAM,0CAA0C,IAAI,YAAY;AACzE;;;;;AAMA,SAAgB,4BAA4B,QAA2B,MAAc;CACnF,MAAM,KAAK,mBAAmB,KAAK;CACnC,OAAO,KAAK,4CAA4C,GAAG,cAAa;AAC1E;AAEA,SAAgB,sBACd,QACgD;CAChD,OAAO,QAAQ,WAAW,OAAO,QAAQ,OAAO,iBAAiB,OAAO,UAAU;AACpF;AAEA,SAAgB,oBAAoB,QAAuC;CACzE,OAAO,QAAQ,WAAW,OAAO,QAAQ,OAAO,UAAU;AAC5D"}
+{"version":3,"file":"reader-chrome.mjs","names":[],"sources":["../src/reader-chrome.ts"],"sourcesContent":["import { importNapiModuleSync } from \"./napi\";\nimport type { ReaderChromeOptions, ResolvedReaderChrome } from \"./reader-chrome-options\";\n\nexport type { ReaderChromeOptions, ResolvedReaderChrome };\n\ntype EnabledReaderChrome = Exclude<ResolvedReaderChrome, false>;\n\nexport type ReaderChromeInput = boolean | ReaderChromeOptions | EnabledReaderChrome | undefined;\n\nconst EMPTY_ATTRIBUTES = Object.freeze({}) as Readonly<Record<string, \"\">>;\n\n/**\n * Resolve the public reader-chrome option shape.\n *\n * `true` mirrors `ssg.readerChrome: true`: copy, outbound-link decoration, and\n * back-to-top are enabled. Object fields default on, so `{ copy: false }`\n * disables only the copy button.\n */\nexport function resolveReaderChromeInput(input: ReaderChromeInput = true): ResolvedReaderChrome {\n  if (!input) {\n    return false;\n  }\n  if (input === true) {\n    return { copy: true, externalLinks: true, backToTop: true };\n  }\n  return {\n    copy: input.copy ?? true,\n    externalLinks: input.externalLinks ?? true,\n    backToTop: input.backToTop ?? true,\n  };\n}\n\n/**\n * Apply the same native reader-chrome HTML transform used by the built-in SSG.\n *\n * This rewrites rendered article HTML. It wraps fenced `<pre>` blocks for copy\n * controls and decorates outbound links when enabled. Back-to-top remains a\n * document-shell control, so it is exposed through the asset helpers.\n */\nexport function applyReaderChromeHtml(html: string, input: ReaderChromeInput = true): string {\n  const chrome = resolveReaderChromeInput(input);\n  if (!chrome || (!chrome.copy && !chrome.externalLinks)) {\n    return html;\n  }\n  return importNapiModuleSync().applySsgReaderChromeHtml(html, {\n    copy: chrome.copy,\n    externalLinks: chrome.externalLinks,\n    backToTop: chrome.backToTop,\n  });\n}\n\n/**\n * Root attributes consumed by the browser runtime.\n */\nexport function readerChromeAttributes(\n  input: ReaderChromeInput = true,\n): Readonly<Record<string, \"\">> {\n  const chrome = resolveReaderChromeInput(input);\n  if (!readerChromeIsEnabled(chrome)) {\n    return EMPTY_ATTRIBUTES;\n  }\n\n  return {\n    \"data-ox-reader-chrome\": \"\",\n    ...(chrome.copy ? { \"data-ox-copy\": \"\" as const } : {}),\n    ...(chrome.externalLinks ? { \"data-ox-external-links\": \"\" as const } : {}),\n    ...(chrome.backToTop ? { \"data-ox-back-to-top\": \"\" as const } : {}),\n  };\n}\n\n/**\n * Render the root attributes as a leading-space HTML fragment.\n *\n * Useful in template strings: `<article${renderReaderChromeAttributes()}>`.\n */\nexport function renderReaderChromeAttributes(input: ReaderChromeInput = true): string {\n  return Object.keys(readerChromeAttributes(input))\n    .map((name) => ` ${name}`)\n    .join(\"\");\n}\n\n/**\n * CSS shared by the built-in SSG and custom hosts.\n */\nexport function readerChromeCss(input: ReaderChromeInput = true): string {\n  return readerChromeIsEnabled(resolveReaderChromeInput(input))\n    ? importNapiModuleSync().getSsgReaderChromeCss()\n    : \"\";\n}\n\n/**\n * Auto-initializing script shared by the built-in SSG and custom hosts.\n */\nexport function readerChromeScript(input: ReaderChromeInput = true): string {\n  return readerChromeNeedsJs(resolveReaderChromeInput(input))\n    ? importNapiModuleSync().getSsgReaderChromeScript()\n    : \"\";\n}\n\n/**\n * Inline stylesheet tag for hosts that do not import\n * `@ox-content/vite-plugin/styles/reader-chrome.css`.\n */\nexport function renderReaderChromeStyleTag(input: ReaderChromeInput = true): string {\n  const css = readerChromeCss(input);\n  return css ? `<style data-ox-style=\"reader-chrome\">\\n${css}</style>` : \"\";\n}\n\n/**\n * Inline auto-init script for static hosts that do not bundle\n * `@ox-content/vite-plugin/reader-chrome/client`.\n */\nexport function renderReaderChromeScriptTag(input: ReaderChromeInput = true): string {\n  const js = readerChromeScript(input);\n  return js ? `<script data-ox-script=\"reader-chrome\">\\n${js}</script>` : \"\";\n}\n\nexport function readerChromeIsEnabled(\n  chrome: ResolvedReaderChrome,\n): chrome is Exclude<ResolvedReaderChrome, false> {\n  return Boolean(chrome && (chrome.copy || chrome.externalLinks || chrome.backToTop));\n}\n\nexport function readerChromeNeedsJs(chrome: ResolvedReaderChrome): boolean {\n  return Boolean(chrome && (chrome.copy || chrome.backToTop));\n}\n"],"mappings":";;AASA,MAAM,mBAAmB,OAAO,OAAO,CAAC,CAAC;;;;;;;;AASzC,SAAgB,yBAAyB,QAA2B,MAA4B;CAC9F,IAAI,CAAC,OACH,OAAO;CAET,IAAI,UAAU,MACZ,OAAO;EAAE,MAAM;EAAM,eAAe;EAAM,WAAW;CAAK;CAE5D,OAAO;EACL,MAAM,MAAM,QAAQ;EACpB,eAAe,MAAM,iBAAiB;EACtC,WAAW,MAAM,aAAa;CAChC;AACF;;;;;;;;AASA,SAAgB,sBAAsB,MAAc,QAA2B,MAAc;CAC3F,MAAM,SAAS,yBAAyB,KAAK;CAC7C,IAAI,CAAC,UAAW,CAAC,OAAO,QAAQ,CAAC,OAAO,eACtC,OAAO;CAET,OAAO,qBAAqB,CAAC,CAAC,yBAAyB,MAAM;EAC3D,MAAM,OAAO;EACb,eAAe,OAAO;EACtB,WAAW,OAAO;CACpB,CAAC;AACH;;;;AAKA,SAAgB,uBACd,QAA2B,MACG;CAC9B,MAAM,SAAS,yBAAyB,KAAK;CAC7C,IAAI,CAAC,sBAAsB,MAAM,GAC/B,OAAO;CAGT,OAAO;EACL,yBAAyB;EACzB,GAAI,OAAO,OAAO,EAAE,gBAAgB,GAAY,IAAI,CAAC;EACrD,GAAI,OAAO,gBAAgB,EAAE,0BAA0B,GAAY,IAAI,CAAC;EACxE,GAAI,OAAO,YAAY,EAAE,uBAAuB,GAAY,IAAI,CAAC;CACnE;AACF;;;;;;AAOA,SAAgB,6BAA6B,QAA2B,MAAc;CACpF,OAAO,OAAO,KAAK,uBAAuB,KAAK,CAAC,CAAC,CAC9C,KAAK,SAAS,IAAI,MAAM,CAAC,CACzB,KAAK,EAAE;AACZ;;;;AAKA,SAAgB,gBAAgB,QAA2B,MAAc;CACvE,OAAO,sBAAsB,yBAAyB,KAAK,CAAC,IACxD,qBAAqB,CAAC,CAAC,sBAAsB,IAC7C;AACN;;;;AAKA,SAAgB,mBAAmB,QAA2B,MAAc;CAC1E,OAAO,oBAAoB,yBAAyB,KAAK,CAAC,IACtD,qBAAqB,CAAC,CAAC,yBAAyB,IAChD;AACN;;;;;AAMA,SAAgB,2BAA2B,QAA2B,MAAc;CAClF,MAAM,MAAM,gBAAgB,KAAK;CACjC,OAAO,MAAM,0CAA0C,IAAI,YAAY;AACzE;;;;;AAMA,SAAgB,4BAA4B,QAA2B,MAAc;CACnF,MAAM,KAAK,mBAAmB,KAAK;CACnC,OAAO,KAAK,4CAA4C,GAAG,cAAa;AAC1E;AAEA,SAAgB,sBACd,QACgD;CAChD,OAAO,QAAQ,WAAW,OAAO,QAAQ,OAAO,iBAAiB,OAAO,UAAU;AACpF;AAEA,SAAgB,oBAAoB,QAAuC;CACzE,OAAO,QAAQ,WAAW,OAAO,QAAQ,OAAO,UAAU;AAC5D"}

package/dist/styles/all.css

@@ -12,3 +12,4 @@
 @import "./citations.css";
 @import "./not-by-ai.css";
 @import "./reader-chrome.css";
+@import "./theme-transition.css";

package/dist/styles/core.css

@@ -1963,11 +1963,52 @@ a:hover {
   .ox-breadcrumbs-item:not(:last-child)::after {
     margin-inline: 0.25rem;
   }
+  /* The desktop rhythm scaled for a phone: body blocks 0.875rem apart, framed
+   * blocks 1rem, headings still clearing more above than below. The steps keep
+   * the same relationships, just sized for a 360-420px column. */
   .content h1 {
     font-size: 1.5rem;
+    /* 1.08 is a display line-height for a title that never wraps. A mobile
+     * title almost always wraps, and at 24px those lines collide. */
+    line-height: 1.25;
+    letter-spacing: -0.02em;
+    margin-bottom: 0.75rem;
   }
   .content h2 {
-    font-size: 1.2rem;
+    font-size: 1.25rem;
+    margin-top: 2rem;
+    margin-bottom: 0.6rem;
+  }
+  /* h2 was scaled down here and h3 was not, so an h3 rendered larger than the
+   * h2 above it and the section hierarchy read backwards. */
+  .content h3 {
+    font-size: 1.0625rem;
+    margin-top: 1.5rem;
+    margin-bottom: 0.4rem;
+  }
+  .content h2 + h3 {
+    margin-top: 1rem;
+  }
+  .content h4 {
+    font-size: 0.9375rem;
+    margin-top: 1.15rem;
+    margin-bottom: 0.3rem;
+  }
+  .content p {
+    margin-bottom: 0.875rem;
+  }
+  .content ul,
+  .content ol {
+    margin: 0.875rem 0;
+    padding-left: 1.25rem;
+  }
+  .content blockquote,
+  .content table,
+  .content figure,
+  /* The code wrapper is also styled by a sheet concatenated after this one, so
+   * it needs the extra specificity to win. */
+  .content .ox-code {
+    margin-block: 1rem;
   }
   .content code {
     font-size: 0.82em;
@@ -2180,6 +2221,17 @@ a:hover {
   .content h1 {
     font-size: 1.35rem;
   }
+  .content h2 {
+    font-size: 1.15rem;
+    margin-top: 1.75rem;
+  }
+  .content h3 {
+    font-size: 1rem;
+    margin-top: 1.25rem;
+  }
+  .content h4 {
+    font-size: 0.9rem;
+  }
   .content code {
     font-size: 0.8em;
   }

package/dist/styles/reader-chrome.css

@@ -1,5 +1,8 @@
 .ox-code {
-  --ox-copy-reserved-inline-size: 2rem;
+  --ox-copy-reserved-inline-size: max(
+    2rem,
+    calc(var(--ox-copy-control-size, 1.75rem) + var(--ox-copy-inset, 0.5rem) - 0.25rem)
+  );
   position: relative;
   margin: 1.25rem 0;
 }
@@ -17,12 +20,12 @@
 }
 .ox-copy {
   position: absolute;
-  inset-block-start: 0.5rem;
-  inset-inline-end: 0.5rem;
+  inset-block-start: var(--ox-copy-inset, 0.5rem);
+  inset-inline-end: var(--ox-copy-inset, 0.5rem);
   z-index: 1;
   display: grid;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: var(--ox-copy-control-size, 1.75rem);
+  height: var(--ox-copy-control-size, 1.75rem);
   padding: 0;
   place-items: center;
   border: 1px solid transparent;
@@ -41,16 +44,16 @@
   z-index: 2;
   min-width: 0;
   min-height: 0;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: var(--ox-copy-control-size, 1.75rem);
+  height: var(--ox-copy-control-size, 1.75rem);
   padding: 0;
   font: inherit;
   line-height: 1;
 }
 .ox-copy::before {
   content: "";
-  width: 0.8125rem;
-  height: 0.8125rem;
+  width: var(--ox-copy-icon-size, 0.8125rem);
+  height: var(--ox-copy-icon-size, 0.8125rem);
   background-color: currentColor;
   -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='11' height='11' rx='2'/><path d='M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3'/></svg>")
     center / contain no-repeat;

package/dist/styles/theme-transition.css

@@ -0,0 +1,37 @@
+/* Same-document colour-scheme change. Every rule is scoped to an attribute the
+   runtime sets for the length of one theme toggle, so none of it can reach the
+   cross-document `@view-transition` used for MPA navigation — that transition
+   needs the UA cross-fade left alone. */
+
+/* The circle is drawn by clipping one snapshot over the other, so the UA
+   cross-fade has to stop first: two half-opacity snapshots would show the clip
+   through the layer beneath it. */
+:root[data-ox-theme-transition]::view-transition-old(root),
+:root[data-ox-theme-transition]::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+/* Whichever snapshot the circle is drawn on has to sit on top of the other. */
+:root[data-ox-theme-transition="expand"]::view-transition-old(root) {
+  z-index: 1;
+}
+:root[data-ox-theme-transition="expand"]::view-transition-new(root) {
+  z-index: 2;
+}
+:root[data-ox-theme-transition="shrink"]::view-transition-old(root) {
+  z-index: 2;
+}
+:root[data-ox-theme-transition="shrink"]::view-transition-new(root) {
+  z-index: 1;
+}
+
+/* Element-level colour transitions would animate underneath the snapshot and
+   bleed the old palette into the new one. The runtime holds this attribute
+   only while the theme is mutated, and drops it once both snapshots exist. */
+:root[data-ox-theme-transition-suppress],
+:root[data-ox-theme-transition-suppress] *,
+:root[data-ox-theme-transition-suppress] *::before,
+:root[data-ox-theme-transition-suppress] *::after {
+  transition: none !important;
+}

package/dist/styles/twitter-full.css

@@ -149,9 +149,10 @@
   --ox-tweet-verified-gold: rgb(226, 179, 64);
   --ox-tweet-verified-gray: rgb(130, 154, 171);
   --ox-tweet-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.727-8.83L1.254 2.25H8.08l4.257 5.622L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
-  --ox-tweet-icon-like: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12z'/%3E%3C/svg%3E");
-  --ox-tweet-icon-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81C17.04 14.42 18.25 12.37 18.25 10.14c0-3.39-2.744-6.13-6.129-6.13H9.756z'/%3E%3C/svg%3E");
-  --ox-tweet-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 7.75A2.75 2.75 0 0 1 9.75 5h8.5A2.75 2.75 0 0 1 21 7.75v8.5A2.75 2.75 0 0 1 18.25 19h-8.5A2.75 2.75 0 0 1 7 16.25v-8.5zM9.75 7A.75.75 0 0 0 9 7.75v8.5c0 .41.34.75.75.75h8.5c.41 0 .75-.34.75-.75v-8.5a.75.75 0 0 0-.75-.75h-8.5zM3 4.75A2.75 2.75 0 0 1 5.75 2h8.5a1 1 0 1 1 0 2h-8.5a.75.75 0 0 0-.75.75v8.5a1 1 0 1 1-2 0v-8.5z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-like: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.36 5.64c-1.95-1.96-5.11-1.96-7.07 0L9.88 7.05 8.46 5.64l1.42-1.42c2.73-2.73 7.16-2.73 9.9 0 2.73 2.74 2.73 7.17 0 9.9l-1.42 1.42-1.41-1.42 1.41-1.41c1.96-1.96 1.96-5.12 0-7.07zm-2.12 3.53l-7.07 7.07-1.41-1.41 7.07-7.07 1.41 1.41zm-12.02.71l1.42-1.42 1.41 1.42-1.41 1.41c-1.96 1.96-1.96 5.12 0 7.07 1.95 1.96 5.11 1.96 7.07 0l1.41-1.41 1.42 1.41-1.42 1.42c-2.73 2.73-7.16 2.73-9.9 0-2.73-2.74-2.73-7.17 0-9.9z'/%3E%3C/svg%3E");
+  --ox-tweet-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.64 18.952l-5.55-4.861 1.317-1.504 3.951 3.459 8.459-10.948L19.4 6.32 9.64 18.952z'/%3E%3C/svg%3E");
   --ox-tweet-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.5 8.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5S11.17 7 12 7s1.5.67 1.5 1.5zM13 17v-5h-2v5h2zm-1 5.25c5.66 0 10.25-4.59 10.25-10.25S17.66 1.75 12 1.75 1.75 6.34 1.75 12 6.34 22.25 12 22.25zM20.25 12c0 4.56-3.69 8.25-8.25 8.25S3.75 16.56 3.75 12 7.44 3.75 12 3.75s8.25 3.69 8.25 8.25z'/%3E%3C/svg%3E");
   --ox-tweet-icon-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.34 2.19c-1.4-.46-2.91-.2-3.91.81s-1.27 2.52-.81 3.91c-1.31.67-2.19 1.91-2.19 3.34s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.27 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.34-2.19c1.4.46 2.91.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z'/%3E%3C/svg%3E");
   box-sizing: border-box;
@@ -316,6 +317,11 @@
   mask-image: var(--ox-tweet-icon-copy);
 }
 
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] .ox-tweet__icon--copy {
+  -webkit-mask-image: var(--ox-tweet-icon-check);
+  mask-image: var(--ox-tweet-icon-check);
+}
+
 .ox-tweet--full .ox-tweet__icon--info {
   -webkit-mask-image: var(--ox-tweet-icon-info);
   mask-image: var(--ox-tweet-icon-info);
@@ -535,6 +541,18 @@
   display: none;
 }
 
+.ox-tweet--full .ox-tweet__copy-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] .ox-tweet__copy-text {
   display: none;
 }
@@ -545,7 +563,7 @@
 
 .ox-tweet--full .ox-tweet__replies {
   padding: 0.25rem 0;
-  margin: 0.5rem 0 0;
+  margin: 0;
 }
 
 .ox-tweet--full .ox-tweet__replies-link {

package/dist/theme-transition-client.cjs

@@ -0,0 +1,161 @@
+// Generated from crates/ox_content_ssg/src/html/theme_transition_runtime.js.
+// Run npm/vite-plugin-ox-content/scripts/build-theme-transition-client.mjs.
+
+"use strict";
+// Circular reveal for a same-document colour-scheme change.
+//
+// Prior art: @hooray's VitePress implementation, by way of @ryoppippi's
+// svelte-fancy-darkmode, which this is a framework-neutral port of.
+//
+// This wraps a *same-document* theme mutation. It is unrelated to the
+// cross-document `@view-transition` used for MPA navigation, and the CSS it
+// depends on is scoped to `data-ox-theme-transition` so the two lifecycles
+// cannot reach each other's snapshots.
+
+const OX_THEME_TRANSITION_ATTR = "data-ox-theme-transition";
+const OX_THEME_TRANSITION_SUPPRESS_ATTR = "data-ox-theme-transition-suppress";
+
+let oxThemeTransitionCurrent = null;
+
+function oxThemeTransitionRoot() {
+  return typeof document === "undefined" ? null : document.documentElement;
+}
+
+function oxThemeTransitionReducedMotion() {
+  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+function oxThemeTransitionSupported(root) {
+  return Boolean(
+    root &&
+    typeof document !== "undefined" &&
+    typeof document.startViewTransition === "function" &&
+    typeof root.animate === "function",
+  );
+}
+
+// A keyboard or programmatic activation still produces a click event, but with
+// no meaningful coordinates: `detail` is 0 and clientX/clientY report 0. Only
+// a real pointer press is trusted, so the reveal never starts from the corner
+// of the screen when someone tabs to the button.
+function oxThemeTransitionOrigin(event) {
+  const viewportCentre = {
+    x: (typeof innerWidth === "number" ? innerWidth : 0) / 2,
+    y: (typeof innerHeight === "number" ? innerHeight : 0) / 2,
+  };
+  if (!event) return viewportCentre;
+
+  const fromPointer =
+    typeof event.clientX === "number" &&
+    typeof event.clientY === "number" &&
+    (event.detail > 0 || (typeof event.pointerType === "string" && event.pointerType !== ""));
+  if (fromPointer) return { x: event.clientX, y: event.clientY };
+
+  const target = event.currentTarget ?? event.target;
+  if (target && typeof target.getBoundingClientRect === "function") {
+    const rect = target.getBoundingClientRect();
+    if (rect.width > 0 || rect.height > 0) {
+      return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    }
+  }
+  return viewportCentre;
+}
+
+// The circle has to reach whichever viewport corner is furthest away, or the
+// old theme stays visible in one corner when the animation ends.
+function oxThemeTransitionRadius(origin) {
+  const width = typeof innerWidth === "number" ? innerWidth : 0;
+  const height = typeof innerHeight === "number" ? innerHeight : 0;
+  return Math.hypot(Math.max(origin.x, width - origin.x), Math.max(origin.y, height - origin.y));
+}
+
+// Element-level colour transitions would otherwise animate underneath the
+// snapshot and bleed the old palette into the new one. They are suppressed
+// only while the mutation happens, and restored as soon as both snapshots
+// have been captured.
+function oxThemeTransitionSuppress(root) {
+  root.setAttribute(OX_THEME_TRANSITION_SUPPRESS_ATTR, "");
+  return () => {
+    // Reading a layout property flushes the suppressed styles before they are
+    // allowed to animate again.
+    void root.offsetHeight;
+    root.removeAttribute(OX_THEME_TRANSITION_SUPPRESS_ATTR);
+  };
+}
+
+// eslint-disable-next-line no-unused-vars
+function applyThemeTransition(options) {
+  const settings = options ?? {};
+  const apply = settings.apply;
+  if (typeof apply !== "function") return Promise.resolve();
+
+  const root = oxThemeTransitionRoot();
+  if (!oxThemeTransitionSupported(root) || oxThemeTransitionReducedMotion()) {
+    apply();
+    return Promise.resolve();
+  }
+
+  // A second toggle while one is still running would capture a half-animated
+  // snapshot. Settle the running one first; its cleanup is synchronous.
+  if (oxThemeTransitionCurrent) {
+    const running = oxThemeTransitionCurrent;
+    oxThemeTransitionCurrent = null;
+    if (typeof running.skipTransition === "function") running.skipTransition();
+  }
+
+  // Going dark expands the incoming snapshot over the outgoing one; going
+  // light shrinks the outgoing snapshot away to reveal the incoming one
+  // underneath. Either way the circle grows out of, or collapses into, the
+  // point the reader activated.
+  const expanding = settings.nextTheme !== "light";
+  const origin = oxThemeTransitionOrigin(settings.event);
+  const radius = oxThemeTransitionRadius(origin);
+  const duration = typeof settings.duration === "number" ? settings.duration : 420;
+  const easing = typeof settings.easing === "string" ? settings.easing : "ease-in-out";
+
+  root.setAttribute(OX_THEME_TRANSITION_ATTR, expanding ? "expand" : "shrink");
+
+  let restore = () => {};
+  const transition = document.startViewTransition(() => {
+    restore = oxThemeTransitionSuppress(root);
+    apply();
+  });
+  oxThemeTransitionCurrent = transition;
+
+  const clipFrom = `circle(0px at ${origin.x}px ${origin.y}px)`;
+  const clipTo = `circle(${radius}px at ${origin.x}px ${origin.y}px)`;
+
+  transition.ready.then(
+    () => {
+      restore();
+      root.animate(
+        { clipPath: expanding ? [clipFrom, clipTo] : [clipTo, clipFrom] },
+        {
+          duration,
+          easing,
+          pseudoElement: expanding ? "::view-transition-new(root)" : "::view-transition-old(root)",
+        },
+      );
+    },
+    () => {
+      // A skipped or unsupported transition still has to hand the suppressed
+      // styles back.
+      restore();
+    },
+  );
+
+  const settled = () => {
+    restore();
+    // A rapid second toggle skips this one, which lands here *after* the newer
+    // transition has already claimed the attribute. Only the transition still
+    // holding the slot is allowed to clear it.
+    if (oxThemeTransitionCurrent !== transition) return;
+    oxThemeTransitionCurrent = null;
+    root.removeAttribute(OX_THEME_TRANSITION_ATTR);
+  };
+  // `finished` rejects when a transition is skipped, which is a normal outcome
+  // here — both arms clean up and neither leaves an unhandled rejection.
+  return transition.finished.then(settled, settled);
+}
+
+module.exports = { applyThemeTransition };

package/dist/theme-transition-client.d.cts

@@ -0,0 +1,21 @@
+export interface ThemeTransitionOptions {
+  /** Activation event. Supplies the reveal origin; omit for the viewport centre. */
+  event?: Event;
+  /** Theme being switched to. `"light"` collapses the circle, anything else grows it. */
+  nextTheme?: string;
+  /** Synchronous theme mutation, run while both snapshots are captured. */
+  apply: () => void;
+  /** Reveal duration in milliseconds. Defaults to 420. */
+  duration?: number;
+  /** Reveal easing. Defaults to `"ease-in-out"`. */
+  easing?: string;
+}
+
+/**
+ * Runs `apply` inside a circular view transition, or immediately when View
+ * Transitions are unavailable or the reader asked for reduced motion.
+ *
+ * Resolves once the transition has settled. A skipped transition resolves too,
+ * so the returned promise never rejects.
+ */
+export declare function applyThemeTransition(options: ThemeTransitionOptions): Promise<void>;

package/dist/theme-transition-client.d.mts

@@ -0,0 +1,21 @@
+export interface ThemeTransitionOptions {
+  /** Activation event. Supplies the reveal origin; omit for the viewport centre. */
+  event?: Event;
+  /** Theme being switched to. `"light"` collapses the circle, anything else grows it. */
+  nextTheme?: string;
+  /** Synchronous theme mutation, run while both snapshots are captured. */
+  apply: () => void;
+  /** Reveal duration in milliseconds. Defaults to 420. */
+  duration?: number;
+  /** Reveal easing. Defaults to `"ease-in-out"`. */
+  easing?: string;
+}
+
+/**
+ * Runs `apply` inside a circular view transition, or immediately when View
+ * Transitions are unavailable or the reader asked for reduced motion.
+ *
+ * Resolves once the transition has settled. A skipped transition resolves too,
+ * so the returned promise never rejects.
+ */
+export declare function applyThemeTransition(options: ThemeTransitionOptions): Promise<void>;

package/dist/theme-transition-client.mjs

@@ -0,0 +1,160 @@
+// Generated from crates/ox_content_ssg/src/html/theme_transition_runtime.js.
+// Run npm/vite-plugin-ox-content/scripts/build-theme-transition-client.mjs.
+
+// Circular reveal for a same-document colour-scheme change.
+//
+// Prior art: @hooray's VitePress implementation, by way of @ryoppippi's
+// svelte-fancy-darkmode, which this is a framework-neutral port of.
+//
+// This wraps a *same-document* theme mutation. It is unrelated to the
+// cross-document `@view-transition` used for MPA navigation, and the CSS it
+// depends on is scoped to `data-ox-theme-transition` so the two lifecycles
+// cannot reach each other's snapshots.
+
+const OX_THEME_TRANSITION_ATTR = "data-ox-theme-transition";
+const OX_THEME_TRANSITION_SUPPRESS_ATTR = "data-ox-theme-transition-suppress";
+
+let oxThemeTransitionCurrent = null;
+
+function oxThemeTransitionRoot() {
+  return typeof document === "undefined" ? null : document.documentElement;
+}
+
+function oxThemeTransitionReducedMotion() {
+  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+function oxThemeTransitionSupported(root) {
+  return Boolean(
+    root &&
+    typeof document !== "undefined" &&
+    typeof document.startViewTransition === "function" &&
+    typeof root.animate === "function",
+  );
+}
+
+// A keyboard or programmatic activation still produces a click event, but with
+// no meaningful coordinates: `detail` is 0 and clientX/clientY report 0. Only
+// a real pointer press is trusted, so the reveal never starts from the corner
+// of the screen when someone tabs to the button.
+function oxThemeTransitionOrigin(event) {
+  const viewportCentre = {
+    x: (typeof innerWidth === "number" ? innerWidth : 0) / 2,
+    y: (typeof innerHeight === "number" ? innerHeight : 0) / 2,
+  };
+  if (!event) return viewportCentre;
+
+  const fromPointer =
+    typeof event.clientX === "number" &&
+    typeof event.clientY === "number" &&
+    (event.detail > 0 || (typeof event.pointerType === "string" && event.pointerType !== ""));
+  if (fromPointer) return { x: event.clientX, y: event.clientY };
+
+  const target = event.currentTarget ?? event.target;
+  if (target && typeof target.getBoundingClientRect === "function") {
+    const rect = target.getBoundingClientRect();
+    if (rect.width > 0 || rect.height > 0) {
+      return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    }
+  }
+  return viewportCentre;
+}
+
+// The circle has to reach whichever viewport corner is furthest away, or the
+// old theme stays visible in one corner when the animation ends.
+function oxThemeTransitionRadius(origin) {
+  const width = typeof innerWidth === "number" ? innerWidth : 0;
+  const height = typeof innerHeight === "number" ? innerHeight : 0;
+  return Math.hypot(Math.max(origin.x, width - origin.x), Math.max(origin.y, height - origin.y));
+}
+
+// Element-level colour transitions would otherwise animate underneath the
+// snapshot and bleed the old palette into the new one. They are suppressed
+// only while the mutation happens, and restored as soon as both snapshots
+// have been captured.
+function oxThemeTransitionSuppress(root) {
+  root.setAttribute(OX_THEME_TRANSITION_SUPPRESS_ATTR, "");
+  return () => {
+    // Reading a layout property flushes the suppressed styles before they are
+    // allowed to animate again.
+    void root.offsetHeight;
+    root.removeAttribute(OX_THEME_TRANSITION_SUPPRESS_ATTR);
+  };
+}
+
+// eslint-disable-next-line no-unused-vars
+function applyThemeTransition(options) {
+  const settings = options ?? {};
+  const apply = settings.apply;
+  if (typeof apply !== "function") return Promise.resolve();
+
+  const root = oxThemeTransitionRoot();
+  if (!oxThemeTransitionSupported(root) || oxThemeTransitionReducedMotion()) {
+    apply();
+    return Promise.resolve();
+  }
+
+  // A second toggle while one is still running would capture a half-animated
+  // snapshot. Settle the running one first; its cleanup is synchronous.
+  if (oxThemeTransitionCurrent) {
+    const running = oxThemeTransitionCurrent;
+    oxThemeTransitionCurrent = null;
+    if (typeof running.skipTransition === "function") running.skipTransition();
+  }
+
+  // Going dark expands the incoming snapshot over the outgoing one; going
+  // light shrinks the outgoing snapshot away to reveal the incoming one
+  // underneath. Either way the circle grows out of, or collapses into, the
+  // point the reader activated.
+  const expanding = settings.nextTheme !== "light";
+  const origin = oxThemeTransitionOrigin(settings.event);
+  const radius = oxThemeTransitionRadius(origin);
+  const duration = typeof settings.duration === "number" ? settings.duration : 420;
+  const easing = typeof settings.easing === "string" ? settings.easing : "ease-in-out";
+
+  root.setAttribute(OX_THEME_TRANSITION_ATTR, expanding ? "expand" : "shrink");
+
+  let restore = () => {};
+  const transition = document.startViewTransition(() => {
+    restore = oxThemeTransitionSuppress(root);
+    apply();
+  });
+  oxThemeTransitionCurrent = transition;
+
+  const clipFrom = `circle(0px at ${origin.x}px ${origin.y}px)`;
+  const clipTo = `circle(${radius}px at ${origin.x}px ${origin.y}px)`;
+
+  transition.ready.then(
+    () => {
+      restore();
+      root.animate(
+        { clipPath: expanding ? [clipFrom, clipTo] : [clipTo, clipFrom] },
+        {
+          duration,
+          easing,
+          pseudoElement: expanding ? "::view-transition-new(root)" : "::view-transition-old(root)",
+        },
+      );
+    },
+    () => {
+      // A skipped or unsupported transition still has to hand the suppressed
+      // styles back.
+      restore();
+    },
+  );
+
+  const settled = () => {
+    restore();
+    // A rapid second toggle skips this one, which lands here *after* the newer
+    // transition has already claimed the attribute. Only the transition still
+    // holding the slot is allowed to clear it.
+    if (oxThemeTransitionCurrent !== transition) return;
+    oxThemeTransitionCurrent = null;
+    root.removeAttribute(OX_THEME_TRANSITION_ATTR);
+  };
+  // `finished` rejects when a transition is skipped, which is a normal outcome
+  // here — both arms clean up and neither leaves an unhandled rejection.
+  return transition.finished.then(settled, settled);
+}
+
+export { applyThemeTransition };