marksites 0.1.0

package/dist/features/file-tree.js

@@ -0,0 +1,325 @@
+import { createHash } from "node:crypto";
+import { escapeHtml } from "../utils/html.js";
+import { renderCopyIcon, renderFolderIcon } from "../utils/icons.js";
+function createFolderIds(nodes) {
+    const paths = [];
+    const collect = (items, parentPath = "") => {
+        for (const item of items) {
+            if (item.type !== "directory")
+                continue;
+            const path = parentPath ? `${parentPath}/${item.name}` : item.name;
+            paths.push(path);
+            collect(item.children, path);
+        }
+    };
+    collect(nodes);
+    const hashes = new Map(paths.map((path) => [
+        path,
+        createHash("sha256").update(path).digest("base64url"),
+    ]));
+    let length = 6;
+    const uniqueAt = (size) => new Set([...hashes.values()].map((hash) => hash.slice(0, size))).size ===
+        hashes.size;
+    while (!uniqueAt(length) && length < 43) {
+        length++;
+    }
+    if (!uniqueAt(length))
+        throw new Error("Folder ID hash collision");
+    return new Map([...hashes].map(([path, hash]) => [path, hash.slice(0, length)]));
+}
+function renderNodes(nodes, folderIds, parentPath = "") {
+    return nodes
+        .map((node) => {
+        if (node.type === "directory") {
+            const path = parentPath ? `${parentPath}/${node.name}` : node.name;
+            return `      <li class="file-tree-directory">
+        <details data-folder-id="${folderIds.get(path)}">
+          <summary>${renderFolderIcon()}<span>${escapeHtml(node.name)}</span></summary>
+          <ul>
+${renderNodes(node.children, folderIds, path)}
+          </ul>
+        </details>
+      </li>`;
+        }
+        const current = node.current ? ' aria-current="page"' : "";
+        const count = Number.isSafeInteger(node.commentCount) && node.commentCount > 0
+            ? `<span class="file-tree-comment-count" aria-label="コメント${node.commentCount}件">${node.commentCount}</span>`
+            : "";
+        return `      <li class="file-tree-file"><a href="${escapeHtml(node.href)}" data-file-name="${escapeHtml(node.name)}"${current}><span class="file-tree-name">${escapeHtml(node.name)}</span>${count}</a></li>`;
+    })
+        .join("\n");
+}
+export function renderFileTree(options) {
+    if (!options || options.items.length === 0)
+        return "";
+    const folderIds = createFolderIds(options.items);
+    const contents = renderTreeContents(options.items, folderIds);
+    return `<nav class="file-tree file-tree-popover" id="file-tree-popover" aria-label="${escapeHtml(options.title ?? "ファイル")}" hidden>
+${contents}</nav>
+`;
+}
+function renderTreeContents(items, folderIds) {
+    return `    <div class="file-tree-filter">
+      <input type="search" class="file-tree-filter-input" placeholder="ファイルを検索" aria-label="ファイル名で検索" autocomplete="off">
+      <p class="file-tree-filter-empty" hidden>一致するファイルはありません</p>
+    </div>
+    <ul class="file-tree-root">
+${renderNodes(items, folderIds)}
+    </ul>
+`;
+}
+export function renderFileSidebar(options) {
+    if (!options || options.items.length === 0)
+        return "";
+    const folderIds = createFolderIds(options.items);
+    const title = escapeHtml(options.title ?? "ファイル");
+    return `<button type="button" class="file-sidebar-close" data-file-sidebar-close aria-label="ファイルサイドバーを閉じる" title="ファイルサイドバーを閉じる"><svg class="file-sidebar-toggle-icon" viewBox="0 0 16 16" aria-hidden="true"><rect x="1.75" y="2.25" width="12.5" height="11.5" rx="1.5" /><path d="M6 2.5v11M10.5 5.5L8 8l2.5 2.5" /></svg></button>
+<aside class="file-sidebar" id="file-sidebar" aria-label="${title}">
+  <div class="file-sidebar-header"><span>${title}</span></div>
+  <nav class="file-tree file-tree-sidebar" aria-label="${title}">
+    <div class="file-tree-filter">
+      <input type="search" class="file-tree-filter-input" placeholder="ファイルを検索" aria-label="ファイル名で検索" autocomplete="off">
+      <p class="file-tree-filter-empty" hidden>一致するファイルはありません</p>
+    </div>
+    <ul class="file-tree-root">
+${renderNodes(options.items, folderIds)}
+    </ul>
+</nav>
+</aside>
+`;
+}
+export function renderFileTreeScript(enabled) {
+    if (!enabled)
+        return "";
+    return `<script>
+(() => {
+  const trees = [...document.querySelectorAll('.file-tree')];
+  if (trees.length === 0) return;
+  const popover = document.querySelector('.file-tree-popover');
+  const sidebar = document.querySelector('.file-sidebar');
+  const popoverToggle = document.querySelector('[data-file-tree-toggle]');
+  const sidebarOpenButton = document.querySelector('[data-file-sidebar-open]');
+  const sidebarCloseButton = document.querySelector('[data-file-sidebar-close]');
+  const copyPath = document.querySelector('[data-copy-file-path]');
+  const directories = [...document.querySelectorAll('.file-tree-directory')];
+  const stateParameter = 'open';
+  const popoverParameter = 'marksites-files';
+  const sidebarParameter = 'file-sidebar';
+  const pageUrl = new URL(location.href);
+  const openPaths = new Set(pageUrl.searchParams.getAll(stateParameter));
+  const compact = matchMedia('(max-width: 900px)');
+  let sidebarPreferenceOpen = pageUrl.searchParams.get(sidebarParameter) !== 'closed';
+  const ignoredToggles = new WeakSet();
+  const initialOpenState = new Map();
+
+  for (const directory of directories) {
+    const details = directory.querySelector(':scope > details');
+    details.open = openPaths.has(details.dataset.folderId);
+    initialOpenState.set(details.dataset.folderId, details.open);
+  }
+
+  const syncState = () => {
+    const open = [...initialOpenState]
+      .filter(([, isOpen]) => isOpen)
+      .map(([id]) => id);
+    const updateUrl = (url) => {
+      url.searchParams.delete(stateParameter);
+      for (const path of open) url.searchParams.append(stateParameter, path);
+      url.searchParams.delete(popoverParameter);
+      if (!popover.hidden) url.searchParams.set(popoverParameter, 'open');
+      url.searchParams.delete(sidebarParameter);
+      if (!sidebarPreferenceOpen) url.searchParams.set(sidebarParameter, 'closed');
+      return url;
+    };
+
+    history.replaceState(null, '', updateUrl(new URL(location.href)));
+    for (const link of document.querySelectorAll('a[href]')) {
+      const rawHref = link.getAttribute('href');
+      if (!rawHref || rawHref.startsWith('#')) continue;
+      const url = new URL(rawHref, location.href);
+      if (url.protocol !== location.protocol || url.host !== location.host || !url.pathname.endsWith('.html')) continue;
+      link.href = updateUrl(url).href;
+    }
+  };
+
+  for (const tree of trees) {
+    tree.querySelector('.file-tree-root').addEventListener('toggle', (event) => {
+      if (ignoredToggles.delete(event.target)) return;
+      const input = tree.querySelector('.file-tree-filter-input');
+      if (input.value !== '' || !event.target.matches('details[data-folder-id]')) return;
+      const id = event.target.dataset.folderId;
+      initialOpenState.set(id, event.target.open);
+      for (const peer of document.querySelectorAll('details[data-folder-id="'+CSS.escape(id)+'"]')) {
+        if (peer === event.target || peer.open === event.target.open) continue;
+        ignoredToggles.add(peer);
+        peer.open = event.target.open;
+      }
+      syncState();
+    }, true);
+  }
+
+  const setPopoverOpen = (open, restoreFocus = false, sync = true) => {
+    popover.hidden = !open;
+    popoverToggle.setAttribute('aria-expanded', String(open));
+    const label = open ? 'ファイルを閉じる' : 'ファイルを開く';
+    popoverToggle.setAttribute('aria-label', label);
+    popoverToggle.title = label;
+    if (sync) syncState();
+    if (open) popover.querySelector('.file-tree-filter-input').focus();
+    else if (restoreFocus) popoverToggle.focus();
+  };
+
+  const applySidebarState = (open) => {
+    sidebar.hidden = !open;
+    sidebarCloseButton.hidden = !open;
+    sidebarOpenButton.hidden = open;
+    sidebarOpenButton.setAttribute('aria-expanded', String(open));
+    document.body.classList.toggle('file-sidebar-collapsed', !open);
+  };
+
+  const setSidebarOpen = (open, sync = true) => {
+    sidebarPreferenceOpen = open;
+    applySidebarState(open);
+    if (sync) syncState();
+    if (open) sidebar.querySelector('.file-tree-filter-input').focus();
+    else sidebarOpenButton.focus();
+  };
+
+  setPopoverOpen(pageUrl.searchParams.get(popoverParameter) === 'open', false, false);
+  applySidebarState(sidebarPreferenceOpen && !compact.matches);
+  syncState();
+
+  popoverToggle?.addEventListener('click', (event) => {
+    event.preventDefault();
+    setPopoverOpen(popover.hidden);
+  });
+  sidebarOpenButton?.addEventListener('click', () => setSidebarOpen(true));
+  sidebarCloseButton?.addEventListener('click', () => setSidebarOpen(false));
+  document.addEventListener('pointerdown', (event) => {
+    if (popover.hidden || event.target.closest('.file-navigation,.file-sidebar')) return;
+    setPopoverOpen(false);
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && !popover.hidden) setPopoverOpen(false, true);
+  });
+  compact.addEventListener('change', () => applySidebarState(sidebarPreferenceOpen && !compact.matches));
+  copyPath?.addEventListener('click', async () => {
+    const path = copyPath.dataset.copyFilePath;
+    try {
+      if (navigator.clipboard && location.protocol !== 'file:') {
+        await navigator.clipboard.writeText(path);
+      } else {
+        const area = document.createElement('textarea');
+        area.value = path;
+        area.style.position = 'fixed';
+        area.style.opacity = '0';
+        document.body.append(area);
+        area.select();
+        const copied = document.execCommand('copy');
+        area.remove();
+        if (!copied) throw new Error('コピーに失敗しました');
+      }
+      copyPath.setAttribute('aria-label', 'ファイルパスをコピーしました');
+      copyPath.title = 'コピーしました';
+    } catch {
+      copyPath.setAttribute('aria-label', 'ファイルパスをコピーできませんでした');
+      copyPath.title = 'コピーに失敗しました';
+    }
+    setTimeout(() => {
+      copyPath.setAttribute('aria-label', 'ファイルパスをコピー');
+      copyPath.title = 'ファイルパスをコピー';
+    }, 1000);
+  });
+
+  for (const tree of trees) {
+    const input = tree.querySelector('.file-tree-filter-input');
+    const empty = tree.querySelector('.file-tree-filter-empty');
+    const root = tree.querySelector('.file-tree-root');
+    const treeDirectories = [...root.querySelectorAll('.file-tree-directory')];
+    const filter = () => {
+      const query = input.value.trim().toLocaleLowerCase();
+      const files = [...root.querySelectorAll('.file-tree-file')];
+      let matches = 0;
+      for (const file of files) {
+        const name = file.querySelector('a').dataset.fileName.toLocaleLowerCase();
+        const visible = query === '' || name.includes(query);
+        file.hidden = !visible;
+        if (visible) matches += 1;
+      }
+      for (const directory of [...treeDirectories].reverse()) {
+        const details = directory.querySelector(':scope > details');
+        const hasVisibleFile = [...details.querySelectorAll('.file-tree-file')].some((file) => !file.hidden);
+        directory.hidden = !hasVisibleFile;
+        const open = query === '' ? initialOpenState.get(details.dataset.folderId) : hasVisibleFile;
+        if (details.open !== open) {
+          ignoredToggles.add(details);
+          details.open = open;
+        }
+      }
+      empty.hidden = matches !== 0;
+    };
+    input.addEventListener('input', filter);
+    input.addEventListener('keydown', (event) => {
+      if (event.key !== 'Escape' || input.value === '') return;
+      input.value = '';
+      filter();
+    });
+  }
+})();
+</script>`;
+}
+export function renderBreadcrumbs(breadcrumbs, modifiedAt) {
+    const timestamp = renderModifiedAt(modifiedAt);
+    if (!breadcrumbs || breadcrumbs.length === 0)
+        return `<nav class="file-breadcrumbs" aria-label="パンくずリスト">
+  <button type="button" class="file-sidebar-open" data-file-sidebar-open aria-expanded="true" aria-controls="file-sidebar" aria-label="ファイルサイドバーを開く" title="ファイルサイドバーを開く" hidden><svg class="file-sidebar-toggle-icon" viewBox="0 0 16 16" aria-hidden="true"><rect x="1.75" y="2.25" width="12.5" height="11.5" rx="1.5" /><path d="M6 2.5v11M8 5.5L10.5 8 8 10.5" /></svg></button>
+  <button type="button" class="file-tree-popover-toggle" data-file-tree-toggle aria-expanded="false" aria-controls="file-tree-popover" aria-haspopup="true" aria-label="ファイルを開く" title="ファイルを開く"><span>ファイル</span><svg class="panel-toggle-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" /></svg></button>
+${timestamp}
+</nav>
+`;
+    const current = breadcrumbs.find((breadcrumb) => breadcrumb.current);
+    const popoverLabel = escapeHtml(current?.name ?? "ファイル");
+    const items = breadcrumbs
+        .filter((breadcrumb) => !breadcrumb.current)
+        .map((breadcrumb) => {
+        const label = breadcrumb.href
+            ? `<a href="${escapeHtml(breadcrumb.href)}">${escapeHtml(breadcrumb.name)}</a>`
+            : `<span>${escapeHtml(breadcrumb.name)}</span>`;
+        return `    <li>${label}</li>`;
+    })
+        .join("\n");
+    const trail = items
+        ? `  <ol>
+${items}
+  </ol>
+  <span class="file-breadcrumb-separator" aria-hidden="true">/</span>
+`
+        : "";
+    const path = breadcrumbs.map((breadcrumb) => breadcrumb.name).join("/");
+    return `<nav class="file-breadcrumbs" aria-label="パンくずリスト">
+  <button type="button" class="file-sidebar-open" data-file-sidebar-open aria-expanded="true" aria-controls="file-sidebar" aria-label="ファイルサイドバーを開く" title="ファイルサイドバーを開く" hidden><svg class="file-sidebar-toggle-icon" viewBox="0 0 16 16" aria-hidden="true"><rect x="1.75" y="2.25" width="12.5" height="11.5" rx="1.5" /><path d="M6 2.5v11M8 5.5L10.5 8 8 10.5" /></svg></button>
+${trail}  <button type="button" class="file-tree-popover-toggle" data-file-tree-toggle aria-expanded="false" aria-controls="file-tree-popover" aria-haspopup="true" aria-label="ファイルを開く" title="ファイルを開く"><span>${popoverLabel}</span><svg class="panel-toggle-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" /></svg></button>
+  <button type="button" class="copy-file-path" data-copy-file-path="${escapeHtml(path)}" aria-label="ファイルパスをコピー" title="ファイルパスをコピー">${renderCopyIcon()}</button>
+${timestamp}
+</nav>
+`;
+}
+export function renderModifiedAt(modifiedAt) {
+    if (!modifiedAt)
+        return "";
+    const date = new Date(modifiedAt);
+    if (Number.isNaN(date.getTime()))
+        throw new Error(`Invalid modifiedAt timestamp: ${modifiedAt}`);
+    const label = date.toISOString().slice(0, 19).replace("T", " ");
+    return `<time class="document-modified" datetime="${date.toISOString()}">更新 ${label}</time>`;
+}
+export function renderModifiedAtScript(enabled) {
+    if (!enabled)
+        return "";
+    return `<script>(()=>{
+const element=document.querySelector('.document-modified');if(!element)return;
+const date=new Date(element.dateTime);if(Number.isNaN(date.getTime()))return;
+const pad=value=>String(value).padStart(2,'0');
+element.textContent='更新 '+date.getFullYear()+'-'+pad(date.getMonth()+1)+'-'+pad(date.getDate())+' '+pad(date.getHours())+':'+pad(date.getMinutes())+':'+pad(date.getSeconds());
+})()</script>`;
+}

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

