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

package/dist/reader-chrome.d.mts

@@ -0,0 +1,103 @@
+/**
+ * Per-control flags for `ssg.readerChrome`.
+ *
+ * Omitted fields stay on when the feature itself is enabled.
+ */
+export interface ReaderChromeOptions {
+  /**
+   * Copy button on fenced code blocks. The clipboard is read in the browser,
+   * never at build time.
+   *
+   * @default true
+   */
+  copy?: boolean;
+
+  /**
+   * Icon and `rel="noopener noreferrer"` on outbound `http(s)` links.
+   * Relative, hash, and same-document links are left alone.
+   *
+   * @default true
+   */
+  externalLinks?: boolean;
+
+  /**
+   * Back-to-top control that appears after the page is scrolled.
+   *
+   * @default true
+   */
+  backToTop?: boolean;
+}
+
+/**
+ * Resolved reader chrome. `false` means no extra markup or JS.
+ */
+export type ResolvedReaderChrome =
+  | false
+  | {
+      copy: boolean;
+      externalLinks: boolean;
+      backToTop: boolean;
+    };
+
+type EnabledReaderChrome = Exclude<ResolvedReaderChrome, false>;
+
+export type ReaderChromeInput =
+  | boolean
+  | ReaderChromeOptions
+  | EnabledReaderChrome
+  | undefined;
+
+/**
+ * Resolve the public reader-chrome option shape.
+ */
+export declare function resolveReaderChromeInput(
+  input?: ReaderChromeInput,
+): ResolvedReaderChrome;
+
+/**
+ * Apply the same native reader-chrome HTML transform used by the built-in SSG.
+ */
+export declare function applyReaderChromeHtml(
+  html: string,
+  input?: ReaderChromeInput,
+): string;
+
+/**
+ * Root attributes consumed by the browser runtime.
+ */
+export declare function readerChromeAttributes(
+  input?: ReaderChromeInput,
+): Readonly<Record<string, "">>;
+
+/**
+ * Render the root attributes as a leading-space HTML fragment.
+ */
+export declare function renderReaderChromeAttributes(input?: ReaderChromeInput): string;
+
+/**
+ * CSS shared by the built-in SSG and custom hosts.
+ */
+export declare function readerChromeCss(input?: ReaderChromeInput): string;
+
+/**
+ * Auto-initializing script shared by the built-in SSG and custom hosts.
+ */
+export declare function readerChromeScript(input?: ReaderChromeInput): string;
+
+/**
+ * Inline stylesheet tag for hosts that do not import
+ * `@ox-content/vite-plugin/styles/reader-chrome.css`.
+ */
+export declare function renderReaderChromeStyleTag(input?: ReaderChromeInput): string;
+
+/**
+ * Inline auto-init script for static hosts that do not bundle
+ * `@ox-content/vite-plugin/reader-chrome/client`.
+ */
+export declare function renderReaderChromeScriptTag(input?: ReaderChromeInput): string;
+
+export declare function readerChromeIsEnabled(
+  chrome: ResolvedReaderChrome,
+): chrome is Exclude<ResolvedReaderChrome, false>;
+
+export declare function readerChromeNeedsJs(chrome: ResolvedReaderChrome): boolean;

package/dist/reader-chrome.mjs

