wiki-formant 0.25.0 → 0.26.1

package/README.md

@@ -437,6 +437,8 @@ In React, `useArticlePasses(ref, [blocks])` runs the three passes and `useTweetE
 
 `sortTables` makes the tables stored in article HTML sortable by their headers. They arrive as a string a `dangerouslySetInnerHTML` wrote, so React never sees their rows and cannot sort them. A column is dates if every filled cell starts with one, numbers if every one does, and text otherwise — one stray value makes the whole column text, which beats sorting half of it by one rule and half by another. A third press restores the author's order, which is often chronological or ranked and otherwise needs a reload. Label/value tables and tables with merged cells are left alone. The markup it writes — `aria-sort` on the cell, a `.sort-header` button inside it — is the markup a React sortable header should write too, so both kinds of table draw their arrows from one stylesheet rule.
 
+`scrollTables(html)` is the one table pass that runs on the string, before render: it wraps each stored table in a `.table-scroll` box, and `base.css` lets that box scroll sideways. A table box ignores `overflow`, so a table with an address or a URL in a cell is as wide as that token whatever its column, and a scroll box added by an effect would arrive after the table had already been laid out too wide. Call it on the render path beside `injectHeadingIds`. A table already in a box keeps it, so it is safe on HTML that has been through it once.
+
 `TWITTER_ORIGIN` is written down once. It is both the embed host and the allow-list `onTweetResize` checks before believing a posted height, and it had been spelled out at four call sites across two repos. Any page can `postMessage`; only the embed host may size the embed.
 
 ## Search
@@ -542,7 +544,7 @@ they name a gap in the corpus in the reader's own words.
 
 ## Base stylesheet
 
-`wiki-formant/base.css` is the layout the package's markup does not work without, and nothing else: columns that stack until there is room, stored tab panels that show one at a time, a copy button pinned to its block's corner and visible on focus and on touch, and the `aria-sort` arrow as a mask over `currentColor`. No colour and no scale, so a design system's own rules override it at equal specificity.
+`wiki-formant/base.css` is the layout the package's markup does not work without, and nothing else: columns that stack until there is room, stored tab panels that show one at a time, a copy button pinned to its block's corner and visible on focus and on touch, a stored table's scroll box, and the `aria-sort` arrow as a mask over `currentColor`. No colour and no scale, so a design system's own rules override it at equal specificity.
 
 ```css
 @import "wiki-formant/base.css" layer(components);

package/dist/base.css

@@ -46,6 +46,11 @@
 .tab-panel:not(.active) { display: none; }
 [data-tabs]:not([data-tabs-init]) [data-tab-item] ~ [data-tab-item] { display: none; }
 
+/* ---- table scroll boxes (scrollTables) -----------------------------------
+   A stored table wider than its column scrolls inside its own box, at every
+   width, instead of painting past the column. */
+.table-scroll { overflow-x: auto; }
+
 /* ---- code copy buttons (addCopyButtons) -----------------------------------
    The script positions the <pre>; this pins the button in its corner. Shown
    on hover, on keyboard focus, and always where there is no hover to show it. */

package/dist/dom.d.ts

@@ -89,3 +89,17 @@ export interface SortTablesOptions {
  * tables with fewer than two rows to sort; and rows that span several `<tbody>`s.
  */
 export declare function sortTables(root: ParentNode, options?: SortTablesOptions): void;
+/**
+ * Wrap every table in stored article HTML in a `.table-scroll` box, which
+ * `base.css` lets scroll sideways.
+ *
+ * A table box ignores `overflow`, and a stored table is as wide as its longest
+ * unbreakable token, an address or a URL, however narrow its column. radix-wiki
+ * gave it a scroll box only on phones, keyed to the viewport; at 1024px its
+ * column was 425px and a 1,068px ledger ran under the sticky infobox beside it.
+ * Unlike `sortTables` this runs on the string, before render: an effect would
+ * run after the table had already been laid out too wide.
+ *
+ * A table already in a box keeps it, so a second pass changes nothing.
+ */
+export declare function scrollTables(html: string): string;

package/dist/dom.js

@@ -298,3 +298,27 @@ export function sortTables(root, options = {}) {
         });
     }
 }
