marksites 0.2.5 → 0.2.7

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

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

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

@@ -0,0 +1,7 @@
+export interface DocumentViewFeature {
+    control: string;
+    content: string;
+    styles: string;
+    script: string;
+}
+export declare function createDocumentViewFeature(markdown: string, hasDiff: boolean): DocumentViewFeature;

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

@@ -0,0 +1,33 @@
+import { escapeHtml } from "../../utils/html.js";
+function renderSourceLines(markdown) {
+    const lines = markdown.split("\n");
+    if (lines.length > 1 && lines.at(-1) === "")
+        lines.pop();
+    return lines
+        .map((line) => `<span class="markdown-source-line">${escapeHtml(line.replace(/\r$/, ""))}</span>`)
+        .join("");
+}
+export function createDocumentViewFeature(markdown, hasDiff) {
+    const control = `<button type="button" class="document-content-action document-preview-toggle" data-document-preview-toggle aria-label="Previewを表示" title="Previewを表示" aria-pressed="true"><span>Preview</span></button>
+<button type="button" class="document-content-action document-source-toggle" data-document-source-toggle aria-label="コードを表示" title="コードを表示" aria-pressed="false"><span>コード</span></button>`;
+    const content = `<main class="markdown-source-content" aria-label="Markdown原文" hidden><pre><code>${renderSourceLines(markdown)}</code></pre></main>`;
+    const styles = `
+.document-content{position:relative;grid-area:content;min-width:0}.document-content-actions{display:flex;min-height:44px;align-items:center;justify-content:flex-start;gap:4px;margin-bottom:12px;padding:0 4px;border-bottom:1px solid var(--borderColor-muted,#d8dee4)}.document-content-action{position:relative;display:inline-flex;height:36px;align-items:center;justify-content:center;gap:6px;padding:0 10px;color:var(--fgColor-muted,#59636e);font:inherit;font-size:.75rem;font-weight:600;background:transparent;border:0;border-radius:6px 6px 0 0;cursor:pointer}.document-content-action:hover:not(:disabled){color:var(--fgColor-default,#1f2328);background:var(--button-default-bgColor-hover,#eaeef2)}.document-content-action:focus-visible{outline:2px solid var(--focus-outlineColor,#0969da);outline-offset:-2px}.document-content-action>span{line-height:16px}.document-content-action[aria-pressed="true"]{color:var(--fgColor-default,#1f2328)}.document-content-action[aria-pressed="true"]::after{position:absolute;right:8px;bottom:-5px;left:8px;height:2px;background:var(--borderColor-accent-emphasis,#0969da);content:""}.document-content-action:disabled{color:var(--fgColor-muted,#59636e);opacity:.45;cursor:not-allowed}
+.markdown-source-content{box-sizing:border-box;min-width:0;margin-bottom:72px;padding:8px 0 24px;color:var(--fgColor-default,#1f2328);background:transparent;border:0;border-radius:0;box-shadow:none}.markdown-source-content[hidden]{display:none}.markdown-source-content pre{margin:0;padding:8px 0;overflow:auto;color:var(--codeBlock-fgColor,#24292f);background:transparent;border:0;border-radius:0;counter-reset:markdown-source-line}.markdown-source-content code{display:block;min-width:max-content;padding:0;color:inherit;background:transparent;white-space:pre;font:12px/1.5 ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace}.markdown-source-line{position:relative;display:block;min-height:1.5em;padding:0 20px 0 64px}.markdown-source-line::before{position:absolute;top:0;bottom:0;left:0;box-sizing:border-box;width:48px;padding-right:12px;color:var(--fgColor-muted,#59636e);border-right:1px solid var(--borderColor-muted,#d8dee4);content:counter(markdown-source-line);counter-increment:markdown-source-line;text-align:right;user-select:none}
+@media(max-width:900px){.markdown-source-content{margin-bottom:32px}}@media(max-width:600px){.document-content-actions{overflow-x:auto}.markdown-source-line{padding-right:12px;padding-left:52px}.markdown-source-line::before{width:40px;padding-right:9px}}
+.document-content{box-sizing:border-box;margin-bottom:72px;background:var(--bgColor-default,#fff);border:1px solid var(--borderColor-muted,#d8dee4);border-radius:8px;box-shadow:0 1px 2px rgba(31,35,40,.04);overflow:hidden}.document-content-actions{margin-bottom:0}.document-content>.markdown-content,.document-content>.document-diff-content{margin:0;border:0;border-radius:0;box-shadow:none}.document-content>.markdown-source-content{margin:0;padding-top:20px}@media(max-width:900px){.document-content{margin-bottom:32px}.document-content>.markdown-source-content{margin-bottom:0}}@media(max-width:600px){.document-content{border-radius:6px}.document-content>.markdown-content,.document-content>.document-diff-content{border-radius:0}}
+.document-content-action{border-radius:6px}.document-replacement-menu{margin-left:auto}.document-content>.markdown-source-content{padding-top:0}.markdown-source-content pre{padding-top:0}.markdown-source-line::before{position:sticky;top:auto;bottom:auto;left:0;display:inline-block;height:1.5em;margin-left:-64px;margin-right:16px;background:var(--bgColor-default,#fff);vertical-align:top}@media(max-width:600px){.markdown-source-line::before{margin-left:-52px;margin-right:12px}}
+.markdown-source-content pre::before{position:sticky;left:47px;display:block;width:1px;height:12px;background:var(--borderColor-muted,#d8dee4);content:""}@media(max-width:600px){.markdown-source-content pre::before{left:39px}}
+`;
+    const script = `<script>(()=>{
+const parameter='document-view',previewButton=document.querySelector('[data-document-preview-toggle]'),sourceButton=document.querySelector('[data-document-source-toggle]'),replacementButton=document.querySelector('[data-replacement-menu]'),diffButton=document.querySelector('[data-document-diff-toggle]'),current=document.querySelector('.markdown-content'),source=document.querySelector('.markdown-source-content'),diff=document.querySelector('.document-diff-content'),available=${hasDiff},pageUrl=new URL(location.href);
+let intent=['markdown','diff'].includes(pageUrl.searchParams.get(parameter))?pageUrl.searchParams.get(parameter):'current';
+const update=url=>{url.searchParams.delete(parameter);if(intent==='markdown'||intent==='diff')url.searchParams.set(parameter,intent);return url};
+function syncLinks(){for(const link of document.querySelectorAll('a[href]')){const raw=link.getAttribute('href');if(!raw||raw.startsWith('#'))continue;const url=new URL(raw,location.href);if(url.protocol===location.protocol&&url.host===location.host&&url.pathname.endsWith('.html'))link.href=update(url).href}}
+function syncLabels(){const english=document.body.dataset.language==='en',showDiff=document.body.dataset.documentView==='diff',previewLabel=english?'Show preview':'Previewを表示',sourceLabel=english?'Show code':'コードを表示';previewButton.setAttribute('aria-label',previewLabel);previewButton.title=previewLabel;sourceButton.setAttribute('aria-label',sourceLabel);sourceButton.title=sourceLabel;const diffLabel=available?(showDiff?(english?'Show latest':'最新版を表示'):(english?'Show changes':'差分を表示')):(english?'No changes since the previous build':'前回からの変更はありません');diffButton.setAttribute('aria-label',diffLabel);diffButton.title=diffLabel}
+function apply(view,write=true){intent=view;const actual=view==='markdown'?'markdown':view==='diff'&&available?'diff':'current',showCurrent=actual==='current',showSource=actual==='markdown',showDiff=actual==='diff';document.body.dataset.documentView=actual;current.hidden=!showCurrent;source.hidden=!showSource;diff.hidden=!showDiff;previewButton.setAttribute('aria-pressed',String(showCurrent));sourceButton.setAttribute('aria-pressed',String(showSource));if(replacementButton)replacementButton.disabled=!showCurrent;diffButton.setAttribute('aria-pressed',String(showDiff));diffButton.querySelector('[data-document-diff-icon]').hidden=showDiff;diffButton.querySelector('[data-document-current-icon]').hidden=!showDiff;syncLabels();if(write)history.replaceState(null,'',update(new URL(location.href)));syncLinks()}
+window.marksitesSyncDocumentViewLabels=syncLabels;
+previewButton.addEventListener('click',()=>apply('current'));sourceButton.addEventListener('click',()=>apply('markdown'));if(available)diffButton.addEventListener('click',()=>apply(document.body.dataset.documentView==='diff'?'current':'diff'));for(const link of document.querySelectorAll('.table-of-contents a[href^="#"]'))link.addEventListener('click',()=>{if(document.body.dataset.documentView==='markdown')apply('current')});apply(intent,available||intent!=='diff');
+})()</script>`;
+    return { control, content, styles, script };
+}

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

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

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

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

