marksites 0.2.5 → 0.2.7

package/dist/features/table-sorter/index.d.ts

@@ -0,0 +1,5 @@
+export interface TableSorterFeature {
+    styles: string;
+    script: string;
+}
+export declare function createTableSorterFeature(enabled: boolean): TableSorterFeature;

package/dist/features/table-sorter/index.js

@@ -0,0 +1,18 @@
+export function createTableSorterFeature(enabled) {
+    if (!enabled)
+        return { styles: "", script: "" };
+    const styles = `
+    .markdown-content table.is-column-sortable th { position: relative; padding-right: 40px; cursor: pointer; user-select: none; transition: background-color 120ms ease; }
+    .markdown-content table.is-column-sortable th:hover { background: var(--bgColor-muted, #f6f8fa); }
+    .markdown-content table.is-column-sortable th:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: -2px; }
+    .table-sort-indicator { position: absolute; top: 50%; right: 11px; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--fgColor-muted, #59636e); border-radius: 5px; transform: translateY(-50%); transition: color 120ms ease, background-color 120ms ease; }
+    .table-sort-indicator svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+    .table-sort-indicator path { opacity: .38; transition: opacity 120ms ease; }
+    th:hover .table-sort-indicator { color: var(--fgColor-default, #1f2328); background: var(--bgColor-neutral-muted, #818b981f); }
+    th[aria-sort="ascending"] .table-sort-indicator, th[aria-sort="descending"] .table-sort-indicator { color: var(--fgColor-accent, #0969da); background: var(--bgColor-accent-muted, #ddf4ff); }
+    th[aria-sort="ascending"] .table-sort-chevron-up, th[aria-sort="descending"] .table-sort-chevron-down { opacity: 1; }
+    th[aria-sort="ascending"] .table-sort-chevron-down, th[aria-sort="descending"] .table-sort-chevron-up { opacity: .15; }
+    @media (prefers-reduced-motion: reduce) { .markdown-content table.is-column-sortable th, .table-sort-indicator, .table-sort-indicator path { transition: none; } }`;
+    const script = `<script>(()=>{const collator=new Intl.Collator(undefined,{numeric:true,sensitivity:'base'});for(const table of document.querySelectorAll('.markdown-content table')){const headers=table.tHead?.rows[0]?.cells,bodies=Array.from(table.tBodies);if(!headers?.length||!bodies.length||Array.from(headers).some(cell=>cell.colSpan!==1))continue;const originals=bodies.map(body=>Array.from(body.rows));let active=-1,direction=0;const apply=(index,next)=>{active=index;direction=next;Array.from(headers).forEach((header,column)=>header.setAttribute('aria-sort',column===active&&direction!==0?(direction===1?'ascending':'descending'):'none'));bodies.forEach((body,bodyIndex)=>{const original=originals[bodyIndex];const order=new Map(original.map((row,rowIndex)=>[row,rowIndex]));const rows=direction===0?[...original]:[...original].sort((left,right)=>{const leftValue=left.cells[index]?.textContent?.trim()??'',rightValue=right.cells[index]?.textContent?.trim()??'';const compared=collator.compare(leftValue,rightValue);return direction*compared||(order.get(left)-order.get(right))});body.append(...rows)})};Array.from(headers).forEach((header,index)=>{header.tabIndex=0;header.setAttribute('aria-sort','none');const indicator=document.createElement('span');indicator.className='table-sort-indicator';indicator.setAttribute('aria-hidden','true');indicator.innerHTML='<svg viewBox="0 0 16 16"><path class="table-sort-chevron-up" d="M5 6.5 8 3.5l3 3"/><path class="table-sort-chevron-down" d="m5 9.5 3 3 3-3"/></svg>';header.append(indicator);const sort=()=>apply(index,active===index?(direction===1?-1:direction===-1?0:1):1);header.addEventListener('click',event=>{if(event.target.closest('button,a,input,select,textarea'))return;sort()});header.addEventListener('keydown',event=>{if(event.key!=='Enter'&&event.key!==' ')return;if(event.target!==header)return;event.preventDefault();sort()})});table.classList.add('is-column-sortable')}})();</script>`;
+    return { styles, 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,17 @@ 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 { createDocumentViewFeature } from "./features/document-view/index.js";
+import { createTableResizerFeature } from "./features/table-resizer/index.js";
+import { createTableSorterFeature } from "./features/table-sorter/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 +41,8 @@ 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 documentView = createDocumentViewFeature(markdown, documentDiff.hasChanges);
     const breadcrumbs = fileTree
         ? renderBreadcrumbs(options.fileTree?.breadcrumbs)
         : `<nav class="file-breadcrumbs" aria-label="ファイルパス"><span aria-current="page">${escapeHtml(rawTitle)}</span></nav>\n`;
@@ -44,9 +50,12 @@ 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));
+    const tableResizer = createTableResizerFeature(/<table\b/i.test(content));
+    const tableSorter = createTableSorterFeature(/<table\b/i.test(content));
     const sidebar = createSidebarFeature({
         tableOfContents: toc.markup,
         tableOfContentsTitle: toc.title,
@@ -61,6 +70,9 @@ export function renderMarkdown(markdown, options = {}, annotations) {
         regions: {
             header: header.markup,
             fileSidebar,
+            documentControls: `${documentView.control}${annotationFeature.documentControl}`,
+            sourceContent: documentView.content,
+            diffContent: `<main class="document-diff-content" aria-label="文書の差分" hidden>\n${documentDiff.content}</main>`,
             sidebar: sidebar.markup,
             overlays: `${annotationFeature.markup}${imageViewer.markup}`,
         },
@@ -70,9 +82,14 @@ export function renderMarkdown(markdown, options = {}, annotations) {
                 annotationFeature.styles,
                 imageViewer.styles,
                 header.styles,
+                documentView.styles,
+                documentDiff.styles,
+                tableResizer.styles,
+                tableSorter.styles,
             ],
             scripts: [
                 header.script,
+                documentView.script,
                 fileTreeScript,
                 renderModifiedAtScript(modifiedAt !== ""),
                 sidebar.script,
@@ -80,6 +97,8 @@ export function renderMarkdown(markdown, options = {}, annotations) {
                 `\n${codeBlocks.renderScript()}\n`,
                 `${annotationFeature.script}\n`,
                 ...(imageViewer.script ? [`${imageViewer.script}\n`] : []),
+                ...(tableSorter.script ? [`${tableSorter.script}\n`] : []),
+                ...(tableResizer.script ? [`${tableResizer.script}\n`] : []),
             ],
         },
     });

package/dist/server/html-security.js

@@ -5,9 +5,12 @@ 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 { createDocumentViewFeature } from "../features/document-view/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";
+import { createTableResizerFeature } from "../features/table-resizer/index.js";
+import { createTableSorterFeature } from "../features/table-sorter/index.js";
 function scriptBody(script) {
     return /^<script[^>]*>([\s\S]*)<\/script>$/.exec(script)?.[1] ?? "";
 }
@@ -36,6 +39,10 @@ function generatedScriptBodies() {
         scriptBody(renderedToc.script),
         scriptBody(annotations.script),
         scriptBody(createImageViewerFeature(true).script),
+        scriptBody(createTableResizerFeature(true).script),
+        scriptBody(createTableSorterFeature(true).script),
+        scriptBody(createDocumentViewFeature("same", false).script),
+        scriptBody(createDocumentViewFeature("after", true).script),
         scriptBody(createSidebarFeature({
             tableOfContents: renderedToc.markup,
             tableOfContentsTitle: renderedToc.title,

package/dist/template/document.d.ts

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

package/dist/template/document.js

@@ -19,9 +19,16 @@ ${documentStyles}${parts.regions.fileSidebar ? `\n${fileTreeStyles}` : ""}${part
 <body class="${bodyClass}">
 ${parts.regions.header}
 ${parts.regions.fileSidebar}
+<div class="document-content">
+<div class="document-content-actions" role="toolbar" aria-label="文書表示と操作">
+${parts.regions.documentControls}
+</div>
 <main class="markdown-content">
 ${parts.content}
 </main>
+${parts.regions.sourceContent}
+${parts.regions.diffContent}
+</div>
 ${parts.regions.sidebar}
 ${parts.regions.overlays}
 ${parts.assets.scripts.map(trustedScript).join("")}

package/dist/template/styles.d.ts

@@ -1,5 +1,5 @@
 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 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    .document-content, .markdown-content, .document-sidebar { box-sizing: border-box; }\n    .markdown-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; 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

@@ -12,8 +12,8 @@ body[data-theme="dark"] :is(.hljs-built_in,.hljs-symbol){color:var(--color-prett
 body[data-theme="dark"] :is(.hljs-comment,.hljs-code,.hljs-formula){color:var(--color-prettylights-syntax-comment)}
 body[data-theme="dark"] :is(.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo){color:var(--color-prettylights-syntax-entity-tag)}`;
 export 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; }
-    .markdown-content, .document-sidebar { box-sizing: border-box; }
-    .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); }
+    .document-content, .markdown-content, .document-sidebar { box-sizing: border-box; }
+    .markdown-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); }
     .markdown-content :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 32px; }
     .code-block { margin-bottom: 16px; overflow: hidden; border: 1px solid var(--borderColor-muted, #d8dee4); border-radius: 8px; }
     .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); }
@@ -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.7",
   "description": "Convert Markdown into standalone GitHub-styled HTML.",
   "type": "module",
   "exports": {