marksites 0.2.5 → 0.2.6

package/README.md

@@ -29,7 +29,7 @@ const html = markdownToHtml(markdown, {
 
 左ファイルサイドバーは幅280pxとし、開閉アイコンは枠線なしで表示します。更新日時はヘッダーのファイルパス右隣へ細い縦線で区切って表示し、狭い画面では省略します。
 
-画面上端には固定ヘッダーを表示します。濃色背景と白文字の`marksites`ロゴ、その右に現在のファイルパスを表示します。ファイルパスから開くポップオーバーは左ファイルサイドバーを閉じている場合だけ利用できます。ブラウザのタブ名は`marksites | <ファイル名>`形式です。右上の月・太陽アイコンでライト／ダークモードを切り替え、地球アイコンで生成UIの日本語／英語を切り替えます。Markdown本文、見出し、ファイル名、コメント本文は翻訳対象にしません。選択状態は`theme`と`lang` GETパラメータでページ間に引き継がれます。
+画面上端には固定ヘッダーを表示します。濃色背景と白文字の`marksites`ロゴ、その右に現在のファイルパスを表示します。ファイルパスから開くポップオーバーは左ファイルサイドバーを閉じている場合だけ利用できます。ブラウザのタブ名は`marksites | <ファイル名>`形式です。右上では差分アイコンで前回正常ビルドからの変更と最新版を切り替え、その右の月・太陽アイコンでライト／ダークモード、地球アイコンで生成UIの日本語／英語を切り替えます。差分がなければ差分アイコンは非活性です。差分表示の希望状態は`document-view=diff`として保持し、差分のないページを経由してもHTMLページ間で引き継ぎます。Markdown本文、見出し、ファイル名、コメント本文は翻訳対象にしません。テーマと言語の選択状態も`theme`と`lang` GETパラメータでページ間に引き継がれます。
 
 ```ts
 const html = markdownToHtml(markdown, {
@@ -93,7 +93,7 @@ npx marksites docs
 
 入力フォルダ配下の`.gitignore`を読み込み、Gitと同じパターン規則で除外されたファイルとフォルダを変換対象から外します。ネストした`.gitignore`と`!`による再包含にも対応します。また、`.marksites-build.json`を持つ既存の生成フォルダと、今回指定された出力フォルダは常に探索対象外です。
 
-2回目以降はMarkdown本文、コメント、ファイル構成、レンダー設定のSHA-256を比較し、影響したHTMLだけを再生成します。管理情報は出力先直下の `.marksites-build.json`、文書ごとのメタデータは各HTMLに隣接する `.<名前>.json` に保存されます。このJSONは再変換時にも上書きされません。現在はコメント情報を格納し、将来は文書固有のほかの情報も管理できるファイルとして扱います。
+2回目以降はMarkdown本文、コメント、ファイル構成、レンダー設定のSHA-256を比較し、影響したHTMLだけを再生成します。前回正常ビルド時のMarkdownは出力先の`.marksites-history/`へ文書ごとに1世代だけ保持し、現在版とのブロック差分を生成HTMLへ埋め込みます。管理情報は出力先直下の `.marksites-build.json`、文書ごとのメタデータは各HTMLに隣接する `.<名前>.json` に保存されます。このJSONは再変換時にも上書きされません。現在はコメント情報を格納し、将来は文書固有のほかの情報も管理できるファイルとして扱います。
 
 ### コメントを編集する
 
@@ -101,6 +101,8 @@ npx marksites docs
 
 本文で文字列を選択すると、コピー操作の隣に`文字列置換`が表示されます。選択文字列を変換元として画面中央の管理ポップアップへ置換後の文字列を入力すると、表示中の本文にある同じ文字列をすべてブラウザ上で一時的に置換でき、アクセストークンなどを当てはめてからコピーできます。本文カード右上の`置換`ボタンから選択なしで新しいルールを追加することもでき、複数ルールを一覧で管理して個別にクリアできます。ポップアップは閉じるアイコンまたは範囲外のクリックで閉じます。置換箇所は枠付きでハイライトされます。置換値自体は管理ボタンへ表示しません。元のMarkdownと生成HTMLは変更されず、ページを再読み込みしても元に戻ります。
 
+ポップアップ表示中は背後が薄く暗くなります。一覧のルールを個別にクリアしてもポップアップは閉じないため、そのまま続けて管理できます。
+
 右サイドバーでは目次と現在ページのコメント一覧をタブで切り替えられます。タブにはコメント件数が表示され、コメントを選ぶと本文の対象箇所へ移動します。一覧先頭の追加ボタンから、範囲を選択しない文書全体へのコメントも作成できます。ヘッダーは固定され、各パネルは独立してスクロールします。
 
 ```sh

package/dist/conversion/directory.js

@@ -9,6 +9,7 @@ import { buildBreadcrumbs, buildFileTree } from "./navigation.js";
 import { DEFAULT_OUTPUT_DIRECTORY, findMarkdownFiles, firstExistingPath, pathExists, toLegacyMetadataPaths, } from "./paths.js";
 import { GENERATOR_VERSION, OUTPUT_COMPATIBILITY_VERSION, contentHash, renderFingerprint, rewriteMarkdownLinks, } from "./rendering.js";
 import { prepareImageAssets } from "./assets.js";
+import { readHistory, removeHistory, toHistoryPath, writeHistory, } from "./history.js";
 async function migrateLegacyMetadata(files, output) {
     let moved = 0;
     for (const file of files) {
@@ -35,6 +36,12 @@ async function loadSources(files) {
         file.modifiedAt = sourceStat.mtime.toISOString();
     }
 }
+async function loadHistories(files, previous, output) {
+    for (const file of files) {
+        file.historyPath = toHistoryPath(file.relativePath);
+        file.previousSource = await readHistory(output, previous?.files[file.relativePath]?.history);
+    }
+}
 async function prepareAssets(files, output) {
     for (const file of files) {
         const assets = await prepareImageAssets(file.source, file.sourcePath, file.outputPath, output);
@@ -78,6 +85,7 @@ async function moveRenamedDocuments(files, previous, output, removed) {
             await rm(oldHtml);
             deleted++;
         }
+        await removeHistory(output, oldData.history);
         warnAboutStaleLinks(files, old);
         removed.splice(removed.indexOf(old), 1);
     }
@@ -118,6 +126,7 @@ async function removeDeletedHtml(removed, previous, output) {
         if (await pathExists(join(output, ...info.annotations.split("/")))) {
             orphaned.push(info.annotations);
         }
+        await removeHistory(output, info.history);
     }
     return { deleted, orphaned };
 }
@@ -150,7 +159,7 @@ async function renderChangedFiles(files, input, output, previous, full, options)
                         file.rewriteImages?.(token);
                     },
                 },
-            }, file.annotations));
+            }, file.annotations, file.previousSource));
             converted++;
             options.onLog?.(`Converted ${file.relativePath} -> ${file.outputPath}`);
         }
@@ -166,6 +175,7 @@ async function renderChangedFiles(files, input, output, previous, full, options)
             annotations: file.metadataPath,
             assetHash: file.assetHash,
             assets: file.assetOutputs,
+            history: file.historyPath,
         };
     }
     return { converted, skipped, files: manifestFiles };