@@ -0,0 +1,98 @@
+import { n as importNapiModuleSync } from "./napi.mjs";
+//#region src/reader-chrome.ts
+const EMPTY_ATTRIBUTES = Object.freeze({});
+/**
+* Resolve the public reader-chrome option shape.
+*
+* `true` mirrors `ssg.readerChrome: true`: copy, outbound-link decoration, and
+* back-to-top are enabled. Object fields default on, so `{ copy: false }`
+* disables only the copy button.
+*/
+function resolveReaderChromeInput(input = true) {
+	if (!input) return false;
+	if (input === true) return {
+		copy: true,
+		externalLinks: true,
+		backToTop: true
+	};
+	return {
+		copy: input.copy ?? true,
+		externalLinks: input.externalLinks ?? true,
+		backToTop: input.backToTop ?? true
+	};
+}
+/**
+* Apply the same native reader-chrome HTML transform used by the built-in SSG.
+*
+* This rewrites rendered article HTML. It wraps fenced `<pre>` blocks for copy
+* controls and decorates outbound links when enabled. Back-to-top remains a
+* document-shell control, so it is exposed through the asset helpers.
+*/
+function applyReaderChromeHtml(html, input = true) {
+	const chrome = resolveReaderChromeInput(input);
+	if (!chrome || !chrome.copy && !chrome.externalLinks) return html;
+	return importNapiModuleSync().applySsgReaderChromeHtml(html, {
+		copy: chrome.copy,
+		externalLinks: chrome.externalLinks,
+		backToTop: chrome.backToTop
+	});
+}
+/**
+* Root attributes consumed by the browser runtime.
+*/
+function readerChromeAttributes(input = true) {
+	const chrome = resolveReaderChromeInput(input);
+	if (!readerChromeIsEnabled(chrome)) return EMPTY_ATTRIBUTES;
+	return {
+		"data-ox-reader-chrome": "",
+		...chrome.copy ? { "data-ox-copy": "" } : {},
+		...chrome.externalLinks ? { "data-ox-external-links": "" } : {},
+		...chrome.backToTop ? { "data-ox-back-to-top": "" } : {}
+	};
+}
+/**
+* Render the root attributes as a leading-space HTML fragment.
+*
+* Useful in template strings: `<article${renderReaderChromeAttributes()}>`.
+*/
+function renderReaderChromeAttributes(input = true) {
+	return Object.keys(readerChromeAttributes(input)).map((name) => ` ${name}`).join("");
+}
+/**
+* CSS shared by the built-in SSG and custom hosts.
+*/
+function readerChromeCss(input = true) {
+	return readerChromeIsEnabled(resolveReaderChromeInput(input)) ? importNapiModuleSync().getSsgReaderChromeCss() : "";
+}
+/**
+* Auto-initializing script shared by the built-in SSG and custom hosts.
+*/
+function readerChromeScript(input = true) {
+	return readerChromeNeedsJs(resolveReaderChromeInput(input)) ? importNapiModuleSync().getSsgReaderChromeScript() : "";
+}
+/**
+* Inline stylesheet tag for hosts that do not import
+* `@ox-content/vite-plugin/styles/reader-chrome.css`.
+*/
+function renderReaderChromeStyleTag(input = true) {
+	const css = readerChromeCss(input);
+	return css ? `<style data-ox-style="reader-chrome">\n${css}</style>` : "";
+}
+/**
+* Inline auto-init script for static hosts that do not bundle
+* `@ox-content/vite-plugin/reader-chrome/client`.
+*/
+function renderReaderChromeScriptTag(input = true) {
+	const js = readerChromeScript(input);
+	return js ? `<script data-ox-script="reader-chrome">\n${js}<\/script>` : "";
+}
+function readerChromeIsEnabled(chrome) {
+	return Boolean(chrome && (chrome.copy || chrome.externalLinks || chrome.backToTop));
+}
+function readerChromeNeedsJs(chrome) {
+	return Boolean(chrome && (chrome.copy || chrome.backToTop));
+}
+//#endregion
+export { applyReaderChromeHtml, readerChromeAttributes, readerChromeCss, readerChromeIsEnabled, readerChromeNeedsJs, readerChromeScript, renderReaderChromeAttributes, renderReaderChromeScriptTag, renderReaderChromeStyleTag, resolveReaderChromeInput };
+
+//# sourceMappingURL=reader-chrome.mjs.map

package/dist/reader-chrome.mjs.map

