@riebeckite/plugin-image-compare 0.0.0-stage → 0.0.36

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright Rerurate_514
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,3 +1,123 @@
-# Temporary Holding Version
+# @riebeckite/plugin-image-compare
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<!-- Generated from docs/docs/plugins/image-compare.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
+
+Before/after image sliders from a fenced `image-compare` block. The slider is
+rendered at build time and enhanced by a small client script; without
+JavaScript the same two images remain readable side by side.
+
+[日本語](./README_ja.md)
+
+## Overview
+
+````markdown
+```image-compare
+before: ./before.png
+after: ../assets/after.png
+beforeAlt: Draft
+afterAlt: Published
+orientation: horizontal
+label: Home page
+```
+````
+
+`before` and `after` are required. Image paths resolve relative to the note,
+using the same rules as Markdown images. External URLs, protocol-relative URLs,
+and paths that escape the content directory are rejected.
+
+The block becomes a `<figure>` with a native range input. Mouse, touch, and
+keyboard all work through that input. Multiple blocks can appear on one page,
+and SPA navigation removes each slider's listener when its page is replaced.
+
+## Usage
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { imageCompare } from "@riebeckite/plugin-image-compare";
+
+export default defineConfig({
+  // ...
+  plugins: [imageCompare()],
+});
+```
+
+The plugin registers its own stylesheet and page-scoped client entry. Nothing is
+emitted when the plugin is disabled.
+
+## Options
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `language` | `string` | `"image-compare"` | Fenced code block language |
+
+## Block fields
+
+| Field | Type | Default | Description |
+| ----- | ---- | ------- | ----------- |
+| `before` | `string` | Required | Before image path |
+| `after` | `string` | Required | After image path |
+| `beforeAlt` | `string` | `"Before"` | Before image alternative text |
+| `afterAlt` | `string` | `"After"` | After image alternative text |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Slider axis |
+| `label` | `string` | - | Caption below the comparison |
+
+## Example
+
+````markdown
+```image-compare
+---
+before: ../../assets/themes/theme-default-light.png
+after: ../../assets/themes/theme-default-dark.png
+beforeAlt: Default theme in light mode
+afterAlt: Default theme in dark mode
+label: Default theme, light to dark
+---
+```
+````
+
+```image-compare
+---
+before: ../../assets/themes/theme-default-light.png
+after: ../../assets/themes/theme-default-dark.png
+beforeAlt: Default theme in light mode
+afterAlt: Default theme in dark mode
+label: Default theme, light to dark
+---
+```
+
+```image-compare
+---
+before: ../../assets/themes/theme-default-light.png
+after: ../../assets/themes/theme-default-dark.png
+beforeAlt: Default theme in light mode
+afterAlt: Default theme in dark mode
+orientation: vertical
+label: Vertical comparison
+---
+```
+
+## Output and accessibility
+
+The static figure lists both images with visible Before and After labels. When
+JavaScript runs, the plugin hides the static list and exposes the interactive
+stage. The range input covers the stage, keeps its native keyboard behavior,
+and shows a focus outline on the stage. The after image is clipped with
+`clip-path`, so neither image is repositioned or rescaled while dragging. Each
+image keeps its natural aspect ratio and the stage grows to the taller image.
+Give both screenshots the same width so their content lines up at the split;
+different heights are fine.
+
+Styles use the existing `--rb-color-*` theme tokens and work in Default, Light,
+and Dark themes. No gradients, glass effects, excessive rounding, or animations
+are used.
+
+## Diagnostics
+
+| Code | Severity | Meaning |
+| ---- | -------- | ------- |
+| `image-compare-invalid` | `error` | The block is malformed, an image is missing, or an image path is not supported. The block is replaced by an error box |
+
+## Related
+
+- [Gallery](../gallery/README.md)
+- [Plugin system](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/plugin-api.md)

package/README_ja.md

@@ -0,0 +1,107 @@
+# @riebeckite/plugin-image-compare
+
+<!-- Generated from docs/docs/plugins/image-compare.ja.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
+
+`image-compare` フェンスコードブロックから、ビフォー・アフター比較スライダーを生成します。スライダーはビルド時に HTML を出力し、小さなクライアントスクリプトで操作を追加します。JavaScript が動かない場合も 2 枚の画像を並べて読めます。
+
+[English](./README.md)
+
+## 概要
+
+````markdown
+```image-compare
+before: ./before.png
+after: ../assets/after.png
+beforeAlt: 変更前
+afterAlt: 変更後
+orientation: horizontal
+label: ホームページ
+```
+````
+
+`before` と `after` は必須です。画像パスは Markdown 画像と同じ規則でノートからの相対パスとして解決します。外部 URL、プロトコル相対 URL、コンテンツディレクトリの外へ出るパスは拒否します。
+
+ブロックは `<figure>` とネイティブの range input になります。マウス、タッチ、キーボードのすべてで操作でき、1 ページに複数のブロックを置けます。SPA でページが置き換わると、各スライダーのリスナーは破棄されます。
+
+## 設定
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { imageCompare } from "@riebeckite/plugin-image-compare";
+
+export default defineConfig({
+  // ...
+  plugins: [imageCompare()],
+});
+```
+
+プラグインは専用のスタイルシートとページ単位のクライアントエントリを登録します。無効にした場合は何も出力しません。
+
+## オプション
+
+| オプション | 型 | 既定値 | 内容 |
+| --- | --- | --- | --- |
+| `language` | `string` | `"image-compare"` | フェンスコードブロックの言語 |
+
+## ブロックのフィールド
+
+| フィールド | 型 | 既定値 | 内容 |
+| --- | --- | --- | --- |
+| `before` | `string` | 必須 | 変更前の画像パス |
+| `after` | `string` | 必須 | 変更後の画像パス |
+| `beforeAlt` | `string` | `"Before"` | 変更前画像の代替テキスト |
+| `afterAlt` | `string` | `"After"` | 変更後画像の代替テキスト |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | スライダーの軸 |
+| `label` | `string` | - | 比較の下に出すキャプション |
+
+## 使用例
+
+````markdown
+```image-compare
+---
+before: ../../assets/themes/theme-default-light.png
+after: ../../assets/themes/theme-default-dark.png
+beforeAlt: ライトモードの Default テーマ
+afterAlt: ダークモードの Default テーマ
+label: Default テーマのライト表示とダーク表示
+---
+```
+````
+
+```image-compare
+---
+before: ../../assets/themes/theme-default-light.png
+after: ../../assets/themes/theme-default-dark.png
+beforeAlt: ライトモードの Default テーマ
+afterAlt: ダークモードの Default テーマ
+label: Default テーマのライト表示とダーク表示
+---
+```
+
+```image-compare
+---
+before: ../../assets/themes/theme-default-light.png
+after: ../../assets/themes/theme-default-dark.png
+beforeAlt: ライトモードの Default テーマ
+afterAlt: ダークモードの Default テーマ
+orientation: vertical
+label: 縦方向の比較
+---
+```
+
+## 出力とアクセシビリティ
+
+静的な figure には 2 枚の画像と Before / After のラベルを表示します。JavaScript が動くと静的な一覧を隠し、操作可能なステージを表示します。range input はステージ全体を覆い、ネイティブのキーボード操作を保ち、フォーカス時はステージに輪郭を出します。変更後の画像は `clip-path` で切り抜くため、ドラッグ中に画像の位置や縮尺は変わりません。各画像は元の縦横比のまま表示され、ステージの高さは高い方の画像に合わせて広がります。2 枚は同じ幅で撮影すると切り替え位置で内容がそろいます。高さが違っても構いません。
+
+スタイルは既存の `--rb-color-*` テーマトークンを使い、Default、Light、Dark の各テーマで動作します。グラデーション、ガラス効果、過剰な角丸、アニメーションは使いません。
+
+## 診断
+
+| コード | 重大度 | 内容 |
+| --- | --- | --- |
+| `image-compare-invalid` | `error` | ブロックが不正、画像が見つからない、または画像パスが未対応。ブロックはエラーボックスに置き換わります |
+
+## 関連資料
+
+- [Gallery](../gallery/README_ja.md)
+- [プラグインシステム](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/plugin-api.ja.md)

