@riebeckite/plugin-responsive-image 0.0.1

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

@@ -0,0 +1,89 @@
+# @riebeckite/plugin-responsive-image
+
+Upgrades existing `<img>` elements with lazy loading and responsive
+`<picture>` / `srcset` markup, using only image variants that are already
+present in the content manifest.
+
+[日本語](./README_ja.md)
+
+## Overview
+
+`responsiveImage()` runs as a build-time HTML layer:
+
+1. It always adds `loading="lazy"` and `decoding="async"` to `<img>` elements
+   unless those attributes are already set.
+2. It adds a `sizes` attribute when one is missing.
+3. It looks for sibling variants that already exist in the manifest
+   (`photo.webp`, `photo.avif`, `photo-640.webp`, `photo-640.png`, …). When
+   variants are found the `<img>` becomes a `<picture>` element with grouped
+   `<source>` elements. When no variants are found the `<img>` is left in place
+   with just the added attributes.
+
+The plugin never fabricates URLs and never writes files. It only references
+assets that the manifest already knows about.
+
+## Usage
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { attachment } from "@riebeckite/plugin-attachment";
+import { obsidianMarkdown } from "@riebeckite/plugin-obsidian-markdown";
+import { responsiveImage } from "@riebeckite/plugin-responsive-image";
+
+export default defineConfig({
+  // ...
+  plugins: [obsidianMarkdown(), attachment(), responsiveImage()],
+});
+```
+
+`responsiveImage()` uses `order: 100`, so it runs after the media and
+attachment renderers.
+
+## Options
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `lazy` | `boolean` | `true` | Adds `loading="lazy"` when absent |
+| `decoding` | `boolean` | `true` | Adds `decoding="async"` when absent |
+| `sizes` | `string` | `"100vw"` | Fallback `sizes` value added when absent |
+| `widths` | `number[]` | `[640, 1280, 1920]` | Width variants to look up |
+| `formats` | `string[]` | `["webp", "avif"]` | Format variants to look up |
+| `className` | `string` | `"rb-responsive-image"` | Class applied to `<picture>` |
+| `generate` | `boolean` | `false` | Reserved |
+| `outputDir` | `string` | unset | Reserved |
+
+## Variant discovery
+
+Variants are matched against the asset paths the manifest already contains:
+
+- format variants: `photo.webp`, `photo.avif`
+- width variants: `photo-640.webp`, `photo-1280.avif`, `photo-1920.png`
+- width variants in the original format: `photo-640.png`
+
+The plugin maps the original `<img src>` back to a manifest asset by trying the
+site asset URL (`/attachments/photo.png`) and the attachment URL
+(`/assets/attachments/photo.png`). If the source cannot be matched to a manifest
+asset, the `<img>` is left untouched.
+
+## Limitation: no image encoding
+
+This plugin is a deterministic discovery/HTML layer. It does **not** encode or
+generate new image files by default. `PluginAsset` only supports `style` and
+`script` module specifiers, so Core currently exposes no supported way for a
+plugin to emit arbitrary binary files into the build output.
+
+`generate` and `outputDir` are reserved for a future release and do nothing
+today. Adding real encoding requires a Core file-emission API; until then,
+pre-generate the variants yourself (for example with an external image tool) and
+commit them next to the original image. Sites copy referenced vault assets into
+`public/` through `apps/web/scripts/build_images.ts`.
+
+## Exports
+
+- `responsiveImage(options?)` / `responsiveImagePlugin` — plugin factory
+- `resolveResponsiveImageOptions(options?)` — resolve defaults
+- `buildResponsiveSrcset(existingPaths, src, options?)` — pure srcset planner
+- `applyResponsiveImages(html, existingPaths, options?)` — HTML transform
+- `collectKnownAssetPaths(manifest)` — manifest asset set helper
+- Types: `ResponsiveImageOptions`, `ResolvedResponsiveImageOptions`,
+  `ResponsiveImagePlan`, `ResponsiveImageSource`, `ResponsiveImageVariant`

package/README_ja.md

@@ -0,0 +1,69 @@
+# @riebeckite/plugin-responsive-image
+
+既存の `<img>` に遅延読み込みと、レスポンシブな `<picture>` / `srcset` を付与するプラグインです。参照するのは、すでにコンテンツマニフェストに存在する画像バリアントだけです。
+
+[English](./README.md)
+
+## できること
+
+`responsiveImage()` はビルド時の HTML レイヤーとして動作します。
+
+1. `<img>` に `loading="lazy"` と `decoding="async"` を付与します。すでに属性がある場合は変更しません。
+2. `sizes` がなければ追加します。
+3. マニフェスト上に存在する兄弟バリアント（`photo.webp`、`photo.avif`、`photo-640.webp`、`photo-640.png` など）を探します。見つかれば `<img>` を `<picture>` に置き換え、形式ごとの `<source>` を並べます。見つからなければ `<img>` のまま、追加属性だけを残します。
+
+URL を捏造することはありません。ファイルを書き出すこともありません。マニフェストが把握しているアセットだけを参照します。
+
+## 設定
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { attachment } from "@riebeckite/plugin-attachment";
+import { obsidianMarkdown } from "@riebeckite/plugin-obsidian-markdown";
+import { responsiveImage } from "@riebeckite/plugin-responsive-image";
+
+export default defineConfig({
+  // ...
+  plugins: [obsidianMarkdown(), attachment(), responsiveImage()],
+});
+```
+
+`responsiveImage()` は `order: 100` で動作するため、メディアと添付ファイルのレンダラーより後に実行されます。
+
+## オプション
+
+| オプション | 型 | 既定値 | 内容 |
+| --- | --- | --- | --- |
+| `lazy` | `boolean` | `true` | 未指定時に `loading="lazy"` を付与 |
+| `decoding` | `boolean` | `true` | 未指定時に `decoding="async"` を付与 |
+| `sizes` | `string` | `"100vw"` | 未指定時に追加する `sizes` |
+| `widths` | `number[]` | `[640, 1280, 1920]` | 探索する幅バリアント |
+| `formats` | `string[]` | `["webp", "avif"]` | 探索する形式バリアント |
+| `className` | `string` | `"rb-responsive-image"` | `<picture>` に付与するクラス |
+| `generate` | `boolean` | `false` | 予約 |
+| `outputDir` | `string` | 未設定 | 予約 |
+
+## バリアントの探索
+
+バリアントは、マニフェストに登録済みのアセットパスと照合します。
+
+- 形式バリアント: `photo.webp`、`photo.avif`
+- 幅バリアント: `photo-640.webp`、`photo-1280.avif`、`photo-1920.png`
+- 元の形式の幅バリアント: `photo-640.png`
+
+元の `<img src>` は、サイトのアセット URL（`/attachments/photo.png`）と添付ファイル URL（`/assets/attachments/photo.png`）の両方を試して、マニフェスト上のアセットに対応付けます。対応するアセットが見つからない `<img>` はそのまま残します。
+
+## 制約: 画像のエンコードはしない
+
+このプラグインは、決定的な探索と HTML 変換だけを担当します。既定では新しい画像ファイルを生成しません。`PluginAsset` は `style` と `script` のモジュール指定子しか扱えず、プラグインが任意のバイナリファイルをビルド成果物へ出力する手段を Core は提供していません。
+
+`generate` と `outputDir` は将来のリリース向けの予約で、現在は何もしません。実際のエンコードには Core のファイル出力 API が必要です。それまでは、外部の画像ツールなどでバリアントを事前生成し、元画像の隣にコミットしてください。サイト側では `apps/web/scripts/build_images.ts` が、参照されたボールト内アセットを `public/` へコピーします。
+
+## 公開 API
+
+- `responsiveImage(options?)` / `responsiveImagePlugin` — プラグインファクトリ
+- `resolveResponsiveImageOptions(options?)` — 既定値の解決
+- `buildResponsiveSrcset(existingPaths, src, options?)` — 純粋な srcset 計画
+- `applyResponsiveImages(html, existingPaths, options?)` — HTML 変換
+- `collectKnownAssetPaths(manifest)` — マニフェストのアセット集合を取得
+- 型: `ResponsiveImageOptions`、`ResolvedResponsiveImageOptions`、`ResponsiveImagePlan`、`ResponsiveImageSource`、`ResponsiveImageVariant`

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { type ResponsiveImageOptions } from "./src/options.js";
+export type { ResolvedResponsiveImageOptions, ResponsiveImageOptions, } from "./src/options.js";
+export { DEFAULT_RESPONSIVE_IMAGE_CLASS, DEFAULT_RESPONSIVE_IMAGE_FORMATS, DEFAULT_RESPONSIVE_IMAGE_SIZES, DEFAULT_RESPONSIVE_IMAGE_WIDTHS, resolveResponsiveImageOptions, } from "./src/options.js";
+export type { ResponsiveImagePlan, ResponsiveImageSource, ResponsiveImageVariant, } from "./src/types.js";
+export { buildResponsiveSrcset, collectKnownAssetPaths } from "./src/srcset.js";
+export { rehypeResponsiveImage } from "./src/rehype.js";
+export { applyResponsiveImages } from "./src/html.js";
+/**
+ * Build-time responsive image layer.
+ *
+ * The plugin normalises `loading`, `decoding` and `sizes` on `<img>` elements
+ * during the HTML pipeline, then upgrades marked images into `<picture>` /
+ * `srcset` markup only when matching sibling variants already exist in the
+ * content manifest. It never fabricates URLs and never writes files.
+ */
+export declare function responsiveImage(options?: ResponsiveImageOptions): import("@riebeckite/core").RiebeckitePlugin<ResponsiveImageOptions>;
+export declare const responsiveImagePlugin: typeof responsiveImage;