package/dist/features/header/index.js

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+export function createTableResizerFeature(enabled) {
+    if (!enabled)
+        return { styles: "", script: "" };
+    const styles = `
+    .table-resizable-container { position: relative; max-width: 100%; margin-bottom: var(--base-size-16); overflow-x: auto; }
+    .markdown-content .table-resizable-container table.is-column-resizable { display: table; table-layout: fixed; max-width: none; margin-bottom: 0; overflow: visible; }
+    .table-column-resizer { position: absolute; z-index: 2; top: 0; width: 10px; padding: 0; background: transparent; border: 0; transform: translateX(-5px); cursor: col-resize; touch-action: none; user-select: none; }
+    .table-column-resizer::after { position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: var(--borderColor-accent-emphasis, #0969da); content: ""; opacity: 0; }
+    .table-column-resizer:hover::after, .table-column-resizer:focus-visible::after, .table-column-resizer.is-resizing::after { opacity: 1; }
+    .table-column-resizer:focus-visible { outline: 2px solid var(--focus-outlineColor, #0969da); outline-offset: -2px; }
+    body.is-resizing-table-column { cursor: col-resize; user-select: none; }`;
+    const script = `<script>(()=>{const minimum=48;for(const table of document.querySelectorAll('.markdown-content table')){const headers=table.tHead?.rows[0]?.cells;if(!headers?.length||Array.from(headers).some(cell=>cell.colSpan!==1)||table.querySelector(':scope > colgroup'))continue;const widths=Array.from(headers,cell=>cell.getBoundingClientRect().width);const container=document.createElement('div');container.className='table-resizable-container';table.before(container);container.append(table);const group=document.createElement('colgroup');for(const width of widths){const column=document.createElement('col');column.style.width=width+'px';group.append(column)}table.prepend(group);table.classList.add('is-column-resizable');const handles=[];const layout=()=>{table.style.width=widths.reduce((sum,width)=>sum+width,0)+'px';let offset=0;handles.forEach((handle,index)=>{offset+=widths[index];handle.style.left=offset+'px';handle.style.height=table.offsetHeight+'px'})};Array.from(headers).forEach((cell,index)=>{const handle=document.createElement('button');handle.type='button';handle.className='table-column-resizer';handle.setAttribute('aria-label',(cell.textContent?.trim()||String(index+1))+'列の幅を変更');handle.setAttribute('aria-orientation','vertical');handles.push(handle);container.append(handle);let drag=null;const resize=width=>{widths[index]=Math.max(minimum,width);group.children[index].style.width=widths[index]+'px';layout()};handle.addEventListener('pointerdown',event=>{if(event.button!==0)return;event.preventDefault();event.stopPropagation();drag={id:event.pointerId,x:event.clientX,width:widths[index]};handle.setPointerCapture(event.pointerId);handle.classList.add('is-resizing');document.body.classList.add('is-resizing-table-column')});handle.addEventListener('click',event=>event.stopPropagation());handle.addEventListener('pointermove',event=>{if(!drag||drag.id!==event.pointerId)return;resize(drag.width+event.clientX-drag.x)});const finish=event=>{if(!drag||drag.id!==event.pointerId)return;drag=null;handle.classList.remove('is-resizing');document.body.classList.remove('is-resizing-table-column')};handle.addEventListener('pointerup',finish);handle.addEventListener('pointercancel',finish);handle.addEventListener('keydown',event=>{if(event.key!=='ArrowLeft'&&event.key!=='ArrowRight')return;event.preventDefault();resize(widths[index]+(event.key==='ArrowLeft'?-10:10))})});layout()}})();</script>`;
+    return { styles, script };
+}