package/dist/client.d.ts

@@ -0,0 +1 @@
+export { initImageCompare } from "./src/init.js";

package/dist/client.js

@@ -0,0 +1,61 @@
+// src/init.ts
+function initImageCompare(context = {}) {
+  const root = context.root ?? document;
+  const cleanups = [];
+  for (const figure of root.querySelectorAll(
+    "[data-rr-image-compare]"
+  )) {
+    if (figure.dataset.enhanced === "true") continue;
+    const input = figure.querySelector(
+      "[data-image-compare-range]"
+    );
+    if (!input) continue;
+    const stage = input.closest(".rr-image-compare__stage") ?? figure;
+    const vertical = figure.dataset.orientation === "vertical";
+    const update = () => {
+      figure.style.setProperty(
+        "--rr-image-compare-position",
+        `${input.value}%`
+      );
+    };
+    const setFromPointer = (event) => {
+      const bounds = stage.getBoundingClientRect();
+      if (bounds.width === 0 || bounds.height === 0) return;
+      const ratio = vertical ? (event.clientY - bounds.top) / bounds.height : (event.clientX - bounds.left) / bounds.width;
+      input.value = String(Math.round(Math.min(1, Math.max(0, ratio)) * 100));
+      update();
+    };
+    const onPointerDown = (event) => {
+      event.preventDefault();
+      input.focus({ preventScroll: true });
+      input.setPointerCapture(event.pointerId);
+      setFromPointer(event);
+    };
+    const onPointerMove = (event) => {
+      if (!input.hasPointerCapture(event.pointerId)) return;
+      event.preventDefault();
+      setFromPointer(event);
+    };
+    const reset = () => {
+      delete figure.dataset.enhanced;
+      figure.style.removeProperty("--rr-image-compare-position");
+    };
+    figure.dataset.enhanced = "true";
+    update();
+    input.addEventListener("input", update);
+    input.addEventListener("pointerdown", onPointerDown);
+    input.addEventListener("pointermove", onPointerMove);
+    cleanups.push(() => {
+      input.removeEventListener("input", update);
+      input.removeEventListener("pointerdown", onPointerDown);
+      input.removeEventListener("pointermove", onPointerMove);
+      reset();
+    });
+  }
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+export {
+  initImageCompare
+};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import type { ImageCompareOptions } from "./src/types.js";
+export { initImageCompare } from "./src/init.js";
+export { parseImageCompare } from "./src/parse.js";
+export { createImageComparePlaceholder, createImageComparePlaceholderPattern, decodeImageCompareSource, encodeImageCompareSource, IMAGE_COMPARE_ATTRIBUTE, } from "./src/placeholder.js";
+export { remarkImageCompare } from "./src/remark.js";
+export { IMAGE_COMPARE_CLASS, renderImageCompare, renderImageCompareError, } from "./src/render.js";
+export type { ImageCompareOptions, ImageCompareOrientation, ImageCompareParseResult, ImageCompareSpec, ResolvedImageCompareSpec, } from "./src/types.js";
+export declare const IMAGE_COMPARE_PLUGIN_NAME = "image-compare";
+export declare function imageCompare(options?: ImageCompareOptions): import("@riebeckite/core").RiebeckitePlugin<ImageCompareOptions>;

package/dist/index.js

@@ -0,0 +1,330 @@
+// index.ts
+import {
+  createClientEntry,
+  createStyleAsset,
+  definePlugin
+} from "@riebeckite/core";
+
+// src/remark.ts
+import { visit } from "unist-util-visit";
+
+// src/placeholder.ts
+var IMAGE_COMPARE_ATTRIBUTE = "data-rr-image-compare-source";
+function encodeImageCompareSource(source) {
+  return encodeURIComponent(source);
+}
+function decodeImageCompareSource(encoded) {
+  return decodeURIComponent(encoded);
+}
+function createImageComparePlaceholder(source) {
+  return `<div ${IMAGE_COMPARE_ATTRIBUTE}="${encodeImageCompareSource(source)}"></div>`;
+}
+function createImageComparePlaceholderPattern() {
+  return new RegExp(
+    `<div\\b[^>]*\\b${IMAGE_COMPARE_ATTRIBUTE}="([^"]*)"[^>]*>\\s*</div>`,
+    "g"
+  );
+}
+
+// src/remark.ts
+function remarkImageCompare(options = {}) {
+  const language = options.language ?? "image-compare";
+  return (tree) => {
+    visit(tree, "code", (node, index, parent) => {
+      if (node.lang !== language) return;
+      if (!parent || index === void 0) return;
+      const html = {
+        type: "html",
+        value: createImageComparePlaceholder(node.value)
+      };
+      parent.children.splice(index, 1, html);
+    });
+  };
+}
+
+// src/runtime.ts
+import {
+  resolveContentAssetUrl
+} from "@riebeckite/core";
+
+// src/parse.ts
+import { matter } from "vfile-matter";
+var ImageCompareParseError = class extends Error {
+};
+function parseImageCompare(source) {
+  try {
+    const root = parseMapping(source);
+    const before = readString(root.before);
+    const after = readString(root.after);
+    if (!before) {
+      throw new ImageCompareParseError("must define a `before` image.");
+    }
+    if (!after) {
+      throw new ImageCompareParseError("must define an `after` image.");
+    }
+    const orientation = parseOrientation(root.orientation);
+    const label = readString(root.label);
+    const spec = {
+      before,
+      after,
+      beforeAlt: readString(root.beforeAlt) ?? "Before",
+      afterAlt: readString(root.afterAlt) ?? "After",
+      orientation,
+      ...label ? { label } : {}
+    };
+    return { ok: true, spec };
+  } catch (error) {
+    if (error instanceof ImageCompareParseError) {
+      return { ok: false, reason: error.message };
+    }
+    throw error;
+  }
+}
+function parseMapping(source) {
+  let parsed;
+  try {
+    parsed = parseYamlMapping(source);
+  } catch (error) {
+    throw new ImageCompareParseError(
+      `is not valid YAML (${formatError(error)}).`
+    );
+  }
+  if (parsed === null || parsed === void 0) return {};
+  if (typeof parsed !== "object" || Array.isArray(parsed)) {
+    throw new ImageCompareParseError("must be a YAML mapping.");
+  }
+  return parsed;
+}
+function parseOrientation(value) {
+  if (value === void 0 || value === null) return "horizontal";
+  if (value === "horizontal" || value === "vertical") return value;
+  throw new ImageCompareParseError(
+    '`orientation` must be "horizontal" or "vertical".'
+  );
+}
+function readString(value) {
+  if (typeof value === "string") return value.trim() || void 0;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return void 0;
+}
+function parseYamlMapping(source) {
+  const document2 = `---
+${source}
+---
+`;
+  const file = {
+    value: document2,
+    data: {},
+    toString: () => document2
+  };
+  matter(file);
+  return file.data.matter;
+}
+function formatError(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+
+// src/render.ts
+import { escapeHtml, escapeHtmlAttribute } from "@riebeckite/core";
+var IMAGE_COMPARE_CLASS = "rr-image-compare";
+function renderImageCompare(spec) {
+  const label = spec.label ?? "Image comparison";
+  const before = `<img class="${IMAGE_COMPARE_CLASS}__image ${IMAGE_COMPARE_CLASS}__image--before" src="${escapeHtmlAttribute(spec.before)}" alt="${escapeHtmlAttribute(spec.beforeAlt)}" loading="lazy" decoding="async">`;
+  const after = `<div class="${IMAGE_COMPARE_CLASS}__layer"><img class="${IMAGE_COMPARE_CLASS}__image ${IMAGE_COMPARE_CLASS}__image--after" src="${escapeHtmlAttribute(spec.after)}" alt="${escapeHtmlAttribute(spec.afterAlt)}" loading="lazy" decoding="async"></div>`;
+  return [
+    `<figure class="${IMAGE_COMPARE_CLASS}" data-rr-image-compare data-orientation="${spec.orientation}" style="--rr-image-compare-position:50%" aria-label="${escapeHtmlAttribute(label)}">`,
+    `<div class="${IMAGE_COMPARE_CLASS}__static">`,
+    `<span class="${IMAGE_COMPARE_CLASS}__static-item"><img src="${escapeHtmlAttribute(spec.before)}" alt="${escapeHtmlAttribute(spec.beforeAlt)}" loading="lazy" decoding="async"><span>Before</span></span>`,
+    `<span class="${IMAGE_COMPARE_CLASS}__static-item"><img src="${escapeHtmlAttribute(spec.after)}" alt="${escapeHtmlAttribute(spec.afterAlt)}" loading="lazy" decoding="async"><span>After</span></span>`,
+    "</div>",
+    `<div class="${IMAGE_COMPARE_CLASS}__stage">`,
+    before,
+    after,
+    `<input class="${IMAGE_COMPARE_CLASS}__range" type="range" min="0" max="100" value="50" step="1" aria-label="Comparison position" data-image-compare-range>`,
+    `<span class="${IMAGE_COMPARE_CLASS}__divider" aria-hidden="true"></span>`,
+    "</div>",
+    spec.label ? `<figcaption class="${IMAGE_COMPARE_CLASS}__caption">${escapeHtml(spec.label)}</figcaption>` : "",
+    "</figure>"
+  ].join("");
+}
+function renderImageCompareError(message) {
+  return `<div class="${IMAGE_COMPARE_CLASS} ${IMAGE_COMPARE_CLASS}--error" role="status">${escapeHtml(message)}</div>`;
+}
+
+// src/runtime.ts
+function createImageCompareRuntime() {
+  return {
+    resolve(manifest, diagnostics) {
+      for (const entry of manifest.entries) {
+        if (!entry.html.includes(IMAGE_COMPARE_ATTRIBUTE)) continue;
+        const pattern = createImageComparePlaceholderPattern();
+        entry.html = entry.html.replace(
+          pattern,
+          (_match, encoded) => resolveBlock(entry.slug, encoded, diagnostics)
+        );
+      }
+    }
+  };
+}
+function resolveBlock(slug, encoded, diagnostics) {
+  let source;
+  try {
+    source = decodeImageCompareSource(encoded);
+  } catch (error) {
+    return fail(
+      slug,
+      `Image comparison block in \`${slug}\` could not be decoded (${formatError2(error)}).`,
+      diagnostics
+    );
+  }
+  const parsed = parseImageCompare(source);
+  if (parsed.ok === false) {
+    return fail(
+      slug,
+      `Image comparison block in \`${slug}\` ${parsed.reason}`,
+      diagnostics
+    );
+  }
+  const before = resolveContentAssetUrl(parsed.spec.before, slug);
+  const after = resolveContentAssetUrl(parsed.spec.after, slug);
+  if (!before || !after) {
+    const invalid = !before ? parsed.spec.before : parsed.spec.after;
+    return fail(
+      slug,
+      `Image comparison block in \`${slug}\` references an unsupported image: "${invalid}".`,
+      diagnostics
+    );
+  }
+  return renderImageCompare({
+    ...parsed.spec,
+    before: before.url,
+    after: after.url
+  });
+}
+function fail(slug, message, diagnostics) {
+  diagnostics.push({
+    code: "image-compare-invalid",
+    severity: "error",
+    pluginName: "image-compare",
+    slug,
+    message
+  });
+  return renderImageCompareError(message);
+}
+function formatError2(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+
+// src/init.ts
+function initImageCompare(context = {}) {
+  const root = context.root ?? document;
+  const cleanups = [];
+  for (const figure of root.querySelectorAll(
+    "[data-rr-image-compare]"
+  )) {
+    if (figure.dataset.enhanced === "true") continue;
+    const input = figure.querySelector(
+      "[data-image-compare-range]"
+    );
+    if (!input) continue;
+    const stage = input.closest(".rr-image-compare__stage") ?? figure;
+    const vertical = figure.dataset.orientation === "vertical";
+    const update = () => {
+      figure.style.setProperty(
+        "--rr-image-compare-position",
+        `${input.value}%`
+      );
+    };
+    const setFromPointer = (event) => {
+      const bounds = stage.getBoundingClientRect();
+      if (bounds.width === 0 || bounds.height === 0) return;
+      const ratio = vertical ? (event.clientY - bounds.top) / bounds.height : (event.clientX - bounds.left) / bounds.width;
+      input.value = String(Math.round(Math.min(1, Math.max(0, ratio)) * 100));
+      update();
+    };
+    const onPointerDown = (event) => {
+      event.preventDefault();
+      input.focus({ preventScroll: true });
+      input.setPointerCapture(event.pointerId);
+      setFromPointer(event);
+    };
+    const onPointerMove = (event) => {
+      if (!input.hasPointerCapture(event.pointerId)) return;
+      event.preventDefault();
+      setFromPointer(event);
+    };
+    const reset = () => {
+      delete figure.dataset.enhanced;
+      figure.style.removeProperty("--rr-image-compare-position");
+    };
+    figure.dataset.enhanced = "true";
+    update();
+    input.addEventListener("input", update);
+    input.addEventListener("pointerdown", onPointerDown);
+    input.addEventListener("pointermove", onPointerMove);
+    cleanups.push(() => {
+      input.removeEventListener("input", update);
+      input.removeEventListener("pointerdown", onPointerDown);
+      input.removeEventListener("pointermove", onPointerMove);
+      reset();
+    });
+  }
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+
+// index.ts
+var IMAGE_COMPARE_PLUGIN_NAME = "image-compare";
+function imageCompare(options = {}) {
+  const resolved = { language: options.language ?? "image-compare" };
+  const runtime = createImageCompareRuntime();
+  return definePlugin({
+    name: IMAGE_COMPARE_PLUGIN_NAME,
+    processedContentCache: {
+      version: "image-compare-v1",
+      dependencyMode: "none"
+    },
+    options,
+    extendMarkdownPipeline: (pipeline) => {
+      pipeline.use(remarkImageCompare, { language: resolved.language });
+    },
+    onManifestCreated: (context) => {
+      runtime.resolve(context.manifest, context.diagnostics);
+    },
+    assets: [
+      createStyleAsset(
+        IMAGE_COMPARE_PLUGIN_NAME,
+        "@riebeckite/plugin-image-compare/style.css"
+      )
+    ],
+    clientEntries: [
+      createClientEntry(
+        IMAGE_COMPARE_PLUGIN_NAME,
+        "@riebeckite/plugin-image-compare/client",
+        "initImageCompare",
+        void 0,
+        "page",
+        "context",
+        "[data-rr-image-compare]"
+      )
+    ]
+  });
+}
+export {
+  IMAGE_COMPARE_ATTRIBUTE,
+  IMAGE_COMPARE_CLASS,
+  IMAGE_COMPARE_PLUGIN_NAME,
+  createImageComparePlaceholder,
+  createImageComparePlaceholderPattern,
+  decodeImageCompareSource,
+  encodeImageCompareSource,
+  imageCompare,
+  initImageCompare,
+  parseImageCompare,
+  remarkImageCompare,
+  renderImageCompare,
+  renderImageCompareError
+};

package/dist/src/init.d.ts

@@ -0,0 +1,5 @@
+type ImageCompareContext = {
+    root?: ParentNode;
+};
+export declare function initImageCompare(context?: ImageCompareContext): () => void;
+export {};

package/dist/src/parse.d.ts

@@ -0,0 +1,2 @@
+import type { ImageCompareParseResult } from "./types.js";
+export declare function parseImageCompare(source: string): ImageCompareParseResult;

package/dist/src/placeholder.d.ts

@@ -0,0 +1,5 @@
+export declare const IMAGE_COMPARE_ATTRIBUTE = "data-rr-image-compare-source";
+export declare function encodeImageCompareSource(source: string): string;
+export declare function decodeImageCompareSource(encoded: string): string;
+export declare function createImageComparePlaceholder(source: string): string;
+export declare function createImageComparePlaceholderPattern(): RegExp;

package/dist/src/remark.d.ts

@@ -0,0 +1,6 @@
+import type { Root } from "mdast";
+type RemarkImageCompareOptions = {
+    language?: string;
+};
+export declare function remarkImageCompare(options?: RemarkImageCompareOptions): (tree: Root) => void;
+export {};

package/dist/src/render.d.ts

@@ -0,0 +1,4 @@
+import type { ResolvedImageCompareSpec } from "./types.js";
+export declare const IMAGE_COMPARE_CLASS = "rr-image-compare";
+export declare function renderImageCompare(spec: ResolvedImageCompareSpec): string;
+export declare function renderImageCompareError(message: string): string;

package/dist/src/runtime.d.ts

@@ -0,0 +1,4 @@
+import { type ContentManifest, type Diagnostic } from "@riebeckite/core";
+export declare function createImageCompareRuntime(): {
+    resolve(manifest: ContentManifest, diagnostics: Diagnostic[]): void;
+};

package/dist/src/types.d.ts

@@ -0,0 +1,24 @@
+export type ImageCompareOrientation = "horizontal" | "vertical";
+export type ImageCompareOptions = {
+    /** Fenced code block language treated as an image comparison. */
+    language?: string;
+};
+export type ImageCompareSpec = {
+    readonly before: string;
+    readonly after: string;
+    readonly beforeAlt: string;
+    readonly afterAlt: string;
+    readonly orientation: ImageCompareOrientation;
+    readonly label?: string;
+};
+export type ResolvedImageCompareSpec = Omit<ImageCompareSpec, "before" | "after"> & {
+    readonly before: string;
+    readonly after: string;
+};
+export type ImageCompareParseResult = {
+    readonly ok: true;
+    readonly spec: ImageCompareSpec;
+} | {
+    readonly ok: false;
+    readonly reason: string;
+};

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@riebeckite/plugin-image-compare",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.36",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "source": "./index.ts",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "source": "./client.ts",
+      "default": "./dist/client.js"
+    },
+    "./style.css": "./style.css"
+  },
+  "dependencies": {
+    "@riebeckite/core": "0.0.36",
+    "@types/mdast": "^4.0.4",
+    "unist-util-visit": "^5.1.0",
+    "vfile-matter": "^5.0.1"
+  },
+  "devDependencies": {
+    "tsx": "^4.22.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "README_ja.md",
+    "dist",
+    "style.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rerurate514/riebeckite.git",
+    "directory": "packages/plugins/image-compare"
+  },
+  "homepage": "https://github.com/Rerurate514/riebeckite#readme",
+  "bugs": {
+    "url": "https://github.com/Rerurate514/riebeckite/issues"
+  },
+  "description": "Before/after image comparison sliders for Riebeckite code blocks.",
+  "keywords": [
+    "riebeckite",
+    "plugin",
+    "image",
+    "comparison",
+    "slider"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "sideEffects": [
+    "./style.css"
+  ],
+  "scripts": {
+    "build": "node ../../../scripts/build_package.mjs",
+    "test": "node --import tsx --test \"test/*.test.ts\""
+  }
 }

package/style.css

@@ -0,0 +1,125 @@
+.rr-image-compare {
+  --rr-image-compare-position: 50%;
+
+  margin-block: 1.5rem;
+}
+
+.rr-image-compare__static {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: 0.5rem;
+}
+
+.rr-image-compare__static-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  color: var(--rb-color-muted, #69645c);
+  font-size: 0.8125rem;
+}
+
+.rr-image-compare__static-item img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--rb-color-border, #d0d0d0);
+}
+
+.rr-image-compare__stage {
+  position: relative;
+  display: none;
+  overflow: hidden;
+  background: var(--rb-color-surface, transparent);
+}
+
+.rr-image-compare[data-enhanced="true"] .rr-image-compare__static {
+  display: none;
+}
+
+.rr-image-compare[data-enhanced="true"] .rr-image-compare__stage {
+  display: grid;
+}
+
+.rr-image-compare__image {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.rr-image-compare__image--before,
+.rr-image-compare__layer {
+  grid-area: 1 / 1;
+}
+
+.rr-image-compare__layer {
+  align-self: stretch;
+  clip-path: inset(0 0 0 var(--rr-image-compare-position));
+}
+
+.rr-image-compare[data-orientation="vertical"] .rr-image-compare__layer {
+  clip-path: inset(var(--rr-image-compare-position) 0 0 0);
+}
+
+.rr-image-compare__divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--rr-image-compare-position);
+  width: 1px;
+  background: var(--rb-color-paper, #fff);
+  box-shadow: 0 0 0 1px var(--rb-color-border-strong, #9a9a9a);
+  pointer-events: none;
+}
+
+.rr-image-compare[data-orientation="vertical"] .rr-image-compare__divider {
+  top: var(--rr-image-compare-position);
+  right: 0;
+  bottom: auto;
+  left: 0;
+  width: auto;
+  height: 1px;
+}
+
+.rr-image-compare__range {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  background: transparent;
+  appearance: none;
+  touch-action: none;
+  cursor: ew-resize;
+}
+
+.rr-image-compare[data-orientation="vertical"] .rr-image-compare__range {
+  cursor: ns-resize;
+}
+
+.rr-image-compare__stage:has(.rr-image-compare__range:focus-visible) {
+  outline: 2px solid var(--rb-color-accent, currentColor);
+  outline-offset: 2px;
+}
+
+.rr-image-compare__caption {
+  margin-top: 0.5rem;
+  color: var(--rb-color-muted, #69645c);
+  font-size: 0.8125rem;
+}
+
+.rr-image-compare--error {
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--rb-color-border, #d0d0d0);
+  border-left: 3px solid var(--rb-color-error, #b3261e);
+  font-size: 0.9375rem;
+}
+
+@media (prefers-contrast: more) {
+  .rr-image-compare__divider {
+    background: var(--rb-color-ink, #1c1a17);
+  }
+}