package/dist/index.js

@@ -0,0 +1,429 @@
+// index.ts
+import {
+  createStyleAsset,
+  definePlugin
+} from "@riebeckite/core";
+
+// src/html.ts
+import { escapeHtmlAttribute } from "@riebeckite/core";
+
+// src/options.ts
+var DEFAULT_RESPONSIVE_IMAGE_CLASS = "rb-responsive-image";
+var DEFAULT_RESPONSIVE_IMAGE_SIZES = "100vw";
+var DEFAULT_RESPONSIVE_IMAGE_WIDTHS = [640, 1280, 1920];
+var DEFAULT_RESPONSIVE_IMAGE_FORMATS = ["webp", "avif"];
+function resolveResponsiveImageOptions(options = {}) {
+  return {
+    lazy: options.lazy ?? true,
+    decoding: options.decoding ?? true,
+    sizes: normalizeSizes(options.sizes),
+    widths: normalizeWidths(options.widths),
+    formats: normalizeFormats(options.formats),
+    className: normalizeClassName(options.className),
+    generate: options.generate ?? false,
+    outputDir: options.outputDir ?? null
+  };
+}
+function validateResponsiveImageOptions(options) {
+  if (!options) return [];
+  const issues = [];
+  for (const key of ["lazy", "decoding", "generate"]) {
+    if (options[key] !== void 0 && typeof options[key] !== "boolean") {
+      issues.push({ path: key, message: "Expected a boolean." });
+    }
+  }
+  if (options.sizes !== void 0 && (typeof options.sizes !== "string" || options.sizes.trim() === "")) {
+    issues.push({ path: "sizes", message: "Expected a non-empty string." });
+  }
+  if (options.className !== void 0 && (typeof options.className !== "string" || options.className.trim() === "")) {
+    issues.push({ path: "className", message: "Expected a non-empty string." });
+  }
+  if (options.widths !== void 0 && !isWidthList(options.widths)) {
+    issues.push({
+      path: "widths",
+      message: "Expected an array of positive integers."
+    });
+  }
+  if (options.formats !== void 0 && !isFormatList(options.formats)) {
+    issues.push({
+      path: "formats",
+      message: "Expected an array of non-empty strings."
+    });
+  }
+  if (options.outputDir !== void 0 && (typeof options.outputDir !== "string" || options.outputDir.trim() === "")) {
+    issues.push({ path: "outputDir", message: "Expected a non-empty string." });
+  }
+  return issues;
+}
+function normalizeSizes(value) {
+  const sizes = value?.trim();
+  return sizes ? sizes : DEFAULT_RESPONSIVE_IMAGE_SIZES;
+}
+function normalizeClassName(value) {
+  const className = value?.trim();
+  return className ? className : DEFAULT_RESPONSIVE_IMAGE_CLASS;
+}
+function normalizeWidths(value) {
+  if (!value) return [...DEFAULT_RESPONSIVE_IMAGE_WIDTHS];
+  const widths = Array.from(
+    new Set(
+      value.filter(
+        (width) => Number.isInteger(width) && width > 0
+      )
+    )
+  ).toSorted((a, b) => a - b);
+  return widths.length > 0 ? widths : [...DEFAULT_RESPONSIVE_IMAGE_WIDTHS];
+}
+function normalizeFormats(value) {
+  if (!value) return [...DEFAULT_RESPONSIVE_IMAGE_FORMATS];
+  const formats = [];
+  for (const candidate of value) {
+    if (typeof candidate !== "string") continue;
+    const format = candidate.trim().toLowerCase().replace(/^\.+/, "");
+    if (!/^[a-z0-9]+$/.test(format)) continue;
+    if (!formats.includes(format)) formats.push(format);
+  }
+  return formats.length > 0 ? formats : [...DEFAULT_RESPONSIVE_IMAGE_FORMATS];
+}
+function isWidthList(value) {
+  return Array.isArray(value) && value.every((item) => Number.isInteger(item) && item > 0);
+}
+function isFormatList(value) {
+  return Array.isArray(value) && value.every((item) => typeof item === "string" && item.trim() !== "");
+}
+
+// src/srcset.ts
+import {
+  attachmentUrl
+} from "@riebeckite/core";
+var FORMAT_MIME_TYPES = {
+  avif: "image/avif",
+  bmp: "image/bmp",
+  gif: "image/gif",
+  heic: "image/heic",
+  jpeg: "image/jpeg",
+  jpg: "image/jpeg",
+  jxl: "image/jxl",
+  png: "image/png",
+  svg: "image/svg+xml",
+  tiff: "image/tiff",
+  webp: "image/webp"
+};
+function buildResponsiveSrcset(existingPaths, src, options = {}) {
+  const resolved = resolveResponsiveImageOptions(options);
+  const known = toPathSet(existingPaths);
+  const match = matchKnownAsset(known, src);
+  if (!match) {
+    return { hasVariants: false, assetPath: null, sources: [], imgSrcset: "" };
+  }
+  const split = splitAssetPath(match.path);
+  if (!split) {
+    return { hasVariants: false, assetPath: null, sources: [], imgSrcset: "" };
+  }
+  const variants = collectVariants(split, resolved, known);
+  const urlFor = (path) => match.kind === "attachment" ? attachmentUrl(path) : `/${encodeAssetPath(path)}`;
+  const sources = [];
+  for (const format of resolved.formats) {
+    if (format === split.extension) continue;
+    const widthVariants = variants.filter((variant) => variant.format === format && variant.width !== void 0).toSorted((a, b) => (a.width ?? 0) - (b.width ?? 0));
+    if (widthVariants.length > 0) {
+      sources.push({
+        type: mimeTypeFor(format),
+        srcset: widthVariants.map((variant) => `${urlFor(variant.path)} ${variant.width}w`).join(", ")
+      });
+      continue;
+    }
+    const plainVariant = variants.find(
+      (variant) => variant.format === format && variant.width === void 0
+    );
+    if (plainVariant) {
+      sources.push({
+        type: mimeTypeFor(format),
+        srcset: urlFor(plainVariant.path)
+      });
+    }
+  }
+  const baseWidthVariants = variants.filter(
+    (variant) => variant.format === split.extension && variant.width !== void 0
+  ).toSorted((a, b) => (a.width ?? 0) - (b.width ?? 0));
+  const imgSrcset = baseWidthVariants.map((variant) => `${urlFor(variant.path)} ${variant.width}w`).join(", ");
+  return {
+    hasVariants: sources.length > 0 || imgSrcset !== "",
+    assetPath: match.path,
+    sources,
+    imgSrcset
+  };
+}
+function collectKnownAssetPaths(manifest) {
+  const paths = /* @__PURE__ */ new Set();
+  for (const entry of manifest.entries) {
+    for (const asset of entry.assets) paths.add(asset.path);
+  }
+  for (const path of manifest.byAsset.keys()) paths.add(path);
+  return paths;
+}
+function collectVariants(split, options, known) {
+  const variants = /* @__PURE__ */ new Map();
+  const add = (path, format, width) => {
+    if (path === joinAssetPath(split)) return;
+    if (!known.has(path)) return;
+    if (variants.has(path)) return;
+    variants.set(path, { path, format, width });
+  };
+  for (const format of options.formats) {
+    for (const width of options.widths) {
+      add(`${split.directory}${split.stem}-${width}.${format}`, format, width);
+    }
+    add(`${split.directory}${split.stem}.${format}`, format);
+  }
+  for (const width of options.widths) {
+    add(
+      `${split.directory}${split.stem}-${width}.${split.extension}`,
+      split.extension,
+      width
+    );
+  }
+  return [...variants.values()];
+}
+function matchKnownAsset(known, src) {
+  const clean = stripQueryAndFragment(src);
+  if (!clean || hasUrlScheme(clean)) return null;
+  const normalized = clean.startsWith("/") ? clean : `/${clean}`;
+  for (const path of known) {
+    if (normalized === `/${encodeAssetPath(path)}`) {
+      return { path, kind: "asset" };
+    }
+    if (normalized === attachmentUrl(path)) {
+      return { path, kind: "attachment" };
+    }
+  }
+  return null;
+}
+function splitAssetPath(path) {
+  const lastSlash = path.lastIndexOf("/");
+  const directory = path.slice(0, lastSlash + 1);
+  const fileName = path.slice(lastSlash + 1);
+  const dotIndex = fileName.lastIndexOf(".");
+  if (dotIndex <= 0 || dotIndex === fileName.length - 1) return null;
+  return {
+    directory,
+    stem: fileName.slice(0, dotIndex),
+    extension: fileName.slice(dotIndex + 1).toLowerCase()
+  };
+}
+function joinAssetPath(split) {
+  return `${split.directory}${split.stem}.${split.extension}`;
+}
+function mimeTypeFor(format) {
+  return FORMAT_MIME_TYPES[format] ?? `image/${format}`;
+}
+function toPathSet(paths) {
+  return paths instanceof Set ? paths : new Set(paths);
+}
+function stripQueryAndFragment(value) {
+  return value.split(/[?#]/, 1)[0] ?? "";
+}
+function hasUrlScheme(value) {
+  return /^[a-z][a-z0-9+.-]*:/i.test(value);
+}
+function encodeAssetPath(path) {
+  return path.split("/").map(encodeURIComponent).join("/");
+}
+
+// src/hast.ts
+function visitElements(node, visitor, parent, index) {
+  if (isElementNode(node)) {
+    visitor(node, parent, index);
+  }
+  for (const [childIndex, child] of [...getChildren(node)].entries()) {
+    visitElements(
+      child,
+      visitor,
+      isElementNode(node) ? node : parent,
+      childIndex
+    );
+  }
+}
+function isElementNode(node) {
+  return node.type === "element";
+}
+function getStringProperty(node, key) {
+  const value = node.properties?.[key];
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) return value.join(" ");
+  return null;
+}
+function hasProperty(node, key) {
+  return node.properties?.[key] !== void 0;
+}
+function ensureProperty(node, key, value) {
+  if (!node.properties) node.properties = {};
+  if (key in node.properties) return;
+  node.properties[key] = value;
+}
+function getChildren(node) {
+  const children = node.children;
+  return Array.isArray(children) ? children : [];
+}
+
+// src/rehype.ts
+var RESPONSIVE_IMAGE_MARKER = "data-responsive-image";
+var RESPONSIVE_IMAGE_SOURCE = "@riebeckite/plugin-responsive-image";
+var MARKER_PROPERTY = "dataResponsiveImage";
+function rehypeResponsiveImage(options = {}) {
+  const resolved = resolveResponsiveImageOptions(options);
+  return (tree, file) => {
+    visitElements(tree, (node) => {
+      if (node.tagName !== "img") return;
+      if (hasProperty(node, MARKER_PROPERTY)) return;
+      const src = getStringProperty(node, "src");
+      if (!src || src.trim() === "") {
+        warnMalformed(
+          file,
+          'An <img> element is missing a usable "src".'
+        );
+      }
+      if (resolved.lazy) ensureProperty(node, "loading", "lazy");
+      if (resolved.decoding) ensureProperty(node, "decoding", "async");
+      ensureProperty(node, "sizes", resolved.sizes);
+      if (!node.properties) node.properties = {};
+      node.properties[MARKER_PROPERTY] = "";
+    });
+  };
+}
+function warnMalformed(file, message) {
+  if (typeof file?.message !== "function") return;
+  file.message(message, { source: RESPONSIVE_IMAGE_SOURCE });
+}
+
+// src/html.ts
+var IMG_TAG_PATTERN = /<img\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
+var ATTRIBUTE_PATTERN = /([^\s"'=<>`/]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+function applyResponsiveImages(html, knownPaths, options = {}) {
+  if (!html.includes(RESPONSIVE_IMAGE_MARKER)) return html;
+  return html.replace(
+    IMG_TAG_PATTERN,
+    (tag) => transformImgTag(tag, knownPaths, options)
+  );
+}
+function transformImgTag(tag, knownPaths, options) {
+  const inner = tag.slice("<img".length, tag.length - 1);
+  const attributes = parseAttributes(inner);
+  if (!hasMarker(attributes)) return tag;
+  const src = findAttribute(attributes, "src")?.value ?? null;
+  if (!src || src.trim() === "") return tag;
+  const plan = buildResponsiveSrcset(knownPaths, src, options);
+  if (!plan.hasVariants) return tag;
+  const resolved = resolveResponsiveImageOptions(options);
+  const baseAttributes = attributes.filter(
+    (attribute) => attribute.name.toLowerCase() !== RESPONSIVE_IMAGE_MARKER
+  );
+  const imageAttributes = normalizeImageAttributes(baseAttributes, resolved);
+  if (plan.imgSrcset) {
+    setAttribute(imageAttributes, "srcset", plan.imgSrcset);
+  }
+  const sources = plan.sources.map(
+    (source) => `<source type="${escapeHtmlAttribute(source.type)}" srcset="${escapeHtmlAttribute(source.srcset)}" />`
+  ).join("");
+  const image = `<img ${serializeAttributes(imageAttributes)} />`;
+  return `<picture class="${escapeHtmlAttribute(resolved.className)}">${sources}${image}</picture>`;
+}
+function normalizeImageAttributes(attributes, resolved) {
+  const result = [...attributes];
+  if (resolved.lazy) ensureAttribute(result, "loading", "lazy");
+  if (resolved.decoding) ensureAttribute(result, "decoding", "async");
+  ensureAttribute(result, "sizes", resolved.sizes);
+  return result;
+}
+function ensureAttribute(attributes, name, value) {
+  if (findAttribute(attributes, name)) return;
+  attributes.push({ name, value, escaped: true });
+}
+function setAttribute(attributes, name, value) {
+  const existing = findAttribute(attributes, name);
+  if (existing) {
+    existing.value = value;
+    existing.escaped = true;
+    return;
+  }
+  attributes.push({ name, value, escaped: true });
+}
+function findAttribute(attributes, name) {
+  const target = name.toLowerCase();
+  return attributes.find(
+    (attribute) => attribute.name.toLowerCase() === target
+  );
+}
+function hasMarker(attributes) {
+  return findAttribute(attributes, RESPONSIVE_IMAGE_MARKER) !== void 0;
+}
+function parseAttributes(source) {
+  const attributes = [];
+  ATTRIBUTE_PATTERN.lastIndex = 0;
+  for (const match of source.matchAll(ATTRIBUTE_PATTERN)) {
+    attributes.push({
+      name: match[1],
+      value: match[2] ?? match[3] ?? match[4] ?? null,
+      escaped: false
+    });
+  }
+  return attributes;
+}
+function serializeAttributes(attributes) {
+  return attributes.map((attribute) => serializeAttribute(attribute)).join(" ");
+}
+function serializeAttribute(attribute) {
+  if (attribute.value === null) return attribute.name;
+  const value = attribute.escaped ? attribute.value : attribute.value.replace(/"/g, "&quot;");
+  return `${attribute.name}="${value}"`;
+}
+
+// index.ts
+var PLUGIN_NAME = "responsive-image";
+function responsiveImage(options = {}) {
+  const resolved = resolveResponsiveImageOptions(options);
+  const tracked = /* @__PURE__ */ new Map();
+  return definePlugin({
+    name: PLUGIN_NAME,
+    order: 100,
+    options,
+    validateOptions: validateResponsiveImageOptions,
+    extendHtmlPipeline: (pipeline) => {
+      pipeline.use(rehypeResponsiveImage, options);
+    },
+    onPostProcessed: (context) => {
+      tracked.set(context.slug, context.content);
+    },
+    onManifestCreated: (context) => {
+      const knownPaths = collectKnownAssetPaths(context.manifest);
+      for (const entry of context.manifest.entries) {
+        if (!entry.html.includes(RESPONSIVE_IMAGE_MARKER)) continue;
+        const html = applyResponsiveImages(entry.html, knownPaths, options);
+        if (html === entry.html) continue;
+        entry.html = html;
+        const content = tracked.get(entry.slug);
+        if (content) content.html = html;
+      }
+      if (resolved.generate) {
+        context.logger.warn(
+          "`generate` is reserved: image encoding is not implemented yet, so no images were generated."
+        );
+      }
+    },
+    assets: [createStyleAsset(PLUGIN_NAME)]
+  });
+}
+var responsiveImagePlugin = responsiveImage;
+export {
+  DEFAULT_RESPONSIVE_IMAGE_CLASS,
+  DEFAULT_RESPONSIVE_IMAGE_FORMATS,
+  DEFAULT_RESPONSIVE_IMAGE_SIZES,
+  DEFAULT_RESPONSIVE_IMAGE_WIDTHS,
+  applyResponsiveImages,
+  buildResponsiveSrcset,
+  collectKnownAssetPaths,
+  rehypeResponsiveImage,
+  resolveResponsiveImageOptions,
+  responsiveImage,
+  responsiveImagePlugin
+};

package/dist/src/hast.d.ts

@@ -0,0 +1,6 @@
+import type { ElementNode, HastNode } from "./types.js";
+export declare function visitElements(node: HastNode, visitor: (node: ElementNode, parent?: ElementNode, index?: number) => void, parent?: ElementNode, index?: number): void;
+export declare function isElementNode(node: HastNode): node is ElementNode;
+export declare function getStringProperty(node: ElementNode, key: string): string | null;
+export declare function hasProperty(node: ElementNode, key: string): boolean;
+export declare function ensureProperty(node: ElementNode, key: string, value: string): void;

package/dist/src/html.d.ts

@@ -0,0 +1,9 @@
+import type { ResponsiveImageOptions } from "./options.js";
+/**
+ * Manifest pass: replace marked `<img>` elements with a `<picture>` element
+ * built from sibling variants that already exist in the content manifest.
+ *
+ * This is the "dual mutation" step used by the query plugin: the manifest
+ * entry HTML and the cached `PostContent.html` must stay in sync.
+ */
+export declare function applyResponsiveImages(html: string, knownPaths: Iterable<string>, options?: ResponsiveImageOptions): string;

package/dist/src/options.d.ts

@@ -0,0 +1,58 @@
+import type { ConfigValidationIssue } from "@riebeckite/core";
+export declare const DEFAULT_RESPONSIVE_IMAGE_CLASS = "rb-responsive-image";
+export declare const DEFAULT_RESPONSIVE_IMAGE_SIZES = "100vw";
+export declare const DEFAULT_RESPONSIVE_IMAGE_WIDTHS: number[];
+export declare const DEFAULT_RESPONSIVE_IMAGE_FORMATS: string[];
+export type ResponsiveImageOptions = {
+    /**
+     * Add `loading="lazy"` to processed images when the attribute is absent.
+     * Defaults to `true`.
+     */
+    lazy?: boolean;
+    /**
+     * Add `decoding="async"` to processed images when the attribute is absent.
+     * Defaults to `true`.
+     */
+    decoding?: boolean;
+    /**
+     * Fallback `sizes` value added when the attribute is absent.
+     * Defaults to `"100vw"`.
+     */
+    sizes?: string;
+    /**
+     * Candidate widths used to look up pre-generated width variants.
+     * Defaults to `[640, 1280, 1920]`.
+     */
+    widths?: readonly number[];
+    /**
+     * Candidate formats used to look up pre-generated format variants.
+     * Defaults to `["webp", "avif"]`.
+     */
+    formats?: readonly string[];
+    /**
+     * Class name applied to the generated `<picture>` element.
+     * Defaults to `"rb-responsive-image"`.
+     */
+    className?: string;
+    /**
+     * Reserved. Binary encoding is not implemented because Core has no
+     * file-emission API for plugins. Prepared for a future release.
+     */
+    generate?: boolean;
+    /**
+     * Reserved. Only meaningful together with `generate`.
+     */
+    outputDir?: string;
+};
+export type ResolvedResponsiveImageOptions = {
+    lazy: boolean;
+    decoding: boolean;
+    sizes: string;
+    widths: readonly number[];
+    formats: readonly string[];
+    className: string;
+    generate: boolean;
+    outputDir: string | null;
+};
+export declare function resolveResponsiveImageOptions(options?: ResponsiveImageOptions): ResolvedResponsiveImageOptions;
+export declare function validateResponsiveImageOptions(options: ResponsiveImageOptions | undefined): readonly ConfigValidationIssue[];

package/dist/src/rehype.d.ts

@@ -0,0 +1,9 @@
+import type { ResponsiveImageOptions } from "./options.js";
+import type { HastNode } from "./types.js";
+export declare const RESPONSIVE_IMAGE_MARKER = "data-responsive-image";
+export declare const RESPONSIVE_IMAGE_SOURCE = "@riebeckite/plugin-responsive-image";
+/**
+ * HTML-pipeline pass: normalise the responsive attributes on every `<img>` and
+ * mark it so the manifest pass can wrap it once the asset set is known.
+ */
+export declare function rehypeResponsiveImage(options?: ResponsiveImageOptions): (tree: HastNode, file: unknown) => void;

package/dist/src/srcset.d.ts

@@ -0,0 +1,12 @@
+import { type ContentManifest } from "@riebeckite/core";
+import { type ResponsiveImageOptions } from "./options.js";
+import type { ResponsiveImagePlan } from "./types.js";
+/**
+ * Build the deterministic `<picture>` plan for a single image.
+ *
+ * Variants are only used when they already exist in `existingPaths`; the helper
+ * never fabricates URLs for files that are not part of the content manifest.
+ */
+export declare function buildResponsiveSrcset(existingPaths: Iterable<string>, src: string, options?: ResponsiveImageOptions): ResponsiveImagePlan;
+/** Collect every asset path the content manifest knows about. */
+export declare function collectKnownAssetPaths(manifest: ContentManifest): Set<string>;

package/dist/src/types.d.ts

@@ -0,0 +1,34 @@
+export type ElementNode = {
+    type: string;
+    tagName?: string;
+    properties?: Record<string, unknown>;
+    children?: HastNode[];
+};
+export type HastNode = ElementNode | {
+    type: string;
+    [key: string]: unknown;
+};
+export type HastFile = {
+    message(reason: string, options?: {
+        source?: string;
+    }): unknown;
+};
+export type ParsedAttribute = {
+    name: string;
+    value: string | null;
+};
+export type ResponsiveImageVariant = {
+    path: string;
+    format: string;
+    width?: number;
+};
+export type ResponsiveImageSource = {
+    type: string;
+    srcset: string;
+};
+export type ResponsiveImagePlan = {
+    hasVariants: boolean;
+    assetPath: string | null;
+    sources: ResponsiveImageSource[];
+    imgSrcset: string;
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@riebeckite/plugin-responsive-image",
+  "version": "0.0.1",
+  "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"
+    },
+    "./style.css": "./style.css"
+  },
+  "dependencies": {
+    "@riebeckite/core": "0.0.1"
+  },
+  "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/responsive-image"
+  },
+  "homepage": "https://github.com/Rerurate514/riebeckite#readme",
+  "bugs": {
+    "url": "https://github.com/Rerurate514/riebeckite/issues"
+  },
+  "description": "Responsive image markup and lazy loading for Riebeckite.",
+  "keywords": [
+    "riebeckite",
+    "plugin",
+    "images",
+    "responsive-images"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "sideEffects": [
+    "./style.css"
+  ],
+  "scripts": {
+    "build": "node ../../../scripts/build_package.mjs"
+  }
+}

package/style.css

@@ -0,0 +1,11 @@
+.rb-responsive-image {
+  display: block;
+  max-width: 100%;
+}
+
+.rb-responsive-image > img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}