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

package/dist/theme-tokens.d.cts

@@ -1,4 +1,3 @@
-//#region src/theme-tokens.d.ts
 /**
  * Free-form `--octc-*` custom properties for themes that need more than the
  * typed `colors` / `fonts` / `layout` fields.
@@ -9,7 +8,7 @@
  * accents, and surface textures purely through tokens, while a skin package
  * lays out geometry against those same tokens without knowing any color.
  */
-type ThemeTokens = Record<string, string>;
+export type ThemeTokens = Record<string, string>;
 /**
  * The token-bearing shape of a theme.
  *
@@ -20,25 +19,25 @@ type ThemeTokens = Record<string, string>;
  * `ThemeConfig` — including the published `@ox-content/theme-color-*` and
  * `@ox-content/theme-*` packages — satisfies it.
  */
-interface ThemeTokenSource {
-  tokens?: ThemeTokens;
-  darkTokens?: ThemeTokens;
-  extends?: ThemeTokenSource;
+export interface ThemeTokenSource {
+    tokens?: ThemeTokens;
+    darkTokens?: ThemeTokens;
+    extends?: ThemeTokenSource;
 }
 /**
  * Options for {@link renderThemeTokenCss}.
  */
-interface RenderThemeTokenCssOptions {
-  /**
-   * Keeps only the tokens whose name passes the predicate. Names arrive without
-   * the `--octc-` prefix, so `(name) => name.startsWith("syntax-")` reuses a
-   * color scheme's highlighter palette without adopting its page colors,
-   * typography, or layout policy.
-   *
-   * Filtering runs per layer, before merging, so a token a later layer would
-   * have overridden is dropped along with the override.
-   */
-  include?: (name: string) => boolean;
+export interface RenderThemeTokenCssOptions {
+    /**
+     * Keeps only the tokens whose name passes the predicate. Names arrive without
+     * the `--octc-` prefix, so `(name) => name.startsWith("syntax-")` reuses a
+     * color scheme's highlighter palette without adopting its page colors,
+     * typography, or layout policy.
+     *
+     * Filtering runs per layer, before merging, so a token a later layer would
+     * have overridden is dropped along with the override.
+     */
+    include?: (name: string) => boolean;
 }
 /**
  * Renders a theme's `--octc-*` tokens as a standalone stylesheet.
@@ -60,7 +59,7 @@ interface RenderThemeTokenCssOptions {
  * Layers compose left to right and each layer's `extends` chain is flattened
  * base-first, matching how `resolveTheme()` stacks a skin and a color scheme.
  */
-declare function renderThemeTokenCss(theme: ThemeTokenSource | ThemeTokenSource[], options?: RenderThemeTokenCssOptions): string;
+export declare function renderThemeTokenCss(theme: ThemeTokenSource | ThemeTokenSource[], options?: RenderThemeTokenCssOptions): string;
 /**
  * Renders light and dark token records as the three selectors the SSG runtime
  * switches between: an explicit `[data-theme="dark"]` opt-in, the OS
@@ -69,7 +68,5 @@ declare function renderThemeTokenCss(theme: ThemeTokenSource | ThemeTokenSource[
  * Emitted after the typed color variables and before the theme's own `css`, so
  * a token can override a typed color and raw `css` can override a token.
  */
-declare function tokensToCss(light: ThemeTokens, dark: ThemeTokens): string;
-//#endregion
-export { RenderThemeTokenCssOptions, ThemeTokenSource, ThemeTokens, renderThemeTokenCss, tokensToCss };
+export declare function tokensToCss(light: ThemeTokens, dark: ThemeTokens): string;
 //# sourceMappingURL=theme-tokens.d.cts.map

package/dist/theme-tokens.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-tokens.d.cts","names":[],"sources":["../src/theme-tokens.ts"],"mappings":";;;;;;;;;;;KAUY,cAAc;;;;;;;;;;;UAeT;EACf,SAAS;EACT,aAAa;EACb,UAAU;;;;;UAMK;;;;;;;;;;EAUf,WAAW;;;;;;;;;;;;;;;;;;;;;;iBAuBG,oBACd,OAAO,mBAAmB,oBAC1B,UAAS;;;;;;;;;iBAiBK,YAAY,OAAO,aAAa,MAAM"}
+{"version":3,"file":"theme-tokens.d.cts","sourceRoot":"","sources":["../../../../home/runner/work/ox-content/ox-content/npm/vite-plugin-ox-content/src/theme-tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAKjD;;;;;;;;;GASG;AACH,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,EAC5C,OAAO,GAAE,0BAA+B,GACvC,MAAM,CAMR;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,GAAG,MAAM,CAgBzE"}

package/dist/theme-tokens.d.mts

@@ -1,4 +1,3 @@
-//#region src/theme-tokens.d.ts
 /**
  * Free-form `--octc-*` custom properties for themes that need more than the
  * typed `colors` / `fonts` / `layout` fields.
@@ -9,7 +8,7 @@
  * accents, and surface textures purely through tokens, while a skin package
  * lays out geometry against those same tokens without knowing any color.
  */
-type ThemeTokens = Record<string, string>;
+export type ThemeTokens = Record<string, string>;
 /**
  * The token-bearing shape of a theme.
  *
@@ -20,25 +19,25 @@ type ThemeTokens = Record<string, string>;
  * `ThemeConfig` — including the published `@ox-content/theme-color-*` and
  * `@ox-content/theme-*` packages — satisfies it.
  */
-interface ThemeTokenSource {
-  tokens?: ThemeTokens;
-  darkTokens?: ThemeTokens;
-  extends?: ThemeTokenSource;
+export interface ThemeTokenSource {
+    tokens?: ThemeTokens;
+    darkTokens?: ThemeTokens;
+    extends?: ThemeTokenSource;
 }
 /**
  * Options for {@link renderThemeTokenCss}.
  */
-interface RenderThemeTokenCssOptions {
-  /**
-   * Keeps only the tokens whose name passes the predicate. Names arrive without
-   * the `--octc-` prefix, so `(name) => name.startsWith("syntax-")` reuses a
-   * color scheme's highlighter palette without adopting its page colors,
-   * typography, or layout policy.
-   *
-   * Filtering runs per layer, before merging, so a token a later layer would
-   * have overridden is dropped along with the override.
-   */
-  include?: (name: string) => boolean;
+export interface RenderThemeTokenCssOptions {
+    /**
+     * Keeps only the tokens whose name passes the predicate. Names arrive without
+     * the `--octc-` prefix, so `(name) => name.startsWith("syntax-")` reuses a
+     * color scheme's highlighter palette without adopting its page colors,
+     * typography, or layout policy.
+     *
+     * Filtering runs per layer, before merging, so a token a later layer would
+     * have overridden is dropped along with the override.
+     */
+    include?: (name: string) => boolean;
 }
 /**
  * Renders a theme's `--octc-*` tokens as a standalone stylesheet.
@@ -60,7 +59,7 @@ interface RenderThemeTokenCssOptions {
  * Layers compose left to right and each layer's `extends` chain is flattened
  * base-first, matching how `resolveTheme()` stacks a skin and a color scheme.
  */
-declare function renderThemeTokenCss(theme: ThemeTokenSource | ThemeTokenSource[], options?: RenderThemeTokenCssOptions): string;
+export declare function renderThemeTokenCss(theme: ThemeTokenSource | ThemeTokenSource[], options?: RenderThemeTokenCssOptions): string;
 /**
  * Renders light and dark token records as the three selectors the SSG runtime
  * switches between: an explicit `[data-theme="dark"]` opt-in, the OS
@@ -69,7 +68,5 @@ declare function renderThemeTokenCss(theme: ThemeTokenSource | ThemeTokenSource[
  * Emitted after the typed color variables and before the theme's own `css`, so
  * a token can override a typed color and raw `css` can override a token.
  */
-declare function tokensToCss(light: ThemeTokens, dark: ThemeTokens): string;
-//#endregion
-export { RenderThemeTokenCssOptions, ThemeTokenSource, ThemeTokens, renderThemeTokenCss, tokensToCss };
+export declare function tokensToCss(light: ThemeTokens, dark: ThemeTokens): string;
 //# sourceMappingURL=theme-tokens.d.mts.map

package/dist/theme-tokens.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-tokens.d.mts","names":[],"sources":["../src/theme-tokens.ts"],"mappings":";;;;;;;;;;;KAUY,cAAc;;;;;;;;;;;UAeT;EACf,SAAS;EACT,aAAa;EACb,UAAU;;;;;UAMK;;;;;;;;;;EAUf,WAAW;;;;;;;;;;;;;;;;;;;;;;iBAuBG,oBACd,OAAO,mBAAmB,oBAC1B,UAAS;;;;;;;;;iBAiBK,YAAY,OAAO,aAAa,MAAM"}
+{"version":3,"file":"theme-tokens.d.mts","sourceRoot":"","sources":["../../../../home/runner/work/ox-content/ox-content/npm/vite-plugin-ox-content/src/theme-tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAKjD;;;;;;;;;GASG;AACH,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,EAC5C,OAAO,GAAE,0BAA+B,GACvC,MAAM,CAMR;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,GAAG,MAAM,CAgBzE"}

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 };

package/dist/twitter-client.cjs

@@ -0,0 +1,84 @@
+// Generated from crates/ox_content_ssg/src/html/plugins/twitter.js.
+// Run npm/vite-plugin-ox-content/scripts/build-twitter-client.mjs.
+
+"use strict";
+const TWEET_COPY_RESET_MS = 6000;
+const oxTweetInitializedRoots = new WeakSet();
+const oxTweetCopyResetTimers = new WeakMap();
+const oxTweetHandledEvents = new WeakSet();
+
+// eslint-disable-next-line no-unused-vars
+function initTweetCards(rootInput, options) {
+  const fallbackDocument = typeof document === "undefined" ? undefined : document;
+  const root = rootInput ?? fallbackDocument;
+  if (!root || oxTweetInitializedRoots.has(root) || typeof root.addEventListener !== "function") {
+    return;
+  }
+
+  oxTweetInitializedRoots.add(root);
+  const copiedMs =
+    options && Number.isFinite(options.copiedMs)
+      ? Math.max(0, options.copiedMs)
+      : TWEET_COPY_RESET_MS;
+  const getClipboard = () =>
+    options && options.clipboard
+      ? options.clipboard
+      : typeof navigator === "undefined"
+        ? undefined
+        : navigator.clipboard;
+
+  root.addEventListener("click", (event) => {
+    if (oxTweetHandledEvents.has(event) || event.defaultPrevented) return;
+    const action = closestTweetCopyAction(event.target);
+    if (!action) return;
+
+    const url = action.getAttribute("data-ox-tweet-copy-url") || action.getAttribute("href");
+    const clipboard = getClipboard();
+    if (!url || !clipboard || typeof clipboard.writeText !== "function") return;
+
+    oxTweetHandledEvents.add(event);
+    event.preventDefault();
+    clipboard
+      .writeText(url)
+      .then(() => setTweetCopyState(action, "copied", copiedMs))
+      .catch(() => setTweetCopyState(action, "failed", copiedMs));
+  });
+}
+
+// eslint-disable-next-line no-unused-vars
+const initTwitterCards = initTweetCards;
+
+function closestTweetCopyAction(target) {
+  if (!target || typeof target.closest !== "function") return undefined;
+  const action = target.closest("[data-ox-tweet-copy]");
+  if (!action || typeof action.getAttribute !== "function") return undefined;
+  return action;
+}
+
+function setTweetCopyState(action, state, copiedMs) {
+  const previousTimer = oxTweetCopyResetTimers.get(action);
+  if (previousTimer) clearTimeout(previousTimer);
+
+  const label = state === "copied" ? "Copied!" : state === "failed" ? "Copy failed" : "Copy link";
+  const status =
+    typeof action.querySelector === "function"
+      ? action.querySelector("[data-ox-tweet-copy-status]")
+      : undefined;
+
+  if (state === "copied") action.setAttribute("data-ox-tweet-copied", "");
+  else action.removeAttribute("data-ox-tweet-copied");
+  action.setAttribute("aria-label", label);
+  action.setAttribute("title", label);
+  if (status) status.textContent = state ? label : "";
+
+  if (state) {
+    oxTweetCopyResetTimers.set(
+      action,
+      setTimeout(() => setTweetCopyState(action, undefined, copiedMs), copiedMs),
+    );
+  } else {
+    oxTweetCopyResetTimers.delete(action);
+  }
+}
+
+module.exports = { TWEET_COPY_RESET_MS, initTweetCards, initTwitterCards };

package/dist/twitter-client.d.cts

@@ -0,0 +1,11 @@
+export type TweetCardsRoot = Document | Element;
+export interface InitTweetCardsOptions {
+  clipboard?: Pick<Clipboard, "writeText">;
+  copiedMs?: number;
+}
+export declare const TWEET_COPY_RESET_MS = 6000;
+export declare function initTweetCards(
+  root?: TweetCardsRoot,
+  options?: InitTweetCardsOptions,
+): void;
+export declare const initTwitterCards: typeof initTweetCards;

package/dist/twitter-client.d.mts

@@ -0,0 +1,11 @@
+export type TweetCardsRoot = Document | Element;
+export interface InitTweetCardsOptions {
+  clipboard?: Pick<Clipboard, "writeText">;
+  copiedMs?: number;
+}
+export declare const TWEET_COPY_RESET_MS = 6000;
+export declare function initTweetCards(
+  root?: TweetCardsRoot,
+  options?: InitTweetCardsOptions,
+): void;
+export declare const initTwitterCards: typeof initTweetCards;