+// ---- scroll boxes -----------------------------------------------------------
+const SCROLL_BOX = '<div class="table-scroll">';
+/**
+ * Wrap every table in stored article HTML in a `.table-scroll` box, which
+ * `base.css` lets scroll sideways.
+ *
+ * A table box ignores `overflow`, and a stored table is as wide as its longest
+ * unbreakable token, an address or a URL, however narrow its column. radix-wiki
+ * gave it a scroll box only on phones, keyed to the viewport; at 1024px its
+ * column was 425px and a 1,068px ledger ran under the sticky infobox beside it.
+ * Unlike `sortTables` this runs on the string, before render: an effect would
+ * run after the table had already been laid out too wide.
+ *
+ * A table already in a box keeps it, so a second pass changes nothing.
+ */
+export function scrollTables(html) {
+    const boxed = [];
+    return html.replace(/(<div class="table-scroll">\s*)?<table\b|<\/table>/gi, (tag, hadBox) => {
+        if (tag[1] === '/')
+            return boxed.pop() ? `${tag}</div>` : tag;
+        boxed.push(!hadBox);
+        return hadBox ? tag : SCROLL_BOX + tag;
+    });
+}

package/dist/markdown.js

@@ -81,35 +81,51 @@ export function tableToMarkdown(html) {
         ...body.map(r => `| ${r.join(' | ')} |`),
     ].join('\n');
 }
