@riebeckite/plugin-sidenotes 0.0.20 → 0.0.22

package/README.md

@@ -1,5 +1,7 @@
 # @riebeckite/plugin-sidenotes
 
+<!-- Generated from docs/docs/plugins/sidenotes.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
+
 Tufte-style side notes for Riebeckite. Authors keep writing ordinary GFM
 footnotes (`[^1]` and `[^1]: text`); the plugin rewrites the generated
 footnote markup into an inline reference plus a note that renders as a margin
@@ -16,11 +18,13 @@ core pipeline produces from `remark-gfm`:
   (`[data-rr-sidenotes-ref]`) that keeps its `href="#fn-…"` target, so the
   footnote stays reachable with plain browser navigation.
 - Each footnote definition becomes a `.rr-sidenotes__note` aside next to the
-  reference: a static **margin note** on desktop (`@media (min-width: 48rem)`)
-  and a **popover** on mobile (`@media (max-width: 48rem)`).
-- The trailing footnote definitions section is kept (it is the link target
-  on mobile and the no-JavaScript fallback) and hidden on desktop, where the
-  margin notes are always visible.
+  reference: an inline note from tablet width (`@media (min-width: 48rem)`), a
+  sticky **margin note** when there is room for an article rail
+  (`@media (min-width: 88rem)`), and a **popover** on mobile
+  (`@media (max-width: 48rem)`).
+- The trailing footnote definitions section is kept (it is the link target on
+  mobile and the no-JavaScript fallback) and hidden from tablet width up, where
+  the inline or margin notes are always visible.
 
 A small client entry (`initSidenotes`) toggles the mobile popover: tap to
 open/close, `Escape` to close, and click outside to close. It ignores the page
@@ -114,12 +118,12 @@ Stable hooks follow the `rr-sidenotes` convention: `rr-sidenotes__toggle`,
 ## Limitations
 
 - Footnotes that reuse the same definition share one margin note and popover.
-- The footnote definitions section is hidden on desktop; margins must have
-  room for the notes, and themes can restyle `.rr-sidenotes__note` freely.
+- The footnote definitions section is hidden from tablet width up. On widths
+  that cannot fit an article rail, notes remain in the article flow; themes can
+  restyle `.rr-sidenotes__note` freely.
 - Notes inside tables or deeply nested inline markup are placed after the
   nearest block ancestor, so their vertical position is approximate.
 
 ## See also
 
-- [Plugin guide](../../../docs/docs/reference/plugin-api.md)
-
+- [Plugin guide](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/plugin-api.md)

package/README_ja.md

@@ -1,5 +1,7 @@
 # @riebeckite/plugin-sidenotes
 
+<!-- Generated from docs/docs/plugins/sidenotes.ja.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
+
 Riebeckite 用の Tufte スタイルのサイドノート・プラグインです。執筆者は通常の
 GFM 脚注（`[^1]` と `[^1]: 本文`）をそのまま書き続けます。プラグインが生成
 された脚注マークアップを、インラインの参照リンクと、デスクトップではマージン
@@ -16,13 +18,14 @@ GFM 脚注（`[^1]` と `[^1]: 本文`）をそのまま書き続けます。プ
 - 脚注参照は `[data-rr-sidenotes-ref]` を持つ小さな参照リンク付きの `sup`
   になり、`href="#fn-…"` のリンク先は保持されます。通常のブラウザのリンク
   遷移でも脚注に到達できます。
-- 脚注定義は参照のそばの `.rr-sidenotes__note` の aside になります。
-  デスクトップ（`@media (min-width: 48rem)`）では常時表示の**マージンノート**、
-  モバイル（`@media (max-width: 48rem)`）では**ポップオーバー**として表示
-  されます。
+- 脚注定義は参照のそばの `.rr-sidenotes__note` の aside になります。タブレット
+  幅以上（`@media (min-width: 48rem)`）では本文中のノートとして表示し、記事の
+  横に置ける幅がある場合（`@media (min-width: 88rem)`）は sticky な**マージン
+  ノート**にします。モバイル（`@media (max-width: 48rem)`）では**ポップ
+  オーバー**として表示されます。
 - 文末の脚注定義セクションは残します（モバイルではリンク先、JavaScript が
-  無効な場合のフォールバックになります）。マージンノートが常に見える
-  デスクトップでは非表示にします。
+  無効な場合のフォールバックになります）。タブレット幅以上では本文中または
+  マージンのノートが常に見えるため、非表示にします。
 
 クライアントエントリ（`initSidenotes`）がモバイルのポップオーバーを切り替え
 ます。タップで開閉、`Escape` で閉じる、外側のクリックで閉じる、という動作です。
@@ -118,11 +121,12 @@ import "@riebeckite/plugin-sidenotes/style.css";
 
 - 同じ定義を再利用した脚注は、1 つのマージンノートとポップオーバーを共有
   します。
-- デスクトップでは脚注定義セクションを非表示にします。ノートを置くための
-  余白が必要です。テーマは `.rr-sidenotes__note` を自由に再スタイルできます。
+- タブレット幅以上では脚注定義セクションを非表示にします。記事の横に置けない
+  幅ではノートを本文フローに残します。テーマは `.rr-sidenotes__note` を自由に
+  再スタイルできます。
 - テーブル内や深く入れ子になったインライン要素の中の注は、最も近いブロック
   要素の後ろに置かれるため、縦位置はおおよその位置になります。
 
 ## 関連リンク
 
-- [プラグイン API](../../../docs/docs/reference/plugin-api.ja.md)
+- [プラグイン API](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/plugin-api.ja.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-sidenotes",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,7 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.20"
+    "@riebeckite/core": "0.0.22"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -87,41 +87,34 @@
   }
 }
 
-/* Desktop: static margin notes beside their paragraph anchor. */
 @media (min-width: 48rem) {
-  :is(
-    p,
-    li,
-    dd,
-    dt,
-    td,
-    th,
-    figcaption,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    blockquote
-  ):has(.rr-sidenotes__ref) {
-    position: relative;
-  }
-
   .rr-sidenotes__note {
-    position: absolute;
-    top: 0;
-    left: 100%;
-    width: var(--rr-sidenotes-width, 16rem);
-    max-width: calc(100vw - 100% - 1rem);
-    margin-left: var(--rb-space-3, 1.5rem);
-    padding-left: var(--rb-space-2, 1rem);
-    border-left: calc(var(--rb-rule-width, 1px) * 2) solid
+    max-inline-size: 100%;
+    margin-block: var(--rb-space-3, 1.5rem);
+    padding-inline-start: var(--rb-space-2, 1rem);
+    border-inline-start: calc(var(--rb-rule-width, 1px) * 2) solid
       var(--rr-sidenotes-rule);
   }
 
-  /* Margin notes are always visible, so the trailing definitions are hidden. */
   .rr-sidenotes__footnotes {
     display: none;
   }
 }
+
+@media (min-width: 88rem) {
+  .rr-sidenotes__note {
+    position: sticky;
+    top: var(--rr-sidenotes-sticky-top, var(--rb-space-4, 2rem));
+    width: min(
+      var(--rr-sidenotes-width, 16rem),
+      calc(
+        (100vw - var(--rb-layout-article-max, 48rem)) /
+        2 -
+        var(--rb-space-3, 1.5rem)
+      )
+    );
+    max-inline-size: none;
+    margin-block: 0;
+    margin-inline-start: calc(100% + var(--rb-space-3, 1.5rem));
+  }
+}