@@ -0,0 +1 @@
+{"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

@@ -11,3 +11,5 @@
 @import "./graphviz.css";
 @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

@@ -0,0 +1,163 @@
+.ox-code {
+  --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;
+}
+.content .ox-code > pre,
+.content .ox-code:has(ox-code-play) pre {
+  margin: 0;
+  padding-inline-end: calc(var(--ox-copy-reserved-inline-size) + 0.45rem);
+}
+.ox-code:has(> ox-code-play) .ox-code-play__toolbar {
+  padding-inline-end: calc(var(--ox-copy-reserved-inline-size) + 0.65rem);
+}
+.content .ox-code > pre[data-code-title]::before {
+  margin-inline-end: calc(-1 * (var(--ox-copy-reserved-inline-size) + 0.45rem));
+  padding-inline-end: calc(var(--ox-copy-reserved-inline-size) + 0.45rem);
+}
+.ox-copy {
+  position: absolute;
+  inset-block-start: var(--ox-copy-inset, 0.5rem);
+  inset-inline-end: var(--ox-copy-inset, 0.5rem);
+  z-index: 1;
+  display: grid;
+  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;
+  border-radius: 4px;
+  background: transparent;
+  color: color-mix(in srgb, var(--octc-color-code-text) 70%, transparent);
+  cursor: pointer;
+  opacity: 0.68;
+  transition:
+    opacity 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+.ox-code > .ox-copy {
+  z-index: 2;
+  min-width: 0;
+  min-height: 0;
+  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: 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;
+  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;
+}
+.ox-copy:hover,
+.ox-copy:focus-visible {
+  color: var(--octc-color-code-text);
+  border-color: color-mix(
+    in srgb,
+    var(--octc-color-primary) 42%,
+    var(--octc-color-code-frame-border)
+  );
+  background: color-mix(in srgb, var(--octc-color-code-bg) 82%, var(--octc-color-bg) 18%);
+  opacity: 0.96;
+}
+.ox-copy[data-copy-state="copied"] {
+  color: var(--octc-color-primary);
+  border-color: color-mix(in srgb, var(--octc-color-primary) 36%, transparent);
+  background: color-mix(in srgb, var(--octc-color-code-bg) 86%, var(--octc-color-bg) 14%);
+  opacity: 0.96;
+}
+.ox-copy[data-copy-state="copied"]::before {
+  -webkit-mask-image: 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.5' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 4 4L19 6'/></svg>");
+  mask-image: 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.5' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 4 4L19 6'/></svg>");
+}
+.ox-copy[data-copy-state="failed"] {
+  color: var(--octc-color-code-line-error-border);
+}
+.ox-copy-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+@media (any-hover: hover) and (any-pointer: fine) {
+  .ox-copy {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .ox-code:hover > .ox-copy,
+  .ox-code:focus-within > .ox-copy {
+    opacity: 0.86;
+    pointer-events: auto;
+  }
+}
+.ox-external {
+  text-decoration-thickness: from-font;
+}
+.ox-external-icon {
+  display: inline-block;
+  width: 0.7em;
+  height: 0.7em;
+  margin-inline-start: 0.2em;
+  vertical-align: middle;
+  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'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>")
+    center / contain no-repeat;
+  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'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>")
+    center / contain no-repeat;
+}
+.content .ox-magic-link .ox-external-icon {
+  width: 0.62em;
+  height: 0.62em;
+  margin-inline-start: 0.02em;
+  opacity: 0.72;
+  flex: 0 0 auto;
+}
+.ox-back-to-top {
+  position: fixed;
+  right: 1.25rem;
+  bottom: 5.5rem;
+  z-index: 8;
+  padding: 0.45rem 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--octc-color-border) 80%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--octc-color-bg) 92%, transparent);
+  color: var(--octc-color-text);
+  font: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+.ox-back-to-top[hidden] {
+  display: none;
+}
+.ox-back-to-top:hover,
+.ox-back-to-top:focus-visible {
+  color: var(--octc-color-primary);
+  border-color: var(--octc-color-primary);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ox-reader-chrome--reduced-motion .ox-back-to-top,
+  .ox-back-to-top,
+  .ox-copy {
+    transition: none;
+  }
+}

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

@@ -25,6 +25,10 @@
   margin: var(--ox-tweet-container-margin);
 }
 
+.ox-tweet.ox-tweet--full * {
+  box-sizing: border-box;
+}
+
 .ox-tweet.ox-tweet--full :where(img, video, figure, picture, svg) {
   margin: 0;
 }