@@ -0,0 +1,4 @@
+import type { DocumentFeature } from "../types.js";
+/** Assets owned by the generated document header. */
+export type HeaderFeature = DocumentFeature;
+export declare function createHeaderFeature(): HeaderFeature;

package/dist/features/header/index.js

@@ -0,0 +1,47 @@
+export function createHeaderFeature() {
+    const markup = `<header class="site-header">
+  <div class="site-header-brand"><strong>marksites</strong></div>
+  <div class="site-header-actions">
+    <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>
+</header>`;
+    const styles = `
+.site-header{position:fixed;z-index:40;top:0;right:0;left:0;box-sizing:border-box;display:flex;height:56px;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;color:var(--fgColor-default,#1f2328);background:var(--bgColor-default,#fff);border-bottom:1px solid var(--borderColor-muted,#d8dee4)}body.markdown-body.has-file-tree .site-header{padding-left:56px}
+.site-header-brand{display:flex;min-width:0;align-items:center}.site-header-brand strong{font-size:.9375rem}.site-header-actions{display:flex;flex:none;align-items:center;gap:6px}.site-header-action{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;gap:3px;padding:0;color:var(--fgColor-muted,#59636e);font:inherit;background:transparent;border:0;border-radius:6px;cursor:pointer}.site-header-action:hover{color:var(--fgColor-default,#1f2328);background:var(--button-default-bgColor-hover,#eaeef2)}.site-header-action:focus-visible{outline:2px solid var(--focus-outlineColor,#0969da);outline-offset:2px}.site-header-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}.site-header-action svg[hidden]{display:none}.site-header-action.language-toggle{width:auto;min-width:48px;padding:0 7px}.language-toggle span{font-size:.6875rem;font-weight:700;line-height:1}
+body.markdown-body,body.markdown-body.has-file-tree,body.markdown-body.has-file-tree.file-sidebar-collapsed{padding-top:88px}.document-sidebar{top:88px;max-height:calc(100vh - 120px)}.file-sidebar{top:56px}.markdown-content :is(h1,h2,h3,h4,h5,h6){scroll-margin-top:88px}
+body.markdown-body[data-theme="dark"]{color-scheme:dark;color:#f0f6fc;background:#0d1117;--fgColor-default:#f0f6fc;--fgColor-muted:#a3abb5;--fgColor-accent:#58a6ff;--fgColor-danger:#ff7b72;--fgColor-attention:#e3b341;--fgColor-success:#56d364;--bgColor-default:#0d1117;--bgColor-muted:#161b22;--bgColor-neutral-muted:#6e768166;--bgColor-accent-muted:#1f6feb40;--bgColor-attention-muted:#bb800940;--bgColor-danger-muted:#67060c;--borderColor-default:#484f58;--borderColor-muted:#484f58cc;--borderColor-accent-emphasis:#388bfd;--button-default-bgColor-rest:#21262d;--button-default-bgColor-hover:#30363d;--focus-outlineColor:#58a6ff;--codeBlock-bgColor:#161b22;--codeBlock-fgColor:#e6edf3;--annotation-highlight-bgColor:#4d3b05;--annotation-highlight-borderColor:#e3b341;--color-prettylights-syntax-comment:#a3abb5;--color-prettylights-syntax-constant:#79c0ff;--color-prettylights-syntax-entity:#d2a8ff;--color-prettylights-syntax-entity-tag:#7ee787;--color-prettylights-syntax-keyword:#ff7b72;--color-prettylights-syntax-string:#a5d6ff;--color-prettylights-syntax-variable:#ffa657}
+body.markdown-body[data-theme="light"]{color-scheme:light;color:#1f2328;background:#fff;--fgColor-default:#1f2328;--fgColor-muted:#59636e;--fgColor-accent:#0969da;--fgColor-danger:#d1242f;--fgColor-attention:#9a6700;--fgColor-success:#1a7f37;--bgColor-default:#fff;--bgColor-muted:#f6f8fa;--bgColor-neutral-muted:#818b981f;--bgColor-accent-muted:#ddf4ff;--bgColor-attention-muted:#fff8c5;--bgColor-danger-muted:#ffebe9;--borderColor-default:#d0d7de;--borderColor-muted:#d8dee4;--borderColor-accent-emphasis:#0969da;--button-default-bgColor-rest:#f6f8fa;--button-default-bgColor-hover:#eaeef2;--focus-outlineColor:#0969da;--codeBlock-bgColor:#fff;--codeBlock-fgColor:#24292f;--annotation-highlight-bgColor:#fff8c5;--annotation-highlight-borderColor:#bf8700}
+@media(max-width:900px){body.markdown-body,body.markdown-body.has-file-tree,body.markdown-body.has-file-tree.file-sidebar-collapsed{padding-top:68px}.document-sidebar{top:68px;max-height:calc(100vh - 80px)}.file-sidebar{top:56px}.markdown-content :is(h1,h2,h3,h4,h5,h6){scroll-margin-top:68px}}
+`;
+    const script = `<script>(()=>{
+const languageParameter='lang',themeParameter='theme',pageUrl=new URL(location.href),textOriginal=new WeakMap(),attributeOriginal=new WeakMap();
+const english=new Map(${JSON.stringify([
+        ["目次", "Outline"], ["コメント", "Comments"], ["ファイル", "Files"], ["アーカイブ", "Archived"],
+        ["追加", "Add"], ["コピー", "Copy"], ["コメントを追加", "Add comment"], ["コメントをすべてコピー", "Copy all comments"], ["コメントはありません。", "No comments."], ["このページにコメントはありません。", "No comments on this page."],
+        ["コピー", "Copy"], ["AI向けコピー", "Copy for AI"], ["折り返す", "Wrap"], ["コピーしました", "Copied"], ["保存", "Save"], ["キャンセル", "Cancel"],
+        ["引用", "Quote"], ["引用先なし", "Quote unavailable"], ["文書全体", "Whole document"],
+        ["ファイルを検索", "Filter files"], ["一致するファイルはありません", "No matching files"],
+        ["ファイルサイドバーを開く", "Open file sidebar"], ["ファイルサイドバーを閉じる", "Close file sidebar"], ["ファイルを開く", "Open files"], ["ファイルを閉じる", "Close files"],
+        ["ファイル名で検索", "Filter files by name"], ["ファイルパスをコピー", "Copy file path"], ["ファイルパスをコピーしました", "File path copied"], ["ファイルパスをコピーできませんでした", "Could not copy file path"],
+        ["選択範囲の操作", "Selection actions"], ["選択範囲をコピー", "Copy selection"], ["AI向けの形式でコピー", "Copy for AI"], ["選択範囲にコメントを追加", "Add comment to selection"], ["文書全体にコメントを追加", "Add comment to document"],
+        ["コメントをコピー", "Copy comment"], ["コメントを編集", "Edit comment"], ["コメントをアーカイブ", "Archive comment"], ["コメントを復元", "Restore comment"], ["コメントを削除", "Delete comment"],
+        ["アーカイブを開く", "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."],
+        ["コードをコピー", "Copy code"], ["長い行を折り返す", "Wrap long lines"], ["折り返しを解除", "Disable line wrapping"], ["コードをコピーしました", "Code copied"], ["コードをコピーできませんでした", "Could not copy code"],
+        ["文書ナビゲーション", "Document navigation"], ["文書サイドバー", "Document sidebar"], ["パンくずリスト", "Breadcrumbs"]
+    ])});
+const skipText=node=>{const parent=node.parentElement;if(!parent)return true;if(parent.closest('.file-tree-name,.file-tree summary span,.file-breadcrumbs ol,.table-of-contents a,.annotation-card>p,.annotation-quote,.annotation-source,.code-language'))return true;return Boolean(parent.closest('.markdown-content')&&!parent.closest('.file-navigation,.code-toolbar'))};
+const translate=value=>{if(english.has(value))return english.get(value);if(value.startsWith('更新 '))return'Updated '+value.slice(3);if(/^コメント\d+件$/.test(value))return value.replace(/^コメント(\d+)件$/,'$1 comments');return value};
+function applyNode(node,language){if(node.nodeType===Node.TEXT_NODE){if(skipText(node))return;if(!textOriginal.has(node))textOriginal.set(node,node.data);const original=textOriginal.get(node),trimmed=original.trim(),next=language==='en'?original.replace(trimmed,translate(trimmed)):original;if(node.data!==next)node.data=next;return}if(node.nodeType!==Node.ELEMENT_NODE)return;const element=node,attributes=['aria-label','title','placeholder'];let originals=attributeOriginal.get(element);if(!originals){originals=new Map();attributeOriginal.set(element,originals)}for(const name of attributes){if(!element.hasAttribute(name)&&!originals.has(name))continue;if(!originals.has(name))originals.set(name,element.getAttribute(name));const original=originals.get(name),next=language==='en'?translate(original):original;if(element.getAttribute(name)!==next)element.setAttribute(name,next)}for(const child of element.childNodes)applyNode(child,language)}
+function applyLanguage(language){document.documentElement.lang=language;document.body.dataset.language=language;for(const root of document.querySelectorAll('.site-header,.file-sidebar,.file-navigation,.document-sidebar,.selection-actions,.code-toolbar'))applyNode(root,language);const button=document.querySelector('[data-language-toggle]'),label=document.querySelector('[data-language-label]'),next=language==='ja'?'en':'ja';label.textContent=language==='ja'?'JA':'EN';button.setAttribute('aria-label',next==='en'?'英語に切り替え':'Switch to Japanese');button.title=button.getAttribute('aria-label')}
+function syncLinks(){const language=document.body.dataset.language,theme=document.body.dataset.theme;const update=url=>{url.searchParams.delete(languageParameter);if(language==='en')url.searchParams.set(languageParameter,'en');url.searchParams.set(themeParameter,theme);return url};history.replaceState(null,'',update(new URL(location.href)));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 applyTheme(theme){document.documentElement.dataset.theme=theme;document.body.dataset.theme=theme;const dark=theme==='dark',button=document.querySelector('[data-theme-toggle]');button.querySelector('[data-theme-dark-icon]').hidden=dark;button.querySelector('[data-theme-light-icon]').hidden=!dark;const label=dark?(document.body.dataset.language==='en'?'Switch to light mode':'ライトモードに切り替え'):(document.body.dataset.language==='en'?'Switch to dark mode':'ダークモードに切り替え');button.setAttribute('aria-label',label);button.title=label}
+const initialLanguage=pageUrl.searchParams.get(languageParameter)==='en'?'en':'ja',initialTheme=['dark','light'].includes(pageUrl.searchParams.get(themeParameter))?pageUrl.searchParams.get(themeParameter):(matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');applyLanguage(initialLanguage);applyTheme(initialTheme);syncLinks();
+document.querySelector('[data-theme-toggle]').addEventListener('click',()=>{applyTheme(document.body.dataset.theme==='dark'?'light':'dark');syncLinks()});document.querySelector('[data-language-toggle]').addEventListener('click',()=>{applyLanguage(document.body.dataset.language==='ja'?'en':'ja');applyTheme(document.body.dataset.theme);syncLinks()});
+new MutationObserver(records=>{const language=document.body.dataset.language;if(language!=='en')return;for(const record of records){if(record.type==='attributes'){const element=record.target,name=record.attributeName,current=element.getAttribute(name);if(current&&translate(current)!==current){let originals=attributeOriginal.get(element);if(!originals){originals=new Map();attributeOriginal.set(element,originals)}originals.set(name,current)}applyNode(element,language);continue}for(const node of record.addedNodes)applyNode(node,language)}}).observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:['aria-label','title','placeholder']});
+window.marksitesTranslate=translate;window.marksitesApplyLanguage=()=>applyLanguage(document.body.dataset.language);
+})()</script>`;
+    return { markup, styles, script };
+}