+// The spaces either side go with it: at a block boundary they are not text.
+const BLOCK_TOKEN = /[ \t]*\u0000(\d+)\u0000[ \t]*/g;
 /** Block-level HTML → markdown. */
 export function htmlToMarkdown(html) {
     let out = html;
+    // Each converted block is set aside behind a token and put back at the end.
+    // The `<div>` rule reads its body as inline text and collapses whitespace, so
+    // a block already converted inside a div lost every newline: a boxed table
+    // (`scrollTables`) came out as one line of pipes, and so did a list, a code
+    // listing or a callout's paragraphs.
+    const blocks = [];
+    const block = (md) => `\u0000${blocks.push(`\n\n${md}\n\n`) - 1}\u0000`;
+    const restore = (s) => s.replace(BLOCK_TOKEN, (_m, i) => restore(blocks[Number(i)]));
+    // A list inside an item is already a block by the time its parent converts;
+    // it goes under the item's line, indented, rather than onto it.
+    const listItem = (marker, body) => [
+        `${marker} ${inlineToMarkdown(body.replace(BLOCK_TOKEN, ''))}`,
+        ...[...body.matchAll(BLOCK_TOKEN)].map(m => restore(m[0]).trim().replace(/^/gm, '   ')),
+    ].join('\n');
     // Tables first — their inner markup must not be eaten by the generic rules.
-    out = out.replace(/<table\b[^>]*>[\s\S]*?<\/table>/gi, m => `\n\n${tableToMarkdown(m)}\n\n`);
+    out = out.replace(/<table\b[^>]*>[\s\S]*?<\/table>/gi, m => block(tableToMarkdown(m)));
     // Lists. `<ol>` numbering is computed per-list, which is why this cannot be a
     // single regex with a `$1` backreference — inside a replace callback `$1` is
     // a literal, not a substitution. (That exact bug shipped once and rendered
     // every ordered list as a column of `1. $1`.)
     out = out.replace(/<ul\b[^>]*>([\s\S]*?)<\/ul>/gi, (_m, body) => {
-        const items = [...body.matchAll(/<li\b[^>]*>([\s\S]*?)<\/li>/gi)].map(i => `- ${inlineToMarkdown(i[1])}`);
-        return `\n\n${items.join('\n')}\n\n`;
+        const items = [...body.matchAll(/<li\b[^>]*>([\s\S]*?)<\/li>/gi)].map(i => listItem('-', i[1]));
+        return block(items.join('\n'));
     });
     out = out.replace(/<ol\b[^>]*>([\s\S]*?)<\/ol>/gi, (_m, body) => {
-        const items = [...body.matchAll(/<li\b[^>]*>([\s\S]*?)<\/li>/gi)].map((i, n) => `${n + 1}. ${inlineToMarkdown(i[1])}`);
-        return `\n\n${items.join('\n')}\n\n`;
+        const items = [...body.matchAll(/<li\b[^>]*>([\s\S]*?)<\/li>/gi)].map((i, n) => listItem(`${n + 1}.`, i[1]));
+        return block(items.join('\n'));
     });
     out = out
-        .replace(/<pre\b[^>]*>\s*<code\b[^>]*>([\s\S]*?)<\/code>\s*<\/pre>/gi, (_m, code) => `\n\n\`\`\`\n${decodeEntities(code).trim()}\n\`\`\`\n\n`)
-        .replace(/<pre\b[^>]*>([\s\S]*?)<\/pre>/gi, (_m, code) => `\n\n\`\`\`\n${decodeEntities(code).trim()}\n\`\`\`\n\n`)
-        .replace(/<blockquote\b[^>]*>([\s\S]*?)<\/blockquote>/gi, (_m, body) => `\n\n${inlineToMarkdown(body)
+        .replace(/<pre\b[^>]*>\s*<code\b[^>]*>([\s\S]*?)<\/code>\s*<\/pre>/gi, (_m, code) => block(`\`\`\`\n${decodeEntities(code).trim()}\n\`\`\``))
+        .replace(/<pre\b[^>]*>([\s\S]*?)<\/pre>/gi, (_m, code) => block(`\`\`\`\n${decodeEntities(code).trim()}\n\`\`\``))
+        .replace(/<blockquote\b[^>]*>([\s\S]*?)<\/blockquote>/gi, (_m, body) => block(inlineToMarkdown(body)
         .split('\n')
         .map(l => `> ${l}`)
-        .join('\n')}\n\n`)
-        .replace(/<h([1-6])\b[^>]*>([\s\S]*?)<\/h\1>/gi, (_m, level, body) => `\n\n${'#'.repeat(Number(level))} ${inlineToMarkdown(body)}\n\n`)
-        .replace(/<hr\s*\/?>/gi, '\n\n---\n\n')
-        .replace(/<p\b[^>]*>([\s\S]*?)<\/p>/gi, (_m, body) => `\n\n${inlineToMarkdown(body)}\n\n`)
+        .join('\n')))
+        .replace(/<h([1-6])\b[^>]*>([\s\S]*?)<\/h\1>/gi, (_m, level, body) => block(`${'#'.repeat(Number(level))} ${inlineToMarkdown(body)}`))
+        .replace(/<hr\s*\/?>/gi, () => block('---'))
+        .replace(/<p\b[^>]*>([\s\S]*?)<\/p>/gi, (_m, body) => block(inlineToMarkdown(body)))
         .replace(/<div\b[^>]*>([\s\S]*?)<\/div>/gi, (_m, body) => `\n\n${inlineToMarkdown(body)}\n\n`);
-    return decodeEntities(out.replace(/<[^>]+>/g, ''))
+    return decodeEntities(restore(out).replace(/<[^>]+>/g, ''))
         .replace(/[ \t]+$/gm, '')
         .replace(/\n{3,}/g, '\n\n')
         .trim();

package/dist/react.d.ts

@@ -83,7 +83,8 @@ export interface TableOfContentsProps {
     offsetVar?: string;
     /** Fallback offset in px when `offsetVar` is unset or unparseable. */
     offsetFallback?: number;
-    /** Indent per heading level, in rem. Set 0 for a flat list. */
+    /** Indent per heading level, in rem. Set 0 for a flat list, whose items then
+     *  take their padding from the stylesheet: an inline `padding-left: 0` beat it. */
     indentRem?: number;
     /** Rendered instead of nothing when the article has no headings. */
     empty?: ReactNode;

package/dist/react.js

@@ -248,7 +248,7 @@ export function TableOfContents({ containerSelector, headings: providedHeadings,
                         document.getElementById(h.id)?.scrollIntoView({ behavior: 'smooth' });
                     }, className: currentId === h.id
                         ? [classNames.item, classNames.itemActive].filter(Boolean).join(' ')
-                        : classNames.item, "aria-current": currentId === h.id ? 'location' : undefined, style: { paddingLeft: `${(h.level - 1) * indentRem}rem` }, children: h.text }, h.id))) }))] }));
+                        : classNames.item, "aria-current": currentId === h.id ? 'location' : undefined, style: (h.level - 1) * indentRem ? { paddingLeft: `${(h.level - 1) * indentRem}rem` } : undefined, children: h.text }, h.id))) }))] }));
 }
 // ---- outside clicks ---------------------------------------------------------
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.25.0",
+  "version": "0.26.1",
   "description": "The portable half of a wiki: derived taxonomy and facet controls, a version-negotiating MCP transport, markdown twins, block rendering, a rich-text editor engine, and conditional-GET plumbing.",
   "type": "module",
   "license": "MIT",
@@ -177,8 +177,8 @@
     }
   },
   "bin": {
-    "check-classes": "./bin/check-classes.mjs",
-    "check-pages": "./bin/check-pages.mjs"
+    "check-classes": "bin/check-classes.mjs",
+    "check-pages": "bin/check-pages.mjs"
   },
   "files": [
     "dist",