@@ -39,8 +43,13 @@
 }
 
 .ox-tweet.ox-tweet--full :where(a) {
+  padding: 0;
+  font-size: inherit;
   font-weight: inherit;
+  line-height: inherit;
   text-decoration: none;
+  background: transparent;
+  border: 0;
 }
 
 .ox-tweet.ox-tweet--full :where(code, pre, kbd, samp) {
@@ -114,7 +123,14 @@
   --ox-tweet-body-line-height: 1.5rem;
   --ox-tweet-quoted-body-font-size: 0.938rem;
   --ox-tweet-info-font-size: 0.9375rem;
-  --ox-tweet-actions-font-size: 0.875rem;
+  --ox-tweet-actions-font-size: 1rem;
+  --ox-tweet-actions-line-height: 1.25rem;
+  --ox-tweet-actions-font-weight: 700;
+  --ox-tweet-actions-icon-size: 1.25em;
+  --ox-tweet-actions-icon-wrapper-size: 2rem;
+  --ox-tweet-replies-font-size: 0.875rem;
+  --ox-tweet-replies-line-height: 1rem;
+  --ox-tweet-replies-font-weight: 700;
   --ox-tweet-icon-size: 1.25em;
   --ox-tweet-border: 1px solid rgb(207, 217, 222);
   --ox-tweet-font-color: rgb(15, 20, 25);
@@ -133,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;
@@ -300,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);
@@ -453,22 +475,50 @@
 .ox-tweet--full .ox-tweet__action {
   display: flex;
   align-items: center;
-  margin-right: 1.25rem;
+  min-width: var(--ox-tweet-actions-icon-wrapper-size);
+  min-height: var(--ox-tweet-actions-icon-wrapper-size);
+  padding: 0;
+  margin: 0 1.25rem 0 0;
   font-size: var(--ox-tweet-actions-font-size);
-  font-weight: 700;
-  line-height: 1rem;
+  font-weight: var(--ox-tweet-actions-font-weight);
+  line-height: var(--ox-tweet-actions-line-height);
+  background: transparent;
+  border: 0;
+}
+
+.ox-tweet--full .ox-tweet__action-icon {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 var(--ox-tweet-actions-icon-wrapper-size);
+  align-items: center;
+  justify-content: center;
+  width: var(--ox-tweet-actions-icon-wrapper-size);
+  height: var(--ox-tweet-actions-icon-wrapper-size);
+  margin: 0 0.25rem 0 -0.25rem;
+  border-radius: 9999px;
 }
 
 .ox-tweet--full .ox-tweet__action .ox-tweet__icon {
-  margin-right: 0.25rem;
+  width: var(--ox-tweet-actions-icon-size);
+  height: var(--ox-tweet-actions-icon-size);
 }
 
-.ox-tweet--full .ox-tweet__action--like:hover {
+.ox-tweet--full .ox-tweet__action--like:hover .ox-tweet__action-text {
   color: var(--ox-tweet-color-red);
+  text-decoration-line: underline;
 }
 
-.ox-tweet--full .ox-tweet__action--reply:hover {
+.ox-tweet--full .ox-tweet__action--like:hover .ox-tweet__action-icon {
+  background-color: var(--ox-tweet-color-red-hover);
+}
+
+.ox-tweet--full .ox-tweet__action--reply:hover .ox-tweet__action-text {
   color: var(--ox-tweet-color-blue-text);
+  text-decoration-line: underline;
+}
+
+.ox-tweet--full .ox-tweet__action--reply:hover .ox-tweet__action-icon {
+  background-color: var(--ox-tweet-color-blue-hover);
 }
 
 .ox-tweet--full .ox-tweet__action--copy:hover,
@@ -476,10 +526,33 @@
   color: var(--ox-tweet-color-green);
 }
 
+.ox-tweet--full .ox-tweet__action--copy:hover .ox-tweet__action-icon,
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] .ox-tweet__action-icon {
+  background-color: var(--ox-tweet-color-green-hover);
+}
+
+.ox-tweet--full .ox-tweet__action--copy:hover .ox-tweet__action-text,
+.ox-tweet--full .ox-tweet__action--copy[data-ox-tweet-copied] .ox-tweet__action-text {
+  color: var(--ox-tweet-color-green);
+  text-decoration-line: underline;
+}
+
 .ox-tweet--full .ox-tweet__copied-text {
   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;
 }
@@ -490,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 {
@@ -501,8 +574,9 @@
   width: 100%;
   min-height: 32px;
   padding: 0 1rem;
-  font-size: 0.875rem;
-  font-weight: 700;
+  font-size: var(--ox-tweet-replies-font-size);
+  font-weight: var(--ox-tweet-replies-font-weight);
+  line-height: var(--ox-tweet-replies-line-height);
   color: var(--ox-tweet-color-blue-text);
   border: var(--ox-tweet-border);
   border-radius: 9999px;