package/dist/features/header.d.ts

@@ -0,0 +1,6 @@
+export interface HeaderFeature {
+    markup: string;
+    styles: string;
+    script: string;
+}
+export declare function createHeaderFeature(): HeaderFeature;

package/dist/features/header.js

@@ -0,0 +1,47 @@
+export function createHeaderFeature() {
+    const markup = `<header class="site-header">
+  <div class="site-header-brand"><strong>marksites</strong></div>
+  <div class="site-header-actions">
+    <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>
+</header>`;
+    const styles = `
+.site-header{position:fixed;z-index:40;top:0;right:0;left:0;box-sizing:border-box;display:flex;height:56px;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;color:var(--fgColor-default,#1f2328);background:var(--bgColor-default,#fff);border-bottom:1px solid var(--borderColor-muted,#d8dee4)}body.markdown-body.has-file-tree .site-header{padding-left:56px}
+.site-header-brand{display:flex;min-width:0;align-items:center}.site-header-brand strong{font-size:.9375rem}.site-header-actions{display:flex;flex:none;align-items:center;gap:6px}.site-header-action{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;gap:3px;padding:0;color:var(--fgColor-muted,#59636e);font:inherit;background:transparent;border:0;border-radius:6px;cursor:pointer}.site-header-action:hover{color:var(--fgColor-default,#1f2328);background:var(--button-default-bgColor-hover,#eaeef2)}.site-header-action:focus-visible{outline:2px solid var(--focus-outlineColor,#0969da);outline-offset:2px}.site-header-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}.site-header-action svg[hidden]{display:none}.site-header-action.language-toggle{width:auto;min-width:48px;padding:0 7px}.language-toggle span{font-size:.6875rem;font-weight:700;line-height:1}
+body.markdown-body,body.markdown-body.has-file-tree,body.markdown-body.has-file-tree.file-sidebar-collapsed{padding-top:88px}.document-sidebar{top:88px;max-height:calc(100vh - 120px)}.file-sidebar{top:56px}.markdown-content :is(h1,h2,h3,h4,h5,h6){scroll-margin-top:88px}
+body.markdown-body[data-theme="dark"]{color-scheme:dark;color:#f0f6fc;background:#0d1117;--fgColor-default:#f0f6fc;--fgColor-muted:#9198a1;--fgColor-accent:#4493f8;--fgColor-danger:#f85149;--bgColor-default:#0d1117;--bgColor-muted:#151b23;--bgColor-neutral-muted:#656c7633;--bgColor-accent-muted:#1f6feb26;--bgColor-danger-muted:#490202;--borderColor-default:#3d444d;--borderColor-muted:#3d444db3;--borderColor-accent-emphasis:#1f6feb;--button-default-bgColor-rest:#212830;--button-default-bgColor-hover:#262c36;--focus-outlineColor:#1f6feb}
+body.markdown-body[data-theme="light"]{color-scheme:light;color:#1f2328;background:#fff;--fgColor-default:#1f2328;--fgColor-muted:#59636e;--fgColor-accent:#0969da;--fgColor-danger:#d1242f;--bgColor-default:#fff;--bgColor-muted:#f6f8fa;--bgColor-neutral-muted:#818b981f;--bgColor-accent-muted:#ddf4ff;--bgColor-danger-muted:#ffebe9;--borderColor-default:#d0d7de;--borderColor-muted:#d8dee4;--borderColor-accent-emphasis:#0969da;--button-default-bgColor-rest:#f6f8fa;--button-default-bgColor-hover:#eaeef2;--focus-outlineColor:#0969da}
+@media(max-width:900px){body.markdown-body,body.markdown-body.has-file-tree,body.markdown-body.has-file-tree.file-sidebar-collapsed{padding-top:68px}.document-sidebar{top:68px;max-height:calc(100vh - 80px)}.file-sidebar{top:56px}.markdown-content :is(h1,h2,h3,h4,h5,h6){scroll-margin-top:68px}}
+`;
+    const script = `<script>(()=>{
+const languageParameter='lang',themeParameter='theme',pageUrl=new URL(location.href),textOriginal=new WeakMap(),attributeOriginal=new WeakMap();
+const english=new Map(${JSON.stringify([
+        ["目次", "Outline"], ["コメント", "Comments"], ["ファイル", "Files"], ["アーカイブ", "Archived"],
+        ["コメントを追加", "Add comment"], ["コメントをすべてコピー", "Copy all comments"], ["コメントはありません。", "No comments."], ["このページにコメントはありません。", "No comments on this page."],
+        ["コピー", "Copy"], ["AI向けコピー", "Copy for AI"], ["折り返す", "Wrap"], ["コピーしました", "Copied"], ["保存", "Save"], ["キャンセル", "Cancel"],
+        ["引用", "Quote"], ["引用先なし", "Quote unavailable"], ["文書全体", "Whole document"],
+        ["ファイルを検索", "Filter files"], ["一致するファイルはありません", "No matching files"],
+        ["ファイルサイドバーを開く", "Open file sidebar"], ["ファイルサイドバーを閉じる", "Close file sidebar"], ["ファイルを開く", "Open files"], ["ファイルを閉じる", "Close files"],
+        ["ファイル名で検索", "Filter files by name"], ["ファイルパスをコピー", "Copy file path"], ["ファイルパスをコピーしました", "File path copied"], ["ファイルパスをコピーできませんでした", "Could not copy file path"],
+        ["選択範囲の操作", "Selection actions"], ["選択範囲をコピー", "Copy selection"], ["AI向けの形式でコピー", "Copy for AI"], ["選択範囲にコメントを追加", "Add comment to selection"], ["文書全体にコメントを追加", "Add comment to document"],
+        ["コメントをコピー", "Copy comment"], ["コメントを編集", "Edit comment"], ["コメントをアーカイブ", "Archive comment"], ["コメントを復元", "Restore comment"], ["コメントを削除", "Delete comment"],
+        ["アーカイブを開く", "Open archive"], ["アーカイブを閉じる", "Close archive"], ["コメントを保存", "Save comment"], ["編集をキャンセル", "Cancel editing"],
+        ["有効なコメントをすべてコピー", "Copy all 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."],
+        ["コードをコピー", "Copy code"], ["長い行を折り返す", "Wrap long lines"], ["折り返しを解除", "Disable line wrapping"], ["コードをコピーしました", "Code copied"], ["コードをコピーできませんでした", "Could not copy code"],
+        ["文書ナビゲーション", "Document navigation"], ["文書サイドバー", "Document sidebar"], ["パンくずリスト", "Breadcrumbs"]
+    ])});
+const skipText=node=>{const parent=node.parentElement;if(!parent)return true;if(parent.closest('.file-tree-name,.file-tree summary span,.file-breadcrumbs ol,.table-of-contents a,.annotation-card>p,.annotation-quote,.annotation-source,.code-language'))return true;return Boolean(parent.closest('.markdown-content')&&!parent.closest('.file-navigation,.code-toolbar'))};
+const translate=value=>{if(english.has(value))return english.get(value);if(value.startsWith('更新 '))return'Updated '+value.slice(3);if(/^コメント\d+件$/.test(value))return value.replace(/^コメント(\d+)件$/,'$1 comments');return value};
+function applyNode(node,language){if(node.nodeType===Node.TEXT_NODE){if(skipText(node))return;if(!textOriginal.has(node))textOriginal.set(node,node.data);const original=textOriginal.get(node),trimmed=original.trim(),next=language==='en'?original.replace(trimmed,translate(trimmed)):original;if(node.data!==next)node.data=next;return}if(node.nodeType!==Node.ELEMENT_NODE)return;const element=node,attributes=['aria-label','title','placeholder'];let originals=attributeOriginal.get(element);if(!originals){originals=new Map();attributeOriginal.set(element,originals)}for(const name of attributes){if(!element.hasAttribute(name)&&!originals.has(name))continue;if(!originals.has(name))originals.set(name,element.getAttribute(name));const original=originals.get(name),next=language==='en'?translate(original):original;if(element.getAttribute(name)!==next)element.setAttribute(name,next)}for(const child of element.childNodes)applyNode(child,language)}
+function applyLanguage(language){document.documentElement.lang=language;document.body.dataset.language=language;for(const root of document.querySelectorAll('.site-header,.file-sidebar,.file-navigation,.document-sidebar,.selection-actions,.code-toolbar'))applyNode(root,language);const button=document.querySelector('[data-language-toggle]'),label=document.querySelector('[data-language-label]'),next=language==='ja'?'en':'ja';label.textContent=language==='ja'?'JA':'EN';button.setAttribute('aria-label',next==='en'?'英語に切り替え':'Switch to Japanese');button.title=button.getAttribute('aria-label')}
+function syncLinks(){const language=document.body.dataset.language,theme=document.body.dataset.theme;const update=url=>{url.searchParams.delete(languageParameter);if(language==='en')url.searchParams.set(languageParameter,'en');url.searchParams.set(themeParameter,theme);return url};history.replaceState(null,'',update(new URL(location.href)));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 applyTheme(theme){document.documentElement.dataset.theme=theme;document.body.dataset.theme=theme;const dark=theme==='dark',button=document.querySelector('[data-theme-toggle]');button.querySelector('[data-theme-dark-icon]').hidden=dark;button.querySelector('[data-theme-light-icon]').hidden=!dark;const label=dark?(document.body.dataset.language==='en'?'Switch to light mode':'ライトモードに切り替え'):(document.body.dataset.language==='en'?'Switch to dark mode':'ダークモードに切り替え');button.setAttribute('aria-label',label);button.title=label}
+const initialLanguage=pageUrl.searchParams.get(languageParameter)==='en'?'en':'ja',initialTheme=['dark','light'].includes(pageUrl.searchParams.get(themeParameter))?pageUrl.searchParams.get(themeParameter):(matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');applyLanguage(initialLanguage);applyTheme(initialTheme);syncLinks();
+document.querySelector('[data-theme-toggle]').addEventListener('click',()=>{applyTheme(document.body.dataset.theme==='dark'?'light':'dark');syncLinks()});document.querySelector('[data-language-toggle]').addEventListener('click',()=>{applyLanguage(document.body.dataset.language==='ja'?'en':'ja');applyTheme(document.body.dataset.theme);syncLinks()});
+new MutationObserver(records=>{const language=document.body.dataset.language;if(language!=='en')return;for(const record of records){if(record.type==='attributes'){const element=record.target,name=record.attributeName,current=element.getAttribute(name);if(current&&translate(current)!==current){let originals=attributeOriginal.get(element);if(!originals){originals=new Map();attributeOriginal.set(element,originals)}originals.set(name,current)}applyNode(element,language);continue}for(const node of record.addedNodes)applyNode(node,language)}}).observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:['aria-label','title','placeholder']});
+window.marksitesTranslate=translate;window.marksitesApplyLanguage=()=>applyLanguage(document.body.dataset.language);
+})()</script>`;
+    return { markup, styles, script };
+}

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