@@ -190,6 +200,7 @@ export async function convertDirectoryDetailed(input, outputArgument, options =
         console.warn(loaded.warning);
     const previous = loaded.manifest;
     await loadSources(files);
+    await loadHistories(files, previous, output);
     await prepareAssets(files, output);
     let annotationsMoved = await migrateLegacyMetadata(files, output);
     const currentPaths = new Set(files.map((file) => file.relativePath));
@@ -211,6 +222,9 @@ export async function convertDirectoryDetailed(input, outputArgument, options =
         previous.treeHash !== treeHash;
     const removedResult = await removeDeletedHtml(removed, previous, output);
     const rendered = await renderChangedFiles(files, input, output, previous, full, options);
+    for (const file of files) {
+        await writeHistory(output, file.historyPath, file.source);
+    }
     await removeUnusedAssets(previous, files, output);
     await writeManifest(manifestPath, {
         schemaVersion: 1,

package/dist/conversion/history.d.ts

@@ -0,0 +1,4 @@
+export declare function toHistoryPath(documentPath: string): string;
+export declare function readHistory(outputRoot: string, historyPath: string | undefined): Promise<string | undefined>;
+export declare function writeHistory(outputRoot: string, historyPath: string, markdown: string): Promise<void>;
+export declare function removeHistory(outputRoot: string, historyPath: string | undefined): Promise<void>;

package/dist/conversion/history.js

@@ -0,0 +1,33 @@
+import { createHash } from "node:crypto";
+import { readFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import { atomicWriteFile } from "../utils/files.js";
+const HISTORY_DIRECTORY = ".marksites-history";
+const HISTORY_PATH = /^\.marksites-history\/[a-f0-9]{64}\.md$/;
+function isHistoryPath(path) {
+    return path !== undefined && HISTORY_PATH.test(path);
+}
+export function toHistoryPath(documentPath) {
+    const id = createHash("sha256").update(documentPath).digest("hex");
+    return `${HISTORY_DIRECTORY}/${id}.md`;
+}
+export async function readHistory(outputRoot, historyPath) {
+    if (!isHistoryPath(historyPath))
+        return undefined;
+    try {
+        return await readFile(join(outputRoot, ...historyPath.split("/")), "utf8");
+    }
+    catch (error) {
+        if (error.code === "ENOENT")
+            return undefined;
+        throw error;
+    }
+}
+export async function writeHistory(outputRoot, historyPath, markdown) {
+    await atomicWriteFile(join(outputRoot, ...historyPath.split("/")), markdown);
+}
+export async function removeHistory(outputRoot, historyPath) {
+    if (!isHistoryPath(historyPath))
+        return;
+    await rm(join(outputRoot, ...historyPath.split("/")), { force: true });
+}

package/dist/conversion/rendering.d.ts

@@ -1,6 +1,6 @@
 import type { Token } from "marked";
 export declare const GENERATOR_VERSION: string;
-export declare const OUTPUT_COMPATIBILITY_VERSION = 7;
+export declare const OUTPUT_COMPATIBILITY_VERSION = 8;
 export declare function contentHash(value: string | Buffer): string;
 export declare function rewriteMarkdownLinks(token: Token): void;
 export declare function renderFingerprint(): string;

package/dist/conversion/rendering.js

@@ -4,7 +4,7 @@ import { emptyAnnotationDocument } from "../annotations/model.js";
 import { renderMarkdown } from "../markdown-to-html.js";
 const packageMetadata = JSON.parse(readFileSync(new URL("../../package.json", import.meta.url), "utf8"));
 export const GENERATOR_VERSION = packageMetadata.version;
-export const OUTPUT_COMPATIBILITY_VERSION = 7;
+export const OUTPUT_COMPATIBILITY_VERSION = 8;
 export function contentHash(value) {
     return `sha256:${createHash("sha256").update(value).digest("hex")}`;
 }

package/dist/conversion/single-file.js

@@ -5,6 +5,7 @@ import { renderMarkdown } from "../markdown-to-html.js";
 import { atomicWriteFile } from "../utils/files.js";
 import { DEFAULT_OUTPUT_DIRECTORY, firstExistingPath, isMarkdown, pathExists, } from "./paths.js";
 import { prepareImageAssets } from "./assets.js";
+import { readHistory, toHistoryPath, writeHistory } from "./history.js";
 export async function convertFile(input, outputArgument) {
     if (!isMarkdown(input))
         throw new Error(`Input file must use .md or .markdown: ${input}`);
@@ -29,12 +30,16 @@ export async function convertFile(input, outputArgument) {
     ]);
     await mkdir(dirname(output), { recursive: true });
     const assets = await prepareImageAssets(markdown, input, basename(output), dirname(output));
+    const outputRoot = dirname(output);
+    const historyPath = toHistoryPath(basename(output));
+    const previousSource = await readHistory(outputRoot, historyPath);
     await atomicWriteFile(output, renderMarkdown(markdown, {
         title: basename(input, extname(input)),
         modifiedAt: sourceStat.mtime.toISOString(),
         markedOptions: {
             walkTokens: assets.rewrite,
         },
-    }, annotations));
+    }, annotations, previousSource));
+    await writeHistory(outputRoot, historyPath, markdown);
     return output;
 }

package/dist/conversion/types.d.ts

@@ -12,6 +12,8 @@ export interface MarkdownFile {
     assetHash?: string;
     assetOutputs?: string[];
     rewriteImages?: (token: import("marked").Token) => void;
+    previousSource?: string;
+    historyPath?: string;
 }
 export interface ManifestFile {
     sourceHash: string;
@@ -21,6 +23,7 @@ export interface ManifestFile {
     annotations: string;
     assetHash?: string;
     assets?: string[];
+    history?: string;
 }
 export interface BuildManifest {
     schemaVersion: 1;

package/dist/features/annotations/index.js

@@ -39,6 +39,7 @@ export function createAnnotationsFeature(data) {
 .selection-actions button:hover:not(:disabled){background:#57606a}.selection-actions button:disabled{color:#8c959f;cursor:not-allowed}
 .selection-actions [data-tooltip],.annotations-panel [data-tooltip]{position:relative}.selection-actions [data-tooltip]::after,.annotations-panel [data-tooltip]::after{position:absolute;z-index:30;top:calc(100% + 6px);right:0;width:max-content;max-width:220px;padding:5px 7px;color:#fff;font-size:.6875rem;font-weight:400;line-height:1.3;white-space:normal;background:#24292f;border-radius:4px;box-shadow:0 3px 10px rgba(31,35,40,.2);content:attr(data-tooltip);opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity 120ms ease,transform 120ms ease}.selection-actions [data-tooltip]:hover::after,.selection-actions [data-tooltip]:focus-visible::after,.annotations-panel [data-tooltip]:hover::after,.annotations-panel [data-tooltip]:focus-visible::after{opacity:1;transform:translateY(0)}
 .markdown-content{position:relative}.document-replacement-menu{position:absolute;top:12px;right:12px;display:inline-flex;height:32px;align-items:center;justify-content:center;gap:6px;padding:0 9px;color:var(--fgColor-muted,#59636e);font:inherit;font-size:.75rem;font-weight:600;background:var(--button-default-bgColor-rest,#f6f8fa);border:1px solid var(--borderColor-default,#d0d7de);border-radius:6px;cursor:pointer}.document-replacement-menu:hover{color:var(--fgColor-default,#1f2328);background:var(--button-default-bgColor-hover,#eaeef2)}.document-replacement-menu:focus-visible{outline:2px solid var(--focus-outlineColor,#0969da);outline-offset:2px}.document-replacement-menu svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}.document-replacement-menu>span:not(.text-replacement-count){line-height:16px}.text-replace-alert{position:fixed;z-index:45;top:50%;left:50%;box-sizing:border-box;display:grid;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 24px);grid-template-columns:1fr 1fr;gap:10px;padding:12px;overflow-y:auto;color:var(--fgColor-default,#1f2328);background:var(--bgColor-default,#fff);border:1px solid var(--borderColor-default,#d0d7de);border-radius:6px;box-shadow:0 8px 24px rgba(31,35,40,.2);transform:translate(-50%,-50%)}.text-replace-alert-heading,.text-replacement-list{grid-column:1/-1}.text-replace-alert-heading{display:flex;align-items:center;justify-content:space-between}.text-replace-alert label{display:block;min-width:0}.text-replace-alert label span{display:block;margin-bottom:5px;color:var(--fgColor-muted,#59636e);font-size:.75rem;font-weight:600}.text-replace-alert input{box-sizing:border-box;width:100%;height:34px;padding:5px 8px;color:var(--fgColor-default,#1f2328);font:inherit;background:var(--bgColor-default,#fff);border:1px solid var(--borderColor-default,#d0d7de);border-radius:6px}.text-replace-alert input:focus{border-color:var(--borderColor-accent-emphasis,#0969da);outline:2px solid var(--bgColor-accent-muted,#ddf4ff)}.text-replace-error{grid-column:1/-1;margin:0;color:var(--fgColor-danger,#d1242f);font-size:.75rem}.text-replace-error[hidden]{display:none}.text-replace-alert-actions{display:flex;grid-column:1/-1;justify-content:flex-end;gap:6px}.text-replace-alert button{height:34px;padding:0 10px;color:var(--fgColor-default,#1f2328);font:inherit;font-size:.8125rem;font-weight:600;background:var(--button-default-bgColor-rest,#f6f8fa);border:1px solid var(--borderColor-default,#d0d7de);border-radius:6px;cursor:pointer}.text-replace-alert button[type=submit]{color:#fff;background:var(--button-primary-bgColor-rest,#1f883d);border-color:transparent}.text-replace-alert .text-replace-alert-heading button{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;padding:0;color:var(--fgColor-muted,#59636e);background:transparent;border:0;border-radius:4px}.text-replace-alert .text-replace-alert-heading button:hover{color:var(--fgColor-default,#1f2328);background:var(--button-default-bgColor-hover,#eaeef2)}.text-replace-alert .text-replace-alert-heading button:focus-visible{color:var(--fgColor-default,#1f2328);background:var(--button-default-bgColor-hover,#eaeef2);outline:2px solid var(--focus-outlineColor,#0969da);outline-offset:1px}.text-replace-alert-heading button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.text-replacement-list:empty{display:none}.text-replacement-rule{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--borderColor-muted,#d8dee4);font-size:.75rem}.text-replacement-rule code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-replacement-rule button{height:28px;padding:0 8px}.text-replacement{padding:1px 2px;background:var(--bgColor-accent-muted,#ddf4ff);border:1px solid var(--borderColor-accent-emphasis,#0969da);border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.text-replacement-count{display:inline-flex;min-width:16px;height:16px;align-items:center;justify-content:center;margin-left:3px;padding:0 3px;color:#fff;font-size:.6875rem;line-height:16px;background:var(--fgColor-accent,#0969da);border-radius:999px}
+.text-replace-alert:not([hidden]){box-shadow:0 0 0 100vmax rgba(31,35,40,.18),0 8px 24px rgba(31,35,40,.2)}
 .annotations-panel{color:var(--fgColor-default,#1f2328)}
 .annotations-actions{position:sticky;z-index:1;top:-12px;display:flex;gap:8px;margin:-12px -12px 0;padding:10px 12px;background:var(--bgColor-default,#fff);border-bottom:1px solid var(--borderColor-muted,#d8dee4)}.annotations-panel button{padding:6px 10px;color:var(--fgColor-default,#1f2328);font:inherit;font-size:.8125rem;font-weight:600;background:var(--button-default-bgColor-rest,#f6f8fa);border:1px solid var(--borderColor-default,#d0d7de);border-radius:6px;cursor:pointer}.annotations-panel button:hover:not(:disabled){background:var(--button-default-bgColor-hover,#eaeef2)}.annotations-panel button:focus-visible{outline:2px solid var(--focus-outlineColor,#0969da);outline-offset:2px}.annotations-panel button:disabled{color:var(--fgColor-muted,#818b98);cursor:not-allowed}.annotations-actions button{display:inline-flex;min-width:0;flex:1;align-items:center;justify-content:center;gap:5px}.annotations-panel .annotation-action-add:not(:disabled){color:#fff;background:var(--button-primary-bgColor-rest,#1f883d);border-color:var(--button-primary-borderColor-rest,#1f232826)}.annotations-panel .annotation-action-add:hover:not(:disabled){background:var(--button-primary-bgColor-hover,#1a7f37)}.annotations-panel .annotation-action-copy{color:var(--fgColor-muted,#59636e);background:transparent;border-color:var(--borderColor-muted,#d8dee4)}
 .annotations-empty{margin:0;padding:28px 12px 20px;color:var(--fgColor-muted,#59636e);font-size:.8125rem;line-height:1.6;text-align:center}
@@ -72,6 +73,7 @@ function closeReplacementMenu(){replaceAlert.hidden=true;replacementMenu.setAttr
 function replaceText(search,replacement){const id=++replacementSequence,walker=document.createTreeWalker(content,NodeFilter.SHOW_TEXT,{acceptNode:node=>node.parentElement?.closest(excluded+',.text-replacement')?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}),nodes=[];let node,total=0;while(node=walker.nextNode())nodes.push(node);for(const text of nodes){const parts=text.data.split(search);if(parts.length===1)continue;const fragment=document.createDocumentFragment();parts.forEach((part,index)=>{fragment.append(document.createTextNode(part));if(index<parts.length-1){const mark=document.createElement('span');mark.className='text-replacement';mark.dataset.replacementId=String(id);mark.textContent=replacement;fragment.append(mark);total++}});text.replaceWith(fragment)}if(total)replacementRules.push({id,search,replacement,total});renderReplacementRules()}
 document.addEventListener('selectionchange',()=>{clearTimeout(window.__marksitesSelectionTimer);window.__marksitesSelectionTimer=setTimeout(()=>{const next=selectionData();if(!next){toolbar.hidden=true;return}pendingSelection=next;const r=getSelection().getRangeAt(0).getBoundingClientRect();toolbar.style.left=Math.max(8,Math.min(innerWidth-toolbar.offsetWidth-8,r.left))+'px';toolbar.style.top=Math.max(8,r.top-44)+'px';toolbar.hidden=false},80)});
 toolbar.addEventListener('mousedown',e=>e.preventDefault());toolbar.addEventListener('click',async e=>{const button=e.target.closest('button');if(!button||!pendingSelection)return;const label=button.querySelector('[data-copy-label]');try{if(button.dataset.selectionAction==='copy')await copy(pendingSelection.exact);if(button.dataset.selectionAction==='replace'){openReplacementMenu(pendingSelection.exact);toolbar.hidden=true}if(button.dataset.selectionAction==='ai')await copy('文書: '+state.document+'\\n見出し: '+(pendingSelection.headingId||'なし')+'\\n\\n> '+pendingSelection.exact.replace(/\\n/g,'\\n> '));if(button.dataset.selectionAction==='comment'&&editable){editingId=null;dispatchEvent(new Event('marksites:show-comments'));openForm()}if(label){label.textContent='コピーしました';setTimeout(()=>label.textContent=button.dataset.selectionAction==='ai'?'AI向けコピー':'コピー',1000)}}catch{if(label)label.textContent='コピー失敗'}});
+replacementList.addEventListener('click',e=>{if(e.target.closest('[data-clear-replacement]'))e.stopPropagation()});
 replaceAlert.addEventListener('submit',e=>{e.preventDefault();const search=replaceAlert.search.value,replacement=replaceAlert.replacement.value;if(!search){setReplacementError('置換する文字列を入力してください。');replaceAlert.search.focus();return}if(!replacement){setReplacementError('置換後の文字列を入力してください。');replaceAlert.replacement.focus();return}const before=replacementRules.length;replaceText(search,replacement);if(replacementRules.length===before){setReplacementError('置換する文字列が本文内に見つかりません。');replaceAlert.search.focus();return}setReplacementError();replaceAlert.search.value='';replaceAlert.replacement.value='';replaceAlert.search.focus();getSelection()?.removeAllRanges()});replaceAlert.addEventListener('input',()=>setReplacementError());replaceAlert.querySelectorAll('[data-cancel-replace]').forEach(button=>button.addEventListener('click',closeReplacementMenu));replacementMenu.addEventListener('click',()=>{if(replaceAlert.hidden)openReplacementMenu();else closeReplacementMenu()});replacementList.addEventListener('click',e=>{const button=e.target.closest('[data-clear-replacement]');if(!button)return;const id=Number(button.dataset.clearReplacement),rule=replacementRules.find(item=>item.id===id);if(!rule)return;for(const mark of content.querySelectorAll('.text-replacement[data-replacement-id="'+id+'"]'))mark.replaceWith(document.createTextNode(rule.search));replacementRules=replacementRules.filter(item=>item.id!==id);renderReplacementRules()});
 document.addEventListener('click',e=>{if(replaceAlert.hidden||replaceAlert.contains(e.target)||replacementMenu.contains(e.target)||e.target.closest('[data-selection-action=replace]'))return;closeReplacementMenu()});
 addDocumentComment.addEventListener('click',()=>{if(!editable)return;editingId=null;pendingSelection={exact:'',prefix:'',suffix:'',headingId:null,startOffset:0,endOffset:0};openForm()});

package/dist/features/document-diff/index.d.ts

@@ -0,0 +1,9 @@
+import { type MarkedOptions } from "marked";
+export interface DocumentDiffFeature {
+    content: string;
+    control: string;
+    styles: string;
+    script: string;
+    hasChanges: boolean;
+}
+export declare function createDocumentDiffFeature(current: string, previous: string | undefined, markedOptions?: Omit<MarkedOptions, "async" | "renderer">): DocumentDiffFeature;

package/dist/features/document-diff/index.js

@@ -0,0 +1,416 @@
+import GithubSlugger from "github-slugger";
+import { marked, Renderer } from "marked";
+import { escapeHtml, plainTextFromHtml } from "../../utils/html.js";
+function tokenRaw(token) {
+    return "raw" in token && typeof token.raw === "string" ? token.raw : "";
+}
+function diffBlocks(previous, current) {
+    const blocks = (markdown) => marked
+        .lexer(markdown)
+        .filter((token) => token.type !== "space")
+        .map((token) => ({
+        raw: tokenRaw(token),
+        key: tokenRaw(token).replace(/[ \t]+$/gm, "").trim(),
+        tokenType: token.type,
+    }))
+        .filter(({ raw }) => Boolean(raw));
+    const oldBlocks = blocks(previous);
+    const newBlocks = blocks(current);
+    if (oldBlocks.length * newBlocks.length > 2_000_000) {
+        return [
+            ...oldBlocks.map(({ raw, tokenType }) => ({ kind: "delete", raw, tokenType })),
+            ...newBlocks.map(({ raw, tokenType }) => ({ kind: "insert", raw, tokenType })),
+        ];
+    }
+    const lengths = Array.from({ length: oldBlocks.length + 1 }, () => new Uint32Array(newBlocks.length + 1));
+    for (let oldIndex = oldBlocks.length - 1; oldIndex >= 0; oldIndex--) {
+        for (let newIndex = newBlocks.length - 1; newIndex >= 0; newIndex--) {
+            lengths[oldIndex][newIndex] =
+                oldBlocks[oldIndex].key === newBlocks[newIndex].key
+                    ? lengths[oldIndex + 1][newIndex + 1] + 1
+                    : Math.max(lengths[oldIndex + 1][newIndex], lengths[oldIndex][newIndex + 1]);
+        }
+    }
+    const parts = [];
+    let oldIndex = 0;
+    let newIndex = 0;
+    while (oldIndex < oldBlocks.length || newIndex < newBlocks.length) {
+        if (oldIndex < oldBlocks.length &&
+            newIndex < newBlocks.length &&
+            oldBlocks[oldIndex].key === newBlocks[newIndex].key) {
+            parts.push({ kind: "same", raw: newBlocks[newIndex].raw, tokenType: newBlocks[newIndex].tokenType });
+            oldIndex++;
+            newIndex++;
+        }
+        else if (newIndex < newBlocks.length &&
+            (oldIndex === oldBlocks.length ||
+                lengths[oldIndex][newIndex + 1] >
+                    lengths[oldIndex + 1][newIndex])) {
+            const block = newBlocks[newIndex++];
+            parts.push({ kind: "insert", raw: block.raw, tokenType: block.tokenType });
+        }
+        else {
+            const block = oldBlocks[oldIndex++];
+            parts.push({ kind: "delete", raw: block.raw, tokenType: block.tokenType });
+        }
+    }
+    return parts;
+}
+function prefixIds(html) {
+    return html
+        .replace(/\bid="([^"]+)"/g, 'id="diff-$1"')
+        .replace(/\bhref="#([^"]+)"/g, 'href="#diff-$1"');
+}
+function wordDiff(previous, current) {
+    const segmenter = new Intl.Segmenter("ja", { granularity: "word" });
+    const oldParts = [...segmenter.segment(previous)].map(({ segment }) => segment);
+    const newParts = [...segmenter.segment(current)].map(({ segment }) => segment);
+    if (oldParts.length * newParts.length > 100_000)
+        return `<del class="document-diff-inline-delete">${escapeHtml(previous)}</del><ins class="document-diff-inline-insert">${escapeHtml(current)}</ins>`;
+    const lengths = Array.from({ length: oldParts.length + 1 }, () => new Uint32Array(newParts.length + 1));
+    for (let oldIndex = oldParts.length - 1; oldIndex >= 0; oldIndex--) {
+        for (let newIndex = newParts.length - 1; newIndex >= 0; newIndex--) {
+            lengths[oldIndex][newIndex] =
+                oldParts[oldIndex] === newParts[newIndex]
+                    ? lengths[oldIndex + 1][newIndex + 1] + 1
+                    : Math.max(lengths[oldIndex + 1][newIndex], lengths[oldIndex][newIndex + 1]);
+        }
+    }
+    const output = [];
+    let oldIndex = 0;
+    let newIndex = 0;
+    let kind;
+    let buffer = "";
+    const flush = () => {
+        if (!buffer)
+            return;
+        output.push(kind === "delete"
+            ? `<del class="document-diff-inline-delete">${buffer}</del>`
+            : kind === "insert"
+                ? `<ins class="document-diff-inline-insert">${buffer}</ins>`
+                : buffer);
+        buffer = "";
+    };
+    const append = (nextKind, value) => {
+        if (kind !== nextKind)
+            flush();
+        kind = nextKind;
+        buffer += escapeHtml(value);
+    };
+    while (oldIndex < oldParts.length || newIndex < newParts.length) {
+        if (oldIndex < oldParts.length &&
+            newIndex < newParts.length &&
+            oldParts[oldIndex] === newParts[newIndex]) {
+            append("same", newParts[newIndex]);
+            oldIndex++;
+            newIndex++;
+        }
+        else if (newIndex < newParts.length &&
+            (oldIndex === oldParts.length ||
+                lengths[oldIndex][newIndex + 1] >
+                    lengths[oldIndex + 1][newIndex])) {
+            append("insert", newParts[newIndex++]);
+        }
+        else {
+            append("delete", oldParts[oldIndex++]);
+        }
+    }
+    flush();
+    return output.join("");
+}
+function oneToken(raw) {
+    const tokens = marked.lexer(raw).filter((token) => token.type !== "space");
+    return tokens.length === 1 ? tokens[0] : undefined;
+}
+function inlineTokens(markdown) {
+    return marked.Lexer.lexInline(markdown);
+}
+function renderInlineToken(token, deleted = false) {
+    if (token.type === "link") {
+        const href = escapeHtml(String(token.href ?? ""));
+        const title = token.title
+            ? ` title="${escapeHtml(String(token.title))}"`
+            : "";
+        const disabled = deleted
+            ? ' class="document-diff-link-delete" aria-disabled="true" tabindex="-1"'
+            : "";
+        return `<a href="${href}"${title}${disabled}>${marked.parseInline(String(token.text ?? ""), { async: false })}</a>`;
+    }
+    return marked.parseInline(String(token.raw ?? ""), { async: false });
+}
+function inlineTokenDiff(previous, current) {
+    const oldTokens = inlineTokens(previous);
+    const newTokens = inlineTokens(current);
+    const output = [];
+    for (let index = 0; index < Math.max(oldTokens.length, newTokens.length); index++) {
+        const oldToken = oldTokens[index];
+        const newToken = newTokens[index];
+        if (!oldToken && newToken) {
+            output.push(`<ins class="document-diff-inline-insert">${renderInlineToken(newToken)}</ins>`);
+            continue;
+        }
+        if (oldToken && !newToken) {
+            output.push(`<del class="document-diff-inline-delete">${renderInlineToken(oldToken, true)}</del>`);
+            continue;
+        }
+        if (!oldToken || !newToken)
+            continue;
+        if (oldToken.type === "text" && newToken.type === "text") {
+            output.push(wordDiff(String(oldToken.text), String(newToken.text)));
+            continue;
+        }
+        if (oldToken.type === newToken.type && ["strong", "em", "del"].includes(newToken.type)) {
+            const tag = newToken.type === "strong" ? "strong" : newToken.type;
+            output.push(`<${tag}>${inlineTokenDiff(String(oldToken.text), String(newToken.text))}</${tag}>`);
+            continue;
+        }
+        if (oldToken.type === "link" && newToken.type === "link") {
+            const oldHref = String(oldToken.href ?? "");
+            const newHref = String(newToken.href ?? "");
+            const title = newToken.title
+                ? ` title="${escapeHtml(String(newToken.title))}"`
+                : "";
+            output.push(`<a href="${escapeHtml(newHref)}"${title}>${inlineTokenDiff(String(oldToken.text ?? ""), String(newToken.text ?? ""))}</a>`);
+            if (oldHref !== newHref || oldToken.title !== newToken.title) {
+                output.push(`<span class="document-diff-link-target" aria-label="リンク先の変更"> (<del class="document-diff-inline-delete">${escapeHtml(oldHref)}</del><span aria-hidden="true"> → </span><ins class="document-diff-inline-insert">${escapeHtml(newHref)}</ins>)</span>`);
+            }
+            continue;
+        }
+        if (oldToken.raw === newToken.raw) {
+            output.push(renderInlineToken(newToken));
+            continue;
+        }
+        output.push(`<del class="document-diff-inline-delete">${renderInlineToken(oldToken, true)}</del><ins class="document-diff-inline-insert">${renderInlineToken(newToken)}</ins>`);
+    }
+    return output.join("");
+}
+function paragraphDiff(previous, current) {
+    const oldToken = oneToken(previous);
+    const newToken = oneToken(current);
+    if (oldToken?.type !== "paragraph" || newToken?.type !== "paragraph")
+        return undefined;
+    return `<p>${inlineTokenDiff(String(oldToken.text), String(newToken.text))}</p>\n`;
+}
+function codeLineDiff(previous, current) {
+    const lengths = Array.from({ length: previous.length + 1 }, () => new Uint32Array(current.length + 1));
+    for (let oldIndex = previous.length - 1; oldIndex >= 0; oldIndex--) {
+        for (let newIndex = current.length - 1; newIndex >= 0; newIndex--) {
+            lengths[oldIndex][newIndex] =
+                previous[oldIndex] === current[newIndex]
+                    ? lengths[oldIndex + 1][newIndex + 1] + 1
+                    : Math.max(lengths[oldIndex + 1][newIndex], lengths[oldIndex][newIndex + 1]);
+        }
+    }
+    const rendered = [];
+    let oldIndex = 0;
+    let newIndex = 0;
+    while (oldIndex < previous.length || newIndex < current.length) {
+        if (previous[oldIndex] === current[newIndex]) {
+            rendered.push(`<span>${escapeHtml(current[newIndex] ?? "")}</span>`);
+            oldIndex++;
+            newIndex++;
+            continue;
+        }
+        const deleted = [];
+        const inserted = [];
+        while (oldIndex < previous.length ||
+            newIndex < current.length) {
+            if (previous[oldIndex] === current[newIndex])
+                break;
+            if (newIndex < current.length &&
+                (oldIndex === previous.length ||
+                    lengths[oldIndex][newIndex + 1] >
+                        lengths[oldIndex + 1][newIndex])) {
+                inserted.push(current[newIndex++]);
+            }
+            else {
+                deleted.push(previous[oldIndex++]);
+            }
+        }
+        if (deleted.length === 1 && inserted.length > 1) {
+            const source = new Set([...new Intl.Segmenter("ja", { granularity: "word" }).segment(deleted[0])].map(({ segment }) => segment));
+            let bestIndex = 0;
+            let bestScore = -1;
+            inserted.forEach((line, index) => {
+                const score = [...new Intl.Segmenter("ja", { granularity: "word" }).segment(line)]
+                    .filter(({ segment }) => source.has(segment)).length;
+                if (score > bestScore) {
+                    bestIndex = index;
+                    bestScore = score;
+                }
+            });
+            inserted.forEach((line, index) => {
+                rendered.push(index === bestIndex
+                    ? `<span>${wordDiff(deleted[0], line)}</span>`
+                    : `<span class="document-diff-structural-insert">${escapeHtml(line)}</span>`);
+            });
+            continue;
+        }
+        for (let index = 0; index < Math.max(deleted.length, inserted.length); index++) {
+            const oldLine = deleted[index];
+            const newLine = inserted[index];
+            if (oldLine !== undefined && newLine !== undefined)
+                rendered.push(`<span>${wordDiff(oldLine, newLine)}</span>`);
+            else if (oldLine !== undefined)
+                rendered.push(`<span class="document-diff-structural-delete">${escapeHtml(oldLine)}</span>`);
+            else
+                rendered.push(`<span class="document-diff-structural-insert">${escapeHtml(newLine ?? "")}</span>`);
+        }
+    }
+    return rendered;
+}
+function structuredDiff(previous, current, slugger) {
+    if (previous.tokenType !== current.tokenType)
+        return undefined;
+    const oldToken = oneToken(previous.raw);
+    const newToken = oneToken(current.raw);
+    if (!oldToken || !newToken)
+        return undefined;
+    if (newToken.type === "paragraph")
+        return paragraphDiff(previous.raw, current.raw);
+    if (newToken.type === "heading") {
+        const depth = Number(newToken.depth);
+        const oldText = String(oldToken.text ?? "");
+        const newText = String(newToken.text ?? "");
+        const id = slugger.slug(plainTextFromHtml(marked.parseInline(newText, { async: false })));
+        return `<h${depth} id="${escapeHtml(id)}">${inlineTokenDiff(oldText, newText)}</h${depth}>\n`;
+    }
+    if (newToken.type === "list") {
+        const oldItems = oldToken.items;
+        const newItems = newToken.items;
+        if (oldToken.ordered !== newToken.ordered ||
+            [...oldItems, ...newItems].some((item) => item.tokens.some((token) => token.type === "list")))
+            return undefined;
+        const tag = newToken.ordered ? "ol" : "ul";
+        const items = [];
+        for (let index = 0; index < Math.max(oldItems.length, newItems.length); index++) {
+            const oldItem = oldItems[index];
+            const newItem = newItems[index];
+            if (oldItem && newItem)
+                items.push(`<li>${inlineTokenDiff(String(oldItem.text), String(newItem.text))}</li>`);
+            else if (oldItem)
+                items.push(`<li class="document-diff-structural-delete">${escapeHtml(String(oldItem.text))}</li>`);
+            else if (newItem)
+                items.push(`<li class="document-diff-structural-insert">${escapeHtml(String(newItem.text))}</li>`);
+        }
+        return `<${tag}>\n${items.join("\n")}\n</${tag}>\n`;
+    }
+    if (newToken.type === "blockquote") {
+        const oldParagraphs = oldToken.tokens.filter((token) => token.type === "paragraph");
+        const newParagraphs = newToken.tokens.filter((token) => token.type === "paragraph");
+        const paragraphs = [];
+        for (let index = 0; index < Math.max(oldParagraphs.length, newParagraphs.length); index++) {
+            const oldParagraph = oldParagraphs[index];
+            const newParagraph = newParagraphs[index];
+            if (oldParagraph && newParagraph)
+                paragraphs.push(`<p>${inlineTokenDiff(String(oldParagraph.text), String(newParagraph.text))}</p>`);
+            else if (oldParagraph)
+                paragraphs.push(`<p class="document-diff-structural-delete">${escapeHtml(String(oldParagraph.text))}</p>`);
+            else if (newParagraph)
+                paragraphs.push(`<p class="document-diff-structural-insert">${escapeHtml(String(newParagraph.text))}</p>`);
+        }
+        return `<blockquote>\n${paragraphs.join("\n")}\n</blockquote>\n`;
+    }
+    if (newToken.type === "table") {
+        const oldHeader = oldToken.header;
+        const newHeader = newToken.header;
+        const oldRows = oldToken.rows;
+        const newRows = newToken.rows;
+        const cells = (oldCells = [], newCells = [], tag = "td") => Array.from({ length: Math.max(oldCells.length, newCells.length) }, (_, index) => {
+            const oldCell = oldCells[index], newCell = newCells[index];
+            const oldText = String(oldCell?.text ?? "");
+            const newText = String(newCell?.text ?? "");
+            const kind = oldCell && !newCell ? "delete" : newCell && !oldCell ? "insert" : "";
+            const content = oldCell && newCell
+                ? oldText === newText
+                    ? marked.parseInline(newText, { async: false })
+                    : inlineTokenDiff(oldText, newText)
+                : marked.parseInline(newText || oldText, { async: false });
+            return `<${tag}${kind ? ` class="document-diff-structural-${kind}"` : ""}>${content}</${tag}>`;
+        }).join("");
+        const rows = [];
+        for (let index = 0; index < Math.max(oldRows.length, newRows.length); index++) {
+            const oldRow = oldRows[index], newRow = newRows[index];
+            const kind = oldRow && !newRow ? "delete" : newRow && !oldRow ? "insert" : "";
+            rows.push(`<tr${kind ? ` class="document-diff-structural-${kind}"` : ""}>${cells(oldRow, newRow)}</tr>`);
+        }
+        return `<table>\n<thead><tr>${cells(oldHeader, newHeader, "th")}</tr></thead>\n<tbody>${rows.join("\n")}</tbody>\n</table>\n`;
+    }
+    if (newToken.type === "code") {
+        const oldLines = String(oldToken.text ?? "").split("\n");
+        const newLines = String(newToken.text ?? "").split("\n");
+        const language = escapeHtml(String(newToken.lang ?? ""));
+        return `<pre class="document-diff-code"><code${language ? ` class="language-${language}"` : ""}>${codeLineDiff(oldLines, newLines).join("\n")}</code></pre>\n`;
+    }
+    return undefined;
+}
+export function createDocumentDiffFeature(current, previous, markedOptions = {}) {
+    const parts = previous === undefined ? [] : diffBlocks(previous, current);
+    const hasChanges = parts.some((part) => part.kind !== "same");
+    const slugger = new GithubSlugger();
+    const diffRenderer = new Renderer();
+    diffRenderer.heading = ({ tokens, depth }) => {
+        const rendered = diffRenderer.parser.parseInline(tokens);
+        const id = slugger.slug(plainTextFromHtml(rendered));
+        return `<h${depth} id="${escapeHtml(id)}">${rendered}</h${depth}>\n`;
+    };
+    const renderedParts = [];
+    const renderPart = (part) => {
+        const html = marked.parse(part.raw, {
+            ...markedOptions,
+            renderer: diffRenderer,
+            async: false,
+        });
+        return part.kind === "same"
+            ? html
+            : `<div class="document-diff-block document-diff-${part.kind}">${html}</div>\n`;
+    };
+    if (hasChanges) {
+        for (let index = 0; index < parts.length; index++) {
+            const part = parts[index];
+            if (part.kind !== "same") {
+                let end = index;
+                while (end < parts.length && parts[end].kind !== "same")
+                    end++;
+                const changed = parts.slice(index, end);
+                const deleted = changed.filter((item) => item.kind === "delete");
+                const inserted = changed.filter((item) => item.kind === "insert");
+                for (let changedIndex = 0; changedIndex < Math.max(deleted.length, inserted.length); changedIndex++) {
+                    const oldPart = deleted[changedIndex];
+                    const newPart = inserted[changedIndex];
+                    if (oldPart && newPart) {
+                        const structured = structuredDiff(oldPart, newPart, slugger);
+                        if (structured !== undefined) {
+                            renderedParts.push(structured);
+                            continue;
+                        }
+                    }
+                    if (oldPart)
+                        renderedParts.push(renderPart(oldPart));
+                    if (newPart)
+                        renderedParts.push(renderPart(newPart));
+                }
+                index = end - 1;
+                continue;
+            }
+            renderedParts.push(renderPart(part));
+        }
+    }
+    const content = hasChanges ? prefixIds(renderedParts.join("")) : "";
+    const disabled = hasChanges ? "" : " disabled";
+    const label = hasChanges ? "差分を表示" : "前回からの変更はありません";
+    const control = `<button type="button" class="site-header-action document-diff-toggle" data-document-diff-toggle aria-label="${label}" title="${label}" aria-pressed="false"${disabled}><svg data-document-diff-icon viewBox="0 0 16 16" aria-hidden="true"><circle cx="4" cy="3" r="1.5"/><circle cx="4" cy="13" r="1.5"/><circle cx="12" cy="5" r="1.5"/><path d="M4 4.5v7M5.5 4h2A4.5 4.5 0 0112 8.5V10"/></svg><svg data-document-current-icon viewBox="0 0 16 16" aria-hidden="true" hidden><path d="M3 1.75h6l4 4v8.5H3z"/><path d="M9 1.75v4h4M5.5 9h5M5.5 11.5h5"/></svg></button>`;
+    const styles = `
+body.markdown-body[data-theme="dark"]{--diff-insert-bg:#58a6ff1a;--diff-delete-bg:#ff7b7226;--diff-delete-fg:#ff938a}body.markdown-body[data-theme="light"]{--diff-insert-bg:#0969da12;--diff-delete-bg:#cf222e18;--diff-delete-fg:#b4232c}
+.document-diff-structural-insert{background:var(--diff-insert-bg,#0969da12);box-shadow:inset 3px 0 var(--fgColor-accent,#0969da)}.document-diff-structural-delete{color:var(--diff-delete-fg,#b4232c);background:var(--diff-delete-bg,#cf222e18);text-decoration:line-through;text-decoration-thickness:2px}.document-diff-code code>span{display:block;min-height:1.5em;white-space:pre-wrap}.document-diff-link-target{margin-inline-start:2px;color:var(--fgColor-muted,#59636e);font-size:.875em;overflow-wrap:anywhere}.document-diff-link-delete{pointer-events:none}
+.document-diff-content{grid-area:content;box-sizing:border-box;min-width:0;margin-bottom:72px;padding:clamp(28px,3vw,52px);color:var(--fgColor-default,#1f2328);background:var(--bgColor-default,#fff);border:1px solid var(--borderColor-muted,#d8dee4);border-radius:8px;box-shadow:0 1px 2px rgba(31,35,40,.04)}.document-diff-content[hidden]{display:none}.document-diff-block{position:relative;margin:0 -12px;padding:1px 12px 1px 22px;border-left:2px solid var(--fgColor-muted,#59636e)}.document-diff-block::before{position:absolute;top:3px;left:7px;font-weight:700;line-height:1;content:""}.document-diff-block.document-diff-insert{background:var(--diff-insert-bg,#0969da12);border-left-style:solid;border-left-color:var(--fgColor-accent,#0969da)}.document-diff-block.document-diff-insert::before{color:var(--fgColor-accent,#0969da);content:"+"}.document-diff-block.document-diff-delete{color:var(--diff-delete-fg,#b4232c);background:var(--diff-delete-bg,#cf222e18);border-left-color:var(--diff-delete-fg,#b4232c);border-left-style:dashed;opacity:.9}.document-diff-block.document-diff-delete::before{color:var(--diff-delete-fg,#b4232c);content:"−"}.document-diff-block.document-diff-delete :is(a,button,input,select,textarea){pointer-events:none}.document-diff-inline-insert,.document-diff-inline-delete{padding:1px 2px;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.document-diff-inline-insert{color:var(--fgColor-default,#1f2328);background:var(--diff-insert-bg,#0969da12);text-decoration-line:underline;text-decoration-style:double;text-decoration-color:var(--fgColor-accent,#0969da);text-underline-offset:3px}.document-diff-inline-delete{color:var(--diff-delete-fg,#b4232c);background:var(--diff-delete-bg,#cf222e18);text-decoration:line-through;text-decoration-thickness:2px}.document-diff-toggle[aria-pressed="true"]{color:var(--fgColor-accent,#0969da);background:var(--bgColor-accent-muted,#ddf4ff)}.document-diff-toggle:disabled{color:var(--fgColor-muted,#59636e);opacity:.45;cursor:not-allowed}.document-diff-toggle svg[hidden]{display:none}body[data-document-view="diff"] .markdown-content{display:none}@media(max-width:900px){.document-diff-content{margin-bottom:32px}}@media(max-width:600px){.document-diff-content{padding:24px 20px;border-radius:6px}}
+`;
+    const script = `<script>(()=>{
+const parameter='document-view',button=document.querySelector('[data-document-diff-toggle]'),current=document.querySelector('.markdown-content'),diff=document.querySelector('.document-diff-content'),available=${hasChanges};
+const update=url=>{if(document.body.dataset.documentView==='diff'||(!available&&new URL(location.href).searchParams.get(parameter)==='diff'))url.searchParams.set(parameter,'diff');else url.searchParams.delete(parameter);return url};
+function syncLinks(){for(const link of document.querySelectorAll('a[href]')){const raw=link.getAttribute('href');if(!raw||raw.startsWith('#'))continue;const url=new URL(raw,location.href);if(url.protocol===location.protocol&&url.host===location.host&&url.pathname.endsWith('.html'))link.href=update(url).href}}
+function apply(view,write=true){const showDiff=available&&view==='diff';document.body.dataset.documentView=showDiff?'diff':'current';current.hidden=showDiff;diff.hidden=!showDiff;button.setAttribute('aria-pressed',String(showDiff));button.querySelector('[data-document-diff-icon]').hidden=showDiff;button.querySelector('[data-document-current-icon]').hidden=!showDiff;const label=available?(showDiff?'最新版を表示':'差分を表示'):'前回からの変更はありません';button.setAttribute('aria-label',label);button.title=label;if(write)history.replaceState(null,'',update(new URL(location.href)));syncLinks();window.marksitesApplyLanguage?.()}
+apply(new URL(location.href).searchParams.get(parameter)==='diff',available);if(available)button.addEventListener('click',()=>apply(document.body.dataset.documentView==='diff'?'current':'diff'));
+})()</script>`;
+    return { content, control, styles, script, hasChanges };
+}

package/dist/features/file-tree/index.js

@@ -130,8 +130,7 @@ function renderRecentFiles(nodes) {
                 ? `<span class="file-tree-comment-count" aria-label="コメント${file.commentCount}件">${file.commentCount}</span>`
                 : "";
             const time = file.modifiedAt.slice(11, 16);
-            const tooltipDate = `${file.modifiedAt.slice(0, 10)} ${time}`;
-            output.push(`    <li class="file-tree-recent-file${grouped ? " is-grouped" : ""}" data-file-path="${escapeHtml(file.path)}" data-directory="${escapeHtml(directory)}" data-modified-at="${file.modifiedAt}"${grouped ? ` data-recent-group="${groupId}"` : ""}><a href="${escapeHtml(file.href)}"${current}><span class="file-tree-recent-label"><span class="file-tree-name"><span class="file-tree-name-text">${escapeHtml(file.name)}</span></span></span>${count}<span class="file-tree-directory-tooltip" aria-hidden="true"><span class="file-tree-directory-tooltip-path">${renderFolderIcon()}<span>${escapeHtml(directoryLabel)}</span></span><time datetime="${file.modifiedAt}">${tooltipDate}</time></span></a></li>`);
+            output.push(`    <li class="file-tree-recent-file${grouped ? " is-grouped" : ""}" data-file-path="${escapeHtml(file.path)}" data-directory="${escapeHtml(directory)}" data-modified-at="${file.modifiedAt}"${grouped ? ` data-recent-group="${groupId}"` : ""}><a href="${escapeHtml(file.href)}"${current}><time class="file-tree-recent-time" datetime="${file.modifiedAt}">${time}</time><span class="file-tree-recent-label"><span class="file-tree-name"><span class="file-tree-name-text">${escapeHtml(file.name)}</span></span></span>${count}<span class="file-tree-directory-tooltip" aria-hidden="true"><span class="file-tree-directory-tooltip-path">${renderFolderIcon()}<span>${escapeHtml(directoryLabel)}</span></span></span></a></li>`);
         }
     }
     return output.join("\n");
@@ -206,9 +205,11 @@ export function renderFileTreeScript(enabled) {
   const positionDirectoryTooltip = (link) => {
     const name = link.querySelector('.file-tree-name-text');
     const tooltip = link.querySelector('.file-tree-directory-tooltip');
-    if (!name || !tooltip) return;
+    const recent = link.closest('.file-tree-recent');
+    if (!name || !tooltip || !recent) return;
     const nameRect = name.getBoundingClientRect();
-    tooltip.style.left = Math.min(nameRect.right + 8, innerWidth - tooltip.offsetWidth - 8) + 'px';
+    const recentRect = recent.getBoundingClientRect();
+    tooltip.style.left = Math.min(recentRect.right + 8, innerWidth - tooltip.offsetWidth - 8) + 'px';
     tooltip.style.top = Math.max(8 + tooltip.offsetHeight / 2, Math.min(nameRect.top + nameRect.height / 2, innerHeight - 8 - tooltip.offsetHeight / 2)) + 'px';
   };
 
@@ -366,8 +367,8 @@ export function renderFileTreeScript(enabled) {
         const file = files[index];
       const date = new Date(file.dataset.modifiedAt);
       file.dataset.localDate = dateKey;
-      const tooltipTime = file.querySelector('.file-tree-directory-tooltip time');
-      tooltipTime.textContent = date.getFullYear()+'-'+pad(date.getMonth()+1)+'-'+pad(date.getDate())+' '+pad(date.getHours())+':'+pad(date.getMinutes());
+      const rowTime = file.querySelector('.file-tree-recent-time');
+      rowTime.textContent = pad(date.getHours())+':'+pad(date.getMinutes());
         if (grouped) {
           file.classList.add('is-grouped');
           file.dataset.recentGroup = groupId;

package/dist/features/header/index.d.ts

@@ -5,6 +5,7 @@ interface HeaderFeatureOptions {
     documentNavigation: string;
     documentMetadata: string;
     fileTree: string;
+    documentDiffControl: string;
 }
 export declare function createHeaderFeature(options?: HeaderFeatureOptions): HeaderFeature;
 export {};

package/dist/features/header/index.js

@@ -2,6 +2,7 @@ export function createHeaderFeature(options = {
     documentNavigation: "",
     documentMetadata: "",
     fileTree: "",
+    documentDiffControl: "",
 }) {
     const markup = `<header class="site-header">
   <div class="site-header-brand">
@@ -10,6 +11,7 @@ export function createHeaderFeature(options = {
 ${options.documentNavigation}${options.documentMetadata ? `      <span class="site-header-metadata-separator" aria-hidden="true"></span>\n      <div class="document-metadata">${options.documentMetadata}</div>\n` : ""}${options.fileTree}    </div>
   </div>
   <div class="site-header-actions">
+    ${options.documentDiffControl}
     <button type="button" class="site-header-action" data-theme-toggle aria-label="ダークモードに切り替え" title="ダークモードに切り替え"><svg data-theme-dark-icon viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 10.2A5.8 5.8 0 015.8 2.5 5.8 5.8 0 1013.5 10.2z" /></svg><svg data-theme-light-icon viewBox="0 0 16 16" aria-hidden="true" hidden><circle cx="8" cy="8" r="2.5"/><path d="M8 1v1.5M8 13.5V15M1 8h1.5M13.5 8H15M3.05 3.05l1.06 1.06M11.89 11.89l1.06 1.06M12.95 3.05l-1.06 1.06M4.11 11.89l-1.06 1.06"/></svg></button>
     <button type="button" class="site-header-action language-toggle" data-language-toggle aria-label="英語に切り替え" title="英語に切り替え"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6"/><path d="M2 8h12M8 2a9 9 0 010 12M8 2a9 9 0 000 12"/></svg><span data-language-label>JA</span></button>
   </div>
@@ -37,6 +39,7 @@ const english=new Map(${JSON.stringify([
         ["アーカイブを開く", "Open archive"], ["アーカイブを閉じる", "Close archive"], ["コメントを保存", "Save comment"], ["編集をキャンセル", "Cancel editing"],
         ["有効なコメントをすべてコピー", "Copy all active comments"], ["有効なコメントだけをコピー", "Copy active comments only"], ["有効なコメントをコピー", "Copy active comments"], ["コメントをコピーしました", "Comment copied"], ["コピー失敗", "Copy failed"], ["コピーに失敗しました", "Copy failed"], ["保存中…", "Saving…"], ["保存に失敗しました", "Save failed"], ["このコメントを削除しますか？", "Delete this comment?"],
         ["コメントを追加するにはmarksites serveを起動してください", "Start marksites serve to add comments"], ["別の画面でコメントが更新されました。最新の内容を確認して、もう一度操作してください。", "Comments changed in another window. Review the latest version and try again."],
+        ["差分を表示", "Show changes"], ["最新版を表示", "Show latest"], ["前回からの変更はありません", "No changes since the previous build"],
         ["コードをコピー", "Copy code"], ["長い行を折り返す", "Wrap long lines"], ["折り返しを解除", "Disable line wrapping"], ["コードをコピーしました", "Code copied"], ["コードをコピーできませんでした", "Could not copy code"],
         ["文書ナビゲーション", "Document navigation"], ["文書サイドバー", "Document sidebar"], ["パンくずリスト", "Breadcrumbs"]
     ])});

package/dist/features/table-of-contents/index.js

@@ -24,25 +24,27 @@ function renderTableOfContentsScript() {
 
   const panel = navigation.querySelector('.toc-panel');
   const links = [...panel.querySelectorAll('a[href^="#"]')];
-  const entries = links
-    .map((link) => ({ link, heading: document.getElementById(link.getAttribute('href').slice(1)) }))
-    .filter((entry) => entry.heading);
+  const entries = links.map((link) => ({ link, id: link.getAttribute('href').slice(1) }));
   if (entries.length === 0) return;
 
+  const headingFor = (entry) => document.getElementById((document.body.dataset.documentView === 'diff' ? 'diff-' : '') + entry.id);
+
   let scheduled = false;
   let currentLink = null;
   const update = () => {
     scheduled = false;
     const marker = Math.min(160, window.innerHeight * 0.25);
-    let active = entries[0];
+    const available = entries.map(entry => ({ ...entry, heading: headingFor(entry) })).filter(entry => entry.heading);
+    if (available.length === 0) return;
+    let active = available[0];
 
-    for (const entry of entries) {
+    for (const entry of available) {
       if (entry.heading.getBoundingClientRect().top > marker) break;
       active = entry;
     }
 
     for (const entry of entries) {
-      if (entry === active) entry.link.setAttribute('aria-current', 'location');
+      if (entry.link === active.link) entry.link.setAttribute('aria-current', 'location');
       else entry.link.removeAttribute('aria-current');
     }
     if (!navigation.hidden && active.link !== currentLink) {
@@ -63,6 +65,14 @@ function renderTableOfContentsScript() {
 
   addEventListener('scroll', schedule, { passive: true });
   addEventListener('resize', schedule);
+  for (const entry of entries) entry.link.addEventListener('click', event => {
+    const heading = headingFor(entry);
+    if (!heading || document.body.dataset.documentView !== 'diff') return;
+    event.preventDefault();
+    heading.scrollIntoView();
+    history.replaceState(null, '', '#diff-' + entry.id);
+  });
+  new MutationObserver(schedule).observe(document.body, { attributes: true, attributeFilter: ['data-document-view'] });
   update();
 })();
 </script>`;

package/dist/markdown-to-html.d.ts

@@ -2,4 +2,4 @@ import type { AnnotationDocument } from "./annotations/model.js";
 import type { RenderOptions } from "./types.js";
 /** Convert Markdown into a standalone HTML document styled like GitHub. */
 export declare function markdownToHtml(markdown: string, options?: RenderOptions): string;
-export declare function renderMarkdown(markdown: string, options?: RenderOptions, annotations?: AnnotationDocument): string;
+export declare function renderMarkdown(markdown: string, options?: RenderOptions, annotations?: AnnotationDocument, previousMarkdown?: string): string;

package/dist/markdown-to-html.js

@@ -6,13 +6,14 @@ import { renderBreadcrumbs, renderFileSidebar, renderFileTree, renderFileTreeScr
 import { createTableOfContentsFeature } from "./features/table-of-contents/index.js";
 import { createSidebarFeature } from "./features/sidebar/index.js";
 import { createImageViewerFeature } from "./features/image-viewer/index.js";
+import { createDocumentDiffFeature } from "./features/document-diff/index.js";
 import { renderDocument } from "./template/document.js";
 import { escapeHtml } from "./utils/html.js";
 /** Convert Markdown into a standalone HTML document styled like GitHub. */
 export function markdownToHtml(markdown, options = {}) {
     return renderMarkdown(markdown, options);
 }
-export function renderMarkdown(markdown, options = {}, annotations) {
+export function renderMarkdown(markdown, options = {}, annotations, previousMarkdown) {
     const rawTitle = options.title ?? "Markdown文書";
     const currentFileName = options.fileTree?.breadcrumbs?.find((breadcrumb) => breadcrumb.current)?.name;
     const title = escapeHtml(`marksites | ${currentFileName ?? rawTitle}`);
@@ -37,6 +38,7 @@ export function renderMarkdown(markdown, options = {}, annotations) {
     const fileSidebar = renderFileSidebar(options.fileTree);
     const fileTreeScript = renderFileTreeScript(fileTree !== "");
     const modifiedAt = renderModifiedAt(options.modifiedAt);
+    const documentDiff = createDocumentDiffFeature(markdown, previousMarkdown, options.markedOptions);
     const breadcrumbs = fileTree
         ? renderBreadcrumbs(options.fileTree?.breadcrumbs)
         : `<nav class="file-breadcrumbs" aria-label="ファイルパス"><span aria-current="page">${escapeHtml(rawTitle)}</span></nav>\n`;
@@ -44,6 +46,7 @@ export function renderMarkdown(markdown, options = {}, annotations) {
         documentNavigation: breadcrumbs,
         documentMetadata: modifiedAt,
         fileTree,
+        documentDiffControl: documentDiff.control,
     });
     const annotationFeature = createAnnotationsFeature(annotations);
     const imageViewer = createImageViewerFeature(/<img\b/i.test(content));
@@ -61,6 +64,7 @@ export function renderMarkdown(markdown, options = {}, annotations) {
         regions: {
             header: header.markup,
             fileSidebar,
+            diffContent: `<main class="document-diff-content" aria-label="文書の差分" hidden>\n${documentDiff.content}</main>`,
             sidebar: sidebar.markup,
             overlays: `${annotationFeature.markup}${imageViewer.markup}`,
         },
@@ -70,9 +74,11 @@ export function renderMarkdown(markdown, options = {}, annotations) {
                 annotationFeature.styles,
                 imageViewer.styles,
                 header.styles,
+                documentDiff.styles,
             ],
             scripts: [
                 header.script,
+                documentDiff.script,
                 fileTreeScript,
                 renderModifiedAtScript(modifiedAt !== ""),
                 sidebar.script,

package/dist/server/html-security.js

@@ -5,6 +5,7 @@ import { createAnnotationsFeature } from "../features/annotations/index.js";
 import { createCodeBlocksFeature } from "../features/code-blocks/index.js";
 import { createHeaderFeature } from "../features/header/index.js";
 import { createImageViewerFeature } from "../features/image-viewer/index.js";
+import { createDocumentDiffFeature } from "../features/document-diff/index.js";
 import { renderFileTreeScript, renderModifiedAtScript, } from "../features/file-tree/index.js";
 import { createSidebarFeature } from "../features/sidebar/index.js";
 import { createTableOfContentsFeature } from "../features/table-of-contents/index.js";
@@ -36,6 +37,8 @@ function generatedScriptBodies() {
         scriptBody(renderedToc.script),
         scriptBody(annotations.script),
         scriptBody(createImageViewerFeature(true).script),
+        scriptBody(createDocumentDiffFeature("same", undefined).script),
+        scriptBody(createDocumentDiffFeature("after", "before").script),
         scriptBody(createSidebarFeature({
             tableOfContents: renderedToc.markup,
             tableOfContentsTitle: renderedToc.title,

package/dist/template/document.d.ts

@@ -6,6 +6,7 @@ interface DocumentParts {
     regions: {
         header: string;
         fileSidebar: string;
+        diffContent: string;
         sidebar: string;
         overlays: string;
     };

package/dist/template/document.js

@@ -22,6 +22,7 @@ ${parts.regions.fileSidebar}
 <main class="markdown-content">
 ${parts.content}
 </main>
+${parts.regions.diffContent}
 ${parts.regions.sidebar}
 ${parts.regions.overlays}
 ${parts.assets.scripts.map(trustedScript).join("")}

package/dist/template/styles.d.ts

@@ -2,4 +2,4 @@ export declare const githubMarkdownCss: string;
 export declare const highlightCss: string;
 export declare const highlightThemeStyles = "body[data-theme=\"dark\"] .hljs{color:var(--codeBlock-fgColor);background:var(--codeBlock-bgColor)}\nbody[data-theme=\"dark\"] :is(.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_){color:var(--color-prettylights-syntax-keyword)}\nbody[data-theme=\"dark\"] :is(.hljs-title,.hljs-title.class_,.hljs-title.function_){color:var(--color-prettylights-syntax-entity)}\nbody[data-theme=\"dark\"] :is(.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id){color:var(--color-prettylights-syntax-constant)}\nbody[data-theme=\"dark\"] :is(.hljs-regexp,.hljs-string,.hljs-meta .hljs-string){color:var(--color-prettylights-syntax-string)}\nbody[data-theme=\"dark\"] :is(.hljs-built_in,.hljs-symbol){color:var(--color-prettylights-syntax-variable)}\nbody[data-theme=\"dark\"] :is(.hljs-comment,.hljs-code,.hljs-formula){color:var(--color-prettylights-syntax-comment)}\nbody[data-theme=\"dark\"] :is(.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo){color:var(--color-prettylights-syntax-entity-tag)}";
 export declare const documentStyles = "    body.markdown-body { box-sizing: border-box; min-width: 200px; width: calc(100% - 64px); max-width: none; margin: 0 32px; padding: 32px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: \"content toc\"; column-gap: 32px; align-items: start; }\n    .markdown-content, .document-sidebar { box-sizing: border-box; }\n    .markdown-content { grid-area: content; min-width: 0; margin-bottom: 72px; padding: clamp(28px, 3vw, 52px); border: 1px solid var(--borderColor-muted, #d8dee4); border-radius: 8px; box-shadow: 0 1px 2px rgba(31, 35, 40, 0.04); }\n    .markdown-content :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 32px; }\n    .code-block { margin-bottom: 16px; overflow: hidden; border: 1px solid var(--borderColor-muted, #d8dee4); border-radius: 8px; }\n    .code-toolbar { display: flex; min-height: 38px; align-items: center; justify-content: space-between; padding: 0 8px 0 14px; color: var(--fgColor-muted, #59636e); background: var(--bgColor-muted, #f6f8fa); border-bottom: 1px solid var(--borderColor-muted, #d8dee4); }\n    .code-language { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }\n    .code-tools { display: flex; gap: 2px; }\n    .code-tool { display: inline-flex; min-height: 30px; align-items: center; justify-content: center; gap: 5px; padding: 4px 8px; color: inherit; font: inherit; font-size: 0.75rem; line-height: 1; background: transparent; border: 0; border-radius: 5px; cursor: pointer; }\n    .code-tool-label, [data-copy-label] { display: inline-flex; align-items: center; line-height: 1; }\n    .code-tool:hover { color: var(--fgColor-default, #1f2328); background: var(--button-default-bgColor-hover, #eaeef2); }\n    .code-tool:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: -2px; }\n    .code-tool[aria-pressed=\"true\"] { color: var(--fgColor-accent, #0969da); background: var(--bgColor-accent-muted, #ddf4ff); }\n    .code-block pre { margin: 0; border-radius: 0; }\n    .code-block pre, .code-block pre code { color: var(--codeBlock-fgColor, #24292f); background: var(--codeBlock-bgColor, #fff); }\n    .code-block pre code { display: block; }\n    .code-block.is-wrapped pre code { white-space: pre-wrap; overflow-wrap: anywhere; }\n    .panel-toggle-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 120ms ease; }\n    .action-icon { display: block; width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }\n    .table-of-contents ul { margin: 0; padding: 0; list-style: none; }\n    .table-of-contents li { margin: 2px 0 2px calc(var(--toc-level) * 12px); }\n    .table-of-contents a { position: relative; display: block; padding: 6px 10px; color: var(--fgColor-muted, #59636e); font-size: 0.875rem; line-height: 1.4; overflow-wrap: anywhere; text-decoration: none; border-radius: 0 6px 6px 0; transition: color 120ms ease, background-color 120ms ease; }\n    .table-of-contents a::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: transparent; content: \"\"; }\n    .table-of-contents a:hover { color: var(--fgColor-default, #1f2328); background: var(--bgColor-muted, #f6f8fa); text-decoration: none; }\n    .table-of-contents a:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: -2px; }\n    .table-of-contents a[aria-current=\"location\"] { color: var(--fgColor-accent, #0969da); font-weight: 600; background: linear-gradient(90deg, var(--bgColor-accent-muted, #ddf4ff), transparent); }\n    .table-of-contents a[aria-current=\"location\"]::before { background: var(--borderColor-accent-emphasis, #0969da); }\n    @media (max-width: 900px) {\n      body.markdown-body { width: calc(100% - 24px); max-width: none; margin: 0 12px; padding: 12px 0 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: \"toc\" \"content\"; gap: 16px; }\n      .markdown-content { margin-bottom: 32px; }\n    }\n    @media (max-width: 600px) { .markdown-content { padding: 24px 20px; border-radius: 6px; } }\n    @media (prefers-reduced-motion: reduce) { .table-of-contents a, .panel-toggle-icon { transition: none; } }";
-export declare const fileTreeStyles = "    body.markdown-body.has-file-tree { width: 100%; margin: 0; padding: 32px 32px 0 0; grid-template-columns: 280px minmax(0, 1fr) 300px; grid-template-areas: \"files content toc\"; column-gap: 32px; }\n    body.markdown-body.has-file-tree.file-sidebar-collapsed { width: calc(100% - 64px); margin: 0 32px; padding: 32px 0 0; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: \"content toc\"; }\n    .file-sidebar { grid-area: files; position: fixed; z-index: 45; top: 0; bottom: 0; left: 0; box-sizing: border-box; display: flex; width: 280px; min-height: 0; flex-direction: column; color: var(--fgColor-default, #1f2328); background: var(--bgColor-default, #fff); border: 0; border-right: 1px solid var(--borderColor-muted, #d8dee4); border-radius: 0; overflow: hidden; }\n    .file-sidebar-header { display: flex; min-height: 52px; flex: none; align-items: center; gap: 9px; padding: 0 12px; font-size: 0.875rem; font-weight: 700; border-bottom: 1px solid var(--borderColor-muted, #d8dee4); }\n    .file-sidebar-header > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .file-sidebar[hidden], .file-sidebar-open[hidden], .file-sidebar-close[hidden] { display: none; }\n    .file-sidebar-close { position: fixed; z-index: 50; top: 13px; left: 12px; display: inline-flex; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; padding: 0; color: var(--fgColor-muted, #59636e); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }\n    .file-sidebar-close:hover { color: var(--fgColor-default, #1f2328); background: var(--button-default-bgColor-hover, #eaeef2); }\n    .file-sidebar-close:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: -2px; }\n    .file-breadcrumbs { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--borderColor-muted, #d8dee4); }\n    .file-breadcrumbs ol { display: flex; min-width: 0; min-height: 28px; flex: 0 1 auto; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; padding: 0; list-style: none; }\n    .file-breadcrumbs li { display: inline-block; min-width: 0; height: 28px; color: var(--fgColor-muted, #59636e); font-size: 0.875rem; line-height: 28px; }\n    .file-breadcrumbs li + li::before { margin-right: 6px; color: var(--fgColor-muted, #818b98); content: \"/\"; }\n    .file-breadcrumb-separator { height: 28px; margin-right: -2px; color: var(--fgColor-muted, #818b98); font-size: 0.875rem; line-height: 28px; }\n    .file-breadcrumbs a { display: inline-block; height: 28px; color: var(--fgColor-accent, #0969da); font-weight: 500; line-height: 28px; text-decoration: none; vertical-align: baseline; }\n    .file-breadcrumbs a:hover { text-decoration: underline; }\n    .file-breadcrumbs [aria-current=\"page\"] { color: var(--fgColor-default, #1f2328); font-weight: 600; white-space: nowrap; }\n    .file-sidebar-open { position: fixed; z-index: 50; top: 13px; left: 12px; display: inline-flex; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; padding: 0; color: var(--fgColor-muted, #59636e); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }\n    .file-tree-popover-toggle { position: relative; top: 1px; display: inline-flex; height: 28px; min-width: 0; flex: none; align-items: center; justify-content: center; gap: 3px; padding: 0; color: var(--fgColor-accent, #0969da); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 28px; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }\n    .file-tree-popover-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .file-sidebar-toggle-icon { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }\n    .file-sidebar-open:hover { color: var(--fgColor-default, #1f2328); background: var(--button-default-bgColor-hover, #eaeef2); }\n    .file-sidebar-open:focus-visible, .file-tree-popover-toggle:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: 2px; }\n    .file-tree-popover-toggle:hover { color: var(--fgColor-accent, #0969da); text-decoration: underline; background: transparent; }\n    .file-tree-popover-toggle:disabled { color: var(--fgColor-default, #1f2328); text-decoration: none; cursor: default; }\n    .file-tree-popover-toggle:disabled .panel-toggle-icon { display: none; }\n    .file-tree-popover-toggle .panel-toggle-icon { width: 13px; height: 13px; flex: none; transform: translateY(1px); }\n    .copy-file-path .copy-icon { transform: none; }\n    .file-tree-popover-toggle[aria-expanded=\"true\"] .panel-toggle-icon { transform: translateY(1px) rotate(180deg); }\n    .copy-file-path { display: inline-flex; width: 28px; height: 28px; flex: none; align-items: center; justify-content: center; padding: 0; color: var(--fgColor-muted, #59636e); background: transparent; border: 0; border-radius: 5px; cursor: pointer; }\n    .copy-file-path:hover { color: var(--fgColor-default, #1f2328); background: var(--button-default-bgColor-hover, #eaeef2); }\n    .copy-file-path:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: 2px; }\n    .file-tree { box-sizing: border-box; overflow: auto; padding: 12px; color: var(--fgColor-default, #1f2328); background: var(--bgColor-default, #fff); scrollbar-width: thin; scrollbar-color: var(--borderColor-default, #d0d7de) transparent; }\n    .file-tree-sidebar { min-height: 0; flex: 1; padding: 10px 12px 16px; }\n    .file-tree-popover { position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; width: min(360px, calc(100vw - 48px)); max-height: min(520px, calc(100vh - 96px)); border: 1px solid var(--borderColor-default, #d0d7de); border-radius: 8px; box-shadow: 0 8px 24px rgba(31,35,40,.16); }\n    .file-tree-view-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 8px; padding: 2px; background: var(--bgColor-muted, #f6f8fa); border-radius: 6px; }\n    .file-tree-view-tabs button { min-height: 28px; padding: 3px 8px; color: var(--fgColor-muted, #59636e); font: inherit; font-size: 0.75rem; font-weight: 600; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }\n    .file-tree-view-tabs button[aria-selected=\"true\"] { color: var(--fgColor-default, #1f2328); background: var(--bgColor-default, #fff); box-shadow: 0 1px 2px rgba(31,35,40,.12); }\n    .file-tree-view-tabs button:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: 1px; }\n    .file-tree-filter { margin: 0 0 8px; }\n    .file-tree-filter-input { box-sizing: border-box; width: 100%; min-height: 32px; padding: 5px 9px; color: var(--fgColor-default, #1f2328); font: inherit; font-size: 0.8125rem; line-height: 1.4; background: var(--bgColor-default, #fff); border: 1px solid var(--borderColor-default, #d0d7de); border-radius: 6px; outline: none; }\n    .file-tree-filter-input::placeholder { color: var(--fgColor-muted, #59636e); }\n    .file-tree-filter-input:focus { border-color: var(--borderColor-accent-emphasis, #0969da); box-shadow: 0 0 0 2px var(--bgColor-accent-muted, #ddf4ff); }\n    .file-tree-filter-empty { margin: 10px 4px 2px; color: var(--fgColor-muted, #59636e); font-size: 0.8125rem; text-align: center; }\n    .file-tree ul { margin: 0; padding: 0; list-style: none; }\n    .file-tree [hidden] { display: none; }\n    .file-tree details { margin: 0; }\n    .file-tree details > ul { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--borderColor-muted, #d8dee4); }\n    .file-tree summary { padding: 5px 7px; color: var(--fgColor-default, #1f2328); font-size: 0.875rem; font-weight: 600; line-height: 1.35; border-radius: 5px; cursor: pointer; user-select: none; }\n    .folder-icon { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }\n    .file-tree summary:hover { background: var(--bgColor-muted, #f6f8fa); }\n    .file-tree summary::marker { color: var(--fgColor-muted, #59636e); }\n    .file-tree a { display: flex; margin: 1px 0; padding: 5px 8px; align-items: center; gap: 6px; overflow: hidden; color: var(--fgColor-muted, #59636e); font-size: 0.875rem; line-height: 1.35; text-decoration: none; white-space: nowrap; border-radius: 5px; }\n    .file-tree-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }\n    .file-tree-comment-count { display: inline-flex; min-width: 18px; height: 18px; flex: none; align-items: center; justify-content: center; padding: 0 5px; color: var(--fgColor-muted, #59636e); font-size: 0.6875rem; font-weight: 600; line-height: 18px; background: var(--bgColor-neutral-muted, #818b981f); border-radius: 9px; }\n    .file-tree-directory-comment-count { float: right; margin-left: 6px; }\n    .file-tree details[open] > summary > .file-tree-directory-comment-count { display: none; }\n    .file-tree a[aria-current=\"page\"] .file-tree-comment-count { color: var(--fgColor-accent, #0969da); background: var(--bgColor-default, #fff); }\n    .file-tree a:hover { color: var(--fgColor-default, #1f2328); background: var(--bgColor-muted, #f6f8fa); text-decoration: none; }\n    .file-tree a:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: -2px; }\n    .file-tree a[aria-current=\"page\"] { color: var(--fgColor-accent, #0969da); font-weight: 600; background: var(--bgColor-accent-muted, #ddf4ff); }\n    .file-tree-recent { position: relative; }\n    .file-tree-recent::before { position: absolute; top: 0; bottom: 0; left: 12px; width: 1px; content: \"\"; background: var(--borderColor-muted, #d8dee4); }\n    .file-tree-date { position: relative; z-index: 1; margin: 10px 0 3px; background: var(--bgColor-default, #fff); }\n    .file-tree-date::before { position: absolute; top: -10px; bottom: -3px; left: 12px; width: 1px; content: \"\"; background: var(--bgColor-default, #fff); }\n    .file-tree-date:first-child { margin-top: 4px; }\n    .file-tree-date button { display: flex; width: 100%; min-height: 28px; align-items: center; gap: 4px; padding: 4px 7px; color: var(--fgColor-default, #1f2328); font: inherit; font-size: 0.75rem; font-weight: 600; text-align: left; background: transparent; border: 0; border-radius: 5px; cursor: pointer; }\n    .file-tree-date button:hover { background: var(--bgColor-muted, #f6f8fa); }\n    .file-tree-date button:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: -2px; }\n    .file-tree-date button svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 120ms ease; }\n    .file-tree-date button[aria-expanded=\"false\"] svg { transform: rotate(-90deg); }\n    .file-tree-date button span { min-width: 18px; margin-left: auto; padding: 1px 5px; color: var(--fgColor-muted, #59636e); font-size: 0.6875rem; font-weight: 600; line-height: 16px; text-align: center; background: var(--bgColor-neutral-muted, #818b981f); border-radius: 9px; }\n    .file-tree-recent .is-date-collapsed { display: none; }\n    .file-tree-directory-group { display: none; }\n    .file-tree-directory-group .folder-icon { width: 13px; height: 13px; flex: none; }\n    .file-tree-directory-group span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .file-tree-recent-file { position: relative; margin-left: 22px; }\n    .file-tree-recent-file a { position: relative; margin-top: 0; margin-bottom: 0; overflow: visible; align-items: flex-start; gap: 7px; }\n    .file-tree-recent-label { display: flex; min-width: 0; flex: 1; }\n    .file-tree-recent-label .file-tree-name { width: 100%; color: var(--fgColor-default, #1f2328); font-size: 0.8125rem; font-weight: 400; }\n    .file-tree-recent-file a:hover .file-tree-name { text-decoration: underline; text-underline-offset: 2px; }\n    .file-tree-directory-tooltip { position: fixed; z-index: 100; top: 0; left: 0; display: none; max-width: min(240px, calc(100vw - 16px)); flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 8px; color: var(--fgColor-default, #1f2328); font-size: 0.6875rem; font-weight: 400; line-height: 1.35; white-space: nowrap; background: var(--bgColor-default, #fff); border: 1px solid var(--borderColor-default, #d0d7de); border-radius: 5px; box-shadow: 0 2px 8px rgba(31,35,40,.16); transform: translateY(-50%); pointer-events: none; }\n    .file-tree-directory-tooltip::before { position: absolute; top: 50%; right: calc(100% - 4px); width: 7px; height: 7px; content: \"\"; background: var(--bgColor-default, #fff); border: 0 solid var(--borderColor-default, #d0d7de); border-width: 0 0 1px 1px; transform: translateY(-50%) rotate(45deg); }\n    .file-tree-directory-tooltip-path { display: flex; max-width: 220px; align-items: center; gap: 5px; overflow: hidden; }\n    .file-tree-directory-tooltip-path .folder-icon { width: 12px; height: 12px; flex: none; margin: 0; }\n    .file-tree-directory-tooltip-path > span { overflow: hidden; text-overflow: ellipsis; }\n    .file-tree-directory-tooltip > time { color: var(--fgColor-muted, #59636e); font-variant-numeric: tabular-nums; }\n    .file-tree-recent-file a:hover .file-tree-directory-tooltip, .file-tree-recent-file a:focus-visible .file-tree-directory-tooltip { display: flex; }\n    .file-tree-recent-file .file-tree-comment-count { margin-top: 1px; }\n    .file-tree-recent-empty { margin: 10px 4px 2px; color: var(--fgColor-muted, #59636e); font-size: 0.8125rem; text-align: center; }\n    @media (max-width: 900px) {\n      body.markdown-body.has-file-tree, body.markdown-body.has-file-tree.file-sidebar-collapsed { width: calc(100% - 24px); margin: 0 12px; padding: 12px 0 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: \"toc\" \"content\"; gap: 16px; }\n      .file-sidebar { width: min(280px, calc(100vw - 24px)); box-shadow: 8px 0 24px rgba(31,35,40,.18); }\n    }\n    @media (max-width: 600px) { .file-tree-popover { width: calc(100vw - 40px); max-height: calc(100vh - 80px); } }\n    ";
+export declare const fileTreeStyles = "    body.markdown-body.has-file-tree { width: 100%; margin: 0; padding: 32px 32px 0 0; grid-template-columns: 280px minmax(0, 1fr) 300px; grid-template-areas: \"files content toc\"; column-gap: 32px; }\n    body.markdown-body.has-file-tree.file-sidebar-collapsed { width: calc(100% - 64px); margin: 0 32px; padding: 32px 0 0; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: \"content toc\"; }\n    .file-sidebar { grid-area: files; position: fixed; z-index: 45; top: 0; bottom: 0; left: 0; box-sizing: border-box; display: flex; width: 280px; min-height: 0; flex-direction: column; color: var(--fgColor-default, #1f2328); background: var(--bgColor-default, #fff); border: 0; border-right: 1px solid var(--borderColor-muted, #d8dee4); border-radius: 0; overflow: hidden; }\n    .file-sidebar-header { display: flex; min-height: 52px; flex: none; align-items: center; gap: 9px; padding: 0 12px; font-size: 0.875rem; font-weight: 700; border-bottom: 1px solid var(--borderColor-muted, #d8dee4); }\n    .file-sidebar-header > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .file-sidebar[hidden], .file-sidebar-open[hidden], .file-sidebar-close[hidden] { display: none; }\n    .file-sidebar-close { position: fixed; z-index: 50; top: 13px; left: 12px; display: inline-flex; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; padding: 0; color: var(--fgColor-muted, #59636e); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }\n    .file-sidebar-close:hover { color: var(--fgColor-default, #1f2328); background: var(--button-default-bgColor-hover, #eaeef2); }\n    .file-sidebar-close:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: -2px; }\n    .file-breadcrumbs { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--borderColor-muted, #d8dee4); }\n    .file-breadcrumbs ol { display: flex; min-width: 0; min-height: 28px; flex: 0 1 auto; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; padding: 0; list-style: none; }\n    .file-breadcrumbs li { display: inline-block; min-width: 0; height: 28px; color: var(--fgColor-muted, #59636e); font-size: 0.875rem; line-height: 28px; }\n    .file-breadcrumbs li + li::before { margin-right: 6px; color: var(--fgColor-muted, #818b98); content: \"/\"; }\n    .file-breadcrumb-separator { height: 28px; margin-right: -2px; color: var(--fgColor-muted, #818b98); font-size: 0.875rem; line-height: 28px; }\n    .file-breadcrumbs a { display: inline-block; height: 28px; color: var(--fgColor-accent, #0969da); font-weight: 500; line-height: 28px; text-decoration: none; vertical-align: baseline; }\n    .file-breadcrumbs a:hover { text-decoration: underline; }\n    .file-breadcrumbs [aria-current=\"page\"] { color: var(--fgColor-default, #1f2328); font-weight: 600; white-space: nowrap; }\n    .file-sidebar-open { position: fixed; z-index: 50; top: 13px; left: 12px; display: inline-flex; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; padding: 0; color: var(--fgColor-muted, #59636e); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }\n    .file-tree-popover-toggle { position: relative; top: 1px; display: inline-flex; height: 28px; min-width: 0; flex: none; align-items: center; justify-content: center; gap: 3px; padding: 0; color: var(--fgColor-accent, #0969da); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 28px; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }\n    .file-tree-popover-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .file-sidebar-toggle-icon { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }\n    .file-sidebar-open:hover { color: var(--fgColor-default, #1f2328); background: var(--button-default-bgColor-hover, #eaeef2); }\n    .file-sidebar-open:focus-visible, .file-tree-popover-toggle:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: 2px; }\n    .file-tree-popover-toggle:hover { color: var(--fgColor-accent, #0969da); text-decoration: underline; background: transparent; }\n    .file-tree-popover-toggle:disabled { color: var(--fgColor-default, #1f2328); text-decoration: none; cursor: default; }\n    .file-tree-popover-toggle:disabled .panel-toggle-icon { display: none; }\n    .file-tree-popover-toggle .panel-toggle-icon { width: 13px; height: 13px; flex: none; transform: translateY(1px); }\n    .copy-file-path .copy-icon { transform: none; }\n    .file-tree-popover-toggle[aria-expanded=\"true\"] .panel-toggle-icon { transform: translateY(1px) rotate(180deg); }\n    .copy-file-path { display: inline-flex; width: 28px; height: 28px; flex: none; align-items: center; justify-content: center; padding: 0; color: var(--fgColor-muted, #59636e); background: transparent; border: 0; border-radius: 5px; cursor: pointer; }\n    .copy-file-path:hover { color: var(--fgColor-default, #1f2328); background: var(--button-default-bgColor-hover, #eaeef2); }\n    .copy-file-path:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: 2px; }\n    .file-tree { box-sizing: border-box; overflow: auto; padding: 12px; color: var(--fgColor-default, #1f2328); background: var(--bgColor-default, #fff); scrollbar-width: thin; scrollbar-color: var(--borderColor-default, #d0d7de) transparent; }\n    .file-tree-sidebar { min-height: 0; flex: 1; padding: 10px 12px 16px; }\n    .file-tree-popover { position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; width: min(360px, calc(100vw - 48px)); max-height: min(520px, calc(100vh - 96px)); border: 1px solid var(--borderColor-default, #d0d7de); border-radius: 8px; box-shadow: 0 8px 24px rgba(31,35,40,.16); }\n    .file-tree-view-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 8px; padding: 2px; background: var(--bgColor-muted, #f6f8fa); border-radius: 6px; }\n    .file-tree-view-tabs button { min-height: 28px; padding: 3px 8px; color: var(--fgColor-muted, #59636e); font: inherit; font-size: 0.75rem; font-weight: 600; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }\n    .file-tree-view-tabs button[aria-selected=\"true\"] { color: var(--fgColor-default, #1f2328); background: var(--bgColor-default, #fff); box-shadow: 0 1px 2px rgba(31,35,40,.12); }\n    .file-tree-view-tabs button:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: 1px; }\n    .file-tree-filter { margin: 0 0 8px; }\n    .file-tree-filter-input { box-sizing: border-box; width: 100%; min-height: 32px; padding: 5px 9px; color: var(--fgColor-default, #1f2328); font: inherit; font-size: 0.8125rem; line-height: 1.4; background: var(--bgColor-default, #fff); border: 1px solid var(--borderColor-default, #d0d7de); border-radius: 6px; outline: none; }\n    .file-tree-filter-input::placeholder { color: var(--fgColor-muted, #59636e); }\n    .file-tree-filter-input:focus { border-color: var(--borderColor-accent-emphasis, #0969da); box-shadow: 0 0 0 2px var(--bgColor-accent-muted, #ddf4ff); }\n    .file-tree-filter-empty { margin: 10px 4px 2px; color: var(--fgColor-muted, #59636e); font-size: 0.8125rem; text-align: center; }\n    .file-tree ul { margin: 0; padding: 0; list-style: none; }\n    .file-tree [hidden] { display: none; }\n    .file-tree details { margin: 0; }\n    .file-tree details > ul { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--borderColor-muted, #d8dee4); }\n    .file-tree summary { padding: 5px 7px; color: var(--fgColor-default, #1f2328); font-size: 0.875rem; font-weight: 600; line-height: 1.35; border-radius: 5px; cursor: pointer; user-select: none; }\n    .folder-icon { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }\n    .file-tree summary:hover { background: var(--bgColor-muted, #f6f8fa); }\n    .file-tree summary::marker { color: var(--fgColor-muted, #59636e); }\n    .file-tree a { display: flex; margin: 1px 0; padding: 5px 8px; align-items: center; gap: 6px; overflow: hidden; color: var(--fgColor-muted, #59636e); font-size: 0.875rem; line-height: 1.35; text-decoration: none; white-space: nowrap; border-radius: 5px; }\n    .file-tree-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }\n    .file-tree-comment-count { display: inline-flex; min-width: 18px; height: 18px; flex: none; align-items: center; justify-content: center; padding: 0 5px; color: var(--fgColor-muted, #59636e); font-size: 0.6875rem; font-weight: 600; line-height: 18px; background: var(--bgColor-neutral-muted, #818b981f); border-radius: 9px; }\n    .file-tree-directory-comment-count { float: right; margin-left: 6px; }\n    .file-tree details[open] > summary > .file-tree-directory-comment-count { display: none; }\n    .file-tree a[aria-current=\"page\"] .file-tree-comment-count { color: var(--fgColor-accent, #0969da); background: var(--bgColor-default, #fff); }\n    .file-tree a:hover { color: var(--fgColor-default, #1f2328); background: var(--bgColor-muted, #f6f8fa); text-decoration: none; }\n    .file-tree a:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: -2px; }\n    .file-tree a[aria-current=\"page\"] { color: var(--fgColor-accent, #0969da); font-weight: 600; background: var(--bgColor-accent-muted, #ddf4ff); }\n    .file-tree-recent { position: relative; isolation: isolate; }\n    .file-tree-recent::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 12px; width: 1px; content: \"\"; background: var(--borderColor-muted, #d8dee4); }\n    .file-tree-date { position: relative; z-index: 1; margin: 10px 0 3px; background: var(--bgColor-default, #fff); }\n    .file-tree-date:first-child { margin-top: 4px; }\n    .file-tree-date button { display: flex; width: 100%; min-height: 28px; align-items: center; gap: 4px; padding: 4px 7px; color: var(--fgColor-default, #1f2328); font: inherit; font-size: 0.75rem; font-weight: 600; text-align: left; background: transparent; border: 0; border-radius: 5px; cursor: pointer; }\n    .file-tree-date button:hover { background: var(--bgColor-muted, #f6f8fa); }\n    .file-tree-date button:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: -2px; }\n    .file-tree-date button svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 120ms ease; }\n    .file-tree-date button[aria-expanded=\"false\"] svg { transform: rotate(-90deg); }\n    .file-tree-date button span { min-width: 18px; margin-left: auto; padding: 1px 5px; color: var(--fgColor-muted, #59636e); font-size: 0.6875rem; font-weight: 600; line-height: 16px; text-align: center; background: var(--bgColor-neutral-muted, #818b981f); border-radius: 9px; }\n    .file-tree-recent .is-date-collapsed { display: none; }\n    .file-tree-directory-group { display: none; }\n    .file-tree-directory-group .folder-icon { width: 13px; height: 13px; flex: none; }\n    .file-tree-directory-group span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .file-tree-recent-file { position: relative; margin-left: 22px; }\n    .file-tree-recent-file a { position: relative; margin-top: 0; margin-bottom: 0; overflow: visible; align-items: center; gap: 7px; }\n    .file-tree-recent-time { width: 32px; flex: none; color: var(--fgColor-muted, #59636e); font-size: 0.6875rem; font-variant-numeric: tabular-nums; text-align: right; }\n    .file-tree-recent-label { display: flex; min-width: 0; flex: 1; }\n    .file-tree-recent-label .file-tree-name { position: relative; top: -1px; width: 100%; color: var(--fgColor-default, #1f2328); font-size: 0.8125rem; font-weight: 400; }\n    .file-tree-recent-file a:hover .file-tree-name { text-decoration: underline; text-underline-offset: 2px; }\n    .file-tree-directory-tooltip { position: fixed; z-index: 100; top: 0; left: 0; display: none; max-width: min(240px, calc(100vw - 16px)); flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 8px; color: var(--fgColor-default, #1f2328); font-size: 0.6875rem; font-weight: 400; line-height: 1.35; white-space: nowrap; background: var(--bgColor-default, #fff); border: 1px solid var(--borderColor-default, #d0d7de); border-radius: 5px; box-shadow: 0 2px 8px rgba(31,35,40,.16); transform: translateY(-50%); pointer-events: none; }\n    .file-tree-directory-tooltip::before { position: absolute; top: 50%; right: calc(100% - 4px); width: 7px; height: 7px; content: \"\"; background: var(--bgColor-default, #fff); border: 0 solid var(--borderColor-default, #d0d7de); border-width: 0 0 1px 1px; transform: translateY(-50%) rotate(45deg); }\n    .file-tree-directory-tooltip-path { display: flex; max-width: 220px; align-items: center; gap: 5px; overflow: hidden; }\n    .file-tree-directory-tooltip-path .folder-icon { width: 12px; height: 12px; flex: none; margin: 0; }\n    .file-tree-directory-tooltip-path > span { overflow: hidden; text-overflow: ellipsis; }\n    .file-tree-recent-file a:hover .file-tree-directory-tooltip, .file-tree-recent-file a:focus-visible .file-tree-directory-tooltip { display: flex; }\n    .file-tree-recent-file .file-tree-comment-count { margin-top: 0; }\n    .file-tree-recent-empty { margin: 10px 4px 2px; color: var(--fgColor-muted, #59636e); font-size: 0.8125rem; text-align: center; }\n    @media (max-width: 900px) {\n      body.markdown-body.has-file-tree, body.markdown-body.has-file-tree.file-sidebar-collapsed { width: calc(100% - 24px); margin: 0 12px; padding: 12px 0 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: \"toc\" \"content\"; gap: 16px; }\n      .file-sidebar { width: min(280px, calc(100vw - 24px)); box-shadow: 8px 0 24px rgba(31,35,40,.18); }\n    }\n    @media (max-width: 600px) { .file-tree-popover { width: calc(100vw - 40px); max-height: calc(100vh - 80px); } }\n    ";

package/dist/template/styles.js

@@ -105,10 +105,9 @@ export const fileTreeStyles = `    body.markdown-body.has-file-tree { width: 100
     .file-tree a:hover { color: var(--fgColor-default, #1f2328); background: var(--bgColor-muted, #f6f8fa); text-decoration: none; }
     .file-tree a:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: -2px; }
     .file-tree a[aria-current="page"] { color: var(--fgColor-accent, #0969da); font-weight: 600; background: var(--bgColor-accent-muted, #ddf4ff); }
-    .file-tree-recent { position: relative; }
-    .file-tree-recent::before { position: absolute; top: 0; bottom: 0; left: 12px; width: 1px; content: ""; background: var(--borderColor-muted, #d8dee4); }
+    .file-tree-recent { position: relative; isolation: isolate; }
+    .file-tree-recent::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 12px; width: 1px; content: ""; background: var(--borderColor-muted, #d8dee4); }
     .file-tree-date { position: relative; z-index: 1; margin: 10px 0 3px; background: var(--bgColor-default, #fff); }
-    .file-tree-date::before { position: absolute; top: -10px; bottom: -3px; left: 12px; width: 1px; content: ""; background: var(--bgColor-default, #fff); }
     .file-tree-date:first-child { margin-top: 4px; }
     .file-tree-date button { display: flex; width: 100%; min-height: 28px; align-items: center; gap: 4px; padding: 4px 7px; color: var(--fgColor-default, #1f2328); font: inherit; font-size: 0.75rem; font-weight: 600; text-align: left; background: transparent; border: 0; border-radius: 5px; cursor: pointer; }
     .file-tree-date button:hover { background: var(--bgColor-muted, #f6f8fa); }
@@ -121,18 +120,18 @@ export const fileTreeStyles = `    body.markdown-body.has-file-tree { width: 100
     .file-tree-directory-group .folder-icon { width: 13px; height: 13px; flex: none; }
     .file-tree-directory-group span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .file-tree-recent-file { position: relative; margin-left: 22px; }
-    .file-tree-recent-file a { position: relative; margin-top: 0; margin-bottom: 0; overflow: visible; align-items: flex-start; gap: 7px; }
+    .file-tree-recent-file a { position: relative; margin-top: 0; margin-bottom: 0; overflow: visible; align-items: center; gap: 7px; }
+    .file-tree-recent-time { width: 32px; flex: none; color: var(--fgColor-muted, #59636e); font-size: 0.6875rem; font-variant-numeric: tabular-nums; text-align: right; }
     .file-tree-recent-label { display: flex; min-width: 0; flex: 1; }
-    .file-tree-recent-label .file-tree-name { width: 100%; color: var(--fgColor-default, #1f2328); font-size: 0.8125rem; font-weight: 400; }
+    .file-tree-recent-label .file-tree-name { position: relative; top: -1px; width: 100%; color: var(--fgColor-default, #1f2328); font-size: 0.8125rem; font-weight: 400; }
     .file-tree-recent-file a:hover .file-tree-name { text-decoration: underline; text-underline-offset: 2px; }
     .file-tree-directory-tooltip { position: fixed; z-index: 100; top: 0; left: 0; display: none; max-width: min(240px, calc(100vw - 16px)); flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 8px; color: var(--fgColor-default, #1f2328); font-size: 0.6875rem; font-weight: 400; line-height: 1.35; white-space: nowrap; background: var(--bgColor-default, #fff); border: 1px solid var(--borderColor-default, #d0d7de); border-radius: 5px; box-shadow: 0 2px 8px rgba(31,35,40,.16); transform: translateY(-50%); pointer-events: none; }
     .file-tree-directory-tooltip::before { position: absolute; top: 50%; right: calc(100% - 4px); width: 7px; height: 7px; content: ""; background: var(--bgColor-default, #fff); border: 0 solid var(--borderColor-default, #d0d7de); border-width: 0 0 1px 1px; transform: translateY(-50%) rotate(45deg); }
     .file-tree-directory-tooltip-path { display: flex; max-width: 220px; align-items: center; gap: 5px; overflow: hidden; }
     .file-tree-directory-tooltip-path .folder-icon { width: 12px; height: 12px; flex: none; margin: 0; }
     .file-tree-directory-tooltip-path > span { overflow: hidden; text-overflow: ellipsis; }
-    .file-tree-directory-tooltip > time { color: var(--fgColor-muted, #59636e); font-variant-numeric: tabular-nums; }
     .file-tree-recent-file a:hover .file-tree-directory-tooltip, .file-tree-recent-file a:focus-visible .file-tree-directory-tooltip { display: flex; }
-    .file-tree-recent-file .file-tree-comment-count { margin-top: 1px; }
+    .file-tree-recent-file .file-tree-comment-count { margin-top: 0; }
     .file-tree-recent-empty { margin: 10px 4px 2px; color: var(--fgColor-muted, #59636e); font-size: 0.8125rem; text-align: center; }
     @media (max-width: 900px) {
       body.markdown-body.has-file-tree, body.markdown-body.has-file-tree.file-sidebar-collapsed { width: calc(100% - 24px); margin: 0 12px; padding: 12px 0 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "content"; gap: 16px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marksites",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Convert Markdown into standalone GitHub-styled HTML.",
   "type": "module",
   "exports": {