@@ -0,0 +1,10 @@
+import type { DocumentFeature } from "../types.js";
+interface SidebarOptions {
+    tableOfContents: string;
+    tableOfContentsTitle: string;
+    annotations: string;
+    annotationCount: number;
+}
+export type SidebarFeature = DocumentFeature;
+export declare function createSidebarFeature({ tableOfContents, tableOfContentsTitle, annotations, annotationCount, }: SidebarOptions): SidebarFeature;
+export {};

package/dist/features/sidebar/index.js

@@ -0,0 +1,55 @@
+import { escapeHtml } from "../../utils/html.js";
+export function createSidebarFeature({ tableOfContents, tableOfContentsTitle, annotations, annotationCount, }) {
+    if (!tableOfContents && !annotations)
+        return { markup: "", styles: "", script: "" };
+    const hasComments = annotations !== "";
+    const tocTitle = escapeHtml(tableOfContentsTitle);
+    const initialPanel = tableOfContents ? "toc" : "comments";
+    const tabs = `${tableOfContents
+        ? `<button type="button" class="sidebar-tab" id="sidebar-tab-toc" role="tab" aria-selected="${initialPanel === "toc"}" aria-controls="sidebar-panel-toc" data-sidebar-tab="toc">${tocTitle}</button>`
+        : ""}${hasComments
+        ? `<button type="button" class="sidebar-tab" id="sidebar-tab-comments" role="tab" aria-selected="${initialPanel === "comments"}" aria-controls="sidebar-panel-comments" data-sidebar-tab="comments">コメント <span class="sidebar-count" id="annotation-count">${annotationCount}</span></button>`
+        : ""}`;
+    const markup = `<aside class="document-sidebar" aria-label="文書ナビゲーション">
+  <button type="button" class="sidebar-toggle" aria-expanded="true" aria-controls="document-sidebar-body">
+    <span data-sidebar-toggle-label>${initialPanel === "toc" ? tocTitle : "コメント"}</span>
+    <svg class="panel-toggle-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" /></svg>
+  </button>
+  <div class="document-sidebar-body" id="document-sidebar-body">
+    <div class="sidebar-tabs" role="tablist" aria-label="文書サイドバー">${tabs}</div>
+    <div class="sidebar-panels">
+${tableOfContents}${annotations}
+    </div>
+  </div>
+</aside>`;
+    const styles = `
+.document-sidebar{grid-area:toc;position:sticky;top:32px;box-sizing:border-box;display:flex;max-height:calc(100vh - 64px);min-height:0;flex-direction:column;border:1px solid var(--borderColor-muted,#d8dee4);border-radius:8px;background:var(--bgColor-default,#fff);overflow:hidden}
+.sidebar-toggle{display:none}
+.document-sidebar-body{display:flex;min-height:0;flex:0 1 auto;flex-direction:column;overflow:hidden}
+.sidebar-tabs{display:flex;flex:none;gap:4px;padding:10px 10px 0;border-bottom:1px solid var(--borderColor-muted,#d8dee4)}
+.sidebar-tab{position:relative;min-width:0;flex:1;padding:8px 6px 10px;color:var(--fgColor-muted,#59636e);font:inherit;font-size:.8125rem;font-weight:600;line-height:1.25;background:transparent;border:0;cursor:pointer}
+.sidebar-tab::after{position:absolute;right:4px;bottom:-1px;left:4px;height:2px;background:transparent;content:""}
+.sidebar-tab:hover{color:var(--fgColor-default,#1f2328)}
+.sidebar-tab:focus-visible{outline:2px solid var(--focus-outlineColor,#0969da);outline-offset:-2px}
+.sidebar-tab[aria-selected="true"]{color:var(--fgColor-default,#1f2328)}
+.sidebar-tab[aria-selected="true"]::after{background:var(--borderColor-accent-emphasis,#0969da)}
+.sidebar-count{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;margin-left:3px;padding:0 4px;color:var(--fgColor-muted,#59636e);font-size:.6875rem;line-height:18px;background:var(--bgColor-muted,#f6f8fa);border-radius:9px}
+.sidebar-panels{display:flex;min-height:0;flex:0 1 auto;align-items:flex-start;overflow:hidden}
+.sidebar-panel{box-sizing:border-box;width:100%;max-height:100%;min-height:0;overflow:auto;padding:12px;scrollbar-width:thin;scrollbar-color:var(--borderColor-default,#d0d7de) transparent}
+.sidebar-panel[hidden],.document-sidebar-body[hidden]{display:none}
+@media(max-width:900px){.document-sidebar{z-index:10;top:12px;width:auto;max-height:calc(100vh - 24px);box-shadow:0 4px 12px rgba(31,35,40,.08)}.sidebar-toggle{box-sizing:border-box;display:flex;width:100%;min-height:44px;flex:none;align-items:center;justify-content:space-between;padding:8px 12px;color:var(--fgColor-default,#1f2328);font:inherit;font-size:.9375rem;font-weight:700;background:transparent;border:0;cursor:pointer}.sidebar-toggle:focus-visible{outline:2px solid var(--focus-outlineColor,#0969da);outline-offset:-2px}.sidebar-toggle[aria-expanded="false"] .panel-toggle-icon{transform:rotate(-90deg)}.sidebar-tabs{padding-top:0}}
+@media(prefers-reduced-motion:reduce){.panel-toggle-icon{transition:none}}`;
+    const script = `<script>(()=>{
+const sidebar=document.querySelector('.document-sidebar');if(!sidebar)return;
+const tabs=[...sidebar.querySelectorAll('[data-sidebar-tab]')],panels=[...sidebar.querySelectorAll('.sidebar-panel')],toggle=sidebar.querySelector('.sidebar-toggle'),body=sidebar.querySelector('.document-sidebar-body'),label=sidebar.querySelector('[data-sidebar-toggle-label]'),compact=matchMedia('(max-width: 900px)');
+let active=${JSON.stringify(initialPanel)};
+function activate(name,focus=false){const tab=tabs.find(item=>item.dataset.sidebarTab===name);if(!tab)return;active=name;for(const item of tabs){const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1}for(const panel of panels)panel.hidden=panel.id!=='sidebar-panel-'+name;label.textContent=tab.childNodes[0].textContent.trim();if(compact.matches){body.hidden=false;toggle.setAttribute('aria-expanded','true')}if(focus)tab.focus()}
+function setExpanded(expanded){toggle.setAttribute('aria-expanded',String(expanded));body.hidden=!expanded}
+tabs.forEach((tab,index)=>{tab.addEventListener('click',()=>activate(tab.dataset.sidebarTab));tab.addEventListener('keydown',event=>{if(event.key!=='ArrowLeft'&&event.key!=='ArrowRight')return;event.preventDefault();const step=event.key==='ArrowRight'?1:-1;activate(tabs[(index+step+tabs.length)%tabs.length].dataset.sidebarTab,true)})});
+toggle.addEventListener('click',()=>setExpanded(toggle.getAttribute('aria-expanded')!=='true'));
+sidebar.addEventListener('click',event=>{if(compact.matches&&event.target.closest('.table-of-contents a'))setExpanded(false)});
+addEventListener('marksites:show-comments',()=>activate('comments'));
+const sync=()=>setExpanded(!compact.matches);compact.addEventListener('change',sync);activate(active);sync();
+})()</script>`;
+    return { markup, styles, script };
+}

package/dist/features/sidebar.d.ts

@@ -0,0 +1,13 @@
+interface SidebarOptions {
+    tableOfContents: string;
+    tableOfContentsTitle: string;
+    annotations: string;
+    annotationCount: number;
+}
+export interface SidebarFeature {
+    markup: string;
+    styles: string;
+    script: string;
+}
+export declare function createSidebarFeature({ tableOfContents, tableOfContentsTitle, annotations, annotationCount, }: SidebarOptions): SidebarFeature;
+export {};

package/dist/features/sidebar.js

@@ -0,0 +1,55 @@
+import { escapeHtml } from "../utils/html.js";
+export function createSidebarFeature({ tableOfContents, tableOfContentsTitle, annotations, annotationCount, }) {
+    if (!tableOfContents && !annotations)
+        return { markup: "", styles: "", script: "" };
+    const hasComments = annotations !== "";
+    const tocTitle = escapeHtml(tableOfContentsTitle);
+    const initialPanel = tableOfContents ? "toc" : "comments";
+    const tabs = `${tableOfContents
+        ? `<button type="button" class="sidebar-tab" id="sidebar-tab-toc" role="tab" aria-selected="${initialPanel === "toc"}" aria-controls="sidebar-panel-toc" data-sidebar-tab="toc">${tocTitle}</button>`
+        : ""}${hasComments
+        ? `<button type="button" class="sidebar-tab" id="sidebar-tab-comments" role="tab" aria-selected="${initialPanel === "comments"}" aria-controls="sidebar-panel-comments" data-sidebar-tab="comments">コメント <span class="sidebar-count" id="annotation-count">${annotationCount}</span></button>`
+        : ""}`;
+    const markup = `<aside class="document-sidebar" aria-label="文書ナビゲーション">
+  <button type="button" class="sidebar-toggle" aria-expanded="true" aria-controls="document-sidebar-body">
+    <span data-sidebar-toggle-label>${initialPanel === "toc" ? tocTitle : "コメント"}</span>
+    <svg class="panel-toggle-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" /></svg>
+  </button>
+  <div class="document-sidebar-body" id="document-sidebar-body">
+    <div class="sidebar-tabs" role="tablist" aria-label="文書サイドバー">${tabs}</div>
+    <div class="sidebar-panels">
+${tableOfContents}${annotations}
+    </div>
+  </div>
+</aside>`;
+    const styles = `
+.document-sidebar{grid-area:toc;position:sticky;top:32px;box-sizing:border-box;display:flex;max-height:calc(100vh - 64px);min-height:0;flex-direction:column;border:1px solid var(--borderColor-muted,#d8dee4);border-radius:8px;background:var(--bgColor-default,#fff);overflow:hidden}
+.sidebar-toggle{display:none}
+.document-sidebar-body{display:flex;min-height:0;flex:1;flex-direction:column}
+.sidebar-tabs{display:flex;flex:none;gap:4px;padding:10px 10px 0;border-bottom:1px solid var(--borderColor-muted,#d8dee4)}
+.sidebar-tab{position:relative;min-width:0;flex:1;padding:8px 6px 10px;color:var(--fgColor-muted,#59636e);font:inherit;font-size:.8125rem;font-weight:600;line-height:1.25;background:transparent;border:0;cursor:pointer}
+.sidebar-tab::after{position:absolute;right:4px;bottom:-1px;left:4px;height:2px;background:transparent;content:""}
+.sidebar-tab:hover{color:var(--fgColor-default,#1f2328)}
+.sidebar-tab:focus-visible{outline:2px solid var(--focus-outlineColor,#0969da);outline-offset:-2px}
+.sidebar-tab[aria-selected="true"]{color:var(--fgColor-default,#1f2328)}
+.sidebar-tab[aria-selected="true"]::after{background:var(--borderColor-accent-emphasis,#0969da)}
+.sidebar-count{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;margin-left:3px;padding:0 4px;color:var(--fgColor-muted,#59636e);font-size:.6875rem;line-height:18px;background:var(--bgColor-muted,#f6f8fa);border-radius:9px}
+.sidebar-panels{display:flex;min-height:0;flex:1}
+.sidebar-panel{box-sizing:border-box;width:100%;min-height:0;overflow:auto;padding:12px;scrollbar-width:thin;scrollbar-color:var(--borderColor-default,#d0d7de) transparent}
+.sidebar-panel[hidden],.document-sidebar-body[hidden]{display:none}
+@media(max-width:900px){.document-sidebar{z-index:10;top:12px;width:auto;max-height:calc(100vh - 24px);box-shadow:0 4px 12px rgba(31,35,40,.08)}.sidebar-toggle{box-sizing:border-box;display:flex;width:100%;min-height:44px;flex:none;align-items:center;justify-content:space-between;padding:8px 12px;color:var(--fgColor-default,#1f2328);font:inherit;font-size:.9375rem;font-weight:700;background:transparent;border:0;cursor:pointer}.sidebar-toggle:focus-visible{outline:2px solid var(--focus-outlineColor,#0969da);outline-offset:-2px}.sidebar-toggle[aria-expanded="false"] .panel-toggle-icon{transform:rotate(-90deg)}.sidebar-tabs{padding-top:0}}
+@media(prefers-reduced-motion:reduce){.panel-toggle-icon{transition:none}}`;
+    const script = `<script>(()=>{
+const sidebar=document.querySelector('.document-sidebar');if(!sidebar)return;
+const tabs=[...sidebar.querySelectorAll('[data-sidebar-tab]')],panels=[...sidebar.querySelectorAll('.sidebar-panel')],toggle=sidebar.querySelector('.sidebar-toggle'),body=sidebar.querySelector('.document-sidebar-body'),label=sidebar.querySelector('[data-sidebar-toggle-label]'),compact=matchMedia('(max-width: 900px)');
+let active=${JSON.stringify(initialPanel)};
+function activate(name,focus=false){const tab=tabs.find(item=>item.dataset.sidebarTab===name);if(!tab)return;active=name;for(const item of tabs){const selected=item===tab;item.setAttribute('aria-selected',String(selected));item.tabIndex=selected?0:-1}for(const panel of panels)panel.hidden=panel.id!=='sidebar-panel-'+name;label.textContent=tab.childNodes[0].textContent.trim();if(compact.matches){body.hidden=false;toggle.setAttribute('aria-expanded','true')}if(focus)tab.focus()}
+function setExpanded(expanded){toggle.setAttribute('aria-expanded',String(expanded));body.hidden=!expanded}
+tabs.forEach((tab,index)=>{tab.addEventListener('click',()=>activate(tab.dataset.sidebarTab));tab.addEventListener('keydown',event=>{if(event.key!=='ArrowLeft'&&event.key!=='ArrowRight')return;event.preventDefault();const step=event.key==='ArrowRight'?1:-1;activate(tabs[(index+step+tabs.length)%tabs.length].dataset.sidebarTab,true)})});
+toggle.addEventListener('click',()=>setExpanded(toggle.getAttribute('aria-expanded')!=='true'));
+sidebar.addEventListener('click',event=>{if(compact.matches&&event.target.closest('.table-of-contents a'))setExpanded(false)});
+addEventListener('marksites:show-comments',()=>activate('comments'));
+const sync=()=>setExpanded(!compact.matches);compact.addEventListener('change',sync);activate(active);sync();
+})()</script>`;
+    return { markup, styles, script };
+}